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

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

Transcript

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

   View Slide

2. Things
   We Don't Talk About
   Native or Web App
   Modular Scripts Structured App
   Responsive Web Design
   HTML5 concepts
   

   View Slide

3. Web Apps and more
   Further Reading
   转化的灵感
   http://bit.ly/IAhFE5
   http://bit.ly/LkIZvz
   

   View Slide

4. read.douban.com
   

   View Slide

5. Vagrant
   

   View Slide

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

   View Slide

7. .jade .styl
   article#novella(
   data-aid='17893'
   data-layout='vertical')
   .page
   .hd title
   .bd content
   .ft pagination
   id="novella"
   data-aid="17893"
   data-layout="vertical">
   
   title
   content
   
   pagination
   
   
   
   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;
   }
   

   View Slide

8. Submit Store
   Reader
   Web App iPad App
   Web App
   Kindle
   Android Web
   iPhone Web App
   Hybrid
   Desktop
   Laptop
   iPad
   

   View Slide

9. Visits
   Apple iPad
   SonyEricsson LT15i Xperia Arc
   Apple iPhone
   Apple iPod Touch
   HTC S710E Incredible S
   

   View Slide

10. Google Analytics 2012.5 - 6
    

    View Slide

11. Submission System
    Author Editor
    WYS WYG
    

    View Slide

12. View Slide

13. View Slide

14. DEMO
    Submission System
    

    View Slide

15. Web Storage & Data Sync
    Key Points
    Real-time Web document
    substance
    Collaboration etherpad
    Range & Selection rangy
    

    View Slide

16. Web Reader
    Typographic Web Design
    Intelligence Paging
    * punctuation compression
    Widget System
    

    View Slide

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

    View Slide

18. Title Page - Note
    

    View Slide

19. View Slide

20. Code Widget
    Figure
    

    View Slide

21. Purchase tips
    

    View Slide

22. Fixed-Layout Reflowable
    Typography
    Adobe PDF Kindle Cloud Reader
    Google Books
    iBook Author
    (landscape)
    Hybird
    Douban Web Reader
    

    View Slide

23. Punctuation Compression
    ” ’ ） 》
    :
    ， ？
    、 ! ;
    。
    “ ‘ 《
    （
    

    View Slide

24. （ “
    ‘
    《
    “ ‘ （ 《
    ” ’ ） 》
    。
    ， 、 ;
    : （ latin 汉字 3
    

    View Slide

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 ...
    

    View Slide

26. Font Rendering
    http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/
    Rasterization
    Black and white
    Grayscale
    Subpixel
    Windows
    

    View Slide

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”
    

    View Slide

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
    

    View Slide

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
    

    View Slide

30. Intelligence Paging
    

    View Slide

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

    View Slide

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

    View Slide

33. Blank or Float
    Zoom or Crop
    

    View Slide

34. Key Points
    On-demand rendering
    Web Worker
    Split paragraph / fill height
    inline
    for ALL!
    hide
    Offline
    

    View Slide

35. Thx:)
    douban.com/people/mockee/
    blog: mockee.com twitter: @mockee
    mockee@gmail.com
    

    View Slide