Upgrade to Pro — share decks privately, control downloads, hide ads and more …

阅读类 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. Things We Don't Talk About Native or Web App Modular

    Scripts Structured App Responsive Web Design HTML5 concepts
  2. .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; }
  3. Submit Store Reader Web App iPad App Web App Kindle

    Android Web iPhone Web App Hybrid Desktop Laptop iPad
  4. Web Storage & Data Sync Key Points Real-time Web document

    substance Collaboration etherpad Range & Selection rangy
  5. Fixed-Layout Reflowable Typography Adobe PDF Kindle Cloud Reader Google Books

    iBook Author (landscape) Hybird Douban Web Reader
  6. ( “ ‘ 《 “ ‘ ( 《 ” ’

    ) 》 。 , 、 ; : ( latin 汉字 3
  7. @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 ...
  8. 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”
  9. 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