City Mouse Mobile - A Case Study

נתמקד באתגרים הספציפיים שעבדנו מולם בפיתוח אפליקציית האייפון שכולה בדפדפן, שכוללת ארכיטקטורת טעינה חכמה, אינטגרציה עם מפות ושימוש ביכולות נייטיב. נדון באפשרויות העומדות בפנינו כיום בבואנו לפתח אפליקציה דומה.

Transcript

1. City Mouse Mobile A Case Study
2. Me • Serge Krul • FED Team Leader at netcraft • Loves Plants • Hates Zombies
3. // TODO 1. City Mouse Mobile 2. Why Mobile Web? 3. Mobile Web Gaps 4. How Mouse Mobile minds them 5. How would you mind it today?
4. City Mouse Mobile [link]
5. Why Mobile Web?
6. It's Web
7. Still, a website Splash Screen Look & Feel Native Share Look & Feel Native Call Action Keypad Location Aware Smart Loading
8. One to many App Store Market Place Stand Alone Desktop
9. The business factor • Use existing knowledge • One code-base • Deliver to several platforms
10. The cool factor • Push web technologies to the edge • Evangelize FED • Internet will be everywhere / everything
11. Mobile Web Gaps • Look & feel • Fixed scrolling • Vanilla features • Map • Last gap
12. Mind the Gap How's Mobile Web different
13. It's Web...
14. Look & feel • Custom themes • CSS3 • jqTouch for Pages • Touch events
15. border-radius
16. Images
17. Today Mobile UI components
18. Sencha Touch Kitchen Sink [link]
19. jQuery Mobile [link]
20. <input type="checkbox" />
21. Happily ever ::after CSS3 shapes
22. To name a few... jqTouch iUI joApp kendoUI (soon) TouchyBP (wink) PastryKit (wtf?)
23. Mind the Gap Fixed scrolling
24. Fixed header and footer
25. Uses iScroll $.fn.scrollVertically = function (options) { return this.each(function () { new iScroll(this, options); }); }; $.fn.scrollHorizontally = function (options) { return this.each(function () { new iScrollHorizontal(this, options); }); }; $.jQTouch.addExtension(function (jQT) { $(document.body).bind('pageInserted', function () { horizontal.scrollHorizontally(...); vertical.scrollVertically(...); }); }); jqt.scrolling.js
26. Today Newer scrolling plugins
27. To name a few... iScroll 4 Scrollability touch-scroll [more]
28. Tomorrow What the future (aka Apple) brings
29. { position: fixed; } iOS5
30. Mind the Gap Vanilla Features
31. #gallery ? Pages System
32. Templates System
33. Local Content Geolocation
34. Mind the Map
35. It's Waze var g_waze_config = { div_id: "map", locale: "israel", zoom: 8, token: "666", framed_cloud_image_url: "cloud", alt_base_layer: "israel_colors", alt_map_servers: "ymap1/wms-c" };
36. Simulate Event Mouse Touch
37. It's a maze... MapManager.simulateEvent = function (event, type, doNotPreventDefault) { var event = event.originalEvent, touches = event.changedTouches, first = touches[0]; var simulatedEvent = document.createEvent("MouseEvent"); simulatedEvent.initMouseEvent( first.screenX, first.screenY, first.clientX, first.clientY ); first.target.dispatchEvent(simulatedEvent); if (doNotPreventDefault != true) { event.preventDefault(); } };
38. Today
39. Israel is on GMap
40. The last Gap
41. PhoneGap
42. Makes these possible Appstore Native Share
43. Thank you! • Me again: Serge Krul • sergek@netcraft.co.il • FED Team leader, netcrfat • Mobile Web course • HTML5 course • Netcraft Academy - Ben Gurion 30, Ramat Gan.
44. And if you've asked yourself about the font... I'm Comic Sans, Asshole :)