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