Spaghetti love

HTML5 & CSS3 for the beginner

Transcript

2. ARGOMENTI ‣ Come siamo arrivati fino a qui? ‣ Cosa possiamo fare oggi con HTML5 e CSS3?
3. UN PO’ DI STORIA
4. Tim Berners-Lee
9. “ 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.
10. W3C 1995
11. GLI STANDARD
12. HTML5 2012?
13. POSSIAMO INIZIARE SUBITO... ... dipende solo da cosa i browser supportano
14. BROWSER SUPPORT ‣ http://html5test.com/ ‣ http://www.findmebyip.com/litmus/ ‣ http://caniuse.com/ ‣ http://html5readiness.com/
15. D’ALTRONDE
16. BROWSER SUPPORT ‣ http://madebyelephant.com/ ‣ http://farukat.es/
17. E D’ALTRONDE 1 2 3
18. HTML
19. BENEFICI ‣ dimestichezza con altri linguaggi ‣ diy ‣ lavoro!
20. FUNZIONI ‣ HTML struttura ‣ CSS presentazione
21. DOWNLOAD http:/ /cl.ly/0y332R0f0t0o0l322D0x
23. 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
24. STRUMENTI a. All’interno del browser (Chrome, Firefox, Safari) tasto destro > Ispeziona elemento b.Addons
25. STRUTTURA DELLA CARTELLA file principale del sito, “home” audio, video cartella con CSS cartella immagini
26. HTML(5)
29. SEMANTICA Ogni elemento nella pagina ha un ruolo ben preciso. Rispondere alla domanda: cos’è questo? Migliore indicizzazione.
31. 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>
32. 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>
33. SEMANTICA - HTML5 Usato per la navigazione, per contenere tutti i link che portano ad altre pagine del sito. <nav>
34. 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>
35. 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>
36. SEMANTICA - HTML5 Usato per dividere il contenuto in sezioni, in gruppi di contenuto separati gli uni dagli altri. <section>
37. SEMANTICA - HTML5 Usato come piè di pagina per ciascun contenuto. Può contenere informazioni come il nome dell’autore, il copyright, la data, etc... <footer>
38. MEDIA Usato come ambiente per creare immagini dinamiche. http://dwpe.googlecode.com/svn/trunk/charting/index.html http://www.thewildernessdowntown.com/ <canvas>
39. MEDIA Flash e Silverlight? <audio> <video>
40. MEDIA <audio src=”track.mp3”></audio> <video src=”movie.mp4”></video> <audio> <video>
41. CSS(3)
42. FONT http://www.google.com/webfonts http://www.fontsquirrel.com/fontface/generator
43. 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-
44. RGB p { color: (255,255,255); }
45. OPACITY p { opacity: 0.5; }
46. RGBA p { color: (255,255,255,0.75); }
47. IMAGE-BORDER http://www.border-image.com/
48. TRASFORMAZIONI, TRANSIZIONI http://www.paulrhayes.com/experiments/cube/multiCubes.html http://tympanus.net/Tutorials/OriginalHoverEffects/index.html
49. BORDER-RADIUS, BOX-SHADOW, TEXT-SHADOW http://css3generator.com/
50. RISORSE ‣ http://css3please.com/ ‣ http://westciv.com/tools/
51. CONCLUSIONI
52. PROGRESSIVE ENHANCEMENT Si inizia a costruire dal basso (browser meno recenti e potenti) e poi si aggiungono miglioramenti per i browser più recenti.
53. 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.
54. “ 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
55. 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}
56. RISORSE ‣ CSS3info {http://www.css3.info/} ‣ CSS3info preview {http:/ /www.css3.info/preview/}
57. 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
58. GRAZIE ·valentina rachiele | autunno mmxi·