SlideShare a Scribd company logo
1 of 104
mobile
User Interface Design
CHISONO
‣ Simone Viani
‣ Informatica / Master Web & Multimedia
‣ Head of Interface Development @ DigitasLBi
‣ t flik185 / g simone.viani@gmail.com
.
‣ presentazione
‣ il contesto
‣ le performance
‣ html5
‣ CSS3
‣ javascript
‣ sass
‣ app design & dev
Di cosa
parleremo
2009
2015
*ComScore Survey 2012
1.9 miliardi
800 milioni
2009
2015
mobileinternet desktopinternet
1.4 miliardi
1.6 miliardi
I dati indicano chiaramente un mercato mobile (smartphone / tablet)
in continua crescita
IlContesto
OS 2013
Android 66%
iOS 20%
Symbian 5%
Blackberry 8%
Windows Phone 3%
Percentuale di diffusione dei principali OS mobile a livello mondiale
IlContesto
Il mondo mobile occupa ed occuperà una fetta sempre crescente di mercato, ed è quindi
indispensabile progettare per questo tipo di dispositivi.
Le strade possibili sono principalmente:
‣ Web App Responsive
‣ Web App Dedicata (M-site)
‣ App ibrida (html+contenitore nativo) - es. PhoneGap
‣ App nativa
IlContesto
Una delle differenze principali tra mondo mobile e desktop di cui bisogna tenere sempre
conto quando progettiamo e sviluppiamo è la
(e quindi ridotte performance) che i dispositivi mobile hanno rispetto ai computer desktop.
Ogni scelta progettuale (in qualsiasi fase) dovrebbe sempre tenere conto dei suoi
impatti sulle performance.
IlContesto
ridottacapacitàhardware
Le
Performance
Le performance sono uno dei fattori principali
che incidono nella scelta del tipo di
applicazione da sviluppare.
Leperformance
webapp
htmlcssjs
appnativa
objective-c...
appibrida
web+native
giranonelbrowserdel
dispositivo
limitiaccessoallerisorseHWe
SWdeldispositivo
offrireilmassimointerminidi
userexperience-guipiùreattiva
essendoscrittaincodice
macchina
libertàtotaledisfruttareHWe
SW+massimeperformance
GirainunaWEBVIEW-Accessoad
HWmaGUInonnativa:User
experiencemenoreattivaSvilupporapido+update
immediati
Sviluppolento+update
complessi
sviluppopiùrapidorispettoad
appnativa
Scaricabiledaappstore
Scaricabiledaappstore
In un’ app ibrida l’interfaccia grafica è scritta in html + css + js.
Leperformance
webapp
htmlcssjs
appnativa
objective-c...
appibrida
web+nativa
È dunque fondamentale cercare di ottimizzare il modo in cui disegniamo e sviluppiamo la
nostra GUI
‣ limitare chiamate HTTP
‣ usare accelerazione GPU dove possibile (css3)
‣ ottimizzare immagini
Leperformance
webapp
htmlcssjs
appnativa
objective-c...
appibrida
web+nativa
È buona norma sviluppare i css seguendo i principi DRY (Don’t Repeat Yourself) e dei CSS
modulari.
Considerare sempre il fattore performance quando scriviamo CSS.
Le animazioni dichiarative (senza scripting) vengono ottimizzate dal browser, che riesce ad
animare agevolmente (60fps) le proprietà translate, scale, rotation e opacity.
Evitare il più possibile di animare proprietà che scatenano browser layout o paint (come
top, left, width, padding, margin…)
Leperformance
http://youtu.be/-62uPWUxgcg
Leperformance
Gli step che compie il browser sono:å
‣ calcolare stili da applicare ad ogni elemento (Recalculate Style).
‣ generare posizione e geometria per ogni elemento (Layout).
‣ riempire i pixel di ogni elemento in layer (Paint Setup and Paint)
‣ disegnare i layer a video (Composite Layers)
Per ottenere animazioni fluide (60fps) occorre limitare il più possibile il lavoro al browser, e dunque cambiare
possibilmente solo proprietà che intervengono durante la fase di Compositing (transform e opacity).
http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
Leperformance
width height
padding margin
display border-width
border top
float text-align
font-family font-size
overflow line-height
vertical-align right
bottom min-height
Ecco alcune proprietà che scatenano l’evento Layout del browser:
Leperformance
color border-style
visibility background
background-position background-image
background-repeat background-size
box-shadow border-radius
Ecco alcune proprietà che scatenano l’evento Paint del browser:
Leperformance
Animare in Javascript vs. animare in CSS (transition & animation)
Javascript ci dà un grande controllo sull’animazione, attraverso vari comandi come
animationStart, animationEnd, AnimationPlayState (“pause” / “running”), e permette di
creare effetti complessi come il parallasse.
Il suo principale limite è quello di “girare” nel thread principale del browser, lo stesso usato
per il calcolo degli stili degli elementi, la fase di Layout, Painting ed altri javascript. Questo
può portare l’animazione a perdere qualche frame, e risultare quindi poco fluida.
L’approccio CSS viceversa ha il vantaggio di essere ottimizzato dal browser senza pesare sul
thread principale.
Il grande svantaggio sta invece nel fatto che manchi della potenza espressiva di javascript,
rendendo animazioni complesse molto difficile da gestire.
Una buona app mobile deve focalizzarsi su una funzionalità di base ed essere veloce ed
affidabile, prima ancora di essere “bella”.
La user experience è fortemente legata alle performance, e di conseguenza anche il
successo di un’app.
Le scelte di design influiscono su
‣ funzionalità
‣ contenuti
‣ interazioni
‣ grafica
Leperformance
performance ( non è solo responsabilità dello sviluppo! )
Un’esperienza utente fluida non è solo un
esercizio di programmazione, ma è anche un
esercizio chiave di design
La percezione delle performance si basa essenzialmente su:
‣ tempi di avvio
‣ comportamento al caricamento della pagina
‣ fluidità delle transizioni e animazioni
‣ errori
‣ tempi di attesa
Leperformance
Leperformance
.Grafica
.contenuti
.interazioni
.DB
.API
.dispositivo
.Piattaforma
.standard
(LTE,3g,…)
APP back-end
mobile rete
Fortemente influenzati
dalle decisioni di design e
sviluppo
Limiti fisici da tenere
sempre in considerazione
Grossi contenuti + caricati da back-end su una rete lenta = basse performance
Per ottimizzare le performance nel processo di design e sviluppo è utili focalizzarsi su:
‣ Identificare le principali USER STORIES
‣ Ottimizzare elementi grafici e flussi UI
Leperformance
HTML5
L’HTML5 è l’ultima versione dell’ hyper text markup language proposta dal W3C per la
prima volta intorno al 2008.
Rispetto al suo predecessore, HTML4.01, definito per la prima volta nel 1999, la nuova
versione è stata sviluppata considerando:
‣ Maggiore semplicità e logica nella creazione delle pagine
‣ Necessità di ridurre i plugin esterni (flash), facilitando nello 

stesso tempo la visualizzazione di contenuti multimediali
‣ Necessità di creare applicazioni web, non più semplici pagine web
‣ Definire un set di API che permetta un’interazione tra tag, javascript ed il DOM
(Document Object Model)
HTML5
Ad esempio al nuovo tag <video> viene associata un’API con la quale è possibile interagire
con gli oggetti video presenti nel DOM (play, pause, ...)
Metodi: video.play() – video.load() ...
Eventi: oncanplay – onended …
Offset: video.startTime – video.duration ...
HTML5
<video id="unicorn" width="500" height=“500” controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogv" type=“video/ogg”>
<object type="application/x-shockwave-flash" data="__FLASH__.SWF"></object>
</video>
1
2
3
4
5
6
html
JS
Con l’HTML5 la struttura della pagina diventa semantica, grazie anche all’introduzione di
nuovi tag. Eccone alcuni:
<article> - ogni elemento di contenuto “indipendente” dal contesto
<aside> – generalmente destinato a contenuto di secondaria importanza
<header>, <footer> – possono ripetersi più volte in una pagina, riferendosi a sezioni diverse
<nav> – definisce il markup relativo alla navigazione del sito
<section> – definisce una sezione, un capitolo o comunque un elemento con una propria intestazione
<audio>, <video> – gestiscono audio e video senza necessità di plugin
<canvas> – permette di visualizzare grafica attraverso linguaggi di scripting (come javascript)
HTML5
Tag più semantici rispetto alla versione precedente di html
HTML5
<div id=“header”>
<div id=“nav”>
<div id=“content”>
<div id=“footer”>
<div id=“side”>
<header>
<nav>
<article>
<footer>
<aside>
Come abbiamo già accennato, HTML5 porta con se più di un semplice set di nuovi elementi
html. Definisce anche un insieme di funzionalità programmabili attraverso specifiche APIs,
tra cui
Geolocation (navigator.geolocation.getCurrentPosition())
Drag’n’drop (dropContainer.addEventListener(…))
Storage (session/local - sessionStorage.getItem(‘test’))
Offline (file .manifest)
HTML5
CSS3
I CSS3 sono la terza versione dei Cascading Style Sheets proposta dal W3C che, come
l’HTML5, nascono con lo scopo di semplificare ed indirizzare in maniera più efficace i
problemi legati allo sviluppo web.
Con i CSS3 abbiamo:
‣ Nuovi selettori, pseudo-elementi / classi, e proprietà
‣ Divisione in moduli univoci per proprietà (es. layout)
‣ Ogni browser può implementare le specifiche CSS3 per moduli
‣ Il processo di implementazione per un browser è più veloce
CSS3
La precedente versione (CSS2.1) era basata su di un’unica specifica divisa in “sezioni”
corrispondenti alle varie componenti del css formatting model.
La modularizzazione dei CSS3 invece porta ciascuna delle sezioni ad avere una propria
specifica: questo significa che il processo di implementazione e standardizzazione di ogni
modulo è indipendente e può quindi procedere a velocità diverse. Molti moduli sono
ancora in versione draft, mentre altri sono divenuti standard.
CSS3
I moduli più comuni (non in stato di draft)
‣ Selectors
‣ Backgrounds and Borders
‣ Media Queries
‣ Colors
‣ CSS Transitions
‣ CSS Translations
‣ CSS Animations
‣ Multi-column Layout
CSS3
Se prendiamo come esempio il modulo dei selettori:
‣ element [digitas^=‘lbi’] (match elemento con attributo) 

‣ :nth-child(n) (match l’ennesimo elemento figlio) 

‣ :last-child (match ultimo figlio) 

‣ :checked(match element se in stato di checked) 

‣ elementA ~ elementB (B segue A in un qualsiasi punto) 

CSS3
Una delle specifiche con maggiori novità è quella riguardante gli sfondi. Adesso è possibile
avere
‣ sfondi multipli*:
1
2
3
4
5
element {!
background-image:url(primo.png),url(secondo.png);!
background-position: center bottom, left top;!
background-repeat: no-repeat;!
}!
* supporto browser: Firefox(3.6+), Safari/Chrome(1/1.3+), Opera (10.5+), IE (9+)
CSS3
Alcune nuove proprietà relative al background sono:
‣ background-clip
Determina l’area di espansione dello sfondo:
CSS3
background-clip:!
content-box!
background-clip:!
padding-box
background-clip:!
border-box!
(default)
‣ background-origin
Determina il punto di ancoraggio dello sfondo
CSS3
background-
origin:!
content-box!
background-
origin:!
padding-box
background-
origin:!
border-box!
(default)
‣ background-size
1
2
3
4
5
background-size: 200px;!
background-size: 200px 100px;!
background-size: 200px 100px, 400px 200px;!
background-size: auto 200px;!
background-size: 50% 25%;!
background-size: contain;!
background-size: cover;!
!
6
7
NB: i valori espressi in % si riferiscono allo spazio a disposizione per lo sfondo, non
all’immagine.
CSS3
Inoltre sono state aggiornate anche le proprietà come
‣ background-repeat (“space” e “round”)
‣ background (aggiunte size e origin)
CSS3
Il modulo delle media queries dei CSS3 è di fatto la logica estensione dei media types
conosciuti da CSS2, ed utilizzati, per esempio, per servire i fogli di stile dedicati alla stampa.
Le media queries permetto di servire particolari stili non solo in base al tipo di dispositivi di
fruizione, ma anche a diverse caratteristiche degli stessi (larghezza viewport, densità di pixel,
…)
1
2
3
@media print {!
background: none;!
}!
CSS3
Pensate alle media queries come uno strumento con cui applicare il “costrutto”
se questa proprietà, allora questo stile
Anche in questo caso la compatibilità con Explorer parte dalla versione IE9+.
Esisitono diverse soluzioni js per rendere le media queries compatibile con versioni
precedenti, come ad esempio Respond.js (https://github.com/scottjehl/Respond ).
CSS3
Tecnicamente consiste nella dichiarazione di un tipo di media e di zero o più espressioni
che verifichino le condizioni di validità o non validità delle caratteristiche di un certo media.
1
2
3
@media media_type | op logici | caratteristiche media {!
...!
}!
1
2
3
<link rel="stylesheet"!
media="media_type |op logici |caratteristiche media"
href="specifico.css" />!
1
2
@import url(specifico.css) !
media_type | op logici | caratteristiche media!
CSS3
Caratteristica definizione
width larghezza ”browser” (min/max)
height altezza ”browser” (min/max)
device-width larghezza ”schermo” (min/max)
device-height altezza ”schermo” (min/max)
orientation landscape / portrait
‣ media_type = screen / print / …
‣ op logici = and/ or /, (or)
‣ caratteristiche media
CSS3
La tecnica responsive in 5 passi
Il numero sempre crescente di differenti device (e risoluzioni) con i quali oggi siamo in grado
di navigare su Internet, rendono impossibile produrre design ottimali per tutte le
visualizzazioni.
E’ quindi necessario un approccio più “fluido”
responsive
Aggiungere il Viewport meta taG
responsive
1
Per attivare l’uso delle media queries, inserire nell’ <head> del documento html
<meta name="viewport" content="width=device-width, initial-scale=1">
Attivare il box model più adatto
responsive
2
content
padding
border
margin
1
2
3
4
5
*, *:before, *:after {!
-moz-box-sizing: border-box;!
-webkit-box-sizing: border-box;!
box-sizing: border-box;!
}!
Attivare il box model più adatto
responsive
2
senzabox-sizing:border-box conbox-sizing:border-box
Convertire px in %
responsive
3
Partendo dai layout grafici è utili convertire le dimensioni degli oggetti da px a valori
percentuali
risultato = (target / contesto) * 100
Convertire px in %
responsive
3
contesto
800px
target
600px
= 75%
target
200px
= 25%
Creare un html basato su colonne
responsive
4
Le percentuali calcolate precedentemente verranno usate come punto di partenza per la
costruzione della griglia che comporrà la pagina.
1
2
3
4
.column {!
float: left;!
margin-left: 5%;!
}!
.column:first-child {!
margin-left: 0;!
}!
5
6
7
1
2
3
4
5
<div class="container">
<div class="column side"></div>
<div class="column main-content"></div>
</div>
...
Creare un html basato su colonne
responsive
4
.column.side .column.main-content
1
2
3
4
.side {!
width: 25%;!
}!
.main-content {!
width: 70%;!
}!
5
6
7
Gestire le variazioni del viewport
responsive
5
Affinchè i contenuti possano adattarsi in maniera ottimale alle variazioni di grandezza del
browser, andiamo ad impostare i breakpoint sui quali lavoreranno le media queries per
servire i css specifici.
1
2
3
4
@media screen and (max-width: 600px) {!
.column.side,!
.column.main-content {!
margin: 0;!
width: 100%;!
}!
}!5
Gestire le variazioni del viewport
responsive
5
.column.side
.column.main-content
CSS3 fornisce un nuovo modo di posizionare e modificare gli elementi tramite la proprietà
transform.
Tale proprietà può lavorare sia in 2 (asse x,y) che 3 (asse x, y, z) dimensioni, ognuna delle quali
ha le proprie proprietà e valori.
La sintassi è la seguente (escludendo i vari browser prefixes):
Transforms
1
2
3
div {!
transform: transform_function( params ) || none;!
}!
!
Transforms
transform2d transform3d
translate(x,y) translate3d(x,y,z)
translate(X) - translate(Y) translate(Z)
scale(x,y) scale3d(x,y,z)
scaleX - scale(Y) scale(Z)
rotate(angolo) rotate3d(x,y,z,angolo)
Prima dei CSS3 il principale modo per spostare un elemento in una pagina era quello di
utilizzare position:absolute.
Adesso è possibile utilizzare la funzione translate(), che offre sensibili vantaggi da un punto
di vista di performance, come vedremo più avanti.
Transforms
1
2
3
div {!
position:absolute; top: 20px; left:10px;!
}!
!
1
2
3
div {!
transform: translate( 10px, 20px );!
}!
!
Un fenomeno interessante è quello del cosiddetto
Un elemento posizionato in absolute si “attacca” in maniera precisa ai pixel, mentre con
translate() possono essere “agganciati” anche sub-pixel, dando un effetto più sfuocato.
Questo fenomeno si nota soprattutto nelle animazioni, che appaiono quindi più “naturali”
usando translate().
Transforms
pixelsnapping
Un’ altro aspetto importante da considerare durante l’utilizzo delle funzioni di transform,
riguarda l’ottimizzazione delle loro performance.
Queste funzioni (ma anche le transitions e le animations che vederemo) di default vengono
eseguite direttamente dal motore di rendering del browser (software).
Si può però forzare l’utilizzo della scheda grafica (GPU), migliorando quindi le performance
generali.
Transforms
Browser come Chrome, Firefox, Safari ed IE9+ attivano l’accelerazione grafica quando:
usiamo transform3d (translate3d – rotate3d …)
transform: translateZ(0)
transform: translate3d(0,0,0)
NB: Chrome e Safari talvolta generano un leggero flickering in presenza di transform CSS. Basta aggiungere queste regole css
Transforms
1
2
backface-visibility: hidden;!
perspective: 1000; !
Le transitions sono di fatto il modo più semplice di implementare un’animazione, senza
(necessariamente) usare javascript.
In CSS3 un’animazione permette di cambiare il comportamento e l’aspetto di un elemento ad
un determinato cambio di stato.
Con le transitions in particolare si anima il passaggio da una stato ad una altro, mentre con le
animations sarà possibile dichiarare più punti di transizione, attraverso i keyframe.
TRANSITIONS
Il modo più semplice per attivare una trasition è usare le pseudo
classi :hover, :focus, :active, :target.
Le proprietà definibili in una transition sono:
‣ transition-property
‣ transition-duration
‣ transition-timing-function
‣ transition-delay
Le 4 proprietà sono esprimibili con una sintassi compatta
TRANSITIONS
1 transition: proprietà durata timing ritardo!
Ogni transition-timing-function ha una curva di bezier associata. La funzione di default (se
non specificata) è linear,
ma è appunto possibile definire qualsiasi funzione utilizzando le curve di bezier.
Altri valori possibili (senza usare le curve) sono
‣ ease-in
‣ ease-out
‣ ease-in-out
Ogni proprietà animata può avere una sua timing-function
TRANSITIONS
In generale è possibile animare tutte le proprietà css che hanno valori intermedi identificabili,
come
‣ width / height
‣ font-size / line-height
‣ sfondi (colore, posizione)
‣ bordi / padding / margin
‣ top / right / left / bottom
‣ opacity
TRANSITIONS
INTEGRARE
1
2
3
4
5
.box {!
background: #8ec63f;!
transition: background 1s linear 0;!
}!
.box:hover {!
background: #f7941d;!
}!
6
7
Se volessimo animare il cambio di colore di sfondo all’hover su di un blocco “.box”
TRANSITIONS
Per costruire animazioni più complesse le transitions da solo non bastano. Per questo motivo
è stato creato il modulo CSS3 delle Animations.
Questo tipo di animazioni si basano sul concetto derivato dall’animazione classica dei
keyframes, che definiscono I punti in cui avviene un cambio di stato.
ANIMATIONS
Ecco come si presenterebbe un’animation con 3 keyframes (0%, 50%, 100%)
ANIMATIONS
1
2
3
4
5
6
7
@keyframes slide {!
0% {!
left: 0;!
top: 0;!
}!
50% {!
left: 305px;!
top: 100px;!
}!
100% {!
left: 610px;!
top: 0;!
}!
}!
8
9
10
11
12
13
14
Le proprietà definibili quando si invoca un’animazione sono:
‣ animation-name
‣ animation-duration
‣ animation-timing-function
‣ animation-delay
‣ animation-iteration-count
‣ animation-direction
‣ animation-fill-mode
‣ animation-play-state
ANIMATIONS
Come si vede la maggior parte delle proprietà sono simili alle proprietà delle transitions, ad
eccezione di
‣ iteration-count: valori numerici (interi) o infinite
‣ animation-direction: normal, reverse, alternate, alternate-reverse
‣ animation-fill-mode: definisce lo stato css a termine dell’animazione. Assume i valori
- none
- forwards: rimangono attivi gli stili di fine animazione (se iteration-count non è pari)
- backwards: torna agli stili attivi prima dell’animazione
- both: alterna forwards e backwards
ANIMATIONS
‣ animation-play-state: permette di cambiare lo stato di un’animazione durante la sua
esecuzione. Può essere
- paused: mette in pausa l’animazione
- running: attiva l’animazione
ANIMATIONS
1
2
3
4
5
6
7
#tech:hover {animation-play-state:paused;}!
!
#tech{!
animation-play-state:running;!
animation: myanim 10s linear infinite;!
}!
!
Ecco un interessante confronto tra animare le proprietà top e left ed usare translate
ANIMATIONS
http://codepen.io/paulirish/pen/nkwKs http://codepen.io/paulirish/pen/LsxyF
Javascript
Con Javascript è possibile creare applicazioni con una metodologia molto simile a quella
della programmazione orientata agli oggetti che troviamo in linguaggi come Java
oppure C++.
Detto in maniera molto semplificata un oggetto è
javascript
un’ entità che può avere dei propri attributi o proprietà (dati) e può
compiere su tali dati determinate azioni, definite attraverso delle
funzioni
Nel linguaggio comune della programmazione ad oggetti (OOP), un oggetto è detto
istanza di una classe
Se volessimo creare un prototipo di un telefonino, la classe servirebbe a definire le
caratteristiche (proprietà) e funzionalità (metodi) comuni a tutti i telefonini.
Istanziando tale classe potremmo definire i vari ‘iphone’, ‘android’, ecc con le proprie
caratteristiche e funzionalità specifiche (nome, marca,…).
javascript
Javascript non ragiona a Classi
ma ad oggetti
javascript
Come abbiamo detto la programmazione ad oggetti possibile con Javascript (JS) presenta
delle differenze rispetto a quella “standard”.
Nell’esempio precedente, per definire la classe Telefonino in JS, non avendo un costrutto per
definire una Class, dovremmo partire da un oggetto.
Per creare un oggetto in Javascript abbiamo due possibilità:
‣ object ‘literal’
‣ ‘instance’ object
javascript
Object ‘literal’
javascript
1
2
3
4
5
var Telefonino = {!
marca : ‘apple’,!
chiama : function() {...},!
sms : function() {...},!
... !
}!
console.log(Telefonino.marca) // apple!
6
7
javascript
Object ‘literal’
A run time è possibile modificare tale oggetto, aggiungendo anche nuove proprietà e
metodi, ma non è possibile definirne un punto di ‘inizializzazione’ tramite un costruttore.
Con questa notazione di fatto creo un “namespace” in cui vivono le proprietà e funzioni
definite al suo interno. Questo oggetto però non può essere “istanziato” altre volte.
Object ‘instance’
javascript
1
2
3
4
5
function Telefonino (marca) {!
this.marca = marca;!
...!
}!
!
// istanzio oggetto!
var iPhone = new Telefonino(‘apple’);!
6
7
javascript
Object ‘literal’
Nel caso di object instance definiamo l’oggetto partendo da una funzione chiamata
costruttore nella quale definiamo le proprietà e le funzionalità che ogni istanza (es. oggetto
iphone) porterà con se.
La parola riservata new permette di istanziare un oggetto (funzione), di fatto permettendo di
personalizzarlo.
Posso in questo modo definire i vari tipi di telefonini (iphone, android,…) partendo da una
“base comune” a tutte le sue istanze.
javascript
L’aspetto interessante dell’instance object è che ogni modifica di proprietà è locale all’istance
stessa, e l’oggetto “base” (es. Telefonino) non viene di fatto mai cambiato.
In questo senso si torna al concetto di Classe dell’OOP, in cui posso definire una sola volta il
“core” di un elemento, e poi lavorare e personalizzare le sue singole istanze, senza dovermi
preoccupare di ridefinire ogni volta tutte le proprie caratteristiche.
javascript
Quando scriviamo una funzione in questa maniera
stiamo di fatto definendo una funzione che si chiamerà automaticamente.
Senza le parentesi esterne infatti avremmo solo una definizione di funzione, che deve essere
poi esplicitamente chiamata.
1
2
3
(function () {!
...!
})();!
javascript
Un altro concetto preso dal mondo OOP, l’ereditarietà, in JS si differenzia per il fatto di essere
basato sui prototipi e non sulle classi.
Ogni oggetto in JS ha una proprietà interna [[Prototype]] che viene usata per estendere un
oggetto esistente.
1
2
3
Telefonino.prototype.getVersione = function() {!
...!
}!
javascript
Tutte le caratteristiche e funzioni di un oggetto possono essere richiamate con la sintassi
obj.propName || obj[‘propName’]
ed è possibile verificarne l’esistenza attraverso
obj.hasOwnProperty(‘propName’)
javascript
Se volessimo quindi estendere l’oggetto Telefonino basterà creare un nuovo oggetto con le
proprie caratteristiche particolari e farlo derivare da Telefonino.
In questo modo ogni proprietà (anche nuova) di Telefonino verrà ereditata da Tablet.
1
2
3
4
5
var Tablet = function (altro) {!
this.altro = altro;!
...!
}!
!
// Eriditarietà...!
Tablet.prototype = new Telefonino();!
6
7
SASS
Sass, insieme a Less ed altri come Stylus o Switch CSS, è un cosiddetto preprocessore CSS,
nato con il preciso scopo di rendere la creazione dei fogli di stile più dinamica, strutturata e
produttiva.
Questi linguaggi sono di fatto un’ estensione dei CSS che permette di usare nei fogli di stile
alcuni paradigmi della programmazione, oltre a fornire un modo strutturato e scalabile di
scrivere CSS.
SASS
Una delle filosofie dietro a Sass, ed in generale a tutti i linguaggi di preprocessore css, è
quella del DRY (Don’t Repeat Yourself), un tema che sta alla base dei linguaggi di
programmazione.
Con i css standard capita infatti spesso di dover ripetere inutilmente frammenti di codice, che
di fatto aumentano solo il peso del file e rendono più complesse eventuali update e
modifiche.
SASS
1
2
3
4
5
.titolo-grande {!
font-family: arial, sans-serif;!
color: #000;!
font-weight: 800;!
}!
.titolo-piccolo {!
font-family: arial, sans-serif;!
color: #000;!
font-weight: 400;!
}!
6
7
10
8
9
Esistono due sintassi di Sass
‣ scss la più usata e recente, superset dei CSS3 (es. style.scss)
‣ sass più vecchia che deriva da HAML (es. style.sass)
La principale differenza sta nel modo di identificare i blocchi di css.
Nel caso di scss si usano parentesi { } e ; mentre sass usa l’indentazione.
SASS
Sass permette di lavorare con entrambe le sintassi all’interno dello stesso progetto
SASS
1
2
3
4
5
$font: ‘Helvetica’, sans-serif!
$gray:#999999!
!
body!
font: 100% $font!
color: $gray!
!
6
1
2
3
4
5
$font: ‘Helvetica’, sans-serif;!
$gray:#999999;!
!
body {!
font: 100% $font;!
color: $gray;!
}!
!
6
7
sintassiSASS sintassiSCSS
Un file CSS3 valido è anche un file
scss valido.
SASS
Un file Sass non viene direttamente interpretato dal browser, ma deve essere pre-compilato
per ottenere il relativo file CSS
Occorre quindi avere sulla propria macchina un compilatore Sass,
che verrà eseguito ad ogni modifica al file .scss (.sass)
SASS
compilatore
style.scss style.css
Vediamo ora più nel dettaglio il linguaggio Sass.
Tra i vari concetti presi dal mondo della programmazione troviamo
‣ variabili
‣ mixin
‣ operazioni & funzioni
‣ ereditarietà
‣ nesting
SASS
VARIABILI
Una variabile in SASS viene definita con un identificativo alfanumerico preceduto da $
SASS
1
2
$font-size: 12px;!
$testo-giallo: #ffcc00;!
body {color: $testo-giallo; font-size: $font-size;}!3
Le variabili possono essere usate anche all’ interno di selettori o nomi di proprietà, utilizzando
l’interpolazione #{} che troviamo anche in linguaggi come Coffeescript.
SASS
1
2
$horiz: left;!
.rounded-top-#{$horiz}-radius: 10px;!
Un altro modo di definire variabili in Sass è il cosiddetto guarded assignment, che permette
di assegnare un valore ad una variabile solo se non è già stato definito,usando la parola
riservata !default
SASS
1
2
3
4
5
$module_height: 18px;!
!
$module_height: 20px !default;!
$module_bgcolor: #ccc !default;!
.module {!
height: $module_height; //height: 18px;!
}!
6
7
Questo comportamento risulta utile nel caso volessimo sovrascrivere dei valori particolari di
variabili di un framework, per esempio di griglie, che stiamo usando:
NB: É importante dichiarare le variabili prima di importare il modulo su cui vogliamo
effettuare l’override
SASS
1
2
$blueprint-grid-columns = 12;!
@import “blueprint/grid”;!
MIXIN
I mixin, in Sass, sono concettualmente simili alle funzioni nella misura in cui entrambi
permettono di definire un blocco di codice richiamabile in parti diverse del file .scss (o .sass)
La differenza sta nel fatto che un mixin viene chiamato con la direttiva @include ed inietta il
suo codice nel punto della chiamata, mentre una funzione viene chiamata direttamente con il
proprio nome e restituisce un valore
SASS
Un mixin viene definito con la direttiva @mixin e, come detto, richiamato con @include
SASS
SORGENTE compilato
1
2
3
4
5
@mixin rounded($side, $radius: 10px) {!
-webkit-border-#{$side}-radius: $radius;!
border-#{$side}-radius: $radius;!
}!
!
!
div {@include rounded(top, 5px)}!
6
7
1
2
3
4
div {!
-webkit-border-top-radius: 5px;!
border-top-radius: 5px;!
}!
OPERAZIONI
Con Sass è possibile valorizzare proprietà css con i valori restituiti da operazioni matematiche
e funzioni
SASS
1
2
3
4
5
$num-items: 10;!
$item-width: 100px;!
$default-bg: #ffcc00;!
ul {!
width: $num-items * $item-width;!
background-color: lighten($default-bg, 30%)!
}!
6
7
Simile ad un mixin, una funzione restituisce un unico valore e si invoca direttamente con
il nome ed eventuali parametri.
Il valore resituito può essere un numero, una stringa, un colore, un booleano, una lista, una
mappa e null.
SASS
1
2
3
4
5
@function calc-percent($target, $container) {!
@return ($target / $container) * 100%;!
}!
!
div {!
width: calc-percent(650px, 1000px);!
}!
6
7
Sass supporta anche i costrutti if/else, for, while ed each provenienti dalla
programmazione attraverso le direttive @if/@else, @for, @while ed @each.
SASS
1
2
3
4
5
$lista : Simone Laura Fabio Valeriano Lorena;!
!
@each $nome in $lista {!
.photo-#{$nome} {!
background: url(‘img/#{$nome}.jpg’)!
}!
}!
6
7
EREDITARIETÀ
Il concetto di ereditarietà in Sass permette di estendere e specializzare una classe attraverso
la direttiva @extend
SASS
1
2
3
4
5
.error {!
border: 1px solid #fdd;!
background: #fff;!
}!
.error-panic {@extend .error; border-width: 4px;}!
6
NESTING
Un’ importante novità introdotta da linguaggi come Sass, rispetto ai normali CSS, è il
concetto di nesting del codice, che ci permette di evitare inutili e poco performanti
ripetizioni nella scrittura dei selettori.
SASS
1
2
3
4
5
li {!
a {!
color: #000;!
&:hover {color: red}!
}!
}!6
HTML5
CSS3
&
GRAZIE
buonlavoro
&

More Related Content

Viewers also liked

Agile Ux Design in pratica
Agile Ux Design in praticaAgile Ux Design in pratica
Agile Ux Design in praticaLuca Mascaro
 
Reporting services
Reporting servicesReporting services
Reporting servicesMarco Pozzan
 
Smau milano 2012 arena social media massimo-grava
Smau milano 2012   arena social media massimo-gravaSmau milano 2012   arena social media massimo-grava
Smau milano 2012 arena social media massimo-gravaSMAU
 
Html5 e css3 nei miei progetti: cosa ho fatto
Html5 e css3 nei miei progetti: cosa ho fattoHtml5 e css3 nei miei progetti: cosa ho fatto
Html5 e css3 nei miei progetti: cosa ho fattoRocco Passaro
 
HTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesigner HTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesigner Matteo Magni
 
HTML5, CSS3 e JavaScript: Web app per tutti gli schermi by Marco Casario
HTML5, CSS3 e JavaScript: Web app per tutti gli schermi by Marco CasarioHTML5, CSS3 e JavaScript: Web app per tutti gli schermi by Marco Casario
HTML5, CSS3 e JavaScript: Web app per tutti gli schermi by Marco CasarioCodemotion
 

Viewers also liked (9)

Agile Ux Design in pratica
Agile Ux Design in praticaAgile Ux Design in pratica
Agile Ux Design in pratica
 
Less is more
Less is more  Less is more
Less is more
 
Reporting services
Reporting servicesReporting services
Reporting services
 
Smau milano 2012 arena social media massimo-grava
Smau milano 2012   arena social media massimo-gravaSmau milano 2012   arena social media massimo-grava
Smau milano 2012 arena social media massimo-grava
 
CSS3
CSS3CSS3
CSS3
 
UX design agile
UX design agileUX design agile
UX design agile
 
Html5 e css3 nei miei progetti: cosa ho fatto
Html5 e css3 nei miei progetti: cosa ho fattoHtml5 e css3 nei miei progetti: cosa ho fatto
Html5 e css3 nei miei progetti: cosa ho fatto
 
HTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesigner HTML5 e Css3 - 1 | WebMaster & WebDesigner
HTML5 e Css3 - 1 | WebMaster & WebDesigner
 
HTML5, CSS3 e JavaScript: Web app per tutti gli schermi by Marco Casario
HTML5, CSS3 e JavaScript: Web app per tutti gli schermi by Marco CasarioHTML5, CSS3 e JavaScript: Web app per tutti gli schermi by Marco Casario
HTML5, CSS3 e JavaScript: Web app per tutti gli schermi by Marco Casario
 

Similar to Mobile UI Design

Come sviluppare applicazioni cross device con HTML
Come sviluppare applicazioni cross device con HTMLCome sviluppare applicazioni cross device con HTML
Come sviluppare applicazioni cross device con HTMLSinergia Totale
 
Corso WebApp iOS - Lezione 06: Web Development for iOS Devices
Corso WebApp iOS - Lezione 06:   Web Development for iOS DevicesCorso WebApp iOS - Lezione 06:   Web Development for iOS Devices
Corso WebApp iOS - Lezione 06: Web Development for iOS DevicesAndrea Picchi
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web DesignSimone Viani
 
Session isolation e rendering delle pagine web
Session isolation e rendering delle pagine webSession isolation e rendering delle pagine web
Session isolation e rendering delle pagine webGiacomo Zecchini
 
Come e perché ($) migliorare le prestazioni web - Aprile 2023.pptx
Come e perché ($) migliorare le prestazioni web - Aprile 2023.pptxCome e perché ($) migliorare le prestazioni web - Aprile 2023.pptx
Come e perché ($) migliorare le prestazioni web - Aprile 2023.pptxAndrea Verlicchi
 
Blazor: are we ready for the launch?
Blazor: are we ready for the launch?Blazor: are we ready for the launch?
Blazor: are we ready for the launch?Andrea Agnoletto
 
Come e perché ($) migliorare le prestazioni web.pdf
Come e perché ($) migliorare le prestazioni web.pdfCome e perché ($) migliorare le prestazioni web.pdf
Come e perché ($) migliorare le prestazioni web.pdfAndrea Verlicchi
 
Cert03 70-486 developing asp.net mvc 4 web applications
Cert03   70-486 developing asp.net mvc 4 web applicationsCert03   70-486 developing asp.net mvc 4 web applications
Cert03 70-486 developing asp.net mvc 4 web applicationsDotNetCampus
 
Webperformance, come ottimizzare il tempo di caricamento di una pagina web!
Webperformance, come ottimizzare il tempo di caricamento di una pagina web!Webperformance, come ottimizzare il tempo di caricamento di una pagina web!
Webperformance, come ottimizzare il tempo di caricamento di una pagina web!Stefano Marchisio
 
Web accessibility e legge Stanca
Web accessibility e legge StancaWeb accessibility e legge Stanca
Web accessibility e legge StancaE-labora
 
Sviluppo Web Agile Con MonoRail
Sviluppo Web Agile Con MonoRailSviluppo Web Agile Con MonoRail
Sviluppo Web Agile Con MonoRailStefano Ottaviani
 
... thinking about Microformats!
... thinking about Microformats!... thinking about Microformats!
... thinking about Microformats!Stefano Fago
 
Cert04 70-484 - essentials of developing windows store apps
Cert04   70-484 - essentials of developing windows store appsCert04   70-484 - essentials of developing windows store apps
Cert04 70-484 - essentials of developing windows store appsDotNetCampus
 
Responsive Web Design: 7 Problemi da Evitare – 6^ parte
Responsive Web Design: 7 Problemi da Evitare – 6^ parteResponsive Web Design: 7 Problemi da Evitare – 6^ parte
Responsive Web Design: 7 Problemi da Evitare – 6^ parteFormazioneTurismo
 
Presentazione Web Site
Presentazione Web SitePresentazione Web Site
Presentazione Web SiteWeb Site srl
 

Similar to Mobile UI Design (20)

Come sviluppare applicazioni cross device con HTML
Come sviluppare applicazioni cross device con HTMLCome sviluppare applicazioni cross device con HTML
Come sviluppare applicazioni cross device con HTML
 
Corso WebApp iOS - Lezione 06: Web Development for iOS Devices
Corso WebApp iOS - Lezione 06:   Web Development for iOS DevicesCorso WebApp iOS - Lezione 06:   Web Development for iOS Devices
Corso WebApp iOS - Lezione 06: Web Development for iOS Devices
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Session isolation e rendering delle pagine web
Session isolation e rendering delle pagine webSession isolation e rendering delle pagine web
Session isolation e rendering delle pagine web
 
Come e perché ($) migliorare le prestazioni web - Aprile 2023.pptx
Come e perché ($) migliorare le prestazioni web - Aprile 2023.pptxCome e perché ($) migliorare le prestazioni web - Aprile 2023.pptx
Come e perché ($) migliorare le prestazioni web - Aprile 2023.pptx
 
Blazor: are we ready for the launch?
Blazor: are we ready for the launch?Blazor: are we ready for the launch?
Blazor: are we ready for the launch?
 
Come e perché ($) migliorare le prestazioni web.pdf
Come e perché ($) migliorare le prestazioni web.pdfCome e perché ($) migliorare le prestazioni web.pdf
Come e perché ($) migliorare le prestazioni web.pdf
 
Microsoft Fast - Overview
Microsoft Fast - OverviewMicrosoft Fast - Overview
Microsoft Fast - Overview
 
Cert03 70-486 developing asp.net mvc 4 web applications
Cert03   70-486 developing asp.net mvc 4 web applicationsCert03   70-486 developing asp.net mvc 4 web applications
Cert03 70-486 developing asp.net mvc 4 web applications
 
Wpo extended
Wpo extendedWpo extended
Wpo extended
 
Html5
Html5Html5
Html5
 
Webperformance, come ottimizzare il tempo di caricamento di una pagina web!
Webperformance, come ottimizzare il tempo di caricamento di una pagina web!Webperformance, come ottimizzare il tempo di caricamento di una pagina web!
Webperformance, come ottimizzare il tempo di caricamento di una pagina web!
 
Rich Internet Application
Rich Internet ApplicationRich Internet Application
Rich Internet Application
 
Web accessibility e legge Stanca
Web accessibility e legge StancaWeb accessibility e legge Stanca
Web accessibility e legge Stanca
 
Sviluppo Web Agile Con MonoRail
Sviluppo Web Agile Con MonoRailSviluppo Web Agile Con MonoRail
Sviluppo Web Agile Con MonoRail
 
Html5
Html5Html5
Html5
 
... thinking about Microformats!
... thinking about Microformats!... thinking about Microformats!
... thinking about Microformats!
 
Cert04 70-484 - essentials of developing windows store apps
Cert04   70-484 - essentials of developing windows store appsCert04   70-484 - essentials of developing windows store apps
Cert04 70-484 - essentials of developing windows store apps
 
Responsive Web Design: 7 Problemi da Evitare – 6^ parte
Responsive Web Design: 7 Problemi da Evitare – 6^ parteResponsive Web Design: 7 Problemi da Evitare – 6^ parte
Responsive Web Design: 7 Problemi da Evitare – 6^ parte
 
Presentazione Web Site
Presentazione Web SitePresentazione Web Site
Presentazione Web Site
 

Mobile UI Design

  • 2. CHISONO ‣ Simone Viani ‣ Informatica / Master Web & Multimedia ‣ Head of Interface Development @ DigitasLBi ‣ t flik185 / g simone.viani@gmail.com .
  • 3. ‣ presentazione ‣ il contesto ‣ le performance ‣ html5 ‣ CSS3 ‣ javascript ‣ sass ‣ app design & dev Di cosa parleremo
  • 4. 2009 2015 *ComScore Survey 2012 1.9 miliardi 800 milioni 2009 2015 mobileinternet desktopinternet 1.4 miliardi 1.6 miliardi I dati indicano chiaramente un mercato mobile (smartphone / tablet) in continua crescita IlContesto
  • 5. OS 2013 Android 66% iOS 20% Symbian 5% Blackberry 8% Windows Phone 3% Percentuale di diffusione dei principali OS mobile a livello mondiale IlContesto
  • 6. Il mondo mobile occupa ed occuperà una fetta sempre crescente di mercato, ed è quindi indispensabile progettare per questo tipo di dispositivi. Le strade possibili sono principalmente: ‣ Web App Responsive ‣ Web App Dedicata (M-site) ‣ App ibrida (html+contenitore nativo) - es. PhoneGap ‣ App nativa IlContesto
  • 7. Una delle differenze principali tra mondo mobile e desktop di cui bisogna tenere sempre conto quando progettiamo e sviluppiamo è la (e quindi ridotte performance) che i dispositivi mobile hanno rispetto ai computer desktop. Ogni scelta progettuale (in qualsiasi fase) dovrebbe sempre tenere conto dei suoi impatti sulle performance. IlContesto ridottacapacitàhardware
  • 9. Le performance sono uno dei fattori principali che incidono nella scelta del tipo di applicazione da sviluppare.
  • 11. In un’ app ibrida l’interfaccia grafica è scritta in html + css + js. Leperformance webapp htmlcssjs appnativa objective-c... appibrida web+nativa
  • 12. È dunque fondamentale cercare di ottimizzare il modo in cui disegniamo e sviluppiamo la nostra GUI ‣ limitare chiamate HTTP ‣ usare accelerazione GPU dove possibile (css3) ‣ ottimizzare immagini Leperformance webapp htmlcssjs appnativa objective-c... appibrida web+nativa
  • 13. È buona norma sviluppare i css seguendo i principi DRY (Don’t Repeat Yourself) e dei CSS modulari. Considerare sempre il fattore performance quando scriviamo CSS. Le animazioni dichiarative (senza scripting) vengono ottimizzate dal browser, che riesce ad animare agevolmente (60fps) le proprietà translate, scale, rotation e opacity. Evitare il più possibile di animare proprietà che scatenano browser layout o paint (come top, left, width, padding, margin…) Leperformance http://youtu.be/-62uPWUxgcg
  • 14. Leperformance Gli step che compie il browser sono:å ‣ calcolare stili da applicare ad ogni elemento (Recalculate Style). ‣ generare posizione e geometria per ogni elemento (Layout). ‣ riempire i pixel di ogni elemento in layer (Paint Setup and Paint) ‣ disegnare i layer a video (Composite Layers) Per ottenere animazioni fluide (60fps) occorre limitare il più possibile il lavoro al browser, e dunque cambiare possibilmente solo proprietà che intervengono durante la fase di Compositing (transform e opacity). http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
  • 15. Leperformance width height padding margin display border-width border top float text-align font-family font-size overflow line-height vertical-align right bottom min-height Ecco alcune proprietà che scatenano l’evento Layout del browser:
  • 16. Leperformance color border-style visibility background background-position background-image background-repeat background-size box-shadow border-radius Ecco alcune proprietà che scatenano l’evento Paint del browser:
  • 17. Leperformance Animare in Javascript vs. animare in CSS (transition & animation) Javascript ci dà un grande controllo sull’animazione, attraverso vari comandi come animationStart, animationEnd, AnimationPlayState (“pause” / “running”), e permette di creare effetti complessi come il parallasse. Il suo principale limite è quello di “girare” nel thread principale del browser, lo stesso usato per il calcolo degli stili degli elementi, la fase di Layout, Painting ed altri javascript. Questo può portare l’animazione a perdere qualche frame, e risultare quindi poco fluida. L’approccio CSS viceversa ha il vantaggio di essere ottimizzato dal browser senza pesare sul thread principale. Il grande svantaggio sta invece nel fatto che manchi della potenza espressiva di javascript, rendendo animazioni complesse molto difficile da gestire.
  • 18. Una buona app mobile deve focalizzarsi su una funzionalità di base ed essere veloce ed affidabile, prima ancora di essere “bella”. La user experience è fortemente legata alle performance, e di conseguenza anche il successo di un’app. Le scelte di design influiscono su ‣ funzionalità ‣ contenuti ‣ interazioni ‣ grafica Leperformance performance ( non è solo responsabilità dello sviluppo! )
  • 19. Un’esperienza utente fluida non è solo un esercizio di programmazione, ma è anche un esercizio chiave di design
  • 20. La percezione delle performance si basa essenzialmente su: ‣ tempi di avvio ‣ comportamento al caricamento della pagina ‣ fluidità delle transizioni e animazioni ‣ errori ‣ tempi di attesa Leperformance
  • 21. Leperformance .Grafica .contenuti .interazioni .DB .API .dispositivo .Piattaforma .standard (LTE,3g,…) APP back-end mobile rete Fortemente influenzati dalle decisioni di design e sviluppo Limiti fisici da tenere sempre in considerazione Grossi contenuti + caricati da back-end su una rete lenta = basse performance
  • 22. Per ottimizzare le performance nel processo di design e sviluppo è utili focalizzarsi su: ‣ Identificare le principali USER STORIES ‣ Ottimizzare elementi grafici e flussi UI Leperformance
  • 23. HTML5
  • 24. L’HTML5 è l’ultima versione dell’ hyper text markup language proposta dal W3C per la prima volta intorno al 2008. Rispetto al suo predecessore, HTML4.01, definito per la prima volta nel 1999, la nuova versione è stata sviluppata considerando: ‣ Maggiore semplicità e logica nella creazione delle pagine ‣ Necessità di ridurre i plugin esterni (flash), facilitando nello 
 stesso tempo la visualizzazione di contenuti multimediali ‣ Necessità di creare applicazioni web, non più semplici pagine web ‣ Definire un set di API che permetta un’interazione tra tag, javascript ed il DOM (Document Object Model) HTML5
  • 25. Ad esempio al nuovo tag <video> viene associata un’API con la quale è possibile interagire con gli oggetti video presenti nel DOM (play, pause, ...) Metodi: video.play() – video.load() ... Eventi: oncanplay – onended … Offset: video.startTime – video.duration ... HTML5 <video id="unicorn" width="500" height=“500” controls> <source src="video.mp4" type="video/mp4"> <source src="video.ogv" type=“video/ogg”> <object type="application/x-shockwave-flash" data="__FLASH__.SWF"></object> </video> 1 2 3 4 5 6 html JS
  • 26. Con l’HTML5 la struttura della pagina diventa semantica, grazie anche all’introduzione di nuovi tag. Eccone alcuni: <article> - ogni elemento di contenuto “indipendente” dal contesto <aside> – generalmente destinato a contenuto di secondaria importanza <header>, <footer> – possono ripetersi più volte in una pagina, riferendosi a sezioni diverse <nav> – definisce il markup relativo alla navigazione del sito <section> – definisce una sezione, un capitolo o comunque un elemento con una propria intestazione <audio>, <video> – gestiscono audio e video senza necessità di plugin <canvas> – permette di visualizzare grafica attraverso linguaggi di scripting (come javascript) HTML5
  • 27. Tag più semantici rispetto alla versione precedente di html HTML5 <div id=“header”> <div id=“nav”> <div id=“content”> <div id=“footer”> <div id=“side”> <header> <nav> <article> <footer> <aside>
  • 28. Come abbiamo già accennato, HTML5 porta con se più di un semplice set di nuovi elementi html. Definisce anche un insieme di funzionalità programmabili attraverso specifiche APIs, tra cui Geolocation (navigator.geolocation.getCurrentPosition()) Drag’n’drop (dropContainer.addEventListener(…)) Storage (session/local - sessionStorage.getItem(‘test’)) Offline (file .manifest) HTML5
  • 29. CSS3
  • 30. I CSS3 sono la terza versione dei Cascading Style Sheets proposta dal W3C che, come l’HTML5, nascono con lo scopo di semplificare ed indirizzare in maniera più efficace i problemi legati allo sviluppo web. Con i CSS3 abbiamo: ‣ Nuovi selettori, pseudo-elementi / classi, e proprietà ‣ Divisione in moduli univoci per proprietà (es. layout) ‣ Ogni browser può implementare le specifiche CSS3 per moduli ‣ Il processo di implementazione per un browser è più veloce CSS3
  • 31. La precedente versione (CSS2.1) era basata su di un’unica specifica divisa in “sezioni” corrispondenti alle varie componenti del css formatting model. La modularizzazione dei CSS3 invece porta ciascuna delle sezioni ad avere una propria specifica: questo significa che il processo di implementazione e standardizzazione di ogni modulo è indipendente e può quindi procedere a velocità diverse. Molti moduli sono ancora in versione draft, mentre altri sono divenuti standard. CSS3
  • 32. I moduli più comuni (non in stato di draft) ‣ Selectors ‣ Backgrounds and Borders ‣ Media Queries ‣ Colors ‣ CSS Transitions ‣ CSS Translations ‣ CSS Animations ‣ Multi-column Layout CSS3
  • 33. Se prendiamo come esempio il modulo dei selettori: ‣ element [digitas^=‘lbi’] (match elemento con attributo) 
 ‣ :nth-child(n) (match l’ennesimo elemento figlio) 
 ‣ :last-child (match ultimo figlio) 
 ‣ :checked(match element se in stato di checked) 
 ‣ elementA ~ elementB (B segue A in un qualsiasi punto) 
 CSS3
  • 34. Una delle specifiche con maggiori novità è quella riguardante gli sfondi. Adesso è possibile avere ‣ sfondi multipli*: 1 2 3 4 5 element {! background-image:url(primo.png),url(secondo.png);! background-position: center bottom, left top;! background-repeat: no-repeat;! }! * supporto browser: Firefox(3.6+), Safari/Chrome(1/1.3+), Opera (10.5+), IE (9+) CSS3
  • 35. Alcune nuove proprietà relative al background sono: ‣ background-clip Determina l’area di espansione dello sfondo: CSS3 background-clip:! content-box! background-clip:! padding-box background-clip:! border-box! (default)
  • 36. ‣ background-origin Determina il punto di ancoraggio dello sfondo CSS3 background- origin:! content-box! background- origin:! padding-box background- origin:! border-box! (default)
  • 37. ‣ background-size 1 2 3 4 5 background-size: 200px;! background-size: 200px 100px;! background-size: 200px 100px, 400px 200px;! background-size: auto 200px;! background-size: 50% 25%;! background-size: contain;! background-size: cover;! ! 6 7 NB: i valori espressi in % si riferiscono allo spazio a disposizione per lo sfondo, non all’immagine. CSS3
  • 38. Inoltre sono state aggiornate anche le proprietà come ‣ background-repeat (“space” e “round”) ‣ background (aggiunte size e origin) CSS3
  • 39. Il modulo delle media queries dei CSS3 è di fatto la logica estensione dei media types conosciuti da CSS2, ed utilizzati, per esempio, per servire i fogli di stile dedicati alla stampa. Le media queries permetto di servire particolari stili non solo in base al tipo di dispositivi di fruizione, ma anche a diverse caratteristiche degli stessi (larghezza viewport, densità di pixel, …) 1 2 3 @media print {! background: none;! }! CSS3
  • 40. Pensate alle media queries come uno strumento con cui applicare il “costrutto” se questa proprietà, allora questo stile Anche in questo caso la compatibilità con Explorer parte dalla versione IE9+. Esisitono diverse soluzioni js per rendere le media queries compatibile con versioni precedenti, come ad esempio Respond.js (https://github.com/scottjehl/Respond ). CSS3
  • 41. Tecnicamente consiste nella dichiarazione di un tipo di media e di zero o più espressioni che verifichino le condizioni di validità o non validità delle caratteristiche di un certo media. 1 2 3 @media media_type | op logici | caratteristiche media {! ...! }! 1 2 3 <link rel="stylesheet"! media="media_type |op logici |caratteristiche media" href="specifico.css" />! 1 2 @import url(specifico.css) ! media_type | op logici | caratteristiche media! CSS3
  • 42. Caratteristica definizione width larghezza ”browser” (min/max) height altezza ”browser” (min/max) device-width larghezza ”schermo” (min/max) device-height altezza ”schermo” (min/max) orientation landscape / portrait ‣ media_type = screen / print / … ‣ op logici = and/ or /, (or) ‣ caratteristiche media CSS3
  • 43. La tecnica responsive in 5 passi
  • 44. Il numero sempre crescente di differenti device (e risoluzioni) con i quali oggi siamo in grado di navigare su Internet, rendono impossibile produrre design ottimali per tutte le visualizzazioni. E’ quindi necessario un approccio più “fluido” responsive
  • 45. Aggiungere il Viewport meta taG responsive 1 Per attivare l’uso delle media queries, inserire nell’ <head> del documento html <meta name="viewport" content="width=device-width, initial-scale=1">
  • 46. Attivare il box model più adatto responsive 2 content padding border margin 1 2 3 4 5 *, *:before, *:after {! -moz-box-sizing: border-box;! -webkit-box-sizing: border-box;! box-sizing: border-box;! }!
  • 47. Attivare il box model più adatto responsive 2 senzabox-sizing:border-box conbox-sizing:border-box
  • 48. Convertire px in % responsive 3 Partendo dai layout grafici è utili convertire le dimensioni degli oggetti da px a valori percentuali risultato = (target / contesto) * 100
  • 49. Convertire px in % responsive 3 contesto 800px target 600px = 75% target 200px = 25%
  • 50. Creare un html basato su colonne responsive 4 Le percentuali calcolate precedentemente verranno usate come punto di partenza per la costruzione della griglia che comporrà la pagina. 1 2 3 4 .column {! float: left;! margin-left: 5%;! }! .column:first-child {! margin-left: 0;! }! 5 6 7 1 2 3 4 5 <div class="container"> <div class="column side"></div> <div class="column main-content"></div> </div> ...
  • 51. Creare un html basato su colonne responsive 4 .column.side .column.main-content 1 2 3 4 .side {! width: 25%;! }! .main-content {! width: 70%;! }! 5 6 7
  • 52. Gestire le variazioni del viewport responsive 5 Affinchè i contenuti possano adattarsi in maniera ottimale alle variazioni di grandezza del browser, andiamo ad impostare i breakpoint sui quali lavoreranno le media queries per servire i css specifici. 1 2 3 4 @media screen and (max-width: 600px) {! .column.side,! .column.main-content {! margin: 0;! width: 100%;! }! }!5
  • 53. Gestire le variazioni del viewport responsive 5 .column.side .column.main-content
  • 54. CSS3 fornisce un nuovo modo di posizionare e modificare gli elementi tramite la proprietà transform. Tale proprietà può lavorare sia in 2 (asse x,y) che 3 (asse x, y, z) dimensioni, ognuna delle quali ha le proprie proprietà e valori. La sintassi è la seguente (escludendo i vari browser prefixes): Transforms 1 2 3 div {! transform: transform_function( params ) || none;! }! !
  • 55. Transforms transform2d transform3d translate(x,y) translate3d(x,y,z) translate(X) - translate(Y) translate(Z) scale(x,y) scale3d(x,y,z) scaleX - scale(Y) scale(Z) rotate(angolo) rotate3d(x,y,z,angolo)
  • 56. Prima dei CSS3 il principale modo per spostare un elemento in una pagina era quello di utilizzare position:absolute. Adesso è possibile utilizzare la funzione translate(), che offre sensibili vantaggi da un punto di vista di performance, come vedremo più avanti. Transforms 1 2 3 div {! position:absolute; top: 20px; left:10px;! }! ! 1 2 3 div {! transform: translate( 10px, 20px );! }! !
  • 57. Un fenomeno interessante è quello del cosiddetto Un elemento posizionato in absolute si “attacca” in maniera precisa ai pixel, mentre con translate() possono essere “agganciati” anche sub-pixel, dando un effetto più sfuocato. Questo fenomeno si nota soprattutto nelle animazioni, che appaiono quindi più “naturali” usando translate(). Transforms pixelsnapping
  • 58. Un’ altro aspetto importante da considerare durante l’utilizzo delle funzioni di transform, riguarda l’ottimizzazione delle loro performance. Queste funzioni (ma anche le transitions e le animations che vederemo) di default vengono eseguite direttamente dal motore di rendering del browser (software). Si può però forzare l’utilizzo della scheda grafica (GPU), migliorando quindi le performance generali. Transforms
  • 59. Browser come Chrome, Firefox, Safari ed IE9+ attivano l’accelerazione grafica quando: usiamo transform3d (translate3d – rotate3d …) transform: translateZ(0) transform: translate3d(0,0,0) NB: Chrome e Safari talvolta generano un leggero flickering in presenza di transform CSS. Basta aggiungere queste regole css Transforms 1 2 backface-visibility: hidden;! perspective: 1000; !
  • 60. Le transitions sono di fatto il modo più semplice di implementare un’animazione, senza (necessariamente) usare javascript. In CSS3 un’animazione permette di cambiare il comportamento e l’aspetto di un elemento ad un determinato cambio di stato. Con le transitions in particolare si anima il passaggio da una stato ad una altro, mentre con le animations sarà possibile dichiarare più punti di transizione, attraverso i keyframe. TRANSITIONS
  • 61. Il modo più semplice per attivare una trasition è usare le pseudo classi :hover, :focus, :active, :target. Le proprietà definibili in una transition sono: ‣ transition-property ‣ transition-duration ‣ transition-timing-function ‣ transition-delay Le 4 proprietà sono esprimibili con una sintassi compatta TRANSITIONS 1 transition: proprietà durata timing ritardo!
  • 62. Ogni transition-timing-function ha una curva di bezier associata. La funzione di default (se non specificata) è linear, ma è appunto possibile definire qualsiasi funzione utilizzando le curve di bezier. Altri valori possibili (senza usare le curve) sono ‣ ease-in ‣ ease-out ‣ ease-in-out Ogni proprietà animata può avere una sua timing-function TRANSITIONS
  • 63. In generale è possibile animare tutte le proprietà css che hanno valori intermedi identificabili, come ‣ width / height ‣ font-size / line-height ‣ sfondi (colore, posizione) ‣ bordi / padding / margin ‣ top / right / left / bottom ‣ opacity TRANSITIONS INTEGRARE
  • 64. 1 2 3 4 5 .box {! background: #8ec63f;! transition: background 1s linear 0;! }! .box:hover {! background: #f7941d;! }! 6 7 Se volessimo animare il cambio di colore di sfondo all’hover su di un blocco “.box” TRANSITIONS
  • 65. Per costruire animazioni più complesse le transitions da solo non bastano. Per questo motivo è stato creato il modulo CSS3 delle Animations. Questo tipo di animazioni si basano sul concetto derivato dall’animazione classica dei keyframes, che definiscono I punti in cui avviene un cambio di stato. ANIMATIONS
  • 66. Ecco come si presenterebbe un’animation con 3 keyframes (0%, 50%, 100%) ANIMATIONS 1 2 3 4 5 6 7 @keyframes slide {! 0% {! left: 0;! top: 0;! }! 50% {! left: 305px;! top: 100px;! }! 100% {! left: 610px;! top: 0;! }! }! 8 9 10 11 12 13 14
  • 67. Le proprietà definibili quando si invoca un’animazione sono: ‣ animation-name ‣ animation-duration ‣ animation-timing-function ‣ animation-delay ‣ animation-iteration-count ‣ animation-direction ‣ animation-fill-mode ‣ animation-play-state ANIMATIONS
  • 68. Come si vede la maggior parte delle proprietà sono simili alle proprietà delle transitions, ad eccezione di ‣ iteration-count: valori numerici (interi) o infinite ‣ animation-direction: normal, reverse, alternate, alternate-reverse ‣ animation-fill-mode: definisce lo stato css a termine dell’animazione. Assume i valori - none - forwards: rimangono attivi gli stili di fine animazione (se iteration-count non è pari) - backwards: torna agli stili attivi prima dell’animazione - both: alterna forwards e backwards ANIMATIONS
  • 69. ‣ animation-play-state: permette di cambiare lo stato di un’animazione durante la sua esecuzione. Può essere - paused: mette in pausa l’animazione - running: attiva l’animazione ANIMATIONS 1 2 3 4 5 6 7 #tech:hover {animation-play-state:paused;}! ! #tech{! animation-play-state:running;! animation: myanim 10s linear infinite;! }! !
  • 70. Ecco un interessante confronto tra animare le proprietà top e left ed usare translate ANIMATIONS http://codepen.io/paulirish/pen/nkwKs http://codepen.io/paulirish/pen/LsxyF
  • 72. Con Javascript è possibile creare applicazioni con una metodologia molto simile a quella della programmazione orientata agli oggetti che troviamo in linguaggi come Java oppure C++. Detto in maniera molto semplificata un oggetto è javascript un’ entità che può avere dei propri attributi o proprietà (dati) e può compiere su tali dati determinate azioni, definite attraverso delle funzioni
  • 73. Nel linguaggio comune della programmazione ad oggetti (OOP), un oggetto è detto istanza di una classe Se volessimo creare un prototipo di un telefonino, la classe servirebbe a definire le caratteristiche (proprietà) e funzionalità (metodi) comuni a tutti i telefonini. Istanziando tale classe potremmo definire i vari ‘iphone’, ‘android’, ecc con le proprie caratteristiche e funzionalità specifiche (nome, marca,…). javascript
  • 74. Javascript non ragiona a Classi ma ad oggetti javascript
  • 75. Come abbiamo detto la programmazione ad oggetti possibile con Javascript (JS) presenta delle differenze rispetto a quella “standard”. Nell’esempio precedente, per definire la classe Telefonino in JS, non avendo un costrutto per definire una Class, dovremmo partire da un oggetto. Per creare un oggetto in Javascript abbiamo due possibilità: ‣ object ‘literal’ ‣ ‘instance’ object javascript
  • 76. Object ‘literal’ javascript 1 2 3 4 5 var Telefonino = {! marca : ‘apple’,! chiama : function() {...},! sms : function() {...},! ... ! }! console.log(Telefonino.marca) // apple! 6 7
  • 77. javascript Object ‘literal’ A run time è possibile modificare tale oggetto, aggiungendo anche nuove proprietà e metodi, ma non è possibile definirne un punto di ‘inizializzazione’ tramite un costruttore. Con questa notazione di fatto creo un “namespace” in cui vivono le proprietà e funzioni definite al suo interno. Questo oggetto però non può essere “istanziato” altre volte.
  • 78. Object ‘instance’ javascript 1 2 3 4 5 function Telefonino (marca) {! this.marca = marca;! ...! }! ! // istanzio oggetto! var iPhone = new Telefonino(‘apple’);! 6 7
  • 79. javascript Object ‘literal’ Nel caso di object instance definiamo l’oggetto partendo da una funzione chiamata costruttore nella quale definiamo le proprietà e le funzionalità che ogni istanza (es. oggetto iphone) porterà con se. La parola riservata new permette di istanziare un oggetto (funzione), di fatto permettendo di personalizzarlo. Posso in questo modo definire i vari tipi di telefonini (iphone, android,…) partendo da una “base comune” a tutte le sue istanze.
  • 80. javascript L’aspetto interessante dell’instance object è che ogni modifica di proprietà è locale all’istance stessa, e l’oggetto “base” (es. Telefonino) non viene di fatto mai cambiato. In questo senso si torna al concetto di Classe dell’OOP, in cui posso definire una sola volta il “core” di un elemento, e poi lavorare e personalizzare le sue singole istanze, senza dovermi preoccupare di ridefinire ogni volta tutte le proprie caratteristiche.
  • 81. javascript Quando scriviamo una funzione in questa maniera stiamo di fatto definendo una funzione che si chiamerà automaticamente. Senza le parentesi esterne infatti avremmo solo una definizione di funzione, che deve essere poi esplicitamente chiamata. 1 2 3 (function () {! ...! })();!
  • 82. javascript Un altro concetto preso dal mondo OOP, l’ereditarietà, in JS si differenzia per il fatto di essere basato sui prototipi e non sulle classi. Ogni oggetto in JS ha una proprietà interna [[Prototype]] che viene usata per estendere un oggetto esistente. 1 2 3 Telefonino.prototype.getVersione = function() {! ...! }!
  • 83. javascript Tutte le caratteristiche e funzioni di un oggetto possono essere richiamate con la sintassi obj.propName || obj[‘propName’] ed è possibile verificarne l’esistenza attraverso obj.hasOwnProperty(‘propName’)
  • 84. javascript Se volessimo quindi estendere l’oggetto Telefonino basterà creare un nuovo oggetto con le proprie caratteristiche particolari e farlo derivare da Telefonino. In questo modo ogni proprietà (anche nuova) di Telefonino verrà ereditata da Tablet. 1 2 3 4 5 var Tablet = function (altro) {! this.altro = altro;! ...! }! ! // Eriditarietà...! Tablet.prototype = new Telefonino();! 6 7
  • 85. SASS
  • 86. Sass, insieme a Less ed altri come Stylus o Switch CSS, è un cosiddetto preprocessore CSS, nato con il preciso scopo di rendere la creazione dei fogli di stile più dinamica, strutturata e produttiva. Questi linguaggi sono di fatto un’ estensione dei CSS che permette di usare nei fogli di stile alcuni paradigmi della programmazione, oltre a fornire un modo strutturato e scalabile di scrivere CSS. SASS
  • 87. Una delle filosofie dietro a Sass, ed in generale a tutti i linguaggi di preprocessore css, è quella del DRY (Don’t Repeat Yourself), un tema che sta alla base dei linguaggi di programmazione. Con i css standard capita infatti spesso di dover ripetere inutilmente frammenti di codice, che di fatto aumentano solo il peso del file e rendono più complesse eventuali update e modifiche. SASS 1 2 3 4 5 .titolo-grande {! font-family: arial, sans-serif;! color: #000;! font-weight: 800;! }! .titolo-piccolo {! font-family: arial, sans-serif;! color: #000;! font-weight: 400;! }! 6 7 10 8 9
  • 88. Esistono due sintassi di Sass ‣ scss la più usata e recente, superset dei CSS3 (es. style.scss) ‣ sass più vecchia che deriva da HAML (es. style.sass) La principale differenza sta nel modo di identificare i blocchi di css. Nel caso di scss si usano parentesi { } e ; mentre sass usa l’indentazione. SASS
  • 89. Sass permette di lavorare con entrambe le sintassi all’interno dello stesso progetto SASS 1 2 3 4 5 $font: ‘Helvetica’, sans-serif! $gray:#999999! ! body! font: 100% $font! color: $gray! ! 6 1 2 3 4 5 $font: ‘Helvetica’, sans-serif;! $gray:#999999;! ! body {! font: 100% $font;! color: $gray;! }! ! 6 7 sintassiSASS sintassiSCSS
  • 90. Un file CSS3 valido è anche un file scss valido. SASS
  • 91. Un file Sass non viene direttamente interpretato dal browser, ma deve essere pre-compilato per ottenere il relativo file CSS Occorre quindi avere sulla propria macchina un compilatore Sass, che verrà eseguito ad ogni modifica al file .scss (.sass) SASS compilatore style.scss style.css
  • 92. Vediamo ora più nel dettaglio il linguaggio Sass. Tra i vari concetti presi dal mondo della programmazione troviamo ‣ variabili ‣ mixin ‣ operazioni & funzioni ‣ ereditarietà ‣ nesting SASS
  • 93. VARIABILI Una variabile in SASS viene definita con un identificativo alfanumerico preceduto da $ SASS 1 2 $font-size: 12px;! $testo-giallo: #ffcc00;! body {color: $testo-giallo; font-size: $font-size;}!3
  • 94. Le variabili possono essere usate anche all’ interno di selettori o nomi di proprietà, utilizzando l’interpolazione #{} che troviamo anche in linguaggi come Coffeescript. SASS 1 2 $horiz: left;! .rounded-top-#{$horiz}-radius: 10px;!
  • 95. Un altro modo di definire variabili in Sass è il cosiddetto guarded assignment, che permette di assegnare un valore ad una variabile solo se non è già stato definito,usando la parola riservata !default SASS 1 2 3 4 5 $module_height: 18px;! ! $module_height: 20px !default;! $module_bgcolor: #ccc !default;! .module {! height: $module_height; //height: 18px;! }! 6 7
  • 96. Questo comportamento risulta utile nel caso volessimo sovrascrivere dei valori particolari di variabili di un framework, per esempio di griglie, che stiamo usando: NB: É importante dichiarare le variabili prima di importare il modulo su cui vogliamo effettuare l’override SASS 1 2 $blueprint-grid-columns = 12;! @import “blueprint/grid”;!
  • 97. MIXIN I mixin, in Sass, sono concettualmente simili alle funzioni nella misura in cui entrambi permettono di definire un blocco di codice richiamabile in parti diverse del file .scss (o .sass) La differenza sta nel fatto che un mixin viene chiamato con la direttiva @include ed inietta il suo codice nel punto della chiamata, mentre una funzione viene chiamata direttamente con il proprio nome e restituisce un valore SASS
  • 98. Un mixin viene definito con la direttiva @mixin e, come detto, richiamato con @include SASS SORGENTE compilato 1 2 3 4 5 @mixin rounded($side, $radius: 10px) {! -webkit-border-#{$side}-radius: $radius;! border-#{$side}-radius: $radius;! }! ! ! div {@include rounded(top, 5px)}! 6 7 1 2 3 4 div {! -webkit-border-top-radius: 5px;! border-top-radius: 5px;! }!
  • 99. OPERAZIONI Con Sass è possibile valorizzare proprietà css con i valori restituiti da operazioni matematiche e funzioni SASS 1 2 3 4 5 $num-items: 10;! $item-width: 100px;! $default-bg: #ffcc00;! ul {! width: $num-items * $item-width;! background-color: lighten($default-bg, 30%)! }! 6 7
  • 100. Simile ad un mixin, una funzione restituisce un unico valore e si invoca direttamente con il nome ed eventuali parametri. Il valore resituito può essere un numero, una stringa, un colore, un booleano, una lista, una mappa e null. SASS 1 2 3 4 5 @function calc-percent($target, $container) {! @return ($target / $container) * 100%;! }! ! div {! width: calc-percent(650px, 1000px);! }! 6 7
  • 101. Sass supporta anche i costrutti if/else, for, while ed each provenienti dalla programmazione attraverso le direttive @if/@else, @for, @while ed @each. SASS 1 2 3 4 5 $lista : Simone Laura Fabio Valeriano Lorena;! ! @each $nome in $lista {! .photo-#{$nome} {! background: url(‘img/#{$nome}.jpg’)! }! }! 6 7
  • 102. EREDITARIETÀ Il concetto di ereditarietà in Sass permette di estendere e specializzare una classe attraverso la direttiva @extend SASS 1 2 3 4 5 .error {! border: 1px solid #fdd;! background: #fff;! }! .error-panic {@extend .error; border-width: 4px;}! 6
  • 103. NESTING Un’ importante novità introdotta da linguaggi come Sass, rispetto ai normali CSS, è il concetto di nesting del codice, che ci permette di evitare inutili e poco performanti ripetizioni nella scrittura dei selettori. SASS 1 2 3 4 5 li {! a {! color: #000;! &:hover {color: red}! }! }!6