• Save
Html5 e css3 nei miei progetti: cosa ho fatto
Upcoming SlideShare
Loading in...5
×
 

Html5 e css3 nei miei progetti: cosa ho fatto

on

  • 879 views

Slide del seminario su html5 e css3 che ho usato nei miei progetti.

Slide del seminario su html5 e css3 che ho usato nei miei progetti.

Statistics

Views

Total Views
879
Views on SlideShare
879
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Html5 e css3 nei miei progetti: cosa ho fatto Html5 e css3 nei miei progetti: cosa ho fatto Presentation Transcript

  • 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?
    • Html5 e Css3 sono i nuovi linguaggi per realizzare
    • le pagine web dei nostri siti internet
  • 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
  • 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
  • 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
  • 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
  • Fantastico
  • Aspetta
  • Dov’è la fregatura?
  • Dov’è la fregatura? Non funzionano sui vecchi browser
  • Problema: diffusione browser
  • Ma io non voglio rinunciare a loro
    • Devo trovare un’idea… html5 e css3
    • sono troppo convenienti
    • Non posso rinunciare
    • Come fare?
  • 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?
  • Partiamo nel far funzionare html5
    • Trovo subito html5shiv…. Cosa è?
  • Far funzionare css3 ora
    • Prima Css3PIE
    http://css3pie.com/
  • Far funzionare css3 ora
    • Prima Css3PIE
    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
    • http://dev.w3.org/html5/html-author/
    http://html5doctor.com http://www.css3.info/ http://www.w3.org/TR/css3-roadmap/
  • Quali browser dovrei avere?
    • Browser che li supportano
    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’…
    • finalmente il progetto è completato dobbiamo fare il testing
  • Cosa funziona su tutti i browser?
    • Usando le giuste librerie è possibile far funzionare
  • Cosa funziona su tutti i browser?
    • Usando le giuste librerie è possibile far funzionare
    • Effetti grafici ( angoli arrotondati , ombre )
  • Cosa funziona su tutti i browser
    • Usando le giuste librerie è possibile far funzionare
    • Effetti grafici ( angoli arrotondati , ombre )
    • Selettori particolari
  • 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
  • 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
  • Cosa non funziona invece su gli altri browser?
    • Alcuni effetti ahimè non funzionano con le nuove librerie
    • Transizioni ( di qualsiasi applicazione )
  • 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
  • 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
  • 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
  • E adesso come faccio? Mani ai capelli
    • Precisiamo che ho pochi capelli 
  • … colpo di scena… jquery
    • Jquery mi ha salvato … molte funzioni, che css3
    • non faceva su ie8 e precedenti, le fa lui… il
    • tutto crossbrowser
  • Per le transizioni
    • Basta inserire un codice tipo questo….
  • 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.
  • 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
  • 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
  • Ora la domanda sorge ovvia…la pagina è pesante?
  • Usiamo i commenti condizionali di IE
  • Si parli , parli , ma non hai fatto niente
    • Vuoi vedere qualcosa?
  • 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
  • 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