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

拍首2011前端技术分享

kaiye
May 27, 2011

 拍首2011前端技术分享

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

kaiye

May 27, 2011
Tweet

More Decks by kaiye

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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


    View full-size slide

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

    View full-size slide

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

    View full-size slide

  6. 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 full-size slide

  7. 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 full-size slide

  8. 不要相信国外砖家
    • 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 full-size slide

  9. 的语义回归
    • 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 full-size slide

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

    View full-size slide

  11. 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 full-size slide

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

    View full-size slide

  13. 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 full-size slide

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

    View full-size slide

  15. CSS sprite的粒度体验

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. applyTemplate引擎

    View full-size slide

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

    View full-size slide

  20. 图片滚屏按需加载
    • 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. IntelliJ IDEA from damao

    View full-size slide