City Mouse Mobile - A Case Study
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
936
On Slideshare
894
From Embeds
42
Number of Embeds
5

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 42

http://frontend.co.il 30
http://localhost 5
http://demo.stg.netcraft.co.il 3
http://netcraft.co.il 2
http://www.linkedin.com 2

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. City Mouse Mobile A Case Study
  • 2. Me
      • Serge Krul
      • FED Team Leader at netcraft
      • Loves Plants
      • Hates Zombies
  • 3. // TODO
      • City Mouse Mobile
      • Why Mobile Web?
      • Mobile Web Gaps
      • How Mouse Mobile minds them
      • 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=&quot;checkbox&quot; />
  • 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: &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. 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(&quot;MouseEvent&quot;);     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
      • [email_address]
      • 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 :)