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

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

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