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

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