Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Mobile UI Design

1,299 views

Published on

The slides I made for the FSE Mobile UI Design course I held for Red Oddity

Published in: Mobile

Mobile UI Design

  1. 1. mobile User Interface Design
  2. 2. CHISONO ‣ Simone Viani ‣ Informatica / Master Web & Multimedia ‣ Head of Interface Development @ DigitasLBi ‣ t flik185 / g simone.viani@gmail.com .
  3. 3. ‣ presentazione ‣ il contesto ‣ le performance ‣ html5 ‣ CSS3 ‣ javascript ‣ sass ‣ app design & dev Di cosa parleremo
  4. 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. 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. 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. 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
  8. 8. Le Performance
  9. 9. Le performance sono uno dei fattori principali che incidono nella scelta del tipo di applicazione da sviluppare.
  10. 10. 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
  11. 11. In un’ app ibrida l’interfaccia grafica è scritta in html + css + js. Leperformance webapp htmlcssjs appnativa objective-c... appibrida web+nativa
  12. 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. 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. 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. 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. 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. 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. 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. 19. Un’esperienza utente fluida non è solo un esercizio di programmazione, ma è anche un esercizio chiave di design
  20. 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. 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. 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. 23. HTML5
  24. 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. 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. 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. 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. 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. 29. CSS3
  30. 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. 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. 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. 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. 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. 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. 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. 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. 38. Inoltre sono state aggiornate anche le proprietà come ‣ background-repeat (“space” e “round”) ‣ background (aggiunte size e origin) CSS3
  39. 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. 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. 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. 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. 43. La tecnica responsive in 5 passi
  44. 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. 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. 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. 47. Attivare il box model più adatto responsive 2 senzabox-sizing:border-box conbox-sizing:border-box
  48. 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. 49. Convertire px in % responsive 3 contesto 800px target 600px = 75% target 200px = 25%
  50. 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. 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. 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. 53. Gestire le variazioni del viewport responsive 5 .column.side .column.main-content
  54. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  71. 71. Javascript
  72. 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. 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. 74. Javascript non ragiona a Classi ma ad oggetti javascript
  75. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 85. SASS
  86. 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. 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. 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. 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. 90. Un file CSS3 valido è anche un file scss valido. SASS
  91. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  104. 104. HTML5 CSS3 & GRAZIE buonlavoro &

×