HTML5 e Css3 - 1 | WebMaster & WebDesigner
0 likes811 views
Prima lezione del modulo HTML5 e Css3 del corso per WebMaster & WebDesigner
![HTML5 e Css3 [1]
Matteo Magni](https://image.slidesharecdn.com/01html5css3-121108135944-phpapp01/85/HTML5-e-Css3-1-WebMaster-WebDesigner-1-320.jpg)
![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](https://image.slidesharecdn.com/01html5css3-121108135944-phpapp01/85/HTML5-e-Css3-1-WebMaster-WebDesigner-37-320.jpg)
![[drupalday2017] - Drupal 4 Stakeholders](https://cdn.slidesharecdn.com/ss_thumbnails/claudia-astazidrupal4stakeholder-170315153316-thumbnail.jpg?width=560&fit=bounds)
![[drupalday2017] - Open Data con Drupal nella PA: considerazioni su licensing ...](https://cdn.slidesharecdn.com/ss_thumbnails/drupaltrasparenzaeprivacyandreadori-170315153609-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (9)
Viewers also liked (20)
Similar to HTML5 e Css3 - 1 | WebMaster & WebDesigner (20)
More from Matteo Magni (20)
HTML5 e Css3 - 1 | WebMaster & WebDesigner
- 1. HTML5 e Css3 [1] Matteo Magni
- 2. 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/
- 6. Most User
- 8. Now Client Side http://www.webtrendset.com/2011/01/31/html5-css3-javascript-ui-framework/
- 12. New Doctype <!DOCTYPE html> Lo manteniamo per compatibilità ma lo semplifichiamo.
- 14. 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)
- 15. 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
- 17. L'id header da informazioni? O serve solo per applicare degli stili?
- 18. Se fosse così?
- 20. Header Header contrassegna l'intestazione di una sezione. Visto che un documento può avere più sezioni potrà avere anche più intestazioni.
- 22. 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
- 24. 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
- 26. Section ● L'elemento sezione racchiude contenuti logicamente correlati ● Il capitolo di un libro ● Le sezioni di cui si compone una ricerca ● ...
- 28. 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.
- 30. 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.
- 33. 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.
- 34. 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
- 36. 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
- 37. 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
- 39. Domande? Slide: http://www.slideshare.net/ilbonzo Code: https://github.com/ilbonzo/Cypher mail: [email protected]