Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Spaghetti love

Spaghetti love

HTML5 & CSS3 for the beginner

valentinarachiele

November 03, 2011
Tweet

More Decks by valentinarachiele

Other Decks in Education

Transcript

  1. ARGOMENTI ‣ Come siamo arrivati fino a qui? ‣ Cosa

    possiamo fare oggi con HTML5 e CSS3?
  2. “ I designed it for a social effect — to

    help people work together — and not as a technical toy. The web is more a social creation than a technical one. The ultimate goal of the Web is to support and improve our weblike existence in the world. We clump into families, associations, and companies. We develop trust across the miles and distrust around the corner.
  3. STRUMENTI ‣ MAC Coda, Espresso, Textwrangler, Taco, Textmate ‣ PC

    Pspad, Gedit, NotePad++ ‣ LINUX Kate, Gedit ‣ HTML non è un linguaggio di programmazione ‣ Possiamo usare un qualsiasi notepad (editor di testi) per editarlo
  4. SEMANTICA Ogni elemento nella pagina ha un ruolo ben preciso.

    Rispondere alla domanda: cos’è questo? Migliore indicizzazione.
  5. SEMANTICA - HTML4 Tutti i contenuti della pagina stavano all’interno

    di contenitori generici. La semantica era affidata alle parti del contenuto come paragrafi, titoli, link, citazioni, etc... <div>
  6. SEMANTICA - HTML5 Usato per contenere il titolo o i

    titoli del contenuto. Può contenere anche del testo introduttivo o il logo. Usato per raggruppare più titoli <h>. <header> <hgroup> <h1></h1> <h2></h2> </hgroup>
  7. SEMANTICA - HTML5 Usato per la navigazione, per contenere tutti

    i link che portano ad altre pagine del sito. <nav>
  8. SEMANTICA - HTML5 Usato per contenuto che sia in relazione

    col contenuto della pagina, ma separato dal resto (insieme di link pertinenti, note, pubblicità, etc...). <aside>
  9. SEMANTICA - HTML5 Usato per tutto quel contenuto indipendente che

    possa essere riusabile e ripubblicabile, per esempio attraverso gli RSS. Esempio: post all’interno di blog, contenuti che abbiano un titolo e siano indipendenti, a sé stanti. <article>
  10. SEMANTICA - HTML5 Usato per dividere il contenuto in sezioni,

    in gruppi di contenuto separati gli uni dagli altri. <section>
  11. SEMANTICA - HTML5 Usato come piè di pagina per ciascun

    contenuto. Può contenere informazioni come il nome dell’autore, il copyright, la data, etc... <footer>
  12. VENDOR PREFIX I distributori di browser decidono se supportare o

    meno una proprietà. Ogni vendor può decidere da sé. -webkit-border-radius -moz- -o- -khtml- -ms- -chrome-
  13. PROGRESSIVE ENHANCEMENT Si inizia a costruire dal basso (browser meno

    recenti e potenti) e poi si aggiungono miglioramenti per i browser più recenti.
  14. GRACEFUL DEGRADATION Si inizia a costruire dall’alto (browser più recenti

    e potenti) e infine si testano i browser meno recenti, facendo in modo che il sito sia comunque accessibile e usabile.
  15. “ The hardboiled approach pushes graceful degradation further and demands

    that we use our creative talents to design experiences that are responsive and tailored to a browser’s capabilities. Andy Clarke
  16. RISORSE ‣ HTMLdog {http:/ /htmldog.com/} ‣ HTML5 doctor {http:/ /html5doctor.com/}

    ‣ Web Standardistas {http:/ /www.webstandardistas.com/} ‣ HTML.it {http://xhtml.html.it/guide/leggi/203/guida-html5/} ‣ A list apart {http:/ /www.alistapart.com/articles/previewofhtml5}
  17. BIBLIOGRAFIA ‣ Jeremy Keith, HTML5 for web designers, A book

    apart 2010 ‣ Dan Cederholm, CSS3 for web designers, A book apart 2010 ‣ Andy Clarke, Hardboiled web design, Five Simple Steps 2010