reviews of designing with web standards
DESCRIPTION
WebRebuild年会深圳站分享主题,《重温网站重构》 - 郑焕义/AvenirZheng http://avenirzheng.netTRANSCRIPT
![Page 1: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/1.jpg)
Reviews of Designing with Web Standards
@AvenirZhenghttp://avenirzheng.net
![Page 2: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/2.jpg)
• 为了让网站能“活”得更久• 为了提高网站的可访问性• 为了降低成本
• 让用户更爽!
• 让老板更爽!
• 让自己更爽!
![Page 3: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/3.jpg)
二)让老板更爽!三)让自己更爽!
![Page 4: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/4.jpg)
• 用户体验- 速度
除了少数有毅力和耐心的客户能够等到所有的页面打开,大多数人 早已因厌倦而离开 - 《网站重构》 P4
• 可访问性
- 语义基础
- 平凡的用户
![Page 5: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/5.jpg)
• 主要内容先呈现• REFLOW
![Page 6: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/6.jpg)
• 主要内容先呈现• REFLOW
制作一个页面,首先要一个top,下面是一个bottom,中间是一个三列块的模式,left,main,right。特殊要求是这个页是一个门户网站的基本框架,访问量大于100W每日。因成本限制,网络带宽可能满足不了此访问量,会出现滞连情况。
![Page 7: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/7.jpg)
• 主要内容先呈现
• REFLOW
![Page 8: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/8.jpg)
• 主要内容先呈现
• REFLOW ① CSS选择符- 具体- 从右到左- 避免复杂
![Page 9: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/9.jpg)
• 主要内容先呈现
• REFLOW ① CSS选择符- 具体- 从右到左- 避免复杂
.class0177div div #id0177 a#id0177 *
谁更高效一些?http://stevesouders.com/efws/css-selectors/
![Page 10: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/10.jpg)
• 主要内容先呈现
• REFLOW ① CSS选择符- 具体- 从右到左- 避免复杂
.class0177div div #id0177 a#id0177 *
谁更高效一些?http://stevesouders.com/efws/css-selectors/
![Page 11: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/11.jpg)
• 主要内容先呈现
• REFLOW ① CSS选择符- 具体- 从右到左- 避免复杂
.class0177div div #id0177 a#id0177 *
谁更高效一些?http://stevesouders.com/efws/css-selectors/
![Page 12: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/12.jpg)
• 主要内容先呈现
• REFLOW ① CSS选择符- 具体- 从右到左- 避免复杂
.class0177div div #id0177 a#id0177 *
谁更高效一些?http://stevesouders.com/efws/css-selectors/
![Page 13: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/13.jpg)
• 主要内容先呈现
• REFLOW
![Page 14: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/14.jpg)
• 主要内容先呈现
• REFLOW ② 精简DOM- 避免复杂嵌套
③ position为absolute戒fixed
Reflow Timer
![Page 15: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/15.jpg)
• 主要内容先呈现
• REFLOW ② 精简DOM- 避免复杂嵌套
③ position为absolute戒fixed
Reflow Timer
![Page 16: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/16.jpg)
• 主要内容先呈现
• REFLOW ② 精简DOM- 避免复杂嵌套
③ position为absolute戒fixed
![Page 17: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/17.jpg)
• 用户体验
- 速度
• 可访问性
- 语义基础Classitis和divitis就像小说中不必要的修饰词语,以及花园中的杂草 -
《网站重构》P149
- 平凡的用户
![Page 18: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/18.jpg)
• Div+CSS• ALT OR TITLE
![Page 19: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/19.jpg)
• Div+CSS• ALT OR TITLE
![Page 20: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/20.jpg)
• Div+CSS• ALT OR TITLE
![Page 21: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/21.jpg)
• DIV+CSS
• ALT or TITLE
![Page 22: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/22.jpg)
• DIV+CSS
• ALT or TITLE
帮忙加个图片提示吧
![Page 23: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/23.jpg)
• 用户体验
- 速度
• 可访问性
- 语义基础
- 平凡的用户给每个人提供相等的可访问性 - 《网站重构》P276
![Page 24: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/24.jpg)
• 我不喜欢用鼠标• 手机流量费用太高了
• 听不见的世界
![Page 25: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/25.jpg)
• 我不喜欢用鼠标• 手机流量费用太高了
• 听不见的世界
![Page 26: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/26.jpg)
• 我不喜欢用鼠标
• 手机流量费用太高了• 听不见的世界
![Page 27: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/27.jpg)
• 我不喜欢用鼠标
• 手机流量费用太高了• 听不见的世界
![Page 28: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/28.jpg)
• 我不喜欢用鼠标
• 手机流量费用太高了• 听不见的世界
导航什么的都不见了
![Page 29: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/29.jpg)
• 我不喜欢用鼠标
• 手机流量费用太高了• 听不见的世界
![Page 30: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/30.jpg)
• 我不喜欢用鼠标
• 手机流量费用太高了• 听不见的世界
![Page 31: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/31.jpg)
• 我不喜欢用鼠标
• 手机流量费用太高了
• 听不见的世界
![Page 32: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/32.jpg)
![Page 33: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/33.jpg)
还记得刚才的alt or title吗?
![Page 34: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/34.jpg)
![Page 35: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/35.jpg)
① 快!
② 人人生而平等
![Page 36: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/36.jpg)
一)让用户更爽!
三)让自己更爽!
![Page 37: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/37.jpg)
• 效率- 自动化
所有的繁重工作都由计算机来完成 - 《网站重构》 P156
- 模板
• 成本
- 分离
- 优化
![Page 38: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/38.jpg)
• PHOTOSHOP动作• 批量替代
• 自动完成
• ZEN-CODING
![Page 39: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/39.jpg)
• PHOTOSHOP动作• 批量替代
• 自动完成
• ZEN-CODING
![Page 40: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/40.jpg)
• PHOTOSHOP动作• 批量替代
• 自动完成
• ZEN-CODING
![Page 41: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/41.jpg)
• PHOTOSHOP动作• 批量替代
• 自动完成
• ZEN-CODING
![Page 42: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/42.jpg)
• PHOTOSHOP动作• 批量替代
• 自动完成
• ZEN-CODING
![Page 43: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/43.jpg)
• PHOTOSHOP动作
• 批量替代• 自动完成
• ZEN-CODING
![Page 44: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/44.jpg)
• PHOTOSHOP动作
• 批量替代• 自动完成
• ZEN-CODING
![Page 45: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/45.jpg)
• PHOTOSHOP动作
• 批量替代
• 自动完成• ZEN-CODING
![Page 46: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/46.jpg)
• PHOTOSHOP动作
• 批量替代
• 自动完成
• ZEN-CODING
http://www.qianduan.net/zen-coding-a-new-way-to-write-html-code.html
![Page 47: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/47.jpg)
• Fiddler & Willow - 文件夹映射
- HOST环境切换
• CSSGAGA [ HTTP://WWW.99CSS.COM/ ]
- 自动压缩
- 生成DATA URI
- 合并CSS文件
![Page 48: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/48.jpg)
• FIDDLER & WILLOW
- 文件夹映射
- HOST环境切换
• CssGaga [ http://www.99css.com/ ]- 自动压缩
- 生成data URI
- 合并CSS文件
![Page 49: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/49.jpg)
• FIDDLER & WILLOW
- 文件夹映射
- HOST环境切换
• CssGaga [ http://www.99css.com/ ]- 自动压缩
- 生成data URI
- 合并CSS文件
![Page 50: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/50.jpg)
• 效率
- 自动化
- 模板
• 成本
- 分离
- 优化
![Page 51: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/51.jpg)
• 对于周期较短的运营活动项目
• 内容结构趋同的专题
![Page 52: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/52.jpg)
• 对于周期较短的运营活动项目
• 内容结构趋同的专题
![Page 53: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/53.jpg)
• 对于周期较短的运营活动项目
• 内容结构趋同的专题
![Page 54: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/54.jpg)
• 效率
- 自动化
- 模板
• 成本
- 分离文档一次建立,随处可用 - 《网站重构》 P42
- 优化
![Page 55: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/55.jpg)
• 多终端• 流量
• 维护
![Page 56: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/56.jpg)
• 多终端• 流量
• 维护
![Page 57: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/57.jpg)
• 多终端
• 流量
• 维护
![Page 58: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/58.jpg)
• 效率
- 自动化
- 模板
• 成本
- 分离
- 优化节省每一兆字节的流量 - 《网站重构》 P18
![Page 59: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/59.jpg)
• 图片优化• 压缩代码
• 不停地优化
![Page 60: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/60.jpg)
• 图片优化• 压缩代码
• 不停地优化
①图片压缩②格式转换③其他
![Page 61: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/61.jpg)
• 图片优化• 压缩代码
• 不停地优化
![Page 62: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/62.jpg)
• PngQuant
- PNG32转PNG8-Alpha
• Smush It [http://www.smushit.com]
- 在线
- 支持各种图片格式
• PngOptimizer
- 无损压缩
![Page 63: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/63.jpg)
• PngQuant
- PNG32转PNG8-Alpha
• Smush It [http://www.smushit.com]
- 在线
- 支持各种图片格式
• PngOptimizer
- 无损压缩
![Page 64: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/64.jpg)
• PngQuant
- PNG32转PNG8-Alpha
• Smush It [http://www.smushit.com]
- 在线
- 支持各种图片格式
• PngOptimizer
- 无损压缩
![Page 65: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/65.jpg)
• PNGQUANT
- PNG32转PNG8-ALPHA
• Smush It [http://www.smushit.com]- 在线
- 支持各种图片格式
• PNGOPTIMIZER
- 无损压缩
![Page 66: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/66.jpg)
• PngQuant
- PNG32转PNG8-Alpha
• Smush It [http://www.smushit.com]
- 在线
- 支持各种图片格式
• PngOptimizer- 无损压缩
![Page 67: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/67.jpg)
• PngQuant
- PNG32转PNG8-Alpha
• Smush It [http://www.smushit.com]
- 在线
- 支持各种图片格式
• PngOptimizer- 无损压缩
![Page 68: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/68.jpg)
• 图片优化
• 压缩代码• 不停地优化
![Page 69: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/69.jpg)
• 图片优化
• 压缩代码• 不停地优化
![Page 70: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/70.jpg)
• 图片优化
• 压缩代码• 不停地优化
![Page 71: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/71.jpg)
• 图片优化
• 压缩代码
• 不停地优化
其他建议?
![Page 72: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/72.jpg)
• 图片优化
• 压缩代码
• 不停地优化
其他建议?
![Page 73: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/73.jpg)
![Page 74: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/74.jpg)
① 提高产能
② 节约成本
![Page 75: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/75.jpg)
一)让用户更爽!二)让老板更爽!
![Page 76: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/76.jpg)
![Page 77: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/77.jpg)
① 《网站重构》描绘了未来
② 有些东西被忽略和被误解
③ 网站重构需要实现价值
![Page 78: Reviews of Designing with Web Standards](https://reader033.vdocuments.site/reader033/viewer/2022051613/54c7eee44a795989658b4597/html5/thumbnails/78.jpg)
在这个领域,争论从未停止过 - 《网站重构》
谢谢!