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

2,457 views

Published on

Published in: Technology, Design
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,457
On SlideShare
0
From Embeds
0
Number of Embeds
455
Actions
Shares
0
Downloads
35
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

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

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

×