QCon Beijing 2012

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

2. HTML5
Once again...

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

4. "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/

5. "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

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

7. Keywords
Identifying Web Apps

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

9. Concepts
damned...

10. Desktop
Hybrid
Native
Mobile App Web

11. Worry about
Browsers & Devices

12. Top 9 Mobile Browsers in China

13. Top 12 Browser Versions in China

14. RangeComic

15. Top 10 Browsers in Douban
Google Analytics

16. Top 10 Mobile Devices in Douban
Google Analytics

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

18. Submission System
Author Editor
WYSIWYG

20. dimensions
align
upload
legend

21. <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>

22. <mark>
Semantically highlight parts of text

23. Web Reader

25. Content
Adaptation
main techniques

26. Responsive Web Design
Mobile First
Progressive Enhancement
Server-side Adaptation

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

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

29. 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/

30. Media Queries

31. 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

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

33. 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');
}
});

34. 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/

35. orientation: landscape

37. table of contents
Panel
Progress
New Navigable

44. Original Retina ?
Large
Medium
Small
Media Queries

45. Mobile First
Mobile First
Desktop
Bryan Rieger

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

47. Reflowing & Paging
text block
page break
image block
type page

48. Zoom or Crop
Blank or Float

49. 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/

50. paging...
render
paging in background threads
render

51. 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

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

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

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

55. 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

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

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

58. 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

59. 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

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

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

62. 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

63. 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

64. 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

65. * 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

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

67. 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

68. 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

69. 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 ...
...
...

70. 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">

71. Framework

72. 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

74. Debugger

75. UA
Webkit
Developer Tools

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

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

78. ╮（╯＿╰）╭
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

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