sezioneparole chiave !Abracadabra per accedere al digitale

Codici e Design della Comunicazione

Il Web come matrice comune della comunicazione digitale e i suoi codici come indispensabili regie di controllo per costruire interfacce che permettano un'efficace comunicazione cross-mediale.

firebug plugin tool

Html, Css e javaScript

La ragnatela ipertestuale !Html Css javaScript diffusa a livello mondiale nota come Web è un ambiente informativo e comunicativo che si basa su meccanismi di interazioni bidirezionali di tipo client-server grazie al quale è possibile una relazione comunicativa con l'ambiente informativo circostante. I comandi di Rete !ping, !whois e !traceroute risultano utili per capire alcuni parametri di identificazione e stato di salute di un sito Web in Internet come nodo di una Rete molto complessa a cui un client browser (Firefox ad esempio) può così accedere navigando fra infiniti nodi informativi ospitati su server Web e collegati fra loro attraverso appositi collegamenti (link il cui stato di salute è sempre doveroso monitorare). Il Web quindi come linguaggio ipertestuale la cui struttura, forma estetica e funzione sono comandati rispettivamente da appositi linguaggi di editing e programmazione quali html, css e javascript.

Dunque i linguaggi per realizzare le pagine Web si suddividono essenzialmente in tre filoni principali: il markup strutturale (ad esempio html5) il quale deve cercare di dare maggior senso e significato possibile alla strutturazione - quindi semantica - di una pagina Web, il codice che imposta il layout e la formattazione grafica attraverso fogli di stile (css) ed il codice come javascript-DOM che determina le possibili fruizioni interattive con i contenuti di un sito Web magari attingendo dinamicamente ad un apposito database (ad esempio mysql) con apposite chiamate al server Web (ad esempio tramite php).

In questo contesto è importante capire l'importanza del !markup strutturale non solo come linguaggio di editing per strutturare il Web ma come esempio di linguaggio di marcatura i cui principi si riverberano in tutte le principali forme di linguaggi che stanno alla base della strutturazione di qualsiasi linguaggio di comunicazione digitale. ML sta per markup language ed indica tutti quei linguaggi che rispettano una determinata sintassi (regole) per essere correttamente interpretati (parsing). Il linguaggio xml è come si vede un linguaggio di marcatura preceduto dalla lettera X che indica una esigenza di rispetto delle regole superiore alla media dei comuni linguaggi di marcatura fra cui la necessità di chiudere sempre i marcatori, distinguere fra minuscole e maiuscole e inserire i valori degli attributi del marcatore fra virgolette "". Il linguaggio xhtml è dunque un linguaggio html con forti esigenze di rispetto di alcune regole (sintattiche) mentre l'html5 è l'evoluzione ultima dell'html e anche il linguaggio che ha meno esigenze di rispetto di alcune regole e quindi anche il più semplice da comprendere e utilizzare. L'html è un linguaggio di editing per la definizione della struttura dei contenuti di un sito web. I marcatori del linguaggio detti anche tag si riconoscono per essere compresi fra i segni di maggiore e minore ed applicano il loro marcamento strutturale a tutto ciò a cui sono associati (testo od elementi multimediali) fino a quando non vengono chiusi con la ripetizione del loro nome arricchita dal segno dello slash oppure perchè subentra un altro marcatore (alcuni marcatori importanti come img non necessitano di essere chiusi dalla ripetizione del loro nome preceduto da slash e dunque si usa chiuderli alla maniera xhtml con spazio e slash prima del segno di maggiore). I marcatori possono avere degli attributi a loro volta contraddistinti da un valore (che contribuiscono a definire funzionalità e semantica dell'elemento marcato) e devono rispettare il principio di una corretta nidificazione.

<a href="http://www.strano.net">link <mark>importante</mark></a>
link importante

I principali marcatori di una pagina web sono:

  • doctype (tipologia della grammatica formale adottata);
  • html (il tag che definisce un documento html);
  • head (la sezione del documento html che raccoglie le meta-informazioni ovvero le informazioni che recensiscono il sito web ma anche elementi che determinano la funzionalità e l'estetica della pagina Web come script e fogli stile);
  • title (il titolo che recensisce la pagina web);
  • meta (marcatori di descrizione della pagina o del sito web e delle sue caratteristiche ivi compresa la codifica dei caratteri);
  • body (sezione del file html in cui vi sono i veri e propri contenuti della pagina web);
  • h (marcatore che identifica secondo una gerarchia da 1 a 6 le sezioni principali di un documento Web);
  • div (marcatore che identifica le singole sezioni di un documento Web);
  • p (marcatore che identifica i paragrafi, nota bene: molti marcatori sono iniziali del corrispondente termine in inglese ed in questo caso paragraph);
  • img (marcatore che identifica una immagine, molti importanti i relativi attributi src ed alt che corrispondono rispettivamente all'indirizzo relativo o assoluto della risorsa immagine e alla sua alternativa testuale);
  • a (marcatore che identifica un collegamento o link, molto importante il suo attributo href che ne identifica la url a cui è associato).

Molte organizzazioni come Mozilla mettono a disposizione strumenti e tutorial per una corretta gestione e progetazione del Web al fine di un corretto rendering della comunicazione digitale. Alcune funzioni integrate nei browser come Firefox nella loro versione normale o ancor più potenziate in quella developer del tipo ispeziona-analizza elemento - attivabili come diverse altre funzioni con il click destro del mouse - sono potenti analizzatori dello stato di qualità del codice markup html e relativo stile con i quali sperimentare possibili cambiamenti immediatamente visualizzabili sul !Rendering Web del browser in azione. In particolare risultano particolarmetne utili le funzioni come responsive view (nella versione developer capace anche di simulare connessioni di diverse tipologie e densità del pixel del monitor); analizzare il codice della pagina Web con possibilità di editing dei fogli stile CSS (animazioni comprese); analisi degli elementi componenti la pagina Web (peso compreso). Il concetto che sta alla base di questi strumenti è che il codice html ma ancor più quello css-javascript può essere valutato ma anche manipolato con effetti diretti sul rendering della pagina Web aperta sul proprio browser e questo inerente a qualsiasi contenuto prodotto da codice html-css-javascript (audio compreso).

L'utilizzo di !validatori può semplificare il lavoro di molti webmaster che possono usufruire dei tanti strumenti di validazione del W3Consortium per html, css, feed e link, di alcune interfacce di Google per i cosiddetti dati strutturati oppure di validatori molto particolari capaci di validare il codice di interi siti Web, di newsletter visualizzabili su svariate tipologie di mailreader, di altri ancora capaci di focalizzarsi sulla sintassi di nuovi linguaggi di editing come l'html5.

Con l'avvento dell'html5 sono comparsi molti altri marcatori orientati a classificare in maniera migliore il documento sotto un profilo semantico ad uso e consumo dei motori di ricerca e di ogni altro motore di rendering della pagina web: header, nav, footer, section, article, aside, figure, address, video, audio, ecc.

Esistono vari approcci alla realizzazione di codice Web: uno dei più diffusi è quello di utilizzare strumenti come i cms - come è il caso del popolarissimo Wordpress - essendo corredati di plugin per qualsiasi funzionalità immaginabile. Un altro strumento interessante ed emergente per chi vuole armeggiare manualmente con codice html5-css3-javascript è sicuramente !Google Web Designer il cui approccio e le risorse html5 ad esso collegate e integrabili rappresentano un'ottima occasione per imparare a sviluppare oggetti web-oriented complessi. Alcuni servizi di !hosting come altervista offrono la possibilità di testare immediatamente l'operatività di quanto progettato adoperando strumenti base fondamentali ma anche complessi come FTP e Wordpress. Ciò detto, realizzare una pagina html con solo editor di testo vecchia maniera come !BlueFish oppure l'innovativo ATOM (molto ben corredato di plugin in tema accessibility, epub ed i18n) utilizzando i principali !marcatori tag rimane un esercizio fondamentale per imparare a rispettare delle regole di buona scrittura come quelle di non usare lettere maiuscole, spazi e simboli speciali nella definizione dei nomi di file. E' inoltre indispensabile prendere coscienza del posizionamento delle risorse chiamate in causa dal codice html realizzato che può essere relativo a:

  • risorse online contraddistinte dal protocollo http;
  • risorse presenti sulla stessa cartella dei file html;
  • risorse presenti su una sotto-cartella evocabili tramite dir/nome_file;
  • risorse presenti su una cartella di livello superiore alla propria evocabili tramite nome_file

!CSS (Cascading Style Sheets) - fogli di stile a cascata - è una tecnica che consente di introdurre efficacemente ed economicamente (nel senso di razionalizzazione delle energie a disposizione) degli elementi di stile (formattazione grafica o layout che dir si voglia). Una delle caratteristiche funzionali più importanti dei CSS è la cosiddetta ereditarietà ovvero la possibilità che ha l'elemento figlio di ereditare indicazioni di formattazione grafica dall'elemento padre. CSS (similmente all'html) è un linguaggio di editing che può essere associato in tre maniere diverse: tramite uno stile in linea è possibile determinare lo stile di un singolo elemento della pagina web, con lo stile incorporato lo stile di una singola pagina Web mentre con lo stile collegato si può virtualmente determinare lo stile di un intero sito Web: l'efficienza e la comodità dei css risiedono infatti anche nella possibilità di comandare lo stile di più elementi e di più pagine web facendo riferimento ad una unica regia di stile determinando un notevole risparmio in termini di codice e banda.

  1. stile in linea...
    <p style="color: white; background: black;">Sezione testo colore bianco su sfondo nero</p>

    Sezione testo colore bianco su sfondo nero

  2. stile incorporato...
    <html> <head> <title>Inserire i fogli di stile in un documento</title>
    <style type="text/css">
    h6 {color: white; }
    </style>
    </head> <body>
    Effetto di testo colore bianco applicato a tutti i marcatori html di tipo h6

  3. stile collegato...
    <html> <head> <title>Inserire i fogli di stile in un documento come file di testo collegato di tipo css</title>
    <link rel="stylesheet" type="text/css" href="../stile.css">
    </head> <body>

Sebbene i fogli stile siano una tecnica MOLTO complessa da padroneggiare alcune sue regole base sono relativamente semplici ed il funzionamento base dei css è un tipo di know-how indispensabile per chiunque ha necessità di rapportarsi a vario livello rispetto alla progettazione Web.
Le regole dei fogli stile si applicano a !selettori e marcatori attraverso una cosiddetta !dichiarazione di stile contenente proprietà e valori e quindi il loro funzionamento è inscindibile dalla marcatura di tipo html. Gli elementi a cui si applicano gli stili possono essere cosiddetti di blocco ovvero che si estendono per intero in larghezza (ad esempio come p, table, div, h1 e h2) oppure in linea ovvero che condividono la loro posizione orizzontalmente con altri elementi (ad esempio a, img, span o mark). Similmente ai marcatori html i fogli stile sono caratterizzati da selettori a cui possono essere associate delle proprietà a cui a loro volta possono essere associati dei valori come si può evincere dagli esempi di cui sopra.

I selettori associati ad un determinato marcatore ereditano le proprietà dai marcatori nel quale è eventualmente nidificato attraverso regole ben precise: per poter attribuire con precisione determinate proprietà di formattazione grafica a dei marcatori gli stessi possono essere identificati in maniera univoca tramite un identificativo (ID) oppure accorpati in classi (CLASS). L'identificativo ID è particolarmente importante in quanto ad esso può essere associato non solo un determinato foglio stile ma anche un punto di ancoraggio (stile attributo name), una funzionalità javascript, un elemento dichiarato object oppure per l'identificazione di campi nel caso di estrazioni di dati per un database.

Il selettore id viene richiamato dal simbolo speciale # nella dichiarazione di stile e si applica a un solo elemento della pagina web, il selettore class viene richiamato dal simbolo . nella dichiarazione di stile e si può applicare a più selettori o marcatori associati alla relativa classe: id e class sono assegnati tramite gli omonimi attributi.

<p class="paragrafo">
<p class="paragrafo">
.paragrafo {color:white; font-weight:bold;}
<p id="titolo">
#titolo {color: blue;}

Le proprietà per organizzare il layout di un sito Web tramite CSS sono tantissime ma vale la pena ricordare quelle afferenti al concetto di !box model, la proprietà display che può determinare il comportamento di blocco o in linea di un elemento così come la proprietà float che determina la possibilità di far fluttuare a destra o a sinistra un elemento rispetto al contenitore corrispondente.

Alcuni linguaggi della comunicazione digitale come i fogli stile sono decisamente complessi e non semplici né da imparare né da gestire. Appositi linguaggi di !pre-processore come SASS (Syntactically Awesome Stylesheets) sono utilizzati per semplificare la costruzione e l'implementazione di fogli di stile (css) lato server ed i file così prodotti scss vengono interpretati dal browser in maniera trasparente come file css con l’istruzione sourceMappingURL che indica ai browser come il file CSS è in realtà generato automaticamente e la sua versione originale sul server e le relazioni tra le due versioni esistenti tutto recuperabile attraverso un file come app.css.map. Sperimentazioni utili possono essere portate avanti sulla pratica piattaforma di test codice online CODEPEN. Ovviamente esistono software open-source come Koala per gestire linguaggi preprocessori.

Codice accessibile

La prima priorità di uno sviluppatore Web dovrebbe essere quella di sviluppare codice accessibile ovvero siti Web che siano conformi anche alle esigenze delle persone con disabilità. Un'ottima introduzione all'argomento in lingua italian è costituito dall'esaustivo manuale di Michele Diodati non a caso titolato Accessibilità Guida completa (pur datato rimane un ottimo riferimento di linee concettuali in tema).

Per una veloce verifica dell'accessibilità di un sito Web si può fare riferimento ad un'ampia gamma di !Validatori incapaci, in quanto automatismi, di sostituire un'efficace analisi manuale di verifica dei corretti valori e contenuti semantici a codice magari realizzato in maniera formalmente corretta ma comunque utilissimi per accelerare il lavoro di verifica: fra i tanti a disposizione l'innovativo Wave e l'inossidabile Cynthia Says per controlli di tipo generale mentre AInspector Sidebar si concentra su WCAG ed ARIA, Accessible Email si preoccupa di controllare il codice di email e newsletter mentre l'European Internet Inclusion Initiative si preoccupa di verificare se un documento PDF è stato realizzato secondo le necessarie linee guida sull'accessibilità. Per finire utilissimo vamolà per la verifica dei requisiti tecnici secondo normativa italiana.

Per chi ha il compito di analizzare manualmente una pagina Web sotto il profilo dell'accessibilità deve essere pronto ad utilizzare svariati strumenti: uno su tutti Web Developer che è in grado di testare la qualità del codice Web prodotto anche da un punto di vista dell'accessibilità.

Esistono molti portali sopratutto del mondo anglosassone in cui viene spiegato molto bene il rapporto fra disabili e tecnologia digitale come la fantastica iniziativa della BBC denominata My web my way oppure la storica iniziativa sull'accessibilità Web WEB AIM. A livello di standard, normative e raccomandazioni esistono svariati parametri e testi di riferimento da tenere presenti ma sicuramente le WCAG 2.0 sono attualmente considerate come un riferimento tecnico comune per chiunque si occupi di accessibilità Web.

Le persone non vedenti recepiscono il Web in maniera linearizzata (un elemento in successione all'altro) e facendo riferimento principalmente ai contenuti testuali con determinati accorgimenti:

  • assegnare testo significativo a tutti i tipi di alternative testuali come il comune attributo alt per i marcatori di immagine img;
  • la possibilità di accedere da tastiera ai vari oggetti e collegamenti della pagina Web anche attraverso scorciatoie da tastiera è particolarmente apprezzata da diversi utenti non vedenti e quindi è opportuno fornire la mappatura dei vari attributi accesskey applicati ai vari link interni tramite marcatori a (magari privilegiando valori numerici in quanto spesso le combinazioni con lettere sono già occupate);
  • permettere di fa saltare elementi ricorsivi e ridondanti come menù e barre di navigazione andando direttamente ai contenuti della pagina attraverso link interni appositi in particolare per siti Web molto complessi;
  • permettere una lettura efficace della pagina Web anche a livello di anteprima grazie a collegamenti con testo significativo anche se letto fuori dal contesto generale e in successione (ad esempio: non usare clicca qui) e l'utilizzo di elementi strutturali di tipo h;
  • assegnare corretti e appropriati tag di titolazione (il marcatore title compreso nel marcatore head) alle pagine Web;
  • è necessario attribuire il corretto valore di lingua (ad esempio it nel caso di pagina Web in lingua italiana) tramite attributo lang al fine di agevolare la pronuncia della pagina Web in maniera corretta allo screenreader;
  • trattare opportunamente le tabelle dati con relativi marcatori ed attributi summary, scope ed id al fine di agevolare la lettura delle medesime e far identificare i dati da incrociare;
  • preoccuparsi di assegnare l'attributo controls ai marcatori audio e video in maniera tale da garantire la disponibilità dei controlli sull'oggetto audio o video da usufruire.

Le persone con disabilità acustiche gravi possono trarre beneficio da meccanismi di audio-descrizione e sotto-titolazione grazie all'emergente standard Web Video Text Tracks da applicare tramite opportuno codice di markup capace anche di offrire la sottotitolazione in maniera plurilingue:
<video src="video_da_sottotitolare.ogv">
<track kind="subtitles" src="sottotitoli-it.vtt" srclang="it" label="italiano" default>
<track kind="subtitles" src="sottotitoli-en.vtt" srclang="en" label="english">
</video>

Esempio di WebTVV: [idstring] [hh:]mm:ss.msmsms --> [hh:]mm:ss.msmsms [cue settings] Text string Cue-8 00:00:52.000 --> 00:00:54.000 <v Emo>I don't think so. <c.question>You?</c></v>
Cue-9 00:00:55.167 --> 00:00:57.042 <v Proog>I'm Ok.</v>

Anche i CSS possono venire in aiuto all'accessibilità ricordandosi di utilizzarli in alternativa ad alt null per immagini non significative, abbinando la pseudoclasse focus in presenza di quella hover per i link.

Alcuni prodotti dell'informazione e della comunicazione digitale necessitano di particolare accorgimenti per cercare di renderli più accessibili possibili: è il caso ad esempio delle immagini realizzate tramite codice SVG oppure dei documenti ben formati da salvare in pdf (per i quali esiste anche un apposito software di validazione) così come per gli ebook (libri elettronici) realizzabili magari secondo lo standard più recente epub3 o ancora per le applicazioni realizzate in html5 che possono girare su molti dispositivi mobili e per le quali occorre prendere in considerazione le specifiche di tipo ARIA. Le cosiddette !WAI-ARIA creano una serie di estensioni del linguaggio html rendendo consapevoli i browser e le relative tecnologie assistive del contenuto interattivo attraverso degli attributi di tipo role.

Discorso a parte meritano le app che essendo software realizzato per svolgere in maniera ottimizzata una solo funzione specifica è spesso apprezzato da utenza disabile proprio per la sua natura intrinseca di offerta di servizio semplificato. Da questo punto di vista e dato che siamo nella sezione codice accessibile le indicazioni pratiche per gli sviluppatori di Apple e di Google per il sistema Android così come quelle per l'ambiente Windows Phone in tema di accessibilità risultano particolarmente utili ed importanti per una loro corretta interazione con gli ausili come gli screen-reader ricordandosi che esistano delle indicazioni valide multi-piattaforma come quella di definire la larghezza di elementi touch fra 7 e 10 mm.

Lo screen-reader Voice Over per iOS per interpretare correttamente un elemento dell'interfaccia deve poter essere in grado di ricevere informazioni circa la posizione dell'elemento sullo schermo, nome, comportamento, valore e tipo. L'accessibilità delle app su iOS è garantita attraverso la gestione di etichette (labels) descrittive, tratti (traits) di accessibilità comprensivi di stato-comportamento-utilizzo di un elemento da rendere accessibile, esclamazioni (hints) che descrivano i risultati di un'azione, il frame che identifica le dimensioni e il posizionamento nello schermo dell'elemento da rendere accessibile, il valore (effettivo) eventualmente necessario per definire un elemento e la sua funzionalità. Avendo a disposizione l'attuale release SDK (Software Development Kit) 3.0 per iOS è possibile definire nella sezione Accessibility di ogni elemento nella Interface Builder le label, gli hint e i traits opportuni per rendere l'elemento accessibile. E' possibile utilizzare delle procedure di analisi e di verifica su iOS grazie a Voice Over ma anche alla funzione Accessibility Inspector per verificare il livello di accessibilità delle app realizzate.

Per quanto riguarda il mondo Android la filosofia d'intervento è simile: ad esempio per aggiungere testo descrittivo agli elementi di controllo dell'interfaccia è possibile utilizzare l'attributo android:contentDescription nel flusso strutturale XML facendo particolare attenzione alla necessità di applicarlo a ImageButton, ImageView e CheckBox. Ancora, la necessità di agevolare il focus degli elementi è necessario, ad esempio, controllare l'assegnazione del valore true all'attributo android:focusable o metodo equivalente e se necessario regolando l'ordinamento del focus tramite appositi attributi. Alcune visualizzazioni specifiche di app Android necessitano di essere popolate di AccessibilityEvent per essere rese accessibili mentre soluzioni specifiche sono previste per situazioni complesse come visualizzazioni di moduli facenti parte di oggetti complessi (calendari). Anche la release più diffusa Android 4.0 supportata dalle API (Application Programming Interface) di livello 14 prevede dei servizi per ispezionare il livello di accessibilità della app realizzata e verificarne il corretto utilizzo configurando e adoperando adeguatamente lo screen reader nativo TalkBack.

Per quanto riguarda l'ambiente Windows Phone le linee guida per gli sviluppatori in tema di accessibilità delle interfacce utente (UI) si articolano in suggerimenti di design afferenti ai due filoni principali di linguaggi HTML e XAML (abbreviazione di eXtensible Application Markup Language e pronunciata Zammel è un linguaggio di markup basato su XML utilizzato per descrivere l'interfaccia grafica delle applicazioni basate sulla libreria Windows Presentation Foundation). Anche l'ambiente di sviluppo Windows Software Development Kit (SDK) include strumenti di valutazione dell'accessibilità come ad esempio Inspect oppure AccChecker che può essere un valido aiuto nel verificare il livello di accessibilità di un app in ambiente Windows Phone con particolare riguardo ad una corretta interazione con lo screen-reader nativo Narrator.

comunicazione cross media

DESIGN ADATTIVO

La necessità di realizzare un !Design Adattivo quindi di tipo responsive ovvero fluido (misure in %) o reattivo (provvisto di !breakpoint) e quindi rispettoso delle mutevoli esigenze dei vari media,device mobili in primis, secondo la filosofia di design !Mobile First.

L'approccio progettuale di tipo !Cross Media è oramai indispensabile considerando le connessioni fra i vari media e riferendosi a come l'utente finale interagisce con i contenuti in una sempre più complessa filiera della comunicazione digitale caratterizzata da utilizzi sequenziali ma anche complementari del messaggio digitale proposto attraverso dispositivi di vario tipo fino ad arrivare ad una possibile ottica di Progressive Web Application (PWA).

L'adozione di framework come !Bootstrap sicuramente facilita lo sviluppo di siti Web in senso responsive. mentre per capire cosa può essere un link cross-mediale prendiamo a titolo di esempio i !QRcode che consentono di mettere in relazione una comunicazione rappresentata su carta o su altro sfondo materico e una corrispondente rappresentazione multimediale fruibile online.

Progettare per un ambiente interattivo vuol dire non solo realizzare qualcosa di bello ovvero di esteticamente appagante ma che soprattutto chiami all'azione ovvero che provochi, stimoli un'azione in un'ottica di filosofia di UX denominata !call to action.

Grazie al markup html5 ed in abbinamento con javascript ed i fogli stile CSS3 è possibile implementare delle funzioni una volta impensabili come la capacità di fruizione offline di un sito Web, di organizzazione semantica dell'informazione rappresentata oppure di realizzazione di effetti grafici molto performanti che possono ben adattarsi a diversi dispositivi come nel caso delle immagini di tipo SVG; tutto ciò risulta molto utile per realizzare un sito Web che si adatti alle variegate esigenze di localizzazione dei dispositivi che vi accedono - smartphone, tablet, laptop e desktop, Samrt TV e console di gioco. Si parla dunque di responsive design o !design adattivo nel caso in cui si riesca a soddisfare le necessità di device con diverse dimensioni e risoluzioni dello schermo ma anche con diverse tipologie e funzionalità delle periferiche collegate al dispositivo in esame (presenza o meno del mouse e quindi funzionalità o meno di mouseover, presenza o meno della funzione touch e quindi possibilità o meno delle gesture multitouch, eccetera). Il concetto dunque di progressive enhancement (html-struttura css-stile javascript-funzionamento) viene esaltato tramite un web design adattivo sfruttando le potenzialità dei fogli stile per offrire layout diversi ed apposite librerie javascript per adattarsi efficacemente alle diverse funzionalità ed esigenze dei diversi dispositivi digitali.

Alcune categorie di device esigono codice ben strutturato e performante ma anche accorgimenti di layout ben specifici: è il caso dei dispositivi mobili (ad esempio i device supportati da sistema operativo iOS) che sicuramente necessitano di colori cosiddetti web safe, forti contrasti, informazione essenziale e leggera, layout e meccanismi di navigazione semplificati. Un accorgimento essenziale da adottare per un codice che ci si aspetti sia ben performante su smartphone ed altri dispositivi mobili è l'adozione del !viewport settandolo alla larghezza del dispositivo, ad esempio:
<meta name="viewport" content="width=device-width" />
La viewport o area visibile non è normalmente presa in considerazione dai browser deskptop in quanto determinata dalla dimensione della finestra di visualizzazione della pagina Web visualizzata.

Le !media queries sono delle importanti specifiche dei fogli stile di tipo CSS3 che hanno l'ambizione di fornire un design di tipo diverso relativamente ai diversi media che usufruiscano di una pagina Web (responsive design). Alcune funzionalità erano già presenti con HTML4 e CSS2 ma ora i Webmaster hanno innumerevoli strumenti in più per indurre un rendering quanto mai performante sui device più diversi da quelli mobili alle Web TV. Le discriminanti possono fare riferimento - ad esempio - al tipo di device (schermo, stampa, eccetera), orientamento del dispositivo (verticale oppure orizzontale) e la risoluzione del medesimo (minima o massima).

Ad esempio le media queries possono risultare utili per specificare fogli stile applicabili a risoluzioni maggiori o minori di una certa dimensione di dispositivi a monitor e a stampa ed al loro orientamento verticale od orizzontale, ad esempio:
@media screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) { … }
Molto importanti i !breakpoint o punti di rottura ovvero le dimensioni relative alle diverse risoluzioni dei dispositivi per i quali si sta predisponendo un layout ottimale e che, attraverso le media queries determinano aggiustamenti di layout per svariate necessità come ad esempio distanziare adeguatamente link adiacenti per monitor di piccole dimensioni.

Ogni dispositivo ha le sue specifiche esigenze tecnologiche ma anche è direttamente connesso a specifiche tipologie di esperienze dell'utenza finale. Prendiamo ad esempio le problematiche dell'emergente Web da salotto... Come sviluppare un sito web conforme alle esigenze delle emergenti !Web TV? L'esempio è emblematico di un dispositivo percepito come moderno ma che in realtà, tuttora, necessita di particolari accortezze: l'utilizzo di dimensioni percentuali e layout fluidi e adattivi grazie anche a css media types e alle css3 media queries per predisporre un formato che si adatti alle estese ma anche mutevoli dimensioni degli schermi delle Web TV, evitare comportamenti orientati all'apertura di nuove finestre e tab; usare font così come icone ben definite e particolarmente performanti anche per un pubblico che le visualizza ad una distanza di qualche metro; utilizzare contrasti di colore ben definiti; limitare l'interattività del contenuto con l'utenza finale al minimo così come l'utilizzo di javascript considerando che i dispositivi input risultano ancora problematici per le Web TV ed hanno una capacità di memoria chache minima.

Molto interessante il tentativo portato avanti da Google https://material.io di diffondere una filosofia open di design cross-mediale denominato !Material Design le cui linee guida ambiscono a diventare punto di riferimento comune per tutti gli sviluppatori coinvolti nel design di interfacce per qualsiasi device digitale compresi gli imperanti dispositivi mobili per i quali si ipotizza l'implementazione di Progressive Web Apps. Il canonico approccio di sviluppo progressivo delle interfacce attraverso !wireframe (contenuti e struttura), !mockup (grafica) e !prototipo (interattività) e relativi UX !workflow in ottica di linguaggi Web può avvalersi di strumenti come MockFlow.

La corretta applicazione di codice mark-up, peraltro, non può prescindere - ovviamente - da una conoscenza approfondita della lingua e della cultura di riferimento del contenuto elaborato nonchè delle varie interazioni fra device diversi: il fenomeno del cosiddetto !secondo schermo che impone un'attenta riflessione sull'emergente utilizzo in senso cross-mediale della comunicazione digitale.

Quale che sia lo specifico obiettivo di un'attività di restyling di un sito Web in senso adattivo è assolutamente importante verificare la qualità del lavoro svolto attraverso una serie di controlli post-produzione al fine di determinare il corretto funzionamento del codice prodotto anche in termini di velocità di !rendering della pagina Web e di sicurezza. I possibili test da eseguire su un sito Web sono innumerevoli ma per prima cosa occorre prendere coscienza del corredo tecnologico dell'host in esame nonchè della sua affidabilità di performance nel tempo testando i tempi di risposta tramite traceroute e strumenti di monitor capaci di svelare anche la coabitazione con altri siti Web sullo stesso server Web, compatibilità di analisi per protocolli di Rete IPv4 e IPv6, controllo dei tempi di risposta da punti geografici rappresentativi dei vari continenti, stato di salute del servizio DNS, possibilità di visualizzazione dei tempi di risposta di rendering da browser di tipo diverso magari facendo riferimento alle storiche linee guida di Yahoo! sulla velocità delle pagine Web o con la possibilità di vedere il contributo di ogni componente della pagina Web che vanno a concorrere al tempo di risposta complessiva della pagina Web in esame. Alcuni altri servizi online di analisi arrivano a spingersi su stime di traffico di un sito Web ( !referral compresi) nonchè controlli di sicurezza atti a verificare la net reputation di un sito Web in termini di ospitalità di codice malevolo detta anche Webutation.

Codice internazionale

Le attività di localizzazione ed internazionalizzazione sono spesso identificate con l'acronimo !i18n e sono tutte attività che cercano di andare incontro alle esigenze degli esseri umani in merito alla loro specifica identità linguistica e culturale. Oramai tutte le major del digitale hanno una loro sezione i18n per sviluppatori e fra le varie a disposizione risultano attualmente interessanti quella di Microsoft per un approccio tecnologico in senso lato e quella di Google con tools specifici per app e Web. Come suggerito opportunamente dalla sezione i18n del W3C Sono molti gli accorgimenti da adottare in questo senso nel codice Web ma anche per altre tipologie di dispositivi tecnologici e comunicativi...

  • dichiarazione della lingua adottata attraverso l'attributo lang;
  • adozione della codifica di caratteri utf-8;
  • assegnazione di un valore RTL all'attributo dir per le lingue lette e scritte da destra a sinistra tenendo presente la possibilità di utilizzare il marcatore bdi per isolare del testo isolato da leggere in direzione opporta al contesto generale;
  • implementazione del marcatore ruby per una migliore presentazione e comprensione delle lingue ideografiche attraverso sovra-titolazioni;
  • rispettare convenzioni locali nella compilazione di moduli online nei campi nomi e cognomi, indirizzi, date e orari rispettando canoni, standard e specifiche locali;
  • implementazione dell'attributo translate da utilizzare perlopiù con valore negativo no al fine di escludere testo che non ha senso di sottoporre a procedure di traduzione (nomi propri, eccetera).
  • implementazione dei corretti attributi hreflang ai quali assegnare opportuni valori di lingua e volendo di area geografica di appartenenza alle diverse homepage in maniera tale che ci sia una corretta indicizzazione multi-lingue da parte dei motori di ricerca e dunque un'intercettazione dell'utenza finale corretta rispetto alla propria lingua di appartenenza.

La corretta applicazione di codice mark-up, peraltro, non può prescindere - ovviamente - da una conoscenza approfondita della lingua e della cultura di riferimento del contenuto elaborato come ad esempio la necessità di tener presente l'orienntamento da destra verso sinistra non solo per il testo ma anche per alcune icone (freccia con il senso di avanti che diventa da destra a sinistra) e timeline così come per le lingue che non prevedano Maiuscole (cinese, giapponese o koreano) è particolarmente importante distinguere il testo normale dal testo con particolari funzioni o sensi comunicativi così come in alcune culture (Bengali, Marathi, Nepali...) vi è addirittura una rappresentazione diversa dal consueto dei numeri..

ebook formato epub3

Codice per EBOOK

I libri elettronici o !eBook sono una grande opportunità comunicativa per coinvolgere in maniera intensa un lettore-utente_finale della comunicazione digitale che è messo nella possibilità di leggere-studiare anche per molte ore o molti giorni un testo o un testo arricchito di elementi multimediali senza necessariamente essere online.

!Epub3 è il nuovo formato standard per gli !ebook ed è la migliore dimostrazione di come i linguaggi del Web possono aprire facilmente nuovi scenari di utilizzo interattivo della comunicazione digitale. Proprio a causa della sua struttura di tipo mark-up basato sulle possibilità comunicative dei linguaggi html-css-javascript l'!epub risulta essere particolarmente manipolabile ed adattabile per il Web: ne sono dimostrazione i tanti tool di sviluppo capaci di trasformare automaticamente in epub pagine web ed addirittura interi blog così come la possibilità offerta da plugin e servizi online di leggere file epub direttamente dal browser oppure di effettuare conversioni fra formati diversi.

Esistono poi molti strumenti e software che possono risultare utili per la realizzazione di codice eupb valido come l'editor multipiattaforma !Sigil e la piattaforma di gestione e conversione ebook Calibre particolarmente efficace se si parte da un documento ben formato. Altro tool di sviluppo molto utile per scrittori che vogliono facilitarsi la vita nella trasformazione di documenti office in epub è il plugin Writer to PUB che consente di trasformare un file odt in epub. I file epub ed epub3 devono essere file formalmente validi per essere accettati e distribuiti dalle varie piattaforme di utilizzo di ebook per cui è opportuno dotarsi di apposito sofware di validazione oppure di avvantaggiarsi di equivalenti servizi online. Può inoltre tornare utile riferirsi a servizi di mediazione online per la pubblicazione di ebook sulle varie piattaforme online-cloud come Stealth di Simplicissimus che offre, fra i vari servizi, un utile forum con preziose informazioni per gli sviluppatori di ebook (esigenti richieste di Amazon per la pubblicazione di ebook per Kindle comprese) oltre ad un tool specifico denominato BackTypo.

(A)UX Design

Un corretto approccio (A)UX ovvero Artificial User Experience al design digitale deve tenere di conto principalmente della corretta organizzazione e presentazione di meta dati, collegamenti logici, elementi strutturali, contenuti ad uso e consumo dei tanti algoritmi dei sistemi di intelligenza artificiale che oramai analizzano ed interpretano le nostre interfacce ed i nostri dati su mandato di svariate tipologie di mediatori digitali come motori di ricerca, social, assistenti vocali, ausili, eccetera.

Chi pensa che l'(AUX) Design sia un approccio futuribile ed avveneristico rispetto a chissà quale improbabile diffusione di bot e robot nella società reale forse dimentica che oramai sono decine di anni che sviluppatori e webmaster sono alle prese con un'indispensabile pratica di design ad uso e consumo degli algoritmi dei motori di ricerca.

Gli spider dei !Motori di Ricerca al fine di premiare il posizionamento di una pagina Web sulla SERP di un motore di ricerca fanno particolarmente attenzione a fattori ambientali come all'ecologia dei link interni ed esterni, alla qualità ed aggiornamento dei contenuti (facendo attenzione all'originalità dei medesimi nonché alla loro leggerezza ed efficacia di presentazione) ma anche a particolari elementi strutturali e meta-descrittivi come url, title, meta description, tag di tipo h, nonchè alternative testuali.

La strategia più opportuna per rendere visibile un sito Web è quella di individuare e rendere popolari dei termini (lemmi o parole chiave che dir si voglia) al proprio !target di riferimento dopodichè assicurarsi che la propria pagina Web sia sicuramente e costantemente nel tempo reperibile attraverso i termini di reperibilità e rappresentanza ovvero !brand. Ovviamente è auspicabile rendersi reperibili anche attraverso parole chiave che sono popolari indipendentemente dalla capacità di diffondere uno specifico termine di reperibilità e rappresentatività del nostro operato.

Per affrontare la complessa tematica di realizzare codice search engine friendly è necessario conoscere il funzionamento dei motori di ricerca e, in un certo senso, calarsi nei loro panni utilizzando numerosi tools a disposizione . Dunque è importante conoscere a fondo il significato di query speciali (una su tutte site:) ma anche capire come viene interpretata una pagina web accedendo alla !cache (solo testo) del motore di ricerca oppure configurando il browser in modalità solo testo senza !cookies e con opportuno !user agent controllando anche la qualità di comunicazione browser-server tramite gli status code degli header e ponendo attenzione alla qualità dei link e della navigazione nei minimi particolari !pagina 404 inclusa. Google fornisce molta manualistica a riguardo ed anche per aspetti molto specifici come ad esempio la necessità di avere elencate sulla SERP le app in abbinamento alle pagine Web.

Fondamentale indirizzare lo spider tramite un opportuno settaggio dei file !robots.txt (ovvero specificare i contenuti duplicati che NON deve indicizzare e preservare quelli originali canonici) e sitemap (cosa deve indicizzare) presenti nel livello root del sito web - generabili per comodità tramite appositi sitemap-generators - ma anche attraverso un uso accorto del !redirect 301 magari tramite lo strategico file di testo .htaccess immancabilmente presente sulla root del proprio sito Web. Altri strumenti utili per orientare l'indicizzazione dello spider (detto anche crawler o bot) sono i meta tag di tipo robots capaci di definire con molta precisione link e contenuti da prendere in considerazione (ma anche no, ovvero di tipo noindex e nofollow).

Tutti gli accorgimenti e le procedure di cui sopra sono valutabili e configurabili tramite gli oramai indispensabili !Webmaster Tool che qualsivoglia motore di ricerca- Google in primis - oramai mettono a disposizione: alcuni come il cinese zhanzhang hanno alcune peculiarità come quella di suggerire l'utilizzo di un apposito bottone per condivisione social per migliorare le possibilità di indicizzazione e nel caso di sito Web realizzato in Wordpress dotarsi di apposito plugin per strutturare i dati e fornire apposite !sitemap al motore di ricerca Baidu; altri come quello di Naver fa molta attenzione all'univocità ed originalità dei documenti Web mentre Yandex fornisce delle visioni strutturali dei siti Web decisamente chiare e che possono rendere bene l'idea della resa visiva delle url sulla SERP magari per altri motori di ricerca e soprattutto per i dispositivi mobili secondo il modello dominio-directory-nomi_file.

Molto importante anche far comprendere ai motori di ricerca la diversità linguistica di un sito Web attraverso il corretto utilizzo degli attributi !hreflang e relativi valori linguistici e geografici.

Al fine di rendere maggiormente significativi i contenuti testuali agli occhi dei motori di ricerca è possibile, in pieno stile html5, strutturare i contenuti attraverso appositi micro-dati semantici definiti attraverso apposita marcatura definita dalla iniziativa schema.org che risulta utile anche per una più efficace presentazione dei risultati tramite !rich snippets sulla pagina dei risultati di ricerca: per comodità è possibile utilizzare appositi validatori e addirittura convertitori online per generare dati strutturati anche molto articolati).

Molti lavori di analisi possono poi essere semplificati attraverso appositi software multipiattaforma come Screaming Frog mentre per applicare soluzioni di ottimzizazione possono tornare comodi specifici plugin come l'inossidabile yoast.

Oramai Google e compagnia incidono così tanto sulla creazione di sotto-linguaggi e pseudo-standard in tema di linguaggi di marcatura che diventano utili plugin come tag assistant che validano e verificano la bontà del codice prodotto relativamente alle esigenze di marcatura ed interazione dei servizi alla Google.

Oltre al comparto dei motori di ricerca vi sono poi i !Social Network che svolgono in maniera incessante procedure di pattern recognition e tendono a condividere l'informazione attraverso uno specifico protocollo di meta descrizione dell'informazione digitale noto come meta OG adottato da quasi tutte le altre piattaforme social (twitter ha una sua implementazione specifica mentre Pinterest per i suoi Rich Pins ha deciso di mettere a disposizione sia Open Graph che schema.org) e per il quale, manco a dirlo, esistono appositi servizi di validazione così come di conversione online.

Restando sulle potenzialità attuali offerte dai !meta dati anche in ambito multimediale è importante prendere dimestichezza con alcuni tool-software che permettono di accedere ma anche modificare i meta-dati di alcuni file che possiamo avere sul proprio computer o incrociare sul Web: sorprendenti i vari !Exif Viewer che ci consentono di conoscere le meta-informazioni di immagini ed altre tipologie di file e documenti (standard XMP comrpeso), l'immancabile !VLC per i video mentre è ampia l'offerta per file audio grazie a soluzioni come !Mp3Tag affiancato dai meno noti !EasyTag e !PuddleTag. Su tutti la soluzione più professionale rimane però !ExifTool, strumento complesso e dall'ampia manualistica, che consente di trattare numerose tipologie di tag fra cui i noti Exif Tags applicabili a numerosissime tipologie di file come documenti pdf così come immagini.

Altrettanto importanti, sempre in ambito social, gli !algoritmi che sono utilizzati per organizzare le informazioni e le relazioni sulle rispettive piattaforme rispetto alle quali sta cominciando a circolare dottina scientifica varia che ipotizza regole ad esempio per l'ambito twitter oppure per il mutevolissimo facebook.

Se invece il nostro rapporto con un !Sistema di Intelligenza Artificiale è diretto, ovvero siamo noi stessi a sottoporgli dati da analizzare, è bene ricordare che qualsiasi base dati informativa magari strutturata in tabelle di dati da sottoporre ad analisi intelligente deve essere opportunamente etichettata non solo in maniera comprensibile ma anche secondo una logica che orienti l'eventuale interpretazione di un sistema di (AI) intelligenza artificiale in maniera presumibilmente proficua rispetto agli obiettivi dell'analisi da svolgere.

Socialaddclose