$30 off During Our Annual Pro Sale. View Details »

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

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

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

Yan Shi

July 07, 2012
Tweet

More Decks by Yan Shi

Other Decks in Programming

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
    [email protected]

    View Slide