Your SlideShare is downloading. ×
0
Web Apps and more    mockee@douban       http://bit.ly/IAhFE5
HTML5 Once again...
Standard ?! http://www.w3.org/2011/02/htmlwg-pr.htmlhttp://blog.whatwg.org/html-is-the-new-html5       http://burningbird....
"New open standards created inthe mobile era, such as HTML5,will win on mobile devices. "                                 ...
"HTML5 is now universally supportedon major mobile devices. This makes HTML5 the best solution forcreating and deploying c...
http://gs.statcounter.com/press/mobile-internet-usage-is-doubling-year-on-year
Keywords Identifying Web Apps
Self Contained      Immersive                   Work Offline                                            Device Aware    Fu...
Concepts  damned...
Desktop                    Hybrid NativeMobile       App    Web
Worry about  Browsers & Devices
Top 9 Mobile Browsers in China
Top 12 Browser Versions in China
RangeComic
Top 10 Browsers in Douban         Google Analytics
Top 10 Mobile Devices in Douban            Google Analytics
Real World   Douban Read   http://read.douban.com
Submission SystemAuthor             Editor         WYSIWYG
dimensions                 align             upload                         legend
<div class="figure">    <img src="figure.png" alt="" />    <div class="legend">        <p>figure caption</p>    </div></di...
<mark>  Semantically highlight parts of text
Web Reader
ContentAdaptation main techniques
Responsive Web DesignMobile FirstProgressive EnhancementServer-side Adaptation
Responsive Web Design                  by ETHAN MARCOTTE  http://www.alistapart.com/articles/responsive-web-design/
Layout                      Responsive                      Media Queries                      Gridshttp://www.lukew.com/f...
Bootstraphttp://markdotto.com/bs2/docs/Framelesshttp://framelessgrid.com/Golden Grid Systemhttp://goldengridsystem.com/Les...
Media Queries
Syntaxmedia_query_list : S* [media_query [ , S* media_query ]* ]? ;media_query : [ONLY | NOT]? S* media_type S* [ AND S* e...
@media only screenand (max-device-width: 1024px)and (orientation: portrait),(-webkit-min-device-pixel-ratio: 2)and (max-de...
window.matchMedia// get MediaQueryListvar mql = window.matchMedia(    screen and (orientation: portrait));mql.addListener(...
matchMedia() polyfill                                                                make sure its hiddendocument.createEl...
orientation: landscape
table of contentsPanel         Progress  New Navigable
Original   Retina ? LargeMedium Small                 Media Queries
Mobile First   Mobile First    Desktop    Bryan Rieger
FormatFixed-Layout           Reflowable Adobe PDF           Kindle Cloud Reader  PostScript            Google BooksiBook A...
Reflowing & Paging             text block             page break             image block           type page
Zoom or Crop          Blank or Float
Web WorkersInline Workers                             Use Cases WebKitBlobBuilder                             Prefetching ...
paging...                               renderpaging in background threads                               render
Prerender<link rel="prerender"  href="http://read.douban.com/reader" />    Book Store                              Reader ...
Page Visibility APIvisibilityState   (webkit / moz)     visible      hidden           prerenderdocument.addEventListener( ...
Store                    Readerif (document.visibilityState === hidden  || document.visibilityState === prerender  || docu...
SVGConfigure Web Server MIME types   ".svg" => "image/svg+xml"Creating & Converting & Optimizing       Aviary Raven      S...
SVG in CSS backgrounds// fallback for IE 6/7/8background: url(icons.png);// for modern browsersbackground: rgba(0,0,0,0) u...
Touch Eventstouchstart    init                             touches Array (1 or 11)touchmove      update                   ...
GestureTapsingle, double; holdSwipeup, right, down, leftPinchin, out; rotate
ScrollingNative  -webkit-overflow-scrolling: touch;iScroll 4  Pinch / Zoom, Pull up/down to refresh,  Customizable scrollb...
Fullscreen                                               webkitRequestFullScreenrequestFullscreen                         ...
webkitRequestFullScreen(  Element.ALLOW_KEYBOARD_INPUT);Events:fullscreenchange, fullscreenerrorCompatibility:            ...
Issue 95344:webkitRequestFullScreen results in a black backgrounddocument.documentElement.webkitRequestFullScreen();      ...
Offlinemanifest file ● MIME type: text/cache-manifest● Same origin (domain & scheme) Handling Events checking, error, upda...
CACHE MANIFEST# version 1.0.1app.html#reader/ark/js/*/ark/logo.png favicon.icoCACHE:http://img3.douban.com/pics/cover.png#...
CACHE MANIFEST# version 1.0.1                                  Cant include fragment identifiers.app.html#reader/ark/js/* ...
* Enhance Application Cache for better performance: /ark/icon-reader.svg , ETag: ... app.html ETag: ... , Last-Modified: ....
Compatibility window.applicationCache                           i cached           noupdate                              s...
Detecting Connectionif (navigator.onLine) {  // send data to server} else {  // use Web Storage or Database}window.addEven...
For iOSWeb clip icons<link rel="apple-touch-icon"  sizes="" href="" />iPhone                  57x57iPhone Retina          ...
Specifying startup image<link rel="apple-touch-startup-image"  href="img/ipad-landscape.png"  media="screen    and (min-de...
ViewportRemove address (and button) bar  <meta name="apple-mobile-web-app-capable"    content="yes">  window.scrollTo(0, 1...
Framework
mini-frameworkStructuralization               Backbone.js, micro-Modules & Widgets                   Touch, Fx, OverlayFil...
Debugger
UA     Webkit     Developer Tools
friends ofweinrehttp://phonegap.github.com/weinre/
Adobe Shadow http://labs.adobe.com/downloads/shadow.html
╮(╯_╰)╭                                       Weinreneed to use machines                  Wrapperpublic IP addressmust be ...
Thx:)        mockee@gmail.comblog: mockee.com twitter: @mockee    douban.com/people/mockee/
Web Apps and more
Web Apps and more
Web Apps and more
Web Apps and more
Web Apps and more
Web Apps and more
Web Apps and more
Web Apps and more
Web Apps and more
Web Apps and more
Upcoming SlideShare
Loading in...5
×

Web Apps and more

1,186

Published on

QCon Beijing 2012

Published in: Technology, Art & Photos
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,186
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
26
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Web Apps and more"

  1. 1. Web Apps and more mockee@douban http://bit.ly/IAhFE5
  2. 2. HTML5 Once again...
  3. 3. Standard ?! http://www.w3.org/2011/02/htmlwg-pr.htmlhttp://blog.whatwg.org/html-is-the-new-html5 http://burningbird.net/node/156
  4. 4. "New open standards created inthe mobile era, such as HTML5,will win on mobile devices. " Steve Jobs April, 2010 http://www.apple.com/hotnews/thoughts-on-flash/
  5. 5. "HTML5 is now universally supportedon major mobile devices. This makes HTML5 the best solution forcreating and deploying content in thebrowser across mobile platforms." Danny Winokur November 9, 2011 http://blogs.adobe.com/conversations/2011/11/flash-focus.html
  6. 6. http://gs.statcounter.com/press/mobile-internet-usage-is-doubling-year-on-year
  7. 7. Keywords Identifying Web Apps
  8. 8. Self Contained  Immersive   Work Offline   Device Aware Functional New NavigableInteractive Ajaxcellent http://www.html5rocks.com/webappfieldguide/know-your-apps/app-checklist/
  9. 9. Concepts damned...
  10. 10. Desktop Hybrid NativeMobile App Web
  11. 11. Worry about Browsers & Devices
  12. 12. Top 9 Mobile Browsers in China
  13. 13. Top 12 Browser Versions in China
  14. 14. RangeComic
  15. 15. Top 10 Browsers in Douban Google Analytics
  16. 16. Top 10 Mobile Devices in Douban Google Analytics
  17. 17. Real World Douban Read http://read.douban.com
  18. 18. Submission SystemAuthor Editor WYSIWYG
  19. 19. dimensions align upload legend
  20. 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. 21. <mark> Semantically highlight parts of text
  22. 22. Web Reader
  23. 23. ContentAdaptation main techniques
  24. 24. Responsive Web DesignMobile FirstProgressive EnhancementServer-side Adaptation
  25. 25. Responsive Web Design by ETHAN MARCOTTE http://www.alistapart.com/articles/responsive-web-design/
  26. 26. Layout Responsive Media Queries Gridshttp://www.lukew.com/ff/entry.asp?1514
  27. 27. Bootstraphttp://markdotto.com/bs2/docs/Framelesshttp://framelessgrid.com/Golden Grid Systemhttp://goldengridsystem.com/Less Framework 4http://markdotto.com/bs2/docs/1140 Gridhttp://cssgrid.net/
  28. 28. Media Queries
  29. 29. Syntaxmedia_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
  30. 30. @media only screenand (max-device-width: 1024px)and (orientation: portrait),(-webkit-min-device-pixel-ratio: 2)and (max-device-width: 640px){ ... }
  31. 31. window.matchMedia// get MediaQueryListvar mql = window.matchMedia( screen and (orientation: portrait));mql.addListener(function(mql){ if (mql.matches) { console.log(portrait); } else { console.log(landscape); }});
  32. 32. matchMedia() polyfill make sure its hiddendocument.createElement(div);create a <style> node with a media attributeset a CSS rule applied to a <div>check to see if the style has been appliedreturn { matches: bool, media: ma } http://www.nczonline.net/blog/2012/01/03/css-media-queries-in-javascript-part-1/
  33. 33. orientation: landscape
  34. 34. table of contentsPanel Progress New Navigable
  35. 35. Original Retina ? LargeMedium Small Media Queries
  36. 36. Mobile First Mobile First Desktop Bryan Rieger
  37. 37. FormatFixed-Layout Reflowable Adobe PDF Kindle Cloud Reader PostScript Google BooksiBook Author Plain Text (landscape)
  38. 38. Reflowing & Paging text block page break image block type page
  39. 39. Zoom or Crop Blank or Float
  40. 40. Web WorkersInline Workers Use Cases WebKitBlobBuilder Prefetching Data MozBlobBuilder Processing large arrays, humungous JSON responsesHandling Errors Updating many rows "message", "error" of a local web database http://www.html5rocks.com/en/tutorials/workers/basics/
  41. 41. paging... renderpaging in background threads render
  42. 42. 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
  43. 43. Page Visibility APIvisibilityState (webkit / moz) visible hidden prerenderdocument.addEventListener( visibilitychange, function(e) { // document.visibilityState;}, false);
  44. 44. Store Readerif (document.visibilityState === hidden || document.visibilityState === prerender || document.hidden === ture) { stopSyncReadingProgress();} http://www.w3.org/TR/2011/WD-page-visibility-20110602/
  45. 45. SVGConfigure Web Server MIME types ".svg" => "image/svg+xml"Creating & Converting & Optimizing Aviary Raven SVG-edit Vector Magic Scour
  46. 46. SVG in CSS backgrounds// fallback for IE 6/7/8background: url(icons.png);// for modern browsersbackground: rgba(0,0,0,0) url(icons.svg); IE 6/7/8 dont support rgba color values will automatically ignore this rule http://caniuse.com/#feat=svg-css
  47. 47. Touch Eventstouchstart init touches Array (1 or 11)touchmove update touchInfotouchend use pageX, pageYtouchcancel clear time thresholds Gestures
  48. 48. GestureTapsingle, double; holdSwipeup, right, down, leftPinchin, out; rotate
  49. 49. ScrollingNative -webkit-overflow-scrolling: touch;iScroll 4 Pinch / Zoom, Pull up/down to refresh, Customizable scrollbarsScrollability by Joe Hewitt http://joehewitt.com/2011/10/05/fast-animation-with-ios-webkit
  50. 50. Fullscreen webkitRequestFullScreenrequestFullscreen mozRequestFullScreen webkitCancelFullScreenexitFullscreen mozCancelFullScreen webkitCurrentFullScreenElementfullscreenElement mozFullScreenElementfullscreenEnabled mozFullScreenEnabledisFullscreen webkitIsFullscreen http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html
  51. 51. webkitRequestFullScreen( Element.ALLOW_KEYBOARD_INPUT);Events:fullscreenchange, fullscreenerrorCompatibility: F11
  52. 52. Issue 95344:webkitRequestFullScreen results in a black backgrounddocument.documentElement.webkitRequestFullScreen(); http://code.google.com/p/chromium/issues/detail?id=95344
  53. 53. Offlinemanifest 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
  54. 54. CACHE MANIFEST# version 1.0.1app.html#reader/ark/js/*/ark/logo.png favicon.icoCACHE:http://img3.douban.com/pics/cover.png# online whitelistNETWORK:#*/j/reader/FALLBACK:fallback.html
  55. 55. CACHE MANIFEST# version 1.0.1 Cant include fragment identifiers.app.html#reader/ark/js/* A full file name is required, no wildcards allowed./ark/logo.png favicon.icoCACHE: Only one file per line.http://img3.douban.com/pics/cover.png# online whitelistNETWORK:#*/j/reader/FALLBACK:fallback.html
  56. 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. 57. Compatibility window.applicationCache i cached noupdate swapCache()checking downloading updateready progress
  58. 58. Detecting Connectionif (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. 59. For iOSWeb clip icons<link rel="apple-touch-icon" sizes="" href="" />iPhone 57x57iPhone Retina 114x114iPad 72x72iPad Retina 144x144 http://developer.apple.com/library/ios/#documentation/userexperience/ conceptual/mobilehig/IconsImages/IconsImages.html
  60. 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)x1024iPad - portrait 768x(1024-20)iPad Retina ...iPhone ...iPhone Retina .........
  61. 61. ViewportRemove address (and button) bar <meta name="apple-mobile-web-app-capable" content="yes"> window.scrollTo(0, 1); load, orientationchange DEMO location.hash, setTimeoutChange status bar style // default, black, or black-translucent <meta name="apple-mobile-web-app-status-bar-style" content="black">
  62. 62. Framework
  63. 63. mini-frameworkStructuralization Backbone.js, micro-Modules & Widgets Touch, Fx, OverlayFile & Module Loader RequireJS, Oz.js, Do.jsW3C Selectors API document.querySelector http://www.mindmeister.com/143758104/douban-read
  64. 64. Debugger
  65. 65. UA Webkit Developer Tools
  66. 66. friends ofweinrehttp://phonegap.github.com/weinre/
  67. 67. Adobe Shadow http://labs.adobe.com/downloads/shadow.html
  68. 68. ╮(╯_╰)╭ Weinreneed to use machines Wrapperpublic IP addressmust be connectedto the Internetsome updates inChrome are notshown on devices http://forums.adobe.com/docs/DOC-1674
  69. 69. Thx:) mockee@gmail.comblog: mockee.com twitter: @mockee douban.com/people/mockee/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×