7. In principio...
Salvatore Laisa moebiusmania@gmail.com - Mohole Lab
Esisteva solo il contenuto HTML, l’aspetto veniva gestito
unicamente dal browser e dalle impostazioni dell’utente
(es: lo zoom del testo).
8. <font> time!
Salvatore Laisa moebiusmania@gmail.com - Mohole Lab
Nel 1993 viene introdotto il tag font per permettere agli autori di
pagine web di formattare i contenuti in base alle loro necessità,
tuttavia Internet Explorer e Netscape li renderizzeranno ognuno
a suo modo.
9. E nascono i CSS
Salvatore Laisa moebiusmania@gmail.com - Mohole Lab
Cresce l’interesse per le pagine web e aumentano le necessità: nel
1996 viene standardizzata la specifica CSS1.
Viene introdotto così il concetto di separazione dell’aspetto dal
contenuto e della possibilità di avere un file CSS che gestisca più
documenti HTML.
Tuttavia i CSS1 non verranno adottati dai browser principali se non in
maniera grezza.
10. I layout tabellari
Salvatore Laisa moebiusmania@gmail.com - Mohole Lab
I CSS1 non hanno proprietà per la gestione dei layout e per colmare
questa mancanza i primi web master utilizzano le tabelle HTML
come scheletro per le pagine.
Yahoo - 2002 circa
11. Vogliamo il bis
Salvatore Laisa moebiusmania@gmail.com - Mohole Lab
Nel 1998 vengono standardizzati i CSS2 che introducono diverse
nuove proprietà che permettono di colmare la lacuna attualmente
colmata dalla tabelle: la creazione di layout.
CSS Zen Garden
Dave Shea
12. Una nuova professione
Salvatore Laisa moebiusmania@gmail.com - Mohole Lab
Arrivano i primi layout “evoluti” puri CSS, nel 2003 inizia a
diffondersi in maniera massiccia l’utilizzo di questo linguaggio e nel
2004 verranno standardizzati i CSS 2.1:
è nato il web design
14. 5 years in a lifetime
Salvatore Laisa moebiusmania@gmail.com - Mohole Lab
Dal 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 da
soluzioni di “terze parti” come i normalizzatori, le griglie, i font-as-a-
service (Typekit) e vi dicendo.
15. Il web delle webapps
Salvatore Laisa moebiusmania@gmail.com - Mohole Lab
Il web stesso inizia a evolversi, i siti sono sempre meno statici, le
interazioni sempre più forti, i layout più complessi: stanno nascendo
le prime web apps e il W3C reagisce annunciando l’inizio dei lavori
per i nuovi standard HTML5 e CSS3.
16. Troppo hype?
Salvatore Laisa moebiusmania@gmail.com - Mohole Lab
Nonostante i CSS3 siano ancora delle bozze molti designers e
developers iniziano a implementarli sia in siti che in webapps non
proprio così private come il W3C indicava di fare.
17. I tablet e la consacrazione di HTML5
Salvatore Laisa moebiusmania@gmail.com - Mohole Lab
A inizio del 2010 viene presentato il primo iPad che sarà la scintilla
per il nuovo mercato dei tablet e uno Steve Jobs forse all’apice della
sua popolarità e mediaticità insegnerà ai “non addetti ai lavori” una
nuova parola: HTML5.
18. Cosa c’è veramente di nuovo?
Salvatore Laisa moebiusmania@gmail.com - Mohole Lab
Tutte quelle cose che non erano proprio nate per realizzazione di User
Interfaces 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. Ma quando?
Salvatore Laisa moebiusmania@gmail.com - Mohole Lab
Presto, molto presto... o forse no? Gli annunci ufficiali dicono:
HTML5 - 2014 (mid)
HTML5.1 - 2016
quindi nel 2014 non vedremo proprio tutto quello di cui stiamo
parlando da tempo.
http://www.w3.org/TR/2012/WD-html51-20121217/
21. Titolo slide
Salvatore Laisa moebiusmania@gmail.com - Mohole Lab
Tab Atkins, CSS Working Group, 5 settembre 2012
22. Ma ho letto “Selectors Level 4” da qualche parte
Salvatore Laisa moebiusmania@gmail.com - Mohole Lab
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.
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. Let’s see the future (of CSS)!
Salvatore Laisa moebiusmania@gmail.com - Mohole Lab
25. Responsive oltre il mobile
Salvatore Laisa moebiusmania@gmail.com - Mohole Lab
I CSS Media Queries ci permettono di “leggere” le dimensioni degli schermi... di tutti
gli schermi non solo quelli mobile!
26. Editoria su web: Regions (1/2)
Salvatore Laisa moebiusmania@gmail.com - Mohole Lab
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).
27. Editoria su web: Regions (2/2)
Salvatore Laisa moebiusmania@gmail.com - Mohole Lab
Attualmente testabile solo su IE10 (-ms-) e Chrome Nightly (-webkit-) attivando una flag
28. Editoria su web: Exclusions (1/2)
Salvatore Laisa moebiusmania@gmail.com - Mohole Lab
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).
29. Editoria su web: Exclusions (2/2)
Salvatore Laisa moebiusmania@gmail.com - Mohole Lab
Si utilizzano tracciati SVG per creare le forme. Nessun browser compatibile se non Chrome
Canary con le flags sperimentali abilitate.
30. Editoria su web: Pagination Templates
Salvatore Laisa moebiusmania@gmail.com - Mohole Lab
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.
http://dev.w3.org/csswg/css3-page-template/
31. Filter effects (1/3)
Salvatore Laisa moebiusmania@gmail.com - Mohole Lab
Sarà possibile applicare i classici filtri grafici direttamente da CSS, come:
• sfocatura (blur)
• luminosità (brightness)
• saturazione
• ombre esterne (drop shadow)
• e alcuni altri...
33. Filter effects (3/3)
Salvatore Laisa moebiusmania@gmail.com - Mohole Lab
Per “giocare” e sperimentare in maniera semplice con i nuovi filtri CSS la Adobe ha
creato un tool online Filter Lab.
34. Custom filters (ex CSS Shaders - 1/3)
Salvatore Laisa moebiusmania@gmail.com - Mohole Lab
Forse la parte più cool! Creare effetti cinematografici molto avanzati su qualunque
elemento della pagina.
35. Custom filters (ex CSS Shaders - 2/3)
Salvatore Laisa moebiusmania@gmail.com - Mohole Lab
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
di scripting chiamato OpenGL Shading Language (GLSL) , non proprio simile al
CSS...
36. Custom filters (ex CSS Shaders - 3/3)
Salvatore Laisa moebiusmania@gmail.com - Mohole Lab
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).
37. La (solita) bella notizia
Salvatore Laisa moebiusmania@gmail.com - Mohole Lab
Windows 8 e Internet Explorer 10 NON supportano WebGL in
quanto la Microsoft crede che WebGL sia pericoloso. Si vocifera
vogliano implementare una loro libreria GL.
http://blogs.technet.com/b/srd/archive/2011/06/16/webgl-considered-harmful.aspx
38. Figo ma... dove mi documento?
Salvatore Laisa moebiusmania@gmail.com - Mohole Lab
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 (http://html.adobe.com) .
Le specifiche delle proposte sono comunque disponibili sul sito del
W3C.
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. “This is for everyone”
Salvatore Laisa moebiusmania@gmail.com - Mohole Lab
Tim Berners Lee durante la cerimonia di apertura delle Olimpiadi di Londra 2012