Your SlideShare is downloading. ×
0
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Developing a Web App from UX to Finish
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Developing a Web App from UX to Finish

2,283

Published on

More and more functionality is being shifted to the client side, more specifically it is very often moved to the Client’s browser. Developers and customers are also ever more conscious of user …

More and more functionality is being shifted to the client side, more specifically it is very often moved to the Client’s browser. Developers and customers are also ever more conscious of user experience and interaction design. This talk will therefore focus on the whole development lifecycle – we will plan the interaction and user experience for a simple web application, develop it using advanced client-side techniques and very briefly touch on how to convince our MVC web application to play nice with mobile browsers as well. We will explore how to implement relevant UI patterns, look at best practices and focus on optimizing our application experience.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,283
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. From UX to FinishAnže VodovnikSoftware Architect @ Studio Pešec d.o.o.
  • 2. Kdo sem? Programski arhitekt 10+ let izkušenj http://www.linkedin.com/in/avodovnik Twitter: @avodovnik http://lab.studiopesec.com
  • 3. AGENDA Proces razvoja web aplikacije – metro:Wife Načrtovanje Uporabniška izkušnja – kaj, kdaj, kako? Implementacija – kaj, kdaj, kako? Diskusija
  • 4. PROCES RAZVOJA (WEB) APLIKACIJE Razvoj (spletne) aplikacije je težaven Različne in spreminjajoče se zahteve Skalabilnost Performanse Robustnost Povezljivost Različni razvojni procesi Waterfall Agile
  • 5. PROCES Razvojna Ideja Analitik Arhitekt Tester ekipa
  • 6. PROCES Razvojna Ideja Analitik UX Arhitekt Tester ekipa
  • 7. PROCES Razvojna Ideja Analitik UX Arhitekt Tester ekipa
  • 8. KAJ PA „UX“ SPLOH JE? „A persons perceptions and responses that result from the use or anticipated use of a product, system or service“ - ISO 9241-210; Ergonomics of human system interaction
  • 9. KAJ PA „UX“ SPLOH JE? „A persons perceptions and responses that result from the use or anticipated use of a product, system or service“ - ISO 9241-210; Ergonomics of human system interaction
  • 10. UPORABNIŠKA IZKUŠNJA, 2 1/2. del Več posvečanja izkušnji kot uporabnosti Efektivnost Efikasnost Subjektivno zadovoljstvo } Tipični faktorji uporabnosti
  • 11. UPORABNIŠKA IZKUŠNJA, 2 2/2. delSpletne strani & aplikacije Marketing & Branding Oblikovanje Uporabnost Uporabniška izkušnja
  • 12. KAKO RAZUMETI UPORABNIKOVA ČUSTVA? Analiza Kaj ljudem pomeni „address book“? Kaj so problemi, ki jih imajo? Konkurenca na področju Analiza prisotnosti Določimo story-e (+ persone) Izris Wireframe-ov Design
  • 13. Primer
  • 14. Sara & telefonski imenik• UX ekspert & Informacijski Arhitekt• (pozabljiva) lastnica iPhone-a PROBLEM: izgubljeni kontakti
  • 15. Sara & telefonski imenik• UX ekspert & Informacijski Arhitekt• (pozabljiva) lastnica iPhone-a PROBLEM: izgubljeni kontakti IDEJA: aplikacija za upravljanje s kontakti! UX arhitekt Razvojna Ideja Arhitekt Tester / analitik ekipa
  • 16. UX arhitekt RazvojnaIdeja Arhitekt Tester / analitik ekipa
  • 17. UX arhitekt RazvojnaIdeja Arhitekt Tester / analitik ekipa
  • 18. UX arhitekt RazvojnaIdeja Arhitekt Tester / analitik ekipa
  • 19. Implementacija UX arhitekt Razvojna Ideja Arhitekt Tester / analitik ekipa
  • 20. UX in UPORABNIŠKI VMESNIK Uporabniki so vedno zahtevnejši Pričakovanja vedno višja Klienti so neizkoriščeni Brskalniki so vedno hitrejši
  • 21. KLIENTI JavaScript podprt na glavnih platformah Mobilno Desktop (Windows, Mac) Prvi (edini) stik uporabnika z aplikacijo Čustveno dojemanje Klient postaja svoja aplikacija
  • 22. KLIENTI JavaScript podprt na glavnih platformah Mobilno Desktop (Windows, Mac) Prvi (edini) stik uporabnika z aplikacijo Čustveno dojemanje Klient postaja svoja aplikacija, ki teče na eni strani in je na voljo tudi offline
  • 23. PROBLEM Razvijalci odkrivajo toplo vodo Različne implementacije UI-ja Prvo srečanje z jQueryem Novo kladivo DOM = žebelj
  • 24. CILJIAli „kako si arhitekt želi, da bi aplikacija delovala“ 1. Stanje & modeli morajo živeti na enem mestu 2. Spremembe modela se morajo odražati na vseh mestih vmesnika, kjer se pojavlja 3. Enostavna struktura kode za vzdrževanje 4. Čim manj „framework“ & „glue“ kode
  • 25. REŠITEV
  • 26. BACKBONE.JS „Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface. “ - http://documentcloud.github.com/backbone
  • 27. BACKBONE.JS Osnovni objekti Modeli (Model) Zbirke (Collection) Pogledi (View) Usmerjevalnik / aplikacija (Router) Dogodki (Events) Sinhronizacija Kvazi JavaScript MVC
  • 28. BACKBONE.JS Malo zunanjih odvisnosti Underscore.js Json2.js (za sinhronizacijo) jQuery (za View) Enostavna uporaba Vrhunska dokumentacija
  • 29. Modeli Poljubni atributi Podatkovna strukturavar Contact = Backbone.Model.extend({});var myContact = new Contact();myContact.set({ firstName: Anze, lastName: Vodovnik‚});
  • 30. Modeli, 2. del var myContact = new Contact({ firstName: Anze, lastName: Vodovnik‚ }); myContact.get(‚firstName‘);
  • 31. Modeli, 3. del var Contact = Backbone.Model.extend({ initialize: function(contact) { if(!contact || !contact.firstName) { throw „MissingRequiredData“; } }, validate: function(attrs) { if(attrs.email) { if(!_.isString(attrs.email) || attrs.title.length > 100) { return „Email not valid.“ } } } });
  • 32. Zbirke Več kot le array Sinhronizacija, eventi... var AddressBook = Backbone.Collection.extend({ model: Contact, initialize: function() {} }); var myAddressBook = new AddressBook(); myAddressBook.add(myContact);
  • 33. Pogledi EDINA vez med UI in modelom Manipulacija HTML-ja
  • 34. Usmerjevalnik / aplikacija Aplikacija = več povezanih pogledov Poti (routes), akcijevar Workspace = Backbone.Router.extend({ routes: { „details/:id“ : „details“, „search/:query/p:page“ : „search“ }, details: function(id) { ... } search: function(query, page) { ... }});
  • 35. M V CModel odel iew View ontroller RouterCollection
  • 36. Demo 1-6Uvod v Backbone.js
  • 37. Backbone.Sync Out-of-the-box sinhronizacija CRUD over REST Create > POST /collection Read > GET /collection[/id] Update > PUT /collection/id Delete > DELETE /collection/id
  • 38. Backbone.Sync & ASP.NET MVC MVC je prinesel RESTful URL-je Od MVC 2.0 FUTURES dalje, podpora za JSON serializacijo objektov v requestu
  • 39. Demo 7Backbone.Sync & ASP.NET MVC
  • 40. Backbone.Sync je funkcija lahko jo prepišemo lahko jo spremenimo LocalStorage adapter - Jérôme Gravel-Niquet https://github.com/jeromegn/localtodos
  • 41. CILJI – PONOVNI PREGLEDAli „kako si arhitekt želi, da bi aplikacija delovala“ 1. Stanje & modeli morajo živeti na enem mestu MODELI – Model, Collection 2. Spremembe modela se morajo odražati na vseh mestih vmesnika, kjer se pojavlja VIEW MODEL - Views 3. Enostavna struktura kode za vzdrževanje MVC je dokaj poznan, uveljavljen 4. Čim manj „framework“ & „glue“ kode
  • 42. FRAMEWORK & GLUE KODAAli „nočna mora vseh razvijalcev“ Pisanje lastnega ogrodja se ne splača Ogromno obstoječih, dobrih Nuget je vaš najboljši prijatelj Diagnostika Odvisnosti Eventi Komunikacija med widget-i
  • 43. RequireJSModule & odvisnosti Asinhrono nalaganje Nadzor odvisnosti Moduli Podpira jQuery (require-jquery.js) http://requirejs.org/
  • 44. PubSubRazklop funkcionalnosti „lastni“ dogodki, brez relacije z DOMom Kopija iz DOJO ogrodja (Pete Higgins) $.publish, $.subscribe https://gist.github.com/826794
  • 45. Underscore.jsUtility belt ~60 „utility“ funkcij „Je kravata k jQuery obleki“ Object-oriented ali funkcijski stil _.map([1, 2, 3], function(n){ return n * 2; }); _([1, 2, 3]).map(function(n){ return n * 2; }); http://documentcloud.github.com/underscore/
  • 46. Underscore.jsUtility belt each, map, reduce, any, min, sortBy, groupBy _.each([1, 2, 3], function(n){ console.log(n); }); _.reduce([5, 10, 15], function(memo, n) { return memo + n; }, 0);  30 _.map([1, 2, 3], function(n) { return n * 5; });  [5, 10, 15]
  • 47. Underscore.js Map/Reduce – štetje besedvar lyrics = [ {line : 1, words : "Im a lumberjack and Im okay"}, {line : 2, words : "I sleep all night and I work all day"}, {line : 3, words : "Hes a lumberjack and hes okay"}, {line : 4, words : "He sleeps all night and he works all day"} ];_(lyrics).chain() .map(function(line) { return line.words.split( ); }) .flatten() .reduce(function(counts, word) { counts[word] = (counts[word] || 0) + 1; return counts; }, {}) .value(); => {lumberjack : 2, all : 4, night : 2 ... }
  • 48. Underscore.js & Predloge (templates) Out-of-the-box funkcionalnost _.template(); Loči HTML od JavaScript/logike
  • 49. Underscore.js & Predloge (templates)
  • 50. Underscore.js & Predloge (templates)
  • 51. Sestava „JavaScript“ aplikacijeSeznam kontaktov Prikaz kontakta Iskalnik ... Application Framework (Backbone...) Diagnostics, Events, core moduli (JSON...) jQuery / Ogrodje
  • 52. Demo 8RequireJS & PubSub
  • 53. http://www.metrowife.net
  • 54. POVZETEK Razvoj je podrejen čustvom uporabnika in izkušnji pri uporabi (UX) Procesi so spremenjeni Vedno večja pomembnost JavaScript aplikacij Arhitektura Code reuse
  • 55. POVZETEK Razvoj je podrejen čustvom uporabnika in izkušnji pri uporabi (UX) [good thing] Procesi so spremenjeni [good thing] Vedno večja pomembnost JavaScript aplikacij [semi-good thing] Arhitektura Code reuse
  • 56. HVALA

×