[2008]网站重构 -who am i

TwinsenLiang

Who am I网站重构——

2008.08.12

现在

• 切图？

• 写文档？

• 发展路向只有转产品、转开发？

2008.08.12

什么是WEB2.0

• WEB2.0是出自于 2004年 3月，在欧雷利媒体公司（ O’Reilly Media Inc.）在线出版及研究的副总裁戴尔 ·多尔蒂（ Dale Dougherty）之手。

• WEB2.0是一个概念

• WEB2.0是以一系列网站做为代表的统称

• WEB2.0是以用户作为内容来源的

2008.08.12

存在的问题

• Dale Dougherty是最早提出 API的人之一。对于这样的一个技术型的人说出了一个并非以技术作为主导的概念

• 从一个终点目标的描述去多向发展是根本不可能到达所谓的终点目标的。

• 很多所谓的内容为王，进而的还有以用户作为内容来源。那么我们的用户在哪里来？

2008.08.12

2008.08.12

《What is WEB2.0》（官方指定译文）原文是包含了技术的范围的，

传到国内却变样。

问题发生的原因

• Dale Dougherty是最早提出 API的人之一。对于这样的一个技术型的人说出了一个并非以技术作为主导的概念

• 从一个终点目标的描述去多向发展是根本不可能到达所谓的终点目标的。

• 很多所谓的内容为王，进而的还有以用户作为内容来源。那么我们的用户在哪里来？

http://www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html?page=1

http://www.enet.com.cn/article/2005/1122/A20051122474593.shtml

2008.08.12

WEB2.0的单手定则

API

XHTMLCSS

AJAX

SEO

1、 XHTML（ HTML、 XML）

a. 重构的最大误区

b. 从头开始来学习

c. XHTML学习的本质就是该是什么就用什么

2008.08.12

HTML是 Hypertext Markup Language的英文缩写 ,即超文本标记语言 ,是一种用来制作网页的标记语言。XML是 The Extensible Markup Language(可扩展标识语言 )的简写。XHTML是 EXtensible HyperText Markup Language的英文缩写 ,即可扩展的超文本标记语言也可看作是 HTML与 XML的交集。

首先我们必须要知道为什么要“ DIV+CSS”。我们一起来看下面三个例子。

• Table+CSS做的页面

• DIV+CSS做的页面

• DIV+CSS胜出的页面

2008.08.12

TABLE是 XHTML当中用作表格的标记。DIV是 XHTML当中用作分割快的标记。CSS是 Cascading Style Sheets(层叠样式表 )的简称。

2008.08.12

接着我们是要推翻它：页面界没有人不知道的一本书《网站重构》到了中国就变成了 DIV+CSS。但是却没有人认真地读过这本书，里面有着Jeffrey Zeldman所说这样的一句话——“即大量的使用 div标签作为结构元素，没有固定的标准和道理说不行，但事实上这是一种更高级的

table滥用。”（网络的出处）

1.a.重构的最大误区

http://www.zeldman.com/

http://www.zeldman.com/

http://www.zeldman.com/daily/1003b.shtml

2008.08.12

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn">

<head>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<meta http-equiv="Content-Language" content="zh-cn" />

<meta name="robots" content="all" />

<meta name=“author” content=“填写作者名 ." />

<meta name=“copyright" content="Copyright (c) 1998-2008 Tencent Inc." />

<meta name=“description” content=“填写本页的简介 ." />

<meta name=“keywords” content=“填写本页的关键词，以逗号分割" />

<title>填写文章的标题</title>

<link href="/style/screen/index.css" rel="stylesheet" type="text/css" media="screen" />

<link href="/style/handheld/index.css" rel="stylesheet" type="text/css" media="handheld" />





<link rel="Shortcut Icon" href="/favicon.ico" type="image/x-icon" />

<link rel="Bookmark" href=“/favicon.ico" type="image/x-icon" />

<link rel="alternate" type="application/rss+xml" title="RSS news feed" href="/rss.xml" />

</head>

<body>

</body>

</html>

1.b.从头开始来学习

2008.08.12

常用 xhtml 1.0标签

h1-h6

div

p img

table colgroup col caption thead th tfoot tbody tr td

a span strong sup sub

form input button select option textarea label fieldset

legend

ul ol li dl dt dd

1.c. XHTML学习的本质就是该是什么就用什么

2、 CSS（网页中的魔术师）

a. XHTML中 CSS启用的命名规范

b. 对于盒模型带来的一些思考

c. CSS所必须牢记的几个要诀

d. CSS的未来

2008.08.12

CSS是 Cascading Style Sheets(层叠样式表 )的简称。盒模型是指页面表现各个影响宽高的属性所塑造的一个模型结构。

2.a. XHTML中 CSS启用的命名规范

• 使用直接的继承式

• 使用 id命名的方式

• 使用 classname命名的方式

2008.08.12

CSS启用的命名规范会造成团队的不协调，新人无法接手等问题。 CSS的启用方式有：

当前存才的一些例子：id=“list_title” id=“ListTitle” id=“list-title”

class =“list_title” class =“ListTitle” class=“list-title”

2.b.对于盒模型带来的一些思考

• IE5.5以下的 padding问题

• IE的多了一只猪问题

• OP 字体定位的小像素偏移问题

2008.08.12

各浏览器对盒模型的解释不一致，造成我们定位上的困难

最佳的解决方案：1、 HTML 绑定 IE Hack， CSS单独周边浏览器的 Hack

2、结构的规范性3、 CSS的缩略化与模块化、模板化

Margin 常被翻译为外补丁。Padding 常被翻译为内补丁。

2.c. CSS所必须牢记的几个要诀

• 没有难的 CSS，只有磨时间的 CSS

• 最简单的 CSS处理方法是绝对定位

• 浮动以后一定要清除浮动

• 多用margin，少用 padding，可以令你的 Hack更简单

• 巧妙的使用负边界去完成 CSS中的“归位”

• 懂得分清楚什么项目使用什么的 CSS 解决方案，扭转传统的“切图仔”观念

2008.08.12

2.d.CSS的未来

• all 用于所有设备类型

• aural 用于语音和音乐合成器

• braille 用于触觉反馈设备

• embossed 用于凸点字符（盲文）印刷设备

• handheld 用于小型或手提设备

• print 用于打印机

• projection 用于投影图像，如幻灯片

• screen 用于计算机显示器

• tty 用于使用固定间距字符格的设备。如电传打字机和终端

• tv 用于电视类设备

2008.08.12

当然除此之外还有我们的 CSS2.0-2.1当中的一些伪类、伪对象等尚未能在浏览器当中启用的属性和功能。

多平台、多终端，更好的表现我们页面完美样式。

3、 AJAX

a. AJAX的 frame work不能适应我们以及互联网的发展

b. AJAX的好处在于哪里

c. AJAX与其它关键技术点的优劣在于哪里

d. AJAX的落实点在于 Client 端

2008.08.12

Ajax是异步 JavaScript和 XML（ Asynchronous JavaScript and XML）的英文缩写。而另一方面也代表以Javascript为实现主导的异步拉取数据的技术（如拉取 Json 等）

4、 SEO

a. SEO的主要技术点在于做好 XHTML

b. SEO的次要技术点在于关键字的搜索排行

c. SEO的侧重点在于弱关键字带动强关键字

d. SEO的落实点在于 Portal 端

e. SEO的初期需要一群点击为工作的人（可以发展项目内的每一个人，当然这就靠个人的拓展力了）

f. SEO的必要点是数据静态化以及合理的动态化连接

2008.08.12

SEO是 Search Engine Optimization的缩写，用英文描述是 to use some technics to make your website in

the top places in Search Engine when somebody is using Search Engine to find something ，翻译成中文就是“搜索引擎优化”，一般可简称为搜索优化。与之相关的搜索知识还有 Search Engine Positioning（搜索引擎定位）、 Search Engine Ranking（搜索引擎排名）。

前端优化• 减少 HTTP 请求数 . 减少 HTTP 请求数

降低服务器跟客户端的建立和消除 HTTP 请求和响应 Header的开销

减少服务器为 HTTP 连接的进程和线程的开销 , 如果可能 ,还会包括GZIP 压缩的 CPU开销 .

• 减小被请求文件大小 , 减少请求数据占用的网络带宽 .

• 让用户更快的看到想要的结果 .

• 提高客户端渲染速度 .

• 让浏览器同时能请求更多的数据 .

• 提高服务器相应速度 .

• 通过版本化控制客户端 Cache.

filename.css?071225.css

2008.08.12

首页公共图片的优化将以上图片

2008.08.12

前端优化

合并为以上的一张图片

2008.08.12

前端优化

• 合并前耗时： 22.447 S，大小： 19194 KB

• 合并后耗时： 0.012 S，大小： 19180 KB

2008.08.12

背景定位：

互联网网站重构组的一些范例


2008.11.07

Demo link

当然，这只是一种方便的方式；但是一个全能的方式是 Tmenu

http://www.twinsenliang.net/tmenu/

互联网网站重构组的一些范例Background-image:

Demo link

2008.11.07


2008.11.07


2008.11.07


2008.11.07


2008.11.07

模板的推广以及执行永远快于一个标准以及准则的执行！

相关工具两本手册

DHTML 手册

Css20手册

2008.11.07

相关工具浏览器工具 (IE相关 ):

Multiple_IE( 绿色版 IE集 ):

http://tredosoft.com/Multiple_IE

HttpWatch(http request 抓包工具 ):

http://www.httpwatch.com/download/

Internet Explorer Developer Toolbar(IE 调试插件 ,主要功能为 DOM 选取 ):

http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4

511-bb3e-2d5e1db91038&displaylang=en

2008.11.07

http://tredosoft.com/Multiple_IE

http://www.httpwatch.com/download/

http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en

相关工具浏览器扩展 (Firefox 相关 ):

Firebug:

http://www.getfirebug.com/

Yslow( 配合 Firebug使用 ):

http://developer.yahoo.com/yslow/

Web Developer:

https://addons.mozilla.org/en-US/firefox/addon/60

Ie tab(在 Firefox上调用当前系统的 IE内核 ):


2008.11.07

http://www.getfirebug.com/

http://developer.yahoo.com/yslow/



相关工具平台相关工具 (操作系统虚拟机 )

Virtual PC:

http://www.microsoft.com/windows/products/winfamily/virtualpc/default.mspx

VMware Workstation:

http://www.vmware.com/download/ws/

2008.11.07

http://www.microsoft.com/windows/products/winfamily/virtualpc/default.mspx

http://www.vmware.com/download/ws/

TwinsenLiang

Thanks

Q&A

2008.11.07

Technology

[2008]网站重构 -who am i