Html, Css e javaScript
La ragnatela ipertestuale disegnata dai linguaggi html-css-javaScript nota come Web è un ambiente informativo e comunicativo che si basa su meccanismi d'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 d'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 sviluppo 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) e 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 e 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 e applicano il loro marcamento strutturale a tutto ciò a cui sono associati (testo o 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 e 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). !CSS (Cascading Style Sheets) - fogli di stile a cascata - è una tecnica che consente d'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 a una unica regia di stile determinando un notevole risparmio in termini di codice e banda.
Sezione testo colore bianco su sfondo nero
Sebbene i fogli stile siano una tecnica MOLTO complessa da padroneggiare alcune sue regole base sono relativamente semplici e 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 a 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 a 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.
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.
Molte organizzazioni come Mozilla mettono a disposizione strumenti e tutorial per una corretta gestione e progettazione del Web al fine di un corretto rendering della comunicazione digitale. Alcune funzioni integrate nei browser come Firefox 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 particolarmente utili le funzioni come lo strumento di analisi rete Network Monitor capace di effettuare l'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. L'utilizzo di validatori e plugin come Web Developer può semplificare il lavoro di molti webmaster che possono beneficiare anche di molti strumenti di validazione online per html, css, feed e link (dati strutturati compresi). 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 e dei suoi temi grafici nonché dei plugin per qualsiasi funzionalità immaginabile. Si spazia dunque da opportunità molto semplici di publishing web come Altervista oppure Wix (variante Editor X compresa), fino ad alcuni servizi di free hosting come NetSons. Rimane importante l'opportunità di testare lo strumento di trasferimento file FTP come Filezilla. Realizzare una pagina html con solo editor di testo vecchia maniera come BlueFish oppure l'innovativo Visual Studio Code 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.
Sperimentazioni utili possono essere portate avanti sulla pratica piattaforma di test codice online CODEPEN tenendo presente la vulcanica evoluzione dei css che consentono anche sperimentazioni in ambito artistico. Interessante anche la sperimentazione di Mozilla per realizzare una sorta di metaverso con i linguaggi del Web tramite l'esperimento hubs e relativo ambiente di sviluppo 3D spoke.
inclusive Design
La prima priorità di uno sviluppatore Web dovrebbe essere quella di sviluppare codice accessibile facilmente interpretabile dalle tecnologie assistive (utilizzate dalle persone con disabilità) tenendo presente i suggerimenti del cosiddetto inclusive Design, sperimentando anche soluzioni per ambiti specifici come quello, ad esempio, dell'animazione digitale oppure quello della realtà artificiale per cercare di rispettare le raccomandazioni internazionali note come WCAG.
Il più importante validatore di riferimento normativo è sicuramente da considerare MAUVE++: realizzato dal Centro Nazionale delle Ricerche. Grazie ai browser Chrome e Firefox è possibile usufruire di appositi tool di audit in tema di accessibilità Web grazie alle funzioni d'ispeziona-analizza elemento e capaci di svolgere analisi e verifiche molto raffinate. Per una veloce verifica dell'accessibilità di un sito Web si può fare riferimento a 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'autorevolissimo Wave e l'innovativo Accessibility Insights for Web. Per chi ha il compito di analizzare manualmente una pagina Web sotto il profilo dell'accessibilità oltre alle procedure e strumenti già citati vale la pena sottolineare l'add-on multipiattaforma Web Developer così come l'immancabile plugin Equalize Digital Accessibility Checker per Wordpress. La questione dell'interpretazione dei colori (ai quali assolutamente non assegnare in maniera esclusiva valore informativo) può essere verificata tramite gli strumenti di Adobe Color selezionando od estraendo i codici-colori da validare tramite una procedura di pick color. Per i documenti PDF risulta utile PAVE ma ancor meglio applicare procedure di controllo con i software di produzione dei documenti stessi: il tutorial-video del nuovo Microsoft Accessibility Assistant risulta molto utile per capire accorgimenti e verifiche da adottare per i documenti office come contrasti efficaci, intestazione delle tabelle, revisione delle descrizioni generate automaticamente per immagini e oggetti multimediali, marcatori strutturali ed ordine di lettura; meccanismi di validazione simili sono stati recentementi sviluppati anche per Libre Office; similari accorgimenti per alternative testuali e corretta architettura informativa sono riportati anche per la suite Adobe sia per Acrobat così come per InDesign. ACE is the accessibility checker for EPUB the developed by the DAISY Consortium.
Le persone cieche recepiscono il Web in maniera linearizzata (un elemento in successione all'altro) e facendo riferimento principalmente ai contenuti testuali ospitati in aree funzionali marcabili tramite cosiddetti landmark e facilitando l'interazione con elementi funzionali ed informativi tramite Accessible Rich Internet Applications (ARIA). Importante assegnare testo significativo a tutti i tipi di !alternative testuali come nel caso dell'attributo alt per le immagini peraltro sempre più realizzati in maniera automatica tramite intelligenze artificiali soprattutto in ambito social (analizzare le immagini con il tasto destro del mouse per credere...). Alcuni utenti ciechi apprezzano la possibilità di 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. Una lettura efficace della pagina Web è possibile 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 il corretto valore di lingua (ad esempio it nel caso di pagina Web in lingua italiana) tramite attributo lang permette una pronuncia della pagina Web in maniera corretta allo !screenreader. Trattare opportunamente le tabelle dati con relativi marcatori e attributi caption, scope ed id agevola la lettura delle medesime e permette di interpretare correttamente i dati.
Le persone con disabilità acustiche gravi possono trarre beneficio da meccanismi di sottotitolazione grazie anche allo 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 WebVTT: [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>
[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>
Ovviamente sono disponibili servizi online ma anche software per poter produrre più agevolmente sottotitoli formato vtt incluso.
Alcuni prodotti dell'informazione e della comunicazione digitale necessitano di particolari accorgimenti per cercare di renderli più accessibili possibili: è il caso dei dati tecnici e scientifici da visualizzere, dei moduli (form), delle immagini realizzate tramite codice SVG oppure dei documenti ben formati per la produzione di pdf accessibili così come per gli ebook (libri elettronici) realizzabili secondo lo standard più recente !ePub(3) consentendo fruizioni come l'audio-testo sincronizzato tramite il linguaggio SMIL: applicazioni realizzate in html5 con le specifiche di tipo ARIA applicabili a tanti elementi-funzionalità di un'interfaccia Web. 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-funzioni di tipo role a loro volta con specifici states: il tutto ravvisabile tramite l'accessibility tree del document object model visualizzabile attraverso ispeziona-analizza elemento accessibile di qualsiasi browser ed eventualmente condizionabile con interventi css-javascript. Content Management System come Drupal, implementato da molte pubbliche amministrazioni per la sua efficace architettura informativa e la sua natura Open Source, prevedono l'utilizzo di appositi moduli per facilitare l'implementazione di soluzioni di accessibilità. Per il popolare CMS WordPress può essere utile prendere in considerazione plugin e temi accessibili con un occhio di riguardo, magari, alla questione leggibilità Quale che sia il tipo di CMS (Content Management System) adottato è consigliabile realizzare una versione accessibile così come proposto dettagliatamente su ARCO CMS.
Discorso a parte meritano case history e suggerimenti di sviluppo per videogiochi nonché procedure di sviluppo per le app suddivise per i due ambienti di sviluppo ovvero Android e iOs. A livello di possibili test - molto importanti anche per le specifiche esigenze inclusive di gesture in ambito mobile - per quanto riguarda il mondo Android Accessibility Scanner è lo strumento di analisi ver verificare l'accessibilità di app Android mentre Accessibility Inspector è lo strumento di analisi ver verificare l'accessibilità di app iOS.
DESIGN ADATTIVO
Il !Design Adattivo è quello rispettoso delle mutevoli esigenze dei vari device secondo metodologie di design derivante da un approccio progettuale di tipo !Cross Mediale: considerando le connessioni fra i vari media e quindi approfittando dei vari accorgimenti css responsive come grid flexbox e media queries. 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.
Grazie al markup html5 ed in abbinamento con javascript ed i fogli stile è possibile implementare delle funzioni di responsive design per adattarsi a diversi dispositivi così come svolgono nativamente le immagini di tipo SVG. Bisogna cercare di soddisfare le necessità di device con diverse dimensioni e risoluzioni dello schermo attraverso il cosiddetto progressive enhancement (html-struttura css-stile javascript-funzionamento). AlcuneAlcune categorie di device esigono codice ben strutturato e performante ma anche accorgimenti di layout ben specifici: è il caso dei dispositivi mobili per i quali è necessaria l'adozione del viewport settandolo alla larghezza del dispositivo, ad esempio:<meta name="viewport" content="width=device-width" /> Le !media queries risultano 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. Molto interessante il tentativo portato avanti da Google di diffondere una filosofia open di design cross-mediale denominata Material Design le cui linee guida ambiscono a diventare punto di riferimento comune per tutti gli sviluppatori coinvolti nel design di interfacce digitali. Le linee guida pensate a Mountain View impattano tutti gli argomenti maggiormente strategici del design con particolare riguardo ai principi di accessibilità, usabilità, comunicazione cross-cultural e cross-device. Iniziativa simile quella di Microsoft denominata Fluent Design System mentre Design Systems è un'efficace strumento di riflessione sui meccanismi di progettazione a disposizione comrpensivo di template Figma. In ambito pubblico, iniziativa similare quella di Designers Italia anche quest'ultima con una sezione dedicata all'accessibilità.
In un'ottica di design di una UI per una corretta UX il canonico ed articolato approccio di sviluppo progressivo delle interfacce fino al loro status interattivo di prototipo attraverso wireframe (contenuti e struttura), mockup (layout basato su una corretta impostazione di griglie=gabbie e margini) e relativi !User Flow (schemi e flussi di utilizzo) può avvalersi di strumenti liberamente utilizzabili ed Open Source come Figma cercando di rispettare tutte le esigenze delle !personas coinvolte esprimibili nella filiera di design di un'interfaccia digitale; il tutto possibilmente accompagnato da un'attitudine da designer social capace di collaborare, prototipare e confrontarsi con altri designer magari attraverso apposite piattaforme social come inVISION. Se poi dalla prototipazione si ha il coraggio di passare alla produzione vera e propria (di un'app) è possibile avvalersi di piattorme di sviluppo open source e cross device come Flutter.
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 e possono tenere di conto anche della questione della sostenibilità ambientale. Per prima cosa occorre prendere coscienza del corredo tecnologico dell'host in esame (grazie a BuiltWith oppure Wappalyzer) nonché della sua affidabilità di performance nel tempo testando i tempi di risposta tramite traceroute e strumenti di monitoraggio capaci di svelare anche lo stato di propagazione del servizio DNS nel mondo ma soprattutto il controllo dei tempi di risposta da punti geografici rappresentativi dei vari continenti. 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.
UxPin è una delle offerte più interessanti in tema di !Design da intendere in senso lato: la collezione di e-book è decisamente da leggere tutta d'un fiato (impossibile...) mentre il fantastico repository Adele ci mette in relazione in modalità Open con autorevoli sistemi di design e relativi pattern grafici liberamente disponibili.
Trasformare un sito Web in un'app è possibile grazie al Progressive Web App design ma anche, manco a dirlo, attraverso l'immancabile plugin per wp). Strategie produttive a parte, è doveroso controllare che tutto fili liscio - magari attraverso appositi tool come pwabuilder sviluppato da Microsoft in maniera tale da agevolare una fruizione offline ed all'insegna della massima interoperabilità. Microsoft ha un grande livello di attenzione rispetto alle progressive web app offrendo apposita documentazione. Progettare per un ambiente interattivo vuol dire non solo qualcosa di bello ovvero di esteticamente appagante ma che soprattutto chiami all'azione ovvero che provochi un'azione in un'ottica di filosofia di UX finalizzata a stimolare una !call to action.
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 con indicazioni utili, ad esempio, su formati di carta, numeri, date, ore, indirizzi e numeri di telefono e quella di Google su necessità di orientamenti e identificazioni linguistiche sul 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...
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 Design
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 la comunicazione su Web di illustrazioni, fumetti e più in generale narrativa interattiva oltre che multimediale (ePub3 reader permettendo...).
Esistono molti servizi online così come software open-source per la produzione di ePub multimediali come l'editor multipiattaforma !Sigil oppure la piattaforma di gestione e conversione ebook Calibre particolarmente efficace se si parte da un documento ben formato di tipo .ODT realizzato magari da !Libre Office. In particolare, Sigil è un tool di sviluppo multipiattaforma molto utile per scrivere ex-novo o ancor meglio "aggiustare" file epub: un editor dall'interfaccia friendly e con comandi di menu disponibili in italiano. I file epub devono essere file formalmente validi per essere accettati e distribuiti dalle varie biblioteche e piattaforme di utilizzo di ebook come nel caso delle esigenti richieste di Amazon per la pubblicazione di ebook per Kindle. Lo strumento di validazione per eccellenza è l'utility in java EpubCheck di cui esiste una comoda versione GUI.
Ferma restando la necessità di saper soppesare i pesi dei vari elementi grafici nella progettazione di un layout, svariate piattaforme online come canva oppure photopea risultano utili in ambito graphic design così come molte soluzioni Open Source ovvero alternative software ai più blasonati e accreditate soluzioni commerciali possono risultare particolarmente preziose in ambito di preparazione di oggetti multimediali ed ebook: GIMP ovvero GNU Image Manipulation Program è un ottimo software libero per la manipolazione di immagini raster-bitmap supportato da guide online in italiano (al quale magari affiancare digiKam come Professional Photo Management e XNView per la gestione dei meta-dati); per le illustrazioni Krita mentre Inkscape è l'omologo di Gimp per la grafica vettoriale per il cui apprendimento, come per Gimp, è possibile fare riferimento ad ampie playlist di video-tutorial; come suite libera per documenti office Libre Office supporta oramai diverse procedure di produzione ed innesto di elementi multimediali; Scribus è un programma d'impaginazione professionale e DTP (DeskTop Publishing). Per audio editing multitraccia e multipiattaforma Tenacity è un fork del famoso software di !Audacity. VLC media player è un lettore multimediale gratuito open source multipiattaforma, in grado di riprodurre file audio e video in diversi formati e su vari dispositivi, sviluppato dal progetto VideoLAN; video che possono efficacemente essere editabili grazie a LosslessCut.
Lo sviluppo di un libro pur elettronico non può prescindere dai principi base della tipografia cominciando dallo studio dell'anatomia dei !glifi che compongono graficamente un font o tipo di carattere. La storia dei caratteri è altrettanto importante anche quando si voglia sviluppare un font per il design contemporaneo. Come software esistono svariate offerte multipiattaforma utilizzate da molti font designer come FontForge che ha il vantaggio di contare su una comunità di sviluppo ben attiva oppure BirdFont che vanta un'interfaccia più amichevole e moderna. I webfont ed i variable fonts risultano utili per utilizzi online: lo sviluppo è in continua evoluzione e già esistono svariati repository specifici a disposizione ed esempi applicativi come Roboto Flex.
(A)UX Design
Una corretta (A)UX ovvero Artificial User Experience può essere frutto del design di un'interfaccia digitale adatto ad una sua efficace indicizzazione (magari repentina). Bisogna tenere di cont 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 ma anche al corretto rapporto fra esigenze umane e capacità di elaborazioni artificiali dei dati così come proposto dalle linee guida People + AI Research (PAIR) - approccio simile a IBM Design for AI. 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. I !Motori di Ricerca al fine di premiare il posizionamento di una pagina Web sulla SERP (pagina di risultati di ricerca variabile secondo lingua e località di preferenza) 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, ed il tutto, ovviamente rispetto a un set di parole chiave da individuare e conseguenti contenuti adiacenti. 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 attraverso un'attività di branding. 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 e preparandosi ad affrontare questioni di analisi problematiche come ad esempio l'impatto di javascript sulle dinamiche di indicizzazione. Cercare di capire anche come viene interpretata una pagina web accedendo alla !cache (solo testo) del motore di ricerca 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 e diversi strumenti di controllo anche attraverso il proprio !Webmaster Tool denominato !Search Console: dalla possibilità di rappresentazione attraverso risultati multimediali al controllo della velocità delle pagine tutto influenzabile, ovviamente, dalla qualità del tema che si sceglie e dalla quantità di plugin installati sul proprio CMS. Fondamentale indirizzare lo spider del motore di ricerca (detto anche crawler o bot) verso contenuti originali o canonici) agevolando l'opera di indicizzazione attraverso apposite sitemap generabili per comodità tramite appositi !sitemap generator. Ancor più strategico l'utilizzo di strumenti quali il redirect 301 eventualmente configurabile tramite il file di testo .htaccess per collegare vecchi contenuti-indirizzi a nuovi. Non bisogna poi dimenticare che tutti i crawler come i browser ricevono prima il codice sorgente (visualizzabile tramite visualizza sorgente) per poi realizzare il cosidetto rendering del medesimo tramite lo sviluppo del Document Object Model (visualizzabile attraverso ispezione-analizza elemento). 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 con la sua Search Console - oramai mettono a disposizione. Nel caso di siti Web realizzati tramite cms come Wordpress possono tornare comodi specifici plugin come l'inossidabile yoast. 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. Molti lavori di analisi a cominciare dalla strategica evidenziazione dei backlink possono poi essere semplificati attraverso il software multipiattaforma Screaming Frog per finalità di indexing; altri plugin come SEO Minion ma anche Checkbot per analisi tecnica SEO-OnSite di più pagine e per finire Simplescraper per attività di estrazione dati e relativa schematizzazione.
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 rappresentazione dei risultati tramite !rich snippets sulla pagina dei risultati di ricerca grazie a json-ld: per comodità è possibile utilizzare appositi validatori di risultati multimediali ma soprattutto json-ld generator (anche nella loro immancabile forma di plugin per chrome) così come per i cms plugin-estensioni sempre per generare dati strutturati anche molto articolati. La schematizzazione dei dati risulta utile anche predisporre un'adeguata KNOWLEDGE GRAPH che in qualche maniera si può considerare come una rappresentazione della propria entità informativa su svariate piattaforme elettroniche che in qualche maniera si influenzano così a vicenda: è interessante notare come la rappresentazione di schede informative su aziende o personaggi su Google o altri motori di ricerca (compreso l'innovativo Duck Duck Go) non dipenda esclusivamente da ciò che è scritto nella pagina Web dell'entità informativa da rappresentare ma come la stessa entità (nel caso di personalità per Google si parla di people card ed in caso di aziende di My Business) venga recensita da fonti considerate particolarmente significative ed affidabili (ad esempio Wikipedia). L'ossessione di Google per il !Knowledge Graph è ben rappresentato dall'innovativo servizio Journalist Studio ricco di servizi dove i dati interagiscono con grafici secondo svariate opportunità comunicative.
Effetto diretto e visualmente apprezzabile della Knowledge Graph sono le !knowledge panel ottenibli in varie maniere: tramite l'ottimizzazione on-site sul proprio sito Web tramite le schematizzazioni schema.org e approfittando di specifiche diverse ad esempio per le immagini (rappresentate anche sotto forma di Web Stories) ed i prodotti esposti e commercializzabili online. Le knowledge panel sono dunque rappresentazioni grafico-visuali sulla SERP (come ad esempio le !zero position ) dipendenti da procedure di schematizzazione ma anche di link popularity in termini di descrizioni (e di nuovo schematizzazioni) ospitate su cosiddette !trusted sources. Queste fonti autorevoli in continuo aggiornamento sono fonti enciclopediche come wikidata-wikipedia, social B2B come linkedin, portali di news: un'infosfera che concorre anche alla definizione di 'risposte intelligenti' sempre più frequnti nelle serp. L'aspetto interessante di questa vicenda è che, come per Google My Business o le imminenti People Card queste schede possono essere create automaticamente ed è quindi opportuno da parte di chi rappresenta e valorizza brand monitorare costantemente, ed eventualmente rivendicare l'esposizione strutturata dei brand online - magari anche con tool appositi come Knowledge Graph Explorer (mentre le singole url ospitanti identità digitali o recensioni delle medesime possono essere analizzate con apposito structured data linter) - ma anche preoccuparsi di gestire Brand Account e controllare che le schede informative così prodotte siano conformi ai parametri più utili per la loro stessa rappresentazione.
Oltre al comparto dei motori di ricerca vi sono poi i !Social Network che tendono a condividere l'informazione attraverso uno specifico protocollo di meta descrizione dell'informazione digitale noto come meta OG sviluppato da Facebook (verificabile anche attraverso specifico debugger) ed 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 generazione online. Per la rappresentazione sui social occorre fare attenzione ai mutevoli requisiti minimi delle immagini di riferimento per poter rappresentare correttamente un'entità Web su Facebook e compagnia attualmente riconducibile alla misura minima 1200 × 630 pixel.
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 e magari per prendere conoscenza o dichiarare licenze di distribuzione: sorprendenti i vari exif viewer che ci consentono di visualizzare ed editare le meta-informazioni dellle varie tipologie di file e formati di immagini tramite software come exiftool oppure XnViewmp (standard XMP compreso).
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 l'apprezzatissimo instagram od ancora per l'emergente TikTok; altra frontiera emergente quella dell'ottimizzazione per gli assistenti vocali per cui è importante immaginare contenuto in ottica di domande e sopratutto (info per) risposte utili).. 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. Ad esempio recenti studi rispetto all'algoritmo A9 di Amazon avanzano l'ipotesi dei seguenti fattori per un posizionamento ottimale nell'incessante flusso espositivo di prodotti online: presenza di parole chiave e sinonimi nel nome del prodotto, nella descrizione, nella categoria in cui viene inserito, nelle review e nei commenti, immagini comprensibili, link popularity e storico consolidato; come fattori negativi viceversa l'utilizzo di punteggiatura, ripetizioni, mancate conversioni e tassi alti di restituzione.
