拍首2011前端技术分享

关于拍拍网首页2011版前端技术相关的分享

Transcript

1. 拍首2011版前端技术分享
   Kaiye @ Paipai Frontend Team
   

   View Slide

2. “四条腿的都是好人，
   两条腿的都是坏蛋！”
   ──《动物庄园》的
   设计原理
   

   View Slide

3. DIV
   

   View Slide

4. DIV
   

   View Slide

5. DIV
   

   View Slide

6. copyright © 1998 - 2011
   • document.write(new<br/>Date().getFullYear())
   •
   
   

   View Slide

7. “每个人心中都有⼀一扇门，
   只有从里面才能打开”
   ─Lunatic Sun
   

   View Slide

8. Design for humans first,
   machines second.
   ─The Design of HTML5
   

   View Slide

9. HTML
   

   View Slide

10. The HTML Part
    • WEB语义化的意义？
    • DIV存在的合理性：
    http://dev.w3.org/html5/
    spec/
    Overview.html#the-div-
    element
    •
    •
    • HTML5 TagName的使用
    方案：http://
    www.nczonline.net/blog/
    2011/03/22/using-html5-
    semantic-elements-
    today/
    • HTML5 CSS Reset
    

    View Slide

11. Search Input
    name="KeyWord" autofocus x-webkit-
    speech speech placeholder="输入商品名
    搜索" class="pp-search-input"
    value="" autocomplete="off">
    http://css-tricks.com/webkit-html5-
    search-inputs/
    

    View Slide

12. 不要相信国外砖家
    • Google 早在几年前就不对 keyword meta 标签进
    行支持《淘宝首页代码调整》
    • Unlike Google, Meta description and Meta keywords
    tags are still very useful in improving ranking in
    Baidu《Search Engine Optimization for Baidu》
    • Meta description不是权值计算的参考因素，这个
    标签存在与否不影响网页权值。《百度搜索引擎
    优化指南 1.0》
    

    View Slide

13. 的语义回归
    • border / icon
    • The HTML5 specification defines the
    element in 4.6.17 The b element ：The
    element represents a span of text to be
    stylistically offset from the normal prose without
    conveying any extra importance.
    • The element represents an span oftext that
    offset from the normal prose.
    • http://www.w3.org/wiki/HTML/Elements/i
    

    View Slide

14. 的再利用
    • surrounding / upon
    • target="_blank">短袖T恤
    dd>
    • 潮流男士
    

    View Slide

15. CSS
    

    View Slide

16. The CSS Part
    • 《CSS流体(自适应)布
    局下宽度分离原则》
    • 《Data URI&MHTML：
    用还是不用？》http://
    www.99css.com/
    archives/492
    • 《去除按钮、链接中的
    虚线框》http://
    sofish.de/1366
    • 连字符还是下划线？
    http://
    stackoverflow.com/
    questions/1686337/
    hyphens-or-underscores-
    in-css-and-html-
    identifiers
    • CSS3 animation与
    gradient的应用
    

    View Slide

17. http://www.colorzilla.com/gradient-editor/
    

    View Slide

18. CSS字体的选择
    • 拍首2011版最佳实践：
    body,button, input, select, textarea
    {font: 12px/1.5 arial;}
    • http://www.angelfire.com/al4/rcollins/style/fonts.html
    • http://dancewithnet.com/2009/11/22/default-web-
    font-style/
    • http://www.cnblogs.com/ruxpinsp1/archive/
    2008/05/11/font-in-front-end-development-4.html
    • http://yx.takeback.net/121/serif-font.html
    

    View Slide

19. 栅格系统是愚蠢的
    • Blueprint的栅格不是给人用的
    • 拍拍的自动栅格生成方案http://yekai.net/
    demo/cssgrids/css-generator.html
    • 《Source order and display order should
    match》
    • 前端开发比设计师更应关注WAI
    

    View Slide

20. CSS sprite的粒度体验
    

    View Slide

21. 关于模块化CSS
    • 《Don’t make me think》：长Classname
    与短Classname的抉择
    • Convent Over Configuration：避免无意义
    的注释规范
    • CSS语义化：.group代
    替.clear:after{...}.clear{*zoom:1}
    • hide mb ellipsis name的引入
    

    View Slide

22. View Slide

23. JavaScript
    

    View Slide

24. 不要将脚本放在底部
    • YSlow: Put Scripts at the Bottom的意义？
    • 分离网页三层结构的实现者
    •onmouseover="this.className='p
    romotion pp-droplist hover'">
    •禁用JS的情况
    

    View Slide

25. applyTemplate引擎
    

    View Slide

26. 拍首项目JS组件
    • $listHoverDetail()、$appendStyle()
    • PP.index.v2011
    • \off \on
    • document.namespaces.add("v",
    "urn:schemas-microsoft-com:vml")
    

    View Slide

27. WPO
    

    View Slide

28. 图片滚屏按需加载
    • img src属性置空的性能问题
    • CSS样式背景的按需加载实验
    type="text/plain">.category-
    list .sketch{background-image:url(http://
    static.paipaiimg.com/sinclude/common2011/css/
    index/bg-category-list.png);}
    

    View Slide

29. 图形模拟技巧
    • CSS三角、渐进生成工具
    http://yekai.net/demo/css-angle-
    generator.html
    • .portal-qqshop .slider-nav-prev的hover实现
    

    View Slide

30. 模板层数据优化
    HTML -> XML -> JSON
    

    View Slide

31. http://www.webpagetest.org/result/110420_5B_ERZJ/1/details/
    

    View Slide

32. Automatic
    

    View Slide

33. “你不要告诉我，你们的页面是
    ⼀一个像素⼀一个像素拼出来的！”
    ──某开发对前端页面制作流程的感叹
    

    View Slide

34. 工欲善其事 必先利其器
    

    View Slide

35. View Slide

36. CSSGaga by ytzong
    • 样式/图片自动压缩、上传与发布
    • CSS sprite自动生成！
    • http://www.99css.com/archives/542
    

    View Slide

37. IntelliJ IDEA from damao
    

    View Slide

38. Legos
    

    View Slide

39. Question?
    

    View Slide

40. Thanks
    

    View Slide