Il sommo bene è come l'acqua:
l'acqua ben giova alle creature e non contende,
resta nel posto che gli uomini disdegnano.
Per questo è quasi simile al Tao.
Nel ristare si adatta al terreno,
nel volere s'adatta all'abisso,
[…]
nel muoversi s'adatta alle stagioni.
Proprio perché non contende
non viene trovata in colpa

Oggi leggiamo il capitolo VIII del Tao Te Ching, ovvero "Tornare alle qualità naturali". Il tema di questo passo, nella nostra interpretazione, è la capacità di adattarsi alle esigenze e circostanze che si incontrano, proprio come fa l'acqua che scorre in discesa, sta in pianura e "nel muoversi si adatta alle stagioni", adottando dunque quell'atteggiamento di umiltà tipico di chi "resta nel posto che gli uomini disdegnano"

Nato nel mondo

Questa adattabilità è proprio una delle caratteristiche genetiche, per dir così, di HTML5. L'intenzione dei primi redattori della specifica è stata quella di definire un linguaggio e un set di tecnologie che formalizzassero tecniche e comportamenti che developer e programmatori già usavano sulle loro pagine, formalizzando e organizzando in maniera organica comportamenti e soluzioni già diffuse sul web.

Contrariamente a quanto avviene di solito con la nascita di nuovi standard, dunque, non c'è stato un gruppo di studiosi che si è chiuso in un ufficio per un anno e ha partorito il Verbo, ma è avvenuto piuttosto che developer, esperti di markup e creatori di browser si sono chiesti "che cosa usano oggi i developer in giro per il web"? Hanno condotto delle analisi e dei surveys e, in base ai risultati riscontrati, hanno scritto una specifica che si adattasse alle esigenze del "mercato"

I tag semantici

Uno degli esempi più evidenti di questo atteggiamento sono i nuovi tag semantici di markup HTML5, ovvero:

  • header: uno dei campi più importanti in ambito SEO, è possibile inserire qui del testo ma anche – anzi, soprattutto – i nostri H1, H2 e link più importanti
  • nav: parte di navigazione, solitamente il menu per le varie sezioni del sito
  • article: il "corpo" principale della nostra pagina, ovvero la parte dove è presente il contenuto, suddiviso eventualmente in header, footer e sezioni
  • section: un "pezzo" di articolo, diciamo un paragfrafo o meglio un "capitoletto", un gruppo di paragrafi omogenei
  • aside: altro elemento molto importante per il SEO, rappresenta parti "laterali" della pagina e che dunque richiedono un'attenzione minore dai parte dei motori di ricerca. Ci si potrebbero mettere, ad esempio, i banner o link pubblicitari
  • footer: simile all'header, è il "piede" di ogni pagina dove di solito vengono inseriti elementi ripetitivi come il copyright, altri link di navigazione, contatti, etc.

Questi tag sono stati inseriti nella specifica – e sono dunque ora supportati da tutti i più moderni e aggiornati browser – non perchè qualcuno in qualche torre d'avorio isolata dal mondo ha deciso che questa era la lista ma piuttosto perchè da un'analisi statistica delle pagine web attualmente esistenti questi sono i nomi delle classi (di <div> di una pagina) che più frequentemente venivano usati. Ecco all'opera esattamente quel principio di "adattabilità" che di cui parlavamo: non è il mondo che si deve adattare alla nostra teoria ma siamo noi, creatori di una standard che sarà usato nel mondo, che dobbiamo adeguarci dando una struttura organica a quello che il mondo, più o meno consapevolmente, già fa.

Input, validazione e form

Lo stesso discorso è valido per i nuovi campi e attributi che HTML5 ha introdotto in ambito form e input utente. Da uno studio analitico di un elevato numero di pagine web è emerso che i webmaster usavano un ristretto numero di nuovi campi e controlli (usando ad esempio JavaScript) per migliorare l'utilizzo di form e campi di input. Ecco allora nascere nella specifica i nuovi attributi di validazione e soprattutto i nuovi tipi di campi, ovvero:

  • <input type="search"> per box di ricerca
  • <input type="number"> per caselle numeriche
  • <input type="range"> per sliders
  • <input type="color"> per la scelta di colori
  • <input type="tel"> per i numeri di telefono
  • <input type="url"> per le URL
  • <input type="email"> per gli indirizzi email
  • <input type="date"> per date e calendari
  • <input type="month"> per i mesi
  • <input type="week"> per le settimane
  • <input type="time"> per timesta,p
  • <input type="datetime"> per date (giorno + ora)
  • <input type="datetime-local"> per date (nel nostro fuso orario)

Il tutto senza dover ricorrere a JavaScript e supportato in maniera nativa dai browser (da tutti i più moderni, quantomeno…)

Media queries

La cosa bella di HTML5 e CSS3 è che il principio di "adattabilità" è talmente fondamentale da essere stato non solo usato per la redazione della specifica ma anche applicato allo standard che ne è risultato. Il caso più paradigmatico sono i CSS3 media queries, ovvero la parte della specifica CSS3 che indica come presentare uno stile diverso a seconda delle caratteristiche del device che sta richiedendo la pagina. Questa tecnica è oggi fondamentale per le nostre pagine visto che, grazie alla diffusione di smartphones e tablet, non possiamo sapere in anticipo che tipo di schermo, risoluzione e caratteristiche fisiche avrà il dispositivo che navigherà sul nostro sito e dunque dobbiamo produrre un design il più possibile adattabile (appunto…)

Alcune delle "query" condizionali che possiamo fare sono:

  • Width e Height – Larghezza e lunghezza. Valore: grandezza espressa in pixel, em, cm
  • Orientation – Definisce se il monitor è orizzontale o verticale. Valore: portrait (verticale) landscape (orizzontale)

riuscendo così a produrre un design che, ad esempio, si sviluppi su tre colonne per monitor molto grandi ma diventi automaticamente di una colonna per device con uno schermo più piccolo (ad esempio un iPhone tenuto in verticale) e diventi di due quando l'iPhone viene girato e tenuto in modalità "landscape"

Conclusioni

Per chiudere questo puntata della nostra serie su HTML5 e il Tao non possiamo che invitare tutti i developer a seguire il solco tracciato dai padri di HTML5 e pensare al proprio lavoro e alle proprie pagine e web applications proprio come a delle "creazioni d'acqua". Il principio di adattabilità, nel nostro mondo ricco di device dalle caratteristiche più disparate e dalla presenza pressochè ubiqua di Internet, è forse il più importante e fondamentale per raggiungere un mercato virtualmente infinto e, soprattutto, accontentare i nostri utenti in qualunque momento e con qualunque dispositivo decidano di visitare i nostri siti.

The following two tabs change content below.
Silvio Porcellana
Silvio Porcellana è il fondatore di mob.is.it, il tool che centinaia di agenzie e professionisti di tutto il mondo utilizzano per creare con semplicità siti mobili e applicazioni native per i loro clienti. Tiene anche un podcast dove racconta ogni venerdì le sue avventure imprenditoriali, senza veli o segreti: Opus Digitalis