SlideShare une entreprise Scribd logo
1  sur  48
Html5 e Css3  nei miei progetti:  cosa ho fatto   Seminario di Rocco Passaro su l’uso di html5 e css3 11 Febbraio 2011
Ma cosa sono html5 e css3?
Ma cosa sono html5 e css3? ,[object Object],[object Object]
Perchè usarli? ,[object Object],[object Object],[object Object]
Quali sono i vantaggi di html5? ,[object Object],[object Object]
Quali sono i vantaggi di html5? ,[object Object],[object Object],[object Object]
Mentre css3 invece cosa ci offre? ,[object Object],[object Object],[object Object]
Fantastico
Aspetta
Dov’è la fregatura?
Dov’è la fregatura? Non funzionano sui vecchi browser
Problema: diffusione browser
Ma io non voglio rinunciare a loro ,[object Object],[object Object],[object Object],[object Object]
Cosa cerco? ,[object Object],[object Object],[object Object]
Partiamo nel far funzionare html5 ,[object Object]
Far funzionare css3 ora ,[object Object],http://css3pie.com/
Far funzionare css3 ora ,[object Object],http://css3pie.com/   Ma su ie6 si blocca…
E infine trovo ie-css3.htc http://fetchak.com/ie-css3/
Ok si parte… da dove comincio?
Guide online ,[object Object],http://html5doctor.com   http://www.css3.info/   http://www.w3.org/TR/css3-roadmap/
Quali browser dovrei avere? ,[object Object],Nota Bene:  Solo Safari supporta al 100%  queste tecnlogie.
E ora un po’ di ispirazione
Le Showcase di html5 e css3 http://html5gallery.com/   http://html5-showcase.com/   http://sitenhtml5.com/yesterday.html
Dopo un po’… ,[object Object]
Cosa funziona su tutti i browser? ,[object Object]
Cosa funziona su tutti i browser? ,[object Object],[object Object]
Cosa funziona su tutti i browser ,[object Object],[object Object],[object Object]
Cosa funziona su tutti i browser ,[object Object],[object Object],[object Object],[object Object]
Cosa funziona su tutti i browser ,[object Object],[object Object],[object Object],[object Object],[object Object]
Cosa non funziona invece su gli altri browser? ,[object Object],[object Object]
Cosa non funziona invece su gli altri browser ,[object Object],[object Object],[object Object]
Cosa non funziona invece su gli altri browser ,[object Object],[object Object],[object Object]
Cosa non funziona invece su gli altri browser ,[object Object],[object Object],[object Object],[object Object]
E adesso come faccio? Mani ai capelli ,[object Object]
… colpo di scena… jquery ,[object Object],[object Object],[object Object]
Per le transizioni ,[object Object]
I tag canvas e video non funzionano ,[object Object],[object Object],Mentre per video c’è questo plugin che è formidabile.
Opacità , colonne , trasformazioni testo ,[object Object],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
Opacità , colonne , trasformazioni testo ,[object Object],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
Ora la domanda sorge ovvia…la pagina è pesante?
Usiamo i commenti condizionali di IE
Si parli , parli , ma non hai fatto niente ,[object Object]
Si parli , parli , ma non hai fatto niente ,[object Object],http://www.blusite.net   Compatibile su IE6 Ho usato: 1) ie-css3.htc 2) Html5shiv 3) Jquery
Questo invece non è mio ma di un cliente http://www.azetaelaborazioni.it/   Compatibile su IE7 Ho usato: 1) css3pie 2) Html5shiv
E poi? Solo questi due? Sto lavorando con questo  In html5 e css3, jquery e  Esperimenti
Finito? Va be’, mi hai detto tutto, si bello, fantasmagorico ma… Niente mi dai? Un bel pachettino regalo per te
Hai qualche dubbio? Perplessità ? Chiedimi tutto
Grazie per aver partecipato a Buginar www.ebug.it

Contenu connexe

Similaire à Html5 e css3 nei miei progetti: cosa ho fatto

PHP, non lo stesso vecchio linguaggio
PHP, non lo stesso vecchio linguaggioPHP, non lo stesso vecchio linguaggio
PHP, non lo stesso vecchio linguaggioMassimiliano Arione
 
Accessibilità (e Plone) - le norme ma con buon senso - 2015
Accessibilità (e Plone) - le norme ma con buon senso - 2015Accessibilità (e Plone) - le norme ma con buon senso - 2015
Accessibilità (e Plone) - le norme ma con buon senso - 2015Jacopo Deyla
 
Cosa ci sarà dopo i CSS3? (reprise)
Cosa ci sarà dopo i CSS3? (reprise)Cosa ci sarà dopo i CSS3? (reprise)
Cosa ci sarà dopo i CSS3? (reprise)Salvatore Laisa
 
Lean UX Development - Approach and toolkit
Lean UX Development - Approach and toolkitLean UX Development - Approach and toolkit
Lean UX Development - Approach and toolkitCodemotion
 
Lean UX Approach for developers
Lean UX Approach for developersLean UX Approach for developers
Lean UX Approach for developersFabio Fabbrucci
 
Session isolation e rendering delle pagine web
Session isolation e rendering delle pagine webSession isolation e rendering delle pagine web
Session isolation e rendering delle pagine webGiacomo Zecchini
 
Seminario Drupal 2012
Seminario Drupal 2012Seminario Drupal 2012
Seminario Drupal 2012Nicola Corti
 
Drupal Day 2011 - Organizza il tuo lavoro
Drupal Day 2011 - Organizza il tuo lavoroDrupal Day 2011 - Organizza il tuo lavoro
Drupal Day 2011 - Organizza il tuo lavoroDrupalDay
 
Convertire estensioni da Joomla! 3 a Joomla! 4
Convertire estensioni da Joomla! 3 a Joomla! 4Convertire estensioni da Joomla! 3 a Joomla! 4
Convertire estensioni da Joomla! 3 a Joomla! 4Loredana Fineo
 
Programmatore_hobbysta.pdf
Programmatore_hobbysta.pdfProgrammatore_hobbysta.pdf
Programmatore_hobbysta.pdfJacopo Grimoldi
 
Lo sai che si può fare DDD in Javascript grazie a Typescript? Visual Studio e...
Lo sai che si può fare DDD in Javascript grazie a Typescript? Visual Studio e...Lo sai che si può fare DDD in Javascript grazie a Typescript? Visual Studio e...
Lo sai che si può fare DDD in Javascript grazie a Typescript? Visual Studio e...Marco Parenzan
 
PASW4Joomla! Il nuovo modello di sito
PASW4Joomla! Il nuovo modello di sitoPASW4Joomla! Il nuovo modello di sito
PASW4Joomla! Il nuovo modello di sitoAntonio Todaro
 
Node js: che cos'è e a che cosa serve?
Node js: che cos'è e a che cosa serve?Node js: che cos'è e a che cosa serve?
Node js: che cos'è e a che cosa serve?Flavius-Florin Harabor
 
Smau Bologna 2016 - Codemotion
Smau Bologna 2016 - CodemotionSmau Bologna 2016 - Codemotion
Smau Bologna 2016 - CodemotionSMAU
 

Similaire à Html5 e css3 nei miei progetti: cosa ho fatto (20)

PHP, non lo stesso vecchio linguaggio
PHP, non lo stesso vecchio linguaggioPHP, non lo stesso vecchio linguaggio
PHP, non lo stesso vecchio linguaggio
 
Html5
Html5Html5
Html5
 
Accessibilità (e Plone) - le norme ma con buon senso - 2015
Accessibilità (e Plone) - le norme ma con buon senso - 2015Accessibilità (e Plone) - le norme ma con buon senso - 2015
Accessibilità (e Plone) - le norme ma con buon senso - 2015
 
Cosa ci sarà dopo i CSS3? (reprise)
Cosa ci sarà dopo i CSS3? (reprise)Cosa ci sarà dopo i CSS3? (reprise)
Cosa ci sarà dopo i CSS3? (reprise)
 
Lean UX Development - Approach and toolkit
Lean UX Development - Approach and toolkitLean UX Development - Approach and toolkit
Lean UX Development - Approach and toolkit
 
Lean UX Approach for developers
Lean UX Approach for developersLean UX Approach for developers
Lean UX Approach for developers
 
Questopc
QuestopcQuestopc
Questopc
 
Session isolation e rendering delle pagine web
Session isolation e rendering delle pagine webSession isolation e rendering delle pagine web
Session isolation e rendering delle pagine web
 
Seminario Drupal 2012
Seminario Drupal 2012Seminario Drupal 2012
Seminario Drupal 2012
 
Organizza il lavoro
Organizza il lavoroOrganizza il lavoro
Organizza il lavoro
 
Drupal Day 2011 - Organizza il tuo lavoro
Drupal Day 2011 - Organizza il tuo lavoroDrupal Day 2011 - Organizza il tuo lavoro
Drupal Day 2011 - Organizza il tuo lavoro
 
Convertire estensioni da Joomla! 3 a Joomla! 4
Convertire estensioni da Joomla! 3 a Joomla! 4Convertire estensioni da Joomla! 3 a Joomla! 4
Convertire estensioni da Joomla! 3 a Joomla! 4
 
Programmatore_hobbysta.pdf
Programmatore_hobbysta.pdfProgrammatore_hobbysta.pdf
Programmatore_hobbysta.pdf
 
Lo sai che si può fare DDD in Javascript grazie a Typescript? Visual Studio e...
Lo sai che si può fare DDD in Javascript grazie a Typescript? Visual Studio e...Lo sai che si può fare DDD in Javascript grazie a Typescript? Visual Studio e...
Lo sai che si può fare DDD in Javascript grazie a Typescript? Visual Studio e...
 
PASW4 Joomla!
PASW4 Joomla!PASW4 Joomla!
PASW4 Joomla!
 
PASW4Joomla! Il nuovo modello di sito
PASW4Joomla! Il nuovo modello di sitoPASW4Joomla! Il nuovo modello di sito
PASW4Joomla! Il nuovo modello di sito
 
Seo html russo
Seo html russoSeo html russo
Seo html russo
 
Slide Web Lab
Slide Web LabSlide Web Lab
Slide Web Lab
 
Node js: che cos'è e a che cosa serve?
Node js: che cos'è e a che cosa serve?Node js: che cos'è e a che cosa serve?
Node js: che cos'è e a che cosa serve?
 
Smau Bologna 2016 - Codemotion
Smau Bologna 2016 - CodemotionSmau Bologna 2016 - Codemotion
Smau Bologna 2016 - Codemotion
 

Html5 e css3 nei miei progetti: cosa ho fatto