Ancora anatomia, le pagine HTML(5)

1,124 views

Published on

Lezione 3 del corso Open Web programming

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

  • Be the first to like this

No Downloads
Views
Total views
1,124
On SlideShare
0
From Embeds
0
Number of Embeds
440
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ancora anatomia, le pagine HTML(5)

  1. 1. Ancora anatomia... Le pagine HTML 26/10/2011 prof. Carlo Frinolli
  2. 2. Correzioni, e dubbi! Niente di esistenziale, vi prego.
  3. 3. DOCTYPE HTML 4.01HTML 4.01<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  4. 4. DOCTYPE xHTML 1.0xHTML 1.0 Strict<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">xHTML 1.0 Transitional (un po’ più permissivo)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. 5. DOCTYPE HTML 5HTML5<!doctype html>Più semplice. Più immediato. È solo la dichiarazione deldocumento.
  6. 6. Document Object Modelil DOM (http://j.mp/u0OosV) è un caso particolare diuna struttura ad albero (http://j.mp/vV8Uo7).L’HTML (sia nella versione xml -> xHTML) che laversione 5 fa uso di questo standard. Ogni elemento delDOM è un nodo dell’albero.
  7. 7. Perché il DOM è importanteMetabolizzare e visualizzare il concetto di DOM vipermette di capire visualmente qual è l’elemento chestate andando a selezionare.CSS = #header -> seleziona il tag con id headerJS a.getElementById(‘header’); -> seleziona il tagcon id header, per usarlo via JavascriptjQuery -> $(‘#header’) fa la stessa cosa delprecedente in maniera più compatta ed elegante, alcosto dell’uso di un framework esterno.
  8. 8. Devo disegnare il DOM sempre?
  9. 9. NO.
  10. 10. Tipi di TAG HTML (si molti sono proprio HTML5!)http://www.w3.org/TR/html5-diff/ http://html5doctor.com
  11. 11. Sections/Headerbody... non lo commento neanche. :)h1->h6sono gli heading e li conoscete molto bene.Tendenzialmente sono renderizzati dal browser didimensioni differenti.Gli altri tag sono HTML5.Li vediamo tra un attimo.
  12. 12. TEST!Quanti h1 in una pagina HTML5?
  13. 13. NavNelle pagine xHTML o HTML è diventato molto comune avere<ul id=”menu”> oppure <div id=”mainMenu”>...L’introduzione di nav vuole rappresentare un modo per definire una voltaper tutte il menu principale del sito.Not all groups of links on a page need to be in a nav element — only groups of primary navigationlinks. In particular, it is common for footers to have a list of links to various key parts of a site, but thefooter element is more appropriate in such cases.<nav> <ul> <li>menu link 1</li> <li>menu link 2</li> </ul></nav>
  14. 14. In questo snippet c’è un’incongruenza. <nav> <ul> <li>menu link 1</li> <li>menu link 2</li> </ul> </nav>
  15. 15. <header>Nella maggior parte delle pagine HTML potrete trovare<div id=”header”>per delimitare la sezione header di un sito web.La novità di <header> è che può sia assolvere a questocompito che rappresentare l’header di una particolaresezione o articolo. (vd. più avanti)
  16. 16. <footer>Nella maggior parte delle pagine HTML potrete trovare<div id=”footer”>per delimitare la sezione footer di un sito web.La novità di <footer> è che può sia assolvere a questocompito che rappresentare il footer di una particolaresezione o articolo. (vd. più avanti)
  17. 17. <section>, <article>, <aside><section>Raggruppa un qualsiasi insieme di tag html che abbianoun’appartenenza semantica.es. <div id=”header”>, <div class=”post”>...IMPORTANTE: le specifiche di HTML5 prevedono cheogni section fa storia a sé. Quindi si può avere un h1per ogni section.I motori di ricerca ancora penalizzano questa pratica.Inoltre si può dichiarare un <header> all’interno disection. Così come un <footer>.
  18. 18. <section>, <article>, <aside><article>Raggruppa un qualsiasi insieme di tag html che abbianoun’appartenenza semantica e che rappresentino unarticolo, o un contenuto USERGENERATED.es. <div class=”article”>, <div class=”post”>...
  19. 19. <section>, <article>, <aside><aside>È un contenitore che può essere relativo o no alcontenuto del sito stesso. Si può usare quindi siaall’interno di <section> o <article> che perrappresentare una sidebar nella pagina web.
  20. 20. <aside><body><header> ...</header><section id=”content”> ...</section><aside id=”sidebar”> ...</aside></body>
  21. 21. <aside><article> <header> ... </header> <section> ... </section> <footer> ... </footer> <aside class=”contextual”> ... </aside></article>
  22. 22. WTF?Che differenza c’è fra il codice nella pagina_aside.html enella pagina_content.html?
  23. 23. Put content first!Le pagine web sono sempre vittima di almeno 2 tipi divisitatori.I vostri clienti, e i motori di ricerca.Mentre i clienti possono apprezzare scelte stilistiche diun qualche genere, i motori di ricerca vogliono i vostricontenuti da macinare.Dateglieli.Prediligete se possibile un approccio che metta prima icontenuti rispetto alle sidebar o altro.
  24. 24. Grouping tag<p><div><pre><blockquote><ol><ul><figure>
  25. 25. E questo era HTML...Ognuno di questi elementi viene visualizzato daibrowser con un comportamento di default.Ovviamente tramite CSS si possono sovrascrivere tuttiquesti comportamenti.A volte è desiderabile, a volte no.Vediamo come si comportano gli elementi citati oggi.20111026.html
  26. 26. CSS Time!

×