阅读类 web 应用前端技术探索

Web Reading

mockee@douban

阅读类 Web 应用前端技术探索

http://bit.ly/N8lLqK

Things

We Don't Talk About

Native or Web App

Modular Scripts Structured App

Responsive Web Design

HTML5 concepts

Web Apps and more

Further Reading

转化的灵感

http://bit.ly/IAhFE5

http://bit.ly/LkIZvz

read.douban.com

Vagrant

http://pypi.python.org/pypi/pyjadehttps://github.com/learnboost/stylus

Keep things DRY

Stylus

.jade .stylarticle#novella( data-aid='17893' data-layout='vertical') .page .hd title .bd content .ft pagination

<article id="novella" data-aid="17893" data-layout="vertical"> <div class="page"> <div class="hd">title</div> <div class="bd">content</div> <div class="ft"> pagination </div> </div></article>

vendors = webkit moz officialborder-radius(val) for vendor in vendors if vendor == official border-radius val else -{vendor}-border-radius val

@import 'mixins/border' .btn-flat border-radius 5px

.btn-flat { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

Submit StoreReader

Web App iPad App

Web App

Kindle

Android Web

iPhone Web App

Hybrid

DesktopLaptop

iPad

Visits

Apple iPad

SonyEricsson LT15i Xperia Arc

Apple iPhone

Apple iPod Touch

HTC S710E Incredible S

Google Analytics 2012.5 - 6

Submission System

Author Editor

WYS WYG

DEMOSubmission System

Web Storage & Data Sync

Key Points

Real-time Web document

substanceCollaboration etherpad

Range & Selection rangy

Web Reader

Typographic Web Design

Intelligence Paging

* punctuation compression

Widget System

Widget System

Figurenote

title page text page

Code

Interacting components

Title Page - Note

Code WidgetFigure

Purchase tips

Fixed-Layout Reflowable

Typography

Adobe PDF Kindle Cloud Reader

Google BooksiBook Author(landscape)

Hybird

Douban Web Reader

Punctuation Compression

” ’ ） 》

:

， ？、 ! ;。

“ ‘ 《（

（ “‘《“ ‘ （ 《

” ’ ） 》。 ， 、 ;

: （ latin 汉字 3

@import "mixins/typography"

.content p text-indent: 2em word-wrap: break-word text-align: justify text-justify: inter-ideograph hyphens: auto

http://caniuse.com/css-hyphens

IE 10+Firefox 6+Safari 5.1+, iOS 4.2+

Compatibility ...

Font Rendering

http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/

Rasterization

Black and white

Grayscale

Subpixel

Windows

MAC OS Windows

font format has asignificant impact

new engineTrueType PostScript

grayscale(XP)

GDI ClearType(Win7)

DirectWrite mode (IE9)

Quartz rendering enginefor all browsers

subpixel rendering

IE 6/7/8

hinting

ignore

math

rasterizer

refx

full pixel

look a bit “sticky”

gdippThe gdipp (codename) project is a replacement of the Windows text render, which brings to you the effect of text like Mac OS and Linux distributions.

http://code.google.com/p/gdipp/

DEMO

https://developer.mozilla.org/en/Mozilla_MathML_Project/

http://www.mathjax.org/demos/mathml-samples/

mathematical formula

SVG LaTexLaTex to MathML

iOS / Android

Web

MathML

HTML & CSS

SVG

Intelligence Paging

type page

height

width

font-size

line-height

page break

Split

Crossmulti-pages

Non-integerrow height

New

Blank or Float

Zoom or Crop

Key Points

On-demand rendering

Web Worker

Split paragraph / fill height

inline

for ALL!

hide

Offline

Thx:)

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

mockee@gmail.com