Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
Mobile Web Rising
Adrian Kosmaczewski - akosma software
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
http://www.flickr.com/photos/oskay/365607662/
Slide 5
Slide 5 text
http://www.flickr.com/photos/oskay/365607591/
Slide 6
Slide 6 text
http://www.flickr.com/photos/blakespot/2379207825/
Slide 7
Slide 7 text
Objective-C
Slide 8
Slide 8 text
Cocoa
Slide 9
Slide 9 text
http://www.flickr.com/photos/thenovys/3908472000/
Slide 10
Slide 10 text
Alternatives
Slide 11
Slide 11 text
http://akosma.com/2009/10/29/iphone-apps-without-objective-c/
Slide 12
Slide 12 text
http://t2impact.blogspot.com/2010/11/reflections-from-pcw17-november-2010.html
Slide 13
Slide 13 text
Presentation in 2009
http://www.slideshare.net/akosma/webtuesday-mobile-web-applications-framework-overview
Slide 14
Slide 14 text
http://akosma.com/2009/12/09/webtuesday-mobile-app-frameworks/
Slide 15
Slide 15 text
Market
Slide 16
Slide 16 text
Web
Slide 17
Slide 17 text
Web or native apps?
Slide 18
Slide 18 text
update frequency
usage frequency
UI complexity
native
apps
web
apps
games
calculator
business apps
reports
compatibility with other
mobile platforms
Slide 19
Slide 19 text
Web Application Native Application
Pros
Cons
Simpler deployment and
updates;
known technologies,
cheaper to maintain;
access to GPS information;
basic offline support;
cross-platform
Faster execution;
access to address book,
accelerometer, audio and
camera; App Store;
3D games and animations;
push notifications;
Bonjour networking support.
Slower to execute;
more difficult to debug on the
client side; limited access to
hardware; no official app
store; harder to monetize
App Store review process;
longer update times;
relative complexity and higher
cost of dev process
Slide 20
Slide 20 text
http://twitter.com/akosma/status/26456836540
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
Market
Slide 23
Slide 23 text
as of February 2011
Slide 24
Slide 24 text
4.7%
http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
Slide 25
Slide 25 text
of all web browsing
Slide 26
Slide 26 text
worldwide is done
Slide 27
Slide 27 text
using Mobile browsers
Slide 28
Slide 28 text
4.7%
http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
Slide 29
Slide 29 text
March 2010...
http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
Slide 30
Slide 30 text
1.96%
Slide 31
Slide 31 text
4.7%
http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
Slide 32
Slide 32 text
http://en.wikipedia.org/wiki/File:Usage_share_of_web_browsers_(Source_Stat_Counter).svg
Slide 33
Slide 33 text
http://thenextweb.com/mobile/2011/01/06/the-great-rise-of-the-mobile-web/
Slide 34
Slide 34 text
http://thenextweb.com/mobile/2011/01/06/the-great-rise-of-the-mobile-web/
Slide 35
Slide 35 text
Browsers
Browser Share Notes
Safari 24% iPad not included
Opera 21% Mini & Mobile
Nokia 16%
Android 15% Includes tablets
BlackBerry 14% Marginal WebKit
http://www.quirksmode.org/blog/archives/2011/03/mobile_browser_6.html
Slide 36
Slide 36 text
Engines
Engine Share Notes
WebKit 57%
Safari, Nokia, Android,
Samsung,
BlackBerry, MeeGo, Symbian...
Presto 21%
Opera Mini and
Opera Mobile
Gecko, Trident,
Mango, UC, Obigo...
22%
http://www.quirksmode.org/mobile/mobilemarket.html
Slide 37
Slide 37 text
WebKit
Slide 38
Slide 38 text
A family, actually
Slide 39
Slide 39 text
http://www.quirksmode.org/webkit.html
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
Technologies
Slide 42
Slide 42 text
http://www.w3.org/2011/02/mobile-web-app-state.html
SVG
CSS3
WOFF
Canvas
CSS 3D
CSS Animations
Touch events in DOM
HTML Speech
Web Storage
Contacts API
Calendar API
File Writer API
Geolocation API
XMLHttpRequest
Websockets
Messaging API
Application Cache
HTML5
Web Workers
Slide 43
Slide 43 text
http://newvoicesforresearch.blogspot.com/2010_04_01_archive.html
Slide 44
Slide 44 text
Cross-Browser
Slide 45
Slide 45 text
Complexity
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
Frameworks
Slide 48
Slide 48 text
Fashion
Slide 49
Slide 49 text
Pioneer
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
iUI Demo
@import "iui.css";
Slide 52
Slide 52 text
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
Establishment
Slide 55
Slide 55 text
http://www.jqtouch.com/
Slide 56
Slide 56 text
http://jquerymobile.com/
Slide 57
Slide 57 text
http://jqueryui.com/
Slide 58
Slide 58 text
http://www.sencha.com/products/touch/
Slide 59
Slide 59 text
http://www.sproutcore.com/
Slide 60
Slide 60 text
http://cappuccino.org/
Slide 61
Slide 61 text
http://dojotoolkit.org/features/mobile
Slide 62
Slide 62 text
Lightweight
Slide 63
Slide 63 text
http://zeptojs.com/
Slide 64
Slide 64 text
http://xuijs.com/
Slide 65
Slide 65 text
http://joapp.com/
Slide 66
Slide 66 text
http://webapp-net.com/
Slide 67
Slide 67 text
http://paularmstrongdesigns.com/projects/basejs/
Slide 68
Slide 68 text
http://www.limejs.com/
Slide 69
Slide 69 text
http://www.mobl-lang.org/
Slide 70
Slide 70 text
http://guryjs.org/
Slide 71
Slide 71 text
... and more
Slide 72
Slide 72 text
http://html5boilerplate.com/
Slide 73
Slide 73 text
http://www.notjustagrid.com/default.asp
Slide 74
Slide 74 text
http://chocolatechipmobile.wordpress.com/
Slide 75
Slide 75 text
http://snippetspace.com/
Slide 76
Slide 76 text
http://unify.github.com/unify/
Slide 77
Slide 77 text
http://www.zkoss.org/
Slide 78
Slide 78 text
http://dhtmlx.com/touch/
Slide 79
Slide 79 text
http://www.ipfaces.org/
Slide 80
Slide 80 text
http://www.winktoolkit.org/
Slide 81
Slide 81 text
http://code.rememberthisguy.com/safire/
Slide 82
Slide 82 text
http://www.journyx.com/jpint
Slide 83
Slide 83 text
Platforms
Slide 84
Slide 84 text
http://mobile.yahoo.com/developers
Slide 85
Slide 85 text
http://developer.yahoo.com/mobile/blueprintquickstart/BP_QS_Overview.html
Slide 86
Slide 86 text
Blueprint 1.1 static example pages
List content
Restaurant
Listings
Organized by cuisine,
with brief reviews, ratings, and thumbnails, with custom
page header and footer
Slide 87
Slide 87 text
No content
Slide 88
Slide 88 text
Go beyond the browser...
Slide 89
Slide 89 text
... and sell your HTML in an
app marketplace
Slide 90
Slide 90 text
("App Store" is a trademark of Apple Inc.)
Slide 91
Slide 91 text
http://www.appcelerator.com/
Slide 92
Slide 92 text
http://www.phonegap.com/
Slide 93
Slide 93 text
http://www.nimblekit.com/
Slide 94
Slide 94 text
http://rhomobile.com/
Slide 95
Slide 95 text
No content
Slide 96
Slide 96 text
Or in a web app
market?
Slide 97
Slide 97 text
OpenAppMkt.com
Slide 98
Slide 98 text
No content
Slide 99
Slide 99 text
No content
Slide 100
Slide 100 text
No content
Slide 101
Slide 101 text
No content
Slide 102
Slide 102 text
No content
Slide 103
Slide 103 text
Example
Slide 104
Slide 104 text
Dezeen Watchstore
App
Slide 105
Slide 105 text
No content
Slide 106
Slide 106 text
http://dezeenwatchstore.com/clock/
Slide 107
Slide 107 text
No content
Slide 108
Slide 108 text
No content
Slide 109
Slide 109 text
No content
Slide 110
Slide 110 text
Dezeen Watch Store
Slide 111
Slide 111 text
CACHE MANIFEST
CACHE:
clock.js
index.html
raphael-min.js
jquery.js
iphone_320.css
iphone_480.css
ipadlandscape.css
ipadportrait.css
dws.png
dws_lscape_iphone.png
dws_portrait_ipad.png
dws_landscape_ipad.png
startup.png
bg.png
iphone_lscape_bg.png
ipad_pt_bg.png
ipad_ls_bg.png
install.png
ipad_prompt.png
#11210
Slide 112
Slide 112 text
No content
Slide 113
Slide 113 text
Remember
Slide 114
Slide 114 text
Web Development
==
Software Development
Slide 115
Slide 115 text
http://kosmaczewski.net/2007/08/02/web-development-equal-
software-development/
Slide 116
Slide 116 text
• Have a specification;
• Have a schedule / Scrum burn chart;
• Have an architecture;
• Make a prototype;
• Have (human) testers;
Slide 117
Slide 117 text
• Automate your tests and builds;
• Use a bug database;
• Use version control;
• Be agile;
• Know your audience;
• Scope your target.
Slide 118
Slide 118 text
The Joel Test
http://en.wikipedia.org/wiki/File:Joel_spolsky_on_20_sept_2007.jpg
http://www.joelonsoftware.com/articles/
fog0000000043.html
Slide 119
Slide 119 text
Test in multiple devices
Slide 120
Slide 120 text
No content
Slide 121
Slide 121 text
Links
Slide 122
Slide 122 text
• Standards for Web Applications on Mobile
http://www.w3.org/2011/02/mobile-web-app-state.html
• QuirksMode
http://www.quirksmode.org/mobile/
• State of the Mobile Web
http://www.opera.com/smw/
Slide 123
Slide 123 text
No content
Slide 124
Slide 124 text
Thanks!
Slide 125
Slide 125 text
Questions?