Mobile UI 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 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 ﬂuide (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
afﬁdabile, 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

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’))
Ofﬂine (file .manifest)
HTML5

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ù “ﬂuido”
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-ﬁll-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

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
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
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, 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
&

Mobile UI Design

Recomendados

Más contenido relacionado

Destacado

Destacado (9)

Similar a Mobile UI Design

Similar a Mobile UI Design (20)

Mobile UI Design