2.12.2009 - Alessandro Trenti

HTML 5.0 e CSS3: esempio di come potrebbero essere le pagine web 3.0

Web design convertito in html 5.0 e css3: guida all’interpretazione semantica dei contenuti nel web 3.0
Qualche mese fa, abbiamo pubblicato nel nostro blog un post intitolato Selettori CSS 3.0: proprietà, esempi e potenzialità, una piccola guida per scoprire i nuovi selettori di CSS 3.0.

La nuova sfida di Net Sinergy consiste nel convertire il codice xhtml di quella pagina web in codice html 5.0, cercando di reinterpretare i contenuti della pagina in base ai principi semantici dell’html 5.0, combinati con le potenzialità di visualizzazione offerte da css3.
Per visualizzare l’esempio di web design 3.0 cliccare qui, aprendo la pagina con Safari 3.1 o superiore (al momento è l’unico browser che supporta in maniera adeguata html5 e css3).

E’ evidente che la visualizzazione è identica (per comodità abbiamo omesso le due colonne laterali del blog) a quella della pagina realizzata in xhtml, se però analizziamo il codice sorgente scopriamo come si presenta il markup html 5.0

Un'intestazione molto più snella con le definizioni di doctype charset e language abbreviate in:

<!DOCTYPE HTML>

<html lang="it">

<meta charset="utf-8">

Di seguito troviamo il corpo della pagina inserito in un tag <article> con all'interno:

- un <header> per il titolo e la data (quest’ultima rappresentata con l'apposito marker <time>). In html 5.0 il tag <header> può essere utilizzato più volte all’interno della stessa pagina (sia riferito alla root / <body> della pagina stessa che ad una <section> / <article> che lo contiene) per fornire informazioni introduttive o aiuti alla navigazione. Se all’interno dell’<header> si inseriscono più tag <h>, è consigliabile raggrupparli in un tag <hgroup>.

- un primo <footer> contenente informazioni relative all'autore, la categoria di appartenenza e l'ora in cui è stato scritto il post. In html 5.0 il tag <footer> può essere utilizzato più volte all’interno della stessa pagina (sia riferito alla root / <body> della pagina stessa che ad una <section> / <article> che lo contiene) per fornire informazioni quali l’autore, link ad altri articoli correlati, copyright ecc.ecc.

- l’immagine e il testo principale della pagina

- una prima <section> contenente il testo che descrive le proprietà css 3.0 utilizzate; si è scelto di non inserire ogni proprietà in un <article> perchè gli esempi di codice hanno senso solo nel contesto generale del post e non in un contesto di distribuzione/riutilizzo tramite syndication (es. feed rss). Abbiamo riportato il codice css3 all’interno di tag <mark> per evidenziarne l’importanza.

- una seconda <section> contenente i box relativi ai servizi offerti dalla web agency Net Sinergy. Ogni servizio è inserito in un <article> che prevede un <header> contenente un tag <h1> per il titolo del servizio e un tag <p> contenente il testo descrittivo del box. La scelta di identificare ogni box con un <article> è giustificata dal fatto che ogni servizio (titolo e testo descrittivo) ha significato indipendentemente dal contesto della pagina e potrebbe essere distribuito/riutilizzato tramite syndication. I commenti nei box per evidenziare gli effetti css 3.0 utilizzati in ciascuno, sono inseriti in tag <aside> visto che non sono strettamente correlati con il significato semantico del servizio presentato nel box.

- un secondo <footer> che contiene i tag relativi al post; nel codice <a> del tag abbiamo aggiunto rel="tag" per aggiungere un significato semantico al link.

HTML 5.0 è uno standard ancora in via di definizione, e che inizia ad essere studiato e testato grazie a “pionieri” e appassionati del web 3.0.
Con questo post non abbiamo la presunzione di voler pubblicare una guida di html5, ma vuole essere un esercizio di reinterpretazione del contenuto di una pagina web xhtml in base alla nostra sensibilità nell’applicare le basi di html5. Ci piacerebbe quindi confrontarci con tutti coloro che lo stanno studiando per capire se condividono le scelte fatte nella realizzazione di questo esempio o se hanno dei preziosi suggerimenti per migliorare il codice html 5.0 sia nella scelta dei tag che del significato semantico degli stessi.

LEAVE A MESSAGE