city mouse mobile - a case study
TRANSCRIPT
City Mouse Mobile
A Case Study
Me
• Serge Krul• FED Team Leader at netcraft• Loves Plants• Hates Zombies
// TODO
– City Mouse Mobile– Why Mobile Web?– Mobile Web Gaps– How Mouse Mobile minds them– How would you mind it today?
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
• Use existing knowledge• One code-base• Deliver to several platforms
The cool factor
• Push web technologies to the edge• Evangelize FED• Internet will be everywhere / everything
Mobile Web Gaps
• Look & feel• Fixed scrolling• Vanilla features• Map• Last gap
Mind the Gap
How's Mobile Web different
It's Web...
Look & feel
• Custom themes• CSS3• jqTouch for Pages• Touch events
border-radius
Images
Today
Mobile UI components
Sencha Touch Kitchen Sink [link]
jQuery Mobile [link]
<input type="checkbox" />
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, 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
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: "map", locale: "israel", zoom: 8, token: "666", framed_cloud_image_url: "cloud", alt_base_layer: "israel_colors", alt_map_servers: "ymap1/wms-c"};
Simulate Event
MouseTouch
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(); }};
Today
Israel is on GMap
The last Gap
PhoneGap
Makes these possible
Appstore Native Share
Thank you!
• Me again: Serge Krul• [email protected]• FED Team leader, netcrfat• Mobile Web course• HTML5 course• Netcraft Academy - Ben Gurion 30, Ramat Gan.
And if you've asked yourself about the font...
I'm Comic Sans, Asshole :)