|
Nella prima parte di questo tutorial abbiamo introdotto alcuni concetti chiave legati alle nuove specifiche di HTML5, abbiamo introdotto alcuni nuovi tag per la costruzione di pagine web ed abbiamo parlato dell fatto che questi nuovi tag sono semanticamente significativi per i motori di ricerca e per gli screen reader.
Successivamente, abbiamo introdotto il progetto d'esempio che desideriamo realizzare che consiste nell'implementazione dell'interfaccia di frontend di un ipotetico Blog, abbiamo presentato una bozza della struttura della pagina e una sua prima conversione in codice HTML5.
Per chi volesse ritornare su questi punti può consultare i link presenti nella sezione "Articoli precedenti".
Articoli precedenti:
HTML5 & CSS3 - Parte 1 In questo tutorial creeremo la pagina di un Blog usando tecniche di ultima generazione basate su HTML5 e CSS3.
Il tutorial mira a mostrare il modo in cui saranno costruiti i siti web lato frontend allorché le software house avranno integrato le nuove specifiche HTML e CSS nei loro programmi di navigazione. Difatti gran parte dei più noti browser web, non supporta appieno le nuove specifiche di questi linguaggi, a cominciare da Internet Explorer 8. Tuttavia, la versione 9 di quest'ultimo browser, giunta ormai in fase di beta test, dovrebbe colmare il gap presente rispetto software di navigazione dii altri produttori.
Leggi articolo
Ora, partendo da questo primo html specializziamo ultertiormente ciascuna delle sezioni che lo costituiscono.
Creiamo il markup della sezione navigazione
Il codice per la creazione della barra di navigazione viene creato esattamente nello steso modo in cui lo faremmo in HTML4 o XHTML vale a dire usando una unordered list ("ul"). Il punto chiave è che questa lista viene creata all'interno del tag "nav".
<nav>
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">Informazioni</a></li>
<li><a href="#">Archivi</a></li>
<li><a href="#">Contatti</a></li>
<li class="subscribe"><a href="#">Sottoscrivi via RSS</a></li>
</ul>
</nav>
Creiamo il markup della sezione introduttiva
Abbiamo già definito alcune sezioni del nostro documento usando il tag "section". Ora abbiamo bisogno di qualche contenuto.
<section id="intro">
<header>
<h2>Ti piacciono le auto? Sei nel posto giusto!</h2>
</header>
<p>Sei un appassionato di auto? In questo sito puoi trovare opinioni e recensioni sulle case automobilistiche, test drive e schede sulle prove su strada e tutte le anteprime del 2010. Inoltre, se cerchi il massimo dalla tua auto, puoi consultare la nuovissima sezione "Tuning".</p>
</section>
Come si vede dal codice abbiamo aggiunto un "id" al tag "section" valorizzandolo con la stringa "intro". In questo modo potremo identificare l'intera sezione successivamente quando applicheremo gli stili agli elementi del documento. Abbiamo anche usato il tag "header" per wrappare l'elemento introduttivo "h2". In generale, oltre che per descrivere l'intero documento, il tag "header" dovrebbe essere utilizzato anche per descrivere le singole sezioni.
Creiamo il markup per l'area dei contenuti principale
La nostra area dei contenuti principale consiste di tre sezioni: il post o articolo del blog, l'area dei commenti al post e la form per inserire un nuovo commento. Usando la nostra conoscenza dei nuovi tag strutturali di HTML5 risulterà particolarmente facile trascrivere queste aree in codice.
Area dei contenuti principale - Markup di un post del Blog
Al fine di evitare descrizioni empiriche difficilmente comprensibili diamo uno sguardo iniziale al codice che commenteremo successivamente.
<section id="blogPosts">
<article class="blogPost">
<header>
<h2>Quattro anelli e una spina. L'Audi R8 elettrica</h2>
<p>Postato il <time datetime="2010-11-15T23:31:45+01:00">November 15th 2010</time> da <a href="#">Enrico Battuello</a> - <a href="#comments">3 commenti</a></p>
</header>
<p>Quando il sogno dell'auto elettrica diventa realtà il suo nome è Audi R8 e-tron. Il lavoro dei tecnici di Ingolstadt, infatti, ha reso reale il prototipo sportivo visto al Salone di Francoforte nel 2009. Le forme definitive di questa elettrica sono le stesse che condivide con la più sportiva e aspirazionale delle Audi, la R8, l'anti-Ferrari o . . .</p>
</article>
</section>
Anche in questo caso si può osservare che abbiamo definito una nuova sezione con "id" "blogPosts" ed abbiamo wrappato l'interp post del blog in un tag "article". Il tag "article" viene usato per denotare un elemento indipendente all'interno di un blog, di una discussione, di una enciclopedia, ecc. e, proprio per questo motivo, risulta essere particolarmente adatto al nostro caso.
Finché visualizzeremo i dettagli di un singolo post avremo un solo tag "article" ma sulla pagina principale del blog wrapperemo ciascun post in un tag articolo.
L'elemento "header" viene utilizzato per presentare il titolo e i metadati relativi all'articolo del blog. In esso, ad esempio, mostreremo la data del post, l'autore ed il numero di commenti che l'articolo ha ricevuto. Si noti nel codice dell'esempio l'uso del nuovo tag "time" dell'HTML5 usato per wrappare uno specifico istante di tempo. Il formato dell'attributo "datetime" del tag "time" rispetta il seguente formato:
ovvero:
-
L'anno seguito da un trattino (segno meno);
-
Il mese seguito da un trattino (segno meno);
-
Il giorno del mese;
-
Una T maiuscola per indicare che stiamo per specificare l'ora locale;
-
L'ora locale nel formato hh:mi:ss;
-
Il fuso orario in relazione al GMT. Il fuso orario italiano segue di un'ora quello di Greenwitch e, quindi, scriviamo +01:00. Se fossimo stati in Colorado saremmo stati 7 ore prima del fuso orario di Greenwitch e, quindi, avremmo scritto -07:00.
Area dei contenuti principale - Markup dei commenti
La scrittura del markup dei commenti è piuttosto semplice in quanto non sono usati nuovi tag o attributi.
<section id="comments">
<header>
<h3>Comments</h3>
</header>
<article>
<header>
<a href="#">Federico Nava</a> on <time datetime="2010-11-16T05:55:44+01:00">Novembre 16th 2010 at 05:55</time>
</header>
<p>io la Audi e-Tron la trovo carinissima e al passo coi tempi, il frontale é la parte migliore secondo me. E' sportivo e grintoso e fará strage di cuori!</p>
</article>
<article>
<header>
<a href="#">Roberto Loja</a> on <time datetime="2010-11-16T14:06:09+01:00">Novembre 16th 2010 at 14:06</time>
</header>
<p>tra tutte le sportiva che ci sono in commercio devo dire che la Audi e-Tron non passa inosservata! A me questa auto fa impazzire, altro che miscuglio di altri marchi!</p>
</article>
</section>
Si osservi che anche per i commenti abbiamo usato un tag "id" con valore "comments".
Area dei contenuti principale - Markup form inserimento commento
In HTML5 sono stati introdotti diversi miglioramenti e potenziamenti alla gestione delle form. Infatti, non è più necessario effettuare una validazione client-side dei campi richiesti, delle email, ecc.. Il browser si preoccupa di effettuare questi controlli per noi.
<section>
<form action="#" method="post">
<h3>Post a comment</h3>
<p>
<label for="name">Nome</label>
<input name="name" id="name" type="text" required />
</p>
<p>
<label for="email">E-mail</label>
<input name="email" id="email" type="email" required />
</p>
<p>
<label for="website">Sito web</label>
<input name="website" id="website" type="url" />
</p>
<p>
<label for="comment">Commento</label>
<textarea name="comment" id="comment" required></textarea>
</p>
<p><input type="submit" value="Inserisci commento" /></p>
</form>
</section>
Osservando il codice possiamo notare che esistono due nuovi tipi di input, "email" ed "url". "Email" specifica che l'utente dovrà inserire un indirizzo mail valido, mentre "url" specifica che l'utente dovrà inserire un indirizzo web valido. Se si aggiunge l'attributo "required" a questi tag l'utente sarà obbligato a valorizzare questi campi. "Required" è un attributo booleano ed il solo specificarlo implica che il suo valore è "true", quindi non necessita di un valore esplicito.
A questo punto abbiamo concluso la parte di codice HTML relativa alla nostra area dei contenuti principale. Nel complesso il markup si presenterà in questo modo:
<section id="mainContent">
<section id="blogPosts">
<article class="blogPost">
<header>
<h2>Quattro anelli e una spina. L'Audi R8 elettrica</h2>
<p>Postato il <time datetime="2010-11-15T23:31:45+01:00">November 15th 2010</time> da <a href="#">Enrico Battuello</a> - <a href="#comments">3 commenti</a></p>
</header>
<p>Quando il sogno dell'auto elettrica diventa realtà il suo nome è Audi R8 e-tron. Il lavoro dei tecnici di Ingolstadt, infatti, ha reso reale il prototipo sportivo visto al Salone di Francoforte nel 2009. Le forme definitive di questa elettrica sono le stesse che condivide con la più sportiva e aspirazionale delle Audi, la R8, l'anti-Ferrari o . . .</p>
</article>
</section>
<section id="comments">
<header>
<h3>Comments</h3>
</header>
<article>
<header>
<a href="#">Federico Nava</a> on <time datetime="2010-11-16T05:55:44+01:00">Novembre 16th 2010 at 05:55</time>
</header>
<p>io la Audi e-Tron la trovo carinissima e al passo coi tempi, il frontale é la parte migliore secondo me. E' sportivo e grintoso e fará strage di cuori!</p>
</article>
<article>
<header>
<a href="#">Roberto Loja</a> on <time datetime="2010-11-16T14:06:09+01:00">Novembre 16th 2010 at 14:06</time>
</header>
<p>tra tutte le sportiva che ci sono in commercio devo dire che la Audi e-Tron non passa inosservata! A me questa auto fa impazzire, altro che miscuglio di altri marchi!</p>
</article>
</section>
<section>
<form action="#" method="post">
<h3>Post a comment</h3>
<p>
<label for="name">Nome</label>
<input name="name" id="name" type="text" required />
</p>
<p>
<label for="email">E-mail</label>
<input name="email" id="email" type="email" required />
</p>
<p>
<label for="website">Sito web</label>
<input name="website" id="website" type="url" />
</p>
<p>
<label for="comment">Commento</label>
<textarea name="comment" id="comment" required></textarea>
</p>
<p><input type="submit" value="Inserisci commento" /></p>
</form>
</section>
</section>
Come si vede dal markup abbiamo wrappato le tre sezioni relative all'articolo del blog, ai commenti ed al form di inserimento in un'unica sezione più grande avente id "mainContent".
Creiamo il markup per la barra di navigazione laterale (sidebar)
Il markup della sidebar è estremamente semplice. In pratica si tratta di alcune sezioni racchiuse all'interno di un appropriato tag "aside". Questo tag è stato introdotto con HTML5 e definisce alcuni contenuti "a parte" ma, in qualche modo, correlati a quello in cui il tag viene inserito. Pertanto, in linea di massima, il contenuto di "aside" dovrebbe essere in relazione con il contenuto circostante.
In realtà noi utilizzeremo "aside" in modo più "libero". Ma andiamo al codice:
<aside>
<!-- Sidebar -->
<section>
<header>
<h3>Categorie</h3>
</header>
<ul>
<li><a href="#">Berlina (tre volumi)</a></li>
<li><a href="#">Cabriolet</a></li>
<li><a href="#">Coupé</a></li>
<li><a href="#">Due volumi</a></li>
<li><a href="#">Familiare (Station Wagon)</a></li>
<li><a href="#">Fuoristrada (4x4)</a></li>
<li><a href="#">Monovolume</a></li>
<li><a href="#">Multiuso (MPV)</a></li>
<li><a href="#">SUV</a></li>
</ul>
</section>
<section>
<header>
<h3>Archivi</h3>
</header>
<ul>
<li><a href="#">Maggio 2010</a></li>
<li><a href="#">Giugno 2010</a></li>
<li><a href="#">Luglio 2010</a></li>
<li><a href="#">Agosto 2010</a></li>
<li><a href="#">Settembre 2010</a></li>
<li><a href="#">Ottobre 2010</a></li>
<li><a href="#">Novembre 2010</a></li>
</ul>
</section>
</aside>
Osservando il codice possiamo notare che la nostra barra di navigazione laterale si compone di due sezioni:
-
La prima, avente intestazione "Categorie", contiene dei link ad indici di articoli del blog raggruppati per categorie;
-
La seconda, invece, avente intestazione Archivi, presenta dei link ad indici di articoli del blog suddivisi per periodo (mese, anno).
Creiamo il markup per il pie' di pagina (footer)
Per finire vediamo il codice relativo al markup del pie' di pagina.
<footer>
<!-- Footer -->
<section id="mainFooterArea">
<section id="about">
<header>
<h3>Informazioni</h3>
</header>
<p>Il Car Blog si prefigge di divulgare e condividere contenuti riguardanti il mondo delle auto, delle moto e dei motori in genere, non tralasciando nulla anche per quanto concerne le nuove frontiere tecnologiche come le auto ed i motori elettrici, i primi prototipi di motori a "propulsione magnetica", e tutti i tipi di motori sperimentali. Per ulteriori informazioni sull'autore potete consultare il suto sito web personale <a href="http://mentegeniale.altervista.org">http://mentegeniale.altervista.org</a>. Buona navigazione.</p>
</section>
<section id="blogroll">
<header>
<h3>Blogroll</h3>
</header>
<ul>
<li><a href="http://www.autoblog.it">Auto Blog.it</a></li>
<li><a href="#">Altro Blog 2</a></li>
<li><a href="#">Altro Blog 3</a></li>
<li><a href="#">Altro Blog 3</a></li>
<li><a href="#">Altro Blog 4</a></li>
</ul>
</section>
<section id="popular">
<header>
<h3>Link utili</h3>
</header>
<ul>
<li><a href="http://www.autoscout24.it">Auto Sciut 24</a></li>
<li><a href="http://www.quattroruote.it">Quatttroruote</a></li>
<li><a href="http://car4you.quattroruote.it">Car4You Quattroruote</a></li>
<li><a href="http://www.omniauto.it">Omniauto.it</a></li>
<li><a href="http://www1.agenziaentrate.it/servizi/bollo/calcolo/kw_cv_ins.htm">Calcolo bollo auto (agenzia entrate)</a></li>
<li><a href="http://www.gentemotori.it/">Gente Motori</a></li>
<li><a href="http://www.ozracing.com/">OZ Racing</a></li>
<li><a href="#">Altro link 2</a></li>
</ul>
</section>
</section>
</footer>
Come si può osservare, per quanto riguarda il footer, non c'è alcuna novità rispetto a quanto abbiamo visto fino ad ora.
Per finire diamo il codice integrale del nostro html.
<!doctype html>
<html>
<head>
<title>The Car Blog</title>
</head>
<body>
<header>
<h1>The Car Blog</h1>
</header>
<nav>
<ul>
<li><a href="#">Blog</a></li>
<li><a href="#">Informazioni</a></li>
<li><a href="#">Archivi</a></li>
<li><a href="#">Contatti</a></li>
<li class="subscribe"><a href="#">Sottoscrivi via RSS</a></li>
</ul>
</nav>
<section id="intro">
<header>
<h2>Ti piacciono le auto? Sei nel posto giusto!</h2>
</header>
<p>Sei un appassionato di auto? In questo sito puoi trovare opinioni e recensioni sulle case automobilistiche, test drive e schede sulle prove su strada e tutte le anteprime del 2010. Inoltre, se cerchi il massimo dalla tua auto, puoi consultare la nuovissima sezione "Tuning".</p>
</section>
<section id="content">
<!-- Start Main content area -->
<section id="mainContent">
<section id="blogPosts">
<article class="blogPost">
<header>
<h2>Quattro anelli e una spina. L'Audi R8 elettrica</h2>
<p>Postato il <time datetime="2010-11-15T23:31:45+01:00">November 15th 2010</time> da <a href="#">Enrico Battuello</a> - <a href="#comments">3 commenti</a></p>
</header>
<p>Quando il sogno dell'auto elettrica diventa realtà il suo nome è Audi R8 e-tron. Il lavoro dei tecnici di Ingolstadt, infatti, ha reso reale il prototipo sportivo visto al Salone di Francoforte nel 2009. Le forme definitive di questa elettrica sono le stesse che condivide con la più sportiva e aspirazionale delle Audi, la R8, l'anti-Ferrari o . . .</p>
</article>
</section>
<section id="comments">
<header>
<h3>Comments</h3>
</header>
<article>
<header>
<a href="#">Federico Nava</a> on <time datetime="2010-11-16T05:55:44+01:00">Novembre 16th 2010 at 05:55</time>
</header>
<p>io la Audi e-Tron la trovo carinissima e al passo coi tempi, il frontale é la parte migliore secondo me. E' sportivo e grintoso e fará strage di cuori!</p>
</article>
<article>
<header>
<a href="#">Roberto Loja</a> on <time datetime="2010-11-16T14:06:09+01:00">Novembre 16th 2010 at 14:06</time>
</header>
<p>tra tutte le sportiva che ci sono in commercio devo dire che la Audi e-Tron non passa inosservata! A me questa auto fa impazzire, altro che miscuglio di altri marchi!</p>
</article>
</section>
<section>
<form action="#" method="post">
<h3>Post a comment</h3>
<p>
<label for="name">Nome</label>
<input name="name" id="name" type="text" required />
</p>
<p>
<label for="email">E-mail</label>
<input name="email" id="email" type="email" required />
</p>
<p>
<label for="website">Sito web</label>
<input name="website" id="website" type="url" />
</p>
<p>
<label for="comment">Commento</label>
<textarea name="comment" id="comment" required></textarea>
</p>
<p><input type="submit" value="Inserisci commento" /></p>
</form>
</section>
</section>
<!-- End Main content area -->
<aside>
<!-- Sidebar -->
<section>
<header>
<h3>Categorie</h3>
</header>
<ul>
<li><a href="#">Berlina (tre volumi)</a></li>
<li><a href="#">Cabriolet</a></li>
<li><a href="#">Coupé</a></li>
<li><a href="#">Due volumi</a></li>
<li><a href="#">Familiare (Station Wagon)</a></li>
<li><a href="#">Fuoristrada (4x4)</a></li>
<li><a href="#">Monovolume</a></li>
<li><a href="#">Multiuso (MPV)</a></li>
<li><a href="#">SUV</a></li>
</ul>
</section>
<section>
<header>
<h3>Archivi</h3>
</header>
<ul>
<li><a href="#">Maggio 2010</a></li>
<li><a href="#">Giugno 2010</a></li>
<li><a href="#">Luglio 2010</a></li>
<li><a href="#">Agosto 2010</a></li>
<li><a href="#">Settembre 2010</a></li>
<li><a href="#">Ottobre 2010</a></li>
<li><a href="#">Novembre 2010</a></li>
</ul>
</section>
</aside>
</section>
<footer>
<!-- Footer -->
<section id="mainFooterArea">
<section id="about">
<header>
<h3>Informazioni</h3>
</header>
<p>Il Car Blog si prefigge di divulgare e condividere contenuti riguardanti il mondo delle auto, delle moto e dei motori in genere, non tralasciando nulla anche per quanto concerne le nuove frontiere tecnologiche come le auto ed i motori elettrici, i primi prototipi di motori a "propulsione magnetica", e tutti i tipi di motori sperimentali. Per ulteriori informazioni sull'autore potete consultare il suto sito web personale <a href="http://mentegeniale.altervista.org">http://mentegeniale.altervista.org</a>. Buona navigazione.</p>
</section>
<section id="blogroll">
<header>
<h3>Blogroll</h3>
</header>
<ul>
<li><a href="http://www.autoblog.it/">Auto Blog.it</a></li>
<li><a href="#">Altro Blog 2</a></li>
<li><a href="#">Altro Blog 3</a></li>
<li><a href="#">Altro Blog 4</a></li>
<li><a href="#">Altro Blog 5</a></li>
</ul>
</section>
<section id="popular">
<header>
<h3>Link utili</h3>
</header>
<ul>
<li><a href="http://www.autoscout24.it">Auto Scout 24</a></li>
<li><a href="http://www.quattroruote.it">Quattroruote</a></li>
<li><a href="http://car4you.quattroruote.it">Car4You Quattroruote</a></li>
<li><a href="http://www.omniauto.it">Omniauto.it</a></li>
<li><a href="http://www1.agenziaentrate.it/servizi/bollo/calcolo/kw_cv_ins.htm">Calcolo bollo auto (agenzia entrate)</a></li>
<li><a href="http://www.gentemotori.it/">Gente Motori</a></li>
<li><a href="http://www.ozracing.com/">OZ Racing</a></li>
<li><a href="#">Altro link 2</a></li>
</ul>
</section>
</section>
</footer>
</body>
</html>
Tengo solo a far notare che nella versione finale del nostro HTML ho inserito la sezione dell'area dei contenuti principale e quella del tag "aside" all'interno di una ulteriore sezione avente id "Content".
Nel prossimo articolo vedremo la creazione del foglio di stile in standard CSS3 che utilizzeremo per formattare i contenuti del nostro HTML.
(Fine seconda parte).
Articoli successivi:
HTML5 & CSS3 - Parte 3 Nelle lezioni precedenti di questo tutorial abbiamo parlato di HTML5, abbiamo presentato alcuni dei nuovi tag introdotti con esso ed abbiamo creato la parte di codice HTML che costituisce il progetto d'esempio che abbiamo deciso di realizzare, ovvero la creazione della pagina di un blog.
A partire da questa lezione, invece, parliamo di CSS3 ed introduciamo il codice necessario ad impaginare e formattare il nostro markup.
Leggi articolo
HTML5 & CSS3 - Parte 4 Nelle prime due lezioni di questo tutorial abbiamo parlato di HTML5, abbiamo presentato alcuni dei nuovi tag introdotti con esso ed abbiamo creato la parte di codice HTML che costituisce il progetto d'esempio che desideriamo realizzare, ovvero la pagina di un blog.
Nella terza lezione, poi, abbiamo iniziato a "stendere" il foglio di stile CSS per impaginare i diversi elementi della pagina. In particolare, abbiamo visto la sezione di reset ed inizializzazione del CSS e la sezione di formattazione della barra di navigazione.
Leggi articolo
HTML5 & CSS3 - Parte 5 Nelle prime due lezioni di questo tutorial abbiamo parlato di HTML5, presentando alcuni dei nuovi tag introdotti con esso ed abbiamo creato la parte di codice HTML che costituisce il progetto d'esempio che desideriamo realizzare, ovvero la pagina di un blog.
Nella terza e quarta lezione, poi, abbiamo iniziato a trascrivere il codice del foglio di stile necessario ad impaginare le diverse sezioni del nostro documento HTML. In particolare, siamo partiti dalla definizione di una rapida sezione di reset nel CSS, per poi passare alla stilizzazione della barra di navigazione e della sezione "intro" della nostra pagina, facendo particolare riferimento ad alcuni tag nuovi, introdotti con le specifiche CSS3, necessari per posizionare, formattare e impaginare le immagini di sfondo di una specifica sezione.
Leggi articolo
HTML5 & CSS3 - Appendice Speciale (Parte 1) In questo articolo, che costituisce un'appendice al tutorial su HTML5 e CSS3 postato nei mesi scorsi, vedremo come modificare la pagina del blog precedentemente analizzata in modo da renderla fruibile e visivamente gradevole sia sotto Internet Explorer 8/9, che sotto Google Chrome, Safari e Mozilla Firefox.
Quello che ci interessa, in particolare, è raggiungere una buona compatibilità del nostro codice con le versioni 8 e 9 del browser di casa Microsoft.
Leggi articolo
HTML5 & CSS3 - Appendice Speciale (Parte 2) Nella prima parte di questa appendice al tutorial su HTML5 e CSS3 abbiamo introdotto gli script che utilizziamo per rendere la nostra pagina di blog compatibile con tutti i principali browser web in circolazione (Internet Explore 8 o superiore, Google Chrome, Mozilla Firefox, Safari).
Inoltre, abbiamo visto il codice HTML univoco della nostra pagina web.
Ora ci apprestiamo ad esaminare il codice sorgente dei due fogli di stile utilizzati.
Leggi articolo
|
