Download - 阅读类 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
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