• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content







Total Views
Views on SlideShare
Embed Views



4 Embeds 453

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



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

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

    • 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/