IBM首頁(yè)源代碼淺析 

一、瀏覽器兼容性 

    作為一個(gè)國(guó)際大公司的站點(diǎn)，保證能在不同瀏覽器下的可瀏覽性是必須考慮的，這點(diǎn)IBM的做法不得不令人佩服。它巧妙的利用一個(gè)ja;vascript(ibmcss.js)根據(jù)不同的瀏覽器選擇不同的樣式表，這也就是為什么我們直接打開(kāi)保存在硬盤(pán)上的IBM頁(yè)面不能看到用樣式表定義的原因。 
打開(kāi)ibmcss.js，分析一下代碼，我們就可以發(fā)現(xiàn)IBM一共設(shè)計(jì)了四個(gè)樣式表: ie1.css , ie6.css , r1.css , ns1.css 。這四個(gè)樣式表大部分都相同，主要的區(qū)別在于字體大小(font-size)的單位：ie6 里用%,r1里用px,ns1里用pt。下面是同樣的一條樣式在不同css里的定義： 

ie6.css: body { font-family: Arial, sans-serif; font-size: 78%; } 

r1.css :body,p,b,i,strong,em,dt,dd,dl,sl,caption,th,td,tr,u, blink,select, option,form,div,font,li { font-family: Arial, sans-serif; font- size: 12px; } 

ns1.css: body,dt,dd,dl,sl,caption,th,td,tr,select,option,form,font { font-family: Arial, sans-serif; font-size: 9pt; } 

而從對(duì)ibmcss.js里程序邏輯的分析可以得到下面樣式表和瀏覽器的對(duì)應(yīng)關(guān)系： 

r1.css : Macintosh IE4.0以上，Macintosh Netscape4.0以上，Netscape5.0以上， 
X11 Netscape5.0以上 (Xwindows for linux or unix,I guest ) 
ie6.css: Windows IE4.0以上， 
ns1.css: 其他操作系統(tǒng)Netscape4.0以上 
ie1.css: 其他操作系統(tǒng)IE4.0以上 

    我分別在Windows XP+IE6.0和Linux Rat hat 7.1+NS4.7兩個(gè)環(huán)境下測(cè)試了這四個(gè)樣式表，在IE6里四個(gè)樣式表 

     都可以正常顯示，只是字體大小略有區(qū)別；而在NS4.7里，用ie1.css和ns1.css定義的頁(yè)面字體模糊不清，而用 

r1.css和ie6.css顯示的頁(yè)面可以正常顯示。 

    同時(shí)，IBM也考慮到了部分瀏覽器不支持ja;vascript的情況，在ibmcss.js后緊跟了一句<NOSCRIPT><LINK href=”r1.css” type=text/css rel=stylesheet></NOSCRIPT>，對(duì)于不支持ja;vascript的瀏覽器將統(tǒng)一采用r1.css。不過(guò)這里有一點(diǎn)我不能理解的是為什么在head里面用了兩句同樣的<NOSCRIPT>語(yǔ)句，是為了保險(xiǎn)起見(jiàn)還是設(shè)計(jì)者沒(méi)有精簡(jiǎn)掉呢，希望大家能一起探討。 

二、規(guī)范全面的META內(nèi)容 

     作為一個(gè)規(guī)范的頁(yè)面，詳盡的META內(nèi)容是必不可少的，這一點(diǎn)IBM一直做得很好，我們可以回顧一下其99年頁(yè)面里的META內(nèi)容： 
<meta content=”ibm international business machines internet” name=”keywords”> 
<meta content=”http://www.ibm.com/” name=”alias”> 
<meta content=”webmaster@ www.ibm.com ” name=”owner”> 
<meta 
content=”The IBM corporate home page, entry point to information about IBM products and services” 
name=”description”> 
<meta 
content=”(PICS-1.1 “http://www.rsac.org/ratingsv01.html”; l gen true comment “RSACi 

North America Server” by “epc@ www.ibm.com “; for “http://www.ibm.com/”; on 

“1997.07.05T21:46-0500″ r (n 0 s 0 v 0 l 0))” 
http-equiv=”PICS-Label”> 
<meta 
content=”(PICS-1.0 “http://www.classify.org/safesurf/”; l gen true for 

“http://www.ibm.com/”; by “epc@ www.ibm.com “; r (SS~~000 1 SS~~100 1))” 
http-equiv=”PICS-Label”> 

今天的IBM頁(yè)面META內(nèi)容更是豐富，從下面的一些例子我們就可見(jiàn)一斑： 

1、基本信息 
<META http-equiv=content-type content=”text/html; charset=iso-8859-1″> 
<META http-equiv=Pragma content=no-cache> 
<META content=webmaster@ www.ibm.com name=Owner> 
<META content=”Copyright (c) 2001 by IBM Corporation” name=Copyright> 
<META content=us name=IBM.Country> 
<META content=index,follow name=Robots> 
<META content=public name=Security> 
<META content=Franklin/IPC name=Source> 
<META http-equiv=PICS-Label 
content=”(PICS-1.1 “http://www.icra.org/ratingsv02.html” l gen true r (cz 1 lz 1 nz 1 oz 1 vz 1) 

“http://www.rsac.org/ratingsv01.html” l gen true r (n 0 s 0 v 0 l 0) 

“http://www.classify.org/safesurf/” l gen true r (SS~~000 1))”> 

2、scheme 
<META scheme=rfc1766 content=en-us name=DC.Language> 
<META scheme=iso8601 content=2001-08-09 name=DC.Date> 

3、描述與關(guān)鍵詞 
<META 
content=”The IBM corporate home page, entry point to information about IBM products and services” 
name=Description> 
<META 
content=”The IBM corporate home page, entry point to information about IBM products and services” 
name=Abstract> 
<META 
content=”ibm,international business machines,internet,e-business,ebusiness,personal 

computer,personal system,e-commerce,ecommerce,pc,workstation,mainframe,unix,technical 

support,homepage,home page” 
name=Keywords> 

內(nèi)容詳盡全面，完全符合一個(gè)規(guī)范頁(yè)面的要求，這點(diǎn)我想是挺值得我們學(xué)習(xí)的。 

三、Web數(shù)據(jù)流分析 

作為一個(gè)國(guó)際大公司的站點(diǎn)，僅通過(guò)簡(jiǎn)單的點(diǎn)擊計(jì)數(shù)是遠(yuǎn)遠(yuǎn)不能達(dá)到營(yíng)銷目的所需的詳細(xì)程度，從下面的代碼我們大致可以猜測(cè)出IBM站點(diǎn)使用了Keylime Software公司的Web數(shù)據(jù)流分析方案（在隨后對(duì)Keylime Software公司網(wǎng)站訪問(wèn)中證實(shí)了這一點(diǎn)）： 

<SCRIPT language=ja;vascript type=text/ja;vascript><!– Keylime Software 09/16/2001var kl_version = “1.1.0”;var kl_startLoadTime = new Date();var kl_companyId = “23”;var kl_siteId = “77.78.0.774”;var kl_sessionCookieVisibility = “; domain=ibm.com”;var kl_sessionCookiePathVisibility = “; path=/”;//–></SCRIPT><SCRIPT language=ja;vascript1.2 src=”stats.js” type=text/ja;vascript></SCRIPT> 

引用: 

在電子商務(wù)早期階段時(shí)，Web 站點(diǎn)數(shù)據(jù)流分析通常不過(guò)是指在你的主頁(yè)上安裝計(jì)數(shù)器以及在一個(gè)外部日志文件上運(yùn)行簡(jiǎn)單的統(tǒng)計(jì)程序以記錄點(diǎn)擊率。但是，業(yè)界領(lǐng)導(dǎo)們很快意識(shí)到簡(jiǎn)單的點(diǎn)擊計(jì)數(shù)既不準(zhǔn)確也遠(yuǎn)未達(dá)到營(yíng)銷目的所需的詳細(xì)程度。因此，各公司開(kāi)始尋找更先進(jìn)的分析工具，這類工具可以提供誰(shuí)在訪問(wèn)公司W(wǎng)eb 站點(diǎn)以及訪問(wèn)者一旦進(jìn)入站點(diǎn)后將做些什么的全面信息。… 
一些ASP已經(jīng)開(kāi)始將基于服務(wù)的分析工具包括在他們提供的多種服務(wù)中，希望能減少一定的先期技術(shù)與財(cái)務(wù)負(fù)擔(dān)。像Keylime Software公司的i?Echoes這類解決方案按每月收費(fèi)的方式提供對(duì)用戶不同企業(yè)級(jí)分析工具的接入。在ASP模型中，你不必為硬件基礎(chǔ)設(shè)施或培訓(xùn)投資，程序可以立即運(yùn)行， 并且有時(shí)作為合同的一部分，你甚至可以獲得咨詢服務(wù)。不過(guò)，基于ASP 的軟件通常也存在缺點(diǎn)，如第三方將可以接觸到你嚴(yán)密防守的秘密。 … 

引自：《網(wǎng)絡(luò)世界》Web數(shù)據(jù)流分析超越點(diǎn)擊計(jì)數(shù) http://www.cnw.com.cn/cnw/2000/33/3312.asp 

更詳盡的信息可從Keylime Software公司的站點(diǎn)獲得： http://www.klsoft.com 

四、ejsmsp.js 

該js里包含了豐富的內(nèi)容，因?yàn)橛玫搅薙etCookie（），ReadCookie（）等函數(shù)，我想這個(gè)js的功能之一應(yīng)該是設(shè)置Cookie，以使網(wǎng)頁(yè)更有個(gè)性化，方便瀏覽者獲取想要的信息。從長(zhǎng)長(zhǎng)的鏈接列表我們可以感受到IBM為了方便瀏覽者而精心的考慮，而且在不同的頁(yè)面ejsmsp.js里的鏈接列表都不盡相同，真可謂用心良苦 

縱觀整個(gè)頁(yè)面的源文件，一共用了一個(gè)內(nèi)部ja;vascript和三個(gè)外部ja;vascript文件，每個(gè)ja;vascript都起了不可或缺的作用，但沒(méi)有一個(gè)是用來(lái)實(shí)現(xiàn)頁(yè)面動(dòng)態(tài)效果的，這正好印證了一段話：“dhtml是動(dòng)態(tài)html，動(dòng)態(tài)并不代表會(huì)移動(dòng)的像素。 這里的動(dòng)態(tài)指的是交互。 交互是web design與平面設(shè)計(jì)最主要的設(shè)計(jì)差別。 掌握dhtml的思想是至關(guān)重要的。”