2008年12月20日星期六

HTML 和 XHTML 区别

这篇文章主要阐述 HTML 和 XHTML 的区别。简单来说,XHTML 可以认为是 XML 版本的 HTML,为符合 XML 要求,XHTML 语法上要求更严谨些。

以下是 XHTML 相对 HTML 的几大区别:

  • XHTML 要求正确嵌套
  • XHTML 所有元素必须关闭
  • XHTML 区分大小写
  • XHTML 属性值要用双引号
  • XHTML 用 id 属性代替 name 属性
  • XHTML 特殊字符的处理

XHTML 要求正确嵌套

以下是正确的嵌套:

<p>布啦布啦<strong>独树一帜</strong>。</p>

以下是错误的嵌套:

<p>布啦布啦<strong>独树一帜</p></strong>。

XHTML 所有元素必须关闭

在 HTML 中,比如 <p>,<li> 这些标记,你可以不写 </p>,</li>,但是在 XHTML 里,必须要求写关闭标记 (Closing Tag)。

比如:

<p>布啦布啦很认真。

应该写成:

<p>布啦布啦很认真。</p>

处理空元素

有些空元素,在 XHTML 里的写法是在">"之前加空格和斜杠。比如<br>,应该写成<br />。

以下是空元素的例子:

<br />

<hr />

<img src = "/images/adpics/1/b027.jpg" alt = "blabla" />

<link rel="stylesheet" href="/styles/blabla.css" type="text/css" />

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

XHTML 区分大小写

HTML 不区分大小写,但是 XHTML 是区分大小写的。

XHTML 的所有标记属性都要写。

比如:

<IMG SRC = "/images/adpics/1/b027.jpg" Alt = "blabla" />

应该写成:

<img src = "/images/adpics/1/b027.jpg" alt = "blabla" />

XHTML 属性值要用双引号

HTML 并不强制要求属性值加双引号。比如你可以写:

<table cellspacing = 0>

<input checked>

但在 XHTML 里,应该写成:

<table cellspacing = "0">

<input checked = "checked" />

XHTML 用 id 属性代替 name 属性

HTML 很多元素,比如 a,applet,frame,iframe,img 和 map,有 name 属性。在 XHTML 里是要废除的,而用 id 属性取而代之。

比如:

<img src="blabla.gif" name="blabla logo" />

应该写成:

<img src="blabla.gif" id="blabla logo" />

XHTML 特殊字符的处理

& 应该在 XHTML 里应该写成 &amp;。

比如:

You & Me

应该写成:

You &amp; Me

还有如果内嵌 Javascript 代码,在 XHTML 里则应该写成:

<script type="text/javascript">//<![CDATA[

...

//]]></script>

浏览器的角度

以上是从协议标准的角度来看待这个问题的。如果从浏览器的角度来看待这个问题,情况就有所不同。

考虑一下,如果把 XHTML 写得很不严格,浏览器会怎么做?是不是会弹出一个对话框,写着“这个网站的开发人员技术不过关,写的不是正宗的 XHTML 文件,咱不显示”?显然,如果浏览器做成这个样子,倒贴钱也是不会有人用的。

从浏览器的角度看待上面几个不同,大致是下面的测试结果(IE和Firefox我都测试过):

  • XHTML 要求正确嵌套:如果你没有嵌套,浏览器会试图帮你嵌套。
  • XHTML 所有元素必须关闭:如果你没有关闭,浏览器会试图帮你关闭。
  • XHTML 区分大小写:你非要写成大写,浏览器帮你转换成为小写。
  • 属性值要用双引号:你非要不肯加,浏览器帮你加。
  • 特殊字符的处理:You & Me 也好,You &amp; Me 也好,浏览器都能读入。
  • 用 id 属性代替 name 属性:你非要用 name 也可以。

如果你在文档开始用 DocType 指定为 XHTML 了,有一点需要注意。在给 Tag 用 class 指定CSS 的时候,是区分大小写的。例如,你定义了一个CSS如下,

<style> .hello { ...... } </style>

而你使用的时候写成,

<p class="Hello"> ......

那这个CSS是不会被使用的。要积极的看待这个问题,这让你可以用更多的名字来命名 Style,是一个好事。

XHTML 标准的前途

从标准制定者的初衷看,制定 XHTML 标准是试图把 HTML 规范成为严格的 XML 格式,这样无可避免的会导致一个结果,就是从 HTML 到 XHTML 的升级导致标准的容错能力降低了。把自己的网页源文件写得严格一点当然是好事,但是一个标准不可能去要求浏览器降低自己的容错能力。

XHTML 1.0 标准是兼容 HTML 4.01,是个不错的协议,可以让开发者在编写代码的同时通过一些工具来检查代码的合法性,虽然对于用户而言,制作出来的网页和 HTML 4.01 相比实在没有什么不同。对于你写新的网页来说,使用 XHTML 1.0 还是一个不错的选择。

XHTML 1.1 标准要求浏览器不再支持原先的容错能力,这是一个标准制定者走火入魔的典型例子,这个标准从学术上说非常纯净,但是对于浏览器而言,则是个呆板、笨拙、不可理喻的标准。所以目前所有由人类开发的浏览器都没有遵照所谓纯净的 XHTML 1.1的标准,你的代码只要浏览器能读懂,他都会很好的显示出来,而不跳出弹框报错。

从发展的趋势来看,一个标准没有浏览器服从,等于是没有意义的标准。从浏览器的实现角度来看,新的协议只能在原来 HTML 的基础上扩大能力增加容错,而不能缩小了能力减少容错。所以新的协议中,只有扩大能力增加容错的部分会被采纳,而其他部分都仅仅是纸上谈兵而已。

2008年10月1日星期三

无线温度网络监控系统

一年前,应朋友的要求,开始用Flex实践《无线温度网络监控系统》项目,针对血站使用恒温冰箱保存血液的需求设计,虽然最后因种种原因没有最终完成,这里截几个图出来,献丑了^_^

主界面--比较清爽的界面,可以更换皮肤和显示语言


日报查询--查询当天的温度,月报查询也差不多


历史曲线--因为数据量比较大,参考股票的曲线


设备处理记录--记录各个冰箱的状态


故障记录查询--查询各个冰箱的故障情况


系统设置--对系统参数和冰箱报警温度的设定


设置演示--根据数据类型动态提供修改对话框


系统设置--设置系统参数


设置演示--动态弹出颜色选择对话框


修改确认--当数据修改没有保存时警告


主界面的另一视图--用不同的视图显示,比较直视




报警提示--当冰箱温度异常时,右上角红色圈在弹动,双击取消当前测点的报警


虽然这是个还没有成型的项目,但在通过这个系统对AS3有了深入的理解,希望以后能够完成这个工程,同时也希望能够多参与AS方面的工作。

2008年7月10日星期四

什么是微格式

首先,请不要一厢情愿地把微格式(Microformat)理解为某种语言的简化,这是完全错误的字面理解,事实完全相反,从经典个例“hCard 微格式”看出,它是把XHTML语言在Web中的应用“冗余”话了。当然初识它的人都难免会犯类似错误。什么是微格式呢?它存在的意义又是什么?本文或许 会让你对Microformat有所了解,并对其蕴含的巨大潜力及广泛用途折服。

什么是微格式

微格式:建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式(microformats.org官方定义)。是把语义嵌入到 HTML以便有助于分离式开发而制定的一些简单约定,是兼顾人机可读性设计的数据表达方式,对Web网页进行语义注解的方法。这种方法依托于标准的Web 页面写作技术,例如,XHTML,这样引入语义信息对浏览器等所有现存的Web技术冲击最小。采用Microformat的 Web页面,在XHTML文档中给一些标签(Tag)增加一些属性(attribute),这些属性对信息的语义结构进行注解,处理XHTML文档的软 件,例如,浏览器等,如果不认识这些属性可以跳过,并不造成任何不良影响(ITPUB)。

设计师和开发人员使用微格式来添加结构和针对网络发布有意义的信息,需要作的仅仅是为现有的(X)HTML元素添加元数据和其他属性。所以,我们无需抛开已有的工作习惯,因为微格式提供的解决方法是符合当前我们行为和习惯模式的。

从技术上来说,这些数据是一些语义标记,用标准的(X)HTML中的class名称设置。他是开放、可用、自由的,可以被任何人使用。

那么,微格式在实际应用中的意义和作用又是什么呢?微格式按照某种已有的被广泛应用的标准,通过对内容块的语义标记,可以让外部应用程序、聚合程序和搜索引擎能够做以下事情:

  • 在爬取Web内容时,能够更为准确地识别内容块的语义;
  • 对内容进行操作,包括提供访问、校对,还可以将其转化成其他的相关格式,提供给外部程序和Web服务使用。

简单的微格式

我们从上面的描述知道,微格式实际就是为现有的(X)HTML元素添加元数据和其他属性,增强语义。那么我们就来看一个简单的微格式应用吧。
以前我们是这样写一个链接到首页的<a></a>代码的:

<a href=”http://www.ui163.cn” >Web Design Blog</a>

而现在我们要为这个代码元素<a>加上rel属性。

<a href=”http://wwwui163.cn“ rel=”homepage”>Web Design Blog</a>

上面的链接标记<a>包括rel=”home”属性,该属性显示链接的目标页面是该网站的首页。通过为已有的链接元素添加语义化属性,就为这个链接添加了具体的结构和意义。

hCard 微格式

hCard是一种微格式,用来发布个人,公司,组织,地点等详细的联系信息。它可以包含在(X)HTML,Atom,RSS等可扩展置标语言中。hCard使用vCard(RFC 2426)的属性和值来实现这些功能。

它可以使分析器(比如其他网站,Firefox的Operator插件)获得详细的信息,并通过别的网站或者地图工具进行显示,或者载入到地址簿等其他程序。

示例一

如下HTML代码:

<div>
<div>Joe Doe</div>
<div>The Example Company</div>
<div>604-555-1234</div>
<a href=”http://example.com/”>http://example.com/</a>
</div>

加入微格式后,成为:

<div class=”vcard”>
<div class=”fn”>Joe Doe</div>
<div class=”org”>The Example Company</div>
<div class=”tel”>604-555-1234</div>
<a class=”url” href=”http://example.com/”>http://example.com/</a>
</div>

这里,正式名称(class=”fn”),组织(class=”org”),电话号码(class=”tel”)和url(class=”url”)分别用相应的class标示;同时,所有内容都包含在class=”vcard”里。

示例二

这里是维基媒体基金会的联系方式,可以作为hCard的一个真实示例:

Wikimedia Foundation Inc.

200 2nd Ave. South #358

St. Petersburg, FL 33701-4313

USA

Phone: +1-727-231-0101

Email: info@wikimedia.org

Fax: +1-727-258-0207

加入微格式后,成为:

<div class=”vcard”>
<div class=”fn org”>Wikimedia Foundation Inc.</div>
<div class=”adr”>
<div class=”street-address”>200 2nd Ave. South #358</div>
<div>
<span class=”locality”>St. Petersburg</span>,
<span class=”region”>FL</span> <span class=”postal-code”>33701-4313</span>
</div>
<div class=”country-name”>USA</div>
</div>
<div>Phone: <span class=”tel”>+1-727-231-0101</span></div>
<div>Email: <span class=”email”>info@wikimedia.org</span></div>
<div>
<span class=”tel”><span class=”type”>Fax</span>:
<span class=”value”>+1-727-258-0207</span></span>
</div>
</div>

注意,在这个例子中,正式名称(class=”fn”)和组织(class=”org”)写在了一个属性中,表示这是一个组织,而不是个人。

其他常用的hCard属性包括:

  1. bday - 生日
  2. email
  3. honorific-prefix -(西式)名字前的尊称,例如:博士(Dr.)、牧师(Rev.)等,在东方会放在名字的后方。
  4. honorific-suffix -(西式)名字后的尊称,一般都是封衔,例如:太平绅士(JP)、大紫荆勋章(GBM),一般详列在名字的最后方。
  5. logo
  6. nickname - 昵称、爱称或外号。西方人的名字一般都有简写,有时这些昵称或外号就用来分辨同名的人。例如:William “Bill” Gates 中间的”Bill”。
  7. note
  8. photo
  9. post-office-box

Geo也可以被包含在hCard中,表示某个地址的坐标。Geo是一种在HTML和XHTML中标记WGS84地理坐标(经度,纬度)的微格式。尽管属于“草案”,其格式是稳定的并已经被使用。它还可以作为hCard微格式的一个子集。

以上摘自:维基百科

目前已具备完整规范的微格式还包括:hCard、hCalendar、XOXO、XFN、VoteLinks和3个“rel-”微格式:rel- license、rel-nofollow和rel-tag。

后记

Yahoo是微格式的大力提倡者.Flickr一个图片分享平台,用vcard微格式处理用户信息数据,通过应用软件直接获取页面上的用户信息数据 后,将这些数据导出或者直接导入到其他的应用程序中,例如使用Firefox的operator插件可以分析和到处数据,然后根据提取的 geo,location等地理信息在Google Map,Yahoo Map中定位用户,伴随着相关应用软件的开发,vcard数据可不只是能用作这些.再来看看Yahoo的对微格式的另外一个应用upcoming,是一个 日历的事件管理应用,在获取页面的hcalendar微格式数据之后,它可以将数据导出或者直接导入到其他的web日历事件管理软件中.

Dopplr提供的或许更加让微格式的应用方向更加清晰.它提供的服务是将你的行踪与你的联系列表关联起来,方便你的朋友关注你的行踪,及时的为你 提供帮助,主要方式为常规的RSS订阅和iCal订阅.你在网上的某些页面的 hcard,hcalendar微格式数据可以导入到Dopplr中,然后可以将这些数据导入到支持Dopplr的微格式数据的程序中,当前主要为Mac 机的iCal和支持多个系统平台兼容iCal数据格式的Mozilla产品Sunbird.

说到这里,使用微格式不只是web代码语义化那么简单.如何应用微格式是最重要的.对于微格式如何被解析,可以看看 Brian Suda 的一篇文章 Parsing Microformats ,或许有所帮助.到Brian Suda的个人网站上也可以找到更多有趣的东西(摘自:Cheshirecat.cn)。

Microformat 官方网站:Microformat

2008年6月20日星期五

利用AJAX技术提高搜索引擎排名

  描述 嵌入在你的web页面中的导航元素能够降低你的搜索引擎评价排名并且降低你的网站的响应性能。本文作者想同你一起探讨如何使用AJAX技术来解决这两个问题。

  许多设计良好的web站点都包含大量的与实际内容相联系的可导航信息。用于导航的HTML标记能影响你的搜索引擎评价,而且能够改进访问者的页面下载体验感。在本文中,你会看到如何使用AJAX来创建更为集中的更快速加载的web页面。

  让我们使用一个例子作为开始。请考虑你现在阅读的文章,它有下列一些内容:

  · 一个其上有一些预定义的到Informit的各个部分的链接的页眉。

  · 在页眉下有一行,把本文放到Informit的目录结构之中(实际上,这是唯一的与目录相关的可导航元素)。

  · 一个位于右首的侧栏,其中有一些连接到流行文章和推荐内容的链接。

  · 一个页脚,还有一些永远不会改变的链接。

  上面的"混合"很可能会影响搜索引擎索引你的数据的方式:

  · 因为搜索引擎不能区别内容与导航文本,所以它们会把它们在你的页面中找到的一切进行索引。既然目录中的关键字与不相关的可导航关键字混合在一起,那么内容之间的关联大大减少。一些搜索引擎宣称,它们能够在被搜索到的页面(例如,固定的页眉和页脚)中发现重复的文本并且删除它们。但是,不要依赖这种可能性;即使它们实现了这种技术,也很可能不会一直可靠。

  · web页面中的外向链接影响你的内容的页面评价。尽管这可能提高流行的文章的评价排名(因为许多页面都链接到它们),但是所有的页面都链接到的内容(例如,隐私策略)通常得到最高的页面评价-这可能不是你一直关心的问题。在我的一个web站点中,最高的评价页面是用于把消息发送到web管理员的表单-而不是你想让用户首先在Google上找到的内容。

  注意

  即使你不使用站点地图,你也可以通过Google的站点地图用户接口来了解一下你的页面的页面排名情况。

  添加到一个web页面的可导航元素还可能影响使用低速互联网存取的用户,而如果web页面不使用DIV元素(Informit使用之)而使用表格时更是如此。在这种情况中,在把它显示给用户之前,整个表格必须被加载到一些web浏览器中。

  传统地,web设计者一般都使用框架集或通过构建整套的导航架构(广泛使用JavaScript代码)来实现导航与内容的分离。这两条途径都存在其缺点;因此,许多大型网站避免使用框架集就不足为奇了。

  借助于在AJAX框架中使用的技术,你可以为这一问题提供一种方案:

  · 每一个web页面仅包含可导航元素和实际内容的占位符。

  · 在web页面通过嵌入式框架(IFRAME)或使用XmlHttpRequest对象加载后,再装载这些可导航元素。

  · 然后,可导航元素的内容被合并到web页面内容中,从而产生一个不嵌入任何帧的干净的页面。

  在使用这种方法重新设计你的web页面之前,你需要考虑下列问题:

  · 搜索引擎仅将看到初始的web页面。你必须确保,该页面中包含到相关页面或到一个网站地图的链接。Informit网站中文章页眉上方的导航线和在页面的文章信息部分中的链接正好可以较好地实现这一目的。

  · 在他们的浏览器中禁止调用JavaScript的访问者将具有与搜索引擎相同的页面视图。你必须确保他们有受限的视图不会给你的网站的功能造成较大影响。

  · 你可能想在你的页面上保留一些静态内容。例如,Informit标识和版权信息必须一直显示给所有的访问者。

  对于每一个可导航元素的连续区域,你应该创建一个具有唯一id的独立DIV元素;这样以来,以后你可以在你的JavaScript代码中标识它。为了防止过度晃动,在创作页面期间,目录上方或右边的DIV元素的尺寸应该调整到非常接近你的可导航元素的实际大小;这样,当你使用希望的HTML代码来代替它们时内容就不会移动位置。为此,一种最巧妙的方法是把一个空的适当大小的DIV元素插入到该占位符处。

2008年6月18日星期三

两种HTTP连接方式POST&GET的比较

在MIDP2.0中提供了对TCP/IP层进行联网开发的支持,但是这仍然需要设备厂商和运营商的支持,而HTTP连接是MIDP规范中规定必须支持的连接方式,因此在选择开发联网应用程序的时候,HTTP连接仍然是很有竞争力的方式。当然如果你选择的目标设备支持Socket的话可以选择Socket连接方式,本文主要介绍HTTP的两种连接方式POST和GET的异同。

    HTTP协议是一种面向连接且无状态的联网方式,客户端向服务器发送请求,服务器处理后把响应传回客户端就断开连接。在我们选择连接方式的时候主要有两种可以选择POST和GET。

    当我们以GET方式发送数据的时候,数据按照如下形式封装成请求发送给服务器,我们可以看出数据都被包含在了URL中。
GET /index.Html?userid=joe&passWord=guessme HTTP/1.1
Host: www.mysite.com
User-Agent: Mozilla/4.0

下面是我们在J2ME开发中通过GET方式发送数据的代码片断
HttpConnection conn = null;
String url = "http://www.mysite.com" +
             "/index.html?userid=joe&password=guessme";
String agent = "Mozilla/4.0";

try {
conn = (HttpConnection) Connector.open( url );
conn.setRequestProperty( "User-Agent", agent );

     int rc = conn.getResponseCode();
... // process it
}
catch( IOException e ){
// handle the error here
}

     当我们使用POST方式发送数据的时候,数据被封装在URL和Header后面,中间以空行来分隔。例如
POST /login.jsp HTTP/1.1
Host: www.mysite.com
User-Agent: Mozilla/4.0
Content-Length: 27
Content-Type: application/x-www-form-urlencoded

userid=joe&password=guessme

下面是我们按照POST方式发送数据时候的代码片断
HttpConnection conn = null;
String url = "http://www.mysite.com/login.jsp";
String agent = "Mozilla/4.0";
String rawData = "userid=joe&password=guessme";
String type = "application/x-www-form-urlencoded";

String encodedData = encode( rawData ); // user-supplied

try {
conn = (HttpConnection) Connector.open( url );
conn.setRequestMethod( HttpConnection.POST );
conn.setRequestProperty( "User-Agent", agent );
conn.setRequestProperty( "Content-Type", type );
conn.setRequestProperty( "Content-Length",
     encodedData.length() );

OutputStream os = conn.openOutputStream();
os.write( encodedData.getBytes() );

     int rc = conn.getResponseCode();
... // process it
}
catch( IOException e ){
// handle the error here
}

    从上面的代码我们可以看出,如果使用POST方法,通常我们应该设置一些Headers,可以通过setRequestProperty()方法完成,其中 Content-Type和Content-Length是非常重要的,在MIDP中经常使用的Content-Type是 application/octet-stream和application/x-www-form-urlencoded,前者用于发送二进制数据,后者可以用于发送属性-数值对。我们最好在联网的时候设置这两个Header,因为这样服务器将很容易的知道将有什么类型的数据,多少数据发送过来。

    在使用POST方法发送数据的时候,通常要涉及到io的知识,我们需要打开流,发送数据,关闭流。例如
    void postViaHttpConnection(String url) throws IOException {
        HttpConnection c = null;
        InputStream is = null;
        OutputStream os = null;

        try {
            c = (HttpConnection)Connector.open(url);

            // Set the request method and headers
            c.setRequestMethod(HttpConnection.POST);
            c.setRequestProperty("If-Modified-Since",
                "29 Oct 1999 19:43:31 GMT");
            c.setRequestProperty("User-Agent",
                "Profile/MIDP-1.0 Configuration/CLDC-1.0");
            c.setRequestProperty("Content-Language", "en-US");

            // Getting the output stream may flush the headers
            os = c.openOutputStream();
            os.write("LIST games\n".getBytes());
            os.flush();                // Optional, openInputStream will flush

            // Opening the InputStream will open the connection
            // and read the HTTP headers. They are stored until
            // requested.
            is = c.openInputStream();

            // Get the ContentType
            String type = c.getType();
            processType(type);

            // Get the length and process the data
            int len = (int)c.getLength();
            if (len > 0) {
                byte[] data = new byte[len];
                int actual = is.read(data);
                process(data);
            } else {
                int ch;
                while ((ch = is.read()) != -1) {
                    process((byte)ch);
                }
            }
        } finally {
            if (is != null)
                is.close();
            if (os != null)
                os.close();
            if (c != null)
                c.close();
        }
    }

     通过如上的比较,我们可以看出POST方法发送数据的时候将更加灵活,你可以发送二进制数据,甚至可以实现对象的序列化。而使用GET方式发送数据的时候我们只能把数据在URL中发送出去,如果参数过多则很不方便,还要受到URL长度的限制,因此在J2ME联网中我们推荐HTTP协议的POST方式。

2008年5月29日星期四

什么是XHTML?与HTML相比XHTML有什么特点?

  HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言,看起来与HTML有些相象,只有一些小的但重要的区别。本文简单介绍什么是XHTML,以及与HTML相比XHTML有什么特点。
  1、什么是XHTML?

  HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言,看起来与HTML有些相象,只有一些小的但重要的区别,XHTML就是一个扮演着类似HTML的角色的XML,所以,本质上说,XHTML是一个过渡技术,结合了XML(有几分)的强大功能及HTML(大多数)的简单特性。

  2000年底,国际W3C(World Wide Web Consortium)组织公布发行了XHTML 1.0版本。XHTML 1.0是一种在HTML 4.0基础上优化和改进的的新语言,目的是基于XML应用。XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。下面是W3C的HTML工作组主席Steven Pemberton回答的关于XHTML的常见基础问题。

  问:什么是XHTML?

  答:XHTML是一种为适应XML而重新改造的HTML。当XML越来越成为一种趋势,就出现了这样一个问题:如果我们有了XML,我们是否依然需要 HTML?为了回答这个问题,1998年5月我们在旧金山开了两天的工作会议,会议的结论是:需要。我们依然需要使用HTML。因为大量的人们已经习惯使用HTML来作为他们的设计语言,而且,已经有数以百万计的页面是采用HTML编写的。

  问:为什么XHTML 1.0相对HTML 4.0独立发展?

  答:并不是这样。XHTML恰恰就是HTML 4.0的重新组织,(确切的说它是HTML 4.01,是一个修正版本的HTML 4.0,只不过以XHTML 1.0命名发行。) 它们在XML里的解释会有一些必要的差别,但另一方面,它们依然非常相似,我们可以把XHTML的工作看作是HTML 4.0基础上的延续。


  问:XHTML 1.0如何实现XML标准?

  答:XHTML就是一种XML应用。它采用XML的DTD文件格式定义,并运行在支持XML的系统上。这里要感谢XML的Namespaces功能,浏览器制造商不需要再创造新的私有标签(tags),他们只需要在XHTML代码里包含XML代码片段,或者XML代码里包含XHTML代码片段。
  2、与HTML相比XHTML有什么特点?

  (1)XHTML 解决HTML语言所存在的严重制约其发展的问题。HTML发展到今天存在三个主要缺点:不能适应现在越多的网络设备和应用的需要,比如手机、PDA、信息家电都不能直接显示HTML;由于HTML代码不规范、臃肿,浏览器需要足够智能和庞大才能够正确显示HTML;数据与表现混杂,这样你的页面要改变显示,就必须重新制作HTML。因此HTML需要发展才能解决这个问题,于是W3C又制定了XHTML,XHTML是HTML向XML过度的一个桥梁。
  (2)XML 是web发展的趋势,所以人们急切的希望加入XML的潮流中。XHTML是当前替代HTML4标记语言的标准,使用XHTML 1.0,只要你小心遵守一些简单规则,就可以设计出既适合XML系统,又适合当前大部分HTML浏览器的页面。这个意思就是说,你可以立刻设计使用 XML,而不需要等到人们都使用支持XML的浏览器。这个指导方针可以使web平滑的过渡到XML。
  (3)使用XHTML的另一个优势是:它非常严密。当前网络上的HTML的糟糕情况让人震惊,早期的浏览器接受私有的HTML标签,所以人们在页面设计完毕后必须使用各种浏览器来检测页面,看是否兼容,往往会有许多莫名其妙的差异,人们不得不修改设计以便适应不同的浏览器。
  (4)XHTML是能与其它基于XML的标记语言、应用程序及协议进行良好的交互工作。
  (5)XHTML是Web标准家族的一部分,能很好在无线设备等其它用户代理上。
  (6)在网站设计方面,XHTML可助你去掉表现层代码的恶习,帮助你养成标记校验来测试页面工作的习惯。

2008年3月30日星期日

针对Yahoo进行网站优化

  我们来看看针对Yahoo就采取怎样的措施来保证获得较佳的排名。

  尽管有这样那样的传闻,但Yahoo!目前仍是第二大的搜索引擎,对其的影响力,任何网站都不能忽略。Yahoo!搜索排名的算法基于其在2002年购并的Inktomi技术,在那之前,Yahoo!使用的是其现在最大竞争对手 Google的引擎。正因为此,算法中的区别导致了很多在Google和MSN中排名很好的网站在Yahoo!排名不佳,反之亦然,那么,Yahoo的算法中有什么特殊的地方呢?

  严格说来,针对Yahoo的网站优化与针对其他搜索引擎并没有太大的不同,区别只是体现在细节上(注:对于目前Yahoo!与Yahoo中文的关系,我们并不清楚,不过按一般理解,Yahoo中文似乎并没有自已的专用算法,排名算法应基本与英文Yahoo一致,只不过加了些中国特色的修正,如3721,至于3721是不是影响SERP以及如何影响SERP就不得而知了。在此姑且认为二者使用的算法相同。)

HTML代码的优化
  与Google和MSN相比,Yahoo!对HTML代码的关注程度更高。很多测试表明,HTML文件中的错误,可能在Google或MSN中影响很小甚至几乎没有,不妨碍该页面出现在SERP的前端;但在Yahoo!中获得成功的几率要小得多。同样的,一个修正了HTML错误,完全通过W3C认证的网站或网页,在Google或MSN的变化很小几乎很难察觉,但在Yahoo!中却能发现排名有质的飞跃。

  在网页设计及制作中,针对 Yahoo!的优化主要包括,1、Yahoo!认为出现在HTML文件靠前(与网页显示时出现在上方的不是同一概念)的内容是重要的内容,这就要求我们要把页面的重要部分突出地HTML文件的头部;2、良好设计的网页大都具有精减的代码,如使用外置CSS文件、JavaScript文件等大大缩小HTML 的体积,再如少用或完全不用table也可以提高HTML代码的效率,这些都可以在很大程度上突出网页真正的内容部分。事实上,上述两项在针对其他搜索引擎优化时也是不可忽略的,只不过Yahoo!给予其更高的权重。

关键词密度
  因为搜索引擎的算法总是在调整,因此,给出具体的关键词密度肯定不现实,而且,关键词密度并不是一个放之四海而皆准的数字,很多情况下随行业的不同网站类型的不同,最佳的关键词密度也有所区别。因此,可行的办法便是分析网站对应关键词的SERP,分析位于前10位的网站或网页所使用的关键词密度,毕竟理想的关键词密度总是有规律的。通常,在Yahoo SERP中排在前10位的网站,根据关键词竞争性的不同,关键词密度除极个别的在0.5 to 1.0%(低端)和5.0 to 8.0%(高端)外,大部分在二者之间,这时候尽量将关键词密度设为稍低于最高值一般便可达到优化目的。

反相链接
  关于反相链接,在大的方面各家搜索引擎的规则肯定差不太多,在内容相关网站上使用关键词作Anchor Text的反相链接同样是Yahoo排名算法中至关紧要的一个因素。相比较而言,Yahoo!对反相链接的处理更类似于Google,与MSN的区别稍大。

  在针对Yahoo!的网站优化中,反相链接必须考虑的方面有:

  链接的质量

  与Google采用PageRank和TrustRank来判定反相链接质量的方法类似,Yahoo!也使用了类似的技术剔除无关的链接或Spam,同样,在Yahoo!的排名算法中,链接的质量要重于单纯的数量。

  在针对Google的网站优化中,判断链接的质量很多时候可以通过查看链接来源网站的PageRank来权衡,尽管Google Toolbar中显示的PageRank并不准确,但至少是一个相对简单的判断依据。那么,如何判断某个链接是否被Yahoo判定为高质量的链接呢?简单的办法是查看链接的来源网站是否出现在Yahoo!相同或相近关键词SERP靠前的位置,如欲更准确的判断,还需要查看该网站的Whois信息,Yahoo!一般认为可依赖的网站其域名注册时间至少满三年,另外还要看来源网站是否有足够数量的非交换链接,以及链接来源页面的出站链接数量,同一页面上出站链接数量越多,其影响力越小,等等。

  链接的位置

  同样地,链接出现在页面哪个位置也是必须注意的。简单地说,出现在HTML前端的链接比出现在后面的更有效;使用特殊格式(如粗体、斜体、不同于页面其他颜色或字体)的链接更有效。

  链接的Anchor text

  对链接的Anchor text,我们已多次讨论过,在Yahoo!中同样如此,不再赘述。

  单向链接

  双向的交换链接在Yahoo!中并不是完全没有效用,但其对排名的影响远远小于单向的、内容相关链接,因为很多情况下,这样的链接更接近于因内容优秀而获得的评价。

网站或网页存在时间的影响
  与Google的 sandbox 类似,Yahoo! 也使用类似的“Aging”机制:新建网站在运行初期,至少6个月甚至更长的时间,很难获得好的排名,即使在优化技术上运用得很完美;同时,新链接也不会很快起到其应有的对排名的促进作用,往往需要3到4个月其效果才会渐渐体现。不过,与Google相比,Yahoo!的这种“考验”机制,力度上稍小些。但这种对新网站和新链接的共同作用,往往导致很多新建网站(新网站的反相链接肯定都是新链接嘛)在8个月到1年的时间期限内很难针对竞争性强的关键词获得好的排名。

2008年3月18日星期二

AJAX基础

  AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。 国内通常的读音为“阿贾克斯”和阿贾克斯足球队读音一样。
  传统的web应用允许用户填写表单(form),当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单,然後返回一个新的网页。这个做法浪费了许多带宽,因为在前後两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求,应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。
  与此不同,AJAX应用可以仅向服务器发送并取回必需的数据,它使用SOAP或其它一些基于 XML的web service接口,并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少,结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成,所以Web服务器的处理时间也减少了。
  使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变过的信息。
  Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像 DHTML应用程序那样,Ajax应用程序必须在众多不同的浏览器和平台上经过严格的测试。随着Ajax的成熟,一些简化Ajax使用方法的程序库也相继问世。同样,也出现了另一种辅助程序设计的技术,为那些不支持JavaScript的用户提供替代功能。
  对应用Ajax最主要的批评就是,它可能破坏浏览器后退按钮的正常行为[4]。在动态更新页面的情况下,用户无法回到前一个页面状态,这是因为浏览器仅能记下历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙;用户通常都希望单击后退按钮,就能够取消他们的前一次操作,但是在Ajax应用程序中,却无法这样做。不过开发者已想出了种种办法来解决这个问题,当中大多数都是在用户单击后退按钮访问历史记录时,通过建立或使用一个隐藏的IFRAME来重现页面上的变更。(例如,当用户在Google Maps中单击后退时,它在一个隐藏的IFRAME中进行搜索,然后将搜索结果反映到Ajax元素上,以便将应用程序状态恢复到当时的状态。)
  一个相关的观点认为,使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中。该问题的解决方案也已出现,大部分都使用URL片断标识符(通常被称为锚点,即URL中#后面的部分)来保持跟踪,允许用户回到指定的某个应用程序状态。(许多浏览器允许JavaScript动态更新锚点,这使得Ajax应用程序能够在更新显示内容的同时更新锚点。)这些解决方案也同时解决了许多关于不支持后退按钮的争论。
  进行Ajax开发时,网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考虑。不给予用户明确的回应 [5],没有恰当的预读数据 [6],或者对XMLHttpRequest的不恰当处理[7],都会使用户感到延迟,这是用户不欲看到的,也是他们无法理解的[8]。通常的解决方案是,使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。
  一些手持设备(如手机、PDA等)现在还不能很好的支持Ajax;
  用JavaScript作的Ajax引擎,JavaScript的兼容性和DeBug都是让人头痛的事;
  Ajax的无刷新重载,由于页面的变化没有刷新重载那么明显,所以容易给用户带来困扰――用户不太清楚现在的数据是新的还是已经更新过的;现有的解决有:在相关位置提示、数据更新的区域设计得比较明显、数据更新后给用户提示等;
  对串流媒体的支持没有FLASH、Java Applet好;

  处理从服务器得到的数据
  有两种方式可以得到这些数据:
  (1) 以文本字符串的方式返回服务器的响应
  (2) 以XMLDocument对象方式返回响应

2008年3月3日星期一

http状态码一览表

最近做ajax开发需要和http协议打交道,记一些http状态码的含义:

1**:请求收到,继续处理
2**:操作成功收到,分析、接受
3**:完成此请求必须进一步处理
4**:请求包含一个错误语法或不能完成
5**:服务器执行一个完全有效请求失败

100——客户必须继续发出请求
101——客户要求服务器根据请求转换HTTP协议版本

200——交易成功
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到,但返回信息为空
205——服务器完成了请求,用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求

300——请求的资源可在多处得到
301——删除请求数据
302——在其他地址发现了请求数据
303——建议客户访问其他URL或访问方式
304——客户端已经执行了GET,但文件未变化
305——请求的资源必须从服务器指定的地址得到
306——前一版本HTTP中使用的代码,现行版本中不再使用
307——申明请求的资源临时性删除

400——错误请求,如语法错误
401——请求授权失败
402——保留有效ChargeTo头响应
403——请求不允许
404——没有发现文件、查询或URl
405——用户在Request-Line字段定义的方法不允许
406——根据用户发送的Accept拖,请求资源不可访问
407——类似401,用户必须首先在代理服务器上得到授权
408——客户端没有在用户指定的饿时间内完成请求
409——对当前资源状态,请求不能完成
410——服务器上不再有此资源且无进一步的参考地址
411——服务器拒绝用户定义的Content-Length属性请求
412——一个或多个请求头字段在当前请求中错误
413——请求的资源大于服务器允许的大小
414——请求的资源URL长于服务器允许的长度
415——请求资源不支持请求项目格式
416——请求中包含Range请求头字段,在当前请求资源范围内没有range指示值,请求
也不包含If-Range请求头字段
417——服务器不满足请求Expect头字段指定的期望值,如果是代理服务器,可能是下
一级服务器不能满足请求

500——服务器产生内部错误
501——服务器不支持请求的函数
502——服务器暂时不可用,有时是为了防止发生系统过载
503——服务器过载或暂停维修
504——关口过载,服务器使用另一个关口或服务来响应用户,等待时间设定值较长
505——服务器不支持或拒绝支请求头中指定的HTTP版本

==========================================================

英文版:

100:Continue
101:Switching Protocols
102:Processing

200:OK
201:Created
202:Accepted
203:Non-Authoriative Information
204:No Content
205:Reset Content
206:Partial Content
207:Multi-Status

300:Multiple Choices
301:Moved Permanently
302:Found
303:See Other
304:Not Modified
305:Use Proxy
306:(Unused)
307:Temporary Redirect

400:Bad Request
401:Unauthorized
402:Payment Granted
403:Forbidden
404:File Not Found
405:Method Not Allowed
406:Not Acceptable
407:Proxy Authentication Required
408:Request Time-out
409:Conflict
410:Gone
411:Length Required
412:Precondition Failed
413:Request Entity Too Large
414:Request-URI Too Large
415:Unsupported Media Type
416:Requested range not satisfiable
417:Expectation Failed
422:Unprocessable Entity
423:Locked
424:Failed Dependency

500:Internal Server Error
501:Not Implemented
502:Bad Gateway
503:Service Unavailable
504:Gateway Timeout
505:HTTP Version Not Supported
507:Insufficient Storage

2008年1月29日星期二

初识“HTTP”

当我们想浏览一个网站的时候,只要在浏览器的地址栏里输入网站的地址就可以了,例如:www.microsoft.com,但是在浏览器的地址栏里面出现的却是:http://www.microsoft.com,你知道为什么会多出一个“http”吗?

  一、HTTP协议是什么

  我们在浏览器的地址栏里输入的网站地址叫做URL(UniformResourceLocator,统一资源定位符)。就像每家每户都有一个门牌地址一样,每个网页也都有一个Internet地址。当你在浏览器的地址框中输入一个URL或是单击一个超级链接时,URL就确定了要浏览的地址。浏览器通过超文本传输协议(HTTP),将Web服务器上站点的网页代码提取出来,并翻译成漂亮的网页。因此,在我们认识HTTP之前,有必要先弄清楚URL的组成,例如:http://www.microsoft.com/china/index.htm。它的含义如下:

  1.http://:代表超文本传输协议,通知microsoft.com服务器显示Web页,通常不用输入;

  2.www:代表一个Web(万维网)服务器;

  3.Microsoft.com/:这是装有网页的服务器的域名,或站点服务器的名称;

  4.China/:为该服务器上的子目录,就好像我们的文件夹;

  5.Index.htm:index.htm是文件夹中的一个HTML文件(网页)。

  我们知道,Internet的基本协议是TCP/IP协议,然而在TCP/IP模型最上层的是应用层(Applicationlayer),它包含所有高层的协议。高层协议有:文件传输协议FTP、电子邮件传输协议SMTP、域名系统服务DNS、网络新闻传输协议NNTP和HTTP协议等。

  HTTP协议(Hypertext Transfer Protocol,超文本传输协议)是用于从WWW服务器传输超文本到本地浏览器的传送协议。它可以使浏览器更加高效,使网络传输减少。它不仅保证计算机正确快速地传输超文本文档,还确定传输文档中的哪一部分,以及哪部分内容首先显示(如文本先于图形)等。这就是你为什么在浏览器中看到的网页地址都是以“http://”开头的原因。

  自WWW诞生以来,一个多姿多彩的资讯和虚拟的世界便出现在我们眼前,可是我们怎么能够更加容易地找到我们需要的资讯呢?当决定使用超文本作为WWW文档的标准格式后,于是在1990年,科学家们立即制定了能够快速查找这些超文本文档的协议,即HTTP协议。经过几年的使用与发展,得到不断的完善和扩展,目前在WWW中使用的是HTTP/1.0的第六版。

  二、HTTP是怎样工作的

  既然我们明白了URL的构成,那么HTTP是怎么工作呢?我们接下来就要讨论这个问题。

  由于HTTP协议是基于请求/响应范式的(相当于客户机/服务器)。一个客户机与服务器建立连接后,发送一个请求给服务器,请求方式的格式为:统一资源标识符(URL)、协议版本号,后边是MIME信息包括请求修饰符、客户机信息和可能的内容。服务器接到请求后,给予相应的响应信息,其格式为一个状态行,包括信息的协议版本号、一个成功或错误的代码,后边是MIME信息包括服务器信息、实体信息和可能的内容。

  许多HTTP通讯是由一个用户代理初始化的并且包括一个申请在源服务器上资源的请求。最简单的情况可能是在用户代理和服务器之间通过一个单独的连接来完成。在Internet上,HTTP通讯通常发生在TCP/IP连接之上。缺省端口是TCP80,但其它的端口也是可用的。但这并不预示着HTTP协议在Internet或其它网络的其它协议之上才能完成。HTTP只预示着一个可靠的传输。

  这个过程就好像我们打电话订货一样,我们可以打电话给商家,告诉他我们需要什么规格的商品,然后商家再告诉我们什么商品有货,什么商品缺货。这些,我们是通过电话线用电话联系(HTTP是通过TCP/IP),当然我们也可以通过传真,只要商家那边也有传真。

  以上简要介绍了HTTP协议的宏观运作方式,下面介绍一下HTTP协议的内部操作过程。

  在WWW中,“客户”与“服务器”是一个相对的概念,只存在于一个特定的连接期间,即在某个连接中的客户在另一个连接中可能作为服务器。基于HTTP协议的客户/服务器模式的信息交换过程,它分四个过程:建立连接、发送请求信息、发送响应信息、关闭连接。这就好像上面的例子,我们电话订货的全过程。

  其实简单说就是任何服务器除了包括HTML文件以外,还有一个HTTP驻留程序,用于响应用户请求。你的浏览器是HTTP客户,向服务器发送请求,当浏览器中输入了一个开始文件或点击了一个超级链接时,浏览器就向服务器发送了HTTP请求,此请求被送往由IP地址指定的URL。驻留程序接收到请求,在进行必要的操作后回送所要求的文件。在这一过程中,在网络上发送和接收的数据已经被分成一个或多个数据包(packet),每个数据包包括:要传送的数据;控制信息,即告诉网络怎样处理数据包。TCP/IP决定了每个数据包的格式。如果事先不告诉你,你可能不会知道信息被分成用于传输和再重新组合起来的许多小块。

  也就是说商家除了拥有商品之外,它也有一个职员在接听你的电话,当你打电话的时候,你的声音转换成各种复杂的数据,通过电话线传输到对方的电话机,对方的电话机又把各种复杂的数据转换成声音,使得对方商家的职员能够明白你的请求。这个过程你不需要明白声音是怎么转换成复杂的数据的。