0
City Mouse Mobile A Case Study
Me <ul><ul><li>Serge Krul </li></ul></ul><ul><ul><li>FED Team Leader at netcraft </li></ul></ul><ul><ul><li>Loves Plants <...
// TODO <ul><ul><li>City Mouse Mobile </li></ul></ul><ul><ul><li>Why Mobile Web? </li></ul></ul><ul><ul><li>Mobile Web Gap...
City Mouse Mobile [ link ]
Why Mobile Web?
It's Web
Still, a website Splash Screen Look & Feel Native Share Look & Feel Native Call Action Keypad Location Aware Smart Loading
One to many App Store Market Place Stand Alone Desktop
The business factor <ul><ul><li>Use existing knowledge </li></ul></ul><ul><ul><li>One code-base </li></ul></ul><ul><ul><li...
The cool factor <ul><ul><li>Push web technologies to the edge </li></ul></ul><ul><ul><li>Evangelize FED </li></ul></ul><ul...
Mobile Web Gaps <ul><ul><li>Look & feel </li></ul></ul><ul><ul><li>Fixed scrolling </li></ul></ul><ul><ul><li>Vanilla feat...
Mind the Gap How's Mobile Web different
It's  Web ...
Look & feel <ul><ul><li>Custom themes </li></ul></ul><ul><ul><li>CSS3 </li></ul></ul><ul><ul><li>jqTouch for Pages </li></...
border-radius
Images
Today Mobile UI components
Sencha Touch Kitchen Sink [ link ]
jQuery Mobile [ link ]
<input type=&quot;checkbox&quot; />
Happily ever ::after CSS3 shapes
To name a few... jqTouch iUI joApp kendoUI (soon) TouchyBP (wink) PastryKit ( wtf ?)
Mind the Gap Fixed scrolling
Fixed header and footer
Uses iScroll $.fn.scrollVertically = function (options) {      return this.each(function () {          new iScroll(this, o...
Today Newer scrolling plugins
To name a few... iScroll 4 Scrollability touch-scroll [ more ]
Tomorrow What the future (aka Apple) brings
{ position: fixed; } iOS5
Mind the Gap Vanilla Features
#gallery ? Pages System
Templates System
Local Content Geolocation
Mind the  Map
It's Waze var g_waze_config = {      div_id: &quot;map&quot;,      locale: &quot;israel&quot;,      zoom: 8,      token: &...
Simulate Event Mouse Touch
It's a  maze ... MapManager. simulateEvent  = function (event, type, doNotPreventDefault)  {      var event = event.origin...
Today
Israel is on GMap
The last Gap
PhoneGap
Makes these possible Appstore Native Share
Thank you! <ul><ul><li>Me again: Serge Krul </li></ul></ul><ul><ul><li>[email_address] </li></ul></ul><ul><ul><li>FED Team...
And if you've asked yourself about the font... I'm Comic Sans, Asshole  :)
Upcoming SlideShare
Loading in...5
×

City Mouse Mobile - A Case Study

680

Published on

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

  • Be the first to like this

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

No notes for slide

Transcript of "City Mouse Mobile - A Case Study"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×