Salvatore LaisaCosa ci sarà dopo i CSS3? - Reprisemoebiusmania@gmail.com - Mohole Lab
Salvatore LaisaCosa ci sarà dopo i CSS3? - Reprisemoebiusmania@gmail.com - Mohole Lab
About Me        Salvatore Laisa           moebiusmania@gmail.com - Mohole Lab2006   2007               2008    2010       ...
Reprise?      Salvatore Laisa                   moebiusmania@gmail.com - Mohole Labfoto di @veinerve - Codemotion Venezia,...
Di cosa parliamo oggiSalvatore Laisa         moebiusmania@gmail.com - Mohole Lab
Dove siamo statiSalvatore Laisa    moebiusmania@gmail.com - Mohole Lab
In principio...                Salvatore Laisa           moebiusmania@gmail.com - Mohole LabEsisteva solo il contenuto HTM...
<font> time!                  Salvatore Laisa                moebiusmania@gmail.com - Mohole LabNel 1993 viene introdotto ...
E nascono i CSS                  Salvatore Laisa                moebiusmania@gmail.com - Mohole LabCresce l’interesse per ...
I layout tabellari                     Salvatore Laisa           moebiusmania@gmail.com - Mohole LabI CSS1 non hanno propr...
Vogliamo il bis                  Salvatore Laisa                moebiusmania@gmail.com - Mohole LabNel 1998 vengono standa...
Una nuova professione                  Salvatore Laisa                moebiusmania@gmail.com - Mohole LabArrivano i primi ...
Dove siamoSalvatore Laisa   moebiusmania@gmail.com - Mohole Lab
5 years in a lifetime                   Salvatore Laisa                 moebiusmania@gmail.com - Mohole LabDal 2003 al 200...
Il web delle webapps                  Salvatore Laisa                 moebiusmania@gmail.com - Mohole LabIl web stesso ini...
Troppo hype?                 Salvatore Laisa               moebiusmania@gmail.com - Mohole LabNonostante i CSS3 siano anco...
I tablet e la consacrazione di HTML5                  Salvatore Laisa                moebiusmania@gmail.com - Mohole LabA ...
Cosa c’è veramente di nuovo?                  Salvatore Laisa                moebiusmania@gmail.com - Mohole LabTutte quel...
Ma quando?                        Salvatore Laisa          moebiusmania@gmail.com - Mohole LabPresto, molto presto... o fo...
Dove stiamo andandoSalvatore Laisa       moebiusmania@gmail.com - Mohole Lab
Titolo slide   Salvatore Laisa                   moebiusmania@gmail.com - Mohole LabTab Atkins, CSS Working Group, 5 sette...
Ma ho letto “Selectors Level 4” da qualche parte             Salvatore Laisa               moebiusmania@gmail.com - Mohole...
Cosa significa per noi                   Salvatore Laisa                  moebiusmania@gmail.com - Mohole Lab• avremo semp...
Let’s see the future (of CSS)!Salvatore Laisa                  moebiusmania@gmail.com - Mohole Lab
Responsive oltre il mobile                      Salvatore Laisa                       moebiusmania@gmail.com - Mohole LabI...
Editoria su web: Regions (1/2)                      Salvatore Laisa                       moebiusmania@gmail.com - Mohole ...
Editoria su web: Regions (2/2)                     Salvatore Laisa                        moebiusmania@gmail.com - Mohole ...
Editoria su web: Exclusions (1/2)                      Salvatore Laisa                       moebiusmania@gmail.com - Moho...
Editoria su web: Exclusions (2/2)                      Salvatore Laisa                       moebiusmania@gmail.com - Moho...
Editoria su web: Pagination Templates                   Salvatore Laisa                   moebiusmania@gmail.com - Mohole ...
Filter effects (1/3)                       Salvatore Laisa                        moebiusmania@gmail.com - Mohole LabSarà ...
Filter effects (2/3)Salvatore Laisa                       moebiusmania@gmail.com - Mohole Lab  PS: e naturalmente.... sono...
Filter effects (3/3)                      Salvatore Laisa                      moebiusmania@gmail.com - Mohole LabPer “gio...
Custom filters (ex CSS Shaders - 1/3)                      Salvatore Laisa                      moebiusmania@gmail.com - M...
Custom filters (ex CSS Shaders - 2/3)                       Salvatore Laisa                        moebiusmania@gmail.com ...
Custom filters (ex CSS Shaders - 3/3)                   Salvatore Laisa                 moebiusmania@gmail.com - Mohole La...
La (solita) bella notizia                    Salvatore Laisa                   moebiusmania@gmail.com - Mohole LabWindows ...
Figo ma... dove mi documento?                 Salvatore Laisa               moebiusmania@gmail.com - Mohole LabAttualmente...
in conclusione...                        Salvatore Laisa                           moebiusmania@gmail.com - Mohole Lab    ...
“This is for everyone”                  Salvatore Laisa                     moebiusmania@gmail.com - Mohole LabTim Berners...
Upcoming SlideShare
Loading in...5
×

Cosa ci sarà dopo i CSS3? (reprise)

469

Published on

Codemotion 2013

Published in: Technology
1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
469
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
7
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Cosa ci sarà dopo i CSS3? (reprise)

  1. 1. Salvatore LaisaCosa ci sarà dopo i CSS3? - Reprisemoebiusmania@gmail.com - Mohole Lab
  2. 2. Salvatore LaisaCosa ci sarà dopo i CSS3? - Reprisemoebiusmania@gmail.com - Mohole Lab
  3. 3. About Me Salvatore Laisa moebiusmania@gmail.com - Mohole Lab2006 2007 2008 2010 2011 @moebiusmania http://www.salvatorelaisa.net
  4. 4. Reprise? Salvatore Laisa moebiusmania@gmail.com - Mohole Labfoto di @veinerve - Codemotion Venezia, Novembre 2012
  5. 5. Di cosa parliamo oggiSalvatore Laisa moebiusmania@gmail.com - Mohole Lab
  6. 6. Dove siamo statiSalvatore Laisa moebiusmania@gmail.com - Mohole Lab
  7. 7. In principio... Salvatore Laisa moebiusmania@gmail.com - Mohole LabEsisteva solo il contenuto HTML, l’aspetto veniva gestitounicamente dal browser e dalle impostazioni dell’utente(es: lo zoom del testo).
  8. 8. <font> time! Salvatore Laisa moebiusmania@gmail.com - Mohole LabNel 1993 viene introdotto il tag font per permettere agli autori dipagine web di formattare i contenuti in base alle loro necessità,tuttavia Internet Explorer e Netscape li renderizzeranno ognunoa suo modo.
  9. 9. E nascono i CSS Salvatore Laisa moebiusmania@gmail.com - Mohole LabCresce l’interesse per le pagine web e aumentano le necessità: nel1996 viene standardizzata la specifica CSS1.Viene introdotto così il concetto di separazione dell’aspetto dalcontenuto e della possibilità di avere un file CSS che gestisca piùdocumenti HTML.Tuttavia i CSS1 non verranno adottati dai browser principali se non inmaniera grezza.
  10. 10. I layout tabellari Salvatore Laisa moebiusmania@gmail.com - Mohole LabI CSS1 non hanno proprietà per la gestione dei layout e per colmarequesta mancanza i primi web master utilizzano le tabelle HTMLcome scheletro per le pagine.Yahoo - 2002 circa
  11. 11. Vogliamo il bis Salvatore Laisa moebiusmania@gmail.com - Mohole LabNel 1998 vengono standardizzati i CSS2 che introducono diversenuove proprietà che permettono di colmare la lacuna attualmentecolmata dalla tabelle: la creazione di layout.CSS Zen GardenDave Shea
  12. 12. Una nuova professione Salvatore Laisa moebiusmania@gmail.com - Mohole LabArrivano i primi layout “evoluti” puri CSS, nel 2003 inizia adiffondersi in maniera massiccia l’utilizzo di questo linguaggio e nel2004 verranno standardizzati i CSS 2.1: è nato il web design
  13. 13. Dove siamoSalvatore Laisa moebiusmania@gmail.com - Mohole Lab
  14. 14. 5 years in a lifetime Salvatore Laisa moebiusmania@gmail.com - Mohole LabDal 2003 al 2008 i CSS diventano lo standard di fatto nel webdesign,chi ancora non si è “convertito” dalle tabelle si vede costretto a farlo.Iniziano a sorgere le prime nuove esigenze che vengono colmate dasoluzioni di “terze parti” come i normalizzatori, le griglie, i font-as-a-service (Typekit) e vi dicendo.
  15. 15. Il web delle webapps Salvatore Laisa moebiusmania@gmail.com - Mohole LabIl web stesso inizia a evolversi, i siti sono sempre meno statici, leinterazioni sempre più forti, i layout più complessi: stanno nascendole prime web apps e il W3C reagisce annunciando l’inizio dei lavoriper i nuovi standard HTML5 e CSS3.
  16. 16. Troppo hype? Salvatore Laisa moebiusmania@gmail.com - Mohole LabNonostante i CSS3 siano ancora delle bozze molti designers edevelopers iniziano a implementarli sia in siti che in webapps nonproprio così private come il W3C indicava di fare.
  17. 17. I tablet e la consacrazione di HTML5 Salvatore Laisa moebiusmania@gmail.com - Mohole LabA inizio del 2010 viene presentato il primo iPad che sarà la scintillaper il nuovo mercato dei tablet e uno Steve Jobs forse all’apice dellasua popolarità e mediaticità insegnerà ai “non addetti ai lavori” unanuova parola: HTML5.
  18. 18. Cosa c’è veramente di nuovo? Salvatore Laisa moebiusmania@gmail.com - Mohole LabTutte quelle cose che non erano proprio nate per realizzazione di UserInterfaces vengono aggiunte o sistemate, tra cui:• effetti grafici (border radius, ombre, sfumature)• selettori più potenti• font-face e colonne• il flexbox• adozione del formato SVG• responsive design• e altro ancora...
  19. 19. Ma quando? Salvatore Laisa moebiusmania@gmail.com - Mohole LabPresto, molto presto... o forse no? Gli annunci ufficiali dicono:HTML5 - 2014 (mid)HTML5.1 - 2016quindi nel 2014 non vedremo proprio tutto quello di cui stiamoparlando da tempo.http://www.w3.org/TR/2012/WD-html51-20121217/
  20. 20. Dove stiamo andandoSalvatore Laisa moebiusmania@gmail.com - Mohole Lab
  21. 21. Titolo slide Salvatore Laisa moebiusmania@gmail.com - Mohole LabTab Atkins, CSS Working Group, 5 settembre 2012
  22. 22. Ma ho letto “Selectors Level 4” da qualche parte Salvatore Laisa moebiusmania@gmail.com - Mohole LabLe singole specifiche CSS hanno dei loro “livelli” disviluppo, ma come linguaggio generale il W3C hadeciso di non lavorare piu ad un’insieme di featuresma bensì sviluppare ognuna di queste come singolomodulo.
  23. 23. Cosa significa per noi Salvatore Laisa moebiusmania@gmail.com - Mohole Lab• avremo sempre vari nuovi giocattoli• maggiore frammentazione nei supporti da parte dei browser• (auto)formazione costante• dovremo sempre avere delle tecniche di fallback/degrado nella manica• conosceremo più a fondo il modo in cui funzionano vari effetti di Photoshop• e magari non usarlo più :)
  24. 24. Let’s see the future (of CSS)!Salvatore Laisa moebiusmania@gmail.com - Mohole Lab
  25. 25. Responsive oltre il mobile Salvatore Laisa moebiusmania@gmail.com - Mohole LabI CSS Media Queries ci permettono di “leggere” le dimensioni degli schermi... di tuttigli schermi non solo quelli mobile!
  26. 26. Editoria su web: Regions (1/2) Salvatore Laisa moebiusmania@gmail.com - Mohole LabProposta da Microsoft e Adobe, permette di creare più caselle di testo collegate perpoter creare layout tipo magazines in maniera più semplice (tipo InDesign e ingenerale i software di impaginazione classici).
  27. 27. Editoria su web: Regions (2/2) Salvatore Laisa moebiusmania@gmail.com - Mohole LabAttualmente testabile solo su IE10 (-ms-) e Chrome Nightly (-webkit-) attivando una flag
  28. 28. Editoria su web: Exclusions (1/2) Salvatore Laisa moebiusmania@gmail.com - Mohole LabProposta da Microsoft e Adobe, permette di creare più caselle di testo collegate perpoter creare layout tipo magazines in maniera più semplice (tipo InDesign e ingenerale i software di impaginazione classici).
  29. 29. Editoria su web: Exclusions (2/2) Salvatore Laisa moebiusmania@gmail.com - Mohole LabSi utilizzano tracciati SVG per creare le forme. Nessun browser compatibile se non Chrome Canary con le flags sperimentali abilitate.
  30. 30. Editoria su web: Pagination Templates Salvatore Laisa moebiusmania@gmail.com - Mohole LabMolto simile al concetto di “pagine mastro” e template in generale,permette il riutilizzo di elementi vuoti dentro ai quali viene passato deltesto tramite i Regions.Attualmente non è testabile in nessun browser.http://dev.w3.org/csswg/css3-page-template/
  31. 31. Filter effects (1/3) Salvatore Laisa moebiusmania@gmail.com - Mohole LabSarà possibile applicare i classici filtri grafici direttamente da CSS, come:• sfocatura (blur)• luminosità (brightness)• saturazione• ombre esterne (drop shadow)• e alcuni altri...
  32. 32. Filter effects (2/3)Salvatore Laisa moebiusmania@gmail.com - Mohole Lab PS: e naturalmente.... sono animabili!...
  33. 33. Filter effects (3/3) Salvatore Laisa moebiusmania@gmail.com - Mohole LabPer “giocare” e sperimentare in maniera semplice con i nuovi filtri CSS la Adobe hacreato un tool online Filter Lab.
  34. 34. Custom filters (ex CSS Shaders - 1/3) Salvatore Laisa moebiusmania@gmail.com - Mohole LabForse la parte più cool! Creare effetti cinematografici molto avanzati su qualunqueelemento della pagina.
  35. 35. Custom filters (ex CSS Shaders - 2/3) Salvatore Laisa moebiusmania@gmail.com - Mohole LabGli elementi vengono “convertiti” in mesh, avendo quindi a disposizioni dei verticipossiamo manipolare oggetti 2D in uno spazio 3D come ci pare e piace.In realtà però i vertici e gli effetti customizzati vengono definiti con un sotto linguaggiodi scripting chiamato OpenGL Shading Language (GLSL) , non proprio simile alCSS...
  36. 36. Custom filters (ex CSS Shaders - 3/3) Salvatore Laisa moebiusmania@gmail.com - Mohole LabQuesti effetti 3D si basano sull’interfacciamento del browser alla schedavideo quindi bisogna controllare due features supportate dal browser, i“CSS Custom Filter” e “WebGL” (feature necessaria per lavorare con il3D nel tag Canvas).Anche qui il tool di Adobe Filter Lab si dimostra molto comodo per chipreferisce un approccio più visuale (previo supporto del browser allefeature specificate sopra).
  37. 37. La (solita) bella notizia Salvatore Laisa moebiusmania@gmail.com - Mohole LabWindows 8 e Internet Explorer 10 NON supportano WebGL inquanto la Microsoft crede che WebGL sia pericoloso. Si vociferavogliano implementare una loro libreria GL.http://blogs.technet.com/b/srd/archive/2011/06/16/webgl-considered-harmful.aspx
  38. 38. Figo ma... dove mi documento? Salvatore Laisa moebiusmania@gmail.com - Mohole LabAttualmente non c’è molto disponibile visto sopratutto lo scarsosupporto da parte dei browser attuali.Le migliori risorse (e speriamo tool) attualmente sono reperibilitramite forum e blog ufficiali della Adobe (http://html.adobe.com) .Le specifiche delle proposte sono comunque disponibili sul sito delW3C.
  39. 39. in conclusione... Salvatore Laisa moebiusmania@gmail.com - Mohole Lab GRAZIE!e grazie a:• Codemotion per lo spazio che mi ha concesso (più di una volta...)• agli amici di Appsterdam Milano, per avermi ricordato quanto è bello essere nerd in compagnia• a Joe Satriani per i suoi assoli di sottofondo durante le nottate a fare le slide• a Tim Berners Lee per averci regalato questo meraviglioso mondo che è il Web
  40. 40. “This is for everyone” Salvatore Laisa moebiusmania@gmail.com - Mohole LabTim Berners Lee durante la cerimonia di apertura delle Olimpiadi di Londra 2012
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×