Download - Cosa ci sarà dopo i CSS3
COSA CI SARA’ DOPO I CSS3Salvatore Laisa (@moebiusmania)
Codemotion Venezia 2012
Salvatore Laisawww.salvatorelaisa.net
About me (Web designer? Front End? Interactive?)
2006 2007 2008 2010 2011
Codemotion Venezia 2012
Salvatore Laisawww.salvatorelaisa.net
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 Venezia 2012
Parte 1:Cosa vuole fare il W3C?
Dal successo/disastro dei CSS3 bisogna imparare qualcosa!
Codemotion Venezia 2012
Salvatore Laisawww.salvatorelaisa.net
Dopo i CSS3?!?!?
Codemotion Venezia 2012
Salvatore Laisawww.salvatorelaisa.net
Prima di tutto... non ci saranno CSS4
Tab Atkins, CSS Working Group, 5 settembre 2012
Codemotion Venezia 2012
Salvatore Laisawww.salvatorelaisa.net
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 Venezia 2012
Salvatore Laisawww.salvatorelaisa.net
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 Venezia 2012
Parte 2:Let’s rock!
Vediamo cosa ci interrà impegnati a smanettare nei prossimi anni
Codemotion Venezia 2012
Salvatore Laisawww.salvatorelaisa.net
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 Venezia 2012
Salvatore Laisawww.salvatorelaisa.net
Editoria su web: Regions (2/2)
Attualmente sono testibili su IE 10 (con suffisso) e le nightly di Chrome (abilitando una flag dedicata)
Codemotion Venezia 2012
Salvatore Laisawww.salvatorelaisa.net
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 Venezia 2012
Salvatore Laisawww.salvatorelaisa.net
Editoria su web: Exclusions (2/2)
Si utilizzano tracciati SVG per creare le forme.
Codemotion Venezia 2012
Salvatore Laisawww.salvatorelaisa.net
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 Venezia 2012
Salvatore Laisawww.salvatorelaisa.net
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 Venezia 2012
Salvatore Laisawww.salvatorelaisa.net
Filtri grafici (2/3)
PS: e naturalmente.... sono animabili!
Codemotion Venezia 2012
Salvatore Laisawww.salvatorelaisa.net
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 Venezia 2012
Salvatore Laisawww.salvatorelaisa.net
Custom filters (ex CSS Shaderds - 1/3)
Forse la parte più cool! Creare effetti cinematografici molto avanzati su qualunque elemento della pagina.
Codemotion Venezia 2012
Salvatore Laisawww.salvatorelaisa.net
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 Venezia 2012
Salvatore Laisawww.salvatorelaisa.net
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 Venezia 2012
Salvatore Laisawww.salvatorelaisa.net
La (solita) bella notizia
Windows 8 e Internet Explorer 10 NON supportano WebGL. Si vocifera vogliano implementare una loro libreria GL.
Codemotion Venezia 2012
Salvatore Laisawww.salvatorelaisa.net
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.
Salvatore Laisasalvatorelaisa.net
Codemotion Venezia 2012
e a questo punto....
GRAZIE!(al prossimo Codemotion!)