Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5 e Css3 - 1 | WebMaster & WebDesigner

945 views

Published on

Prima lezione del modulo HTML5 e Css3 del corso per WebMaster & WebDesigner

Published in: Technology
  • Be the first to comment

  • Be the first to like this

HTML5 e Css3 - 1 | WebMaster & WebDesigner

  1. 1. HTML5 e Css3 [1]Matteo Magni
  2. 2. HTML 4 La specifica dellHTML 4 risale al 1999 HTML 4.01 SpecificationW3C Recommendation 24 December 1999 http://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 Side http://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 lo semplifichiamo.
  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 la trasformazione del World Wide Web in un ambiente dove i documenti pubblicati (pagineHTML, file, immagini, e così via) siano associati ad 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 nuovi comandi e funzionalità che permettano la visualizzazione dei contenuti in una determinatamodalità, 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. Sicerca di avere un tag specifico per ciascun tipo diinformazione così che sia possibile per il browser comprendere il “contenuto” del documento, leggendone soltanto la struttura
  15. 15. Struttura tipicahttp://www.alistapart.com/articles/previewofhtml5
  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 alla pagina● Non tutti i gruppi di link devono per forza essere dentro 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 tipicamente informazioni sulla sua sezione come chi lha scritto, collegamenti a documenti correlati, dati, diritti dautore e simili.● Non è detto che sia in basso, il nome trae in inganno.● Possono esserci più sezioni footer come per gli header
  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 contenuti logicamente 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 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.
  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 ma che 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 i vecchi browser - qualcuno ha nominato InternetExplorer 6? - senza però rinunciare alle feature di HTML5.
  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 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
  32. 32. 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
  33. 33. 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
  34. 34. GitHub projecthttps://github.com/h5bp/html5-boilerplate
  35. 35. Domande? Slide:http://www.slideshare.net/ilbonzo Code:https://github.com/ilbonzo/Cypher mail: matteo@magni.me

×