Il mio talk al Codemotion di Venezia 2012

1. COSA CI SARA’ DOPO I CSS3
Salvatore Laisa (@moebiusmania)

2. About me (Web designer? Front End? Interactive?)
2006 2007 2008 2010 2011
Codemotion Salvatore Laisa
Venezia 2012 www.salvatorelaisa.net

3. Scopo del talk
Condividere e diffondere le prossime evoluzioni dei
Cascading Style Sheet, dalle nuove possibilità al modo in
cui il W3C e i produttori di browser implementeranno
queste features.
Codemotion Salvatore Laisa
Venezia 2012 www.salvatorelaisa.net

4. Parte 1:
Cosa vuole fare il
W3C?
Dal successo/disastro dei CSS3
bisogna imparare qualcosa!
Codemotion
Venezia 2012

5. Dopo i CSS3?!?!?
Codemotion Salvatore Laisa
Venezia 2012 www.salvatorelaisa.net

6. Prima di tutto... non ci saranno CSS4
Tab Atkins, CSS Working Group, 5 settembre 2012
Codemotion Salvatore Laisa
Venezia 2012 www.salvatorelaisa.net

7. Ma ho letto “Selectors Level 4” da qualche parte
Le singole specifiche CSS hanno dei loro “livelli” di
sviluppo, ma come linguaggio generale il W3C ha deciso
di non lavorare piu ad un’insieme di features ma bensì
sviluppare ognuna di queste come singolo modulo.
Codemotion Salvatore Laisa
Venezia 2012 www.salvatorelaisa.net

8. Cosa significa per noi
• 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ù :)
Codemotion Salvatore Laisa
Venezia 2012 www.salvatorelaisa.net

9. Parte 2:
Let’s rock!
Vediamo cosa ci interrà
impegnati a smanettare nei
prossimi anni
Codemotion
Venezia 2012

10. Editoria su web: Regions (1/2)
Proposta da Microsoft e Adobe, permette di creare più caselle di testo collegate
per poter creare layout tipo magazines in maniera più semplice (tipo InDesign e in
generale i software di impaginazione classici).
Codemotion Salvatore Laisa
Venezia 2012 www.salvatorelaisa.net

11. Editoria su web: Regions (2/2)
Attualmente sono testibili su IE 10 (con suffisso) e le nightly di Chrome (abilitando
una flag dedicata)
Codemotion Salvatore Laisa
Venezia 2012 www.salvatorelaisa.net

12. Editoria su web: Exclusions (1/2)
Altra feature molto legata al mondo dell’editoria, per la creazione di aree di forme
geometriche diverse da rettangoli attorno ai quali il testo si può adattare.
Codemotion Salvatore Laisa
Venezia 2012 www.salvatorelaisa.net

13. Editoria su web: Exclusions (2/2)
Si utilizzano tracciati SVG per creare le forme.
Codemotion Salvatore Laisa
Venezia 2012 www.salvatorelaisa.net

14. Editoria su web: Pagination Templates
Molto simile al concetto di “pagine mastro” e template in generale, permette il
riutilizzo di elementi vuoti dentro ai quali viene passato del testo tramite i
Regions.
Attualmente non è testabile in nessun browser
Codemotion Salvatore Laisa
Venezia 2012 www.salvatorelaisa.net

15. Filtri grafici (1/3)
Diventa finalmente possibile applicare i classici filtri grafici direttamente da CSS,
come:
• sfocatura (blur)
• luminosità (brightness)
• saturazione
• ombre esterne (drop shadow)
• e alcuni altri...
Codemotion Salvatore Laisa
Venezia 2012 www.salvatorelaisa.net

16. Filtri grafici (2/3)
PS: e naturalmente.... sono animabili!
Codemotion Salvatore Laisa
Venezia 2012 www.salvatorelaisa.net

17. Filtri grafici (3/3)
Per “giocare” e sperimentare in maniera semplice con i nuovi filtri CSS la Adobe
ha creato un tool online Filter Lab
Codemotion Salvatore Laisa
Venezia 2012 www.salvatorelaisa.net

18. Custom filters (ex CSS Shaderds - 1/3)
Forse la parte più cool! Creare effetti cinematografici molto avanzati su
qualunque elemento della pagina.
Codemotion Salvatore Laisa
Venezia 2012 www.salvatorelaisa.net

19. Custom filters (2/3)
Gli elementi vengono “convertiti” in mesh, avendo quindi a disposizioni dei vertici
possiamo 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
linguaggio chiamato OpenGL Shading Language (GLSL) che è molto più simile
allo scripting che allo stile.
Codemotion Salvatore Laisa
Venezia 2012 www.salvatorelaisa.net

20. Custom filters (3/3)
Questi effetti 3D si basano sull’interfacciamento del browser alla scheda video
quindi bisogna controllare due features supportate dal browser, i “CSS Custom
Filter” e “WebGL” (feature necessaria per lavorare con il 3D nel tag Canvas).
Anche qui il tool di Adobe Filter Lab si dimostra molto comodo per chi preferisce
un approccio più visuale (previo supporto del browser alle feature specificate
sopra)
Codemotion Salvatore Laisa
Venezia 2012 www.salvatorelaisa.net

21. La (solita) bella notizia
Windows 8 e Internet Explorer 10 NON supportano WebGL. Si vocifera vogliano
implementare una loro libreria GL.
Codemotion Salvatore Laisa
Venezia 2012 www.salvatorelaisa.net

22. Figo ma... dove mi documento?
Attualmente non c’è molto disponibile visto sopratutto lo scarso supporto da
parte dei browser attuali.
Le migliori risorse (e speriamo tool) attualmente sono reperibili tramite forum e
blog ufficiali della Adobe.
Le specifiche delle proposte sono comunque disponibili sul sito del W3C.
Codemotion Salvatore Laisa
Venezia 2012 www.salvatorelaisa.net

23. e a questo punto....
GRAZIE!
(al prossimo Codemotion!)
Codemotion Salvatore Laisa
Venezia 2012 salvatorelaisa.net