• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Html5 e css3 nei miei progetti: cosa ho fatto
 

Html5 e css3 nei miei progetti: cosa ho fatto

on

  • 1,602 views

Le slide del mio primo buginar su html5 e css3

Le slide del mio primo buginar su html5 e css3

Statistics

Views

Total Views
1,602
Views on SlideShare
1,445
Embed Views
157

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 157

http://www.ebug.it 157

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