More Related Content


Web Apps and more

  1. Web Apps and more mockee@douban
  2. HTML5 Once again...
  3. Standard ?!
  4. "New open standards created in the mobile era, such as HTML5, will win on mobile devices. " 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." Danny Winokur November 9, 2011
  7. Keywords Identifying Web Apps
  8. Self Contained   Immersive   Work Offline   Device Aware Functional New Navigable Interactive Ajaxcellent
  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
  18. Submission System Author Editor WYSIWYG
  19. dimensions align upload legend
  20. <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>
  21. <mark> Semantically highlight parts of text
  22. Web Reader
  23. Content Adaptation main techniques
  24. Responsive Web Design Mobile First Progressive Enhancement Server-side Adaptation
  25. Responsive Web Design by ETHAN MARCOTTE
  26. Layout Responsive Media Queries Grids
  27. Bootstrap Frameless Golden Grid System Less Framework 4 1140 Grid
  28. Media Queries
  29. 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* ;
  30. @media only screen and (max-device-width: 1024px) and (orientation: portrait), (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 640px) { ... }
  31. 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'); } });
  32. 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 }
  33. orientation: landscape
  34. table of contents Panel Progress New Navigable
  35. Original Retina ? Large Medium Small Media Queries
  36. Mobile First Mobile First Desktop Bryan Rieger
  37. Format Fixed-Layout Reflowable Adobe PDF Kindle Cloud Reader PostScript Google Books iBook Author Plain Text (landscape)
  38. Reflowing & Paging text block page break image block type page
  39. Zoom or Crop Blank or Float
  40. 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
  41. paging... render paging in background threads render
  42. Prerender <link rel="prerender" href="" /> Book Store Reader Reader
  43. Page Visibility API visibilityState (webkit / moz) visible hidden prerender document.addEventListener( 'visibilitychange', function(e) { // document.visibilityState; }, false);
  44. Store Reader if (document.visibilityState === 'hidden' || document.visibilityState === 'prerender' || document.hidden === 'ture') { stopSyncReadingProgress(); }
  45. SVG Configure Web Server MIME types ".svg" => "image/svg+xml" Creating & Converting & Optimizing Aviary Raven SVG-edit Vector Magic Scour
  46. 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
  47. Touch Events touchstart init touches Array (1 or 11) touchmove update touchInfo touchend use pageX, pageY touchcancel clear time thresholds Gestures
  48. Gesture Tap single, double; hold Swipe up, right, down, left Pinch in, out; rotate
  49. Scrolling Native -webkit-overflow-scrolling: touch; iScroll 4 Pinch / Zoom, Pull up/down to refresh, Customizable scrollbars Scrollability by Joe Hewitt
  50. Fullscreen webkitRequestFullScreen requestFullscreen mozRequestFullScreen webkitCancelFullScreen exitFullscreen mozCancelFullScreen webkitCurrentFullScreenElement fullscreenElement mozFullScreenElement fullscreenEnabled mozFullScreenEnabled isFullscreen webkitIsFullscreen
  51. webkitRequestFullScreen( Element.ALLOW_KEYBOARD_INPUT); Events: fullscreenchange, fullscreenerror Compatibility: F11
  52. Issue 95344: webkitRequestFullScreen results in a black background document.documentElement.webkitRequestFullScreen();
  53. Offline manifest file   ● MIME type: text/cache-manifest ● Same origin (domain & scheme)   Handling Events   checking, error, update, obsolete, cached, downloading, updateready
  54. CACHE MANIFEST # version 1.0.1 app.html#reader /ark/js/* /ark/logo.png favicon.ico CACHE: # online whitelist NETWORK: #* /j/reader/ FALLBACK : fallback.html
  55. 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. # online whitelist NETWORK: #* /j/reader/ FALLBACK: fallback.html
  56. * 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  
  57. Compatibility window.applicationCache i cached noupdate swapCache() checking downloading updateready progress
  58. 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
  59. For iOS Web clip icons <link rel="apple-touch-icon" sizes="" href="" /> iPhone 57x57 iPhone Retina 114x114 iPad 72x72 iPad Retina 144x144 conceptual/mobilehig/IconsImages/IconsImages.html
  60. 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 ... ... ...
  61. 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">
  62. Framework
  63. mini-framework Structuralization Backbone.js, micro- Modules & Widgets Touch, Fx, Overlay File & Module Loader RequireJS, Oz.js, Do.js W3C Selectors API document.querySelector
  64. Debugger
  65. UA Webkit Developer Tools
  66. friends of weinre
  67. Adobe Shadow
  68. ╮(╯_╰)╭ 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
  69. Thx:) blog: twitter: @mockee