HTML5 e Css3 - 1 | WebMaster & WebDesigner

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/

Now Client Side

http://www.webtrendset.com/2011/01/31/html5-css3-javascript-ui-framework/

W3C
http://dev.w3.org/html5/spec/

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

Struttura tipica

http://www.alistapart.com/articles/previewofhtml5

L'id header da informazioni?
O serve solo per applicare degli stili?

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/ipr
notic ...
</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

GitHub project
https://github.com/h5bp/html5-boilerplate

Domande?

Slide:
http://www.slideshare.net/ilbonzo
Code:
https://github.com/ilbonzo/Cypher
mail:
matteo@magni.me

HTML5 e Css3 - 1 | WebMaster & WebDesigner

More Related Content

What's hot

Viewers also liked

Similar to HTML5 e Css3 - 1 | WebMaster & WebDesigner

More from Matteo Magni

HTML5 e Css3 - 1 | WebMaster & WebDesigner