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 ...
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=1789...
Submit     Reader     StoreWeb App    iPad App Desktop Laptop           Web App            Kindle           Android     We...
Apple iPad         SonyEricsson LT15i Xperia ArcVisits   Apple iPhone         Apple iPod Touch         HTC S710E Incredibl...
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...
Punctuation Compression          “       ‘   (       《      ”       ’       )   》,     。       、       ?   !       ;      :
“《    ‘(   (       ‘   《    “”   。    ’ ,   )   、       》;: (       latin 汉字 3
@import "mixins/typography".content p  text-indent: 2em  word-wrap: break-word  text-align: justify                       ...
Font Rendering                                                           Rasterization                                    ...
MAC OS                                WindowsQuartz rendering engine                    font format has a    for all brows...
gdipp      http://code.google.com/p/gdipp/The gdipp (codename) project is a replacement of theWindows text render, which b...
mathematical formulaLaTex to MathML                        MathML                 SVG LaTex                               ...
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/
阅读类 Web 应用前端技术探索
阅读类 Web 应用前端技术探索
阅读类 Web 应用前端技术探索
Upcoming SlideShare
Loading in...5
×

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

1,167

Published on

第七届 D2 前端技术论坛 http://www.d2forum.org/d2/7/

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

No Downloads
Views
Total Views
1,167
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
60
Comments
0
Likes
10
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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×