Cosa ci sarà dopo i CSS3
0 likes330 views
Il talk di Salvatore Laisa esplora le future evoluzioni dei CSS, sottolineando che non ci sarà un CSS4, ma piuttosto un aggiornamento continuo delle singole specifiche. Presenta nuove funzionalità come le regions per layout editoriali, esclusioni per adattare il testo a forme diverse e filtri grafici applicabili tramite CSS. Inoltre, introduce concetti avanzati come i custom filters che permettono effetti 3D, pur evidenziando le limitazioni di supporto attuali da parte dei browser.
Cosa ci sarà dopo i CSS3
- 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