html5 e css3 - 1 | webmaster & webdesigner
DESCRIPTION
Prima lezione Modulo HTML5 e Css3 per il corso di WebMaster & WebDesignerTRANSCRIPT
HTML5 e Css3 [1]Matteo Magni
HTML 4
La specifica dell'HTML 4 risale al 1999
HTML 4.01 Specification
W3C Recommendation 24 December 1999
http://www.w3.org/TR/html4/
Cos'è Cambiato?
Multiple Browser
Multiple Device
Most User
Multiple Content Type
Now Client Side
http://www.webtrendset.com/2011/01/31/html5-css3-javascript-ui-framework/
New Client Side
New Doctype
<!DOCTYPE html>
Lo manteniamo per compatibilità ma lo semplifichiamo.
charset
<meta charset="utf-8">
Web Semantico
“Con il termine web semantico, termine coniato dal suo ideatore, Tim Berners-Lee, si intende la
trasformazione del World Wide Web in un ambiente dove i documenti pubblicati (pagine
HTML, file, immagini, e così via) siano associati ad informazioni e dati (metadati) che ne
specifichino il contesto semantico in un formato adatto all'interrogazione e l'interpretazione (es.
tramite motori di ricerca) e, più in generale, all'elaborazione automatica.”
(wikipedia)
L’intento del W3C è quello di standardizzare nuovi comandi e funzionalità che permettano la
visualizzazione dei contenuti in una determinata modalità, senza il ricorso a plugin o ad estensioni
di natura proprietaria dei browser. Si punta ad arrivare a visualizzare lo stesso contenuto,
indipendentemente dalla versione del browser. Si cerca di avere un tag specifico per ciascun tipo di informazione così che sia possibile per il browser
comprendere il “contenuto” del documento, leggendone soltanto la struttura
http://www.alistapart.com/articles/previewofhtml5
Struttura tipica
L'id header da informazioni?
O serve solo per applicare degli stili?
Se fosse così?
Header
<header>
<hgroup>
<h1>Scalable Vector Graphics (SVG) 1.2</h1>
<h2>W3C Working Draft 27 October 2004</h2>
</hgroup>
<p class="copyright"><a href="http://www.w3.org/Consortium/Legal/iprnotic ...
</header>
Header
Header contrassegna l'intestazione di una sezione.
Visto che un documento può avere più sezioni potrà avere anche più intestazioni.
Nav <header>
<h1>Wake up sheeple!</h1>
<p><a href="news.html">News</a>
<a href="blog.html">Blog</a>
<a href="forums.html">Forums</a></p>
<p>Last Modified: 20090401</p>
<nav>
<h1>Navigation</h1>
<ul>
<li><a href="articles.html">Index of all articles</a></li>
<li><a href="today.html">Things sheeple need to wake up for today</a></li>
<li><a href="successes.html">Sheeple we have managed to wake</a></li>
</ul>
</nav>
</header>
nav
● Contiene elementi di supporto alla navigazione● Possono essere sia link interni che esterni alla
pagina● Non tutti i gruppi di link devono per forza essere
dentro elementi nav
footer<body>
<footer><a href="../">Back to index...</a></footer>
<hgroup>
<h1>Lorem ipsum</h1>
<h2>The ipsum of all lorems</h2>
</hgroup>
<p>A dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
culpa qui officia deserunt mollit anim id est laborum.</p>
<footer><a href="../">Back to index...</a></footer>
</body>
Piè di pagina
● Un piè di pagina contiene tipicamente informazioni sulla sua sezione come chi l'ha scritto, collegamenti a documenti correlati, dati, diritti d'autore e simili.
● Non è detto che sia in basso, il nome trae in inganno.
● Possono esserci più sezioni footer come per gli header
Section
<section>
<h1>Red Delicious</h1>
<p>These bright red apples are the most common found in many
supermarkets.</p>
</section>
<section>
<h1>Granny Smith</h1>
<p>These juicy, green apples make a great filling for
apple pies.</p>
</section>
Section
● L'elemento sezione racchiude contenuti logicamente correlati● Il capitolo di un libro● Le sezioni di cui si compone una ricerca● ...
article
<article>
<header>
<h1>The Very First Rule of Life</h1>
<p><time datetime="20091009">3 days ago</time></p>
</header>
<p>If there's a microphone anywhere near you, assume it's hot and
sending whatever you're saying to the world. Seriously.</p>
<p>...</p>
<footer>
<a href="?comments=1">Show comments...</a>
</footer>
</article>
article
● Article serve per marcare un contenuto che ha senso di esistere e di essere distribuito in modo indipendente, autonomo.
● Gli elementi article possono essere annidati● Article che contiene il post di un blog annidato con
altri article che contengono i commenti.
aside
<aside>
<h1>Switzerland</h1>
<p>Switzerland, a landlocked country in the middle of geographic
Europe, has not joined the geopolitical European Union, though it is
a signatory to a number of European treaties.</p>
</aside>
aside
● Aside serve per dichiarare che la sezione aside è collegata con la sezione che lo contiene ma che il suo collegamento è debole.
● Se contenuto in un article esempio può aggiungere le note a margine.
http://html5boilerplate.com/
HTML5 Boilerplate è un template che racchiude HTML5, CSS e JavaScript per tutti gli sviluppatori che vogliono un prodotto compatibile anche con i vecchi browser - qualcuno ha nominato Internet
Explorer 6? - senza però rinunciare alle feature di HTML5.
La paternità del codice è di Paul Irish, membro nella comunità di sviluppo di Google Chrome e di jQuery, che mette a disposizione una struttura di file e directory comprensiva di jQuery, Modernizr
(di cui vi abbiamo parlato in un articolo) e DD_belatedPNG una "medicina" che consente di implementare la trasparenza dei files immagini
PNG anche sul vecchio IE6.
http://www.html5today.it/link/boilerplate-template-html5-secondo-paul-irish--prima-parte
components
● Classi Condizionali: che permettono di avere dei fogli di stile ad hoc per vecchie versioni dei browser
● Mobile: che permette una visualizzazione migliorata del template nei nuovi device mobili come smartphone e tablet
● Javascript: potete scegliere se implementare o no le librerie JQuery o JQuery.min
Components [2]
● Attivatore HTML5: una delle feature più interessanti del progetto. Cosa succede se un vecchio browser che non conosce HTML5? Ci pensano Modernizr o html5shiv
● Google Analytics: per avere il codice ottimizzato per il potente mezzo messo a disposizione da BigG
Domande?
Slide:
http://cypher.informazione.me/
Code:
https://github.com/inFormazione/Cypher/
mail: