Web Apps and more

QCon Beijing 2012

Transcript

1. Web Apps and more mockee@douban http://bit.ly/IAhFE5
2. HTML5 Once again...
3. http://blog.whatwg.org/html-is-the-new-html5 Standard ?! http://burningbird.net/node/156 http://www.w3.org/2011/02/htmlwg-pr.html
4. "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
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." http://blogs.adobe.com/conversations/2011/11/flash-focus.html Danny Winokur November 9, 2011
6. http://gs.statcounter.com/press/mobile-internet-usage-is-doubling-year-on-year
7. Keywords Identifying Web Apps
8. Self Contained Functional Immersive Interactive Work Offline Device Aware Ajaxcellent New Navigable http://www.html5rocks.com/webappfieldguide/know-your-apps/app-checklist/
9. Concepts damned...
10. Mobile App Web Desktop Native Hybrid
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. legend dimensions align upload
21. <figure> <img src="figure.png" alt="" /> <figcaption> <p>figure caption</p> </figcaption> </figure> <div class="figure"> <img src="figure.png" alt="" /> <div class="legend"> <p>figure caption</p> </div> </div> Semantics Elements
22. Semantically highlight parts of text <mark>
23. Web Reader
25. Content Adaptation main techniques
26. Responsive Web Design Mobile First Progressive Enhancement Server-side Adaptation
27. http://www.alistapart.com/articles/responsive-web-design/ Responsive Web Design by ETHAN MARCOTTE
28. Layout Grids Media Queries Responsive http://www.lukew.com/ff/entry.asp?1514
29. 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/
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 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 <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 }
35. orientation: landscape
37. New Navigable Panel table of contents Progress
44. Original Large Medium Small Retina ? Media Queries
45. Mobile First Bryan Rieger Desktop Mobile First
46. Fixed-Layout Reflowable Format Adobe PDF PostScript Kindle Cloud Reader Google Books iBook Author (landscape) Plain Text
47. Reflowing & Paging text block page break image block type page
48. Blank or Float Zoom or Crop
49. 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
50. paging... render paging in background threads render
51. Prerender Book Store Reader Reader <link rel="prerender" href="http://read.douban.com/reader" /> http://prerender-test.appspot.com/ https://developers.google.com/chrome/whitepapers/prerender
52. Page Visibility API document.addEventListener( 'visibilitychange', function(e) { // document.visibilityState; }, false); visibilityState visible hidden prerender (webkit / moz)
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 SVG-edit Aviary Raven Scour Vector Magic
55. // 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
56. Touch Events touchstart touchmove touchend touchcancel touchInfo init update use clear touches Array (1 or 11) pageX, pageY time thresholds Gestures
57. Gesture Swipe up, right, down, left Tap single, double; hold Pinch in, out; rotate
58. 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
59. 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
60. Events: fullscreenchange, fullscreenerror Compatibility: F11 webkitRequestFullScreen( Element.ALLOW_KEYBOARD_INPUT);
61. http://code.google.com/p/chromium/issues/detail?id=95344 Issue 95344: webkitRequestFullScreen results in a black background document.documentElement.webkitRequestFullScreen();
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 /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
64. 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.
65. * 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
66. Compatibility window.applicationCache checking noupdate downloading updateready swapCache() cached i progress
67. 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
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 window.scrollTo(0, 1); 'load', 'orientationchange' location.hash, setTimeout <meta name="apple-mobile-web-app-capable" content="yes"> DEMO Change status bar style <meta name="apple-mobile-web-app-status-bar-style" content="black"> // default, black, or black-translucent
71. Framework
72. 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
74. Debugger
75. Webkit Developer Tools UA
76. weinre http://phonegap.github.com/weinre/ friends of
77. Adobe Shadow http://labs.adobe.com/downloads/shadow.html
78. 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 ╮（╯＿╰）╭
79. Thx:) douban.com/people/mockee/ blog: mockee.com twitter: @mockee mockee@gmail.com