Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Apps and more

Yan Shi
April 20, 2012

Web Apps and more

QCon Beijing 2012

Yan Shi

April 20, 2012

More Decks by Yan Shi

Other Decks in Programming


  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

  19. None
  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

  24. None
  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

  36. None
  37. New Navigable Panel table of contents Progress

  38. None
  39. None
  40. None
  41. None
  42. None
  43. None
  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

  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/

  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
  73. None
  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