Скачать презентацию Mobile Web App Design Getting Started Michael Doran Скачать презентацию Mobile Web App Design Getting Started Michael Doran

5ac3ed80406fbf2fa8f5bd8290150bd9.ppt

  • Количество слайдов: 39

Mobile Web App Design …Getting Started Michael Doran, Systems Librarian doran@uta. edu Mobile Web App Design …Getting Started Michael Doran, Systems Librarian doran@uta. edu

…i. Phone statistics, library services, World. Cat mobile, Android, Millennials, charts and graphs, yada, …i. Phone statistics, library services, World. Cat mobile, Android, Millennials, charts and graphs, yada, yada… Okay, we get it! …now what?

…now what? buy? www. boopsie. com/ www. blackboard. com/Mobile/ build? Hmm. Is it too …now what? buy? www. boopsie. com/ www. blackboard. com/Mobile/ build? Hmm. Is it too late to join buy 4 lib?

e. g. i. Phone app written in Cocoa requiring download via the App Store e. g. i. Phone app written in Cocoa requiring download via the App Store build web app? native app? “Most of the folks I know in app development are moving to standardization on web versus device specific development. ” Linda Woods AT&T Education Advocate Industry & Mobility Application Solutions 2009 Handheld Librarian Online Conference

This just out… an i. Phone OPAC. Download it from the App Store. What? This just out… an i. Phone OPAC. Download it from the App Store. What? Uhhh. I just bought a Nexus One. Loser!

The Tao of mobile web (app) design A mobile web app should do one The Tao of mobile web (app) design A mobile web app should do one thing and do it well. A mobile web app should be as simple as possible, but no simpler. n n standards compliance web usability design minimalist design and testing q q cross-browser cross-platform

a good mobile web app typical single-interface that-does-everything library web app 1 a good mobile web app typical single-interface that-does-everything library web app 1

1 1

4 4

Simple is as simple does. Simple is as simple does.

i. Phone web apps (according to Apple*) * Content on i. Phone: Is It i. Phone web apps (according to Apple*) * Content on i. Phone: Is It a Webpage or an Application? n Three categories: q q q compatible with Safari on i. Phone optimized for Safari on i. Phone web application W 3 C standards compliant - no framesets or - unsupported technologies (cough, Flash) If it doesn’t look exactly like an i. Phone app it can’t be any good! 2

i. Phone web application tool kits n i. UI: i. Phone User Interface Framework i. Phone web application tool kits n i. UI: i. Phone User Interface Framework q q n i. Web. Kit: ditto q q n http: //code. google. com/p/iui/ License: BSD http: //iwebkit. net/ License: GNU LGPL Java. Script libraries, CSS code, images… I didn’t have to start from scratch. j. QTouch (j. Query plugin) q q http: //www. jqtouch. com/ License: MIT

i. UI i. Web. Kit j. QTouch i. UI i. Web. Kit j. QTouch

“Moore’s Law doesn’t apply to batteries…as we’re now going into mobile…the cycles count. ” “Moore’s Law doesn’t apply to batteries…as we’re now going into mobile…the cycles count. ” Douglas Crockford* Gee, I love what j. Query can do, but maybe server-side processing is the way to go. * Quoted in “Coders at Work” by Peter Seibel, pg. 100

[11: 45] <jkeck> jquery++ [11: 45] <mjgiarlo> @fight bacon jquery [11: 45] <zoia> jquery: [11: 45] jquery++ [11: 45] @fight bacon jquery [11: 45] jquery: 2090000, bacon: 106 [11: 45] whatever

Handheld emulators/simulators Operating System n Generally come with handheld OS SDKs q web. OS Handheld emulators/simulators Operating System n Generally come with handheld OS SDKs q web. OS (Palm) n q http: //developer. apple. com/iphone/ Android (Google & Open Handset Alliance) n n http: //developer. palm. com/ i. Phone (Apple) n q Software Development Kit http: //developer. android. com/ Web-based simulators (be leery) q Opera Mini Simulator – good n q http: //www. opera. com/mini/demo/ Testi. Phone. com – absolutely worthless

Oooohh Oooohh

Handheld emulators/simulators Android Palm i. Phone Opera Mini Handheld emulators/simulators Android Palm i. Phone Opera Mini

Browser compatibility – don’t skip this Internet Explorer Firefox Chrome Browser compatibility – don’t skip this Internet Explorer Firefox Chrome

XHTML/CSS validation n XHTML/HTML CSS Accessibility Get right with these before you move on XHTML/CSS validation n XHTML/HTML CSS Accessibility Get right with these before you move on to platform compatibility.

Mobile design – platform compatibility viewport Mobile design – platform compatibility viewport

Mobile design – platform compatibility Larger buttons for finger tapping Mobile design – platform compatibility Larger buttons for finger tapping

Mobile design – platform compatibility 2 Mobile design – platform compatibility 2

Test it on the real thing (handset), too! Just need to… test… my app…. Test it on the real thing (handset), too! Just need to… test… my app…. one… more time Or, as a last resort… Borrow from colleagues

Don’t forget the documentation! n n n Mobile/handheld developer sites have useful information on Don’t forget the documentation! n n n Mobile/handheld developer sites have useful information on how to “design for small” Read it Seriously. Read it. A viewport? Who knew? It’s a small world after all.

Example docs and websites n Reading? I just want to code! i. Phone q Example docs and websites n Reading? I just want to code! i. Phone q q q n Principles and Guidelines for Creating Great i. Phone Content i. Phone Human Interface Guidelines for Web Applications Google Groups: i. Phone. Web. Dev Others q q q Opera Mini Developer resources many, more… still more…

“Deliver relevance -- expectations are high and you can only dazzle once. ” Cindy “Deliver relevance -- expectations are high and you can only dazzle once. ” Cindy Cunningham, OCLC LITA 2009 National Forum Patrons can be persnickety. Maybe I should practice on the Library staff, first.

Hmmm, a staff app… …easier to do a needs assessment …easier to get UI Hmmm, a staff app… …easier to do a needs assessment …easier to get UI feedback …library has Wi. Fi, so we can use mobile devices without a data plan What would help staff working in the stacks?

Shelf. Lister version 2. 0 Start barcode End barcode http: //vts. uta. edu/sl. htm Shelf. Lister version 2. 0 Start barcode End barcode http: //vts. uta. edu/sl. htm 3

Shelf. Lister version 2. 0 6 Shelf. Lister version 2. 0 6

Consider releasing your mobile app as free open source. It’s better than free beer! Consider releasing your mobile app as free open source. It’s better than free beer! UTA hereby grants USER permission to use, copy, modify, and distribute this software and its documentation for any purpose and without fee […]

If that imbecile up there can do it… How hard could it be? Getting If that imbecile up there can do it… How hard could it be? Getting something to beta would only take me a week.

That’s it! Any questions? @dchud: Thanks for giving up your presentation slot. That’s it! Any questions? @dchud: Thanks for giving up your presentation slot.