Embed Size (px)
Citation preview
Web Apps and moremockee@douban
http://bit.ly/IAhFE5
HTML5Once again...
http://blog.whatwg.org/html-is-the-new-html5
Standard ?!
http://burningbird.net/node/156
http://www.w3.org/2011/02/htmlwg-pr.html
"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
"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
http://gs.statcounter.com/press/mobile-internet-usage-is-doubling-year-on-year
KeywordsIdentifying Web Apps
Self Contained
Functional
Immersive
Interactive
Work Offline
Device Aware
Ajaxcellent
New Navigable
http://www.html5rocks.com/webappfieldguide/know-your-apps/app-checklist/
Conceptsdamned...
Mobile App Web
Desktop
Native
Hybrid
Worry aboutBrowsers & 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 WorldDouban Read
http://read.douban.com
Submission System
Author Editor
WYSIWYG
legend
dimensionsalign
upload
<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
Semantically highlight parts of text
<mark>
Web Reader
ContentAdaptation
main techniques
Responsive Web Design
Mobile First
Progressive Enhancement
Server-side Adaptation
http://www.alistapart.com/articles/responsive-web-design/
Responsive Web Designby ETHAN MARCOTTE
Layout
Grids
Media Queries
Responsive
http://www.lukew.com/ff/entry.asp?1514
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/
Media Queries
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
@media only screenand (max-device-width: 1024px)and (orientation: portrait), (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 640px) { ... }
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'); }});
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 }
orientation: landscape
New Navigable
Paneltable of contents
Progress
Original
Large
Medium
Small
Retina ?
Media Queries
Mobile First
Bryan Rieger
Desktop
Mobile First
Fixed-Layout Reflowable
Format
Adobe PDF
PostScript
Kindle Cloud Reader
Google Books
iBook Author(landscape)
Plain Text
Reflowing & Paging
text block
page break
image block
type page
Blank or Float
Zoom or Crop
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
paging...
render
paging in background threads
render
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 Visibility API
document.addEventListener( 'visibilitychange', function(e) { // document.visibilityState;}, false);
visibilityState
visible hidden prerender
(webkit / moz)
Store Reader
if (document.visibilityState === 'hidden' || document.visibilityState === 'prerender' || document.hidden === 'ture') { stopSyncReadingProgress();}
http://www.w3.org/TR/2011/WD-page-visibility-20110602/
SVGConfigure Web Server MIME types
".svg" => "image/svg+xml"
Creating & Converting & Optimizing
SVG-editAviary Raven
ScourVector Magic
// 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
Touch Events
touchstarttouchmovetouchend
touchcancel
touchInfo
init
update
use
clear
touches Array (1 or 11)
pageX, pageY
time
thresholds
Gestures
Gesture
Swipeup, right, down, left
Tapsingle, double; hold
Pinchin, out; rotate
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
FullscreenrequestFullscreen
exitFullscreen
fullscreenElement
webkitRequestFullScreen
mozRequestFullScreen
http://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html
webkitCancelFullScreen
mozCancelFullScreen
webkitCurrentFullScreenElement
mozFullScreenElement
fullscreenEnabled mozFullScreenEnabled
webkitIsFullscreenisFullscreen
Events:fullscreenchange, fullscreenerror
Compatibility:
F11
webkitRequestFullScreen( Element.ALLOW_KEYBOARD_INPUT);
http://code.google.com/p/chromium/issues/detail?id=95344
Issue 95344: webkitRequestFullScreen results in a black background
document.documentElement.webkitRequestFullScreen();
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
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
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.
* 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
Compatibility
window.applicationCache
checking
noupdate
downloading updateready
swapCache()
cachedi
progress
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
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
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 .........
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
Framework
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
Debugger
WebkitDeveloper Tools
UA
Adobe Shadow
http://labs.adobe.com/downloads/shadow.html
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
╮（╯＿╰）╭
