Soumettre la recherche
Mettre en ligne
Reviews of Designing with Web Standards
•
4 j'aime
•
722 vues
A
avenirzheng
Suivre
WebRebuild年会深圳站分享主题,《重温网站重构》 - 郑焕义/AvenirZheng http://avenirzheng.net
Lire moins
Lire la suite
Technologie
Signaler
Partager
Signaler
Partager
1 sur 78
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
Alice库构建
Alice库构建
Sofish Lin
現代化網頁基礎排版技術
現代化網頁基礎排版技術
洧杰 廖
KISSY 1.4.0 released
KISSY 1.4.0 released
yiming he
Vertical rhythm
Vertical rhythm
洧杰 廖
支付宝CSS构架
支付宝CSS构架
Sofish Lin
再回首重构 仲金龙(麦时) 20120426
再回首重构 仲金龙(麦时) 20120426
time zhong
Tobecontinue
Tobecontinue
yongwumai
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考
greengnn
Recommandé
Alice库构建
Alice库构建
Sofish Lin
現代化網頁基礎排版技術
現代化網頁基礎排版技術
洧杰 廖
KISSY 1.4.0 released
KISSY 1.4.0 released
yiming he
Vertical rhythm
Vertical rhythm
洧杰 廖
支付宝CSS构架
支付宝CSS构架
Sofish Lin
再回首重构 仲金龙(麦时) 20120426
再回首重构 仲金龙(麦时) 20120426
time zhong
Tobecontinue
Tobecontinue
yongwumai
Qq.com前端架构实践与思考
Qq.com前端架构实践与思考
greengnn
Patho-Lab 15th Sept--Irreversible injury
Patho-Lab 15th Sept--Irreversible injury
MD Specialclass
8 bromo-7-methoxycrysin-induce apoptosis of hepatocellular carninoma celss in...
8 bromo-7-methoxycrysin-induce apoptosis of hepatocellular carninoma celss in...
sebastian Rivera
Cancer Biology
Cancer Biology
Frank Bonilla
SERUM TUMOR MARKERS
SERUM TUMOR MARKERS
Pankaj Gupta
Chapt14 blood
Chapt14 blood
bholmes
Cancer Biology
Cancer Biology
Phil Mayor
Biology Investigatory Project-Class XII-Breast Cancer
Biology Investigatory Project-Class XII-Breast Cancer
lallu4
Fluids & Electrolytes Imbalances - BMH/Tele
Fluids & Electrolytes Imbalances - BMH/Tele
TeleClinEd
Newer Tumour Markers
Newer Tumour Markers
Bina Gadhiya
Drupal Camp Taipei Keynote
Drupal Camp Taipei Keynote
John Albin Wilkins
[DCTPE2011] 3) 主題演講:用Drupal 打造更美好的網際網路
[DCTPE2011] 3) 主題演講:用Drupal 打造更美好的網際網路
Drupal Taiwan
张勇 搜搜前端架构
张勇 搜搜前端架构
isnull
Joomla! 網站規劃 簡報 - I love joomla! 5月小聚
Joomla! 網站規劃 簡報 - I love joomla! 5月小聚
ilovejoomla
Joomla! 網站規劃 簡報-i love joomla! 5月小聚
Joomla! 網站規劃 簡報-i love joomla! 5月小聚
Asika Simon
李成银:前端编译平台
李成银:前端编译平台
taobao.com
前端编译平台
前端编译平台
Welefen Lee
出了问题不要靠猜
出了问题不要靠猜
LI Daobing
百度前端技术交流会--搜搜前端架构演变与优化
百度前端技术交流会--搜搜前端架构演变与优化
tiantianli
[Baidu web frontend_conference_2010]_[soso_frontend_architecture]
[Baidu web frontend_conference_2010]_[soso_frontend_architecture]
思念 青青
網路服務就是一連串搜尋的集合體
網路服務就是一連串搜尋的集合體
Mu Chun Wang
前端性能优化&测试
前端性能优化&测试
tbmallf2e
2011新版首页总结 技术篇
2011新版首页总结 技术篇
传贵 谢
Contenu connexe
En vedette
Patho-Lab 15th Sept--Irreversible injury
Patho-Lab 15th Sept--Irreversible injury
MD Specialclass
8 bromo-7-methoxycrysin-induce apoptosis of hepatocellular carninoma celss in...
8 bromo-7-methoxycrysin-induce apoptosis of hepatocellular carninoma celss in...
sebastian Rivera
Cancer Biology
Cancer Biology
Frank Bonilla
SERUM TUMOR MARKERS
SERUM TUMOR MARKERS
Pankaj Gupta
Chapt14 blood
Chapt14 blood
bholmes
Cancer Biology
Cancer Biology
Phil Mayor
Biology Investigatory Project-Class XII-Breast Cancer
Biology Investigatory Project-Class XII-Breast Cancer
lallu4
Fluids & Electrolytes Imbalances - BMH/Tele
Fluids & Electrolytes Imbalances - BMH/Tele
TeleClinEd
Newer Tumour Markers
Newer Tumour Markers
Bina Gadhiya
En vedette
(9)
Patho-Lab 15th Sept--Irreversible injury
Patho-Lab 15th Sept--Irreversible injury
8 bromo-7-methoxycrysin-induce apoptosis of hepatocellular carninoma celss in...
8 bromo-7-methoxycrysin-induce apoptosis of hepatocellular carninoma celss in...
Cancer Biology
Cancer Biology
SERUM TUMOR MARKERS
SERUM TUMOR MARKERS
Chapt14 blood
Chapt14 blood
Cancer Biology
Cancer Biology
Biology Investigatory Project-Class XII-Breast Cancer
Biology Investigatory Project-Class XII-Breast Cancer
Fluids & Electrolytes Imbalances - BMH/Tele
Fluids & Electrolytes Imbalances - BMH/Tele
Newer Tumour Markers
Newer Tumour Markers
Similaire à Reviews of Designing with Web Standards
Drupal Camp Taipei Keynote
Drupal Camp Taipei Keynote
John Albin Wilkins
[DCTPE2011] 3) 主題演講:用Drupal 打造更美好的網際網路
[DCTPE2011] 3) 主題演講:用Drupal 打造更美好的網際網路
Drupal Taiwan
张勇 搜搜前端架构
张勇 搜搜前端架构
isnull
Joomla! 網站規劃 簡報 - I love joomla! 5月小聚
Joomla! 網站規劃 簡報 - I love joomla! 5月小聚
ilovejoomla
Joomla! 網站規劃 簡報-i love joomla! 5月小聚
Joomla! 網站規劃 簡報-i love joomla! 5月小聚
Asika Simon
李成银:前端编译平台
李成银:前端编译平台
taobao.com
前端编译平台
前端编译平台
Welefen Lee
出了问题不要靠猜
出了问题不要靠猜
LI Daobing
百度前端技术交流会--搜搜前端架构演变与优化
百度前端技术交流会--搜搜前端架构演变与优化
tiantianli
[Baidu web frontend_conference_2010]_[soso_frontend_architecture]
[Baidu web frontend_conference_2010]_[soso_frontend_architecture]
思念 青青
網路服務就是一連串搜尋的集合體
網路服務就是一連串搜尋的集合體
Mu Chun Wang
前端性能优化&测试
前端性能优化&测试
tbmallf2e
2011新版首页总结 技术篇
2011新版首页总结 技术篇
传贵 谢
HPX台南讀書會-Axure RP基礎課程
HPX台南讀書會-Axure RP基礎課程
Souyi Yang
vmarket in action
vmarket in action
Appleseedez Zeng
美团前端架构简介
美团前端架构简介
pan weizeng
瀏覽器與網頁原理 Principles of Browsers and Webpages
瀏覽器與網頁原理 Principles of Browsers and Webpages
安齊 劉
Simple Rule Agile China 2009
Simple Rule Agile China 2009
JohnnLi
20120516 axure rp prototype design outline
20120516 axure rp prototype design outline
turtleknight
寫出高性能的服務與應用 那些你沒想過的事
寫出高性能的服務與應用 那些你沒想過的事
Chieh (Jack) Yu
Similaire à Reviews of Designing with Web Standards
(20)
Drupal Camp Taipei Keynote
Drupal Camp Taipei Keynote
[DCTPE2011] 3) 主題演講:用Drupal 打造更美好的網際網路
[DCTPE2011] 3) 主題演講:用Drupal 打造更美好的網際網路
张勇 搜搜前端架构
张勇 搜搜前端架构
Joomla! 網站規劃 簡報 - I love joomla! 5月小聚
Joomla! 網站規劃 簡報 - I love joomla! 5月小聚
Joomla! 網站規劃 簡報-i love joomla! 5月小聚
Joomla! 網站規劃 簡報-i love joomla! 5月小聚
李成银:前端编译平台
李成银:前端编译平台
前端编译平台
前端编译平台
出了问题不要靠猜
出了问题不要靠猜
百度前端技术交流会--搜搜前端架构演变与优化
百度前端技术交流会--搜搜前端架构演变与优化
[Baidu web frontend_conference_2010]_[soso_frontend_architecture]
[Baidu web frontend_conference_2010]_[soso_frontend_architecture]
網路服務就是一連串搜尋的集合體
網路服務就是一連串搜尋的集合體
前端性能优化&测试
前端性能优化&测试
2011新版首页总结 技术篇
2011新版首页总结 技术篇
HPX台南讀書會-Axure RP基礎課程
HPX台南讀書會-Axure RP基礎課程
vmarket in action
vmarket in action
美团前端架构简介
美团前端架构简介
瀏覽器與網頁原理 Principles of Browsers and Webpages
瀏覽器與網頁原理 Principles of Browsers and Webpages
Simple Rule Agile China 2009
Simple Rule Agile China 2009
20120516 axure rp prototype design outline
20120516 axure rp prototype design outline
寫出高性能的服務與應用 那些你沒想過的事
寫出高性能的服務與應用 那些你沒想過的事
Reviews of Designing with Web Standards
1.
Reviews of Designing
with Web Standards @AvenirZheng http://avenirzheng.net
2.
• 为了让网站能“活”得更久 • 为了提高网站的可访问性 •
为了降低成本 • 让用户更爽! • 让老板更爽! • 让自己更爽!
3.
二)让老板更爽! 三)让自己更爽!
4.
• 用户体验
- 速度 除了少数有毅力和耐心的客户能够等到所有的页面打开,大多数人 早已因 厌倦而离开 - 《网站重构》 P4 • 可访问性 - 语义基础 - 平凡的用户
5.
• 主要内容先呈现 • REFLOW
6.
• 主要内容先呈现 • REFLOW
制作一个页面,首先要一个top,下面是一个bottom,中间是一 个三列块的模式,left,main,right。特殊要求是这个页是一个 门户网站的基本框架,访问量大于100W每日。因成本限制,网 络带宽可能满足不了此访问量,会出现滞连情况。
7.
• 主要内容先呈现 • REFLOW
8.
• 主要内容先呈现 • REFLOW
① CSS选择符 - 具体 - 从右到左 - 避免复杂
9.
• 主要内容先呈现 • REFLOW
① CSS选择符 - 具体 - 从右到左 - 避免复杂 .class0177 div div #id0177 a #id0177 * 谁更高效一些? http://stevesouders.com/efws/css-selectors/
10.
• 主要内容先呈现 • REFLOW
① CSS选择符 - 具体 - 从右到左 - 避免复杂 .class0177 div div #id0177 a #id0177 * 谁更高效一些? http://stevesouders.com/efws/css-selectors/
11.
• 主要内容先呈现 • REFLOW
① CSS选择符 - 具体 - 从右到左 - 避免复杂 .class0177 div div #id0177 a #id0177 * 谁更高效一些? http://stevesouders.com/efws/css-selectors/
12.
• 主要内容先呈现 • REFLOW
① CSS选择符 - 具体 - 从右到左 - 避免复杂 .class0177 div div #id0177 a #id0177 * 谁更高效一些? http://stevesouders.com/efws/css-selectors/
13.
• 主要内容先呈现 • REFLOW
14.
• 主要内容先呈现 • REFLOW
② 精简DOM - 避免复杂嵌套 ③ position为absolute戒fixed Reflow Timer
15.
• 主要内容先呈现 • REFLOW
② 精简DOM - 避免复杂嵌套 ③ position为absolute戒fixed Reflow Timer
16.
• 主要内容先呈现 • REFLOW
② 精简DOM - 避免复杂嵌套 ③ position为absolute戒fixed
17.
• 用户体验
- 速度 • 可访问性 - 语义基础 Classitis和divitis就像小说中不必要的修饰词语,以及花园中的杂草 - 《网站重构》P149 - 平凡的用户
18.
• Div+CSS • ALT
OR TITLE
19.
• Div+CSS • ALT
OR TITLE
20.
• Div+CSS • ALT
OR TITLE
21.
• DIV+CSS • ALT
or TITLE
22.
• DIV+CSS • ALT
or TITLE 帮忙加个图片提示吧
23.
• 用户体验
- 速度 • 可访问性 - 语义基础 - 平凡的用户 给每个人提供相等的可访问性 - 《网站重构》P276
24.
• 我不喜欢用鼠标 • 手机流量费用太高了 •
听不见的世界
25.
• 我不喜欢用鼠标 • 手机流量费用太高了 •
听不见的世界
26.
• 我不喜欢用鼠标 • 手机流量费用太高了 •
听不见的世界
27.
• 我不喜欢用鼠标 • 手机流量费用太高了 •
听不见的世界
28.
• 我不喜欢用鼠标 • 手机流量费用太高了 •
听不见的世界 导航什么的都不见了
29.
• 我不喜欢用鼠标 • 手机流量费用太高了 •
听不见的世界
30.
• 我不喜欢用鼠标 • 手机流量费用太高了 •
听不见的世界
31.
• 我不喜欢用鼠标 • 手机流量费用太高了 •
听不见的世界
32.
33.
还记得刚才的alt or title吗?
34.
35.
① 快! ② 人人生而平等
36.
一)让用户更爽! 三)让自己更爽!
37.
• 效率
- 自动化 所有的繁重工作都由计算机来完成 - 《网站重构》 P156 - 模板 • 成本 - 分离 - 优化
38.
• PHOTOSHOP动作 • 批量替代 •
自动完成 • ZEN-CODING
39.
• PHOTOSHOP动作 • 批量替代 •
自动完成 • ZEN-CODING
40.
• PHOTOSHOP动作 • 批量替代 •
自动完成 • ZEN-CODING
41.
• PHOTOSHOP动作 • 批量替代 •
自动完成 • ZEN-CODING
42.
• PHOTOSHOP动作 • 批量替代 •
自动完成 • ZEN-CODING
43.
• PHOTOSHOP动作 • 批量替代 •
自动完成 • ZEN-CODING
44.
• PHOTOSHOP动作 • 批量替代 •
自动完成 • ZEN-CODING
45.
• PHOTOSHOP动作 • 批量替代 •
自动完成 • ZEN-CODING
46.
• PHOTOSHOP动作 • 批量替代 •
自动完成 • ZEN-CODING http://www.qianduan.net/zen-coding-a-new-way-to-write-html- code.html
47.
• Fiddler &
Willow - 文件夹映射 - HOST环境切换 • CSSGAGA [ HTTP://WWW.99CSS.COM/ ] - 自动压缩 - 生成DATA URI - 合并CSS文件
48.
• FIDDLER &
WILLOW - 文件夹映射 - HOST环境切换 • CssGaga [ http://www.99css.com/ ] - 自动压缩 - 生成data URI - 合并CSS文件
49.
• FIDDLER &
WILLOW - 文件夹映射 - HOST环境切换 • CssGaga [ http://www.99css.com/ ] - 自动压缩 - 生成data URI - 合并CSS文件
50.
• 效率
- 自动化 - 模板 • 成本 - 分离 - 优化
51.
• 对于周期较短的运营活动项目 • 内容结构趋同的专题
52.
• 对于周期较短的运营活动项目 • 内容结构趋同的专题
53.
• 对于周期较短的运营活动项目 • 内容结构趋同的专题
54.
• 效率
- 自动化 - 模板 • 成本 - 分离 文档一次建立,随处可用 - 《网站重构》 P42 - 优化
55.
• 多终端 • 流量 •
维护
56.
• 多终端 • 流量 •
维护
57.
• 多终端 • 流量 •
维护
58.
• 效率
- 自动化 - 模板 • 成本 - 分离 - 优化 节省每一兆字节的流量 - 《网站重构》 P18
59.
• 图片优化 • 压缩代码 •
不停地优化
60.
• 图片优化
① 图片压缩 ② 格式转换 • 压缩代码 ③ 其他 • 不停地优化
61.
• 图片优化 • 压缩代码 •
不停地优化
62.
• PngQuant
- PNG32转PNG8-Alpha • Smush It [http://www.smushit.com] - 在线 - 支持各种图片格式 • PngOptimizer - 无损压缩
63.
• PngQuant
- PNG32转PNG8-Alpha • Smush It [http://www.smushit.com] - 在线 - 支持各种图片格式 • PngOptimizer - 无损压缩
64.
• PngQuant
- PNG32转PNG8-Alpha • Smush It [http://www.smushit.com] - 在线 - 支持各种图片格式 • PngOptimizer - 无损压缩
65.
• PNGQUANT
- PNG32转PNG8-ALPHA • Smush It [http://www.smushit.com] - 在线 - 支持各种图片格式 • PNGOPTIMIZER - 无损压缩
66.
• PngQuant
- PNG32转PNG8-Alpha • Smush It [http://www.smushit.com] - 在线 - 支持各种图片格式 • PngOptimizer - 无损压缩
67.
• PngQuant
- PNG32转PNG8-Alpha • Smush It [http://www.smushit.com] - 在线 - 支持各种图片格式 • PngOptimizer - 无损压缩
68.
• 图片优化 • 压缩代码 •
不停地优化
69.
• 图片优化 • 压缩代码 •
不停地优化
70.
• 图片优化 • 压缩代码 •
不停地优化
71.
• 图片优化 • 压缩代码 •
不停地优化 其他建议?
72.
• 图片优化 • 压缩代码 •
不停地优化 其他建议?
73.
74.
① 提高产能 ② 节约成本
75.
一)让用户更爽! 二)让老板更爽!
76.
77.
① 《网站重构》描绘了未来 ② 有些东西被忽略和被误解 ③
网站重构需要实现价值
78.
谢谢! 在这个领域,争论从未停止过
- 《网站重构》
Télécharger maintenant