Web Apps and more

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

weinre

http://phonegap.github.com/weinre/

friends of

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

╮（╯＿╰）╭

Thx:)

douban.com/people/mockee/blog: mockee.com twitter: @mockee

[email protected]