Html5 e css3 nei miei progetti: cosa ho fatto

1,559 views
1,520 views

Published on

Le slide del mio primo buginar su html5 e css3

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,559
On SlideShare
0
From Embeds
0
Number of Embeds
157
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5 e css3 nei miei progetti: cosa ho fatto

  1. 1. Html5 e Css3 nei miei progetti: cosa ho fatto Seminario di Rocco Passaro su l’uso di html5 e css3 11 Febbraio 2011
  2. 2. Ma cosa sono html5 e css3?
  3. 3. Ma cosa sono html5 e css3? <ul><li>Html5 e Css3 sono i nuovi linguaggi per realizzare </li></ul><ul><li>le pagine web dei nostri siti internet </li></ul>
  4. 4. Perchè usarli? <ul><li>Ci velocizzano di molto il lavoro con i nuovi tag </li></ul><ul><li>Ci evitano di usare librerie esterne per effetti animati </li></ul><ul><li>Rendono il nostro prodotto più veloce </li></ul>
  5. 5. Quali sono i vantaggi di html5? <ul><li>Markup orientato per il content Syndication </li></ul><ul><li>Cioè mirato per i blog come hgroup per fare riunire i titoli h1 </li></ul>
  6. 6. Quali sono i vantaggi di html5? <ul><li>Markup orientato per il content Syndication </li></ul><ul><li>Cioè mirato per i blog come hgroup per fare riunire i titoli h1 </li></ul><ul><li>2) Doctype ridotti Esistono al mondo più di 100 doctype diversi , e ciò comporta un rallentamento del browser abnorme </li></ul>
  7. 7. Mentre css3 invece cosa ci offre? <ul><li>Effetti animati ( le famose transizioni ) Transizioni di opacità, forma, colore </li></ul><ul><li>Selettori più complessi Pensate che possiamo selezionare un tag dal foglio di stile anche conoscendo solo il contenuto al suo interno </li></ul><ul><li>3) Manipolare effetti grafici Angoli Arrotondati, Effetti Ombra, Usare più sfondi nello stesso elemento </li></ul>
  8. 8. Fantastico
  9. 9. Aspetta
  10. 10. Dov’è la fregatura?
  11. 11. Dov’è la fregatura? Non funzionano sui vecchi browser
  12. 12. Problema: diffusione browser
  13. 13. Ma io non voglio rinunciare a loro <ul><li>Devo trovare un’idea… html5 e css3 </li></ul><ul><li>sono troppo convenienti </li></ul><ul><li>Non posso rinunciare </li></ul><ul><li>Come fare? </li></ul>
  14. 14. Cosa cerco? <ul><li>Qualcosa che faccia funzionare html5 e css3 </li></ul><ul><li>Qualcosa che non pesi troppo sugli altri browser </li></ul><ul><li>E poi cosa trovare prima: soluzione html5 o soluzione css3? </li></ul>
  15. 15. Partiamo nel far funzionare html5 <ul><li>Trovo subito html5shiv…. Cosa è? </li></ul>
  16. 16. Far funzionare css3 ora <ul><li>Prima Css3PIE </li></ul>http://css3pie.com/
  17. 17. Far funzionare css3 ora <ul><li>Prima Css3PIE </li></ul>http://css3pie.com/ Ma su ie6 si blocca…
  18. 18. E infine trovo ie-css3.htc http://fetchak.com/ie-css3/
  19. 19. Ok si parte… da dove comincio?
  20. 20. Guide online <ul><li>http://dev.w3.org/html5/html-author/ </li></ul>http://html5doctor.com http://www.css3.info/ http://www.w3.org/TR/css3-roadmap/
  21. 21. Quali browser dovrei avere? <ul><li>Browser che li supportano </li></ul>Nota Bene: Solo Safari supporta al 100% queste tecnlogie.
  22. 22. E ora un po’ di ispirazione
  23. 23. Le Showcase di html5 e css3 http://html5gallery.com/ http://html5-showcase.com/ http://sitenhtml5.com/yesterday.html
  24. 24. Dopo un po’… <ul><li>finalmente il progetto è completato dobbiamo fare il testing </li></ul>
  25. 25. Cosa funziona su tutti i browser? <ul><li>Usando le giuste librerie è possibile far funzionare </li></ul>
  26. 26. Cosa funziona su tutti i browser? <ul><li>Usando le giuste librerie è possibile far funzionare </li></ul><ul><li>Effetti grafici ( angoli arrotondati , ombre ) </li></ul>
  27. 27. Cosa funziona su tutti i browser <ul><li>Usando le giuste librerie è possibile far funzionare </li></ul><ul><li>Effetti grafici ( angoli arrotondati , ombre ) </li></ul><ul><li>Selettori particolari </li></ul>
  28. 28. Cosa funziona su tutti i browser <ul><li>Usando le giuste librerie è possibile far funzionare </li></ul><ul><li>Effetti grafici ( angoli arrotondati , ombre ) </li></ul><ul><li>Selettori particolari </li></ul><ul><li>I nuovi tag html5 come senza nessun problema </li></ul>
  29. 29. Cosa funziona su tutti i browser <ul><li>Usando le giuste librerie è possibile far funzionare </li></ul><ul><li>Effetti grafici ( angoli arrotondati , ombre ) </li></ul><ul><li>Selettori particolari </li></ul><ul><li>I nuovi tag html5 come senza nessun problema </li></ul><ul><li>Font non tradizionali </li></ul>
  30. 30. Cosa non funziona invece su gli altri browser? <ul><li>Alcuni effetti ahimè non funzionano con le nuove librerie </li></ul><ul><li>Transizioni ( di qualsiasi applicazione ) </li></ul>
  31. 31. Cosa non funziona invece su gli altri browser <ul><li>Alcuni effetti aimè non funzionano con le nuove librerie </li></ul><ul><li>Transizioni ( di qualsiasi applicazione ) </li></ul><ul><li>Pochi tag ma importanti </li></ul>
  32. 32. Cosa non funziona invece su gli altri browser <ul><li>Alcuni effetti aimè non funzionano con le nuove librerie </li></ul><ul><li>Transizioni ( di qualsiasi applicazione ) </li></ul><ul><li>Pochi tag ma importanti Video e Canvas </li></ul>
  33. 33. Cosa non funziona invece su gli altri browser <ul><li>Alcuni effetti aimè non funzionano con le nuove librerie </li></ul><ul><li>Transizioni ( di qualsiasi applicazione ) </li></ul><ul><li>Pochi tag ma importanti Video e Canvas </li></ul><ul><li>Le opacità , le colonne, la trasformazione del testo e il multisfondo </li></ul>
  34. 34. E adesso come faccio? Mani ai capelli <ul><li>Precisiamo che ho pochi capelli  </li></ul>
  35. 35. … colpo di scena… jquery <ul><li>Jquery mi ha salvato … molte funzioni, che css3 </li></ul><ul><li>non faceva su ie8 e precedenti, le fa lui… il </li></ul><ul><li>tutto crossbrowser </li></ul>
  36. 36. Per le transizioni <ul><li>Basta inserire un codice tipo questo…. </li></ul>
  37. 37. I tag canvas e video non funzionano <ul><li>Canvas non è un tag nuovo già </li></ul><ul><li>esisteva e si chima excanvas </li></ul>Mentre per video c’è questo plugin che è formidabile.
  38. 38. Opacità , colonne , trasformazioni testo <ul><li>Quello è un grosso problema…. </li></ul>Infatti per opacità e trasformazione testo si possono fare con jquery. Ma per le colonne niente  Però abbiamo risolto un sacco di cose le colonne sono l’ultimo nostro pensiero
  39. 39. Opacità , colonne , trasformazioni testo <ul><li>Quello è un grosso problema…. </li></ul>Infatti per opacità e trasformazione testo si possono fare con jquery. Ma per le colonne niente  Però abbiamo risolto un sacco di cose le colonne sono l’ultimo nostro pensiero
  40. 40. Ora la domanda sorge ovvia…la pagina è pesante?
  41. 41. Usiamo i commenti condizionali di IE
  42. 42. Si parli , parli , ma non hai fatto niente <ul><li>Vuoi vedere qualcosa? </li></ul>
  43. 43. Si parli , parli , ma non hai fatto niente <ul><li>Vuoi vedere qualcosa? </li></ul>http://www.blusite.net Compatibile su IE6 Ho usato: 1) ie-css3.htc 2) Html5shiv 3) Jquery
  44. 44. Questo invece non è mio ma di un cliente http://www.azetaelaborazioni.it/ Compatibile su IE7 Ho usato: 1) css3pie 2) Html5shiv
  45. 45. E poi? Solo questi due? Sto lavorando con questo In html5 e css3, jquery e Esperimenti
  46. 46. Finito? Va be’, mi hai detto tutto, si bello, fantasmagorico ma… Niente mi dai? Un bel pachettino regalo per te
  47. 47. Hai qualche dubbio? Perplessità ? Chiedimi tutto
  48. 48. Grazie per aver partecipato a Buginar www.ebug.it

×