Web Apps and more
mockee@douban
http://bit.ly/IAhFE5

HTML5
Once again...

Standard ?!
http://www.w3.org/2011/02/htmlwg-pr.html
http://blog.whatwg.org/html-is-the-new-html5
http://burningbird.net/node/156

"New open standards created in
the mobile era, such as HTML5,
will win on mobile devices. "
Steve Jobs
April, 2010
http://www.apple.com/hotnews/thoughts-on-flash/

"HTML5 is now universally supported
on major mobile devices.
This makes HTML5 the best solution for
creating and deploying content in the
browser across mobile platforms."
Danny Winokur
November 9, 2011
http://blogs.adobe.com/conversations/2011/11/flash-focus.html

http://gs.statcounter.com/press/mobile-internet-usage-is-doubling-year-on-year

Keywords
Identifying Web Apps

Self Contained
Immersive
Work Offline
Device Aware
Functional
New Navigable
Interactive
Ajaxcellent
http://www.html5rocks.com/webappfieldguide/know-your-apps/app-checklist/

Concepts
damned...

Desktop
Hybrid
Native
Mobile App Web

Worry about
Browsers & Devices

Top 9 Mobile Browsers in China

Top 12 Browser Versions in China

RangeComic

Top 10 Browsers in Douban
Google Analytics

Top 10 Mobile Devices in Douban
Google Analytics

Real World
Douban Read
http://read.douban.com

Submission System
Author Editor
WYSIWYG

dimensions
align
upload
legend

<div class="figure">
<img src="figure.png" alt="" />
<div class="legend">
<p>figure caption</p>
</div>
</div>
Semantics
Elements
<figure>
<img src="figure.png" alt="" />
<figcaption>
<p>figure caption</p>
</figcaption>
</figure>

<mark>
Semantically highlight parts of text

Web Reader

Content
Adaptation
main techniques

Responsive Web Design
Mobile First
Progressive Enhancement
Server-side Adaptation

Responsive Web Design
by ETHAN MARCOTTE
http://www.alistapart.com/articles/responsive-web-design/

Layout
Responsive
Media Queries
Grids
http://www.lukew.com/ff/entry.asp?1514

Bootstrap
http://markdotto.com/bs2/docs/
Frameless
http://framelessgrid.com/
Golden Grid System
http://goldengridsystem.com/
Less Framework 4
http://markdotto.com/bs2/docs/
1140 Grid
http://cssgrid.net/

Media Queries

Syntax
media_query_list
: S* [media_query [ ',' S* media_query ]* ]?
;
media_query
: [ONLY | NOT]? S* media_type S* [ AND S* expression ]
*
| expression [ AND S* expression ]*
;
expression
: '(' S* media_feature S* [ ':' S* expr ]? ')' S*
;
http://www.w3.org/TR/css3-mediaqueries

@media only screen
and (max-device-width: 1024px)
and (orientation: portrait),
(-webkit-min-device-pixel-ratio: 2)
and (max-device-width: 640px)
{ ... }

window.matchMedia
// get MediaQueryList
var mql = window.matchMedia(
'screen and (orientation: portrait)');
mql.addListener(function(mql){
if (mql.matches) {
console.log('portrait');
} else {
console.log('landscape');
}
});

matchMedia() polyfill
make sure it's hidden
document.createElement('div');
create a <style> node with a media attribute
set a CSS rule applied to a <div>
check to see if the style has been applied
return { matches: bool, media: ma }
http://www.nczonline.net/blog/2012/01/03/css-media-queries-in-javascript-part-1/

orientation: landscape

table of contents
Panel
Progress
New Navigable

Original Retina ?
Large
Medium
Small
Media Queries

Mobile First
Mobile First
Desktop
Bryan Rieger

Format
Fixed-Layout Reflowable
Adobe PDF Kindle Cloud Reader
PostScript Google Books
iBook Author Plain Text
(landscape)

Reflowing & Paging
text block
page break
image block
type page

Zoom or Crop
Blank or Float

Web Workers
Inline Workers Use Cases
WebKitBlobBuilder Prefetching Data
MozBlobBuilder Processing large
arrays, humungous
JSON responses
Handling Errors Updating many rows
"message", "error" of a local web
database
http://www.html5rocks.com/en/tutorials/workers/basics/

paging...
render
paging in background threads
render

Prerender
<link rel="prerender"
href="http://read.douban.com/reader" />
Book Store Reader
Reader
http://prerender-test.appspot.com/
https://developers.google.com/chrome/whitepapers/prerender

Page Visibility API
visibilityState (webkit / moz)
visible hidden prerender
document.addEventListener(
'visibilitychange', function(e) {
// document.visibilityState;
}, false);

Store Reader
if (document.visibilityState === 'hidden'
|| document.visibilityState === 'prerender'
|| document.hidden === 'ture') {
stopSyncReadingProgress();
}
http://www.w3.org/TR/2011/WD-page-visibility-20110602/

SVG
Configure Web Server MIME types
".svg" => "image/svg+xml"
Creating & Converting & Optimizing
Aviary Raven SVG-edit
Vector Magic Scour

SVG in CSS backgrounds
// fallback for IE 6/7/8
background: url(icons.png);
// for modern browsers
background: rgba(0,0,0,0) url(icons.svg);
IE 6/7/8 don't support rgba color values
will automatically ignore this rule
http://caniuse.com/#feat=svg-css

Touch Events
touchstart init
touches Array (1 or 11)
touchmove update
touchInfo
touchend use pageX, pageY
touchcancel clear time
thresholds
Gestures

Gesture
Tap
single, double; hold
Swipe
up, right, down, left
Pinch
in, out; rotate

Scrolling
Native
-webkit-overflow-scrolling: touch;
iScroll 4
Pinch / Zoom, Pull up/down to refresh,
Customizable scrollbars
Scrollability by Joe Hewitt
http://joehewitt.com/2011/10/05/fast-animation-with-ios-webkit

Fullscreen
webkitRequestFullScreen
requestFullscreen
mozRequestFullScreen
webkitCancelFullScreen
exitFullscreen
mozCancelFullScreen
webkitCurrentFullScreenElement
fullscreenElement
mozFullScreenElement
fullscreenEnabled mozFullScreenEnabled
isFullscreen webkitIsFullscreen
http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

webkitRequestFullScreen(
Element.ALLOW_KEYBOARD_INPUT);
Events:
fullscreenchange, fullscreenerror
Compatibility:
F11

Issue 95344:
webkitRequestFullScreen results in a black background
document.documentElement.webkitRequestFullScreen();
http://code.google.com/p/chromium/issues/detail?id=95344

Offline
manifest file
● MIME type: text/cache-manifest
● Same origin (domain & scheme)
Handling Events
checking, error, update, obsolete, cached,
downloading, updateready
http://www.w3.org/TR/html5/offline.html

CACHE MANIFEST
# version 1.0.1
app.html#reader
/ark/js/*
/ark/logo.png favicon.ico
CACHE:
http://img3.douban.com/pics/cover.png
# online whitelist
NETWORK:
#*
/j/reader/
FALLBACK
:
fallback.html

CACHE MANIFEST
# version 1.0.1
Can't include fragment identifiers.
app.html#reader
/ark/js/* A full file name is required, no wildcards allowed.
/ark/logo.png favicon.ico
CACHE: Only one file per line.
http://img3.douban.com/pics/cover.png
# online whitelist
NETWORK:
#*
/j/reader/
FALLBACK:
fallback.html

* Enhance Application Cache for better performance:
/ark/icon-reader.svg , ETag: ...
app.html ETag: ... , Last-Modified: ...
Reduces network bandwidth & latency
with additional meta-data
updated manifest file
Server Client
re-fetch each resouce
newer ? re-fetch : 304
only re-fetch definitely updated files

Compatibility
window.applicationCache
i cached
noupdate
swapCache()
checking
downloading updateready
progress

Detecting Connection
if (navigator.onLine) {
// send data to server
} else {
// use Web Storage or Database
}
window.addEventListener( reading progress
'online', function(e) {
// sync data with server
}, false);
notes & comments

For iOS
Web clip icons
<link rel="apple-touch-icon"
sizes="" href="" />
iPhone 57x57
iPhone Retina 114x114
iPad 72x72
iPad Retina 144x144
http://developer.apple.com/library/ios/#documentation/userexperience/
conceptual/mobilehig/IconsImages/IconsImages.html

Specifying startup image
<link rel="apple-touch-startup-image"
href="img/ipad-landscape.png"
media="screen
and (min-device-width: 481px)
and (max-device-width: 1024px)
and (orientation:landscape)" />
...
iPad - landscape (768-20)x1024
iPad - portrait 768x(1024-20)
iPad Retina ...
iPhone ...
iPhone Retina ...
...
...

Viewport
Remove address (and button) bar
<meta name="apple-mobile-web-app-capable"
content="yes">
window.scrollTo(0, 1);
'load', 'orientationchange' DEMO
location.hash, setTimeout
Change status bar style
// default, black, or black-translucent
<meta name="apple-mobile-web-app-status-bar-style"
content="black">

Framework

mini-framework
Structuralization Backbone.js, micro-
Modules & Widgets Touch, Fx, Overlay
File & Module Loader RequireJS, Oz.js, Do.js
W3C Selectors API document.querySelector
http://www.mindmeister.com/143758104/douban-read

Debugger

UA
Webkit
Developer Tools

friends of
weinre
http://phonegap.github.com/weinre/

Adobe Shadow
http://labs.adobe.com/downloads/shadow.html

╮（╯＿╰）╭
Weinre
need to use machine's Wrapper
public IP address
must be connected
to the Internet
some updates in
Chrome are not
shown on devices
http://forums.adobe.com/docs/DOC-1674

Thx:)
mockee@gmail.com
blog: mockee.com twitter: @mockee
douban.com/people/mockee/