DESIGN È COME FUNZIONA #DESIGNISHOWITWORKS

introduzione allo sviluppo per dispositivi mobili

Politecnico di Milano, Dipartimento di Design – 26 marzo 2014

DESIGN È COME FUNZIONA

Introduzione allo sviluppo per dispositivi mobili 1. Come lavorano il buon designer e il buon sviluppatore

2. Gli strumenti per sviluppare su piattaforma iOS, Android e Windows

Phone

3. 2 casi di studio: app culturale sul Razionalismo e app per i collezionisti di Euro monete

DESIGN È COME FUNZIONA

Parte 1 “People think it's this veneer -- that the designers are handed this box and told, 'Make it look good!' That's not what we think design is. It's not just what it looks like and feels like. Design is how it works.”

Steve Jobs

DESIGN È COME FUNZIONA

“Un buon design, quando è ben fatto, diventa invisibile. È solo quando è fatto male che lo notiamo. Pensalo come l’aria condizionata di una stanza. La notiamo solo se è troppo calda, troppo fredda, fa troppo rumore o se sta facendo sgocciolare qualcosa su di noi. Eppure se l’aria condizionata è perfetta, nessuno dice niente e ci concentriamo, invece, sui compiti che abbiamo tra le mani.”

Jared Spool

DESIGN È COME FUNZIONA

Come lavora il buon designer • Crea interfacce «invisibili», che non fanno pensare

• Conosce il mito dei 3 clic (o tap)

• Usa le convenzioni

• Minimizza il rumore

• Non teme e cura l’accessibilità, perché è la cosa giusta da fare

DESIGN È COME FUNZIONA

Come lavora il buon sviluppatore • Conosce il valore artigianale del proprio lavoro, ma non è individualista

• Applica i principi di ortogonalità, reversibilità e DRY (don’t repeat yoursef)

• Si assume le proprie responsabilità (psicologia del debugging)

• Aggiorna costantemente il proprio «portfolio di conoscenza»

• Sa comunicare e fare stime attendibili

DESIGN È COME FUNZIONA

Designer e sviluppatore comunicano durante il processo di costruzione di un’applicazione • Definizione delle specifiche

• Architettura dei dati

• Pseudocodice

• Codice

• Debugging

• Iterazione, iterazione, iterazione

• Pubblicazione

• Aggiornamento (torna all’inizio)

DESIGN È COME FUNZIONA

In sintesi (provocazione!) la differenza tra designer e sviluppatore dovrebbe essere una sola: • Lo sviluppatore non può permettersi di non conoscere la matematica

DESIGN È COME FUNZIONA

Esempio: scorrimento inerziale e «bounce effect» • Formula della forza elastica: F= – k * x

Differenti implementazioni dell’effetto di fine corsa dello scorrimento inerziale • iOS: effetto rimbalzo

• Android: evidenziazione, senza rimbalzo

• Windows Phone: rimbalzo e «stretch» della schermata

DESIGN È COME FUNZIONA

Parte 2 Gli strumenti di base per sviluppare su iOS • Linguaggio: Objective C

• IDE: Xcode per Mac OSX, include iOS SDK

• 79€ all’anno per accedere a iTunesConnect

• Risorse: doc online, video delle sessioni WWDC su developer.apple.com

DESIGN È COME FUNZIONA

Objective C verboso e brutto, o è una questione di gusti? • myInstance.doSomethingWithParameters( a , b );

• [someInstance doSomethingWithObject:a andAnotherParam:b];

Don’t worry! Sono le uniche linee di codice della presentazione. Dimostrano come sia possibile fare le stesse cose in linguaggi diversi.

DESIGN È COME FUNZIONA

Il più semplice «hello world» in Xcode

DESIGN È COME FUNZIONA

Interface builder e storyboarding in Xcode

DESIGN È COME FUNZIONA

Technology Stack di iOS

DESIGN È COME FUNZIONA

Gli strumenti di base per sviluppare su Android • Linguaggio: Java

• IDE: Eclipse per Windows + Android SDK

• 25$ one-time

• Risorse: doc online, video delle sessioni Google I/O su developer.android.com

DESIGN È COME FUNZIONA

Una schermata di Eclipse

DESIGN È COME FUNZIONA

Technology Stack di Android

DESIGN È COME FUNZIONA

Gli strumenti di base per sviluppare su Windows Phone • Linguaggio: C#

• IDE: Visual Studio + Windows Phone SDK

• 14€ all’anno (individual) o 75€ all’anno (company)

• Risorse: doc online, video delle sessioni Build su dev.windowsphone.com

DESIGN È COME FUNZIONA

Una schermata di Visual Studio 2012

DESIGN È COME FUNZIONA

Technology Stack di Windows Phone

DESIGN È COME FUNZIONA

Ciclo di vita di un’applicazione Android Uno dei dettagli che il designer deve conoscere dell’architettura di un sistema operativo mobile.

DESIGN È COME FUNZIONA

Parte 3 2 casi di app native con interfaccia personalizzata (OpenGL-based): • Razionalismo in Provincia di Como

http://www.slideshare.net/Albegor/razionalismo-in-provincia-di-como

• Collezione Euro Monete http://www.slideshare.net/Albegor/euro-coin-collection-app-it

DESIGN È COME FUNZIONA

Riferimenti • The Guts of a New Machine, New York Times, November 30, 2003

http://www.nytimes.com/2003/11/30/magazine/30IPOD.html

• Don’t make me think, Steve Krug

• The pragmatic programmer, Andrew Hunt e David Thomas

davide.orlando@albegor.com Davide Orlando, App developer – blog.albegor.com