Nulla. Semplice, chiaro e conciso.

Perchè nessun browser ha pensato di dare un supporto che vada oltre all’accettare i tag nuovi come validi, senza tale supporto a cosa si riduce tutta la rivoluzione dell’HTML 5: ad una manciata di tag nuovi. So bene che porta interessati vantaggi per l’inclusione di files. gestione form o salvataggio di dati in locale ma mi sto soffermando sul 90% degli articoli dedicati esclusivamente al markup

Personalmente sono favorevole all’HTML 5 come a tutti i cambiamenti ma non riesco a comprendere come si continui a scrivere e suggerire di adottarlo senza che esista ancora un supporto decente. Le sperimentazioni vanno benissimo, anch’io la versione precedente di CreativeBits l’avevo realizzata con questo linguaggio e mi stupisce come certi siti l’abbiano anche segnalato unicamente per questo motivo.

Ma in pratica cosa si sta chiedendo di fare per il passaggio da 4 a 5? Solo sostituire alcuni tag <div> con i corrispettivi tag nuovi, ad esempio:

• <div id="header"> diventa <header>
• <div id="navbar"> diventa <nav>
• <div class="article"> diventa <article>
• ..e così via, per vedere la lista completa potete guardare qui.

Trovo che tutto ciò sarà estremamente interessate una volta trovate delle soluzioni per meglio sfruttare questa divisione semantica del contenuto, mi piace vedere l’Html 5 come una versione potenziata dei Microformats che però sono dedicati solo ad una parte di informazioni mentre adesso si potrebbe pensare più grande come, ad esempio, allo sviluppo di  sistemi di catalogazione e ricerca di nuova generazione grazie ai tag dedicati che permetterebbero di focalizzarsi solo sul contenuto principale della pagina.

Ma la realtà attuale delle cose è che il supporto browser è scadente e c’è bisogno di un js dedicato solo per far digerire i tag nuovi a IE (senza dimenticare che anche Firefox 2 non legge l’html5 per colpa di un bug nel motore di rendering), i motori di ricerca con considerano minimamente i tag nuovi e non dimentichiamo la cosa più importante l’HTML5 è ancora in fase di stesura quindi non ci si può aspettare niente di definito per ancora qualche anno visti i tempi medi che hanno al w3c.

Ripeto: ottimo spunto per una conversazione, dei buoni propositi e un grande potenziale ma è davvero così necessaria questa corsa per essere i primi o alla fine è solo l’ennesimo espediente per farsi pubblicità facile?

Magari mi sbaglio o non sto vedendo il quadro generale e ho tralasciato qualcosa, cosa ne pensate?

Una griglia aiuta il designer a dare un ordine razionale agli elementi della pagina rendendola più comprensibile e leggibile.

Da qualche anno l’uso delle griglie è entrato nei monitor di molti web designer e, grazie a grandi esperti in questo campo come Mark Boulton e Khoi Vinh che hanno saputo diffondere questa pratica oltre i confini della carta stampata, finalmente si è iniziato a sviluppare interfacce per il web con una base tipografica.

Il concetto di griglia

Il concetto di griglia web per come viene di solito presentato si riferisce a delle colonne verticali (di solito 12 o 16, ma anche 6 o 4) a dimensione fissa con un margine tra loro di spaziatura. Ora come è evidente se la griglia è composta da sole colonne non si può definire tale in quanto richiederebbe anche una controparte orizzontale che sovrapponendosi creerebbe appunto la griglia vera e propria, questo però porrebbe forse troppe barriere alla creatività dei designer e si è deciso di trovare un accettabile compromesso iniziando ad adottare le sole colonne verticali.

La nascita dei frameworks

Come è logico pensare dato un input iniziale sono nate molte iniziative per semplificare la vita ai designer meno esperti per metterli comunque nella condizione di iniziare a fare pratica fornendo degli strumenti e delle risorse per saltare la fase di pianificazione, e quindi anche l’impostazione di una griglia, per passare direttamente alla parte grafica e, successivamente, in fase di realizzazione del markup HTML/CSS (il codice alla base delle pagine web) avendo già una base pronta con tutti i riferimenti e le dimensioni delle colonne senza dover perdere a crearle da soli e verificare che sia tutto compatibile con i vari browser.

Il bookmarlet

Se ne è discusso parecchio, soprattutto per quanto riguarda le basi già pronte e personalmente trovo che siano utili sono in pochissimi casi ma non voglio entrare entrare nel merito della discussione, oggi sono qui per presentarvi 2 semplici bookmarklet che ho preparato* e che sono sicuro vi aiuteranno quando vorrete testare il vostro sito per vedere se si è rispettata la griglia su cui era stata realizzata l’interfaccia.

Mi sono basato, come dimensioni, alla griglia oramai standard di 960.gs cioè per una pagina di 960px, a scelta suddivisa in 12 o 16 colonne con 20px di spazio tra l’una e l’altra. In pratica questi bookmarklet applicano in overlay alla pagina che si sta visualizzando con le colonne di colore rosso semi trasparente che sono fornite nel pacchetto. Ho aggiunto anche un leggero fondo bianco anch’esso semi-trasparente per far risaltare le colonne nel caso lo sfondo della pagina risultasse troppo scuro.

Trascinate nella barra dei preferiti i bookmarlet qui sotto e fate pure un test su CB per vedere subito come funziona.

12 Colonne 16 Colonne

* In realtà  non li ho scritti di mano mia partendo da 0, purtroppo non sono molto pratico di Javascript, ma sono un adattamento di un bookmarklet creato da Thomas Aylott che a sua volta ha preso ispirazione da un bookmarklet creato da Andy Budd quindi va a loro il merito, io ho solo sostituito quella griglia in stile photoshop a mio parere non molto pratica con le colonne fornite da 960.gs.

Non dovrebbero dare nessun problema anche se ho notato e non so come mai che su alcuni siti la griglia si ferma all’altezza della finestra quindi scorrendo la pagina l’overlay rimane fisso in alto e in altri siti invece arriva fino a fondo pagina, sapete dirmi il perchè?

Fatemi sapere nei commenti se vi è servito e se avete qualche suggerimento per renderlo ancora migliore.

Update (3/05): Non so come sia riuscito a perdermelo, eppure ho cercato per giorni una soluzione simile e sul sito di 960.gs non ce n’era traccia ma a quanto pare esiste già da qualche mese un bookmarklet, questa volta realizzato come si deve, che fa praticamente la stessa cosa e con molte opzioni anche se ha ancora qualche problema nel visualizzare le colonne colorate e in questo caso tornano utili i bookmarklet che avevo preparato, gridder.andreehansson.se.