Il tuo browser non supporta questa presentazione quindi ti verrà mostrata una versione semplificata.

Per una visualizzazione ottimale dei contenuti usa Chrome, Safari o Firefox.

Taggers @ work!
Web programming
for tablet & smartphone

 

Sviluppare siti web compatibili con i nuovi dispositivi grazie ad HTML5 e CSS3.

 

 

 

a cura di Daniele Martini
www.danielemartini.it/IF2012

Perchè preoccuparsi del mobile?

 

In Italia oltre 25'000'000 di persone possiedono uno smartphone e circa 2'500'000 possiedono un tablet.

 

Il tempo medio di navigazione da mobile è di 7,9 ore a settimana per utente.

 

Mediamente, circa il 10% delle visite proviene da dispositivi mobile.

 

Queste cifre sono in netta crescita.

Elenco degli argomenti di oggi.

 

1) HTML 5: cosa, come e quando?

 

HTML 5 non è un qualcosa di completamente nuovo. La maggior parte delle specifiche deriva da HTML 4 e da XHTML 1.0

HTML 5 non è ancora qualcosa di definitivo e le sue specifiche crescono e cambiano giorno per giorno.

Spesso vengono accomunati ad HTML5 tante nuove funzionalità, effetti grafici o script tipici delle pagine web più moderne. In realtà non tutto questo è HTML5.

Non tutte le specifiche di HTML 5 vengono supportate attualmente da tutti i browser. Spesso sono necessarie delle strategie per la compatibilità e soprattutto è necessario considerare sempre le vecchie versioni dei browser.

A Febbraio 2011 è stato annunciato dal WWW Consortium (W3C) che entro Luglio 2014, HTML 5 verrà raccomandato ufficialmente come standard nel mondo dello sviluppo web.
Fin da subito i browser più noti si sono adoperati per supportare HTML5 viste le sue enormi potenzialità, compreso Internet Explorer 9 che in passato è sempre stato ritroso a seguire gli standard proposti.
 

Audio

 

Come è stato per le immagini nel 1994, adesso il TAG <audio> diventa nativo, e quindi da adesso possiamo inserire musica nelle pagine web semplicemente così:

<audio src="musica.mp3" controls></audio>



Provalo: e poi vedi altre specifiche

Video

 

Anche per il <video> è previsto un supporto nativo, vediamo un esempio semplificato:

<video src="rain.mp4" controls width="480" height="360"></video>



In realtà le cose sono leggermente più complesse al momento... vedi altre specifiche

Web Semantico & Input Form

 

HTML5 è stato reso più snello e veloce da caricare per i dispositivi

Esempio pagina base html: prima - dopo.

HTML5 presenta diverse funzionalità, alcune di esse sono native, altre sono di solito accomunate ad HTML5 anche se in effetti sono delle estensioni che necessitano componenti esterni sviluppate ad esempio in jQuery.

Geolocation & More...

 

Tra le nuove caratteristiche che solitamente si accomunano ad HTML5 abbiamo:


Come detto precedentemente, queste funzionalità sono sviluppate mediante API esterne ad HTML5, spesso sfruttando jQuery e framework avanzati.

e adesso passiamo a:

CSS3*

* funzionalità e novità

Questa presentazione per esempio
si ispira al concetto di prezi.com
ma è sviluppata grazie alle funzionalità transforms e transitions di CSS3 e può quindi essere visualizzata su tutti i browser più moderni.

(...guarda un esempio di presentazione "Prezi")

posso esprimere grandi concetti

o piccole idee

agendo su posizione, rotazione e dimensione di qualsiasi canvas.

come si fa?

use the source, Luke!
<div id="source" class="step" data-x="6300" data-y="2000" data-rotate="20" data-scale="4">
<p>come si fa?</p>
<q>use the source, Luke!</q>
</div>

e un'altra cosa...

avete notato che posso usare il 3D*?

* Inspired to impress.js ;)

ma procediamo per ordine...
torniamo ai CSS3:

Animazioni CSS3

 

Possiamo creare un'animazione tramite keyframes e CSS

 

Compatibilità con browser: 47,1%.
Non compatibile con Explorer ed Opera

 

Esempio (campane)

Esempio (sunrise)

 

Usa Modernizr per verificare la compatibilità del codice con il browser in uso.

Utilizza sempre strategie di Fallback.

In questo caso un'animazione alternativa jQuery o Flash.

Gradienti CSS3

 

Grazie alle caratteristiche RGBA, HSL, HSLA si possono creare gradienti lineari e radiali direttamente da CSS

 

Compatibilità browser GRADIENTI: 55,5% (no I.E.)
Compatibilità browser OPACITA': 95,7%
Compatibilità browser COLORI: 67,1%

 

Tutorial (gradienti)

Demo (css generator) | Sfondi multipli e Pattern

 

Una strategia di Fallback è quella di mettere un'immagine già pronta... il vantaggio? Chi supporta CSS3 non avrà bisogno di caricarla e la navigazione risulterà più veloce.

Ombre CSS3 (shadows)

 

Possiamo creare ombre interne o esterne per i box mentre solo ombre esterne per i testi.

 

Compatibilità BOX shadows: 65.09%
Compatibilità TEXT shadows: 57.57%

 

Esempio (box shadows generator)

Esempio (text shadows generator)

 

Per le ombre interne ai box, usare la proprietà "inset"
box-shadow: inset 3px 2px 5px #cccccc;

CSS3 Transform (2D e 3D)

 

Le trasformazioni CSS si dividono in 2D e 3D e, insieme a transitions ci consentono di creare fantastiche animazioni senza bisogno di ricorrere a script esterni. Solo puro CSS.

 

Compatibilità transform 2D: 72.99% | 3D: 48.39%
** Attenzione: queste percentuali aggiornate le trovate su caniuse.com.

 

Esempio 2D: Slideshow con Trasform

Esempi 3D: Confezione 3D - Locandine - Box and Ball - Fiocchi

 

Guide: 2D Transform - 2D Transform and Transitions

CSS3 Transitions

 

Le transizioni sono simili alle animazioni, ma sono più semplici da usare... richiedono meno codice e sono più intuitive. Rispetto ad animations però non danno un controllo totale sulle proprietà da animare.

 

Compatibilità browser: 56.68%

 

I browser che non supportano le transizioni rischiano di effettuare il cambio di proprietà (per esempio cambio posizione, rotazione, cambio colore, dimensione, ecc..) senza passaggi intermedi e quindi effettuare un cambio "di scatto". Se l'animazione è fondamentale per la corretta visualizzazione, è meglio usare effetti di script (es:jQuery).

 

Esempio: Generatore Transizioni

Guida: Transitions, Transforms and Animation

CSS3 Web Fonts

 

Grazie a @font-face finalmente è possibile utilizzare qualsiasi font nei nostri progetti web senza dover ricorrere a compromessi e a strategie esterne. Il testo sarà sempre:

 

- Accessibile
- Traducibile
- Ricercabile

 

Compatibilità browser: 93.53%

 

Esempio: Sito di Design

Come si implementa: Istruzioni per l'uso...

CSS3 Web Fonts 2/2

 

@font-face {   
        font-family: 'Tagesschrift';   
        src: url('tagesschrift.ttf'); 
}
h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }

 

Riferimenti completi: Guida Rapida | Generatore codice massima compatibilità

 

Compatibilità browser: 93.53%

 

I migliori siti per i Web Fonts: Typekit | Fonts.com | Google Fonts | Mobile Font Fonts

CSS3 Media Queries

 

Il meccanismo che consente di creare siti web "reattivi" ovvero in grado di adattare il proprio layout al dispositivo che lo sta consultando.

 

Vediamo subito qualche esempio:

 

- Blog

- Sito Web

- Altro Sito Web

 

Negli esempi indicati, provate a stringere ed allargare le dimensioni della finestra del browser!

CSS3 Media Queries: Come.

 

@media screen and (max-width: 980px) { 
/* regole CSS classiche */
... }

 

@media (min-width:500px) {

		/* regole CSS classiche */
		...
}

 

Le media queries non si applicano solo alla larghezza ma anche ad altre proprietà del dispositivo come ad esempio i colori del display o il suo orientamento. Una guida più completa potete trovarla qui.
Inoltre le regole possono essere separate in diversi fogli di stile e importati solo "al bisogno":

 

CSS3 Media Queries: Esempio.

 

import stili generali (con metodo HTML)

 

<link rel="stylesheet" type="text/css"  href="stile_base.css" />
      

 

import delle varianti (con metodo CSS)

 

@import url(pc-low-res.css) screen and (max-width:1024px);

@import url(tablet-hd.css) screen and (max-width: 980px);

@import url(tablet.css) screen and (max-width: 650px);

@import url(cellulari.css) screen and (max-width: 560px);

 

Separando i file evito il caricamento di codice non necessario.

Sviluppo Progressivo VS Degradazione Elegante

 

Due tecniche per utilizzare media queries che hanno i suoi pro e contro.

 

L'ideale per ottimizzare la navigazione mobile è probabilmente la prima soluzione a discapito però di una progettualità più complessa.

 

Una possibile alternativa valida alle media queries è data dall'uso di Framework CSS per la creazione di layout fluidi come ad esempio LESS o SASS.

Domande?

GRAZIE*

* a chi ha resistito fino a qui... :)

Daniele Martini

Replay?

Utilizza le freccette per scorrere le pagine -->