Mobile Agents Mouse House Creative Technologies Mike OBrien.
City Mouse Mobile - A Case Study
-
Upload
serge-krul -
Category
Technology
-
view
678 -
download
0
Transcript of City Mouse Mobile - A Case Study
![Page 1: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/1.jpg)
City Mouse Mobile
A Case Study
![Page 2: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/2.jpg)
Me
• Serge Krul• FED Team Leader at netcraft• Loves Plants• Hates Zombies
![Page 3: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/3.jpg)
// TODO
– City Mouse Mobile– Why Mobile Web?– Mobile Web Gaps– How Mouse Mobile minds them– How would you mind it today?
![Page 4: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/4.jpg)
City Mouse Mobile [link]
![Page 5: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/5.jpg)
Why Mobile Web?
![Page 6: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/6.jpg)
It's Web
![Page 7: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/7.jpg)
Still, a website
Splash Screen Look & Feel Native Share Look & Feel
Native Call Action Keypad Location Aware Smart Loading
![Page 8: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/8.jpg)
One to many
App Store Market Place
Stand Alone
Desktop
![Page 9: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/9.jpg)
The business factor
• Use existing knowledge• One code-base• Deliver to several platforms
![Page 10: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/10.jpg)
The cool factor
• Push web technologies to the edge• Evangelize FED• Internet will be everywhere / everything
![Page 11: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/11.jpg)
Mobile Web Gaps
• Look & feel• Fixed scrolling• Vanilla features• Map• Last gap
![Page 12: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/12.jpg)
Mind the Gap
How's Mobile Web different
![Page 13: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/13.jpg)
It's Web...
![Page 14: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/14.jpg)
Look & feel
• Custom themes• CSS3• jqTouch for Pages• Touch events
![Page 15: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/15.jpg)
border-radius
![Page 16: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/16.jpg)
Images
![Page 17: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/17.jpg)
Today
Mobile UI components
![Page 18: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/18.jpg)
Sencha Touch Kitchen Sink [link]
![Page 19: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/19.jpg)
jQuery Mobile [link]
![Page 20: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/20.jpg)
<input type="checkbox" />
![Page 21: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/21.jpg)
Happily ever ::after CSS3 shapes
![Page 22: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/22.jpg)
To name a few...
jqTouch iUI joApp
kendoUI (soon)
TouchyBP (wink)
PastryKit (wtf?)
![Page 23: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/23.jpg)
Mind the Gap
Fixed scrolling
![Page 24: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/24.jpg)
Fixed header and footer
![Page 25: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/25.jpg)
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
![Page 26: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/26.jpg)
Today
Newer scrolling plugins
![Page 27: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/27.jpg)
To name a few...
iScroll 4 Scrollability touch-scroll
[more]
![Page 28: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/28.jpg)
Tomorrow
What the future (aka Apple) brings
![Page 29: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/29.jpg)
{ position: fixed; }
iOS5
![Page 30: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/30.jpg)
Mind the Gap
Vanilla Features
![Page 31: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/31.jpg)
#gallery
?Pages
System
![Page 32: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/32.jpg)
Templates System
![Page 33: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/33.jpg)
Local Content
Geolocation
![Page 34: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/34.jpg)
Mind the Map
![Page 35: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/35.jpg)
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"};
![Page 36: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/36.jpg)
Simulate Event
MouseTouch
![Page 37: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/37.jpg)
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(); }};
![Page 38: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/38.jpg)
Today
![Page 39: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/39.jpg)
Israel is on GMap
![Page 40: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/40.jpg)
The last Gap
![Page 41: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/41.jpg)
PhoneGap
![Page 42: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/42.jpg)
Makes these possible
Appstore Native Share
![Page 43: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/43.jpg)
Thank you!
• Me again: Serge Krul• [email protected]• FED Team leader, netcrfat• Mobile Web course• HTML5 course• Netcraft Academy - Ben Gurion 30, Ramat Gan.
![Page 44: City Mouse Mobile - A Case Study](https://reader033.fdocuments.net/reader033/viewer/2022060122/55960a6d1a28abf57b8b4721/html5/thumbnails/44.jpg)
And if you've asked yourself about the font...
I'm Comic Sans, Asshole :)