Slide 1
Slide 1 text
Web Apps and more
mockee@douban
http://bit.ly/IAhFE5
Slide 2
Slide 2 text
HTML5
Once again...
Slide 3
Slide 3 text
http://blog.whatwg.org/html-is-the-new-html5
Standard ?!
http://burningbird.net/node/156
http://www.w3.org/2011/02/htmlwg-pr.html
Slide 4
Slide 4 text
"New open standards created in
the mobile era, such as HTML5,
will win on mobile devices. "
http://www.apple.com/hotnews/thoughts-on-flash/
Steve Jobs
April, 2010
Slide 5
Slide 5 text
"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."
http://blogs.adobe.com/conversations/2011/11/flash-focus.html
Danny Winokur
November 9, 2011
Slide 6
Slide 6 text
http://gs.statcounter.com/press/mobile-internet-usage-is-doubling-year-on-year
Slide 7
Slide 7 text
Keywords
Identifying Web Apps
Slide 8
Slide 8 text
Self Contained
Functional
Immersive
Interactive
Work Offline
Device Aware
Ajaxcellent
New Navigable
http://www.html5rocks.com/webappfieldguide/know-your-apps/app-checklist/
Slide 9
Slide 9 text
Concepts
damned...
Slide 10
Slide 10 text
Mobile App Web
Desktop
Native
Hybrid
Slide 11
Slide 11 text
Worry about
Browsers & Devices
Slide 12
Slide 12 text
Top 9 Mobile Browsers in China
Slide 13
Slide 13 text
Top 12 Browser Versions in China
Slide 14
Slide 14 text
RangeComic
Slide 15
Slide 15 text
Top 10 Browsers in Douban
Google Analytics
Slide 16
Slide 16 text
Top 10 Mobile Devices in Douban
Google Analytics
Slide 17
Slide 17 text
Real World
Douban Read
http://read.douban.com
Slide 18
Slide 18 text
Submission System
Author Editor
WYSIWYG
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
legend
dimensions
align
upload
Slide 21
Slide 21 text
figure caption
figure caption
Slide 22
Slide 22 text
Semantically highlight parts of text
Slide 23
Slide 23 text
Web Reader
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
Content
Adaptation
main techniques
Slide 26
Slide 26 text
Responsive Web Design
Mobile First
Progressive Enhancement
Server-side Adaptation
Slide 27
Slide 27 text
http://www.alistapart.com/articles/responsive-web-design/
Responsive Web Design
by ETHAN MARCOTTE
Slide 28
Slide 28 text
Layout
Grids
Media Queries
Responsive
http://www.lukew.com/ff/entry.asp?1514
Slide 29
Slide 29 text
Bootstrap
http://markdotto.com/bs2/docs/
Frameless
http://framelessgrid.com/
1140 Grid
Less Framework 4
http://cssgrid.net/
http://markdotto.com/bs2/docs/
Golden Grid System
http://goldengridsystem.com/
Slide 30
Slide 30 text
Media Queries
Slide 31
Slide 31 text
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
Slide 32
Slide 32 text
@media only screen
and (max-device-width: 1024px)
and (orientation: portrait),
(-webkit-min-device-pixel-ratio: 2)
and (max-device-width: 640px)
{ ... }
Slide 33
Slide 33 text
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');
}
});
Slide 34
Slide 34 text
matchMedia() polyfill
http://www.nczonline.net/blog/2012/01/03/css-media-queries-in-javascript-part-1/
document.createElement('div');
make sure it's hidden
create a 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 }
Slide 35
Slide 35 text
orientation: landscape
Slide 36
Slide 36 text
No content
Slide 37
Slide 37 text
New Navigable
Panel
table of contents
Progress
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
Original
Large
Medium
Small
Retina ?
Media Queries
Slide 45
Slide 45 text
Mobile First
Bryan Rieger
Desktop
Mobile First
Slide 46
Slide 46 text
Fixed-Layout Reflowable
Format
Adobe PDF
PostScript
Kindle Cloud Reader
Google Books
iBook Author
(landscape)
Plain Text
Slide 47
Slide 47 text
Reflowing & Paging
text block
page break
image block
type page
Slide 48
Slide 48 text
Blank or Float
Zoom or Crop
Slide 49
Slide 49 text
Web Workers
Inline Workers
WebKitBlobBuilder
MozBlobBuilder
Handling Errors
"message", "error"
Use Cases
Prefetching Data
Processing large
arrays, humungous
JSON responses
http://www.html5rocks.com/en/tutorials/workers/basics/
Updating many rows
of a local web
database
Slide 50
Slide 50 text
paging...
render
paging in background threads
render
Slide 51
Slide 51 text
Prerender
Book Store
Reader
Reader
http://prerender-test.appspot.com/
https://developers.google.com/chrome/whitepapers/prerender
Slide 52
Slide 52 text
Page Visibility API
document.addEventListener(
'visibilitychange', function(e) {
// document.visibilityState;
}, false);
visibilityState
visible hidden prerender
(webkit / moz)
Slide 53
Slide 53 text
Store Reader
if (document.visibilityState === 'hidden'
|| document.visibilityState === 'prerender'
|| document.hidden === 'ture') {
stopSyncReadingProgress();
}
http://www.w3.org/TR/2011/WD-page-visibility-20110602/
Slide 54
Slide 54 text
SVG
Configure Web Server MIME types
".svg" => "image/svg+xml"
Creating & Converting & Optimizing
SVG-edit
Aviary Raven
Scour
Vector Magic
Slide 55
Slide 55 text
// fallback for IE 6/7/8
background: url(icons.png);
// for modern browsers
background: rgba(0,0,0,0) url(icons.svg);
SVG in CSS backgrounds
IE 6/7/8 don't support rgba color values
will automatically ignore this rule
http://caniuse.com/#feat=svg-css
Slide 56
Slide 56 text
Touch Events
touchstart
touchmove
touchend
touchcancel
touchInfo
init
update
use
clear
touches Array (1 or 11)
pageX, pageY
time
thresholds
Gestures
Slide 57
Slide 57 text
Gesture
Swipe
up, right, down, left
Tap
single, double; hold
Pinch
in, out; rotate
Slide 58
Slide 58 text
Scrolling
iScroll 4
Scrollability
-webkit-overflow-scrolling: touch;
Native
Pinch / Zoom, Pull up/down to refresh,
Customizable scrollbars
by Joe Hewitt
http://joehewitt.com/2011/10/05/fast-animation-with-ios-webkit
Slide 59
Slide 59 text
Fullscreen
requestFullscreen
exitFullscreen
fullscreenElement
webkitRequestFullScreen
mozRequestFullScreen
http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html
webkitCancelFullScreen
mozCancelFullScreen
webkitCurrentFullScreenElement
mozFullScreenElement
fullscreenEnabled mozFullScreenEnabled
webkitIsFullscreen
isFullscreen
Slide 60
Slide 60 text
Events:
fullscreenchange, fullscreenerror
Compatibility:
F11
webkitRequestFullScreen(
Element.ALLOW_KEYBOARD_INPUT);
Slide 61
Slide 61 text
http://code.google.com/p/chromium/issues/detail?id=95344
Issue 95344:
webkitRequestFullScreen results in a black background
document.documentElement.webkitRequestFullScreen();
Slide 62
Slide 62 text
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
Slide 63
Slide 63 text
CACHE MANIFEST
# version 1.0.1
/ark/logo.png favicon.ico
app.html#reader
http://img3.douban.com/pics/cover.png
/ark/js/*
CACHE:
NETWORK:
# online whitelist
/j/reader/
#*
FALLBACK
:
fallback.html
Slide 64
Slide 64 text
CACHE MANIFEST
# version 1.0.1
/ark/logo.png favicon.ico
app.html#reader
http://img3.douban.com/pics/cover.png
/ark/js/*
CACHE:
NETWORK:
# online whitelist
/j/reader/
#*
FALLBACK:
fallback.html
Only one file per line.
A full file name is required, no wildcards allowed.
Can't include fragment identifiers.
Slide 65
Slide 65 text
* Enhance Application Cache for better performance:
/ark/icon-reader.svg , ETag: ...
app.html ETag: ... , Last-Modified: ...
Server Client
updated manifest file
re-fetch each resouce
newer ? re-fetch : 304
with additional meta-data
only re-fetch definitely updated files
Reduces network bandwidth & latency
Slide 66
Slide 66 text
Compatibility
window.applicationCache
checking
noupdate
downloading updateready
swapCache()
cached
i
progress
Slide 67
Slide 67 text
Detecting Connection
if (navigator.onLine) {
// send data to server
} else {
// use Web Storage or Database
}
window.addEventListener(
'online', function(e) {
// sync data with server
}, false);
notes & comments
reading progress
Slide 68
Slide 68 text
For iOS
Web clip icons
iPhone 57x57
iPhone Retina 114x114
iPad 72x72
iPad Retina 144x144
http://developer.apple.com/library/ios/#documentation/userexperience/
conceptual/mobilehig/IconsImages/IconsImages.html
Slide 69
Slide 69 text
Specifying startup image
...
iPad - landscape (768-20)x1024
iPad - portrait 768x(1024-20)
iPad Retina ...
iPhone ...
iPhone Retina ...
...
...
Slide 70
Slide 70 text
Viewport
Remove address (and button) bar
window.scrollTo(0, 1);
'load', 'orientationchange'
location.hash, setTimeout
DEMO
Change status bar style
// default, black, or black-translucent
Slide 71
Slide 71 text
Framework
Slide 72
Slide 72 text
W3C Selectors API
Structuralization
Modules & Widgets
mini-framework
File & Module Loader
Backbone.js, micro-
RequireJS, Oz.js, Do.js
document.querySelector
Touch, Fx, Overlay
http://www.mindmeister.com/143758104/douban-read
Slide 73
Slide 73 text
No content
Slide 74
Slide 74 text
Debugger
Slide 75
Slide 75 text
Webkit
Developer Tools
UA
Slide 76
Slide 76 text
weinre
http://phonegap.github.com/weinre/
friends of
Slide 77
Slide 77 text
Adobe Shadow
http://labs.adobe.com/downloads/shadow.html
Slide 78
Slide 78 text
http://forums.adobe.com/docs/DOC-1674
Weinre
Wrapper
must be connected
to the Internet
need to use machine's
public IP address
some updates in
Chrome are not
shown on devices
╮（╯＿╰）╭
Slide 79
Slide 79 text
Thx:)
douban.com/people/mockee/
blog: mockee.com twitter: @mockee
[email protected]