Upload
alessio-delmonti
View
1.220
Download
1
Embed Size (px)
DESCRIPTION
Slides of the bootcamp made for Start up weekend Palermo, about prototyping with Ionic framework
Citation preview
{{ Alessio Delmonti }}Passions: Development, blues, creepy images
Mail: [email protected]: wiralist CTO
@alexintosh2014
Summary● Cos'è un prototipo ?● Perché protipizzare ?● Come si prototipizza ? Principi di base● Come realizzare un buon prototipo in 72h - Team● Come realizzare un buon prototipo in 72h - Developers
● Cos'è Ionic framework● Perché ionic ?● I componenti● Come installarlo● Protokit● Dipendenze di protokit● Features
Parte tecnica
Cos’è un prototipo
Il prototipo è la prima fase del processo produttivo.
Un modello approssimato o parziale del sistema che vogliamo sviluppare che simula o esegue alcune funzioni del sistema finale, realizzato allo scopo di
valutarne le caratteristiche (in particolare, la usabilità)
Perché prototipizzare● Per tenere il design centrato sull’utente
● Per sperimentare design alternativi
Prototyping is the way to find what doesn’t work early and cheap, and spend your time and money on
solutions that do work
Principi base
Brainstorming
I dettagli non sono importanti, state
cercando di stabilire il flow
Testare il prototipo
coding
feedb
ack
DATIesperienza
L’importanza dei test
Testing with 5 users finds 80% of the usability problems
“Jakob Nielsen”http://www.nngroup.com/articles/why-you-only-need-to-test-with-5-users/
Prototipo in 72h - Team
● Non perdere tempo● Impostare le attività secondo la logica "pull"
e non "push" (realizzare un'attività solo quando il processo a valle lo richieda).● Testare il prototipo direttamente online● Dare potere al team
Prototipo in 72h - Developers
● Prima cerca SEMPRE su Google● Stack Overflow è tuo amico● Data model document based.● Go open source● Usa Git e committa sempre
Parte tecnica
Perché ionic
● Tecnologia web● Cross-platform● Librerie AngularJs ● Sviluppo più veloce● Faster go-to market strategy● Perfetto tool per arrivare al MVP (Minimum viable product)● Vi permette di testare online
I componentihttp://ionicframework.com/docs/
Protokithttps://github.com/Alexintosh/Protokit/
A prototype kit for Ionic Framework
Struttura dei file|-- www |-- css |-- img |-- js |-- lib |-- templates |-- index.html
|-- hooks|-- platforms|-- plugins|-- scss|-- config.xml
Features
● Splashscreen● Sidemenu● Social login (auth0)● List view / Split view + Detail View● Api calls● Maps
Risorse
Doc: http://ionicframework.com/docs/Video tutorial: http://learn.ionicframework.com/Snipplet: http://codepen.io/mhartington/tag/ionic/Forum: http://forum.ionicframework.com/Italian community:https://www.facebook.com/groups/380772785422827/
Grazie dell’attenzione!
Credits:http://thenounproject.com/term/teacher/14888/
http://thenounproject.com/term/brainstorming/76607/
http://thenounproject.com/term/beaker/9665/
http://thenounproject.com/term/code/75686/
http://thenounproject.com/term/team/8185/
http://thenounproject.com/term/console/8571/
http://thenounproject.com/term/folder/25369/
http://thenounproject.com/term/list/59948/
@alexintosh