Tempo fa avevo parlato su queste pagine dell’elemento video per l’html5.

Tra i maggiori vantaggi di questa soluzione c’è l’esclusione di flash per device mobili (nello specifico ipad ed iphone).
Dall’ultimo articolo è passato un po’ e trovandomi a dover integrare un video per un progetto ho rivisto le mie precedenti nozioni sul tema.

Come prima cosa ho cercato una soluzione di veloce integrazione ma che garantisse un buon supporto e mi sono imbattuto in videojs (http://videojs.com/).

Un ottimo script che offre:

• un file javascript (valuta se il browser supporta l’elemento video nel caso offre flowplayer)
• un css (per gestire lo stile del player)
• inclusione esterna a flowplayer (per browser che non supportano l’elemento video)

L’applicazione è estremamente semplice, nel caso non siate pratici del codice potete utilizzare il comodo tool (http://videojs.com/embed-builder/) che assembla il codice necessario al volo.

E’ sufficiente inserire le risorse necessarie, ovvero:

• url dell’immagine di default (viene mostrata mentre il video viene caricato)
• url delvideo in mp4
• url del video in ogg
• url del video in webm

tra le opzioni vediamo:

• quale video caricare nel player flash (di default l’mp4)
• altezza e larghezza del video
• se inserire i link per il donwload del video (per device che non supportano i video)
• support videojs (inserisce o meno un link al sito di videojs)
• preload (permette di far partire il buffer non appena la pagina è caricata)
• autoplay (fa partire il video in automatico)compact version (codice senza spazi per peso inferiore)

Con questa soluzione si velocizza notevolmente l’inserimento dei video in html su siti e applicazioni web, l’unica miglioria che mi sento di consigliare è quella di evitare l’inclusione esterna del flowplayer ma caricare la risorsa sul proprio spazio e richiamarla come tale.
In questo modo otteniamo un caricamento più veloce (e più gestibile) del player in flash oltre che assicurarci una versione più aggiornata rispetto a quella impostata nello script.

L’ultima considerazione su questa tecnica è la conversione del video nei tre formati necessari, sicuramente complessa per chi è poco pratico di questo ambito. Il mio suggerimento è quello di provare ad utilizzare vlc per la conversione, che permette un’ampia e dettagliata scelta dei codec e dei formati nella sua ultima versione includendo sia mp4 che ogg.

Come alternativa è possibile utilizzare handbrake (http://handbrake.fr/) per l’mp4 e ffmpeg2theora (http://v2v.cc/~j/ffmpeg2theora/) per l’ogg, nel caso non siate pratici di dos esiste una versione con interfaccia (http://www.softpedia.com/downloadTag/theora+converter) basata sullo stesso convertitore.
Se non incontrate successo con queste opzioni suggerisco una visita a questo post (http://www.reelseo.com/html5-ogg-h264-encoding-tools/), dove vengono consigliati numerose alternative.

Tra i consigli ho omesso un convertitore per il formato webm (http://www.webmproject.org/), personalmente non ho avuto fortuna e non son riuscito ad ottenere un file video funzionante per questo formato, probabilmente anche per il poco tempo a disposizione.

Per ora ho quindi preferito omettere questa alternativa nei miei progetti non essendo questo formato l’unico supportato dai diversi browser. Per il futuro spero di potermi applicare di più, in attesa vi lascio la lista di convertitori suggerita nel sito del webm (http://www.webmproject.org/tools/) per fare qualche test.

In questo articolo vedremo come integrare facilmente il widget autocomplete di Jquery UI all’interno di pagine dinamiche.

L’utilizzo è molto semplice, come prima cosa è necessario scaricare il pacchetto completo di Jquery UI compreso di tema personalizzato o standard e collegare i rispettivi files alla pagina dinamica.

<link rel="stylesheet" href="css/theme/ui.theme.css" type="text/css"/>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>

Ora possiamo aggiungere l’elemento input che utilizzero per l’autocomplete, per comodità di selezione verrà aggiunto un id.

<input value="Insert your tag here" />

Per ciò che riguarda javascript iniziamo applicando un autocomplete base al campo input

$(function() {var myTags = ["tag1", "tag2", "anotherTag", "simpleTag"];
$("#tags").autocomplete({source: myTags});});

In questo caso settiamo come opzione “source” che specifica come sorgente l’array “myTags”.Per rendere dinamico l’autocomplete modifichiamo la sorgente con un file dinamico che si occuperà di effettuare la ricerca

 $("#tags").autocomplete({source: "tagSearch.php"});

Di seguito un esempio per tagSearch.php:

//creazione di un array vuoto
$return_arr = array();

//dati di accesso a mysql e al db
$dbhost = 'YOUR_SERVER';
$dbuser = 'YOUR_USERNAME';
$dbpass = 'YOUR_PASSWORD';
$dbname = 'YOUR_DATABASE_NAME';

//definisco la variabile di ricerca dell'utente
$term = $_GET("term");

//connessione al a mysql
$conn = mysql_connect($dbhost, $dbuser, $dbpass)
or die ('Impossibile connettersi a Mysql');
//selezione ddb
mysql_select_db($dbname);
//se connesso
if ($conn)
{
//query select
$fetch = mysql_query("SELECT * FROM tags WHERE MATCH(tagName) AGAINST('".$term."*')");
//loop dei dati
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) {
$row_array['value'] = $row['tagName '];
array_push($return_arr,$row_array);
}

}
//chiudo la connessione a mysql
mysql_close($conn);
//restituisco l'array in formato json
echo json_encode($return_arr);

La variabile $terms viene ricavata dall’url, l’autocomplete di Jquery UI richiama infatti il file search.php con la variabile term (es. search.php?term=ciao) ad ogni change nel campo input.Considerato che la variabile term viene aggiornata e inviata ad ogni change del campo ho utilizzato MATCH AGAINST nella query affinchè ad ogni richiesta mysql cerchi l’input dell’utente seguito da altro.Il risultato è che a fronte di una ricerca “a” verranno restituiti tutti i dati che iniziano per “a”, aggiungendo lettere verranno restituiti solo i dati che corrispondono ai criteri della ricerca.

L’autocomplete di JQuery UI prevede una vasta serie di opzioni con le quali è possibile manipolare i dati prensenti nell’input e nei risultati, creare una cache dai dati e customizzare aspetto e animazioni dell’input.Per maggiori informazioni consiglio una lettura della documentazione disponibile sulla pagina dedicata.

Una delle funzionalità più interessanti dell’HTML 5 è senza dubbio rappresentata dalla possibilità di inserire filmati video all’interno della pagina web.

Questo elemento cambia notevolmente il modo in cui gli utenti possono usufruire dei video su internet permettendo la visione del contenuto senza un player flash.

L’attuale supporto per questo elemento è riservato alle ultime versioni di firefox, safari e chrome ma la stessa microsoft ha annunciato il supporto per Internet explorer 9 mentre per Opera dalla versione 10 (10.5).

Per iniziare

Prima di iniziare con il codice è indispensabile ricordare che non tutti i browser supportano gli stessi contenitori e gli stessi codecs audio/video. Un file video è di fatti composto da un contenitore (mpeg4,flash video, ogg ecc), un codec audio (mpeg1,vorbis, ecc) e un codec video (mpeg4 asp, h.264, theora).
Per portare un po’ di ordine in questa situazione è utile tener presente ciò che è supportato dai browser e preparare due files. Uno con theora,vorbis e ogg e il secondo con h.624,aac e mp4.

Il primo files sarà supportato da firefox, opera e chrome il secondo da chrome, safari, iphone e android.

Per la conversione dei files di questo esempio sono stati utilizzati ffmpeg2theora ed handbrake .

L’elemento video

Per integrare nella pagina web il nostro video utilizziamo l’elemento video con chiusura esplicita.

<video></video>

Al suo interno è possibile specificare un contenuto alternativo nel caso il browser non supporti questo elemento.

<video>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Considerato che l’elemento video si comporta come l’elemento immagine necessita sempre di avere un altezza e una larghezza specifica.

<video width="640" height="480">
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Per inserire il video sorgente aggiungiamo l’attributo src con la path relativa alla risorsa.

<video src="miovideo.ogv" width="640" height="480">
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Per rendere visibili i controlli del video è sufficiente aggiungere l’attributo controls.

<video src="miovideo.ogv" width="640" height="480" controls>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Se desideriamo che il video venga scaricato non appena la pagina è caricata possiamo aggiungere l’attributo preload.

<video src="miovideo.ogv" width="640" height="480" preload>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

O in caso contrario specificare “none” come valore.

<video src="miovideo.ogv" width="640" height="480" preload="none">
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Un’ultima opzione viene offerta dall’attributo autoplay che fa partire automaticamente il filmato.

<video src="miovideo.ogv" width="640" height="480" autoplay>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Un’ultima nota va dedicata al fatto che abbiamo due file da inserire e non uno, l’attributo src non è quindi sufficiente e dobbiamo utilizzare l’elemento source con l’attributo src per definire la risorsa.
In aggiunta è necessario specificare il mime del file e i codecs per far sì che il browser sappia a priori cosa andrà a caricare e se è supporta lo specifico file.

<video  width="640" height="480" autoplay>
<source src="miovideo.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="miovideo.ogv" type='video/ogg; codecs="theora, vorbis"'>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

In conclusione

Una volta applicato questo codice con i relativi percorsi ai rispettivi files si ottiene un risultato come in questo esempio.

Il video utilizzato nell’esempio è visibile su youtube ed è stato gentilmente fornito da Guido Viale Marchino che ringrazio per l’aiuto.

Una funzionalità aggiuntiva per i browser che non supportano il tag video potrebbe essere quella di aggiungere un flash player come contenuto alternativo ma richiede una verifica del supporto dell’elemento video per il client utilizzato dall’utente.

Nel prossimo articolo vedremo come verificare il supporto delle varie funzionalità dell’HTML 5 nel browser dell’utente. Torna a trovarmi su howtoweb.it per le prossime lezioni di html 5 o iscriviti agli rss per rimanere sempre aggiornato sui nuovi articoli.

Nota:

Ho notato che inizialmente il video non veniva caricato correttamente su firefox e opera, il problema era il fatto che il mime video/ogg non veniva associato da apache al file in formato .ogv

Per risolvere ho aggiunto un file .htaccess nella cartella specificando a quali formati applicare il mime presente nela pagina html.

Nel caso incontriate la stessa problematica è possibile risolvere con questa linea di codice all’interno del file .htaccess

AddType video/ogg .ogg .ogv

Una delle funzionalità più interessanti dell’HTML 5 è senza dubbio rappresentata dalla possibilità di inserire filmati video all’interno della pagina web.

Questo elemento cambia notevolmente il modo in cui gli utenti possono usufruire dei video su internet permettendo la visione del contenuto senza un player flash.

L’attuale supporto per questo elemento è riservato alle ultime versioni di firefox, safari e chrome ma la stessa microsoft ha annunciato il supporto per Internet explorer 9 mentre per Opera dalla versione 10 (10.5).

Per iniziare

Prima di iniziare con il codice è indispensabile ricordare che non tutti i browser supportano gli stessi contenitori e gli stessi codecs audio/video. Un file video è di fatti composto da un contenitore (mpeg4,flash video, ogg ecc), un codec audio (mpeg1,vorbis, ecc) e un codec video (mpeg4 asp, h.264, theora).
Per portare un po’ di ordine in questa situazione è utile tener presente ciò che è supportato dai browser e preparare due files. Uno con theora,vorbis e ogg e il secondo con h.624,aac e mp4.

Il primo files sarà supportato da firefox, opera e chrome il secondo da chrome, safari, iphone e android.

Per la conversione dei files di questo esempio sono stati utilizzati ffmpeg2theora ed handbrake .

L’elemento video

Per integrare nella pagina web il nostro video utilizziamo l’elemento video con chiusura esplicita.

<video></video>

Al suo interno è possibile specificare un contenuto alternativo nel caso il browser non supporti questo elemento.

<video>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Considerato che l’elemento video si comporta come l’elemento immagine necessita sempre di avere un altezza e una larghezza specifica.

<video width="640" height="480">
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Per inserire il video sorgente aggiungiamo l’attributo src con la path relativa alla risorsa.

<video src="miovideo.ogv" width="640" height="480">
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Per rendere visibili i controlli del video è sufficiente aggiungere l’attributo controls.

<video src="miovideo.ogv" width="640" height="480" controls>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Se desideriamo che il video venga scaricato non appena la pagina è caricata possiamo aggiungere l’attributo preload.

<video src="miovideo.ogv" width="640" height="480" preload>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

O in caso contrario specificare “none” come valore.

<video src="miovideo.ogv" width="640" height="480" preload="none">
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Un’ultima opzione viene offerta dall’attributo autoplay che fa partire automaticamente il filmato.

<video src="miovideo.ogv" width="640" height="480" autoplay>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

Un’ultima nota va dedicata al fatto che abbiamo due file da inserire e non uno, l’attributo src non è quindi sufficiente e dobbiamo utilizzare l’elemento source con l’attributo src per definire la risorsa.
In aggiunta è necessario specificare il mime del file e i codecs per far sì che il browser sappia a priori cosa andrà a caricare e se è supporta lo specifico file.

<video  width="640" height="480" autoplay>
<source src="miovideo.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="miovideo.ogv" type='video/ogg; codecs="theora, vorbis"'>
<p>Spiacente il tuo browser non supporta l'elemento video</p>
</video>

In conclusione

Una volta applicato questo codice con i relativi percorsi ai rispettivi files si ottiene un risultato come in questo esempio.

Il video utilizzato nell’esempio è visibile su youtube ed è stato gentilmente fornito da Guido Viale Marchino che ringrazio per l’aiuto.

Una funzionalità aggiuntiva per i browser che non supportano il tag video potrebbe essere quella di aggiungere un flash player come contenuto alternativo ma richiede una verifica del supporto dell’elemento video per il client utilizzato dall’utente.

Nel prossimo articolo vedremo come verificare il supporto delle varie funzionalità dell’HTML 5 nel browser dell’utente. Torna a trovarmi su howtoweb.it per le prossime lezioni di html 5 o iscriviti agli rss per rimanere sempre aggiornato sui nuovi articoli.

Nota:

Ho notato che inizialmente il video non veniva caricato correttamente su firefox e opera, il problema era il fatto che il mime video/ogg non veniva associato da apache al file in formato .ogv

Per risolvere ho aggiunto un file .htaccess nella cartella specificando a quali formati applicare il mime presente nela pagina html.

Nel caso incontriate la stessa problematica è possibile risolvere con questa linea di codice all’interno del file .htaccess

AddType video/ogg .ogg .ogv

Nelle ultime settimane mi si sono presentate diverse occasioni per discutere sul supporto da offrire agli utenti di Internet Explorer 6 e ho notato che la questione risulta ben lontana dall’essere risolta.

Allo stato attuale i maggiori servizi di statistiche web delineano gli utenti di Internet Explorer 6 tra il 9% e il 18% dell’utenza mondiale.

Una statistica indubbiamente preoccupante considerato che superara gli utenti di safari, chrome ed opera messi insieme.

Detto questo prima di farsi prendere dal panico suggerirei di abbandonare le ricerce per ottenere un numero preciso di utenti IE6 sul pianeta e di basarsi su qualcosa di più oggettivo.

Sicuramente se vi siete posti il problema è perchè temete di perdere utenza tra coloro che utilizzano questo vetusto browser e prima di procedere oltre vi consiglierei di rispondere alla seguente domanda:

Quanti utenti con Internet Explorer 6 navigano sul vostro sito?

Per fare un esempio su questo blog gli utenti con ie6 negli ultimi 4 mesi risultano meno dell’1% e lo stesso potrebbe essere per il vostro sito.

Non saprete mai di quanti utenti state parlando finchè non effettuerete delle verifiche sulle vostre statistiche.

Sicuramente questi dati sono molto più precisi delle statistiche globali, che essendo su grandi numeri e contesti diversi probabilmente non rappresentano il vostro caso.

Una volta verificati i numeri vi inviterei a valutare anche l’andamento delle visite degli utenti con IE6 da un anno fa ad oggi.

Sulla base di questi dati possiamo arrivare sicuramente ad almeno un paio di conclusioni:

1) Gli attuali utenti con Internet Explorer 6 sono una minoranza

2) Gli attuali utenti con Internet Explorer 6 sono meno di un anno fa

Queste sono realtà oggettive ricavabili dalle statistiche di qualunque sito web.

Perchè accade questo? Internet Explorer 6 è un browser obsoleto, uscito nel 2001 che ha visto alterni update fino al 2007/2008, da allora sono uscite 2 nuove versioni di questo browser e a breve ne vedremo una terza.Questo browser presenta innumerevoli problemi di sicurezza, performance e funzionalità, per questo motivo molte aziende quali Google hanno abbandonato il supporto a questo browser.

Per lo stesso motivo Microsoft sta portando avanti da tempo campagne a favore dell’aggiornamento a Internet Explorer 8.

Gli interventi necessari per il funzionamento delle attuali tecnologie su Internet Explorer 6 sono onerosi e in alcuni casi impossibili, richiedono lunghi tempi di produzione e di test, quindi grandi costi che potrebbero essere altrimenti destinati al miglioramento dell’accessibilità e dell’usabilità, all’ottimizzazione dei tempi di caricamento delle pagine e per i motori di ricerca che portano vantaggi concreti a tutta l’utenza del sito e non solo ad una minoranza in via d’estinzione.

Lavorare ad oggi per il supporto agli utenti di Internet Explorer 6 è di fatto uno spreco di tempo e risorse che non porta vantaggi a nessuno e rappresenta una completa opposizione al buon senso che attualmente caratterizza il mondo del web ed aziende del livello di Microsoft o Google.

Nelle ultime settimane mi si sono presentate diverse occasioni per discutere sul supporto da offrire agli utenti di Internet Explorer 6 e ho notato che la questione risulta ben lontana dall’essere risolta.

Allo stato attuale i maggiori servizi di statistiche web delineano gli utenti di Internet Explorer 6 tra il 9% e il 18% dell’utenza mondiale.

Una statistica indubbiamente preoccupante considerato che superara gli utenti di safari, chrome ed opera messi insieme.

Detto questo prima di farsi prendere dal panico suggerirei di abbandonare le ricerce per ottenere un numero preciso di utenti IE6 sul pianeta e di basarsi su qualcosa di più oggettivo.

Sicuramente se vi siete posti il problema è perchè temete di perdere utenza tra coloro che utilizzano questo vetusto browser e prima di procedere oltre vi consiglierei di rispondere alla seguente domanda:

Quanti utenti con Internet Explorer 6 navigano sul vostro sito?

Per fare un esempio su questo blog gli utenti con ie6 negli ultimi 4 mesi risultano meno dell’1% e lo stesso potrebbe essere per il vostro sito.

Non saprete mai di quanti utenti state parlando finchè non effettuerete delle verifiche sulle vostre statistiche.

Sicuramente questi dati sono molto più precisi delle statistiche globali, che essendo su grandi numeri e contesti diversi probabilmente non rappresentano il vostro caso.

Una volta verificati i numeri vi inviterei a valutare anche l’andamento delle visite degli utenti con IE6 da un anno fa ad oggi.

Sulla base di questi dati possiamo arrivare sicuramente ad almeno un paio di conclusioni:

1) Gli attuali utenti con Internet Explorer 6 sono una minoranza

2) Gli attuali utenti con Internet Explorer 6 sono meno di un anno fa

Queste sono realtà oggettive ricavabili dalle statistiche di qualunque sito web.

Perchè accade questo? Internet Explorer 6 è un browser obsoleto, uscito nel 2001 che ha visto alterni update fino al 2007/2008, da allora sono uscite 2 nuove versioni di questo browser e a breve ne vedremo una terza.Questo browser presenta innumerevoli problemi di sicurezza, performance e funzionalità, per questo motivo molte aziende quali Google hanno abbandonato il supporto a questo browser.

Per lo stesso motivo Microsoft sta portando avanti da tempo campagne a favore dell’aggiornamento a Internet Explorer 8.

Gli interventi necessari per il funzionamento delle attuali tecnologie su Internet Explorer 6 sono onerosi e in alcuni casi impossibili, richiedono lunghi tempi di produzione e di test, quindi grandi costi che potrebbero essere altrimenti destinati al miglioramento dell’accessibilità e dell’usabilità, all’ottimizzazione dei tempi di caricamento delle pagine e per i motori di ricerca che portano vantaggi concreti a tutta l’utenza del sito e non solo ad una minoranza in via d’estinzione.

Lavorare ad oggi per il supporto agli utenti di Internet Explorer 6 è di fatto uno spreco di tempo e risorse che non porta vantaggi a nessuno e rappresenta una completa opposizione al buon senso che attualmente caratterizza il mondo del web ed aziende del livello di Microsoft o Google.

Nel precedente articolo abbiamo visto come utilizzare gli elementi semantici dell’HTML 5 nella nostra pagina web.

Oggi approfondiremo gli aspetti relativi alla semantica di questi tag.

Un principale vantaggio derivante dall’utilizzo di questi elementi è la standarizzazione degli elementi, ovvero a differenza dell’HTML 4.01 abbiamo una serie di elementi specifici da utilizzare per diverso scopo.

Questo di fatto evita la definizione di div con classi ed id che risultano generici e variano a seconda delle abitudini di chi sviluppa la pagina.

Oltre a questo l’HTML 5 presenta un nuovo algoritmo per la definizione dell’outline del documento che modifica il normale modo di definire le intestazioni nel file html.

Facciamo un passo indietro, nell’HTML 4.01 l’unico modo per definire l’outline del documento è quello di utilizzare gli elementi h1/h6 con il rispettivo valore semantico.

Per esempio:

<h1>Titolo del sito</h1>
 <h2>sottotitolo del sito</h2>

<h3>Titolo del post</h3>
 <h4>Sottotitolo del post</h4>

<h3>Titolo del post</h3>
 <h4>Sottotitolo del post</h4>

Notate come h1 sia univoco nella pagina e rappresenti il titolo del sito, il sottotitolo del sito è definito con <h2>, mentre h3 e h4 rappresentano rispettivamente titolo e sottotitolo di una sezione/contenuto della pagina.

In HTML 5 possiamo modificare questa situazione come segue:

<header>
 <hgroup>
 <h1>Titolo del sito</h1>
 <h2>sottotitolo del sito</h2>
 </hgroup>
 </header>

<article>
 <hgroup>
 <h1>Titolo del post</h1>
 <h2>Sottotitolo del post</h2>
 </hgroup>
 </article>

<article>
 <hgroup>
 <h1>Titolo del post</h1>
 <h2>Sottotitolo del post</h2>
 </hgroup>
 </article>

Analizziamo nel dettaglio le differenze.

L’elemento h1 si ripete

Nell’HTML 5 l’utilizzo dell’elemento <article> definisce una sezione indipendente della pagina dove appunto posso riutilizzare l’elemento h1 dove avrà valore di titolo della sezione/contenuto e non della pagina.

Utilizzo di hgroup

L’utilizzo di hgroup ha lo scopo di raggruppare insieme intestazioni diverse, nel caso del primo elemento all’interno dell’header h1 avrà valore di titolo e h2 di sottotitolo, questo permette di utilizzare un’intestazione con valore associato ad altre intestazioni presenti in quel contesto senza che il significato venga mistificato da elementi uguali presenti sulla pagina.

Come abbiamo visto l’HTML 5 tratta diversamente la semantica degli elementi da altri linguaggi di markup ma offre indubbiamente una serie di vantaggi che rendono il codice molto più modulare e semantico.

Nel prossimo articolo vedremo come verificare il supporto delle funzionalità più avanzate dell’HTML5 sul browser dell’utente.

Passate a trovarmi come sempre su howtoweb.it o abbonatevi ai feed rss per rimanere aggiornati sugli ultimi articoli.

Alla prossima

Nella lezione precedente abbiamo visto come impostare il nostro file in HTML 5 definendo un doctype shorted, un corretto charset e gestendo css e javascript senza enunciazione del mime.

Oggi vedremo invece alcuni tag che utilizzeremo per definire il layout della nostra pagina web.

Prima di procedere, dobbiamo però risolvere un dubbio cruciale.

I nuovi elementi dell’HTML 5 sono supportati dai browser attuali?

La maggior parte dei browser non incontriamo problemi nell’utilizzo di questi tag, normalmente il browser individua l’elemento lo aggiunge al DOM della pagina e gli attribuisce dei valori di default in base alle informazioni in suo possesso e nel caso possiamo sovrascrivere stili customizzati con un normale css.

La vera problematica è Internet Explorer che fino alla versione attuale (8) rappresenta l’elemento sconosciuto nel DOM come un nodo vuoto, rendendo impossibile definire un qualunque stile per l’elemento.

La soluzione per Internet Explorer

Prima di disperarci e tornare ad insultare per l’ennesima volta il browser di mamma Microsoft sappiate che esiste una soluzione molto semplice al problema.

Possiamo infatti pensare di creare un elemento sconosciuto a Internet Explorer prima della creazione del DOM.

Senza aggiungere l’elemento a mano nel codice possiamo utilizzare javascript per creare a priori l’elemento e permetter così di stilizzarlo con i css.

<script>document.createElement("header");</script>

Per fare in modo che il workaround funzioni, è necessario mantenere lo script nell’head della pagina, una buona norma può essere quella di inserire lo script in un commento condizionale per IE.

<!--[if IE]>
<script>document.createElement("header");</script>
<![endif]-->

Lo script creerà così un elemento <header> prima della creazione del DOM solo per IE, permettendo di stilizzare tale elemento con i css.

Una scelta migliore, HTML5 enabling script

Considerato che i nuovi elementi dell’HTML 5 sono numerosi potremmo pensare di aggiungerli a mano ma una soluzione sicuramente più comoda e più sicura è rappresentata da questo script javascript di Remy Sharp che oltre a velocizzare la realizzazione considera anche problematiche più peculiari come i css per la stampa dove i javascript non vengono eseguiti.

Al markup!

Ora che siamo certi di un funzionamento crossbrowser possiamo iniziare ad aggiungere qualche nuovo tag al nostro file.

Header

L’elemento <header> ha come scopo quello di racchiudere una porzione di codice che avrà ruolo di testata della pagina.

Per esempio

<header>
<!-- il logo ed eventuale intestazione al sito -->
</header>

Hgroup

L’elemento <hgroup> racchiude una porzione di codice composta da intestazioni

<header>
<hgroup>
<h1>Titolo del sito</h1>
<h2>Sottotitolo</h2>
</hgroup>
</header>

Article

L’elemento <article> racchiude una porzione di codice semanticamente indipendente dal resto della pagina e sì possiamo utilizzarla al posto del solito <div> di wordpress

<article>
<header>
<hgroup>
<h1>Titolo del sito</h1>
<h2>Sottotitolo</h2>
</hgroup>
</header>
</article>

Time

L’elemento <time> rappresenta una data di pubblicazione.

<time datetime="2010-04-21" pubdate>21 Aprile 2009</time>

L’attributo datetime accetta sia date che in aggiunta l’ora in formato leggibile per la macchina

L’attributo pubdate determina a scelta la data di pubblicazione di un contenuto specifico (se all’interno di <article>) o la data di pubblicazione della pagina se lasciato all’esterno.

Nav

L’elemento <nav> specifica una porzione di codice destinato ala navigazione per esempio la lista di un menu.

<nav>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</nav>

Aside

L’elemento <aside> viene utilizzato per definire una porzione di codice destinata correlata al contenuto ma comunque separata come per esempio una sidebar

Footer

L’elemento <footer> definisce una porzione di codice che rappresenta di fatto il piede della pagina o del contenuto specifico.

<footer>Make with love and HTML5!</footer>

un esempio completo della pagina è il seguente.

<!doctype html>
<html>
<head>
<title>titolo della pagina</title>
<meta charset=utf-8>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<header>
<hgroup>
<h1>Titolo del sito</h1>
<h2>Sottotitolo del sito</h2>
</hgroup>
</header>
<nav>
<ul>
<li><a href="#">link</a></li>
<li><a href="#">link</a></li>
</ul>
</nav>
<article>
<header>
<hgroup>
<h1>Titolo dell'articolo</h1>
<h2>Sottotitolo dell'articolo</h2>
</hgroup>
</header>
<time datetime="2010-04-21" pubdate>21 Aprile 2009</time>
<p>Testo di prova</p>
</article>
<aside>contenuto relazionato ma indipendente</aside>
<footer>Make with love and HTML 5</footer>
</body>
</html>

Un’ultima nota sui tag visti in questo articolo, la loro funzione è altamente semantica ed è quindi utile sapere come utilizzarli correttamente nel contesto specifico.
Nel prossimo articolo parleremo della semantica nell’HTML 5 e dei cambiamenti che comporta.

Per oggi è tutto, tornate a trovarmi oppure abonatevi agli RSS per rimane aggornati sulle ultime novità.

Alla prossima!

Normalmente un Cms è la soluzione più richiesta ed utilizzata nei progetti web, questo perchè permette una gestione facilitata dei contenuti anche per i non addetti ai lavori.

Questo tipo di soluzione ha però un rovescio della medaglia, per consentire l’aggiunta, la modifica e l’eliminazione dei contenuti questi sono gestiti singolarmente causando così evidenti rallentamenti nel caso sia necessario aggiungere una quantità considerevole e diversa di contenuti.

Per quanto sembri un problema da poco, rappresenta uno scoglio per ogni messa online, creato il sito e preparata la struttura normalmente ci si scontra con la triste realtà che scrivere testi richiede tempo, posticipando così il termine del progetto.

Come triste conseguenza ci si trova in ritardo rispetto alle scadenze ma con tutti i contenuti ancora da inserire ed un’ovvia lotteria per decidere chi dovrà farsi carico del lavoro di data entry.

In casi come questo l’unica soluzione intelligente che mi sento di suggerire è quella di suddividere il lavoro per renderlo più veloce e concludere quanto prima.

Preparare il file Excel

Un passo indispensabile per cercare di raggiungere il risultato è quella di richiede che i contenuti siano in qualche modo formattati, in modo che possano essere facilmente convertiti ed inseriti in modo massiccio.

Ad esempio, avere i contenuti del sito in un file excel già suddiviso in colonne è un grande vantaggio rispetto ad un file word.

Esportare in CSV

In questo modo è infatti possibile esportare il file in formato .csv che risulta più facile da importare nel database e di conseguenza nel sito che dobbiamo popolare di contenuti.

Prima di procedere…

E’ opportuno fare una prova prima di intervenire su un sito online, create un backup dei files e del database, installate in locale modificando i parametri necessari e testate, anche in caso di test positivo salvate per precauzione una copia del database e dei files.

Nel caso sia una giornata sbagliata e per qualche motivo l’import non andasse a buon fine potete sempre ripristinare database e files e rimettere in piedi il sito in poco temo grazie ad una copia di backup.

Importazione del CSV con phpmyadmin

Per procedere in questo modo esistono diversi modi, un approccio molto diretto ci viene fornito direttamente da phpmyadmin che permette di importare direttamente un file csv all’interno di una specifica tabella.

Importazione del CSV con script PHP

Considerato che phpmyadmin è comunque un’applicazione scritta in php potremmo pensare di creare da zero uno script per l’importazione dei dati piuttosto che utilizzare uno script preconfezionato come ad esempio php-csv-parser che permette di inputare un file csv e di ottenere un array con i dati come output.

Importazione del CSV su WordPress

Nel caso in cui le vostre necessità siano più specifiche ed orientate all’import su un sito basato su wordpress consiglio csv importer, un semplice plugin che facilita l’inserimento di articoli dal csv al database.

Le opzioni offerte facilitano l’importazione rintracciando automaticamente le categorie esistenti e creandone di nuove nel caso non esistano, oltre a questo è possibile limitare la ricerca ad una specifica categoria padre.Stesso discorso per l’autore, nel caso il dato sia omesso verrà utilizzato l’utente con il quale siete loggati.

Unici dati indispensabili per l’import sono a scelta il titolo, il contenuto o il contenuto estratto (excerpt per intenderci ).

L’unico passaggio fondamentale per un’importazione di successo dventa quindi la formattazione del csv che deve separare i vari articoli su più linee e i vari dati tra apici doppi separati da virgola.

Nel caso abbiate qualche dubbio riguardo a come formattare il vostro file csv vi consiglio di visionare il file sample.csv all’interno della cartella del plugin.

Ottimizzare un sito web per migliorane i tempi di caricamento è una pratica ormai comune, ma questo rappresenta solo una parte del lavoro necessario per ridurre i tempi di attesa per l’utente.

Bisogna infatti ricordare, che le risorse che compongo una pagina web, oltre ad essere richieste al server e poi ricevute sulla macchina dell’utente devono in seguito essere renderizzate nel browser.

Di questo compito si occupa il motore di rendering del browser che andrà ad applicare i fogli di stile alla pagina caricata. Questa operazione di fatto utilizza le risorse macchina dell’utente e può essere rallentata dalla scarsa disponibilità di ram al momento del rendering, oltre a ciò i tempi variano a seconda della complessità del sito e del software utilizzato.

Diventa quindi utile capire come ottimizzare i tempi di rendering della pagina attraverso una più attenta compilazione dei fogli di stile.

Come vengono letti i selettori css

Il motore di rendering legge i selettori css da destra verso sinistra, partendo dal primo selettore cerca un riscontro nella pagina HTML se non rintraccia l’elemento specifico passa al selettore successivo fino a che non rintraccia l’elemento su cui applicare la regola.

Prendiamo per esempio

#menu li a{...}

Il motore di rendering cercherà prima di tutto il selettore a (il primo selettore viene definito “chiave” o “key”), dopo cercherà il genitore li fino a che non trova riscontro nell’elemento menu.

Sulla base di quanto detto possiamo definire delle metodologie per ottimizzare i tempi di rendering dei fogli di stile

Eliminare le regole non necessarie

Se esistono regole che non vengono applicate ad alcun elemento è meglio eliminarle, anche se la regola non viene applicata il motore effettua comunque una ricerca dell’elemento gravando sui tempi di rendering. Oltre a questo non bisognerebbe mai tenere codice superfluo nei files, questo aumenta inutilmente il peso del file e rende più complesso il mantenimento e la compilazione.

Non utilizzare il selettore universale *

Il selettore universale * seleziona tutti gli elementi presenti sulla pagina, è normalmente utilizzato per le regole di formattazione.

*{margin:0;padding:0;}

Considerato che non tutti gli elementi html hanno un valore di default per margine e padding e che difficilmente si utilizzano tutti gli elementi HTML in una singola pagina, sarebbe utile specificare in altro modo questa regola evitando una così vasta ricerca al motore di rendering.

h1,h2,h3,h4,h5,h6,p,
form,fieldset,label,input,textarea,select,button,
ul,ol,dl,dd,li{margin:0;padding:0;}

Questa regola formatta margine e padding per intestazioni, paragrafi, form, elementi del form e liste con maggiore specificità e minore dispendio di risorse.

Limitare la discendenza

Specificare una discendenza prolissa per una regola può essere utile in alcuni contesti per gestire la gerarchia delle regole, ma nella norma è possibile evitarlo.

Prendiamo per esempio

body #content #menu li a{...}

Essendo #menu un id, quindi un elemento univoco sulla pagina è possibile semplificare la regola in questo modo

#menu li a{...}

Ottimizzando così i tempi di ricerca dell’elemento da parte del motore di rendering

Evitare espressioni ricorsive

Quando si utilizzano classi e id si specificano implicitamente un gruppo di tag o un tag specifico rendendo così superflua una definizione del selettore tag

ad esempio

div#menu{...}

li.selected{...}

sono chiaramente ricorsivi e possono essere ottimizzati come segue

#menu{...}

.selected{...}

Limitare l’utilizzo di :hover all’elemento <a>

E’ noto come l’utilizzo della pseudoclasse :hover su elementi diversi da <a> non sia supportato da Internet Explorer in assenza di un doctype strict e causa notevoli rallentamenti anche in presenza di questo specifico doctype.

Una valida alternativa è rappresentata dalla trasformazione dell’elemento <a> in elemento di blocco per una più semplice gestione da css.

a{display:block;width:100px;height:100px;padding:5px;background:#000;}
a:hover{background:#c00;}

Specificare…sempre!

Ottimizzare il rendering del css è più una metodologia che non una serie di soluzioni standard, i selettori hanno specificità diversa e questo riduce o aumenta i tempi di rcerca del motore di rendering della pagina.

Per esempio gli ID sono elementi univoci e in quanto tali hanno tempi di ricerca più ridotti di tutti gli altri selettori.

Le classi rappresentano gruppi di elementi, sono meno performanti degli ID ma più dei selettori tag.

I tag sono selettori meno specifici perchè si riferiscono a tutti i tag di quel tipo presenti sulla pagina.

I selettori fratello (+) o figlio (-) sono meno vantaggiosi di una classe o un id ma più vantaggiosi di un selettore tag perchè riducono la ricerca del motore a due elementi (il selettore e l’eventuale padre o fratello).

Sulla base di quanto detto potremmo pensare di rivedere per esempio la nostra regola di formattazione vista in precedenza da così:

h1,h2,h3,h4,h5,h6,p,
form,fieldset,label,input,textarea,select,button,
ul,ol,dl,dd,li{margin:0;padding:0;}

a così

.format{margin:0;padding:0;}

Modificando così la regola la ricerca viene limitata ad un gruppo più ristretto di elementi e la lunghezza della regola nel css viene ridotta.

Non a caso rintracciamo soluzioni analoghe in script molto utilizzati come ad esempio jquery ui che utilizza una classe .ui-helper-reset per la formattazione degli elementi.