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

拍首2011前端技术分享

Dabcc157b09c806f53a61102f47554e6?s=47 kaiye
May 27, 2011

 拍首2011前端技术分享

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

Dabcc157b09c806f53a61102f47554e6?s=128

kaiye

May 27, 2011
Tweet

More Decks by kaiye

Other Decks in Technology

Transcript

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

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

  3. DIV

  4. DIV

  5. DIV

  6. copyright © 1998 - 2011 • <script>document.write(new Date().getFullYear())</script> • <!--#config

    timefmt="%Y" --> <!--#echo var="DATE_LOCAL" -->
  7. “每个人心中都有⼀一扇门, 只有从里面才能打开” ─Lunatic Sun

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

  9. HTML

  10. The HTML Part • WEB语义化的意义? • DIV存在的合理性: http://dev.w3.org/html5/ spec/ Overview.html#the-div-

    element • <!doctype html> • <meta charset=”gbk” /> • HTML5 TagName的使用 方案:http:// www.nczonline.net/blog/ 2011/03/22/using-html5- semantic-elements- today/ • HTML5 CSS Reset
  11. Search Input <input type="search"id="KeyWord" name="KeyWord" autofocus x-webkit- speech speech placeholder="输入商品名

    搜索" class="pp-search-input" value="" autocomplete="off"> http://css-tricks.com/webkit-html5- search-inputs/
  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》
  13. <b><i>的语义回归 • border / icon • The HTML5 specification defines

    the <b> element in 4.6.17 The b element :The <b> element represents a span of text to be stylistically offset from the normal prose without conveying any extra importance. • The <i> element represents an span oftext that offset from the normal prose. • http://www.w3.org/wiki/HTML/Elements/i
  14. <s><u>的再利用 • surrounding / upon • <dd class="type"><a href="#" target="_blank">短袖T恤<s></s></a></

    dd> • <h2 class="title">潮流男士<u></u></h2>
  15. CSS

  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的应用
  17. http://www.colorzilla.com/gradient-editor/

  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
  19. 栅格系统是愚蠢的 • Blueprint的栅格不是给人用的 • 拍拍的自动栅格生成方案http://yekai.net/ demo/cssgrids/css-generator.html • 《Source order and

    display order should match》 • 前端开发比设计师更应关注WAI
  20. CSS sprite的粒度体验

  21. 关于模块化CSS • 《Don’t make me think》:长Classname 与短Classname的抉择 • Convent Over

    Configuration:避免无意义 的注释规范 • CSS语义化:.group代 替.clear:after{...}.clear{*zoom:1} • hide mb ellipsis name的引入
  22. None
  23. JavaScript

  24. 不要将脚本放在底部 • YSlow: Put Scripts at the Bottom的意义? • 分离网页三层结构的实现者

    •<li class="promotion pp- droplist" onmouseover="this.className='p romotion pp-droplist hover'"> •禁用JS的情况
  25. applyTemplate引擎

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

    "urn:schemas-microsoft-com:vml")
  27. WPO

  28. 图片滚屏按需加载 • img src属性置空的性能问题 • CSS样式背景的按需加载实验 <script id="categoryListBottomCSS" type="text/plain">.category- list

    .sketch{background-image:url(http:// static.paipaiimg.com/sinclude/common2011/css/ index/bg-category-list.png);}</script>
  29. 图形模拟技巧 • CSS三角、渐进生成工具 http://yekai.net/demo/css-angle- generator.html • .portal-qqshop .slider-nav-prev的hover实现

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

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

  32. Automatic

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

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

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

  37. IntelliJ IDEA from damao

  38. Legos

  39. Question?

  40. Thanks