阅读类Web应用前端技术探索
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 1,657 views

 

Statistics

Views

Total Views
1,657
Views on SlideShare
1,204
Embed Views
453

Actions

Likes
6
Downloads
29
Comments
0

4 Embeds 453

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

Accessibility

Categories

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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/