拍首2011前端技术分享

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

DIV

Slide 4

Slide 4 text

DIV

Slide 5

Slide 5 text

DIV

Slide 6

Slide 6 text

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Design for humans ﬁrst, machines second. ─The Design of HTML5

Slide 9

Slide 9 text

HTML

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Search Input http://css-tricks.com/webkit-html5- search-inputs/

Slide 12

Slide 12 text

不要相信国外砖家 • 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》

Slide 13

Slide 13 text

的语义回归 • border / icon • The HTML5 speciﬁcation deﬁnes 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

Slide 14

Slide 14 text

的再利用 • surrounding / upon •

短袖T恤 dd> •

潮流男士

Slide 15

Slide 15 text

CSS

Slide 16

Slide 16 text

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的应用

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

CSS字体的选择 • 拍首2011版最佳实践： body,button, input, select, textarea {font: 12px/1.5 arial;} • http://www.angelﬁre.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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

CSS sprite的粒度体验

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

JavaScript

Slide 24

Slide 24 text

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

•禁用JS的情况

Slide 25

Slide 25 text

applyTemplate引擎

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

WPO

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

Automatic

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

工欲善其事必先利其器

Slide 35

Slide 35 text