Enviar pesquisa
Carregar
2011homepage
•
0 gostou
•
190 visualizações
fangdeng
Seguir
Educação
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 50
Baixar agora
Baixar para ler offline
Recomendados
Practica 16
Practica 16
Looye
Сказки Пушкина
Сказки Пушкина
Ольга Булгакова
Viva street
Viva street
moza_psa
Session Management for scalable web projects (Froscon 2011 talk in german)
Session Management for scalable web projects (Froscon 2011 talk in german)
triagens
áLbum de fotografías
áLbum de fotografías
karenth10-_
SCBCD 1. generic ejb
SCBCD 1. generic ejb
Francesco Ierna
Picanto 2012
Picanto 2012
Power Imports
JavaME no mundo real
JavaME no mundo real
Awdren Fontão
Recomendados
Practica 16
Practica 16
Looye
Сказки Пушкина
Сказки Пушкина
Ольга Булгакова
Viva street
Viva street
moza_psa
Session Management for scalable web projects (Froscon 2011 talk in german)
Session Management for scalable web projects (Froscon 2011 talk in german)
triagens
áLbum de fotografías
áLbum de fotografías
karenth10-_
SCBCD 1. generic ejb
SCBCD 1. generic ejb
Francesco Ierna
Picanto 2012
Picanto 2012
Power Imports
JavaME no mundo real
JavaME no mundo real
Awdren Fontão
Desarrollo del tema[1][1]
Desarrollo del tema[1][1]
alondraecca
Apresentação - Quixadá
Apresentação - Quixadá
programaucace
Ironbag channelguide
Ironbag channelguide
Myleejina
Pensamiento humano
Pensamiento humano
Euler Ruiz
Kinecting people
Kinecting people
Eugene Zharkov
Imagenes que nos cuidan
Imagenes que nos cuidan
agustina98
Artigo
Artigo
sergiorrm2
Redes sociales
Redes sociales
LADDYE
Trabajo jenny
Trabajo jenny
yennybeltran
Analize adina3ugust
Analize adina3ugust
andreidumitrascu
Project gradppt2
Project gradppt2
sreisanderson
Research2
Research2
Sani Satjachaliao
Eugenio olorvida graciana costelo
Eugenio olorvida graciana costelo
aileenO
Brchure ags
Brchure ags
IRIDODIAGNOSTICSYS
Res. 971 11
Res. 971 11
vaninalanati
Retoques fotográficos con photoshop
Retoques fotográficos con photoshop
ramiro1efrubenmozo
Aakkosmateriaali
Aakkosmateriaali
innapyykkonen
Bandas de rock
Bandas de rock
Nicolás Mejía
A professora
A professora
Fábio Fernandes
浅析浏览器解析和渲染
浅析浏览器解析和渲染
Ailsa126
网易相册前端页面开发规范2010版
网易相册前端页面开发规范2010版
昌里大金猪 Luke
Mobile UI design and Developer
Mobile UI design and Developer
jay li
Mais conteúdo relacionado
Destaque
Desarrollo del tema[1][1]
Desarrollo del tema[1][1]
alondraecca
Apresentação - Quixadá
Apresentação - Quixadá
programaucace
Ironbag channelguide
Ironbag channelguide
Myleejina
Pensamiento humano
Pensamiento humano
Euler Ruiz
Kinecting people
Kinecting people
Eugene Zharkov
Imagenes que nos cuidan
Imagenes que nos cuidan
agustina98
Artigo
Artigo
sergiorrm2
Redes sociales
Redes sociales
LADDYE
Trabajo jenny
Trabajo jenny
yennybeltran
Analize adina3ugust
Analize adina3ugust
andreidumitrascu
Project gradppt2
Project gradppt2
sreisanderson
Research2
Research2
Sani Satjachaliao
Eugenio olorvida graciana costelo
Eugenio olorvida graciana costelo
aileenO
Brchure ags
Brchure ags
IRIDODIAGNOSTICSYS
Res. 971 11
Res. 971 11
vaninalanati
Retoques fotográficos con photoshop
Retoques fotográficos con photoshop
ramiro1efrubenmozo
Aakkosmateriaali
Aakkosmateriaali
innapyykkonen
Bandas de rock
Bandas de rock
Nicolás Mejía
A professora
A professora
Fábio Fernandes
Destaque
(19)
Desarrollo del tema[1][1]
Desarrollo del tema[1][1]
Apresentação - Quixadá
Apresentação - Quixadá
Ironbag channelguide
Ironbag channelguide
Pensamiento humano
Pensamiento humano
Kinecting people
Kinecting people
Imagenes que nos cuidan
Imagenes que nos cuidan
Artigo
Artigo
Redes sociales
Redes sociales
Trabajo jenny
Trabajo jenny
Analize adina3ugust
Analize adina3ugust
Project gradppt2
Project gradppt2
Research2
Research2
Eugenio olorvida graciana costelo
Eugenio olorvida graciana costelo
Brchure ags
Brchure ags
Res. 971 11
Res. 971 11
Retoques fotográficos con photoshop
Retoques fotográficos con photoshop
Aakkosmateriaali
Aakkosmateriaali
Bandas de rock
Bandas de rock
A professora
A professora
Semelhante a 2011homepage
浅析浏览器解析和渲染
浅析浏览器解析和渲染
Ailsa126
网易相册前端页面开发规范2010版
网易相册前端页面开发规范2010版
昌里大金猪 Luke
Mobile UI design and Developer
Mobile UI design and Developer
jay li
编辑器设计Kissy editor
编辑器设计Kissy editor
taobao.com
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
ziggear
美团前端架构简介
美团前端架构简介
pan weizeng
编辑器设计2
编辑器设计2
yiming he
移动Web开发框架jqm探讨
移动Web开发框架jqm探讨
newker
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
Chieh Lin
无名小站首页改版 -渐进增强与css3
无名小站首页改版 -渐进增强与css3
taobao.com
⼤語⾔模型 LLM 應⽤開發入⾨
⼤語⾔模型 LLM 應⽤開發入⾨
Wen-Tien Chang
2011新版首页总结 技术篇
2011新版首页总结 技术篇
传贵 谢
[2008]网站重构 -who am i
[2008]网站重构 -who am i
Twinsen Liang
kissy@2013
kissy@2013
yiming he
無名小站首頁改版 - 漸進增強與CSS3 (Wretch and Progressive Enhancement)
無名小站首頁改版 - 漸進增強與CSS3 (Wretch and Progressive Enhancement)
Adam Wang
View 與 Blade 樣板引擎
View 與 Blade 樣板引擎
Shengyou Fan
咩星征服計劃 用 Js 征服地球 Part II
咩星征服計劃 用 Js 征服地球 Part II
羊 小咩 (lamb-mei)
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京
Joseph Chiang
Web Development Roadmap
Web Development Roadmap
Alexander Shieh
高效率的、可维护的Css
高效率的、可维护的Css
simaopig
Semelhante a 2011homepage
(20)
浅析浏览器解析和渲染
浅析浏览器解析和渲染
网易相册前端页面开发规范2010版
网易相册前端页面开发规范2010版
Mobile UI design and Developer
Mobile UI design and Developer
编辑器设计Kissy editor
编辑器设计Kissy editor
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
美团前端架构简介
美团前端架构简介
编辑器设计2
编辑器设计2
移动Web开发框架jqm探讨
移动Web开发框架jqm探讨
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
无名小站首页改版 -渐进增强与css3
无名小站首页改版 -渐进增强与css3
⼤語⾔模型 LLM 應⽤開發入⾨
⼤語⾔模型 LLM 應⽤開發入⾨
2011新版首页总结 技术篇
2011新版首页总结 技术篇
[2008]网站重构 -who am i
[2008]网站重构 -who am i
kissy@2013
kissy@2013
無名小站首頁改版 - 漸進增強與CSS3 (Wretch and Progressive Enhancement)
無名小站首頁改版 - 漸進增強與CSS3 (Wretch and Progressive Enhancement)
View 與 Blade 樣板引擎
View 與 Blade 樣板引擎
咩星征服計劃 用 Js 征服地球 Part II
咩星征服計劃 用 Js 征服地球 Part II
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京
Web Development Roadmap
Web Development Roadmap
高效率的、可维护的Css
高效率的、可维护的Css
Mais de fangdeng
jQuery底层架构
jQuery底层架构
fangdeng
Building an event driven web
Building an event driven web
fangdeng
浅尝jQuery
浅尝jQuery
fangdeng
Html基础培训
Html基础培训
fangdeng
前端开发之Js
前端开发之Js
fangdeng
Javascript代码注释及文档生成
Javascript代码注释及文档生成
fangdeng
J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架
fangdeng
前端单元测试初体验
前端单元测试初体验
fangdeng
Java script测试之js unit ut
Java script测试之js unit ut
fangdeng
2011年方凳年度总结及颁奖
2011年方凳年度总结及颁奖
fangdeng
产品线中的思考
产品线中的思考
fangdeng
产品线中的思考
产品线中的思考
fangdeng
Postoffer前端架构设计
Postoffer前端架构设计
fangdeng
Varnish简介
Varnish简介
fangdeng
Websocket
Websocket
fangdeng
Let's talk about date in javascript
Let's talk about date in javascript
fangdeng
Test driven-frontend-develop
Test driven-frontend-develop
fangdeng
方凳良品1期
方凳良品1期
fangdeng
方凳良品2期
方凳良品2期
fangdeng
魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式
fangdeng
Mais de fangdeng
(20)
jQuery底层架构
jQuery底层架构
Building an event driven web
Building an event driven web
浅尝jQuery
浅尝jQuery
Html基础培训
Html基础培训
前端开发之Js
前端开发之Js
Javascript代码注释及文档生成
Javascript代码注释及文档生成
J engine -构建高性能、可监控的前端应用框架
J engine -构建高性能、可监控的前端应用框架
前端单元测试初体验
前端单元测试初体验
Java script测试之js unit ut
Java script测试之js unit ut
2011年方凳年度总结及颁奖
2011年方凳年度总结及颁奖
产品线中的思考
产品线中的思考
产品线中的思考
产品线中的思考
Postoffer前端架构设计
Postoffer前端架构设计
Varnish简介
Varnish简介
Websocket
Websocket
Let's talk about date in javascript
Let's talk about date in javascript
Test driven-frontend-develop
Test driven-frontend-develop
方凳良品1期
方凳良品1期
方凳良品2期
方凳良品2期
魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式
2011homepage
1.
2011中文站首页改版
冯汉军、刘严隆 11年8月19日星期五
2.
分享的目的
• 了解中文站首页的前端开发流程和规范 • 积累的经验得以传承 11年8月19日星期五
3.
11版首页-⼀一屏
10版首页-⼀一屏 11年8月19日星期五
4.
• html-html5(标签)
• css-css3 • js-fdev4 • 模块化管理总结 • 新版首页相对上⼀一版的改进点 • 性能数据 11年8月19日星期五
5.
html
• html4 -> html5 • ie9以下的处理 • noscript • “第⼀一次” 11年8月19日星期五
6.
简洁的doctype
头部加载部分js noscript 新的标签 11年8月19日星期五
7.
简洁的doctype
头部加载部分js noscript 新的标签 11年8月19日星期五
8.
< ie9
• html5shiv; • document.createElement(”article”); • 线上的处理是所有ie载入html5shiv; 11年8月19日星期五
9.
< ie9
• html5shiv; • document.createElement(”article”); • 线上的处理是所有ie载入html5shiv; looks great, but... 11年8月19日星期五
10.
为什么不用<figure>、<figcaption>? 11年8月19日星期五
11.
为什么不用<figure>、<figcaption>? 11年8月19日星期五
12.
为什么不用<figure>、<figcaption>? 11年8月19日星期五
13.
innerHTML
append ... 为什么不用<figure>、<figcaption>? 11年8月19日星期五
14.
solution
• innerShiv rel: http://code.google.com/p/html5shiv/ http://jdbartlett.com/innershiv/ 11年8月19日星期五
15.
结构的定义
•模块命名以 “mod-” 开头; •元件 “cell-”为统⼀一定义,自己不得添加; •每个模块必须有class为“content”的section,header则非必须; •内容结构复杂的,适当使用“region-”和“obj-”; •id以“hp-”开头(页面风格的统⼀一); rel: http://op.fangdeng.org/pitaya/ http://op.fangdeng.org/pages/html5.tag.usage.html 11年8月19日星期五
16.
文档流的变化
以往的定义: • 描述大纲的唯⼀一方式是<h1>~<h6> • 添加⼀一个副标题会破坏原先的文档流 http://gsnedders.html5.org/outliner/process.py?url=http%3A%2F%2Fchina.alibaba.com 11年8月19日星期五
17.
文档流的变化-续
html5的定义: • <h1>~<h6>方式同以往,h1不唯⼀一,下面第二点的元素内都可各自包含h1; • 有些标签也具有了定义大纲的功能,大致分为三类: 1. 无意义:类似<div>,<ul>等元素; 2. 产生新的节:类似<article>,<section>,<nav>,<aside>等; 3. 成节的根:某些元素(<blockquote>、<body>、<details>、<fieldset>、 <figure>、<td>)叫做成节的根,并且它们可以拥有自己的大纲。但是,这些元素 中的节和标题对于它们的祖先的大纲没有任何影响。 http://gsnedders.html5.org/outliner/process.py?url=http%3A%2F%2Fpage.china.alibaba.com%2Findex_new.html rel:http://www.osmn00.com/rebuild/223.html 11年8月19日星期五
18.
⼀一些小点
• 预加载背景图; • logo改成<img>; • <a tabindex="0" target="_self" href="#content" id="skip-to-content">跳到内容区</a>; • ie9 pintab • ARIA attributes: <input id="alisearch-input" name="keywords" placeholder="输入产品名称" autocomplete="off" accesskey="s" class="ui-autocomplete-input" role="textbox" aria-autocomplete="list" aria- haspopup="true"> 11年8月19日星期五
19.
结构是否已完美?no! 11年8月19日星期五
20.
结构是否已完美?no! 11年8月19日星期五
21.
结构是否已完美?no! 11年8月19日星期五
22.
css
• 文件按mod分,⼀一个mod⼀一个单独的css; • 基于fdev4-float,pitaya4; • 禁止使用无意义的标签实现样式上的展 示; rel: http://op.fangdeng.org/pitaya/ 11年8月19日星期五
23.
样式书写规则
1、显示与定位 display position float list-style 2、元素自身 width height margin padding border background 3、文本外观 color font line-height text-align text-decoration other 11年8月19日星期五
24.
css3
• 部分圆角,hover效果使用简单的动画; • 90%+的用户看不到 :( 只能小规模尝试; • rel: http://fd.aliued.cn/fdevlib/#home css3部分 MSIE6 45.81% MSIE6 MSIE8 MSIE7 Sougou MSIE9 Tt MSIE8 Chrome Firefox Theworld 37.19% Maxthon Se360 Other Safari Opera 0.07% 0.09% 0.18% 0.82% 0.83% 0.93% 0.94% 1.14% MSIE7 1.42% Sougou 2.86% 3.79% 3.93% 11年8月19日星期五
25.
js
• 文件按mod分,⼀一个mod⼀一个单独的js; • 基于fdev4,HexJS; • 懒加载; • 大前提,首页是静态的; 11年8月19日星期五
26.
HexJS
• 不是库 • 实现模块定义和管理 • 使用有两种方式: 1. hexjs.register(“module-xx”); // domready 后执行 2. hexjs.register(“~module-xx”); // 马上执行 rel: http://hexjs.edgarhoo.org/ 11年8月19日星期五
27.
头部加载库文件
• <script src="http://style.china.alibaba.com/js/app/operation/homepage/global/merge-110726.js"></script> 35.7K 11年8月19日星期五
28.
头部加载库文件
• <script src="http://style.china.alibaba.com/js/app/operation/homepage/global/merge-110726.js"></script> 35.7K 目的? 11年8月19日星期五
29.
头部加载库文件
• <script src="http://style.china.alibaba.com/js/app/operation/homepage/global/merge-110726.js"></script> 35.7K 目的? 11年8月19日星期五
30.
头部加载库文件
• <script src="http://style.china.alibaba.com/js/app/operation/homepage/global/merge-110726.js"></script> 35.7K 目的? 11年8月19日星期五
31.
头部加载库文件
• <script src="http://style.china.alibaba.com/js/app/operation/homepage/global/merge-110726.js"></script> 35.7K 目的? <script>FE.operation.pitaya.register( '~alibar-account' );</script> <script>FE.operation.pitaya.register( '~hp-sign' );</script> 11年8月19日星期五
32.
头部加载库文件
• <script src="http://style.china.alibaba.com/js/app/operation/homepage/global/merge-110726.js"></script> 35.7K 目的? <script>FE.operation.pitaya.register( '~alibar-account' );</script> <script>FE.operation.pitaya.register( '~hp-sign' );</script> 性能 or 体验? 11年8月19日星期五
33.
模块化管理总结 11年8月19日星期五
34.
模块化管理总结
• 什么是模块化? 11年8月19日星期五
35.
模块化管理总结
• 什么是模块化? 1. 可组合、可分解 11年8月19日星期五
36.
模块化管理总结
• 什么是模块化? 1. 可组合、可分解 2. 易更换 11年8月19日星期五
37.
模块化管理总结-html
• 统⼀一的mod框架; • 统⼀一的命名格式; • cms中模块切割(也是便于运营维护的方式); 11年8月19日星期五
38.
模块化管理总结-css
• common,grid使用库文件,不再单独创建; • 基于独立的reset和pitaya4; • 其他公用样式基于base.css; • 以模块为单位建立独立的css; • 样式书写风格统⼀一; • 样式中如无特殊情况,以”.mod-xxx {}”开头; • 背景图基于各自的css,不做统⼀一管理; • 背景图分预加载(preLoad.png)和普通背景(bg.png); 11年8月19日星期五
39.
模块化管理总结-js
• 基于fdev4,HexJS; • 以模块为单位建立独立的js; • merge文件分头尾两个; • 模块的js统⼀一的书写风格,并按功能点define和register; • 统⼀一的命名空间; 11年8月19日星期五
40.
新版首页的改进点
• html5标签 • 焦点图懒加载 • 结构风格统⼀一 • 更加合理的滚动加载 • 以mod为单位 • 预加载js库 • 更加合理的logo • css3 • 模块化的html,css,js管理 • 无障碍的尝试 • 预加载背景图 • noscript • 更加合理的背景图sprites • ...... 11年8月19日星期五
41.
我们还需努力的...
• 微数据-microdata • 全方位的数据监控 • 更加友好的noscript • 其他平台的扩展 • localStorage • ...... • application cache • 更多合理的标签使用 • 更多合理的css3效果 • 多版本的管理 11年8月19日星期五
42.
性能数据
• 基调网络 • 哈勃 • KeepFast 各平台本身、网络差异,数据仅作对比和参考。 11年8月19日星期五
43.
基调网络
两个时间点:8月11日、8月17日,其中的变化,新版首页增加了10个请求。 8月11日 8月17日 11年8月19日星期五
44.
KeepFast
Request Time Bytes s 11号 4.814s 43 370KB 17号 6.470s 53 361KB 11年8月19日星期五
45.
请求数对性能有着实质的影响 11年8月19日星期五
46.
请求数对性能有着实质的影响
High Performance Web Sites Rule 1: Make Fewer HTTP Requests 11年8月19日星期五
47.
•
优化是持续的,不要等到用户抱怨才优化; • ⼀一屏以下图片尽量懒加载; • 首屏图片大小严格规定; 11年8月19日星期五
48.
One More Thing
• 首页目前的环境是static; • static的优点,快速响应; • Try your ideas; 11年8月19日星期五
49.
感谢
冯汉军、洪珊珊、谢传贵、由雪伟、俞雨 11年8月19日星期五
50.
Thank you for
your time. 11年8月19日星期五
Baixar agora