Web app and more
-
Upload
faming-su -
Category
Technology
-
view
479 -
download
0
Transcript of Web app and more
![Page 1: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/1.jpg)
Web Apps and moremockee@douban
http://bit.ly/IAhFE5
![Page 2: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/2.jpg)
HTML5Once again...
![Page 3: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/3.jpg)
http://blog.whatwg.org/html-is-the-new-html5
Standard ?!
http://burningbird.net/node/156
http://www.w3.org/2011/02/htmlwg-pr.html
![Page 4: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/4.jpg)
"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 JobsApril, 2010
![Page 5: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/5.jpg)
"HTML5 is now universally supportedon 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 WinokurNovember 9, 2011
![Page 6: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/6.jpg)
http://gs.statcounter.com/press/mobile-internet-usage-is-doubling-year-on-year
![Page 7: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/7.jpg)
KeywordsIdentifying Web Apps
![Page 8: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/8.jpg)
Self Contained
Functional
Immersive
Interactive
Work Offline
Device Aware
Ajaxcellent
New Navigable
http://www.html5rocks.com/webappfieldguide/know-your-apps/app-checklist/
![Page 9: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/9.jpg)
Conceptsdamned...
![Page 10: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/10.jpg)
Mobile App Web
Desktop
Native
Hybrid
![Page 11: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/11.jpg)
Worry aboutBrowsers & Devices
![Page 12: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/12.jpg)
Top 9 Mobile Browsers in China
![Page 13: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/13.jpg)
Top 12 Browser Versions in China
![Page 14: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/14.jpg)
RangeComic
![Page 15: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/15.jpg)
Top 10 Browsers in Douban
Google Analytics
![Page 16: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/16.jpg)
Top 10 Mobile Devices in Douban
Google Analytics
![Page 17: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/17.jpg)
Real WorldDouban Read
http://read.douban.com
![Page 18: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/18.jpg)
Submission System
Author Editor
WYSIWYG
![Page 19: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/19.jpg)
![Page 20: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/20.jpg)
legend
dimensionsalign
upload
![Page 21: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/21.jpg)
<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
![Page 22: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/22.jpg)
Semantically highlight parts of text
<mark>
![Page 23: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/23.jpg)
Web Reader
![Page 24: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/24.jpg)
![Page 25: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/25.jpg)
ContentAdaptation
main techniques
![Page 26: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/26.jpg)
Responsive Web Design
Mobile First
Progressive Enhancement
Server-side Adaptation
![Page 27: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/27.jpg)
http://www.alistapart.com/articles/responsive-web-design/
Responsive Web Designby ETHAN MARCOTTE
![Page 28: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/28.jpg)
Layout
Grids
Media Queries
Responsive
http://www.lukew.com/ff/entry.asp?1514
![Page 29: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/29.jpg)
Bootstraphttp://markdotto.com/bs2/docs/
Framelesshttp://framelessgrid.com/
1140 Grid
Less Framework 4
http://cssgrid.net/
http://markdotto.com/bs2/docs/
Golden Grid Systemhttp://goldengridsystem.com/
![Page 30: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/30.jpg)
Media Queries
![Page 31: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/31.jpg)
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
![Page 32: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/32.jpg)
@media only screenand (max-device-width: 1024px)and (orientation: portrait), (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 640px) { ... }
![Page 33: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/33.jpg)
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'); }});
![Page 34: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/34.jpg)
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 }
![Page 35: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/35.jpg)
orientation: landscape
![Page 36: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/36.jpg)
![Page 37: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/37.jpg)
New Navigable
Paneltable of contents
Progress
![Page 38: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/38.jpg)
![Page 39: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/39.jpg)
![Page 40: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/40.jpg)
![Page 41: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/41.jpg)
![Page 42: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/42.jpg)
![Page 43: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/43.jpg)
![Page 44: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/44.jpg)
Original
Large
Medium
Small
Retina ?
Media Queries
![Page 45: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/45.jpg)
Mobile First
Bryan Rieger
Desktop
Mobile First
![Page 46: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/46.jpg)
Fixed-Layout Reflowable
Format
Adobe PDF
PostScript
Kindle Cloud Reader
Google Books
iBook Author(landscape)
Plain Text
![Page 47: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/47.jpg)
Reflowing & Paging
text block
page break
image block
type page
![Page 48: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/48.jpg)
Blank or Float
Zoom or Crop
![Page 49: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/49.jpg)
Web Workers
Inline WorkersWebKitBlobBuilderMozBlobBuilder
Handling Errors"message", "error"
Use CasesPrefetching Data
Processing large arrays, humungous JSON responses
http://www.html5rocks.com/en/tutorials/workers/basics/
Updating many rows of a local web database
![Page 50: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/50.jpg)
paging...
render
paging in background threads
render
![Page 51: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/51.jpg)
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
![Page 52: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/52.jpg)
Page Visibility API
document.addEventListener( 'visibilitychange', function(e) { // document.visibilityState;}, false);
visibilityState
visible hidden prerender
(webkit / moz)
![Page 53: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/53.jpg)
Store Reader
if (document.visibilityState === 'hidden' || document.visibilityState === 'prerender' || document.hidden === 'ture') { stopSyncReadingProgress();}
http://www.w3.org/TR/2011/WD-page-visibility-20110602/
![Page 54: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/54.jpg)
SVGConfigure Web Server MIME types
".svg" => "image/svg+xml"
Creating & Converting & Optimizing
SVG-editAviary Raven
ScourVector Magic
![Page 55: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/55.jpg)
// fallback for IE 6/7/8background: url(icons.png); // for modern browsersbackground: rgba(0,0,0,0) url(icons.svg);
SVG in CSS backgrounds
IE 6/7/8 don't support rgba color valueswill automatically ignore this rule
http://caniuse.com/#feat=svg-css
![Page 56: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/56.jpg)
Touch Events
touchstarttouchmovetouchend
touchcancel
touchInfo
init
update
use
clear
touches Array (1 or 11)
pageX, pageY
time
thresholds
Gestures
![Page 57: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/57.jpg)
Gesture
Swipeup, right, down, left
Tapsingle, double; hold
Pinchin, out; rotate
![Page 58: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/58.jpg)
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
![Page 59: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/59.jpg)
FullscreenrequestFullscreen
exitFullscreen
fullscreenElement
webkitRequestFullScreen
mozRequestFullScreen
http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html
webkitCancelFullScreen
mozCancelFullScreen
webkitCurrentFullScreenElement
mozFullScreenElement
fullscreenEnabled mozFullScreenEnabled
webkitIsFullscreenisFullscreen
![Page 60: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/60.jpg)
Events:fullscreenchange, fullscreenerror
Compatibility:
F11
webkitRequestFullScreen( Element.ALLOW_KEYBOARD_INPUT);
![Page 61: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/61.jpg)
http://code.google.com/p/chromium/issues/detail?id=95344
Issue 95344: webkitRequestFullScreen results in a black background
document.documentElement.webkitRequestFullScreen();
![Page 62: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/62.jpg)
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
![Page 63: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/63.jpg)
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
![Page 64: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/64.jpg)
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.
![Page 65: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/65.jpg)
* Enhance Application Cache for better performance:
/ark/icon-reader.svg , ETag: ...app.html ETag: ... , Last-Modified: ...
Server Clientupdated manifest file
re-fetch each resoucenewer ? re-fetch : 304
with additional meta-data
only re-fetch definitely updated files
Reduces network bandwidth & latency
![Page 66: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/66.jpg)
Compatibility
window.applicationCache
checking
noupdate
downloading updateready
swapCache()
cachedi
progress
![Page 67: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/67.jpg)
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
![Page 68: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/68.jpg)
For iOS
Web 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
![Page 69: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/69.jpg)
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 .........
![Page 70: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/70.jpg)
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
![Page 71: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/71.jpg)
Framework
![Page 72: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/72.jpg)
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
![Page 73: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/73.jpg)
![Page 74: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/74.jpg)
Debugger
![Page 75: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/75.jpg)
WebkitDeveloper Tools
UA
![Page 77: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/77.jpg)
Adobe Shadow
http://labs.adobe.com/downloads/shadow.html
![Page 78: Web app and more](https://reader034.fdocuments.us/reader034/viewer/2022052623/5599008f1a28ab69428b466e/html5/thumbnails/78.jpg)
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
╮(╯_╰)╭