Anticipiamo HTML 5

Cominciamo con il primo articolo riguardante il web-design. Ormai tutti conoscono che il consorzio del W3C ha definito gli standard riguardo HTML 5.0. I grandi capi hanno cercato di venire incontro alle esigenze del web fornendo nuovi tag sia per l’incorporamento dei contenuti multimediali (specialmente video) che per facilitare i contenuti dinamici attraverso ajax.

Se volete leggere un articolo di approfondimento sulla nuova versione dell’html potete seguire questo articolo su html.it.

Visto che a me non piace ricopiare e ripetere le cose, vi propongo un esercizio diverso: cerchiamo di anticipare nei nostri siti quello che ci offrirà in futuro il “web 3.0″. Quindi partiamo con i nuovi tag e come possiamo rimpiazzarli con i mezzi a nostra disposizione:

Tag Canvas, disegniamo come i bambini piccoli

Il tag canvas permette di disegnare forme geometriche bidimensionali precedentemente definite con javascript. Possiamo disegnare vari tipi di forme, realizzando sfumature e tracciati complessi. Attualmente canvas è supportato dai motori webkit e gecko, quindi da safari, chrome e firefox. L’unico che rimane fuori è Internet Explorer (siete rimasti male, vero? Come sarebbe a dire che ve lo aspettavate?)

Alternative al tag Canvas

Se vogliamo cercare alternative al tag canvas per la creazione di forme bidimensionali possiamo rivolgerci alle librerie GD (sempre se abbiamo un server con php). Una piccola guida per iniziare ad usare queste librerie è disponibile sempre su html.it

Oppure possiamo utilizzare il formato grafico che il web non ha mai amato (non chiedetemi perché) l’SVG. Il formato SVG viene descritto tramite xml. Possiamo cominciare a “disegnare” con SVG utilizzando qualsiasi programma di grafica vettoriale, come adobe illustrator o inkscape.

Tag section, ne avevamo veramente bisogno?

Cosa fa il tag section? Semplice, divide il sito in sezioni. Di per se il tag ha la funzione di un div univoco, solo con qualche attributo interessante, anche per l’indicizzazione del sito, (come contenteditable, contextmenu, draggable, irrelevant, registrationmark, tabindex, template che sono spiegati nella guida).

E dopo section, anche header, nav, footer, aside.. possiamo mandare in pensione i div!

Sinceramente i div mi sono sempre stati simpatici, speriamo che non sia una scomparsa totale, anche per la retrocompatibilità con i browser precedenti (Internet Explorer 6, brrrr)

Alternative ai tag section, header, nav, footer, aside e compagnia bella

Questi tag sono semantici, non aggiungno funzionalità di tipo estetico. Per adesso risolviamo con i div, magari identificandoli semanticamente come suggerito da queste semplici linee guida sempre offerte da html.it

E adesso, i video e l’audio!

Per contrastare il dominio quasi assoluto di adobe flash per la riproduzione di contenuti multimediali, quando html 5.0 sarà uno standard per tutti i browser (non oso nemmeno pensarci a una data) potremo utilizzare i tags audio e video, senza preoccuparci che l’utente abbia il relativo plug-in, oppure l’autorizzazione per installarlo sul computer (anche questa è una grossa limitazione). Il funzionamento è del tutto simile al tag img (non dite che non sapete usarlo sennò vi rimando al CEPU). Attraverso javascript, inoltre, possiamo aggiungere i controlli.

Alternative ai tag video e audio

Le alternative sono due: o appoggiarci al plug-in del browser (scelta sconsigliata), oppure utilizzare l’amico/nemico adobe flash per la riproduzione di contenuti multimediali.

E per finire, le form(osità) del web 2.0

Le nuove form permettono il quasi abbandono di javascript per controllare l’input inserito dall’utente. Attraverso il modulo required possiamo controllare l’esattezza dei dati forniti senza creare funzioni apposite. Se volete provarli in anteprima procuratevi il browser opera, e seguite questo articolo. Altri moduli sono min, max e step che permettono di stabilire un numero minimo e massimo all’interno di una selezione temporale e con step quanti minuti da una all’altra. L’ultimo interessato è il tag datalist, che funziona come i “suggerimenti di google” in una lista.

alternative a buon mercato per le form

eh beh, i controlli con javascript. Ah si li possiamo fare anche lato server. Oppure avete detto ajax…