Question 1

網頁設計 CSS也來壓縮吧！

Accepted Answer

沒想到吧！CSS也是可以被壓縮的唷！其實，我朋友曾經問過我，有必要對CSS做這種手段的壓縮嗎？我想，如果CSS又少又精簡，當然可以不需要這麼做，但是如果CSS又大又恐怖的話，我想這樣的壓縮動作也許還可以幫上一點忙吧！這篇文章的原文，是 The Definitive Post on Gzipping your CSS ，作者於2004年時提出這樣的想法，後來引起不少人的迴響，英文閱讀OK的人，可以直接去該作者的網站閱讀完整的技術文章，裡面有整個程式的詳細說明與來龍去脈通常網站越龐大，所使用的CSS就越加的可怕，要是好死不死還碰到對CSS最佳化不擅長的網頁設計師，那個CSS根本就是裝滿肥肉的哥吉拉這招可以有效的壓縮和減少CSS的檔案大小，大大的降低了網頁下載時的負載，基本上，該作者介紹了兩個減少CSS檔案大小的方法：第一個方法，要在CSS檔案當中加入一點點的PHP語法，所以請把*.css的副檔名改成*.php，並且在CSS檔案開頭加上下列這串語法：<?phpob_start (＂ob_gzhandler＂);header(＂Content-type: text/css; charset: UTF-8＂);header(＂Cache-Control: must-revalidate＂);offset  60 * 60 ;ExpStr  ＂Expires: ＂ .gmdate(＂D, d M Y H:i:s＂,time()  offset) . ＂ GMT＂;header(ExpStr);?>以上語法做了四件事情：1.使用PHP的 ob_gzhandler 送出壓縮檔案，這個函式將會先檢查瀏覽器是否接受gzip的編碼型態，如果不接受，那就給它沒壓縮的檔案2.送標頭，裡面包含了檔案類別與編碼資料3.接著則是送出快取控制設定，這裡面的must-revalidate是確保不管你的文件可以讀取到你所送出的最新資訊4.最後，就是送出Expires的標頭，設定快取檔的有效時間，這裡設定的時間是一小時這個方法並沒有很漂亮，CSS裡面夾帶了php檔案看起來也不怎麼漂亮，就是實用而已，引用檔案的時候，只要使用：@import url(mycss.php); 引用就可以了第二個方法比較漂亮跟優雅，不需要在CSS檔案當中加入其他的程式碼，也不需要改變你的CSS副檔名，而且….它只需要兩個步驟喔！很神吧不過缺點是，資料夾裡面所有的CSS檔案都會被壓縮喔！首先，你必須要建立一個PHP檔案，裡面寫入上面那串程式碼，並且幫它命名成’gzip-css.php’；再來，把下面的程式碼加入.htaccess的檔案當中，並且存放在和CSS相同的檔案路徑中：AddHandler application/x-httpd-php .cssphp_value auto_prepend_file gzip-css.phpphp_flag zlib.output_compression On上面這串程式碼，總共做了三件事情：1.首先告訴Apache把所有的css檔案當成PHP輸出2.第二行把gzip-css.php的程式碼加在每個CSS檔案前面3.[非必要]第三行將php.ini中的 zlib.output_compression 給打開，告訴PHP要啟動zlib的壓縮功能；因為主機可能不允許你編輯php.ini，所以只有用動態來變更囉！真的是很神奇呢！不過因為我自己沒有親自試過，所以不確定這兩種作法實際上的差異以及效果，甚至實做時所會遇到的問題，等到我有空親自試過以後，再把一些細節補上吧！Filed under: CSS

Question 2

Flash 網頁設計與 SEO

Accepted Answer

基本上，Flash本來應該是個非常不利於搜尋引擎的一種玩意兒，起碼一直以來大家都抱持著這樣的疑問，認為Flash的內容應該是無法被搜尋引擎所搜尋到，但是難道真的為了SEO就得放棄Flash？不過其實也不是完全無解，因為前幾天工作上有人談到這個問題，乾脆就把資料整理整理吧！首先，雖然Flash可以用來製作整個網站，但是我依然不推薦這樣做，除非你有辦法把內容完全從Flash當中分離當然，目前Google搜尋引擎已經可以解析Flash當中的連結內容，不過如果你過度使用Flash，又沒有好好的把內容拉出來，在SEO上還是贏不了非Flash頁面且符合網頁標準化規範的網頁的喔！但是如果非要在網頁當中使用flash，又該如何讓它成為可以讓搜尋引擎輕易搜尋的網頁呢？1.把flash檔案放在HTML檔案當中，千萬別忘了在META當中設計關鍵字和網頁相關資訊；或者你也可以在flash檔案下面放上flash檔案內容的相關說明，讓搜尋引擎也可以抓到相關的資料2.使用外部文字檔，讓Flash的內容可以被搜尋，並且確定你的文字內容對搜尋引擎而言是有意義的，像是點選這裡這種無意義的東西就不要放了3.偉大的Google搜尋引擎會找出Flash裡面的連結，所以，請對你的連結名稱使用有意義的字，而不要沒事老用一堆形而上的火星文，火星文是不會讓你的文章變得比較容易搜尋得到的！（管你用的是什麼鬼符號，星星月亮太陽都一樣啦！）4.提供非Flash版本給搜尋引擎，我想這是個非常好的方式，除了讓使用者可以有所選擇外，也可以對搜尋有助益5.正確的對你的檔案命名，關鍵字以 ‘-’ 隔開，有助於搜尋引擎的判斷喔！另外，也不要把檔案的深度弄得太深，例如：www/user/admin/file/，這種太深的資料夾結構，對於搜尋是毫無幫助的另外，想要把Flash檔案放在網頁當中，最好使用

Question 3

交友社群網頁設計 vs 社群交友網頁設計

Accepted Answer

最近，全球網站吹起了一陣Social Network的狂潮，因為最近又看到了某些事情，所以有感而發的想要寫篇文章；當然，我不是專業行銷人員或是品牌經理人，隨便看看就好，不用太過相信，覺得我的觀點是個屁其實也是正常的先從Facebook談起，Facebook可以說是相當經典的交友社群網站，當初的Facebook，用意是讓哈佛的學生們可以使用Facebook作為通訊錄，還有一個就是用來找尋失聯的校友及同學；因為相當好用，後來也對外開放，現在成了全美國年輕人都會註冊使用的交友社群網站Facebook如何發展如何經營其實不需要討論，因為他們的定位再清楚也不過，我只是想要透過Facebook來探討一下交友與社群之間的關係很多台灣的網站，模仿Facebook或是汲取Facebook的經營概念，想要發展交友與社群結合的網站服務，但卻沒有深入去思考交友與社群之間的微妙關係大家都知道，Facebook當初的定義就是要找朋友，而且是找真的朋友，之所以會出現社群型態的發展，其實源自於人在交朋友時，喜歡攀關係的天性使然，因為有關係之後，距離就會變得比較容易拉近，因此對於Facebook這樣的交友網站而言，發展社群型態是相當理所當然而且合於人性的行為簡單來講，交友社群網站當中社群的存在意義，就是為了要讓人可以攀關係那，社群交友又有什麼不同？社群交友在這篇文章當中，主要是定義在以社群為主爾後隨之發展出來的社交行為，最常出現在Yahoo!Taiwan的家族網站或是PChome家族網站當中這些使用者，當初是透過家族的主題而號召過來，因為相同的興趣或理由而聚在一起，漸漸的發展出互相交流的互動關係，甚至延伸到現實世界當中在社群交友網站當中，社群的意義是中心，交友則是延伸發展出來的附加價值很多人覺得這兩個沒有差，但我老覺得，明明就是不一樣的東西，怎麼會覺得沒有差？經營以人為主的網站服務，首要的就是要先將服務的首要目的決定出來，是交友服務還是社群平台？接著，就必須找出你所想要經營的對象；當然，另外一種作法你已經有確定的目標對象，根據目標對象找出需求服務並決定服務的性質，至於要選哪一種方法則是取決於公司本身，這個要長篇大論，懶得講了台灣很多網路經營者都想經營社群服務，但是卻沒有從人的角度去思考，只是一眛的看數字來自圓其說；看到越來越多人加入Facebook加入Mixi炒作Cyworld和迷你窩，就天真的下了結論認為：啊！社群交友（或交友社群）網站一定會賺，也不知道是憑哪一點覺得自己做就會賺，沒來由的一窩瘋的栽進去當冤大頭做了三五年之後，天天拿數字問自己也問員工為什麼我們做了那麼多行銷和開發工作，網站還是沒有顯著成長和突破，問題在哪裡？，問這種問題不覺得自己很瞎嗎？我很認同統計數字的必要性，但是並不認同行銷策略要重度依賴統計數字，基本上，數字可以做為一種驗證參考分析的來源，但是卻不能夠做為答案；常常聽別人透過大量的統計數字來佐證自己的立論，誰聽了都知道他只是在利用數字為自己先入為主的立場做解釋，而且往往都是一堆欠缺統計分析專業的半調子人士在那邊抱著數字說笑話，什麼PV下降是因為逢年過節大家出去玩，PV上升是因為颱風天大家出不了門，講這種東西是要逗大家笑喔？我實在很想說：你爸都會晃點你了，數字不會晃點你嗎？舉個簡單的例子來看，很多網站經營者都喜歡成天拿自己網站的日報表週報表月報表會員資料結構消費曲線圖…等拉里拉雜的東西來分析自己的行銷及網站經營成果，但是如果一個網站從一開始就策略錯誤，根本性的吸引到錯誤的目標族群，請問這些數字難道會明白指出你們網站的目標族群或是定位根本就有錯嗎？除非一個經驗老到的品牌或是網站行銷高手出現，幫他們解讀數字背後隱藏的秘密，告訴他們Yo！打從一開始就錯了，分析個屁，否則我看大部分的狀況是看著這些數字說笑話我要說的是，如果data不正確，或是樣本數字本身就存在著問題，怎麼分析都沒用如果你發現：1.？為什麼我的目標對象訂在大學生卻跑來白目小學生？2.為什麼我認真分析了網站數字，卻老是達不到我預期的行銷結果？3.為什麼大家忙得半死卻感覺不到有顯著的成果？我就建議你，徹頭徹尾的把腦袋清空，一切成見歸零的重新去思考網站本身的問題，會出現上述情況，往往就代表你的網站打從一開始就有根本性的重大問題存在，所以數字幫不了你大家忙的半死也像是做白工；基本上，個人覺得，目標對象訂在A卻跑來B，就是個非常嚴重的警訊，因為大多數的情況下，B的消費力多半不如A當這種情況發生時，當務之急應該是立即查出網站本身最根本的核心問題在哪裡，徹頭徹尾的修正掉；不過最常看到的解決方式都是將預定的行銷策略調整為目標對象為B，這顯然是比較無言的作法，面對會執迷不悟排除萬難做出這種決定的決策者，我大概都不會再對這種人談論行銷，因為根本是拿黃金往大便裡面丟那麼，什麼樣的數字真的會有用？其實我真的沒有答案，因為重點一直不在數字，而是在數字背後的意義，如果你有那麼多時間可以去看著數字鑽研那多出來的10萬筆PV哪來的，為什麼不從人性的角度去分析你的行銷策略該怎麼打動他們引起共鳴？行銷的意義就是在和目標對象溝通，如果連目標對象的行為與想法都無法了解，又該如何讓這些人認同你所提供的網路服務？數字是給不懂行銷也不懂人性的人看的，如果你了解人性，你就會知道數字的意義在哪裡，甚至你也會發現，不需要數字其實也能夠正確的行銷，因為人性就是行銷的答案Filed under: 網站該有的企劃腦

Question 4

HTML5網頁設計對廣告領域產生的重大影響

Accepted Answer

據國外媒體報道，紐約富媒體廣告技術公司Crisp Media的首席技術官澤維爾�法康（Xavier Facon）在知名科技博客讀寫網（readwriteweb）發表署名文章，稱HTML5影響最大的領域之一是廣告，以下為全文摘要：關於HTML5對於網站建設的好處，人們已經寫過了很多文章但是HTML5更微妙也更有趣一個方面是它在廣告擴展性上具有令人難以置信的潛力（特別是在發佈商和廣告主希望在各種新穎華麗的設備上顯示創意廣告的情況下）因此HTML5正在手機和平板設備上快速地普及起來，並且成為了改變移動顯示廣告遊戲規則的一個重大因素為什麼現在HTML5在廣告方面的潛力顯得特別突出呢？因為就在這個月，一般的廣告投放平台（比如谷歌的DoubleClick DART廣告服務平台和知名發佈商使用的各種其他平台）可以跟蹤移動設備上的印象數了這種方法被稱為客戶端計數（client side counting），大約10年前，當桌面廣告服務器在web上開始使採用客戶端計數方法時，它帶來的影響是巨大的，因為它讓廣告主樹立了對數字廣告衡量指標的信心這裡我們不談較為深奧的技術問題，而是要看到，移動客戶端計數的出現對於移動顯示廣告來說非常重要因為廣告機構要想輕鬆地規劃創建和跟蹤移動廣告宣傳活動，測量問題一直都是第二大問題，當然最大的挑戰是製作出可以投放到大量移動網站和應用上的更好的廣告有一段時間，內容發佈商測量的移動印象數和廣告機構報告中的這個數字存在著巨大差異，幾乎威脅到了移動顯示廣告的上升勢頭很多發佈商仍使用一個過時的服務器端方法來測量印象數，而廣告機構的報告是由系統通過設備端的JavaScript觸發追蹤器來追蹤的印象數的兩者之間的差異高達20%至50％跟桌面端的情況不一樣，HTML5在移動設備上沒有遭受到來自插件（像微軟的Silverlight和Adobe Flash）的重大挑戰對於快速增長的手機和平板電腦類別來說，開發人員已經紛紛開始使用HTML5，因為它易於發佈，具有強大的圖形能力和靈活的音頻/視頻功能即便是插件技術（比如Flash）的福音傳播者也會贊成，為一項工作選擇合適的工具意味著使用最簡單的工具來滿足你的所有要求，這正是HTML5在手機廣告領域的優勢所在但在有一段時間中，這個優勢並不是那麼引人注意僅在去年，移動廣告宣傳活動的創意工作往往由一些專門公司完成解決方案部分上是專有的，廣告服務器和具體的專有廣告單元捆在一起這種狀況讓移動媒體購買過程變得相當碎片化，以至於要開展一個大型的宣傳都不太容易要投放一個廣告到移動應用或在移動網站上，也存在著設備技術碎片化的重大問題需要克服即使是只在最新的智能手機系列上做廣告，也需要考慮各種屏幕尺寸，好幾種操作系統，幾十個瀏覽器版本，上百款設備型號而這就是HTML5可以發揮優勢的地方在移動瀏覽器上展示廣告單元的Web容器也包含在本機應用程序中，而且Web容器為把廣告投放到不同的平台上提供了一種一致性一個很有威信的廣告行業協會名為ORMMA（開放移動富媒體廣告），它去年讓工程師們開發標準API（應用編程接口）和指南來協助高科技公司改善互操作性，現在一個由HTML5推動的，美觀新穎的互動廣告宣傳生態系統已經形成對於廣告創意機構製作基於HTML5的廣告內容來說，現在有Tumult的Hype，Sencha的Animator， Adobe工具，以及其他快速實現動畫和交互的服務對於傳媒機構和出版商，也有網絡廣告商行業協會互動廣告局（Interactive Advertising Bureau，IAB）和移動營銷協會（Mobile Marketing Association，MMA）在創建指南，定義格式，處理和手機富媒體廣告相關的一般互操作性問題蘋果公司看上去似乎只專注於本機技術，事實上蘋果使用了HTML5來提供iAds然而他們沒有提供一個使用HTML5的開放方式，所以廣告創意機構不能自定義廣告功能和用戶界面（而這是頂級創意機構提供的價值中的非常大一部分） 我們現在所處的階段就是HTML5廣告技術從像iAd這樣的廣告網絡脫鉤的階段我認為，開放的HTML5廣告的前景是一個開放的生態系統：在這個系統中，每一個廣告創意機構都可以為蘋果Android設備和越來越多支持HTML5的RIM諾基亞和Windows設備設計Web廣告和應用廣告雖然關於HTML5的大部分討論都是圍繞著網站建設以及網站和應用之間的軍備競賽展開的，但我們可以說，HTML5至今產生最大影響的領域之一就是廣告但是，現在離標準的正式完成仍有好幾年的時間

Question 5

深度分析HTML5網頁設計在移動開發方面的發展狀況

Accepted Answer

最近，我有很多類似的交流對話，可能因為我正在開發一套HTML5的應用吧就像2005年的AJAX，HTML5這個術語現在還沒有被清晰地定義，在未確定這個新技術有什麼優勢前，它就已經被四處套用，甚至投入運營如果你在一間被熱衷新技術的管理人掌控的公司裡任職，如果你走運，那麼漫畫人物呆伯特先生可能非常願意坐在你隔壁的小房間兩種看法當人們討論移動設備上的HTML5技術時，他們通常只會有兩種不同的看法從感性的角度來看，HTML5技術的渲染過程主要是由瀏覽器內嵌HTML5解析器的應用程序 (如PhoneGap)支持書籤打開方式的應用程序又或者是移動手機產品(iPhone和iPad)進行的這種技術的好處就是能重用現有的網頁設計，Web開發人員也更容易上手，同時產品具備更高質量，更適用於多平台產品也更易於調試和修正錯誤，並且，版本更新會更快此消彼長，優勢是它的功能，如果你像PhoneGap一樣使用內嵌的架構，那麼你會少很多麻煩事，劣勢就是它的表現，這也是HTML5技術面臨的最大難題從理性的角度來看，HTML5技術就是使用JavaScript引擎直接控制本地功能，改變移動設備上的瀏覽器組件而HTML5應用上的表現問題更多是由HTML/CSS渲染技術控制的，而不是由JavaScript解析生成的如果使用正確，HTML5技術無疑可以給予你大量新增的表現效果目前使用HTML5技術的例子包括Appcelerator TitaniumMobage/ngcoreGame Closure以及PhobosLabsNode.js工具包以PhobosLabs的項目為例，當這個項目是使用WebKit的JavaScriptCore組件完成，在設備端使用OpenGL渲染界面，而在開發時使用HTML5的canvas組件的API開發這就是說，開發人員可以在一個對canvas有良好支持的桌面瀏覽器內開發和測試他的HTML5遊戲，並且當他將這個遊戲放到移動設備的瀏覽器打開時，也會出現同樣優秀(甚至更優秀)的表現效果這種用HTML5開發的效果跟使用Node.js工具包開發的效果很相像，使用Node.js時，只需啟用JavaScript引擎，而你僅需把你需要使用的Node.js組件添加到你的應用即可Appcelerator的Titanium詳述了HTML5技術的概念，給我們展現了一個完整的UI工具的抽像層，這使得它可以被應用到生成其他遊戲產品意即一個HTML5應用開發人員可以通過Appcelerator的JavaScript UI庫創建按鈕，而Appcelerator的內部邏輯會將這個按鈕轉換為iOS的原生界面按鈕我們可以通過JavaScript控制界面上的原生按鈕理論上，開發人員可以不需要寫一句Objective-C代碼HTML5技術有它的優勢，當你依然在使用JavaScript編寫代碼時，你可以跟那些煩人的HTML/CSS佈局邏輯和樣式聲明說再見你還可以跟那些優秀的調試工具說再見但這個技術也有蹩腳的一面，像HTML5的遊戲API Mobage就存在一些小毛病，canvas組件可以在屏幕相對小一點的界面順利顯示，但如果屏幕稍微變大一點，就好像Appcelerator的例子一樣，在調試時，你還需要考慮界面層額外的複雜性在這裡有很多Appcelerator的負面評論，如果你能把上面的幾點記在心裡，那麼那些負面評論其實都可以被理解問題還在瀏覽器開發一個完整的HTML5手機應用的首要難題就是運行速度過慢而第二大難題就是非常愚蠢的工具束縛，許多組件或多或少在不同瀏覽器都存在一些漏洞，如jQuery Mobile的導航組件iOS的innerHTML組件的漏洞，所以你需要減少功能去避免出現漏洞，又或者你願意花一些時間去修復這些漏洞你可以自己做個實驗，當你在一個iOS應用裡僅使用一至兩個界面庫時，再加上你自己寫的少量JavaScript代碼，沒有更多的JavaScript庫，你會發現這個HTML5應用運行得流暢而完整，但卻沒什麼功能PhoneGap的iOS項目僅需要1至2秒的時間就可以在iPhone 3GS上發佈運行這個事實可以告訴你，最基本的HTML5應用運行起來真的非常流暢所以，當你發現你的HTML5應用的某些操作花費了10-15秒時間時，又或者花了15秒時間才加載完整個程序時，這都是一些JavaScript界面庫給拖累的兩套有代表性的UI庫一個HTML5手機應用程序員需要的通常只有那麼兩樣東西：第一樣就是原生平台和網頁界面的嫁接層；第二樣就是手機UI庫PhoneGap近年已逐漸成為默認的嫁接層選擇，它允許HTML5應用通過JavaScript調用移動設備的照相機訪問手機通訊錄和讀寫文件而最受歡迎的手機UI庫就包括由jQuery Mobile和Sencha TouchjQuery Mobile是去年才創建的一個項目，所以它是非常新的，很顯然，它也不夠成熟jQuery Mobile的導航欄組件就非常糟糕，翻頁時明顯比原生的翻頁功能要慢，如果你不刷新瀏覽器，你就沒有辦法遞增列表內容而在PC桌面平台測試時，它的CPU耗用率也是非常高(版本是jQuery Mobile的alpha 4)我的項目使用它，主要是考慮到相對簡單(比較容易破解)，因為這個庫是基於jQuery構建的，所以任何一個資深的網頁程序員都很容易上手據說Sencha Touch比jQuery Mobile更成熟更快但我一看到高複雜性的東西，我就不會不自覺地厭惡它們因為潛意識會告訴我，有很多功能我根本不會使用到，但卻強制加載這些額外的東西到我應用裡，讓我應用整體表現差了很多儘管我可能是錯的，PhoneGap應用頁中最強大的手機應用是IGN Dominate，它運行得很流暢並且它就是基於Sencha Touch開發的，但我確定他們肯定花了很多時間去優化這個產品調試和修改在上面談到的開發HTML5應用時，許多人可能都忽略了一點，其實調試或修改一個HTML5應用是很簡單的任何一個曾參與過大型HTML5開發項目的開發人員都可以告訴你，調試和維護幾乎佔了整個項目生命週期的80%的時間，甚至更多這就是說，當你聽到一個開發工具宣稱可以在15分鐘內開發一個聊天應用時，那麼它可能只是能讓你在15分鐘內解決20%的工作，剩下的80%，你可能得耗上3倍以上的精力才能完成HTML5手機應用在調試時存在觸碰問題，因為無法打印出控制台的日誌所以，如果JavaScript代碼存在漏洞或者報錯，你需要alert()報錯，否則你可能沒法發現PhoneGap修正了這個問題，它可以通過XCode的控制台打印控制台的調式日誌，但功能依然很有限目前最有效的解決方案就是weinre儘管漏洞百出，但它就是能跑起來，有了它，你還能斷點調試你的手機應用的UI，weinre是基於WebKit的網頁檢查器的，它的調式工具後台通過遠程服務端獲取和替換調試代碼兩至三周前，我曾對網頁檢查器的代碼做過一些研究，我發現把它轉換為一個遠程調試器真的不難Weinre接下來幾個月的開發進度將會更快，某些人可能還會開發出它的替代產品我們拭目以待未來幾年，移動應用開發中的HTML5技術的調試工具無疑變得更加重要，它可以解決大部分開發人員80%的工作量你想要用Objective-C改變你的界面設計嗎？編輯，再編譯，運行重複這三個步驟直到你滿意為止如果再編譯步驟很多，這可能會耗上一天的時間用HTML5技術去實現？用weinre編輯一些CSS屬性並測試，你甚至不用關閉應用，你就可以繼續調試一定程度上，你還可以在桌面瀏覽器調試你的HTML5手機應用但相信我，你的應用產品最終可能只會在移動設備上爆發一大堆漏洞而已，所以你必須得使用weinre不幸的是，人們常讚美某個工具包或者某項功能，但你卻很少聽到有人誇讚某個調試工具非常棒所以我猜測就算它是HTML5手機程序員最常用到的工具，我們也很少聽到它被討論到總結：現在的狀況儘管這篇文章真的有點長，但我還是得總結一下：在移動設備開發HTML5應用只有兩種方法，要不就是全使用HTML5的語法，要不就是僅使用JavaScript引擎JavaScript引擎的構建方法讓製作手機網頁遊戲成為可能由於界面層很複雜，我已預訂了一個UI工具包去使用純HTML5手機應用運行緩慢並錯漏百出，但優化後的效果會好轉儘管不是很多人願意去做這樣的優化，但依然可以去嘗試HTML5手機應用的最大優勢就是可以在網頁上直接調試和修改原生應用的開發人員可能需要花費非常大的力氣才能達到HTML5的效果，不斷地重複編碼調試和運行，這是他們首先得解決的一個問題是的，HTML5的移植非常簡單，但我假設每個人都會讓這變成一個自動化操作

Question 6

網頁設計為何要做關鍵字優化

Accepted Answer

經過關鍵字優化的網頁設計與普通的網頁設計，最大的分別就是經過關鍵字優化的網頁對於搜尋引擎的排名會比較好也會比較穩定不過，關鍵字優化的先後次序是重要的關鍵字優化網頁設計會先計劃如何對網頁進行關鍵字優化再製作網頁而一般的網頁設計只會著重設計，但忽略了 網路行銷 中重要的一環：網頁宣傳 要記住，關鍵字先優化網頁設計與網頁設計再關鍵字優化是不同的，我現在就列舉數點以說明為何關鍵字優化網頁設計會比較好關鍵字優化網頁設計的好處1. 節省金錢普通網頁設計公司不會關心您的網頁推廣，網站維護和其他的東西如果您完成網頁設計後再進行關鍵字優化的話，關鍵字優化公司可能需要重建您的網頁，從而會向您收取更多金錢！因此，關鍵字優化網頁設計，會因為免卻了重複的工作，而降低您的成本2. 節省時間因為省卻了重複的工作，例如市場營銷研究，網頁重建，編寫網頁內容等，所以可從中節省不少時間，可提早公佈您的網頁3. 關鍵字優化更有成效你不應該推出一個還尚未完成好的網頁搜尋引擎 對十足準備的網頁建立索引的效果，會比未有充足準備的網頁更好4. 較好的維護當關鍵字優化和網頁設計也是來自同一間公司的話，他們便能夠作出更好的維護服務，因為當您對關鍵字優化 或網頁設計需要變更時，他們也會較為熟悉您的網頁而令服務質素提高5. 平衡關鍵字優化及網頁設計人類喜歡圖片，但搜尋引擎比較喜歡文字關鍵字優化網頁設計便平衡了關鍵字優化和網頁設計，使您的網頁不會過份設計而忽略了網頁推廣那部份如何做關鍵字優化網頁設計先關鍵字優化內容，後網頁設計！即是你想製作flash，圖片來代替文字或其他令人印象深刻的東西之前，你應該先考慮關鍵字優化當然，美麗的設計是令人印象深刻的不過，如果你的網頁排名在100位或以下，客戶又怎麼能找到您的網頁呢以下是進行關鍵字優化網頁設計的步驟參考：1. 向客戶收集資料- 製作網頁的目的- 目標瀏覽者- 資源2. 市場調查- 主要競爭者- 關鍵字優化關鍵詞- 市場趨勢3. 網頁內容準備- 新而獨特的內容- 關鍵詞密度- 連結度4. 網頁架構- 對搜尋引擎友善的URL- 網頁內連結5. 網頁設計- 避免過多圖片及FLASH6. 網頁維護- 定期更新網頁內容資料來源：primolution

Question 7

網路行銷與網頁設計的相互關係為何

Accepted Answer

網頁設計中的所有問題對網路行銷效果都會產生任何關聯，無論是網頁設計版面網站下載速度還是網站導航系統的方便性等等，對用戶的瀏覽效果會產生直接影響，從而影響到網站在訪問者心目中的形象，也就是說，網頁設計效果會影響到一個網站的品牌形象，甚至直接影響網路行銷任何關聯這裡列出了網頁設計對網路行銷效果影響比較重要的7個方面的問題嚴格說來，網頁設計中的所有問題對網路行銷效果都會產生影響，無論是網頁佈局網頁下載速度還是網站導航系統的方便性等等，對使用者的瀏覽效果會產生直接影響，從而影響到網站在訪問者心目中的形象，也就是說，網頁設計效果會影響到一個網站的品牌形象和直接行銷效果一個非常直接的證據是，網頁設計還影響到一個網站在 搜尋引擎 中的表現，最明顯的是網頁使用框架結構（也稱為視窗切割）以及網頁標題和META標籤另外，網站下載速度和導航系統對網路行銷同樣具有非常直接的影響所以，這也是我們將 網站設計 中的部分內容作為網路行銷的基本環節的主要原因1.框架結構對搜尋引擎及用戶的影響為了美化網頁佈局，許多設計人員喜歡使用框架結構來定位，尤其是一些內容相對較少的網站但是，將一個頁面劃分為多個視窗時，因為破壞了網頁的基本使用者界面，很容易產生一些意想不到的情況，在採用這種方法時，需要特別小心採用框架結構，不能為每個網頁都設置一個標題（TITLE），更為糟糕的是，有些搜尋引擎對框架結構的頁面不能正確處理，會影響到搜尋結果的排列名次從網路行銷的角度考慮，盡量不要使用框架結構其實，只要簡單地分析一下一些知名網站的設計，就不難發現，真正優秀的網站很少採用框架結構2.網頁標題和META標籤網頁標題和META標籤對搜尋引擎產生最為直接的影響，然而許多網站並沒有對此加以關注，並認真對待，因此我們在許多網站會看到一些網頁為”Untitled Document”，一些網站甚至連主頁都是這種情況，給人的感覺不僅僅是網站設計不夠專業，最重要的是影響在搜尋引擎結果中的排名由於網上同類的網頁總是很多，每個網站都希望自己能在搜尋引擎中的排名靠前，最好能在第一頁中，而排名在第三頁之後的網頁幾乎沒有被看到的可能，因為用戶不可能有那麼大的耐心，也不會有大量的時間來查看每一個搜尋結果，往往只查看前三頁的內容其實，為每個網頁設置一個標題，並完善META標籤並不複雜，只是順便的一點工作而已，但是對於網站的推廣具有非常重要的意義有關內容將在”搜尋引擎註冊與排名”相關章節中進一步介紹3.網站下載速度網站下載速度快是任何一個優秀的網站必須具備的基本要素如果首頁下載速度緩慢，甚至30秒鐘都無法完全打開一個網頁，相信絕大多數用戶不會有那麼大的耐心，說不定早就離開你的網站了雅虎網站創始人的楊致遠曾說過，為打開一個網頁，網民最大的忍受時間為8秒，如果超出了這個時間，使用者就會走掉（作者註：隨著網路頻寬的增加，使用者對於網站下載時間的期望也越來越高，有關網站下載時間問題的討論，請參考作者2004年9月的一篇文章網站設計參考：網站下載速度多快才算快）一些網站在設計首頁時總希望設計得非常美觀漂亮，動感十足，從而引起訪問者的注意，因此，採用許多新的設計手段製作內容複雜的動畫，利用大量色彩豐富的圖片，甚至自動下載音樂或視頻文件，結果是造成網站首頁字節數很大，少則100K以上，有時甚至達到幾百K，結果自然是造成使用者的流失這樣的網站即使付出很大的代價來進行推廣，也很難留住使用者，因為使用者來到一個網站，主要是為了瞭解網站所提供的訊息，或者查詢自己感興趣的內容，並不是看你的首頁是否漂亮因此，由於網頁設計的因素造成的下載速度慢是網路行銷之大忌4.網站導航系統假定你作為一個使用者，首次來到了某個網站，但是由於網站導航系統設計比較混亂，在瀏覽了幾個網頁之後，不僅回不到首頁，而且，由於太多的新開視窗，在你關閉多餘的視窗時也關閉了首頁的視窗，你一定會為這樣的網站設計感到生氣事實上，網站導航系統比較混亂或不合理的現象在網上非常普遍，由於導航系統設計不合理將造成使用者迷失方向，結果可能丟掉了潛在顧客，增加了顧客服務的工作量，顧客的滿意度自然也降低了典型的錯誤做法有：1.使用沒有文字說明的圖標導航，只有在鼠標點到圖標上才會出現提示文字，有時需要查看多個圖標才能找到需要的連結2.在首頁設置了導航說明，在其它頁面的導航很不完整，使用者甚至不知道如何回到首頁（事實上，只有大約50%的瀏覽者是由其他網頁進入首頁的）3.使用容易引起混亂的說明文字4.點擊連結時在新視窗打開或在當前瀏覽器頁面打開的規則比較混亂；5.過多到其他網站的連結5.產品分類與查詢對於大部分 電子商務 網站來說，合理的產品分類和方便的產品查詢系統是至關重要的但實際上，並非每個網站的設計都很完善，有些網上購物者甚至很難找到自己所需要的商品如果使用者找不到合適的目錄或者查詢沒有結果的話，這個顧客也許很快會離開這個網站，他最有可能去的地方，很可能是競爭者的網站，相信這是網站經營者最不願意看到的結果6.產品說明產品的詳細說明對顧客購買決策非常重要，網上零售類的網站更應該給予高度重視，當選定一件產品後，仔細查看說明是必不可少的一個步驟，即使是一本書，顧客通常也會看一下內容提要作者簡介目錄之類的內容，如果是一件價值較高的產品，想必更希望瞭解詳細的資料：外觀功能體積重量品質等等2001年6月份出台的Yahoo!/ACNielsen互聯網信心指數發現了一個令人詫異的結果，”方便性”並不是消費者在線購買的主要動機，過去很多研究機構和分析人士卻一直這樣認為根據這項研究，驅使消費者在網上購物的主要原因在於能夠對產品進行研究並獲得大量相關訊息，可以比較價格，並且可以從大量的產品中進行選擇然而許多網站根本不能滿足消費者的要求，結果，由於網站提供訊息少也會成為網站效果不佳的原因之一同樣道理，對於其它類型的網站，當對自己的產品和服務進行介紹時，應盡可能地詳細，在網頁上說明使用者所希望瞭解的一切問題，不要指望使用者遇到疑問時再咨詢，得到滿意回答之後才選擇你的產品和服務，因為，在網上的同類網站可能很多，用戶很快會到其它網站尋找相應訊息7.網站的外觀從實際效果來看，網站的實用性是最重要的，很少有人對YAHOO和Amazon.com網站的外觀設計讚不絕口，實際上，很多國際著名網站的外觀看上去可以說很簡陋，但是，千萬不要因此而忽視了網站的外觀設計，因為我們不是YAHOO，沒有足夠高的品牌知名度，使用者來到網站，他們會通過網站對你的公司形成一定的印象，這在一定程度上會影響到企業形象甚至最終的網路行銷效果雖然並沒有統計數字來說明網站外觀對企業經營效果有多大的直接影響，但對網站的外觀給予必要的注意還是很有必要的有時，在訪問某個網站時你會做出該網站屬於小型企業的判斷，這是因為網站的外觀結構和內容往往會暴露出相關訊息，例如：不協調的顏色怪異的字體主頁內容貧乏錯誤的連結不同網頁的格式各不相同聯繫方式只是一個簡單的”mailto:”的連結，而且，很可能有些網頁連個標題都沒有，展現在訪問者面前的是”Untitled Document” 這些可不是好現象，因為對於那些真正希望將網站作為一種行銷工具的小企業來說，這些問題可能會讓訪問者對企業失去信心！爭取每一個潛在顧客都不容易，尤其應該取得每個第一次來訪者的信任，他們對公司瞭解是從網站開始的，而且一定程度上是從外觀來進行判斷當然網站的外觀不是根本要素，如果一味強調外觀的精美，可能會影響網站其他方面的性能，結果是本末倒置，得不償失資料來源:拍樂得SEO行銷

Question 8

製作商務網頁時，你需要注意的5大設計原則

Accepted Answer

1.使用最熟悉技術流行的技術不一定好用，使用開發人員最熟悉的技術才是上策，如果使用開發人員不熟悉的技術，邊學邊寫，而且寫的不好，等開發完畢蚊子都睡覺了Java好，Python 牛，不一定要選擇，如果你熟悉php就用php，如果熟悉asp就用asp用什麼都無關緊要，開發出來好的系統才是正道在開發前要做充分的考慮，綜合評估下團隊的開發能力，技術方向還要考慮硬體和軟體成本，資料庫動不動就oracle，oracle固然好，但是使用成本還是比較高，小型網站大可以使用mysql等免費軟體可以使用比較便宜的伺服器2.系統結構要清晰雖然是小型網頁程式 ，也應該花點時間來確定系統架構，架構不一定是複雜大型網頁程式才考慮的事情，小型網頁程式也應該在架構方面下一定功夫一定要做到層次清晰，業務分明就算在一台伺服器上面甚至在一個工程中要把業務和展示層嚴格分開如果什麼功能都集中在一起，到時候要增加功能擴展業務將會無比痛苦也可以考慮把不同的業務按照一定規則分開，有利於以後擴展其他業務嚴格分層開發，也將有利於未來系統壯大時能一步一實現分散式現在很多網站是用php來開發，很普遍的現象是面向過程的寫法，把一件事情從頭到尾在一個程式中實現其實php也好，asp也好，java也好，都可以嚴格把業務和前端分開，這樣增加功能也好，維護也好也比較方便3.功能要做細曾經有一次和一位業內非常有名的技術大咖聊天時，談到一個商務網頁程式開始時的想法他剛好在創業初期後來給了他一個建議是寧可功能少些，也要把放上網站的功能做細些，做完善，給用戶好的體驗不要一味模仿大型網站，功能一大堆，然而每個功能不是缺腿就是少胳膊，要不就是模仿又模仿不好，最後不倫不類不求多只求精在美術觀感上面多下功夫，儘量給眼前一亮的感覺，愛美之心人人有，漂亮的 網頁設計 總是能吸引人的4.在一定程度上使用緩存顯然現在大型網頁程式都常用緩存，小型網頁程式也可以考慮，畢竟能提高訪問速度，提升用戶體驗，也在很大程度上減輕資料庫壓力業界非常有名的memcached是不錯的選擇可以把常用的列表，常用基本資訊，特別是首頁的展示資訊儘量放到緩存中，從而提高首頁的訪問速度，給用戶一個非常好的初步印象5.做適當的分析分析可以包括日誌分析，性能分析，用戶分析，應用軟體分析，資料庫分析等定期對日誌進行分析，分析系統的bug和存在隱患對性能分析能為日後優化擴展提供有利的幫助做適當的用戶分析能為網站業務決策提供一定幫助做應用軟體分析，能為日後選擇那些軟體提供充分的準備6.進化最後引用Qcon2009大會資料的幾句話：‧進化原理- 尋找最適合的‧退化原理- 簡化不必要的‧好的架構是實踐出來的資料來源:巨群資訊

Question 9

網頁程式設計師,你需要熱忱與興趣才能一路向前邁進

Accepted Answer

網頁程式設計師是一個很奇特的行業，在這行之外的人們，多半認為程式開發是一門不錯的職業，既有科技新貴的光環罩頂，又有外界視為還不錯的收入水平有趣的是，我們卻又時常聽到這行裡頭的人們，抱怨所從事的工作例如自認是廉價的苦力勞工，或者優沃的金錢回報，也換不回長期熬夜造成的爆肝之類的怨言我認為網頁程式設計師不是廉價勞工，待遇是因能力而調整的而證照只是進入這一行的敲門磚，要能堅持下去，需要高度的興趣及喜歡變化的心同樣是撰寫程式，待遇卻會因能力而有天壤之別我時常在一些以網頁程式設計師為主的網路論壇上，看到許多網頁程式設計師發問關於薪資的問題，內容不外乎是詢問網頁程式設計師的薪資水平不過，網頁程式設計師這一行，就和其他的行業一樣，同樣是撰寫程式的工作，待遇也有可能天差地遠這是因為網頁程式設計師之間的能力高下，可能有著天壤之別，例如一流的網頁程式設計師，生產力能以一抵十尤其充滿技術難度的 程式設計 工作，靠人海戰術很難奏效，因為它充滿著高度的技術不可替代性，某個網頁程式設計師能完成的工作，換成其他人，可能不論用上多少人都無法達到如果你只是人體程式碼產生器，終日撰寫著重複性質的程式碼，卻又無法藉此累積經驗昇華到另一個境界，那麼自然處在容易被取代的位置上如果說，最好的投資是投資在自己的知識及技能上，那麼程式設計工作，絕對是這句話的最好印證之一與其斤斤計較些微的薪資差異，不如花心力鍛練自己，才是提升薪酬的最重要關鍵程式設計工作需要興趣支撐，否則會很痛苦談到了薪資，不免要談到為什麼要踏入程式設計軟體開發這一行有些人之所以成為網頁程式設計師，是因為這一行最起碼有著尚可的薪資水準，甚至還會被外界誤以為是所謂的科技新貴但是，倘若只是為了這個原因而選擇踏上這條路，我認為這條路將會走得十分辛苦這類工作需要以喜愛程式設計為支撐，有兩個理由第一個是，當你喜歡撰寫程式時，寫程式本身就是樂趣，有時候，你甚至不認為自己是在工作，而是在玩樂對天生的網頁程式設計師來說，玩樂與工作是程式設計的一體兩面撰寫程式的同時，既在玩樂，也在工作但是，相反的，倘若你並不是真心喜歡程式設計，只是單純地為了獲得金錢上的回報，而進入這一行，那麼這份工作很有可能為你帶來許多痛苦或者，即使你很喜歡程式設計工作，也能樂在其中，但它有時也不免會為你帶來痛苦的感覺（例如急迫的時程頻繁的需求變更……等），但是，如果你喜愛程式設計工作，以及完成程式時的成就與滿足感，就能舒緩痛苦的感覺第二個原因是，程式設計能力的精進和投入的時間，有很大的正相關我之前曾經提過，程式設計有時就像練功夫一樣，在平凡無奇日積月累的蹲馬步中，方能領會進一步出力使力的法門倘若你並不喜歡程式設計，那麼就比較不可能投入較多的時間，自然很難獲得持續成長的動力而無法持續鍛練自己的能力，再連接到金錢回報的問題上，自然又更難取得優沃的薪資這成了雞生蛋蛋生雞的問題證照是一個敲門磚，證明我原本就擁有的實力現在坊間有許多關於程式設計證照的課程，許多人會著眼證照在職場上所能帶來的加分，而報名相關的課程，並且參加證照考試的確，對用人主管來說，證照是對於你能力的簡單評斷標準但是，只要是考試，就很容易流於紙上談兵的情況因為，在準備證照考試的課程學習中，你可能會將重心放在出題方向，而不是放在真正學好某項程式語言或技術的核心本質之上這麼一來，即使通過了證照考試，也因為證照的關係，取得程式設計工作領域的入場券但是，程式設計是一門完全講究實戰的工作，要面對實際的各種考驗，如果你只有紙上談兵的能力只能對付證照考試的題庫，是很難在實際的工作中有所發揮的證照，變成了一種倒果為因的產物但任何程式設計技術的學習，都應該把焦點擺在它的核心本質上正確的觀念應該是我要學會這樣的技術，幫我解決真正的開發問題證照只是一個敲門磚，證明我原本就擁有的實力，而不是我要學會這些題目的解答，以便通過證照考試，讓人以為我有實力現今，許多擁有證照的網頁程式設計師，無法解決實際的開發問題，使人對證照的可信度，在心裡預先打了折扣最好有一顆喜歡變化的心許多人會談程式設計需要什麼樣的思維能力但除了這項條件外，我覺得程式設計者在性格上最好喜歡變化有些人的個性就是喜歡穩定，不喜歡工作有太多的變化，最好每天處理的工作是日復一日年復一年的相同模式但是，從事軟體設計工作很難如此你所面對的，是會不斷推陳出新持續變化的技術世界，以及不易掌握又善變的使用者需求我們可以說，軟體開發就是一門掌握變化面對變化的領域倘若你喜歡變化，不喜歡每天面對高度規律性的工作，那麼就很適合進入這個領域對一個喜歡變化的人來說，從事程式設計形同如魚得水有些人厭惡苦苦追趕新技術，但有人認為鑽研新技術，能帶來無比的樂趣相較而言，後者的性格更適合擔任這項工作網頁程式設計師不能對陌生的事物感到恐懼，因而抗拒面對應當要把持續發生的新事物當做是挑戰，並且學習去駕御它因為新事物不是痛苦的來源，而是玩樂的對象建立階層性體系，有助高階網頁程式設計師展現價值最後，我想探討網頁程式設計師的下個工作階段該做什麼許多人有寫程式是廉價勞工的刻版印象，所以他們會希望轉換到管理職雖然我也認為由網頁程式設計師出身的管理者，在管理技術團隊上，存在更多的優勢但我不認為，所有的網頁程式設計師都應該朝向管理職發展程式設計應當是可以做為一生的志業，而這樣的例子在國外是很常見的，只不過在臺灣，程式設計似乎是一門只適合年輕力壯的小伙子來幹的青春飯，網頁程式設計師們得在年華老去前，提前想好其他出路很重要的關鍵之一，是因為我們沒有形成一個階層性的網頁程式設計師體系，讓高階的網頁程式設計師去處理重要而關鍵的程式碼，而使低階剛入門的網頁程式設計師，去處理比較平凡無奇重覆性高的程式碼（事實上，這也是蹲馬步的功夫）在我們的軟體開發產業中，網頁程式設計師大多沒有層級的差異，時常被簡稱為PG（意指Programer），做的工作都一樣，就是產出程式碼這樣的體系，較難讓高階網頁程式設計師的經驗與技術妥善發揮建立起網頁程式設計師的階層體系，不僅讓網頁程式設計師在工作上有明確的晉升路徑，不會一味尋求轉換至管理職務，也能讓高階網頁程式設計師可以將力量發揮在最關鍵的地方寫程式是快樂的一件事，當做終生的志業更棒即便你已經是位居架構師的角色，偶而轉換工作目標，扮演一下網頁程式設計師的角色，寫寫程式試試新的技術，不至於與新技術脫節，不只可以深入了解新技術的細節，自然也會有助於你建立設計出更好的架構資料來源: 巨群資訊

Question 10

網頁設計與訪客瀏覽介面的探討

Accepted Answer

實際上，瀏覽器比螢幕解析度對網頁設計的影響更大，因為不同的瀏覽器對網頁的HTMLCSS和Javascript都有不同的解釋，這給設計師帶來了很大的麻煩HTML相對比較簡單，瀏覽器之間的差異比較小，而CSS的問題就很大了，“前沿視頻教室”中也曾經幾次談論過在CSS設計中，如賀解決瀏覽器差異的問題，如果有興趣可以參考下列三篇文章:關於CSS在不同瀏覽器的調試經驗CSS調試技巧五則，兼談“提問的藝術”以及再談瀏覽器的相容性上次文章都是從技術角度討論如何設計出具有更好相容性的網頁，而今天我們則從資料統計的角度，看看目前各種瀏覽器的使用狀況到底如何1：網頁中廣泛使用的三種標準技術——HTMLCSS和Javascript，瀏覽器廠商由於各自的歷史及現實原因，對標準的理解有所差異，導致各種瀏覽器對網頁代碼的解釋不盡相同，從而同一個頁面，在不同的瀏覽器中，可能會產生不同的效果，這給設計師帶來了很大的麻煩2：根據國際上的比較廣泛和權威的統計，最近（2008年3季度）各主流瀏覽器的地使用比例根據國際範圍來看，IE的份額僅為72%，Firefox的份額已經接近20%事實上，歐洲各國Firefox的使用比例非常高，以及各國2006年Firefox的使用比例根據瑞典在2006年，就有約40%的用戶使用Firefox3：不過，從我們自己的統計資料來看，中國的情況與上面的統計差異還是很大的與上次討論螢幕解析度的方法相同，這裏仍然使用我們自己的“前沿視頻教室”網站為例，以2008年9月的訪問者為物件，統計了3萬4千訪問者的瀏覽器使用比例在“前沿視頻教室”的訪客記錄中可以看到，IE仍佔據約90%的比例，而Firefox遠低於20%的國際統計值，而Safari則更是很少關於Google的新作Chrome，後面再稍加討論4：實際上，對於設計師而言，麻煩的不僅僅在於不同的瀏覽器之間的差別，即使同樣是IE瀏覽器，不同版本之間的差異也不小，因此，我們又將IE瀏覽器按照不同版本，分別統計從訪客記錄中看到，最令設計師頭疼的IE6還佔據60%的份額，短期內還得和它繼續戰鬥了！5：從各種瀏覽器的比例變化情況看，瀏覽器份額隨時間的變化遠小於螢幕解析度的變化，這是因為顯示器總是越大越好（有變化的需要），而且如果要換，買回來就用（更換也方便），而更換瀏覽器則對於大多數人來說並沒有很大的必要，而且還需要安裝，對於很多人也是一件麻煩的事情訪客記錄中看到，儘管IE的份額在降低，但是是變化速度實際上很慢，事實上，變化最大的是IE7很快地在奪取IE6的份額，不過我們只要還保證網頁適用於IE6，這個比例的變化對於我們意義不是很大6：對於CSS來說，最麻煩的並不是某個瀏覽器很難對付，最麻煩的是要同時保證網頁相容於各種不同的瀏覽器，儘管各種瀏覽器都聲稱自己是符合標準或者決心要符合標準，但是事實上，僅僅每個網頁都要使用各種瀏覽器測試一遍，就要花費很多時間，如果所有人都用同一個瀏覽器，就能使設計師省很多事了通常來說，我們建議中國的設計師，如果要製作一個比較重要的網站，應該確保在IE6/IE7和Firefox中正確顯示目前而言，我個人感覺這個標準還是可以的，因為從上面的資料中可以看到，這三個瀏覽器的份額總計96%以上，更為為重要的是，如果能夠保證網頁在Firefox和IE7中都正確顯示，那麼其他瀏覽器一般也都不會有什麼問題對於CSS設計，這裏再次提醒初學者，一定要先在Firefox中測試正確之後，再在IE中測試，此外，做一點就測試在多個瀏覽器中測試，然後再做下一部分，而不要一個頁面都做完之後，再在其他瀏覽器中測試，那樣會很麻煩7：而Javascript的差異，就比CSS更為複雜了，比如對事件的處理，DOM標準和IE使用的方法是完全不同的，普通開發者要自己實現對這些差異的處理，要花很多工夫，好在現在已經有了很多非常好的Javascript框架，比如大名鼎鼎的jQuery，通過使用jQuery可以把這些差異都遮罩掉，寫出統一的代碼，就可以正確地運行在不同的瀏覽器上了，這對於開發者來說，實在是幫助太大了8：最後，再說說Google的Chrome，畢竟是出自Google門下，一經推出，前沿視頻教室網站的訪問者中，就出現了1.8%的使用比例，根據我們做的一些簡單的測試，以前製作的相容於Firefox和IE的頁面，在Chrome中都沒有發現什麼問題但是也沒有體會出用Chrome有什麼特別之處，也許是頁面都過於簡單，體現不出來的緣故不過我們發現，在我們的統計資料中，Chrome的使用者並不是逐漸增加，而是在逐漸減少這顯然是頭兩天有不少人下載來嘗試一下，然後就逐漸不再使用了所以Chrome的情況，還需要慢慢觀察了資料來源：巨群資訊

Question 11

從臉書的剽竊官司看社群網站的網頁設計發展史

Accepted Answer

社交網站的概念可以回溯到40年前，身為目前最大規模的社交網站，Facebook身上看得到許多社交網站前輩的影子，但其創辦人祖克柏為何多次被指控竊取他人創意？facebook臉書效應大衛．柯克派崔克（David Kirkpatrick）／著；李芳齡／譯天下雜誌出版售價：360元祖克柏的臉書網頁設計多次遭指控為剽竊他人創意，其實，這種社交網站的概念是源自發展了四十年的創意早年為網路鋪設基礎的工程師，其實就已想像了類似臉書網站這樣的東西里克萊德（J. C. R. Licklider）和泰勒（Robert W. Taylor）在一九六八年共同發表的論文中寫道：線上互動社群將會是什麼模樣？這種社群將是由身處各地的成員構成，有時是以小群體形式聚集交流，有時是個人形式的聚集交流這類社群不是由身處同一地區者組成，而是由具相同興趣者組成這篇文章也浮現了社交網站的概念：你將不是發出一封信或電報，而是找出那些應該跟你的檔案連結起來的人大約十年後，有些人開始花時間發展這種線上社群，第一個在網路上吸引許多非科技領域使用者的社群服務網路，是一九七九年創立的Usenet，遠早於全球資訊網（World Wide Web）的問世Usenet 起始於杜克大學的線上公布欄系統，讓關注特定主題的群體張貼訊息，這個網路系統運作至今一九八五年，布蘭德（Stewart Brand）布利安（Larry Brilliant）等人在舊金山共同創設電子布告欄全球電子連結（The Whole Earth’Lectronic Link， 簡稱The Well）， 它的用戶蘭高德（Howard Rheingold）在一九八七年發表一篇文章，在文中發明了虛擬社群（virtual community）這個名詞來形容這種新體驗蘭高德在文章中寫道：虛擬社群是一群也許可以面對面或無法彼此面對面的人，他們透過電腦布告欄及網路的中介，彼此交流漸漸地，愈來愈多人熟悉電子溝通交流最早把這些概念傳輸給普羅大眾的是法國郵務局，一九八二年推出全國線上服務Minitel；接著，美國線上於一九八五年推出這種線上服務IBM 和西爾斯公司（Sears）於一九八八年創立商業線上服務Prodigy，但不久後，美國線上成為美國這塊市場的霸主到了一九九年代初期，普羅大眾開始使用電子郵件雖然，人們會在這類線上服務中建立其電子郵件地址通訊錄，但會員並不會指出自己真實生活中的朋友，或是在這些線上服務中建立跟朋友通訊的管道在接下來的十年，即時通服務也採相同形式：人們使用假名交流，而非使用真名全球資訊網問世後初期， 線上社群的概念再往前推進，諸如TheGlobe.comGeocitiesTripod 之類的網站服務出現，讓用戶可以設立個人網頁，有些網站還可讓個人網頁跟其他會員的網頁相連結祖克柏在初中時期於Geocities 設立他的第一個網站知名的收費約會服務網站Match.com 於一九九四年推出；Classmates.com 網站創立於一九九五年，後者旨在幫忙尋找失聯的同學及校友，人們在這網站上使用的是真名六度分離概念“把你的名片簿留在你的電腦裡，沒啥益處，我們把你的名片簿放到一個集中地若人人都把名片簿上傳此集中地，各位就能環遊世界了！現代社交網站濫殤六度網站（sixdegrees.com）創辦人Andrew Weinreich”現代社交網站紀元始於一九九七年初，紐約的新創網站六度網站（sixdegrees.com）推出採用真名的突破性服務六度網站是第一個試圖在使用真名的網友之間找出關係的網站，這在當時是很有遠見的一個事業概念這個網站的名稱源自一個未經證實的六度分離（six degrees of separation）概念：透過從你身邊朋友開始延伸的關係鏈，可以連結上地球上的任何人，平均而言，任何兩個人至多只要透過六個人的聯繫，就可以扯上關係從你身邊的朋友開始，連結至下一層（你朋友的朋友），再連結至更下一層（你朋友的朋友的朋友），如此延伸至第六層這個網站的創辦人是律師溫瑞奇（Andrew Weinreich）六度網站推出的一九九七年初，溫瑞奇邀請數百人聚集於紐約市的帕克大樓（PuckBuilding），在室內設立的二十台個人電腦上同步加入此網站成為會員溫瑞奇說：把你的名片簿留在你的電腦裡，沒啥益處，我們把你的名片簿放到一個集中地若人人都把名片簿上傳此集中地，各位就能環遊世界了！人們通常是在收到六度網站現有會員發出的電子郵件後，跟進加入這個網站，後來，許多社交網站也仿效這種招募會員的方法，在當時，這是革命性創舉網站推出時，有兩項重要特色：第一項特色是為我建立連結（connect me），若你加入某人的姓名，此網站就會建立你跟他及其他人的關係圖；第二項特色是為我建立網絡（network me），你可以列出你尋找的特徵，網站將找出符合這些特質的會員，例如，在某某地點是否有喜歡玩西洋棋的醫師不過，溫瑞奇現在感嘆：我們太早設立這個網站了，時機決定了一切當時，六度網站的發展與經營耗費甚巨，雇用九十名員工，購買大量昂貴的伺服器和甲骨文（Oracle）授權的資料庫軟體，並支付數百萬美元請賽皮恩（Sapient Corporation）和賽恩特公司（Scient Corporation）等網路發展顧問公司協助發展特色這些花費換得了什麼成果？大多數用戶使用撥接數據機，連結速度慢到令人抓狂還有其他嚴重的限制，例如，你的個人資料檔案中沒有相片，因為當時擁有數位相機的人很少許多人不清楚六度網站到底意圖提供約會服務建立商業人脈服務，或是兩者皆是儘管如此，到了一九九九年，該站註冊使用者已高達三百五十萬人，另一家規模更大的公司以一億兩千五百萬美元買下它，但它從未創造豐碩的營收，後來，在網路公司泡沫化中，新業主於二年底關閉這家虧錢的公司溫瑞奇和他的伙伴知道，這只是社交網站的開始，不是末尾，他們極有先見之明地取得了一項廣泛涵蓋六度網站諸多創新的專利權，這項專利後來在臉書網站的歷史中扮演了重要角色溫瑞奇把類似六度網站的網站稱為未來的作業系統雖然，六度網站破了冰，但卻要等到多年之後，其他人才會駛入這片海域，建立真正的社交網站黑色星球（BlackPlanet）及亞洲大道（Asian Avenue）這兩個族裔導向的網站在一九九九年開張，提供有限的社交網站功能瑞典青少年社交網站新月風暴（LunarStorm）於二年一月一日開張，韓國知名的賽我網（Cyworld）則是在二一年增加了社交網站的功能一直要到二一年和二二年，矽谷和舊金山才興起社交網站熱潮當時，這些地區的創業家和創投業者仍然懾於二年初開始的網路公司市值與營收銳減餘波，氣氛十分低迷，尤其是消費者導向的網路公司特別艱辛，新創公司很難獲得任何投資不過，一些有膽識者看出，六度網站可能只是起步得太早，但前景甚佳帕克和其友人在二一年創立的Plaxo 網路公司並不是社交網站，但和社交網站有許多共通點Plaxo 提供聯繫人管理服務，在新會員上傳聯繫對象後，網站會要求聯繫對象更新資訊，且敦促他們也加入Plaxo 網站，這種騷擾令人討厭，但往往能夠奏效Plaxo 網站也預示了臉書網站的一個重要層面：它根據個人的聯繫對象網絡來維持獨特的資訊創業家史考特（Adrian Scott） 在二  一年末創設了一個名為Ryze的社交網站，這不是約會網站，瞄準的對象是商業人士，其名稱意在使其會員藉由改善商業人脈而發達起來這個網站打算向搜尋其資料庫以尋找員工顧問等的企業雇主收費，藉此營利雖然，除了舊金山科技圈，這個網站並未產生明顯影響力，但它產生啟發作用，促成後來的許多發展Ryze 網站的會員亞布拉姆斯（Jonathan Abrams）是一個程式設計師，非常熱衷派對活動，他看出人們的業餘生活是一片大好商機，於是建立了針對消費者的社交網站Friendster雖然，這不是一個純正的約會網站，但提供了許多工具，幫助會員尋找約會對象亞布拉姆斯的目標是搶走社交網站Match.com 的顧客，他認為，若你能夠結識朋友的朋友，就能認識更多有趣的人Friendster 期望會員使用真名，它提供了一項新穎的工具：會員的相片這是一項突破，你可以搜尋瀏覽，得知你的哪些鄰居已經是你朋友的朋友，若你喜歡他們的相片，可以嘗試跟他們建立連結資料來源:http://www.ithome.com.tw/itadm/article.php?c67984

Question 12

有效網頁表單設計的八條規則

Accepted Answer

如果你正從你的用戶那裏收集資訊, 沒有比網頁表單更簡單和直接的辦法了一份有良好設計的表單可以提供有價值的資訊, 相反, 他們有可能把用戶嚇跑明確了這一點之後, 每個設計師就應該知道一些設計網頁表單的規則文章中所有的實例都是用CoffeeCup Web Form Builder生成的.1. 保守性的搭建, 並帶有目的性的設計表單我們要面對的現實是沒有人喜歡花大把的時間填寫表單. 保持表單的短小精悍並且剔除絕對不必要的或者不會提供實際收效的表單元素. 保證表單的每個部分都對整體起到了推動作用, 這樣用戶會感謝你你的表單結構應該和表單內的元素一樣具有功能性. 當設計表單樣式的時候,要記得, 至少在西方國家, 人們的閱讀習慣是從上到下, 從左到右. 他們也經常用Tab鍵在表單各個元素之間移動. 你的設計應該通過元素擺放的合理性和標簽的語義性來實現. 當然, 永遠不要讓你的表單看起來分散或雜亂無章——保證所有的元素都均勻的分隔開, 並且排列整齊下面是一些標準表單, 你可以用來作爲出發點, 設計出更加有創造性的表單:標簽左對齊, 輸入欄位垂直羅列：這個表單的特點是標簽左對齊, 輸入框整齊有序的從上到下排列. 我們的眼睛能夠很容易的捕捉表單元素, 特別是當你問到一些用戶不太熟悉的問題時因爲他們可以很順利的從上到下閱讀問題列表而不被輸入框打斷, 他們會更專注於你所問的問題. 但是這個樣式會延長填完表單的時間, 因爲視線在標簽和輸入框之間移動會佔據大量的時間標簽右對齊, 輸入欄位垂直堆疊：右對齊的標簽能夠更容易區分和閱讀, 並且剔除掉了標簽和輸入框之間那些不合適的空間. 但是, 卻使閱讀更加困難. 它不那麽吸引人, 而且看起來不整齊標簽頂端對齊：頂端對齊的標簽可以使填寫表單更加迅速和容易, 因爲眼睛不需要在標簽和輸入框之間來回移動. 這種樣式也讓你把相關的欄位放在一起, 節省了空間2. 讓你的表單適應它的風格每個表單都應該符合它要表達的形勢或情況. 當你在計劃著設計表單的時候,問問自己下面的這些問題: 你打算問什麽問題? 爲什麽問? 你的網頁設計在有表單和沒有表單的情況下分別是什麽樣子? 表單中有沒有用戶要填的資訊,或者有沒有他們想要填的資訊? 你的回答會對你的表單樣式和內容的設計有所幫助3. 用你所需當你猶豫不決是否在表單中添加元素的時候, 問問自己是不是可以不需要這個元素. 如果回答＂是＂, 就不要使用重置按鈕通常是不必要的表單元素. 這個本應消失的歷史殘留品卻依然出現在表單中, 甚至是將來的表單設計. 想想看, 當你想要修改表單資訊的時候,輸入框裏面有什麽內容其實並不重要, 那麽有什麽必要清除所有的資訊呢?重置按鈕唯一好處是當你不小心清除了剛剛填好的資訊, 很惱火的時候,你不需要重新填寫4. 在必要的時候才使用簡潔的描述你也許要解釋一下在表單中收集相關資訊的原因, 特別是用戶不願分享的資訊，比如電話號碼或者電子郵件. 這樣做不僅消除了用戶的疑慮, 也保證了資料的正確性任何描述和評論都要簡明扼要. 你也許還要用不同的顔色, 字體大小, 或樣式來區分他們. 過猶不及, 畢竟你不希望這些描述索然無味或者明顯超過表單的其他部分. 這是一個提供印刷服務的表單, 很有效的利用了描述來說明表單的作用5. 主動溝通保證你的表單中使用以用戶爲中心的友好語言. 這裏有個小竅門可以寫出平常談話般的文字: 避免和你的用戶真正交談如果你想知道別人的名字, 你不會盯著他們的眼睛用呆板的措辭問, ＂全名＂. 那實在是太恐怖了. 如果你要得到積極的回應, 你會笑著說, ＂你好, 你叫什麽名字?＂記住試著用更加人性化的措辭來代替＂全名＂這個標簽, 比如, ＂你的名字＂6. 把表單分成劃分成許多小的部分在小範圍內交換想法和意見是溝通的一種方式. 大家互相介紹自己. 你描述自己的職業, 其他人發表評論或者提問題. 你重復說過的內容, 或者回答他人的問題會收到更多的回應. 一次有意義的充實的交談, 資訊是源源不斷的, 一來一回的網頁表單作爲另外一種溝通的方式, 也是同樣的道理. 你也許要問許多問題, 但是那並不意味著你要把他們一股腦的給讀者. 試著用水平線, 色塊, 有意義的圖片, 或者用標題字把資訊分割成爲容易閱讀的小集合. 如果, 以上的辦法都行不通,就把你的表單分成許多頁, 在頂部加上進度條, 如此一來, 用戶就能夠知道他們還差多少沒有完成7. 使用有意義的, 關聯上下文的錯誤資訊你的出錯資訊應該可以清楚的表明哪里出錯, 並使出錯的部分突出出來.畢竟, 沒有人喜歡在表單裏面搜索被遺漏的欄位8. 當用戶點擊提交按鈕時, 他們會自以爲已經完成了, 打算離開. 基本上他們會說, ＂這是你要的資訊, 再見.＂如果是一次真正的交談, 你會和他們握手, 然後說, ＂再見＂, 再離開, 或者通過其他方式告訴他們談話結束了. 你的表單也會做同樣的事情. 它有沒有引導用戶到達某個頁面, 告訴他們, ＂感謝你的提交! 我們不久之後會聯繫你.＂,或諸如此類的提示. 而且此時的網頁上應該有返回主頁的鏈結就這些了! 在設計網頁表單的時候要記得這些規則, 你一定會驚訝于表單的質量的大幅提升以及收穫的大量反饋轉自: http://www.wpdfd.com/issues/87/eight-rules-for-effective-web-forms/

網頁設計新知