6.30.2010

如何能讓網站配色方案更吸引人?

如今幾乎每個人都能擁有自己的網站,網站制作起來也方便了很多。如何更好的把握網站訪問者的喜好,為用戶提供一個可讀性更強的網站?這其中顏色就起到了相當大的作用。

顏色是否影響網站訪客?
幾年前網站還是奢侈品,而如今幾乎每個人都能擁有自己的網站,網站制作起來也方便了很多。但問題依然存在,那就是如何更好的把握網站訪問者的喜好,為用戶提供一個可讀性更強的網站?這其中顏色就起到了相當大的作用。

By SkySea Design

顏色對網站訪客有多大影響?
研究人員很早就發現顏色會對人的心靈產生很大影響,網站通過不同的配色方案,可以觀察是否對用戶的訪問有吸引力,特別是新用戶或用戶離開網站時。
而且更重要的一點,網站顏色影響的往往是潛意識。通過顏色可以讓用戶產生煩躁、快樂、興奮、無聊等情緒。
那麼如何能讓網站配色方案更吸引人?這裡有幾個配色建議
1,盡量使用網頁安全色,也就是自然界中存在的顏色,而非顯示器合成的非自然顏色。
2,網頁背景顏色與文字對比度要高,一般來說白色背景常會選擇黑色字體,當然這也不是絕對的,像深藍色、灰色也是網頁字體常用的色彩。
3,避免藍色與紅色,藍色與黃色,綠色/藍色與紅色這幾類顏色同時出現。因為這樣會很容易讓人感覺視覺疲勞
4,顏色使用要始終具有同一性,研究表明5種顏色是網站的極限,一般不要超過五種顏色。
5,盡量少用細小的字體或藍色表格。
6,有些顏色本身是很枯燥的,比如灰色,但配合一些橙色或亮色就會產生完全不同感覺,可以嘗試下。
7,可以利用留白來平衡網站中的顏色刺激
8,要始終保持顏色統一,這也是網站可讀性重要的方面。
顏色與人

不同年齡段的人對於顏色偏好是不同,可以針對您網站的用戶年齡特點來進行顏色搭配,比如:
老年人與青年人的顏色喜好
一定年紀的人更實用那些冷靜和克制色彩的網站,而年輕人更喜好生動與光明的色彩。
男人與女人的顏色喜好
男性更喜歡藍色、橙紅色與黃色。而女性更喜好紅色、藍色、黃色至橙色。此外女性被證明可以比男性看到更多的顏色。
國家地區與顏色

不同國家有自己的顏色喜好,特別是在一些國家某些顏色是不好的象征,這點對於設計師來說要格外注意。
比如在西方國家白色代表純潔,而在中國、日本、印度白色往往代表不幸。粉紅色在日本很受歡迎,而在印度或東歐國家則代表沒有男子氣概。
紫色與紅色在阿拉伯國家代表輕浮。而且對於猶太教、基督教、伊斯蘭教中最好也別用紫色。
此外藍色幾乎被所有國家都能接受,因此他是相對安全的顏色,同時藍色也是一個國際顏色。很多國際組織都使用過藍色。
關於顏色的討論可以有很多,但最重要的一點就是設計師要在平時的網站設計中不斷觀察總結,如果選擇正確的顏色也是考驗每個網頁設計師能力的時刻。

來源:www.tutu001.com

 

6.29.2010

以用戶為中心設計的標准

誰該做什麼。我主要講的是可用性和用戶體驗,因為我認為這是對於用戶問題(使用產品、系統和服務的所有的體驗)的最好的概括。

最近總有人問我關於數字設計社區的顯而易見的困惑:誰改做什麼。我主要講的是可用性和用戶體驗,因為我認為這是對於用戶問題(使用產品、系統和服務的所有的體驗)的最好的概括。

然而,其他一些機構把交互設計作為核心服務,這也讓我很不安,因為我認為他們提高了混淆客戶的風險。在我看來,這是非常簡單的。

ISO 9241-11國際標准是這樣界定可用性的:

在特殊的使用環境下,一個產品可以讓特殊的用戶使用來高效地、令人滿意地達成特殊的目的。

因此,好的可用性是優秀的用戶體驗的一部分,這是我們設計產品、系統和服務的目的。交互設計是我們設計過程的一部分。

最新公布的以用戶為中心設計的標准ISO 9241-11說:交互設計就是我們在系統和用戶之間設計任務和交互。生產設計解決方案(滿足用戶的需求)是非常重要的,以用戶為中心的設計步驟如下:

七個交互設計活動的標准界定(盡管只有他們中的一部分明確的稱之為交互設計):

制定更高水平的決定(舉個例子:初始設計概念、必不可少的效果)

識別任務和下一個任務

分配任務和下一步任務給用戶和其他部分的系統

鑒定交互項目的需求為了完成任務

確定和選擇適當的對話技術(請參看ISO 9241 parts 12 to 17

設計交互設計的順序和時間

設計用戶界面的信息架構,這個交互系統允許有效地使用交互項目。

當然,這樣的活動是不能分離的,我認為如果有很多不同的人參與其中,絕對清楚的界定用戶角色色是很困難的。交互設計技能貫穿以用戶為中心的設計過程是有價值的,幫助創造用戶容易理解和評估的可視化設計。

舉個例子,在最近的項目中,我們的交互設計師在參與項目的前期,為CMS(習慣於幫助制定的系統和從商業相關利益中哪裡獲得投資)創造了設計選擇的快速實體模型。

然而,保險提供者,交互設計腳本和有注解的保真線框圖都被創造出來以可視化的總結性結論,並且在回顧和測試過程中但當設計模板。

坦白說來,我確實不關心我們怎麼稱呼他,只要我們能幫助客戶研發或獲得可以有效地幫助他們的用戶的系統,但是我項這個也學可以幫助我們解釋我們做了什麼和為什重要,如果我們爭取達到為我們的服務用一個通用的描述。

學習更多…

網絡咨詢公司用戶體驗指南對於想尋找用戶研究專業知識的人來說,是一項重要的資源,有26個專門研究可用性和易用性的部門。集中於英國市場上,報告涉及到最近市場走勢,也包含為尋找供應商提供的有用的建議。

這些綜合的報告(原名叫可用性和易用性用戶指南)和那些非常希望保留和吸引網站用戶和客戶的公司的關聯度很高。

來源:Tom Stewart

6.28.2010

做網站和用戶交流時常用的一些語言

不管經營什麼事業,都應該花一些時間,從自己的同行身上學東西。
收集這些資料之前,本想給每篇文案寫點評論的,但是在他們的詞匯面前,感覺自己的思維很是蒼白,還是大家自己欣賞吧。

來看看同是做網站的人群,除了炫目的技術,還用了哪些華麗的詞匯:

趙清濤

與其他互動設計公司不同,
我們不炫耀技術,我們以孩童一樣無知的心去研究瀏覽者感受,
砸破僵硬的定式思維,把種種技術忘掉!
把技術藏起來,藏起來!
讓一切變的更簡單,更鮮活。

那個把資料堆砌到網上的時代過去了!
我們讓你的在線品牌形象活起來,
你的顧客需要的是簡單生動的溝通,
我們協助你以感性的力量,激起她的慾望!

那個呆板、僵硬、腐朽的網絡時代已經死了,
一個鮮活的、有生命和靈魂的網絡時代已經誕生了!

網站應該是獨一無二的,
就像你我一樣獨一無二!

你的網站應該是有生命的,他遺傳你的DNA,
他是活生生的!
有耳朵、
有眼睛、
有思想、
有魂!

eico design

clip_image001

衍藝

當客戶需要我們做一個網站時,我們知道,其實他要的並不是一個網站,而是一個與消費者分享的關於產品,關於品牌的故事。故事講的好不好聽,就是網站成不成功,能不能吸引用戶的標准。對於衍藝來說,什麼樣的網站才算一個成功網站?毫無疑問點擊率和停留時間是檢測的唯一標准。

替品牌講一個好聽的故事,就是我們一直在做的事情。

SHOWONE

我們認為優秀的設計,不只是形式,不只是視覺,不只是技巧,它更是一種超越的必然;是深詣企業或產品品牌、個性、定位溝通與傳達之後的行為必然。

SHOWONE在為您做的,不僅僅是一次設計,而是在與您一起,締造一個屬於您的品牌,我們的價值來自於我們協助您創造的價值。

正邦

我是品牌,我是這個領域的代名詞,永駐人們心田。我已站在了理想高地,閱盡巔峰,備受尊崇。我享受着和煦的日光,人們渴求的眼神,得到後迸發出真情、愜意的感受,我們彼此內心溫暖而滿足。

我有燦爛的遠景,用魅力的語言,一句話將我告知。我的使命是在你得到的基礎上,叱咤遠方。我的價值觀是光芒四射的太陽,本分踏實是我前行的步伐,在這麼多的不平等中,在追尋平等的價值觀。我們管理好我們激情四射的理想,同時在管理着你的夢想。

品牌是一陣風,風的衣裳,品牌是遊蕩在你我心中的理想。風的衣裳,成就光榮和夢想。

早晨設計

設計是一個尋找和發現的過程,尋找矛盾焦點發現解決的機會。調查和分析的本事,決定了我們發現目標的水平。

別在自己腦子裡找答案,那裡面沒有,答案在你的目標那裡,裝在你所要面對的消費者的腦子裡。所以這份工作不需要創意,它只需要有一雙會尋找的眼睛,一個會分析的腦子。

再見吧,創意。只要你去找,答案就在你的生活裡。

總結

我們最專業、XX年從業經驗、有質量、有效率、是您建設高品質網站的信心之選……等等等等,這樣的詞已經被用爛了,換個思路表述一下自己正在做的事情。

別再“具有豐富的國際客戶品牌設計管理服務經驗”了,繞口!

來源:崔凱的博客

6.25.2010

CSS教程:DIV元素與SPAN元素的區別

首先講兩個概念,一個是行內元素,一個是塊級元素。行業元素是指該元素標記的內容不不會對現在的結構造成影響,屬於應用樣式,輔助應用樣式表等作用;而塊級元素為一個塊狀,單獨占據一行,相當於在一個該元素前後各加一個換行。

兩者最明顯的區別是:DIV(division)是一個塊級元素,可以包含段 落、標題、表格,乃至諸如章節、摘要和備注等。而SPAN 是行內元素,SPAN 的前後是不會換行的,它沒有結構的意義,純粹是應用樣式,當其他行內元素都不合適時,可以使用SPAN。 塊元素相當於內嵌元素在前後各加一個
換行。其實,塊元素和行內元素也不是一成 不變的,只要給塊元素定義display:inline,塊元素就成了內嵌元素,同樣地,給內嵌元素定義了display:block就成了塊元素了。
具體步驟:

代碼示例:

1

2

3

4

5

<style> div,span{border:1px solid #000;margin:2px;} </style>

<div>div1</div><div>div2</div><span>span1</span><span>span2</span>

<br /> <div style="display:inline">div3</div> <div style="display:inline">

div4</div> <span style="display:block">span3</span> <span style="

display:block">span4</span>

提示:可以先修改部分代碼後再運行

技巧:有些朋友會說DIV是層標簽,其實HTML裡 是沒有層這個說法的,只不過是為了易於理解,Dreamweaver裡才這樣寫的,每個對象都可以 成為“層”,只需要給對象定義position屬 性(值為absolute或relavite)。例如,要讓圖片成為“層”,可以這樣寫代 碼:

1

<img src="demo.gif" style="posibion:absolute;left:20px;top:20px"/>

特別提示

本例代碼運行效果如圖所示,為了更能說明問題,這裡給塊元素和內嵌元素都加了1像 素寬的黑色實線邊框,從圖中可以看到,DIV默認為塊元素,定義display屬 性值為inline後以內嵌元素顯示,而SPAN默 認為內嵌元素,定義display屬性值為block後 則以塊元素顯示。

clip_image001[8]

SPAN標記有一個重要而實用的特性,即它什麼事也不會做,它的唯一目的就是圍繞你的HTML代 碼中的其它元素,這樣你就可以為它們指定樣式了。

6.24.2010

網站重構:論述XHTML2.0和HTML5.0

繼團隊的CSS3.0中文手冊在國內首發以後,最近風風火火的到處吹起HTML5.0和CSS3.0的春風;似乎在這瀏覽器互相調侃的年代,成就了一大堆業界茶余飯後的話題。

年前,google的chrome團隊來到公司做相關的交流,公司要求我做個前期討論方案。於是想了一下,裡面提到了三點:

  1. chrome對於12px以上字體大小支持的問題
  2. chrome的開發者工具雖有整合,但不及Firebug一樣的靈活好用。
  3. 對於網頁的解釋渲染是否應當配備兩種解釋其內核。

前面的兩點對於chrome本身更加較為有針對性,而第三點;我想更多的是針對於我們新時代的瀏覽器編寫程序員,以及我們那些擬定W3C標准的國外友人。

回顧XHTML2.0與HTML5.0之間的戰爭時間跨越了將近4年的時間(2002/8/5--2006/7/26),而爭鬥的結果當下而見是XHTML2.0敗退而走。

這場戰爭我們在XHTML2.0上面首先值得一說的是他思想當中留下來給我們的反思:(如看過Nicholas Chase大師的《The Web's future: XHTML 2.0》可點擊跳過前戲。

1、將如b、i等純粹關於表現性質的標簽而采用帶有語義化取而代之。(結構、行為、表現三者分離)

<i>強調</i>, <b>更強調</b>

<em>強調</em>, <strong>更強調</strong>

2、將img等內容圖片采用src屬性取而代之,並使用srctype進行類型定義。(使得外部資源未能加載時展示文字說明,解除alt的限制性)

<object>使用對象引入蘋果的介紹音頻</object>
<img src="apple.png" alt="這是一張蘋果的圖片" />
<p>這是一段蘋果這種水果的說明文字。</p>

<p src="apple.mp3" srctype="audio/x-mpeg">
<span src="apple.png" srctype="image/png">這是一張蘋果的圖片</span>
這是一段蘋果這種水果的說明文字。
</p>

3、將“沒層級性”的文章采用<h>、<p>與<section>的組合取而代之。(使用模塊化的大局觀思維進行編碼)

<html>
<head>
  <title>網頁模塊化</title>
</head>
<body>
  <h1>網頁模塊化思維</h1>
  <p>2010年v2.0版本</p>
  <h2>什麼是模塊化?</h2>
  <p>模塊化是指解決一個複雜問題時自頂向下逐層把軟件系統劃分成若幹模塊的過程。每個模塊完成一個特定的子功能,所有的模塊按某種方法組裝起來,成為一個整 體,完成整個系統所要求的功能。</p>
  <h3>什麼是前端的當中的模塊?</h3>
  <p>頁面當中的每一個有獨立內容並且能賦予標題命名的片段。</p>
  <h2>為什麼要做模塊化?</h2>
  <p>多人協同開發的同時能有一部分總體把控,但是每個人又可以獨立的處理自己部分的代碼,同時不會幹擾到其他的成員的代碼,高度提升效率。修改時只需要處理獨立的需要修改的模塊,對其余模塊不會影響;出錯時定位到具體模塊,直接對於這一塊進行版本回滾。高度降低風險。</p>
  <h2>怎麼做模塊化?</h2>
  <p>先按照主內容再細化內容兩種方式分離出區塊,由PM進行命名規則約定,分派至各人手中進行代碼編寫。最後由PM進行代碼片段合並。</p>
  <h2>模塊化需要注意什麼?</h2>
  <p>公共部分的代碼權限需要回歸至PM手上管理;允許代碼階段性的臃腫,定期進行公共部分的版本整合。</p>
</body>
</html>

<html>
<head>
  <title>網頁模塊化</title>
</head>
<body>
  <section>
    <h>網頁模塊化思維</h>
    <p>2010年v2.0版本</p>
    <section>
      <h>什麼是模塊化?</h>
      <p>模塊化是指解決一個複雜問題時自頂向下逐層把軟件系統劃分成若幹模塊的過程。每個模塊完成一個特定的子功能,所有的模塊按某種方法組裝起來,成為一個整 體,完成整個系統所要求的功能。</p>
      <section>
        <h>什麼是前端的當中的模塊?</h>
        <p>頁面當中的每一個有獨立內容並且能賦予標題命名的片段。</p>
      </section>
    </section>
    <section>
      <h>為什麼要做模塊化?</h>
      <p>多人協同開發的同時能有一部分總體把控,但是每個人又可以獨立的處理自己部分的代碼,同時不會幹擾到其他的成員的代碼,高度提升效率。修改時只需要處理獨立的需要修改的模塊,對其余模塊不會影響;出錯時定位到具體模塊,直接對於這一塊進行版本回滾。高度降低風險。</p>
    </section>
    <section>
      <h>怎麼做模塊化?</h>
      <p>先按照主內容再細化內容兩種方式分離出區塊,由PM進行命名規則約定,分派至各人手中進行代碼編寫。最後由PM進行代碼片段合並。</p>
    </section>
    <section>
      <h>模塊化需要注意什麼?</h>
      <p>公共部分的代碼權限需要回歸至PM手上管理;允許代碼階段性的臃腫,定期進行公共部分的版本整合。</p>
    </section>
  </section>
</body>
</html>

4、將原有的<ul>或者<ol>濫用的導航列表菜單使用<nl>取而代之。(這裡前提是列表都最好都有個說明的原則)

<h5>導航菜單</h5>
<ul>
  <li><a href="index.html">首頁</a></li>
  <li>
    <h6><a href="#">音樂庫</a></h6>
    <ul>
      <li><a href="cn.html">華語</a></li>
      <li><a href="jk.html">日韓</a></li>
      <li><a href="eu.html">歐美</a></li>
    </ul>
  </li>
  <li><a href="bbs.html">論壇</a></li>
</ul>

<nl>
  <label>導航菜單</label>
  <li href="index.html">首頁</li>
  <nl>
    <label>音樂庫</label>
    <li href="cn.html">華語</li>
    <li href="jk.html">日韓</li>
    <li href="eu.html">歐美</li>
  </nl>
  <li href="bbs.html">論壇</li>
</nl>

5、有上例當中的“無處不在的鏈接”。(將多余的不必要的標簽去除)

當然,明眼人一看就能看出來是來自Nicholas Chase大師的《The Web's future: XHTML 2.0》裡面談及的內容(針對最後一份,HTML5.0的草案有所更新)。他的文章裡面有一一的解釋好處在於哪裡,我這裡就不做一一的解釋了。

OK,或者這個前期鋪墊過於太長了;我們速度回歸一下主題。諸如上述我們提到的XHTML2.0的幾大優點均可以在新的HTML5.0的草案當中找到同樣的配同。不過,Twinsen一直認為XHTML是HTML與XML的交集(當然也可以看作業界常說的是一個過渡產品);XHTML應當是一種以內容以及信息架構為核心的類數據庫框架(即XHTML可作為單純表現,而其修飾外觀在於CSS;另一方面又可以像XML一樣作為數據被引用;)。隨後在Jeremy Keith的《Misunderstanding Markup》《標記語言之亂》(翻譯)一文當中我們可以看到了一個新的思路。Jeremy用牛奶比喻HTML4.0,而用奶酪比喻XHTML1.0,再用豆奶比喻XHTML2.0;這裡Twinsen再放膽的將HTML5.0比喻成酸奶。這裡大家就可以想象,奶酪和酸奶是來自於牛奶提煉與乳酸菌發酵作用(XHTML1.0與HTML5.0來自於HTML4.0的提煉與發酵),而豆奶卻有本質上的差別(XHTML2.0從成分而言與三者都毫無關系),當然這裡不同味道的酸奶也是加入了味料(canvas)等新的元素;這樣就可以很清晰的將幾種語言標准作一個重新的梳理。而Twinsen要強調Jeremy的文章當中也有提到的HTML與XHTML的區別:

  1. 所有標簽必須進行閉合(或自閉合)
  2. 屬性必須使用引號括起來
  3. 嚴禁標簽進行錯位嵌套
  4. 標簽屬性統一采用小寫

可能Jeremy走了一種比較委婉的技術引導方式;但也許他沒有來到中國,意識到中國網站重構的歷史以及發展。中國有一句現代俗話:“一個中國人是一條龍,一群中國人是一條蟲。”而這句從中國最有大志的魯迅先生開始,一直思維流傳至今。我們可以回想撥號上網的年代,Twinsen從那時走過來;看到的是一堆混雜着CGI的HTML3.0,然後是混雜着Table和ASP或PHP的HTML4.0。時代一直延續到了阿捷的出現,網站重構一書配同那個讓無數中國互聯網Boss都看過的PPT;這徹底顛覆了過往的思維,引導了一個新的潮流。在他們的帶領下,人們以通過標准驗證為榮;每一個網站的下方都要出現“Valid XHTML 1.0 Strict”。而這段標記的真正意義又是多少人能夠明白呢?如同佛洛伊德說的:“人們的戀母情結最後會演變成為一種偶像崇拜。”。也就等同於毛爺爺,還有後面的春哥的出現,阿捷成為了一代的偶像;但可悲的是阿捷激流勇退的走出了重構的世界。在這個時候很多新進的重構工程師加入,他們開始質問;還有一部分老的重構工程師開始迷茫。中國開始流傳了一個不要為了過標准驗證而做頁面的說法,接着就開始弄虛作假(標記錯亂照樣用XHTML1.0嚴格型的doctype)。從偶像崇拜,演變為跟風,到後面的弄虛作假。這當然存在它的歷史必然性和偶然性。

此時我們也不妨引用Twinsen的第一偶像的一些話來看看我們自身:

引用內容
茅於軾談中國房價
我們現在大家的議論就是房價高,這個也是事實,房價為什麼高?我覺得有它是需求拉動,不是成本推動;不是因為成本高。什麼是需求拉動呢?就是很多人願意買,你價格貴他也買,這就是需求拉高。大家知道經濟學裡頭,不問你買不買房,是問你嫌不嫌貴。社會學用問卷的辦法,經濟學用市場的行為的考核,你盡管說貴你又掏錢買了,就說明你不嫌貴,你嫌貴就不買了。

大家可以算算,IE6多大,FF多大,CH多大,OP多大,SA多大……;全都清清楚楚地,根本不需要質疑。我們天天的討厭IE6,但是我們還在做IE6的兼容。那是不是可以說明你根本沒有討厭IE6。從技術思維,這是徹底矛盾的;因為這裡沒有宏觀調控,是需求拉動IE6的存活,而並非成本拉動IE6的存活。

引用內容
茅於軾談誰妨礙了我們致富?
——你跑步追上一輛公共汽車,可是剛要邁步上車時售票員把車門關上,按鈴啟動,揚長而去;
——你寫信時忘了寫上對方的郵政編碼,雖然你知道這個編碼;
——你不知道郵政編碼,因而沒有寫,結果信被郵局退了回來;
——馬路上有人吵架,大家駐足觀望,抱着無窮的興趣,必欲窮其所以才肯走;
——紅燈搶行,十字路口亂作一團,彼此擠得動彈不得;
——警察把亂設攤位的小販的貨物掀翻在地,甚至把小販的三輪板車扔上卡車拉走;
——開會時間某人未到,大家等上十幾分鐘。
……
這些現象是我們每天能見到的,已經司空見慣,誰也沒有想到它們之間有什麼關系。但是從經濟學家的眼光看來,這些現象是不利於中國發展的重要原因。
從經濟學的基本觀點來分析,窮是因為許多生產潛力不能發揮,因為人們的勞動沒有用在生產上,甚至用在了抵消別人勞動成果的努力上;更因為各式各樣的浪費普遍存在,耗掉了社會巨大財富,可是每個人對此又無能為力。

還有另外的總結性的很經典的一段。

引用內容
茅於軾談誰妨礙了我們致富?
它並不屬於法律管轄的範圍,人們這樣做並不犯法,甚至也談不上是道德問題,可是大量這類事件的最終結果是不利於社會發展的。這類事情的起因,責任在於我們每個老百姓,不論你是一名售貨員、司機、教師、電話接線員、政府辦事員,改變一下你辦事的原則都可能使社會 的財富有所增加,當每個人都這樣想時,國家就富起來了,你所支付的同樣的勞動就會得到更高的報酬。

你們這樣的做WEB,並不會出錯,甚至談不上讀取不了,但是大量這類事件的最終結果是瀏覽器就要為了你的標簽沒有封口,屬性沒有寫雙引號;而去編寫更加累贅的代碼,耗費更大量的CPU運算。綜上三段引用所述,大家是否明白你所天天討厭的IE6為什麼會這麼大?為什麼會至今還存在?都是我們——這些網站重構人員一手一腳造成的!!

回過頭來看,文章的標題叫《走有中國特色的網站重構道路》。RMB升值,中國的綜合國力提升,全世界都在往中國靠攏。而HTML5.0的誕生,他又回歸到了HTML4.0擊敗HTML3.0的年代,一個新技術誕生的年代,一個宣揚自由應用的年代;在中國無數剛出道的“頁面仔”又會在這樣的年代興風作浪(200塊錢建站、直接fireworks切圖生成頁面……);而此時,我們一直崇拜的FF、CH、OP、SA……是否又要像IE6一樣走回老路子呢?然後我們是否也是要同樣的開始討厭和憎恨他們呢?而此過程我們作為一個綜合國力的強國是否在這個時候應當不再是“一條蟲”?

當然Twinsen不是單單的提出質疑和批判,更不是要反對HTML5.0;我們可以想一個較為合乎常理的解決方案:

  1. 自身使用XHTML的要求(前面說的4點)來編寫HTML5.0。
  2. 推薦瀏覽器使用雙解析內核,一個給標准頁面的,一個給非標准的。(當非標准的頁面使用標准的doctype時,解析給他錯位或者直接關閉或不解析;同時這個也是我給chrome團隊的建議。)
  3. 教導你身邊每一個人,維持標准的目的和重要性。
  4. 時刻銘記你不是一個“頁面仔”,是一個重構工程師;或者更進一層,你在影響人類信息化社會的發展。

也給大家帶來一個疑問,沒有經過“ISO9002”驗證的產品你敢用麼?那麼沒有經過“W3C”驗證的網頁呢?那驗證又是為了什麼呢?(感謝一直以來教導我ISO9000體系重要性的卿姐)或者我們再設想一下你出差的時候,酒店的網線接口不是RJ45,然後你插不進去上不了網(每個瀏覽器都有對CSS3的私有屬性);再或者酒店的網線接口是一排,分別對應RJ42、RJ43、RJ44、RJ45、RJ46……從門口一直布線到窗台(瀏覽器為了兼容多種雜亂頁面帶來的代碼臃腫)。

末了,我引用Jeremy文章的一些話:“只要你願意,HTML5.0馬上可以變成XHTML5.0”;“XHTML2.0翹辮子了,XHTML和HTML5才是王道。”。

來源:twinsenliang.net

6.23.2010

淘寶聯盟稱給站長的分成已超過200萬元

6月17日下午消息,淘寶聯盟今日披露了上線兩個月來的一些運營數據,其中分給站長的分成已超過200萬元,比兩個月前翻了一番。淘寶預計今年將向站長共分成10億元。

淘寶聯盟的相關負責人今日下午披露,淘寶聯盟每天的搜索量突破3000萬,月度活躍推廣者有40萬,每天調用淘寶API(開放數據接口)超過2億次。淘寶稱,其付給淘寶聯盟的分成比兩個月前翻了一番,達到了200萬元。淘寶預計今年付給站長的分成將達到10億元。

作為中間機構,淘寶將廣告主(淘寶賣家)90%的廣告費作為分成分給媒體(主要是站長),自己留下10%作為技術服務費。

淘寶聯盟的主要業務是淘寶客,這和傳統的廣告模式不同,類似一種分銷渠道(可以簡單理解為按效果付費的CPS廣告),淘寶賣家通過淘寶客在個人網站上投放廣告,按照成交金額的一定比例作為傭金付給淘寶,淘寶留下10%的技術服務費,剩下的90%分給站長們。(熊立)

來源:網頁教學網

設計公司Web.com以1.35億美元收購Register.com

北京時間6月18日消息,據國外媒體報道,網絡主機和設計公司Web.com周四宣布,該公司將以1.35億美元的價格收購域名注冊服務商Register.com。

Web.com表示,公司將向Register.com支付2000萬美元現金,並承擔後者1.1億美元的債務和500萬美元的賣方票據,交易總額將達到1.35億美元。收購Register.com,將有助於補充Web.com的現有服務,給予該公司向更多客戶銷售服務的機遇。Web.com還表示,在收購完成之後,公司的付費用戶數量將超過100萬人,在美國和加拿大擁有超過1100名員工。

Web.com稱,此交易將使公司每年的支出減少1000萬美元。該公司將在不久之後對公司業績預期進行調整。

在今年2月份,Register.com公司曾遭到百度起訴,百度在訴文中表示,黑客正是借助Register.com的“幫助”才得以成功非法侵入百度的賬戶,致使網站遭攻擊長達五個小時並損失數百萬美元。

Web.com股價周四上漲3%,報收於3.84美元。

Web.com簡介:

Web.com是全球領先的自助式網站開發工具,網絡營銷、電子商務和技術解決方案提供商,能夠讓中小企業開發和維護網站。Web.com提供了全方位的網絡服務,內容包括網絡營銷和廣告、本地搜索、搜索引擎營銷、搜索引擎最優化、潛在客戶開發流程、家庭承包人特殊流程、網站設計和推廣、標識與品牌開發、電子商務解決方案等。截至2009年12月31日,Web.com擁有超過27.5萬用戶。

Web.com創建於1997年,至2004年,該公司共獲得了6500萬美元風險投資。2005年11月,Web.com在納斯達克市場進行了首次公開招股(IPO),並成功募集到6800萬美元資金。通過IPO,Web.com擁有了充足的資金在市場上展開並購。

6.22.2010

國內比較購物站點和國外比較購物類

目前來看,三類網站在:綜合類搜索引擎開始的垂直業務;垂直搜索引擎;社區型的比較購物網 站。而采用的模式也包括:聚合點評、用戶點評、點評的同時還有返點等。

純掃站愛好,收集了一些比較購物(購物搜索)相關的網站。目前來看,三類網站在:綜合類搜索引擎開始的垂直業務;垂直搜索引擎;社區型的比較購物網 站。而采用的模式也包括:聚合點評、用戶點評、點評的同時還有返點等。

一、搜索引擎類

1、Google Shopping:(http://shopping.google.com) 中文:(http://www.google.cn/products)

2002年Google推出了一個購物搜索引擎Froogle,可以搜索諸多網站上正在出售的商品信息,2007年4月更名為Products Search,2009年5月中文版穀歌購物上線。目前,英文版由Google爬蟲抓取和商家向Google Base提交數據完成,而中文版只能由爬蟲抓取。Google目前采用了比較購物+聚合點評的形式。

2、Bing Shopping:(http://www.bing.com/shopping)

2009年6月,Bing搜索上線,其“決策引擎”瞄准了4大領域:購物、旅遊、健康以及本地。Bing購物搜索采用了比較購物+購物返點的形式。

3、Ciao:(http://www.ciao.co.uk )

目前其美國站點已經收歸微軟,整合到Bing Cashback中,不再提供評論付費服務,其他國家的網站工作正常。Ciao采用了比較購物+購物點評+購物返點(寫點評付費)的形式。

4、Yahoo Shopping:(http://shopping.yahoo.com) 中文:已死(http://gouwu.cn.yahoo.com)

Yahoo旗下的購物搜索,2005年曾推出中文版,目前已無法訪問。Yahoo Shopping采用了比較購物+購物點評的形式。

5、有道購物:(http://gouwu.youdao.com)

網易於2009年1月推出,9月開始有道購物加入返現功能。有道購物采用比較購物+聚合點評+購物返點的形式。

6、新浪愛問:(http://gouwu.iask.com)

新浪與2010年推出。目前處於beta版,只提供價格比較功能。

7、QQ購物搜索:(http://soso.fanli.qq.com)

2009年8月騰訊推出QQ返利,2010年騰訊借助SOSO推出購物搜索,目前只提供圖書與數碼家電類搜索。SOSO購物搜索采用了比較購物+返 點的形式。

8、便宜否:(http://pianyifou.com)

創建與2006年3月,目前與淘寶及Bing合作,專注與淘寶商品搜索與淘寶返利。采用了比較購物+返點的形式。

二、國外比較購物類

1、Shopping.com:(http://www.shopping.com)

創建於1999年,由兩個部分組成,一個是購物搜索引擎DealTime,另一部分是消費者評論和排名平台 Epinions,2003年4月兩個部分都合並在Shopping.com網站中,2005年 8月,Shopping被ebay以6.2億美元收購。05年開始居美國比較購物搜索引擎之首。采用了比較購物+購物點評的形式。

2、epinions.com:(http://www.epinions.com)

被並入到Shopping中。

3、bizrate.com:(http://www.bizrate.com)

1996年成立,到2004年初,已經擁有超過40000個在線購物網站的 3000多萬條產品索引。Bizrate的強項在於其點評系統,同時提供優惠券。采用了比較購物+購物點評+優惠券的形式。

4、smarter.com:(http://www.smarter.com)

其 母公司是MeziMedia,2001年他的第一個網站CouponMountain.com誕生後,就迅速吸引了成千上萬的用戶上網尋找產品的信息。 2004年Smarter.com上市,2005年開通中文站和日本站,目前已經覆蓋了40多個國家

5、pricegrabber.com:(http://www.pricegrabber.com)

6、mysimon.com:(http://www.mysimon.com)

7、pricescan.com:(http://www.pricescan.com)

8、kelkoo.co.uk:(http://www.kelkoo.co.uk)

9、become.com:(http://www.become.com)

10、dealnews.com:(http://dealnews.com)

11、dealcatcher.com:(http://www.dealcatcher.com)

12、cnet reviews:(http://reviews.cnet.com)

13、nextag.com:(http://www.nextag.com)

14、calibex.com:(http://www.calibex.com)

15、pricewatch:(http://www.pricewatch.com)

16、best-price.com:(http://www.best-price.com)

17、shop-com.co.uk(http://www.shop-com.co.uk)

18、Shopzilla:(http://www.shopzilla.com)

與 2005年被媒體公司E.W.Scripps以5.25億美元收購。采用比較購物+點評的模式。

三、國內比較購物站點

1、易購比價:(http://bi.egou.com)

2、51比購網:(http://www.51bi.com)

3、聰明點:(http://www.smarter.com.cn)

4、智購網:(http://www.zhigou.com)

5、愛比網:(http://so.aibiwang.com)

6、頂九網:(http://www.ding9.com)

7、友買網:(http://www.uobuy.com)

8、特價王:(http://www.tejiawang.com)

9、迅購網:(http://www.xungou.com)

10、一兜網:(http://www.yeedou.com)

11、比價網:(http://www.beargoo.com.cn)

12、價格比較網:(http://www.jiage.cc)

13、無覓處:(http://www.wumichu.com)

14、丫丫比較購物:(http://www.askyaya.com)

15、大拿網:(http://www.danawa.com.cn)

16、購龍網:(http://www.goulong.com)

17、議價網:(http://www.yijiawang.net)

18、百貨網:(http://www.baihuo.com)

19、O蜜網:(http://www.omiw.cn)

20、一比二購:(http://www.1b2g.com)

21、麥芽購物搜索:(http://www.5maiya.com)

22、點評狂:(http://www.testfreaks.cn)

23、購靈:(http://www.gouling.com)

24、好圖書:(http://www.haotushu.com)

25、琅琅比價:(http://www.langlang.cc)

26、奧比網:(http://www.ob1b.com)

08年9月,中國新蛋推出新蛋比較網站NeweggPortal(www.NeweggPortal.com),後啟用該新域名

W3C Web應用工作組:HTML5應用的下一步

現在的HTML5就像當年嶄露頭角時的Ajax,有人在做,但不知道叫它什麼。最近,蘋果在HTML5上大做文章,而著名的Web設計師Eric Meyer則提出了Web Stacks的概念。Alex Kessinger是Yahoo的一名前端工程師,本文是他對HTML5應用現狀與前景的思考。

開源模式帶來轉變

O’Reilly創始人,TimO’Reilly,一位開源的支持者,曾在《Open Source Paradigm Shift》中如是說:

"IBM對個人電腦設計的商品化使利潤從硬件轉移到軟件這一層面,而開源將帶來新的財富"

價值在不同的層面轉移,HTML5將成為新的層面,商品的價值在下降,現時的瀏覽器已經成為商品,但這並沒有問題,只要它們都遵守標准。人們說,我們可以將操作系統置入瀏覽器中,但這行不通,如果我們可以從過去的經歷中學到些什麼,那就是,不能簡單照抄過去的模式,好比廣播到電視的變遷,你不能簡單地在一個播音員面前放台攝像機完事,將操作系統置入瀏覽器未必比HTML5離線應用本身更有價值。

發布渠道的重要

諸如蘋果應用商店,Android應用商店一類的渠道將成為主導,另外,一些新的,象Valve遊戲渠道,Netflix電影渠道一類的東西將會出現,在”雲“時代,這些發布渠道將像桌面時代的操作系統一樣用來對用戶進行組織和歸類。

我們是如何到達現在這個階段的?

有兩個關鍵的因素。

感謝Web標准

盡管瀏覽器市場並不統一,但至少他們都運行HTML,JavaScript和CSS。當我們希望通過Web推出一些東西的時候,我們知道,無論如何,用戶都能看到,然而你能想象人們都自己定義Web時的情景嗎,假如有人不使用HTTP協議,或者不使用HTML,那才是世界的末日。W3C一類的組織讓各個瀏覽器廠家都保持同一個方向。

還好,我們並沒有很多渲染引擎

瀏覽器並不好做,數十億的網頁,參差不齊的代碼,這些東西讓獨立開發者沒有機會單獨設計瀏覽器,因此,有能力設計瀏覽器的始終是那麼一小撮廠商,事實上,時至今日,我們只有四種主要的瀏覽器渲染引擎,Trident(IE),Gecko(Mozilla,Firefox),WebKit(Chrome,Safari),以及Presto(Opera),而眾多瀏覽器都是建立在這些渲染引擎之上的。這意味着,不管在什麼樣的設備上,我們不用太擔心它使用什麼樣的瀏覽器,不管什麼設備,只要它有一個瀏覽器,就有一個可以運行HTML5的環境。

標准何日面世?

關於HTML5成為標准的時間,IanHixie的說法最受認可:

“根據估計,HTML5直到2022年才會形成W3C推薦標准”

然而,雖然標准的形成尚待時日,但瀏覽器廠商已經在實現各種HTML5功能。

功能探測vs瀏覽器探測

如果你是開發者,你可以使用那些高級功能,但需要進行功能探測並提供漸進式設計。坊間有大量的功能探測庫,如Modernizer,另外,Mark Pilgrim有一個清單,它可以讓你探測任何功能。

離線API

離線API是一切HTML5應用的基礎,不單單是離線數據的事,對開發者來說,擁有本地存儲(local Storage)自然很好,但如何讓程序完全離線運行?Application Cache是答案。如果不能離線保存源文件和數據,我們就無法實現離線的HTML5應用。

我們目前有幾種離線存儲機制,簡單的如localStorage和SQL存儲引擎,已經有一些瀏覽器在支持了,而最新的明星是IndexedDatabase,它得到了所有主流瀏覽器支持。這些離線保存應用和數據的能力,是HTML5的基礎,目前,Webkit,Firefox已經可以實現,而IE9也即將實現。即時IE9的支持還需要等待,想一下,最需要離線應用的場合是哪裡,自然是智能手機和上網本,智能手機多數都是用Webkit。

W3C Web應用工作組:HTML5應用的下一步

W3CWebApps標准已經做了大量工作,包括API及HTML5 Web程序細則。

HTML5應用的打包部署HTML5 apps–QuirksBlog博客文章中說,"對於本地/離線HTML5應用,W3C Widget packaging and configuration是首選機制,並將成為事實標准,很多廠商已經開始對之進行實現。W3C Widgets支持任意平台的Vodafone S60和Samsung手機,Opera桌面與移動瀏覽器,Bolt瀏覽器以及Windows Mobile6.5。BlackBerry也支持,不過需要特殊的Java包。"這些都是標准,本質上講,如果你有一個HTML5應用,它就會包含HTML,CSS,以及JS,這些標准只不過偶是幫助開發者將他們的程序打包發行,如果你熟悉PEAR,它們是很相似的概念。你可能需要一些元數據,告訴系統你的程序是如何打包在一起的,在支持這些標准的平台上,你就可以保證你的用戶可以順利運行這些程序。

其它

HTML5還有更多API可以幫助開發者創建應用,這些API可以讓你的程序訪問諸如本地文件,攝像頭,SOCKET通信服務,以及硬件動畫加速等。這些API僅僅是開端,這樣的API後期會越來越多。

HTML5程序可以應用在哪裡?

當然是瀏覽器,如果一個設備擁有一個瀏覽器或渲染引擎,而且這個引擎是現代引擎,它就可以運行HTML5程序。HTML5程序會應用在以下幾種場合。

桌面

如果你擁有一個符合Web標准的瀏覽器,就可以運行HTML5應用。桌面仍然很重要。

指定站點瀏覽器

諸如Gmail一類的站點可以看做一個應用,使用專門的瀏覽器運行,這樣的瀏覽器沒有地址欄,是專門用來運行指定站點應用的,甚至可以制作一個安裝包來分發。以下資源值得一看,Prism,Fluid/Fluidium以及NativeHost。

移動領域

這是HTML5最熱門的運行場所。iPhone可以和很多程序集成,將你的程序顯示在它的今日桌面(這裡有一個教程),Android也支持需要的HTML5API,但集成不夠好。未來幾年,支持HTML5的移動瀏覽器將如雨後春筍,將你的應用向HTML5遷移是很明智的,因為HTML5將很好地運行在這些設備上。

跨界領域

已經有公司即將發布電視平台,GoogleTV以及AppleTV,Google表示,他們的TV平台將支持HTML5,我們不知道蘋果的TV平台將支持什麼,鑒於他們最近對HTML5的一系列炒作,很有可能也支持。另外一些電視盒廠商,如Boxee業已開始支持HTML5,如果你想為Boxee開發應用,與其專門為它開發,不如直接使用HTML5。

跨界領域擁有大量的平台,那些可以連接電腦的電視的數量在不斷增長,我們已經可以在電視上全屏觀看YouTube,而備受歡迎的Wii則內置了Opera。所有這些,都將借助HTML,CSS與JavaScript。

HTML5應用商店

Eric Meyer講到了HTML5應用程序問題,他將HTML5應用成為Web Stack Apps,HTML5要獲得更多關注,可以建立HTML5應用商店。Chrome正在這樣做,而Palm已經有了一個這樣的東西。

應用商店是很好的東西,開發者可以直接得到報酬,而無需像現在這樣靠廣告維持,同時,用戶也將有一個地方去為他們的設備尋找程序。

HTML5市場前景

HTML5在快速成長,值得所有人密切關注,最近的一兩年,會有很多公司進入這個領域,我們或許會在Chrome應用商店看到一些重量級廠商,我們也有希望在Google TV和Apple TV領域看到一些應用商店的出現。HTML5會像傳統的Flash,Flex,Silverlight,Objective-C那樣,形成自己的生態系統。HTML5將比Flash,Flex,Silverlight以及Objective-C更容易出現在任何設備。

對於年輕一代開發者,HTML5應當是他們首選技能,HTML5會形成很大的市場,很有很多公司需要這方面的人才。(原文來自:sixrevisions)

6.21.2010

PHP6.0備受關注:讓面向對象編程更加簡單

PHP 6.0將包含很多新的特性、語法改進,會讓面向對象編程更加簡單,另外還有很多重要的改進,比如Unicode的核心支持,這將讓PHP更適合全球範圍支 持和更加的健康發展。

PHP下一個備受關注的版本6.0,已經進入snapshot階段,不久即將發布。PHP 6.0將包含很多新的特性、語法改進,會讓面向對象編程更加簡單,另外還有很多重要的改進,比如Unicode的核心支持,這將讓PHP更適合全球範圍支 持和更加的健康發展。PHP是已經風靡全球的開源腳本語言,在數以萬計的網站上運行着,PHP 6.0將完全向前兼容,同時增加許多令人激動的特性。

更加好的Unicode支持
NameSpace:名字空間,將更好的避免在函數及類之間的變量名衝突。
令人激動的Web 2.0特性
SOAP: 簡單對象訪問協議 (SOAP:Simple Object Access Protocol)SOAP 可以和現存的許多因特網協議和格式結合使用,包括超文本傳輸協議( HTTP),簡單郵件傳輸協議(SMTP),多用途網際郵件擴充協議(MIME)。它還支持從消息系統到遠程過程調用(RPC)等大量的應用程序。
XML:從PHP 5.1版本開始,XMLReader和XMLWriter就已經包含在PHP內核,它可以讓它可以讓XML編程更加輕松。

當然,除了增加新的特性,一些會給系統帶來不穩定因素和安全隱患的特性也將被取消,以下是取消的內容列表:

magic_quotes
register_globals
register_long_arrays
safe_mode
magic_quotes

來源:cnbeta

6.20.2010

An Awesome CSS3 Lightbox Gallery

jQuery+CSS的圖片展示的效果,可以拖動圖片,圖片放大縮小和兼容瀏覽器IE6以上,可以做成個人相冊或者作品展示 。
 Demo Download
擺放效果
jQuery+CSS
點擊效果
jQuery+CSS
6.19.2010

讓你的網站受大眾歡迎 設計網頁的用戶體驗設計

在一般設計網頁的時候,你必須要注意幾個問題,第一就是你必須要規避你自己的喜好,你要知道你喜歡的東西並不一定誰都喜歡,比如網頁構成色彩,你喜歡大紅大綠,並且你的網頁充斥着這樣的顏色,那麼你一定會丟失掉很多你的潛在客戶,原因很簡單。。。

站在瀏覽者的角度考慮,你是喜歡漫天廣告的網頁,還是有更多實質內容的網頁?

顯而易見,你一定是選擇後者,這是人之常情,這就是最簡單的用戶體驗(User-Experience,簡稱UE),也是最直接影響你的網頁瀏覽度的因素。很多時候,用戶體驗直接影響到你的網站是否成功。在上一篇博文做一個賺錢網站的必備因素中,我沒有提到用戶體驗,這是因為在網站策劃和網站運營當中,用戶體驗是最重要的一個因素,一旦做不好用戶體驗,那麼你希望做一個賺錢網站的想法也只能成為空談。

在一般設計網頁的時候,你必須要注意幾個問題,第一就是你必須要規避你自己的喜好,你要知道你喜歡的東西並不一定誰都喜歡,比如網頁構成色彩,你喜歡大紅大綠,並且你的網頁充斥着這樣的顏色,那麼你一定會丟失掉很多你的潛在客戶,原因很簡單,就是你那跳躍的色彩讓你失去瀏覽者對你網頁的信任,要知道現在人們都喜歡簡單的顏色,簡約而不簡單嘛,這時候你就應該考慮去看看競爭對手的網頁設計方案,不要抄襲,因為那會更讓瀏覽者失去信任度,在他的基礎上再做提高才是你留住瀏覽者最好的辦法。第二個問題是你必須要讓很多不同層次的人在你的網頁上達成一致的意見,用最簡單的話說就是老少鹹宜。那樣才能說明你的網站是成功的,因為你抓住了所有瀏覽者共同的心裡特征,這樣才能更多的吸引新的瀏覽者,當然了,有獎瀏覽之類的東西還是少一些為好,雖然利益是最大的驅動力,但是網絡的現狀讓網民的警惕性非常高,一不小心就會適得其反。想要抓住人們的習慣其實很簡單的,你首先想想你周圍的人都關注的共同的東西,你就明白了。第三比較重要,這是對你競爭對手的分析,也是對你自己觀察力的一個考驗。平時多看看競爭對手的網站項目,總結出他們的優缺點,一定記住一點,不要用雞蛋撞石頭,他們的優勢已經延續了很久了,你很難打敗他們,看看他們沒有什麼,然後你去提高,這樣才會吸引更多的瀏覽者注意。這裡舉個很簡單的例子,有一座小城市,只有一個服裝市場,你如果再開服裝市場的話,那麼或許你會賠本,但是如果你出售特別的服裝,那麼一定會有客戶到你的店裡來消費,也就是說,你必須要把競爭對手的劣勢轉換為自己的優勢,然後突出展現給你的瀏覽者看。

用戶體驗一般包含四個方面:1. 品牌(branding) 2. 使用性(usability) 3. 功能性(functionality) 4. 內容(content)

品牌:

就像提起電視人們就想起康佳,提起洗發水人們就想起飄柔一樣,品牌對於任何一件展示在普通民眾面前的事物有很強的影響力。沒有一個人會去喜歡一個沒有品牌的東西,因為它沒有任何質量保證。那麼如何去創建一個網站的品牌,這是讓很多站長頭疼的事情,這一部分的東西我會在之後的文章中與大家詳細討論,現在只是簡單的提一下。一個網站是不是有品牌,大概取決於兩個要素:一、是不是獨一無二的;二、是不是最有特點或者內容最豐富的。第一點很好解釋,假如這個行業只有你一個人做這個網站,那麼就算你選擇的關鍵詞相當冷門,那麼網站就算是IP不多,但你也是整個這個行業的品牌。第二,假如你的網站內容最豐富,信息更新最快,那麼你就是最成功的。這兩點對於你樹立網站品牌是非常重要的,歸根結底一句話,你的網站是不是給瀏覽者帶來了有吸引力的難忘經驗。

另外,視覺體驗對於品牌的提升也是很有影響的,舉個例子,索尼有一款平民化的數碼單反相機“阿爾法300”,這款相機雖然價格低廉,但是SONY公司卻將這款相機的官方網站設計的高貴典雅,讓人一眼就覺得這樣的一款機器一定是上萬元的好機器,但實際這款機器售價只有三千多元,這就是視覺體驗對於品牌的提升。咱們自己做網頁也是一樣的,網頁設計的優劣對於人們是不是能記住你的網站有非常重要的作用,而且,適當的使用圖片,多媒體,對於你的網站也是很有幫助的,但是一定要記住一句話:“寧缺毋濫”。

使用性:

我想做為一個站長,最不喜歡看到的就是IE標題欄下的“網頁上有錯誤”這句話,如果錯誤不大,那還可以忍受,但是如果錯誤太大,甚至直接影響到重要功能和使用,那麼就是不可饒恕的了。

有些錯誤可能是網站程序造成的,這是對網站用戶體驗影響很大的方面,站長應該迅速解決,而有些錯誤是瀏覽者操作錯誤引起的,如果沒有相關的引導方案,會給很多接觸電腦不多的瀏覽者一種“這個網站太難操作”的錯覺,這也會非常影響用戶體驗的,也就是在這樣的環境下,AJAX運用而生。所以,要記住一點,一定要有用戶操作錯誤的預設方案,這樣才能更好的提高用戶體驗。

根據上面這一點,還可以引申出另外的一點就是“整體頁面側重根據主要受眾對象優化”。舉個簡單的例子來闡述這句話的意思:比如說你做了一個農業科技方面的網頁,你首先要做的並不是考慮如何讓別人感覺你的網頁漂亮,而是你要考慮到農民兄弟上網時間不長,對於網站操作還有一些疑點等問題,對於整個網頁的使用性作出優化,比如對於基本功能的說明,導航欄的優化,搜索功能的簡化等等。

還有你需要考慮的問題是,無論怎樣的訪問者,到達你的網站的目的就是尋找到他們所需用的資料,這時候你就要站在用戶的角度考慮,到底什麼是他們可能會需要的東西,並且把這些資料放在任何人都可以找的到的地方,這樣一來,你的網站給瀏覽者不但帶來了一種完美的體驗,讓他們得到了需要得到的東西,而且一傳十十傳百,漸漸的,你的網站就被口口相傳,訪問者就會越來越多。這就是所謂的“口碑營銷”。你需要做的事就是:主動幫助訪問者達到他們來到你網站的目的。

假如你有技術條件,最好可以在你的網站中多考慮一些殘疾用戶的習慣,比如收聽驗證碼,比如語音讀取內容等,這對於你提高用戶體驗有很大的幫助。

另外,也是很重要的一點,就是不論是網頁的風格,還是網站的內容,都要在很大的程度上達成一致,舉個例子:你到某個家具網站去查看新式的家具圖片,忽然出現了一張風馬牛不相及的圖片,是不是會讓你很反感?己所不欲勿施於人,這就是做網站最重要的一點。

功能性:

所謂的功能性,並不是僅僅指網站的界面功能,更多的是在網站內部程序上的一些流程。這不僅僅對於網站的瀏覽者有很大的用處,而且對於網站管理員的作用也是不容忽視的。

功能性包含的大約有以下:1、網站在最短的時間內,獲取到用戶所查詢的信息,並反饋給用戶。2、程序功能過程對用戶的反饋,這個其實很簡單,比如說你經常可以看到的很多網站的“提交成功”或者你有時候會收到的其他網站的更新情況郵件等。3、網站對於瀏覽者個人信息的隱私保護策略,這對於增加你網站的信任度有很好的幫助。4、線上線下結合,這個就不用我說了,最簡單的例子就是網友聚會。5、優秀的網站後台管理程序,幫助管理員更快的達成目標。

內容:

如果說網站的技術構成是一個網站的骨架,那麼內容就是網站的血肉了。內容不單單包含你網站的可讀性內容,還包括連接組織、導航組織等方面,這也是一個網站用戶體驗的關鍵部分。

上面說了這麼多,只要你按照用戶體驗的角度量化自己的網站,那麼一定可以讓你的網站受到大眾的歡迎。

 

來源:獨立風騷

網絡創業如衝浪:原創再為王

“傳統創業如登山,網絡創業如衝浪”。山是定的,浪是變的。這句話就能解釋一個現象:在互聯網裡,勢力的此消彼長不是一定的,而是變化的。不消三十年河東三十年河西;而是一年小變樣三年大變樣,五年就可能天翻地覆了。

新聞原創的力量即是如此。

雅虎、新浪等第一代門戶的崛起,就是依靠拷貝+粘帖,把別人的東西拿過來,自己成為一個強勢的新聞渠道,從而把上遊的原創者擠入一個為人作嫁的境地:網民看什麼是門戶說了算,可以推薦A報紙的,也可以推薦B雜志的,為了搶奪曝光度,我不僅不付費給你們,你們還得巴結我。這在至少5年前已經是一個事實。但現在,情況大變。

上周一條新聞,雅虎意圖收購全球第一大博客網站、月用戶2600萬的HuffingtonPost。雅虎需要的,是高質量的原創內容來源。而Huffington需要的,是繼續擴大自己的讀者群。看起來,雅虎的確有Huffington所需要的。不過,還有另一則新聞。

雅虎開始與Facebook整合,讓用戶在雅虎頁面上也能看到Facebook的信息流,並且在雅虎的閱讀行為能被傳回Facebook,以吸引更多的朋友來到雅虎的頁面。這表示:五年前的全球第一大網站、今天的全球第四大網站雅虎,已經不得不主動尋求向五年還不存在的、今天的全球第一大網站Facebook要流量。

但雅虎已經遲了。Huffington至少在一年前就已經率先跟Facebook整合,向Facebook引渡流量,並且借助Facebook的人際鏈條打開自己的用戶忠誠度。所以一個很自然的問題是:既然Huffington能向第一大網站尋求流量,那為什麼還需要向區區老四俯首稱臣呢?!

指出兩個點。

第一,原創而不是拷貝+粘帖開始成為關鍵。英文兩大門戶雅虎和AOL都執行同一個戰略:加大原創,而不單純依靠轉載。AOL已有500個專職寫稿記者和幾萬個特約寫手,雅虎新收購了有38萬特約寫手的網站AssociatedContent,其原創占整個雅虎信息的比例要從10%提到20%,也正是在這個背景下,雅虎期望收購Huffington、引入獨家內容。

中國呢?我的保守估計是,門戶的原創占到其整個展示信息的5%左右。但不要被這個絕對數字騙了。這5%包括兩類:一是源頭信息,也就是新聞事件的第一爆料,這直接決定或者影響了其他媒體的報道題材和思路。二是重大事件,比如眼下如火如荼的世界杯,幾大門戶直接簽下了梅西、卡卡等最大牌的球員做獨家博客或者代言,段暄、李承鵬、黃健翔、余華、高洪波等最主流的評論員做獨家解說,以及ProZone等最專業的數據庫。對於世界杯報道的50%以上的最有效信息,相信都會由門戶主導原創。

換句話說,門戶原創了金字塔尖的信息,以此為龍頭,整合了金字塔底部的信息。整合不再是門戶的最關鍵的屬性。5年前門戶讓原創者吃盡了苦頭,今天門戶自己成了最賣力的原創者。

為什麼?原因之一是渠道多元化而導致競爭加劇。比如中國的四大門戶,再加上一堆可以直接向用戶推送新聞的客戶端,比如搜狗拼音、暴風影音、迅雷下載,以及更致命的中移動等運營商。而四大門戶之外的其它渠道,都不以新聞制作為本業,對他們來說,誰的新聞好、誰給的錢多我就推誰。

另一個原因,與下面這一點相關。

第二,社交網絡與博客等個體原創者的結合,可以繞過門戶,把原創內容直接抵達用戶,並且鞏固原創者的品牌。之前,博客們要麼通過門戶,要麼通過GoogleReader/鮮果等RSS閱讀器來推廣自己的文章,現在,博客們可以通過Facebook、開心網、Qzone、郵箱等社交網絡的朋友間關系來推廣。比如上面提到的Huffington借助Facebook的例子。這個優越性在於:第一,朋友的推薦,一對一,要比門戶編輯的推薦,一對多,來得更親切更個性化。第二,讀者在門戶上閱讀一篇文章往往會忽略掉作者,而在社交網絡上閱讀一篇朋友的推薦,往往對作者會有更多的關注。

微博則把這股力量推到了極致。由於微博降低了寫作和閱讀門檻,讓更多知名人物加入了微博行列,這大幅擠壓了媒體人的中介地位,同時大大抬高了知名原創者的價值。於是門戶對原創者的競爭不可避免的升級,甚至有門戶不惜為一大批微博活躍用戶免費贈送iPad來博取芳心。而另一方面,名人們通過微博的朋友和粉絲鏈條,快速的擴展讀者群和影響力圈子,這讓他們的內在動力、獨立性都大為增長。以後,不再是博客時代的“門戶推什麼,讀者看什麼”,而是微博時代的“名人意淫什麼,讀者圍觀什麼”。

換句話說,互聯網的力量之一來自砍掉中介,讓生產者和消費者直接見面。那麼靠成為一個強勢中介而叱咤一時的雅虎模式就必然被抛棄,進入到一個原創者通過品牌號召力和人際關系鏈條直接連通讀者的時代。

作為踐行原創法則的FT中文網和本專欄、本作者,作為踐行原創法則的支持者——讀者您,我們是否應會為此欣慰?

(注:本文作者為騰訊網科技中心總監。本文僅代表作者本人觀點。作者電子郵箱:james.l.cheng@gmail.com

來源:FT中文網

6.18.2010

IE8的一個BUG:Hack 兼容方案

字體真是個麻煩的東西,然後又是個重要的東西。為以更方的解決字體問題,就像上次推薦的《再談 Web 默認字體》,為了Pixel Perfect,我們不斷糾結。像支付寶在CSS Reset中是這樣寫的:

  1. body{font:12px Tahoma,Helvetica,Arial,'宋體',sans-serif} 

而淘寶這樣寫:

  1. body, button, input, select, textarea {font:12px/1.5 tahoma,arial,'宋體',sans-serif;} 

個人偏向於淘寶的寫法,顯然,button/input/select/textarea的字體都是要重設才會顯示正常的。這裡並不是為了討論這個,而是這裡面都有 tohama 這種字體,它是今天的主角。因為字體顯示好,也因為導致 BUG 而被搬上台面。讓我們來先看一個Demo:

Here: IE8 Tahoma Font-family bug

如果你是從 IE8 打開,將會看到第一個按鈕有錯位。如標題所說,你懂的,這就是 Tahoma 給我們帶來的問題。而解決方案很簡單,就是避用 tahoma 字體,其他的隨便。比如:

  1. body, button, input, select, textarea {font:12px/1.5 arial,'宋體',sans-serif;} 

在支持沒有那麼完美的狀況下,這樣的解決方式可以說是完美的。即使你像我一樣也有一套 Hack 兼容方案,還是不推薦使用暴力方式,我們的目標是、也應該是更有效、更優雅。

然後,其實 hack IE 8的時候,可以考慮 selector{property:value\0;} 這樣的方法來,因為這是 IE8+ 獨有的方法。Hmmm… 多好,雖然有點暴力。最後,推薦一下鴿子工友。解決這個 Bug,還得歸功於他。

——————————–

經過一條完美分割線從火星來到地球,囧,剛剛還測試了arial放在前面是可以的,而且早上測試過,不過,事實證明測試要更小心,要多次,不然可能刷出來的是緩存。事實的解決方法似乎是這樣的:

  • 有中文和英文混排的時候,怎麼寫都無所謂;
  • 只有中文的時候,放在前面最好的系統所擁有的字體,或者一種系統沒有的字體來讓他顯示默認字體;
  • 全英文就更是所所謂了

多謝幫助尋找真相的 Justice 和 默默同學,一個問到底,一個提供一個非中文的 IE8 顯示效果圖片。

 

 

來源:幸福收藏夾

6.17.2010

Google 公司請求美國和歐洲政府向中國施壓放寬互聯網

穀歌公司(Google Inc.)的首席法律顧問多姆德(David Drummond)周三說,公司正在請求美國和歐洲國家政府向中國施壓,要求它放寬互聯網審查,說這是限制自由貿易的不公平壁壘。

多姆德對媒體記者說,西方國家應當利用它們用以投訴中國以低於成本價銷售產品的同類規則,來維護信息的自由貿易。

他說,政府間談判是帶來改變的唯一途徑,是這種審查趨勢或日益增強的審查得到遏制的唯一途徑。

穀歌是世界上最大的搜索引擎,今年早些時候停止按照中國的規定對搜索結果進行自我審查,同中國領導人起了爭端。此前穀歌說,有中國黑客曾試圖竊取它的軟件代碼並進入人權活動人士的Gmail賬戶。

從3月底開始,穀歌一直是將中國內地的搜索請求轉移到不受同樣限制的香港。

多姆德說,那次網絡攻擊可以說是壓在駱駝背上的最後一根稻草,因為當時我們覺得,依據我們的價值觀在中國經商正變得越來越困難。他說,穀歌公司當時面臨着成為中國國家審查機器之一部分的危險。

他說,審查不僅是一個人權問題,也是一個貿易壁壘;如果你看中國的所作所為──審查當然是服務於政治目的的,但它也被用來壓制跨國公司,讓它們在中國市場處於不利地位。

他說,互聯網行業對於西方世界非常重要,所以我們應該確保這方面的貿易得到了保護,這應該是一個明顯的道理。

對於美國是否可以根據世界貿易組織(WTO)的規則起訴中國,多姆德不予評論。如果美國起訴中國,並且能夠證明其公司受到了損害,它最終可以尋求獲得作為補償的貿易權利。

相反,多姆德說,可能需要有新的貿易規則來涵蓋互聯網行業。

他說,在大量貿易規則之下,仍然有這樣一種概念,即境內傳媒市場應該與貿易無關,這需要改變。

他說,在同美國、法國、德國政府和歐盟高官討論時,他已聽到一些支持聲音,要在雙邊和多邊談判中就穀歌的案例和中國的互聯網限制措施施加壓力。

歐盟不斷在人權問題上向中國發難,通常都沒有獲得多大的成功。事實上,由於法國總統薩科齊(Nicolas Sarkozy)曾因西藏動亂而威脅抵制北京奧運會開幕式,中國官方去年向歐洲進行大額采購時明顯故意地避開了法國。中國拒絕同西藏流亡政府談判。

來源:華爾街日報

6.16.2010

SEO 經驗總結 - 注意的事項

SEO SPAM翻譯成中文即使SEO作弊,通過針對搜索引擎使用一些作弊方法來獲得網站或網頁的高排名。如果你是一個網站站長或SEO,那麼你必須了解使用怎樣的方法或技術會被搜索引擎認為是作弊,否則當你對網站進行正當SEO優化時,可能會犯一些沒必要的錯誤
下面來詳細講解哪些技術是被搜索引擎認為作弊的:
透明鏈接:這是最常見的SEO作弊方法,通過在頁面中加上一些用戶看不到的鏈接,通常這些鏈接都是與背景顏色相同。
隱藏鏈接:通過CSS或其他一些方法,將鏈接放到網頁中,但用戶無法瀏覽到這些鏈接,不過搜索引擎會找到這些鏈接,因此這也是很常見的一種作弊方式,比如常用的display來隱藏文字內容。
誤導性的鏈接:這種鏈接文字內容是一個網站,而實際上鏈接地址是另外一個網站。比如: www.XXXXX.com是鏈接文字,但實際上點擊這個鏈接地址卻是www.differentwebsite.com另外一個網站。
不顯眼的鏈接:這些鏈接在頁面上出現,但它們通常不明顯,比如他們可以是1 × 1像素的大小的圖片。
關鍵字堆砌:這種形式很常見,比如在網頁meta標簽中加載重複多次的內容。一般在做關鍵詞時最好不要簡單的重複,同一個關鍵詞在meta裡最好別超過三次。
元標記重複:出現一再重複的關鍵字元標記。
無用的引導網頁:這些網頁是專為吸引搜索抓取而制作的,但基本上對訪問者來說沒什麼意義。比如,一個首頁中只顯示“點擊這裡進入。” 這行文字鏈接。
網站內容重複率過高:也就是我們常說的網站沒有原創內容,而完全靠采集或複制其他網站上的內容。
在標點符號上加鏈接:這是一個聰明的做法。一些不道德的SEO們在一些標點符號上加上超鏈接。同樣也會被搜索引擎認為是作弊

 

來源:圖圖網

6.10.2010

中國個人網上開店實名制7月1日起施行

新華網北京6月1日電 (記者張曉松)根據工商總局1日出台的《網絡商品交易及有關服務行為管理暫行辦法》,通過網絡從事商品交易及有關服務行為的自然人,應當向提供網絡交易平台服務的經營者提出申請,提交其姓名和地址等真實身份信息。

根據這一辦法,通過網絡從事商品交易及有關服務行為的既可以是法人、其他經濟組織,也可以是自然人。

其中,通過網絡從事商品交易及有關服務行為的自然人,應當向提供網絡交易平台服務的經營者提出申請,提交其姓名和地址等真實身份信息。具備登記注冊條件的,依法辦理工商登記注冊。

提供網絡交易平台服務的經營者也應當對申請通過網絡交易平台提供商品或者服務的自然人的經營主體身份進行審查;對暫不具備工商登記注冊條件,申請通過網絡交易平台提供商品或者服務的自然人的真實身份信息進行審查和登記。

來源:新華網

6.09.2010

更好的進行網站推廣 關鍵詞選取優化的10個誤區

搜索引擎是網站進行網絡營銷的重要平台,一方面是通過競價廣告的投放,一方面是針對網站的搜索引擎優化。競價廣告和搜索引擎優化都需要選取關鍵詞,但是在選取關鍵詞中存在了誤區,企業往往投放了大量的資金,也帶來的了流量,但是沒有轉化,網絡營銷學院的根據數據調查分析,在關鍵詞選取的優化中存在以下十大誤區。避開這些誤區可以更好的進行網站推廣,提高有效的轉化量。

一、關鍵詞是從來不使用的

有的關鍵詞只是在內部使用,或只有幾個人知道,或是創造的新詞,這些詞客戶很少在搜索引擎上搜索。

二、不一定最熱門的關鍵詞就是最適合的

熱門的關鍵詞可以帶來大量的流量,但大多都沒有轉化,形成了流量的浪費,這個關鍵詞不一定是企業合適的。

三、在關鍵詞的選取上沒有考慮到用戶意圖

關鍵詞的選取時,要考慮用戶的心理,以達到轉化促成銷售的關鍵詞為首選。在搜索中,往往產品的性能搜索是購買前的比較選擇,而產品的價格搜索是消費的選擇。

四、只選通用詞而沒有選長尾詞

對於網站選取關鍵詞來說,大多網站都重視了通用關鍵詞,沒有選擇長尾關鍵詞。

五、關鍵詞的混亂

對有些關鍵詞來說,一個詞是兩個概念,它包含了兩個不同的意思,這樣會造成混亂,要選擇最精准的關鍵詞。還有就是選擇與自己不相關的關鍵詞,雖然可以帶來流量,但是無轉化。

六、沒有考慮關鍵詞的竟爭度

有許多網站存在許多盲目性,沒有考慮自己的經濟實力和關鍵詞的競爭度,這樣花費大量的時間或資金,最終並不能取到好的效果。

七、不能定期更新關鍵詞

網站關鍵詞並不是長期不變的,可以根據網站的變化,及時的增加和減少關鍵詞。

八、沒有花費時間和精力研究關鍵詞

往往是拿到關鍵詞就往上放,沒有經過前期的調查與分析,沒能對競爭對手的關鍵詞作出分析。

九、不一定關鍵詞密度多就好

盲目重複頁面關鍵詞,關鍵詞密度多不一定會對優化產生好的效果,反而會讓搜索認為網站在作弊。

十、不一定投放和優化關鍵詞數量多就好

往往在投放和優化時,網站的管理者恨不得把所有的關鍵詞都放到裡面,這樣量的增加並不能帶來的質的改變,反而會把有限的精力和資金分散。

LOGO標記設計:以剪影為主題的logo標志

在logo標志設計中,以物體或場景等作為剪影圖片來設計標志是很常見的一種設計技巧,這種設計方法的特點表達清晰明確,標志簡單明了,很容易通過剪影本身的聯想,讓標志更容易被大眾所識別記憶。
本文收集推薦了十幾個以剪影為主題的logo標志,我們可以發現這類標志設計起來也並不複雜。
Furniture
Paint the city
Plain Paper
Eds Electric
Bullet
Slap
Blue Dog Properties
Negative Reality
Helping Hands for pets Logo Design
Meadville land services Logo Design
Yoga Aus
Food writers
Ogden Plumbing Logo
Synergy Equities logo design
Words + images
aah
Casa Timis
Pyramid Peak (Medical logo design)
Logo design for Oliva Building
Pelican logo
Logo design (for Puppy Love)
Fit
Wiesinger music
Martini house logo
Child of the king logo
Pharmacy logo
Poker hills
Old drunk
Perro logo
Animals Today
6.08.2010

30多個資源可幫你開始學習HTML5

眾所周知,HTML5在互聯網領域掀起了一場大論戰,並讓Adobe的日子很難熬。HTML5致力於為前端開發提供全面的標記語 言。以下30多個資源可幫你開始學習HTML5。

早在幾個星期前,Adobe就發布了Dreamweaver CS5 HTML5 Pack的預覽版下載。眾所周知,HTML5在互聯網領域掀起了一場大論戰,並讓Adobe的日子很難熬。HTML5致力於為前端開發提供全面的標記語 言。以下30多個資源可幫你開始學習HTML5。


Blowing up HTML5 video and mapping it into 3D space(將HTML5視頻吹散並組成3D效果)最近我研究了HTML 5中的Canvas 和Video 標簽,並發現了一些很酷的特性。其中之一就是Canvas.drawImage() api。此為詳細介紹。
Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3(用HTML5 和CSS3 打造向下兼容的網頁)HTML5更加語義化,使用HTML5 我們不必在網頁上布滿沒有意義的div。它引入了有意義的tag,比如 navigations 和 footers 使代碼更有意義也更接近自然語言。
Coding A HTML 5 Layout From Scratch(HTML 5 布局)
這篇文章將教你

  • 用原有技術將元素放置在特定位置
  • 最新的技術潮流
  • Microformats與HTML5協同使用
  • 介紹HTML5與CSS3的新特性
Coding a CSS3 and HTML5 One Page Website Template(制作CSS3和 HTML5 一頁式站點模板)這篇文章介紹了如何利用CSS3 和jQuery的新特性制作HTML5 網頁模版。 HTML5 仍在完善當中,你也可以選擇性的下載XHTML版。
Comprehensive video tutorial on HTML5(全面的HTML5視頻指南)這 是一個叫Brad Neuberg的工程師制作的HTML5教學視頻。
Create modern Web sites using HTML5 and CSS3(用HTML5與CSS3打造時尚站點)這篇文章介紹了許多HTML5的功能和語法及API,還有CSS3的新的選擇器,效果和特性。最 後, 還將教你如何利用這些新特性開發一個網頁。當你讀完這篇文章,你就能用HTML5和CSS3開發一個自己的站點啦。
Designing a blog with html5(用html5設計博客)許多HTML5 特性要結合JavaScript API一起使用,以增加網頁的互動性。但仍有一些新元素可讓傳統的Web1.0頁面更加語義化。為了學習這些,我們來看怎樣建立一個博客。
Designing for the Future with HTML5 and CSS3 : Tutorials and Best Practices(為未來設計:HTML 5 和 CSS3 指南與最佳案例)這篇文章將介紹用 HTML5和CSS3搭建的幾個最佳站點。
Design and Code a Cool iPhone App Website in HTML5(用HTML5設計和實現一個超酷 iPhone App 網站)
Have a Field Day with HTML5 Forms(建立HTML 5表格)這篇文站將教你 如果用HTML 5 和高級CSS技術與最新的CSS3技術建立一個漂亮的表格。
How To Create A Nice Blog Design Touching The Future(不用photoshop,完成網頁設計)
How to Make All Browsers Render HTML5 Mark-up Correctly – Even IE6(怎樣讓所有瀏覽器都渲染HTML5標記——即使是IE6)這篇文章將教你如何用JavaScript和CSS,使 HTML5頁面向下兼容,即使是IE6也不例外。
How to Make an HTML5 iPhone App(制作HTML5 iPhone 應用)這是 一篇針對iPhone的指導,但是許多技術也可用在兼容HTML5的手機瀏覽器上。
HTML 5 and CSS 3: The Techniques You’ll Soon Be Using(HTML 5 和CSS 3:你將用到的技術)這篇文章使用HTML 5和CSS 3 搭建博客頁面。如果你已經熟悉html 和CSS,將很容易跟上。
HTML5 for Beginners. Use it now, its easy!(HTML 5初學指南)給 所有具有基礎HTML知識的初學者的HTML 5 入門指南
HTML5 Presentation這篇文章介紹了HTML5 的發展歷史和它的基本特性
HTML5 Tutorial – Getting Started(HTML 5 入門指導)
How to Build Web Pages With HTML 5(怎樣建立HTML 5網頁)
Simple Website Layout Tutorial Using HTML 5 and CSS 3(HTML5和CSS3布局指南)HTML5最令人期待的新標簽包括<header>, <footer>, <aside>, <nav>, <audio>,同時它還包括畫圖,線下存儲數據,拖放等API。頁面布局將會更易理解。這裡將介紹一個最簡單的HTML 5 布局頁面,用CSS3 設置樣式。最終結果如下
Structural Tags in HTML5(HTML 5 結構標簽)HTML5 有許多標簽幫助網頁結構化,這能省去以網頁中許多div
HTML5 Boilerplates(HTML 5模板)此文介紹了一些你能拿來就用的HTML5 模板文件
HTML 5 canvas – the basics(HTML 5 基礎——Canvas)對HTML 5 Canvas使用方法的全面指導
HTML 5 Tutorials(HTML 5 指南)
Implementing HTML5 Drag and Drop: New Premium Tutorial(HTML 5 拖放)HTML5 的一個新特性就是拖放,不過IE早在5.5時代就支持拖放了,而HTML 5 的拖放也是基於IE的。本例將教你如果用拖放實現一個簡單的購物車界面。
Preview of HTML 5這是一篇比較老的文章,介紹了HTML5的特性和優點。
The HTML 5 Canvas For Flash Developers : Drawing(HTML 5 Canvas 的畫圖功能)
The Power of HTML 5 and CSS 3介紹了HTML 5 與CSS3能創造的各種效果。
View Source Tutorial: Sticky Notes With HTML5 and CSS3(HTML5 和CSS3 打造便利貼效果)
webOS HTML5 Database Storage Tutorial(webOS HTML5 數據存儲指南)HTML5 的本地存儲功能將使數據存儲十分簡便。
Yes, You Can Use HTML 5 Today!本文介紹了一些現已被支持的HTML 5 特性,對初學者十分有用。

來源:cnbeta

6.06.2010

跨瀏覽器兼容測試有關的大量資源

跨瀏覽器是所有網頁設計師都會碰到的常見問題,當完成一個頁面後,經常會要測試IE,FF等多種常用瀏覽器軟件。有時候客戶也會要求兼容更多瀏覽器,當電腦裡沒有安裝這類瀏覽器時就會顯得很麻煩,所以推薦那些為跨瀏覽器測試範疇的網頁設計師可以閱讀下本文

我們生活在一個幸福又痛苦的時代,有太多的瀏覽器可以使用,對 Web 開發與設計者而言,你有義務保證你的設計兼容所有主流瀏覽器。然而跨瀏覽器測試是件相當複雜的事,涉及不同的瀏覽器,不同的版本,不同的平台。本文介紹了與跨瀏覽器兼容測試有關的大量資源。

在線測試資源

Browsershots

是一個備受歡迎的免費在線跨瀏覽器測試工具,包含各種平台的各種瀏覽器,會為你的網站截圖,因為太受歡迎,所以要排隊。

天海設計

Netrenderer

針對不同版本的 IE 進行測試,甚至即將包含 IE9。

天海設計

Browsrcamp

免費版支持 Mac 上的 Safari 3.1.2 測試,收費版本包括更多 Mac 瀏覽器。

天海設計

Adobe Browserlab

老牌的跨瀏覽器測試平台。

天海設計

Litmusapp

特點是,可以得到一份完整的跨瀏覽器兼容測試報告,免費版只限於 IE7 和 Firefox 2。

天海設計

Anybrowser siteviewer

可以按不同屏幕尺寸在不同瀏覽器中預覽你的網頁,甚至可以在不同頁之間瀏覽。

天海設計

Fundisom

一個 Mac 平台的網站截圖生成工具,支持 Safari,MacIE 和 Mozilla,目前好像宕機了。

天海設計

Delorie lynxview

看看你的網頁在純文本瀏覽器 lynx 中的樣子。

天海設計

Browsera

更像一個整站測試工具,而不是單純的網頁截圖工具,會爬遍你的站點,對整個站點進行測試。

天海設計

插件和工具資源

IE Tab

這是一個 Firefox 擴展,可以以新標簽的形式,以 IE 引擎顯示頁面。

天海設計

IETester

一個免費的多版本 IE 內核瀏覽器,支持 IE9/8/7/6/5.5,支持 Windows 7,Vista,XP。

天海設計

IECapt

一個小巧的命令符工具,可以將指定網頁在 IE 中的渲染結果輸出到 BMP,JPG 和 PNG 圖片。

天海設計

Multi-Safari

多版本 Safari 測試。

天海設計

Expression Web SuperPreview

不同版本的 IE 測試。

天海設計]

Iphoney

如果你針對 iPhone 320x480 的屏幕進行設計,這正是你需要的工具。

天海設計

MultipleIEs

針對古董級瀏覽器 IE3/4/5/6 進行測試。

天海設計

Multiple IE

和 MultipleIEs 類似,也是針對古董級瀏覽器進行測試,不同的是,這工具可以讓你在同一台機器上運行從 IE6 到 IE3 各個版本的瀏覽器。

天海設計

SortSite Professional

一個非常全面的測試工具,可以測試你網站中每個頁面,為所有發現的問題生成報告,擁有300個指標。

天海設計

Lunascape

世界上第一個,也是唯一的一個三引擎瀏覽器,可以模擬 IE,Firefox,Chrome,Safari。

天海設計

付費服務資源

Browsercam

這是一個付費服務,可以在不同平台下的不同瀏覽器中測試你的網站,既可以自動截圖,又可以遠程訪問他們的計算機。

天海設計

Crossbrowsertesting

針對所有平台下的所有瀏覽器進行測試,付費服務,19.95 美金起價。

天海設計

Browser Photo

有12種不同瀏覽器和計算機配置組合,生成每種組合下的站點屏幕截圖,收費服務,一次15美元。

天海設計

Url2image

登錄後,你可以針對不同平台,不同瀏覽器,生成你網站的截圖,兩個截圖1美元。

天海設計

SortSite

針對不同瀏覽器,測試你網站的各種功能,149美元。

天海設計

Multi Browser Viewer

預裝了17個獨立的虛擬瀏覽器,除此之外,還可以針對 Mac,Windows,Linux 平台下的50款瀏覽器進行測試。單用戶99.95美元。

天海設計

Cloud Testing

對你的電子商務站點的外觀與功能,針對 IE6/7/8, Firefox, Safari, Chrome, Opera 進行測試。

天海設計