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

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

Things We Dont Talk About Native or Web AppModular Scripts Structured App Responsive Web Design HTML5 concepts

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

read.douban.com

Vagrant

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

.jade .stylarticle#novella( vendors = webkit moz official data-aid=17893 border-radius(val) data-layout=vertical) for vendor in vendors .page if vendor == official .hd title border-radius val .bd content else .ft pagination -{vendor}-border-radius val<article @import mixins/border id="novella" .btn-flat data-aid="17893" border-radius 5px data-layout="vertical"> <div class="page"> <div class="hd">title</div> <div class="bd">content</div> <div class="ft"> .btn-flat { pagination -webkit-border-radius: 5px; </div> -moz-border-radius: 5px; </div> border-radius: 5px;</article> }

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

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

Google Analytics 2012.5 - 6

Submission SystemAuthor Editor WYS WYG

DEMOSubmission System

Key PointsRange & Selection rangyReal-time Web document Web Storage & Data Sync Collaboration substance etherpad

Web ReaderIntelligence PagingTypographic Web Design * punctuation compressionWidget System

Widget Systemtitle page text page Figure Code note Interacting components

Title Page - Note

Figure Code Widget

Purchase tips

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

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

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

@import "mixins/typography".content p text-indent: 2em word-wrap: break-word text-align: justify Compatibility ... text-justify: inter-ideograph hyphens: autoIE 10+Firefox 6+Safari 5.1+, iOS 4.2+http://caniuse.com/css-hyphens

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

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

gdipp http://code.google.com/p/gdipp/The gdipp (codename) project is a replacement of theWindows text render, which brings to you the effectof text like Mac OS and Linux distributions. DEMO

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

Intelligence Paging

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

Non-integer row height Cross multi-pages NewSplit

Zoom or Crop Blank or Float

Key PointsWeb Worker inlineOn-demand rendering for ALL!Split paragraph / fill height hideOffline

Thx:) mockee@gmail.comblog: mockee.com twitter: @mockee douban.com/people/mockee/

http://www.d2forum.org	441
http://www.itfeed.com	4
http://www.itfeed.cn	4
http://getpocket.com	2

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

by taobao.com on Jul 11, 2012

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 451

Statistics

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