拍首2011前端技术分享

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

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

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

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

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

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

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/

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

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

<s><u>的再利用 • surrounding / upon • <dd class="type"><a href="#" target="_blank">短袖T恤<s></s></a></
dd> • <h2 class="title">潮流男士<u></u></h2>

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

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

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

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

CSS sprite的粒度体验

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

JavaScript

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

applyTemplate引擎

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

图片滚屏按需加载 • 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>

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

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

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

Automatic

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

工欲善其事必先利其器

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

IntelliJ IDEA from damao

Question?

Thanks

拍首2011前端技术分享

拍首2011前端技术分享

More Decks by kaiye

Other Decks in Technology

Featured

Transcript