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

Slide 1

Slide 1 text

Web Reading mockee@douban 阅读类 Web 应用前端技术探索 http://bit.ly/N8lLqK

Slide 2

Slide 2 text

Things We Don't Talk About Native or Web App Modular Scripts Structured App Responsive Web Design HTML5 concepts

Slide 3

Slide 3 text

Web Apps and more Further Reading 转化的灵感 http://bit.ly/IAhFE5 http://bit.ly/LkIZvz

Slide 4

Slide 4 text

read.douban.com

Slide 5

Slide 5 text

Vagrant

Slide 6

Slide 6 text

http://pypi.python.org/pypi/pyjade https://github.com/learnboost/stylus Keep things DRY Stylus

Slide 7

Slide 7 text

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

title

content

pagination

vendors = webkit moz official border-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; }

Slide 8

Slide 8 text

Submit Store Reader Web App iPad App Web App Kindle Android Web iPhone Web App Hybrid Desktop Laptop iPad

Slide 9

Slide 9 text

Visits Apple iPad SonyEricsson LT15i Xperia Arc Apple iPhone Apple iPod Touch HTC S710E Incredible S

Slide 10

Slide 10 text

Google Analytics 2012.5 - 6

Slide 11

Slide 11 text

Submission System Author Editor WYS WYG

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

DEMO Submission System

Slide 15

Slide 15 text

Web Storage & Data Sync Key Points Real-time Web document substance Collaboration etherpad Range & Selection rangy

Slide 16

Slide 16 text

Web Reader Typographic Web Design Intelligence Paging * punctuation compression Widget System

Slide 17

Slide 17 text

Widget System Figure note title page text page Code Interacting components

Slide 18

Slide 18 text

Title Page - Note

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

Code Widget Figure

Slide 21

Slide 21 text

Purchase tips

Slide 22

Slide 22 text

Fixed-Layout Reflowable Typography Adobe PDF Kindle Cloud Reader Google Books iBook Author (landscape) Hybird Douban Web Reader

Slide 23

Slide 23 text

Punctuation Compression ” ’ ）》 : ，？、 ! ; 。 “ ‘ 《（

Slide 24

Slide 24 text

（ “ ‘ 《 “ ‘ （《 ” ’ ）》。，、 ; : （ latin 汉字 3

Slide 25

Slide 25 text

@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 ...

Slide 26

Slide 26 text

Font Rendering http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/ Rasterization Black and white Grayscale Subpixel Windows

Slide 27

Slide 27 text

MAC OS Windows font format has a significant impact new engine TrueType PostScript grayscale(XP) GDI ClearType(Win7) DirectWrite mode (IE9) Quartz rendering engine for all browsers subpixel rendering IE 6/7/8 hinting ignore math rasterizer ref x full pixel look a bit “sticky”

Slide 28

Slide 28 text

gdipp The 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

Slide 29

Slide 29 text

https://developer.mozilla.org/en/Mozilla_MathML_Project/ http://www.mathjax.org/demos/mathml-samples/ mathematical formula SVG LaTex LaTex to MathML iOS / Android Web MathML HTML & CSS SVG

Slide 30

Slide 30 text

Intelligence Paging

Slide 31

Slide 31 text

type page height width font-size line-height page break

Slide 32

Slide 32 text

Split Cross multi-pages Non-integer row height New

Slide 33

Slide 33 text

Blank or Float Zoom or Crop

Slide 34

Slide 34 text

Key Points On-demand rendering Web Worker Split paragraph / fill height inline for ALL! hide Offline

Slide 35

Slide 35 text

Thx:) douban.com/people/mockee/ blog: mockee.com twitter: @mockee [email protected]