HTML5 e Css3 [1]Matteo Magni
HTML 4La specifica dellHTML 4 risale al 1999HTML 4.01 SpecificationW3C Recommendation 24 December 1999http://www.w3.org/TR...
Cosè Cambiato?
Multiple Browser
Multiple Device
Most User
Multiple Content Type
Now Client Sidehttp://www.webtrendset.com/2011/01/31/html5-css3-javascript-ui-framework/
New Client Side
W3Chttp://dev.w3.org/html5/spec/
New Doctype<!DOCTYPE html>Lo manteniamo per compatibilità ma losemplifichiamo.
charset<meta charset="utf-8">
Web Semantico“Con il termine web semantico, termine coniatodal suo ideatore, Tim Berners-Lee, si intende latrasformazione ...
L’intento del W3C è quello di standardizzare nuovicomandi e funzionalità che permettano lavisualizzazione dei contenuti in...
http://www.alistapart.com/articles/previewofhtml5Struttura tipica
Lid 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>...
HeaderHeader contrassegna lintestazione di unasezione.Visto che un documento può avere più sezionipotrà avere anche più in...
Nav <header>  <h1>Wake up sheeple!</h1>  <p><a href="news.html">News</a> ­     <a href="blog.html">Blog</a> ­     <a href=...
nav● Contiene elementi di supporto alla navigazione● Possono essere sia link interni che esterni allapagina● Non tutti i g...
footer<body> <footer><a href="../">Back to index...</a></footer> <hgroup>  <h1>Lorem ipsum</h1>  <h2>The ipsum of all lore...
Piè di pagina● Un piè di pagina contiene tipicamenteinformazioni sulla sua sezione come chi lhascritto, collegamenti a doc...
Section <section>  <h1>Red Delicious</h1>  <p>These bright red apples are the most common found in many  supermarkets.</p>...
Section● Lelemento sezione racchiude contenutilogicamente correlati● Il capitolo di un libro● Le sezioni di cui si compone...
article<article> <header>  <h1>The Very First Rule of Life</h1>  <p><time datetime="2009­10­09">3 days ago</time></p> </he...
article● Article serve per marcare un contenuto che hasenso di esistere e di essere distribuito in modoindipendente, auton...
aside<aside> <h1>Switzerland</h1> <p>Switzerland, a land­locked country in the middle of geographic Europe, has not joined...
aside● Aside serve per dichiarare che la sezione asideè collegata con la sezione che lo contiene mache il suo collegamento...
http://html5boilerplate.com/HTML5 Boilerplate è un template che racchiudeHTML5, CSS e JavaScript per tutti gli sviluppator...
La paternità del codice è di Paul Irish, membronella comunità di sviluppo di Google Chrome e dijQuery, che mette a disposi...
components● Classi Condizionali: che permettono di averedei fogli di stile ad hoc per vecchie versioni deibrowser● Mobile:...
Components [2]● Attivatore HTML5: una delle feature piùinteressanti del progetto. Cosa succede se unvecchio browser che no...
GitHub projecthttps://github.com/h5bp/html5-boilerplate
Domande?Slide:http://cypher.informazione.me/Code:https://github.com/inFormazione/Cypher/mail:matteo@magni.me
HTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesigner
Upcoming SlideShare
Loading in …5
×

HTML5 e Css3 - 1 | WebMaster & WebDesigner

453
-1

Published on

Prima lezione Modulo HTML5 e Css3 per il corso di WebMaster & WebDesigner

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
453
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
41
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5 e Css3 - 1 | WebMaster & WebDesigner

  1. 1. HTML5 e Css3 [1]Matteo Magni
  2. 2. HTML 4La specifica dellHTML 4 risale al 1999HTML 4.01 SpecificationW3C Recommendation 24 December 1999http://www.w3.org/TR/html4/
  3. 3. Cosè Cambiato?
  4. 4. Multiple Browser
  5. 5. Multiple Device
  6. 6. Most User
  7. 7. Multiple Content Type
  8. 8. Now Client Sidehttp://www.webtrendset.com/2011/01/31/html5-css3-javascript-ui-framework/
  9. 9. New Client Side
  10. 10. W3Chttp://dev.w3.org/html5/spec/
  11. 11. New Doctype<!DOCTYPE html>Lo manteniamo per compatibilità ma losemplifichiamo.
  12. 12. charset<meta charset="utf-8">
  13. 13. Web Semantico“Con il termine web semantico, termine coniatodal suo ideatore, Tim Berners-Lee, si intende latrasformazione del World Wide Web in unambiente dove i documenti pubblicati (pagineHTML, file, immagini, e così via) siano associatiad informazioni e dati (metadati) che nespecifichino il contesto semantico in un formatoadatto allinterrogazione e linterpretazione (es.tramite motori di ricerca) e, più in generale,allelaborazione automatica.”(wikipedia)
  14. 14. L’intento del W3C è quello di standardizzare nuovicomandi e funzionalità che permettano lavisualizzazione dei contenuti in una determinatamodalità, senza il ricorso a plugin o ad estensionidi natura proprietaria dei browser. Si punta adarrivare a visualizzare lo stesso contenuto,indipendentemente dalla versione del browser. Sicerca di avere un tag specifico per ciascun tipo diinformazione così che sia possibile per il browsercomprendere il “contenuto” del documento,leggendone soltanto la struttura
  15. 15. http://www.alistapart.com/articles/previewofhtml5Struttura tipica
  16. 16. Lid header da informazioni?O serve solo per applicare degli stili?
  17. 17. Se fosse così?
  18. 18. 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>
  19. 19. HeaderHeader contrassegna lintestazione di unasezione.Visto che un documento può avere più sezionipotrà avere anche più intestazioni.
  20. 20. 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: 2009­04­01</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>
  21. 21. nav● Contiene elementi di supporto alla navigazione● Possono essere sia link interni che esterni allapagina● Non tutti i gruppi di link devono per forza esseredentro elementi nav
  22. 22. 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>
  23. 23. Piè di pagina● Un piè di pagina contiene tipicamenteinformazioni sulla sua sezione come chi lhascritto, collegamenti a documenti correlati, dati,diritti dautore e simili.● Non è detto che sia in basso, il nome trae ininganno.● Possono esserci più sezioni footer come per gliheader
  24. 24. 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>
  25. 25. Section● Lelemento sezione racchiude contenutilogicamente correlati● Il capitolo di un libro● Le sezioni di cui si compone una ricerca● ...
  26. 26. article<article> <header>  <h1>The Very First Rule of Life</h1>  <p><time datetime="2009­10­09">3 days ago</time></p> </header> <p>If theres a microphone anywhere near you, assume its hot and sending whatever youre saying to the world. Seriously.</p> <p>...</p> <footer>  <a href="?comments=1">Show comments...</a> </footer></article>
  27. 27. article● Article serve per marcare un contenuto che hasenso di esistere e di essere distribuito in modoindipendente, autonomo.● Gli elementi article possono essere annidati● Article che contiene il post di un blog annidato conaltri article che contengono i commenti.
  28. 28. aside<aside> <h1>Switzerland</h1> <p>Switzerland, a land­locked 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>
  29. 29. aside● Aside serve per dichiarare che la sezione asideè collegata con la sezione che lo contiene mache il suo collegamento è debole.● Se contenuto in un article esempio puòaggiungere le note a margine.
  30. 30. http://html5boilerplate.com/HTML5 Boilerplate è un template che racchiudeHTML5, CSS e JavaScript per tutti gli sviluppatoriche vogliono un prodotto compatibile anche con ivecchi browser - qualcuno ha nominato InternetExplorer 6? - senza però rinunciare alle feature diHTML5.
  31. 31. La paternità del codice è di Paul Irish, membronella comunità di sviluppo di Google Chrome e dijQuery, che mette a disposizione una struttura difile e directory comprensiva di jQuery, Modernizr(di cui vi abbiamo parlato in un articolo) eDD_belatedPNG una "medicina" che consente diimplementare la trasparenza dei files immaginiPNG anche sul vecchio IE6.http://www.html5today.it/link/boilerplate-template-html5-secondo-paul-irish--prima-parte
  32. 32. components● Classi Condizionali: che permettono di averedei fogli di stile ad hoc per vecchie versioni deibrowser● Mobile: che permette una visualizzazionemigliorata del template nei nuovi device mobilicome smartphone e tablet● Javascript: potete scegliere se implementare ono le librerie JQuery o JQuery.min
  33. 33. Components [2]● Attivatore HTML5: una delle feature piùinteressanti del progetto. Cosa succede se unvecchio browser che non conosce HTML5? Cipensano Modernizr o html5shiv● Google Analytics: per avere il codice ottimizzatoper il potente mezzo messo a disposizione daBigG
  34. 34. GitHub projecthttps://github.com/h5bp/html5-boilerplate
  35. 35. Domande?Slide:http://cypher.informazione.me/Code:https://github.com/inFormazione/Cypher/mail:matteo@magni.me
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×