Web Apps and more
3 likes1,013 views
This document discusses various topics related to developing web apps, including HTML5, responsive design, touch events, offline capabilities, and debugging tools. It provides links to resources on HTML5 features like media queries, SVG, web workers, and the page visibility API. It also covers techniques for adapting content like responsive web design, progressive enhancement, and server-side adaptation. Mobile browser stats and popular devices on Douban are mentioned. Frameworks like Bootstrap and tools like Weinre for debugging mobile apps are referenced.
![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](https://image.slidesharecdn.com/webappandmore-120420002738-phpapp01/85/Web-Apps-and-more-31-320.jpg)
Web Apps and more
- 1. Web Apps and more mockee@douban http://bit.ly/IAhFE5
- 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
- 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/
- 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
- 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/
- 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
- 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/