design è come funziona: introduzione allo sviluppo per dispositivi mobili
DESCRIPTION
Introduzione allo sviluppo per dispositivi mobili. Intervento come "Visiting Lecturer" presso il Politecnico di Milano, Dipartimento di Design - 26 marzo 2014. #designishowitworksTRANSCRIPT
![Page 1: Design è come funziona: introduzione allo sviluppo per dispositivi mobili](https://reader033.vdocuments.pub/reader033/viewer/2022052820/5478e825b4af9fa0158b46a2/html5/thumbnails/1.jpg)
DESIGN È COME FUNZIONA #DESIGNISHOWITWORKS
introduzione allo sviluppo per dispositivi mobili
Politecnico di Milano, Dipartimento di Design – 26 marzo 2014
![Page 2: Design è come funziona: introduzione allo sviluppo per dispositivi mobili](https://reader033.vdocuments.pub/reader033/viewer/2022052820/5478e825b4af9fa0158b46a2/html5/thumbnails/2.jpg)
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
![Page 3: Design è come funziona: introduzione allo sviluppo per dispositivi mobili](https://reader033.vdocuments.pub/reader033/viewer/2022052820/5478e825b4af9fa0158b46a2/html5/thumbnails/3.jpg)
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
![Page 4: Design è come funziona: introduzione allo sviluppo per dispositivi mobili](https://reader033.vdocuments.pub/reader033/viewer/2022052820/5478e825b4af9fa0158b46a2/html5/thumbnails/4.jpg)
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
![Page 5: Design è come funziona: introduzione allo sviluppo per dispositivi mobili](https://reader033.vdocuments.pub/reader033/viewer/2022052820/5478e825b4af9fa0158b46a2/html5/thumbnails/5.jpg)
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
![Page 6: Design è come funziona: introduzione allo sviluppo per dispositivi mobili](https://reader033.vdocuments.pub/reader033/viewer/2022052820/5478e825b4af9fa0158b46a2/html5/thumbnails/6.jpg)
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
![Page 7: Design è come funziona: introduzione allo sviluppo per dispositivi mobili](https://reader033.vdocuments.pub/reader033/viewer/2022052820/5478e825b4af9fa0158b46a2/html5/thumbnails/7.jpg)
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)
![Page 8: Design è come funziona: introduzione allo sviluppo per dispositivi mobili](https://reader033.vdocuments.pub/reader033/viewer/2022052820/5478e825b4af9fa0158b46a2/html5/thumbnails/8.jpg)
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
![Page 9: Design è come funziona: introduzione allo sviluppo per dispositivi mobili](https://reader033.vdocuments.pub/reader033/viewer/2022052820/5478e825b4af9fa0158b46a2/html5/thumbnails/9.jpg)
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
![Page 10: Design è come funziona: introduzione allo sviluppo per dispositivi mobili](https://reader033.vdocuments.pub/reader033/viewer/2022052820/5478e825b4af9fa0158b46a2/html5/thumbnails/10.jpg)
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
![Page 11: Design è come funziona: introduzione allo sviluppo per dispositivi mobili](https://reader033.vdocuments.pub/reader033/viewer/2022052820/5478e825b4af9fa0158b46a2/html5/thumbnails/11.jpg)
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.
![Page 12: Design è come funziona: introduzione allo sviluppo per dispositivi mobili](https://reader033.vdocuments.pub/reader033/viewer/2022052820/5478e825b4af9fa0158b46a2/html5/thumbnails/12.jpg)
DESIGN È COME FUNZIONA
Il più semplice «hello world» in Xcode
![Page 13: Design è come funziona: introduzione allo sviluppo per dispositivi mobili](https://reader033.vdocuments.pub/reader033/viewer/2022052820/5478e825b4af9fa0158b46a2/html5/thumbnails/13.jpg)
DESIGN È COME FUNZIONA
Interface builder e storyboarding in Xcode
![Page 14: Design è come funziona: introduzione allo sviluppo per dispositivi mobili](https://reader033.vdocuments.pub/reader033/viewer/2022052820/5478e825b4af9fa0158b46a2/html5/thumbnails/14.jpg)
DESIGN È COME FUNZIONA
Technology Stack di iOS
![Page 15: Design è come funziona: introduzione allo sviluppo per dispositivi mobili](https://reader033.vdocuments.pub/reader033/viewer/2022052820/5478e825b4af9fa0158b46a2/html5/thumbnails/15.jpg)
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
![Page 16: Design è come funziona: introduzione allo sviluppo per dispositivi mobili](https://reader033.vdocuments.pub/reader033/viewer/2022052820/5478e825b4af9fa0158b46a2/html5/thumbnails/16.jpg)
DESIGN È COME FUNZIONA
Una schermata di Eclipse
![Page 17: Design è come funziona: introduzione allo sviluppo per dispositivi mobili](https://reader033.vdocuments.pub/reader033/viewer/2022052820/5478e825b4af9fa0158b46a2/html5/thumbnails/17.jpg)
DESIGN È COME FUNZIONA
Technology Stack di Android
![Page 18: Design è come funziona: introduzione allo sviluppo per dispositivi mobili](https://reader033.vdocuments.pub/reader033/viewer/2022052820/5478e825b4af9fa0158b46a2/html5/thumbnails/18.jpg)
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
![Page 19: Design è come funziona: introduzione allo sviluppo per dispositivi mobili](https://reader033.vdocuments.pub/reader033/viewer/2022052820/5478e825b4af9fa0158b46a2/html5/thumbnails/19.jpg)
DESIGN È COME FUNZIONA
Una schermata di Visual Studio 2012
![Page 20: Design è come funziona: introduzione allo sviluppo per dispositivi mobili](https://reader033.vdocuments.pub/reader033/viewer/2022052820/5478e825b4af9fa0158b46a2/html5/thumbnails/20.jpg)
DESIGN È COME FUNZIONA
Technology Stack di Windows Phone
![Page 21: Design è come funziona: introduzione allo sviluppo per dispositivi mobili](https://reader033.vdocuments.pub/reader033/viewer/2022052820/5478e825b4af9fa0158b46a2/html5/thumbnails/21.jpg)
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.
![Page 22: Design è come funziona: introduzione allo sviluppo per dispositivi mobili](https://reader033.vdocuments.pub/reader033/viewer/2022052820/5478e825b4af9fa0158b46a2/html5/thumbnails/22.jpg)
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
![Page 23: Design è come funziona: introduzione allo sviluppo per dispositivi mobili](https://reader033.vdocuments.pub/reader033/viewer/2022052820/5478e825b4af9fa0158b46a2/html5/thumbnails/23.jpg)
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
[email protected] Davide Orlando, App developer – blog.albegor.com