IBM首頁源代碼淺析
一、瀏覽器兼容性
作為一個(gè)國際大公司的站點(diǎn)，保證能在不同瀏覽器下的可瀏覽性是必須考慮的，這點(diǎn)IBM的做法不得不令人佩服。它巧妙的利用一個(gè)ja;vascript(ibmcss.js)根據(jù)不同的瀏覽器選擇不同的樣式表，這也就是為什么我們直接打開保存在硬盤上的IBM頁面不能看到用樣式表定義的原因。
打開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)境下測試了這四個(gè)樣式表，在IE6里四個(gè)樣式表
都可以正常顯示，只是字體大小略有區(qū)別；而在NS4.7里，用ie1.css和ns1.css定義的頁面字體模糊不清，而用
r1.css和ie6.css顯示的頁面可以正常顯示。
同時(shí)，IBM也考慮到了部分瀏覽器不支持ja;vascript的情況，在ibmcss.js后緊跟了一句<NOSCRIPT><LINK href=”r1.css” type=text/css rel=stylesheet></NOSCRIPT>，對(duì)于不支持ja;vascript的瀏覽器將統(tǒng)一采用r1.css。不過這里有一點(diǎn)我不能理解的是為什么在head里面用了兩句同樣的<NOSCRIPT>語句，是為了保險(xiǎn)起見還是設(shè)計(jì)者沒有精簡掉呢，希望大家能一起探討。
二、規(guī)范全面的META內(nèi)容
作為一個(gè)規(guī)范的頁面，詳盡的META內(nèi)容是必不可少的，這一點(diǎn)IBM一直做得很好，我們可以回顧一下其99年頁面里的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頁面META內(nèi)容更是豐富，從下面的一些例子我們就可見一斑：
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ī)范頁面的要求，這點(diǎn)我想是挺值得我們學(xué)習(xí)的。
三、Web數(shù)據(jù)流分析
作為一個(gè)國際大公司的站點(diǎn)，僅通過簡單的點(diǎn)擊計(jì)數(shù)是遠(yuǎn)遠(yuǎn)不能達(dá)到營銷目的所需的詳細(xì)程度，從下面的代碼我們大致可以猜測出IBM站點(diǎn)使用了Keylime Software公司的Web數(shù)據(jù)流分析方案（在隨后對(duì)Keylime Software公司網(wǎng)站訪問中證實(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ù)流分析通常不過是指在你的主頁上安裝計(jì)數(shù)器以及在一個(gè)外部日志文件上運(yùn)行簡單的統(tǒng)計(jì)程序以記錄點(diǎn)擊率。但是，業(yè)界領(lǐng)導(dǎo)們很快意識(shí)到簡單的點(diǎn)擊計(jì)數(shù)既不準(zhǔn)確也遠(yuǎn)未達(dá)到營銷目的所需的詳細(xì)程度。因此，各公司開始尋找更先進(jìn)的分析工具，這類工具可以提供誰在訪問公司W(wǎng)eb 站點(diǎn)以及訪問者一旦進(jìn)入站點(diǎn)后將做些什么的全面信息。…
一些ASP已經(jīng)開始將基于服務(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ù)。不過，基于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)頁更有個(gè)性化，方便瀏覽者獲取想要的信息。從長長的鏈接列表我們可以感受到IBM為了方便瀏覽者而精心的考慮，而且在不同的頁面ejsmsp.js里的鏈接列表都不盡相同，真可謂用心良苦
縱觀整個(gè)頁面的源文件，一共用了一個(gè)內(nèi)部ja;vascript和三個(gè)外部ja;vascript文件，每個(gè)ja;vascript都起了不可或缺的作用，但沒有一個(gè)是用來實(shí)現(xiàn)頁面動(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)重要的。”
