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

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

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

79c452ea615941481f31fa7d93ab764a?s=128

Yan Shi

July 07, 2012
Tweet

Transcript

  1. Web Reading mockee@douban 阅读类 Web 应用前端技术探索 http://bit.ly/N8lLqK

  2. Things We Don't Talk About Native or Web App Modular

    Scripts Structured App Responsive Web Design HTML5 concepts
  3. Web Apps and more Further Reading 转化的灵感 http://bit.ly/IAhFE5 http://bit.ly/LkIZvz

  4. read.douban.com

  5. Vagrant

  6. http://pypi.python.org/pypi/pyjade https://github.com/learnboost/stylus Keep things DRY Stylus

  7. .jade .styl article#novella( data-aid='17893' data-layout='vertical') .page .hd title .bd content

    .ft pagination <article id="novella" data-aid="17893" data-layout="vertical"> <div class="page"> <div class="hd">title</div> <div class="bd">content</div> <div class="ft"> pagination </div> </div> </article> vendors = webkit moz official border-radius(val) for vendor in vendors if vendor == official border-radius val else -{vendor}-border-radius val @import 'mixins/border' .btn-flat border-radius 5px .btn-flat { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
  8. Submit Store Reader Web App iPad App Web App Kindle

    Android Web iPhone Web App Hybrid Desktop Laptop iPad
  9. Visits Apple iPad SonyEricsson LT15i Xperia Arc Apple iPhone Apple

    iPod Touch HTC S710E Incredible S
  10. Google Analytics 2012.5 - 6

  11. Submission System Author Editor WYS WYG

  12. None
  13. None
  14. DEMO Submission System

  15. Web Storage & Data Sync Key Points Real-time Web document

    substance Collaboration etherpad Range & Selection rangy
  16. Web Reader Typographic Web Design Intelligence Paging * punctuation compression

    Widget System
  17. Widget System Figure note title page text page Code Interacting

    components
  18. Title Page - Note

  19. None
  20. Code Widget Figure

  21. Purchase tips

  22. Fixed-Layout Reflowable Typography Adobe PDF Kindle Cloud Reader Google Books

    iBook Author (landscape) Hybird Douban Web Reader
  23. Punctuation Compression ” ’ ) 》 : , ? 、

    ! ; 。 “ ‘ 《 (
  24. ( “ ‘ 《 “ ‘ ( 《 ” ’

    ) 》 。 , 、 ; : ( latin 汉字 3
  25. @import "mixins/typography" .content p text-indent: 2em word-wrap: break-word text-align: justify

    text-justify: inter-ideograph hyphens: auto http://caniuse.com/css-hyphens IE 10+ Firefox 6+ Safari 5.1+, iOS 4.2+ Compatibility ...
  26. Font Rendering http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/ Rasterization Black and white Grayscale Subpixel Windows

  27. MAC OS Windows font format has a significant impact new

    engine TrueType PostScript grayscale(XP) GDI ClearType(Win7) DirectWrite mode (IE9) Quartz rendering engine for all browsers subpixel rendering IE 6/7/8 hinting ignore math rasterizer ref x full pixel look a bit “sticky”
  28. gdipp The gdipp (codename) project is a replacement of the

    Windows text render, which brings to you the effect of text like Mac OS and Linux distributions. http://code.google.com/p/gdipp/ DEMO
  29. https://developer.mozilla.org/en/Mozilla_MathML_Project/ http://www.mathjax.org/demos/mathml-samples/ mathematical formula SVG LaTex LaTex to MathML iOS

    / Android Web MathML HTML & CSS SVG
  30. Intelligence Paging

  31. type page height width font-size line-height page break

  32. Split Cross multi-pages Non-integer row height New

  33. Blank or Float Zoom or Crop

  34. Key Points On-demand rendering Web Worker Split paragraph / fill

    height inline for ALL! hide Offline
  35. Thx:) douban.com/people/mockee/ blog: mockee.com twitter: @mockee mockee@gmail.com