重温网站重构

ReviewsofDesigningwithWebStandards@AvenirZheng•为了让网站能“活”得更久•为了提高网站的可访问性•为了降低成本•让用户更爽！•让老板更爽！•让自己更爽！二）让老板更爽！三）让自己更爽！•用户体验-速度除了少数有毅力和耐心的客户能够等到所有的页面打开，大多数人早已因厌倦而离开-《网站重构》P4•可访问性-语义基础-平凡的用户•主要内容先呈现•REFLOW•主要内容先呈现•REFLOW制作一个页面，首先要一个top，下面是一个bottom，中间是一个三列块的模式，left，main，right。特殊要求是这个页是一个门户网站的基本框架，访问量大于100W每日。因成本限制，网络带宽可能满足不了此访问量，会出现滞连情况。•主要内容先呈现•REFLOW•主要内容先呈现•REFLOW①CSS选择符-具体-从右到左-避免复杂•主要内容先呈现•REFLOW①CSS选择符-具体-从右到左-避免复杂.class0177divdiv#id0177a#id0177*谁更高效一些？•主要内容先呈现•REFLOW①CSS选择符-具体-从右到左-避免复杂.class0177divdiv#id0177a#id0177*谁更高效一些？•主要内容先呈现•REFLOW①CSS选择符-具体-从右到左-避免复杂.class0177divdiv#id0177a#id0177*谁更高效一些？•主要内容先呈现•REFLOW①CSS选择符-具体-从右到左-避免复杂.class0177divdiv#id0177a#id0177*谁更高效一些？•主要内容先呈现•REFLOW•主要内容先呈现•REFLOW②精简DOM-避免复杂嵌套③position为absolute戒fixedReflowTimer•主要内容先呈现•REFLOW②精简DOM-避免复杂嵌套③position为absolute戒fixedReflowTimer•主要内容先呈现•REFLOW②精简DOM-避免复杂嵌套③position为absolute戒fixed•用户体验-速度•可访问性-语义基础Classitis和divitis就像小说中不必要的修饰词语，以及花园中的杂草-《网站重构》P149-平凡的用户•Div+CSS•ALTORTITLE•Div+CSS•ALTORTITLE•Div+CSS•ALTORTITLE•DIV+CSS•ALTorTITLE•DIV+CSS•ALTorTITLE帮忙加个图片提示吧•用户体验-速度•可访问性-语义基础-平凡的用户给每个人提供相等的可访问性-《网站重构》P276•我不喜欢用鼠标•手机流量费用太高了•听不见的世界•我不喜欢用鼠标•手机流量费用太高了•听不见的世界•我不喜欢用鼠标•手机流量费用太高了•听不见的世界•我不喜欢用鼠标•手机流量费用太高了•听不见的世界•我不喜欢用鼠标•手机流量费用太高了•听不见的世界导航什么的都不见了•我不喜欢用鼠标•手机流量费用太高了•听不见的世界•我不喜欢用鼠标•手机流量费用太高了•听不见的世界•我不喜欢用鼠标•手机流量费用太高了•听不见的世界还记得刚才的altortitle吗?①快!②人人生而平等一）让用户更爽！三）让自己更爽！•效率-自动化所有的繁重工作都由计算机来完成-《网站重构》P156-模板•成本-分离-优化•PHOTOSHOP动作•批量替代•自动完成•ZEN-CODING•PHOTOSHOP动作•批量替代•自动完成•ZEN-CODING•PHOTOSHOP动作•批量替代•自动完成•ZEN-CODING•PHOTOSHOP动作•批量替代•自动完成•ZEN-CODING•PHOTOSHOP动作•批量替代•自动完成•ZEN-CODING•PHOTOSHOP动作•批量替代•自动完成•ZEN-CODING•PHOTOSHOP动作•批量替代•自动完成•ZEN-CODING•PHOTOSHOP动作•批量替代•自动完成•ZEN-CODING•PHOTOSHOP动作•批量替代•自动完成•ZEN-CODING•Fiddler&Willow-文件夹映射-HOST环境切换•CSSGAGA[]-自动压缩-生成DATAURI-合并CSS文件•FIDDLER&WILLOW-文件夹映射-HOST环境切换•CssGaga[]-自动压缩-生成dataURI-合并CSS文件•FIDDLER&WILLOW-文件夹映射-HOST环境切换•CssGaga[]-自动压缩-生成dataURI-合并CSS文件•效率-自动化-模板•成本-分离-优化•对于周期较短的运营活动项目•内容结构趋同的专题•对于周期较短的运营活动项目•内容结构趋同的专题•对于周期较短的运营活动项目•内容结构趋同的专题•效率-自动化-模板•成本-分离文档一次建立，随处可用-《网站重构》P42-优化•多终端•流量•维护•多终端•流量•维护•多终端•流量•维护•效率-自动化-模板•成本-分离-优化节省每一兆字节的流量-《网站重构》P18•图片优化•压缩代码•不停地优化•图片优化•压缩代码•不停地优化①图片压缩②格式转换③其他•图片优化•压缩代码•不停地优化•PngQuant-PNG32转PNG8-Alpha•SmushIt[]-在线-支持各种图片格式•PngOptimizer-无损压缩•PngQuant-PNG32转PNG8-Alpha•SmushIt[]-在线-支持各种图片格式•PngOptimizer-无损压缩•PngQuant-PNG32转PNG8-Alpha•SmushIt[]-在线-支持各种图片格式•PngOptimizer-无损压缩•PNGQUANT-PNG32转PNG8-ALPHA•SmushIt[]-在线-支持各种图片格式•PNGOPTIMIZER-无损压缩•PngQuant-PNG32转PNG8-Alpha•SmushIt[]-在线-支持各种图片格式•PngOptimizer-无损压缩•PngQuant-PNG32转PNG8-Alpha•SmushIt[]-在线-支持各种图片格式•PngOptimizer-无损压缩•图片优化•压缩代码•不停地优化•图片优化•压缩代码•不停地优化•图片优化•压缩代码•不停地优化•图片优化•压缩代码•不停地优化其他建议?•图片优化•压缩代码•不停地优化其他建议?①提高产能②节约成本一）让用户更爽！二）让老板更爽！①《网站重构》描绘了未来②有些东西被忽略和被误解③网站重构需要实现价值在这个领域，争论从未停止过-《网站重构》谢谢!