阅读类 web 应用前端技术探索
DESCRIPTION
第七届 D2 前端技术论坛 http://www.d2forum.org/d2/7/TRANSCRIPT
![Page 1: 阅读类 Web 应用前端技术探索](https://reader034.vdocuments.site/reader034/viewer/2022052122/559e18b31a28ab1c798b4830/html5/thumbnails/1.jpg)
Web Reading
mockee@douban
阅读类 Web 应用前端技术探索
http://bit.ly/N8lLqK
![Page 2: 阅读类 Web 应用前端技术探索](https://reader034.vdocuments.site/reader034/viewer/2022052122/559e18b31a28ab1c798b4830/html5/thumbnails/2.jpg)
Things
We Don't Talk About
Native or Web App
Modular Scripts Structured App
Responsive Web Design
HTML5 concepts
![Page 3: 阅读类 Web 应用前端技术探索](https://reader034.vdocuments.site/reader034/viewer/2022052122/559e18b31a28ab1c798b4830/html5/thumbnails/3.jpg)
Web Apps and more
Further Reading
转化的灵感
http://bit.ly/IAhFE5
http://bit.ly/LkIZvz
![Page 4: 阅读类 Web 应用前端技术探索](https://reader034.vdocuments.site/reader034/viewer/2022052122/559e18b31a28ab1c798b4830/html5/thumbnails/4.jpg)
read.douban.com
![Page 6: 阅读类 Web 应用前端技术探索](https://reader034.vdocuments.site/reader034/viewer/2022052122/559e18b31a28ab1c798b4830/html5/thumbnails/6.jpg)
http://pypi.python.org/pypi/pyjadehttps://github.com/learnboost/stylus
Keep things DRY
Stylus
![Page 7: 阅读类 Web 应用前端技术探索](https://reader034.vdocuments.site/reader034/viewer/2022052122/559e18b31a28ab1c798b4830/html5/thumbnails/7.jpg)
.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; }
![Page 8: 阅读类 Web 应用前端技术探索](https://reader034.vdocuments.site/reader034/viewer/2022052122/559e18b31a28ab1c798b4830/html5/thumbnails/8.jpg)
Submit StoreReader
Web App iPad App
Web App
Kindle
Android Web
iPhone Web App
Hybrid
DesktopLaptop
iPad
![Page 9: 阅读类 Web 应用前端技术探索](https://reader034.vdocuments.site/reader034/viewer/2022052122/559e18b31a28ab1c798b4830/html5/thumbnails/9.jpg)
Visits
Apple iPad
SonyEricsson LT15i Xperia Arc
Apple iPhone
Apple iPod Touch
HTC S710E Incredible S
![Page 10: 阅读类 Web 应用前端技术探索](https://reader034.vdocuments.site/reader034/viewer/2022052122/559e18b31a28ab1c798b4830/html5/thumbnails/10.jpg)
Google Analytics 2012.5 - 6
![Page 11: 阅读类 Web 应用前端技术探索](https://reader034.vdocuments.site/reader034/viewer/2022052122/559e18b31a28ab1c798b4830/html5/thumbnails/11.jpg)
Submission System
Author Editor
WYS WYG
![Page 12: 阅读类 Web 应用前端技术探索](https://reader034.vdocuments.site/reader034/viewer/2022052122/559e18b31a28ab1c798b4830/html5/thumbnails/12.jpg)
![Page 13: 阅读类 Web 应用前端技术探索](https://reader034.vdocuments.site/reader034/viewer/2022052122/559e18b31a28ab1c798b4830/html5/thumbnails/13.jpg)
![Page 14: 阅读类 Web 应用前端技术探索](https://reader034.vdocuments.site/reader034/viewer/2022052122/559e18b31a28ab1c798b4830/html5/thumbnails/14.jpg)
DEMOSubmission System
![Page 15: 阅读类 Web 应用前端技术探索](https://reader034.vdocuments.site/reader034/viewer/2022052122/559e18b31a28ab1c798b4830/html5/thumbnails/15.jpg)
Web Storage & Data Sync
Key Points
Real-time Web document
substanceCollaboration etherpad
Range & Selection rangy
![Page 16: 阅读类 Web 应用前端技术探索](https://reader034.vdocuments.site/reader034/viewer/2022052122/559e18b31a28ab1c798b4830/html5/thumbnails/16.jpg)
Web Reader
Typographic Web Design
Intelligence Paging
* punctuation compression
Widget System
![Page 17: 阅读类 Web 应用前端技术探索](https://reader034.vdocuments.site/reader034/viewer/2022052122/559e18b31a28ab1c798b4830/html5/thumbnails/17.jpg)
Widget System
Figurenote
title page text page
Code
Interacting components
![Page 18: 阅读类 Web 应用前端技术探索](https://reader034.vdocuments.site/reader034/viewer/2022052122/559e18b31a28ab1c798b4830/html5/thumbnails/18.jpg)
Title Page - Note
![Page 19: 阅读类 Web 应用前端技术探索](https://reader034.vdocuments.site/reader034/viewer/2022052122/559e18b31a28ab1c798b4830/html5/thumbnails/19.jpg)
![Page 20: 阅读类 Web 应用前端技术探索](https://reader034.vdocuments.site/reader034/viewer/2022052122/559e18b31a28ab1c798b4830/html5/thumbnails/20.jpg)
Code WidgetFigure
![Page 21: 阅读类 Web 应用前端技术探索](https://reader034.vdocuments.site/reader034/viewer/2022052122/559e18b31a28ab1c798b4830/html5/thumbnails/21.jpg)
Purchase tips
![Page 22: 阅读类 Web 应用前端技术探索](https://reader034.vdocuments.site/reader034/viewer/2022052122/559e18b31a28ab1c798b4830/html5/thumbnails/22.jpg)
Fixed-Layout Reflowable
Typography
Adobe PDF Kindle Cloud Reader
Google BooksiBook Author(landscape)
Hybird
Douban Web Reader
![Page 23: 阅读类 Web 应用前端技术探索](https://reader034.vdocuments.site/reader034/viewer/2022052122/559e18b31a28ab1c798b4830/html5/thumbnails/23.jpg)
Punctuation Compression
” ’ ) 》
:
, ?、 ! ;。
“ ‘ 《(
![Page 24: 阅读类 Web 应用前端技术探索](https://reader034.vdocuments.site/reader034/viewer/2022052122/559e18b31a28ab1c798b4830/html5/thumbnails/24.jpg)
( “‘《“ ‘ ( 《
” ’ ) 》。 , 、 ;
: ( latin 汉字 3
![Page 25: 阅读类 Web 应用前端技术探索](https://reader034.vdocuments.site/reader034/viewer/2022052122/559e18b31a28ab1c798b4830/html5/thumbnails/25.jpg)
@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 ...
![Page 26: 阅读类 Web 应用前端技术探索](https://reader034.vdocuments.site/reader034/viewer/2022052122/559e18b31a28ab1c798b4830/html5/thumbnails/26.jpg)
Font Rendering
http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/
Rasterization
Black and white
Grayscale
Subpixel
Windows
![Page 27: 阅读类 Web 应用前端技术探索](https://reader034.vdocuments.site/reader034/viewer/2022052122/559e18b31a28ab1c798b4830/html5/thumbnails/27.jpg)
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”
![Page 28: 阅读类 Web 应用前端技术探索](https://reader034.vdocuments.site/reader034/viewer/2022052122/559e18b31a28ab1c798b4830/html5/thumbnails/28.jpg)
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
![Page 29: 阅读类 Web 应用前端技术探索](https://reader034.vdocuments.site/reader034/viewer/2022052122/559e18b31a28ab1c798b4830/html5/thumbnails/29.jpg)
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
![Page 30: 阅读类 Web 应用前端技术探索](https://reader034.vdocuments.site/reader034/viewer/2022052122/559e18b31a28ab1c798b4830/html5/thumbnails/30.jpg)
Intelligence Paging
![Page 31: 阅读类 Web 应用前端技术探索](https://reader034.vdocuments.site/reader034/viewer/2022052122/559e18b31a28ab1c798b4830/html5/thumbnails/31.jpg)
type page
height
width
font-size
line-height
page break
![Page 32: 阅读类 Web 应用前端技术探索](https://reader034.vdocuments.site/reader034/viewer/2022052122/559e18b31a28ab1c798b4830/html5/thumbnails/32.jpg)
Split
Crossmulti-pages
Non-integerrow height
New
![Page 33: 阅读类 Web 应用前端技术探索](https://reader034.vdocuments.site/reader034/viewer/2022052122/559e18b31a28ab1c798b4830/html5/thumbnails/33.jpg)
Blank or Float
Zoom or Crop
![Page 34: 阅读类 Web 应用前端技术探索](https://reader034.vdocuments.site/reader034/viewer/2022052122/559e18b31a28ab1c798b4830/html5/thumbnails/34.jpg)
Key Points
On-demand rendering
Web Worker
Split paragraph / fill height
inline
for ALL!
hide
Offline