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

Like this? Share it with your network

Share

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

on

  • 1,760 views

 

Statistics

Views

Total Views
1,760
Views on SlideShare
1,307
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应用前端技术探索 Presentation Transcript

  • 1. Web Reading阅读类 Web 应用前端技术探索 mockee@douban http://bit.ly/N8lLqK
  • 2. Things We Dont Talk About Native or Web AppModular Scripts Structured App Responsive Web Design HTML5 concepts
  • 3. Further ReadingWeb Apps and more http://bit.ly/IAhFE5 转化的灵感 http://bit.ly/LkIZvz
  • 4. read.douban.com
  • 5. Vagrant
  • 6. Keep things DRYStylus https://github.com/learnboost/stylus http://pypi.python.org/pypi/pyjade
  • 7. .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> }
  • 8. Submit Reader StoreWeb App iPad App Desktop Laptop Web App Kindle Android Web iPhone Web App iPad Hybrid
  • 9. Apple iPad SonyEricsson LT15i Xperia ArcVisits Apple iPhone Apple iPod Touch HTC S710E Incredible S
  • 10. Google Analytics 2012.5 - 6
  • 11. Submission SystemAuthor Editor WYS WYG
  • 12. DEMOSubmission System
  • 13. Key PointsRange & Selection rangyReal-time Web document Web Storage & Data Sync Collaboration substance etherpad
  • 14. Web ReaderIntelligence PagingTypographic Web Design * punctuation compressionWidget System
  • 15. Widget Systemtitle page text page Figure Code note Interacting components
  • 16. Title Page - Note
  • 17. Figure Code Widget
  • 18. Purchase tips
  • 19. TypographyFixed-Layout Reflowable Adobe PDF Kindle Cloud Reader iBook Author Google Books (landscape) Hybird Douban Web Reader
  • 20. Punctuation Compression “ ‘ ( 《 ” ’ ) 》, 。 、 ? ! ; :
  • 21. “《 ‘( ( ‘ 《 “” 。 ’ , ) 、 》;: ( latin 汉字 3
  • 22. @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
  • 23. Font Rendering Rasterization Black and white Grayscale Subpixel Windowshttp://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/
  • 24. 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)
  • 25. 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
  • 26. 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/
  • 27. Intelligence Paging
  • 28. type page page break width height line-height font-size
  • 29. Non-integer row height Cross multi-pages NewSplit
  • 30. Zoom or Crop Blank or Float
  • 31. Key PointsWeb Worker inlineOn-demand rendering for ALL!Split paragraph / fill height hideOffline
  • 32. Thx:) mockee@gmail.comblog: mockee.com twitter: @mockee douban.com/people/mockee/