Submit Search
Upload
郑焕义 重温网站重构
•
6 likes
•
736 views
W
Webrebuild
Follow
WebRebuild年会深圳站分享主题,《重温网站重构》 - 郑焕义/AvenirZheng
Read less
Read more
Technology
Report
Share
Report
Share
1 of 78
Download now
Download to read offline
Recommended
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
Recommended
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
彪叔 [2010]webrebuild
彪叔 [2010]webrebuild
Webrebuild
谭正谊-QQ邮箱HTML5移动应用
谭正谊-QQ邮箱HTML5移动应用
Webrebuild
飘飘 年会主持
飘飘 年会主持
Webrebuild
唐俊开-Html5 mobile web app浅谈
唐俊开-Html5 mobile web app浅谈
Webrebuild
年会主持 By pufen
年会主持 By pufen
Webrebuild
重构的价值转化 By impact
重构的价值转化 By impact
Webrebuild
陈军 Scrum敏捷项目管理-重构年会
陈军 Scrum敏捷项目管理-重构年会
Webrebuild
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月小聚
Asika Simon
Joomla! 網站規劃 簡報 - I love joomla! 5月小聚
Joomla! 網站規劃 簡報 - I love joomla! 5月小聚
ilovejoomla
李成银:前端编译平台
李成银:前端编译平台
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
More Related Content
Viewers also liked
彪叔 [2010]webrebuild
彪叔 [2010]webrebuild
Webrebuild
谭正谊-QQ邮箱HTML5移动应用
谭正谊-QQ邮箱HTML5移动应用
Webrebuild
飘飘 年会主持
飘飘 年会主持
Webrebuild
唐俊开-Html5 mobile web app浅谈
唐俊开-Html5 mobile web app浅谈
Webrebuild
年会主持 By pufen
年会主持 By pufen
Webrebuild
重构的价值转化 By impact
重构的价值转化 By impact
Webrebuild
陈军 Scrum敏捷项目管理-重构年会
陈军 Scrum敏捷项目管理-重构年会
Webrebuild
Viewers also liked
(7)
彪叔 [2010]webrebuild
彪叔 [2010]webrebuild
谭正谊-QQ邮箱HTML5移动应用
谭正谊-QQ邮箱HTML5移动应用
飘飘 年会主持
飘飘 年会主持
唐俊开-Html5 mobile web app浅谈
唐俊开-Html5 mobile web app浅谈
年会主持 By pufen
年会主持 By pufen
重构的价值转化 By impact
重构的价值转化 By impact
陈军 Scrum敏捷项目管理-重构年会
陈军 Scrum敏捷项目管理-重构年会
Similar to 郑焕义 重温网站重构
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月小聚
Asika Simon
Joomla! 網站規劃 簡報 - I love joomla! 5月小聚
Joomla! 網站規劃 簡報 - I love joomla! 5月小聚
ilovejoomla
李成银:前端编译平台
李成银:前端编译平台
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
Similar to 郑焕义 重温网站重构
(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
寫出高性能的服務與應用 那些你沒想過的事
寫出高性能的服務與應用 那些你沒想過的事
More from Webrebuild
重构 这一路走来
重构 这一路走来
Webrebuild
构建可扩展的静态资源管理系统
构建可扩展的静态资源管理系统
Webrebuild
Script with engine
Script with engine
Webrebuild
Css3之颜色与半透明
Css3之颜色与半透明
Webrebuild
移动网站的兼容性探索
移动网站的兼容性探索
Webrebuild
孙极-Hello, JSS! - 一种新样式语言的诞生
孙极-Hello, JSS! - 一种新样式语言的诞生
Webrebuild
陈子舜-Html5 based web app
陈子舜-Html5 based web app
Webrebuild
微观重构 黄婉芳
微观重构 黄婉芳
Webrebuild
年会主持 By pufen
年会主持 By pufen
Webrebuild
Css schema by_sofish
Css schema by_sofish
Webrebuild
七年之痒Webrebuild by emu
七年之痒Webrebuild by emu
Webrebuild
Qmail rebuild_by_nico
Qmail rebuild_by_nico
Webrebuild
潘杰茂_网络图像优化
潘杰茂_网络图像优化
Webrebuild
张思坚 浏览器兼容性
张思坚 浏览器兼容性
Webrebuild
石玉磊 Web rebuild
石玉磊 Web rebuild
Webrebuild
迅雷邹惠斌(Impact) 移动设备web重构
迅雷邹惠斌(Impact) 移动设备web重构
Webrebuild
More from Webrebuild
(16)
重构 这一路走来
重构 这一路走来
构建可扩展的静态资源管理系统
构建可扩展的静态资源管理系统
Script with engine
Script with engine
Css3之颜色与半透明
Css3之颜色与半透明
移动网站的兼容性探索
移动网站的兼容性探索
孙极-Hello, JSS! - 一种新样式语言的诞生
孙极-Hello, JSS! - 一种新样式语言的诞生
陈子舜-Html5 based web app
陈子舜-Html5 based web app
微观重构 黄婉芳
微观重构 黄婉芳
年会主持 By pufen
年会主持 By pufen
Css schema by_sofish
Css schema by_sofish
七年之痒Webrebuild by emu
七年之痒Webrebuild by emu
Qmail rebuild_by_nico
Qmail rebuild_by_nico
潘杰茂_网络图像优化
潘杰茂_网络图像优化
张思坚 浏览器兼容性
张思坚 浏览器兼容性
石玉磊 Web rebuild
石玉磊 Web rebuild
迅雷邹惠斌(Impact) 移动设备web重构
迅雷邹惠斌(Impact) 移动设备web重构
郑焕义 重温网站重构
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.
谢谢! 在这个领域,争论从未停止过
- 《网站重构》
Download now