moebiusmania@gmail.com - Mohole Lab

Salvatore Laisa

Cosa ci sarà dopo i CSS3? - Reprise

moebiusmania@gmail.com - Mohole Lab

Salvatore Laisa

Cosa ci sarà dopo i CSS3? - Reprise

2006

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

About Me

2007 2008 2010 2011

@moebiusmaniahttp://www.salvatorelaisa.net

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

Reprise?

foto di @veinerve - Codemotion Venezia, Novembre 2012

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

Di cosa parliamo oggi

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

Dove siamo stati

Esisteva solo il contenuto HTML, l’aspetto veniva gestito unicamente dal browser e dalle impostazioni dell’utente (es: lo zoom del testo).

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

In principio...

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.

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

<font> time!

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.

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

E nascono i CSS

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.

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

I layout tabellari

Yahoo - 2002 circa

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.

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

Vogliamo il bis

CSS Zen GardenDave Shea

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:

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

Una nuova professione

è nato il web design

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

Dove siamo

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.

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

5 years in a lifetime

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.

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

Il web delle webapps

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.

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

Troppo hype?

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.

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

I tablet e la consacrazione di HTML5

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...

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

Cosa c’è veramente di nuovo?

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.

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

Ma quando?

http://www.w3.org/TR/2012/WD-html51-20121217/

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

Dove stiamo andando

Tab Atkins, CSS Working Group, 5 settembre 2012

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

Titolo slide

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.

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

Ma ho letto “Selectors Level 4” da qualche parte

• 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ù :)

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

Cosa significa per noi

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

Let’s see the future (of CSS)!

I CSS Media Queries ci permettono di “leggere” le dimensioni degli schermi... di tutti gli schermi non solo quelli mobile!

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

Responsive oltre il mobile

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).

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

Editoria su web: Regions (1/2)

Attualmente testabile solo su IE10 (-ms-) e Chrome Nightly (-webkit-) attivando una flag

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

Editoria su web: Regions (2/2)

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

Editoria su web: Exclusions (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).

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

Editoria su web: Exclusions (2/2)

Si utilizzano tracciati SVG per creare le forme. Nessun browser compatibile se non Chrome Canary con le flags sperimentali abilitate.

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/

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

Editoria su web: Pagination Templates

Sarà possibile applicare i classici filtri grafici direttamente da CSS, come:

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

Filter effects (1/3)

• sfocatura (blur)

• luminosità (brightness)

• saturazione

• ombre esterne (drop shadow)

• e alcuni altri...

PS: e naturalmente.... sono animabili!...

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

Filter effects (2/3)

Per “giocare” e sperimentare in maniera semplice con i nuovi filtri CSS la Adobe ha creato un tool online Filter Lab.

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

Filter effects (3/3)

Forse la parte più cool! Creare effetti cinematografici molto avanzati su qualunque elemento della pagina.

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

Custom filters (ex CSS Shaders - 1/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 di scripting chiamato OpenGL Shading Language (GLSL) , non proprio simile al CSS...

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

Custom filters (ex CSS Shaders - 2/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).

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

Custom filters (ex CSS Shaders - 3/3)

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.

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

La (solita) bella notizia

http://blogs.technet.com/b/srd/archive/2011/06/16/webgl-considered-harmful.aspx

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.

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

Figo ma... dove mi documento?

GRAZIE!moebiusmania@gmail.com - Mohole LabSalvatore Laisa

in conclusione...

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

Tim Berners Lee durante la cerimonia di apertura delle Olimpiadi di Londra 2012

moebiusmania@gmail.com - Mohole LabSalvatore Laisa

“This is for everyone”