<?xml version="1.0" encoding="UTF-8"?> <rss
version="2.0"
xmlns:content="http://purl.org/rss/1.0/modules/content/"
xmlns:wfw="http://wellformedweb.org/CommentAPI/"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
><channel><title>mr.mu &#187; 介面設計</title> <atom:link href="http://www.mrmu.com.tw/category/webdesign/%e4%bb%8b%e9%9d%a2%e8%a8%ad%e8%a8%88/feed/" rel="self" type="application/rss+xml" /><link>http://www.mrmu.com.tw</link> <description>WordPress 網站架設、軟體設計、互動介面研究</description> <lastBuildDate>Wed, 08 Feb 2012 08:24:17 +0000</lastBuildDate> <language>en</language> <sy:updatePeriod>hourly</sy:updatePeriod> <sy:updateFrequency>1</sy:updateFrequency> <generator>http://wordpress.org/?v=3.1.2</generator> <item><title>網頁設計中的多層視差滾動效果 (Parallax scrolling)</title><link>http://www.mrmu.com.tw/2011/10/19/parallax-scrolling/</link> <comments>http://www.mrmu.com.tw/2011/10/19/parallax-scrolling/#comments</comments> <pubDate>Tue, 18 Oct 2011 17:51:02 +0000</pubDate> <dc:creator>mrmu</dc:creator> <category><![CDATA[JavaScript技巧]]></category> <category><![CDATA[介面設計]]></category> <category><![CDATA[網站設計]]></category> <category><![CDATA[jQuery外掛]]></category> <category><![CDATA[Parallax scrolling]]></category><guid
isPermaLink="false">http://www.mrmu.com.tw/?p=1802</guid> <description><![CDATA[觀察上面的圖片，裡面有三張圖片，分別放置於不同階層，如此可以構成一幅具有簡單景深的畫面。假設我們將三張圖作成由右向左捲動的動畫，但背景圖片動得比較慢，前景圖片動得比較快，我們就可以感受到較符合生活經驗的景深效果。 這種效果稱為視差滾動(Parallax scrolling)，它是電腦圖學中一種特別的滑動特效技巧，首次出現於1982年一款叫Moon Patrol的遊戲，主要是用來摸擬3D效果。滾動視差的原理是把背景圖片的移動速度放慢，讓前景圖片移動較快，因而在2D畫面上產生多層次的佈景深度。 把滾動視差應用在網頁設計上，也具有非常棒的視覺效果，而且只要使用jQuery外掛搭配CSS設定就可以幫助我們快速製作出含有滾動視差效果的網頁了，非常方便。 本篇要介紹的Plugin是 Scrolling Parallax Plugin for jQuery，我依照它的範例，修改成一個Demo，可以觀察到有三層葉片都有不同的捲動速度，還有三個空白DIV也設定了不同速度，如此就可以模擬景深，非常有趣! 也可以看看「橫向捲動」的實例： http://www.indofolio.com/ http://ericj.se/ 這邊則是WDL整理的21個具有Parallax Scrolling效果的網站： http://webdesignledger.com/inspiration/21-examples-of-parallax-scrolling-in-web-design 參考資料： 維基百科 &#8211; Parallax scrolling Scrolling Parallax Plugin for jQuery 官網]]></description> <wfw:commentRss>http://www.mrmu.com.tw/2011/10/19/parallax-scrolling/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>保護性設計(Defensive Design)-亂搞也不出糗的設計品質!</title><link>http://www.mrmu.com.tw/2011/05/28/defensive-design/</link> <comments>http://www.mrmu.com.tw/2011/05/28/defensive-design/#comments</comments> <pubDate>Sat, 28 May 2011 08:27:07 +0000</pubDate> <dc:creator>mrmu</dc:creator> <category><![CDATA[介面設計]]></category> <category><![CDATA[網站設計]]></category><guid
isPermaLink="false">http://www.mrmu.com.tw/?p=1701</guid> <description><![CDATA[所謂的保護性設計(Defensive Design)，指的就是當你所設計的產品因為某些非預期的使用 (如：使用者的誤用、系統或其他外部因素…等) 而造成錯誤時，你的產品也能有效的提供設計回饋，讓內心纖細敏感的使用者不會突然受到太多驚嚇。 莫非定律說：凡事有可能會出事的，它就一定會出事。是的，只要是人為設計的產物，都有出事的機率，有天它心血來潮就會在客戶面前挫屎給你看。所以我想，無論你是設計師(Designer)或是開發者(Developer)，應該多少都要把莫非定律放在心中，儘量想著怎麼樣讓你的產品在出事的時候，也能有帥氣的姿態。 要針對出事的情形進行設計不是件簡單的事，首先你要發揮柯南的精神，找到出事的情況。對軟體開發或測試有些經驗的朋友，大概都聽過「Monkey Test」，顧名思義就是找一隻猴子來玩弄你的設計&#8230;(誤)。 Monkey Test 不是找猴子，但意義很像，一般是設計一個小程式，在你的軟體畫面上摸擬瘋狂失控的操作行為(亂點、亂移、亂x&#8230;)，接著看你的軟體能不能承受這種極端的操作，若不能順利透過，也可以取得引起失敗的歷程資料進行分析，進而改善。 今天在Smashing Magzine網站看到一篇 Getting Started with Defensive Web Design，列出了一些網頁設計的保護性設計議題，在此節錄一些出來聊聊： 1. 輔助說明(Contextual Help) 有別於像Monkey Test這種活動能找到的問題，還有比較像是心理認知層面的問題，例如你現在看著這篇文章，心中想著「你到底在寫什麼鬼呀？ 我要怎麼離開這個頁面去找一些技術文章來看？」或者「怎麼我點了這個連結，不是到我所想的頁面呢？又要回上一頁嗎&#8230;」&#8230;等，這類問題也許就需要適時的一些輔助說明來幫忙。 2. 針對緩慢的連線狀況進行設計 你的使用者有時也許連線速度太慢 (或使用文字瀏覽器)，圖片也許都無法讀取了，這時候你的網站會不會因此產生了大量的「留白」，讓使用者無法使用網站的服務呢？如果一個網站缺少圖片，就無法取得任何有意義的資訊，其實是很可惜的。這是可以避免的情況，所以何不放進你的設計守則裡？ 3. 提供站內搜尋 如果你的網站規模只在五、六頁，那你也許不太需要擔心這個；相反的，規模大於五、六頁，做一個站內搜尋的功能則是基本常識。如果是更大規模的網站，那可能需要更進階的站內搜尋引擎，像是有子分類搜尋、針對拼錯字重新建議關鍵字、找不到東西時指引其他方向&#8230;等。甚至還有更絕的，讓使用者編輯搜尋結果，藉此改善該組關鍵字的搜尋品質。 4. 表單驗證及錯誤處理 關於設計表單驗證的基本原則是：不要相信任何使用者輸入的資料，你可以在心中把使用者想成是猴子，也可以想成是惡魔。錯誤處理則是想像使用者的手殘機率破表，或者想像他是調皮的小朋友，不按牌理出牌。 就因為是猴子、惡魔、手殘、任性小孩，所以你要好好防御，像是要設定極端的輸入範圍(有上限、有下限、有字元限制、有數字限制、不能空白、不可以是HTML!)，而且你要有人性一點，語氣尊重還要奉上溫柔提醒~ 像是：「您真的想要不存檔就離開嗎？」、「您真的要刪除嗎？」、「提醒您，有紅色星星一定要填完才能送出哦~~」。 5. 404頁面錯誤(找不到) 預設的404頁面錯誤很容易嚇到一般的使用者，或者傷害到他的自尊(我弄壞了，我怎麼這麼笨&#8230;XD)。關於404頁面的客製化，很容易就能找到很多設計範例，像是這裡有50個例子，有創意當然很好，但個人覺得要跟原本的網站有一致性，不要跳Tone跳太大。 另外，使用者找不到東西，除了看到404訊息外，最好還能猜猜他真正要的是什麼，或者至少提示下一步要點擊哪個連結比較好。 6. 500伺服器錯誤 500伺服器錯誤的頁面設計比較少，但也是有例子可看 。這樣的伺服器錯誤，通常表示網站整個掛點了，所以也沒辦法再提供一些後續的站內資訊，除非有備用站可以導向，或者留下連絡用的E-mail連結，讓真的有事找你的人不會斷了連絡。 7. 偵測保護性設計的漏洞 現在有很多幫助網站維護人員分析網站狀態的工具，而且免費的就很專業了，像是Google Analitics、Google 網站管理員工具或一些付費服務。利用這些工具可以分析使用者使用網站的情形：能找出失聯的連結(Broken Links)，讓你可以快點修復；能觀察使用者的跳出率、停留時間…等。 一般來說，要把保護性設計做到一百分很難，但要提升網站的使用品質，這些都是應該注意的項目。]]></description> <wfw:commentRss>http://www.mrmu.com.tw/2011/05/28/defensive-design/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>[CSS] Overflow清除Float效果的妙用</title><link>http://www.mrmu.com.tw/2011/02/19/css-overflow-clear-float/</link> <comments>http://www.mrmu.com.tw/2011/02/19/css-overflow-clear-float/#comments</comments> <pubDate>Sat, 19 Feb 2011 08:56:35 +0000</pubDate> <dc:creator>mrmu</dc:creator> <category><![CDATA[介面設計]]></category> <category><![CDATA[學習資源]]></category> <category><![CDATA[網站設計]]></category> <category><![CDATA[css]]></category><guid
isPermaLink="false">http://www.mrmu.com.tw/?p=1464</guid> <description><![CDATA[在使用css設計版面時我們常常會遇到的情況之一，就是用來包覆float子區塊的父區塊無法跟隨float子區塊的高度一併延伸： float的子區塊1 float的子區塊2 而通常我們要解決這種情況，我們會增加一個具有 clear 屬性的元素 (例：具有clear:both設定的div元素) 在float子區塊後面來清除Float效果，讓父區塊可以成功的包覆子區塊： float的子區塊1 float的子區塊2 但是你知道嗎？其實我們也可以用overflow這個屬性來達到清除float的效果。什麼是overflow呢，overflow屬性原本是用來控制當內容超出顯示範圍時，是否出現捲軸效果的屬性，它的預設值是visible，也就是讓內容完全顯示出來，不嵌入顯示捲軸的顯示區域。我們在此要使用的是設定是overflow:auto，也就是為內容嵌入顯示捲軸的顯示區域，但視情況顯示捲軸。(請google以獲得更多overflow的詳細使用方式) 當我們為父區塊設定overflow:auto的屬性後，我們就不需額外去clear掉float的效果了： float的子區塊1 float的子區塊2 Overflow:auto還有另一項用法，常用在作回覆區域時的排版設計。先來看看我們常在圖片元素設定float效果，造成的所謂「文繞圖」效果： Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#8217;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a [...]]]></description> <wfw:commentRss>http://www.mrmu.com.tw/2011/02/19/css-overflow-clear-float/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>Drupal 7版型開發(theming)與Drupal 6的不同(下)</title><link>http://www.mrmu.com.tw/2010/05/08/drupal-7-theming-different-2/</link> <comments>http://www.mrmu.com.tw/2010/05/08/drupal-7-theming-different-2/#comments</comments> <pubDate>Sat, 08 May 2010 05:41:13 +0000</pubDate> <dc:creator>mrmu</dc:creator> <category><![CDATA[Drupal開發]]></category> <category><![CDATA[PHP程式設計]]></category> <category><![CDATA[介面設計]]></category> <category><![CDATA[網站設計]]></category> <category><![CDATA[Drupal]]></category> <category><![CDATA[Drupal 7]]></category> <category><![CDATA[版型開發]]></category><guid
isPermaLink="false">http://www.mrmu.com.tw/?p=1389</guid> <description><![CDATA[所有模版的標題都具有前置字與後置字變數 Drupal 7樣版都具備兩個新的標準變數：$title_prefix 及 $title_suffix。 這兩個變數內放的是想要被呈現在個別的標題前或後的輸出內容，可作為contextual links之用，像是讓具有某種權限的使用者可以看到一些特別的連結出現在標題上面或下面。 在node.tpl.php內局部的(Granular)展示$content 資訊 現在不需要像使用Drupal 6的$content時，要先做處理才能分隔$content的輸出。在Drupal 7使用 print render($content) 等同於在 Drupal 6的 print $content，不過當您想輸出部份的內容，像是link，在Drupal 7可以用 print render(content['links'])取得。 使用方式可以參考一下 node.tpl.php內的程式碼： 在輸出整個$content之前，先把我們想要在稍後才輸出的comments跟links先使用hide來隱藏，之後再個別輸出我們想要的順序及樣式。 Field 加入核心 如果您知道CCK這個模組，標題的這句話等同於 CCK加入核心了；如果不熟悉CCK是什麼，簡單的說，Field就是能讓你自訂新的內容型態(透過增加一些特定的欄位，就能成為新的內容型態)。這跟版型開發有啥關係嗎？嗯，因為我們也能在module/field/theme內找到field.tpl.php，來針對field作一些樣式修改。 box.tpl.php消失了 它原本是用來包覆節點內的回應部份與搜尋結果，除了很少用到，又跟區塊(block)容易搞混。 版型內的搜尋項目消失了，移到區塊(block)上 原本要在page.tpl.php內呼叫搜尋表單的情況，現在變成放進區塊內了。 模版建議符號變更 模版建議符號變成 &#8216;- -&#8217; (中間沒有空白，因為中間不留空白，wp會直接輸出成dash)，而不再是drupal 6的&#8217;-'，例如： * page- -front.tpl.php * node- -blog.tpl.php * node- -event-performance.tpl.php 注意，一個元素的文字區隔依舊使用&#8217;-'。 兩階段的變數處理函式和template_preprocess_html() 第一階段是現存的preprocess(參考http://drupal.org/node/223430)，而第二階段是process函式，是接在preprocess之後被執行。另外，多了一個template_preprocess_html 函式，用來預先處理 (preprocess) html.tpl.php內的變數。 Garland [...]]]></description> <wfw:commentRss>http://www.mrmu.com.tw/2010/05/08/drupal-7-theming-different-2/feed/</wfw:commentRss> <slash:comments>3</slash:comments> </item> <item><title>鑽石、訂製鑽戒的線上之戰：eBay, 藍色尼羅河(Blue Nile), 九鑽網</title><link>http://www.mrmu.com.tw/2010/02/22/diamonds-online-ebay-blue-nile/</link> <comments>http://www.mrmu.com.tw/2010/02/22/diamonds-online-ebay-blue-nile/#comments</comments> <pubDate>Mon, 22 Feb 2010 03:38:10 +0000</pubDate> <dc:creator>mrmu</dc:creator> <category><![CDATA[介面設計]]></category> <category><![CDATA[市場情報]]></category> <category><![CDATA[網路行銷]]></category> <category><![CDATA[Blue-Nile]]></category> <category><![CDATA[eBay]]></category> <category><![CDATA[珠寶]]></category> <category><![CDATA[網路應用]]></category> <category><![CDATA[鑽戒]]></category> <category><![CDATA[鑽石]]></category><guid
isPermaLink="false">http://www.mrmu.com.tw/?p=1308</guid> <description><![CDATA[線上拍賣的知名品牌eBay最近舉辦了「打造你的閃亮鑽戒」(Build Your Bling)比賽活動，讓參賽者設計專屬的鑽戒，並藉由這次的活動正式宣告eBay也開始進軍鑽石的線上零售戰場。這次比賽的優勝者將獲得Gemstoneking公司贈送設計者所設計的戒指，預計價格超過25000美金。 參與者二月19號前要完成並送出自己的設計，其他的eBay使用者將進行最佳設計的投票來選出優勝者，二月26日公佈比賽結果。這樣的訊息告訴我們，鑽石的線上銷售又將進入一個全新的世代! 這次的比賽也讓所有人藉此機會一睹eBay的線上鑽戒設計師系統(Diamond Ring Designer system)，很明顯的這個設計系統的介面延用參考了藍色尼羅河(Blue Nile)網站的介面，在設置搜尋條件時使用大量的雙向滑動棒(Slider bar)，包括選擇鑽石形狀、尺寸、顏色、淨度及車工等，而且價格非常透明，讓使用者能很容易的在線上進行比價。 設計流程很單純，先選擇寶石，設定了寶石的各項條件後，系統會列出所有符合條件的現貨供使用者參考，使用者可以選擇最多五顆不同樣式等級的寶石。選定寶石後，接著選擇戒台(setting)，除了樣式外，戒台的材質如黃金、K金或鉑金也能選擇，一樣也是可以選擇最多五種不同樣式的戒台，最後一步就是讓使用者搭搭看，看哪種組合最順眼，如此就完成了鑽戒的設計。 當然這場比賽並不是重點，重點之一是高單價的鑽石也能成功的搬上電子商務的檯面，並且持續獲利，而且讓我們對線上奢侈品的銷售有了一個初步的視野。全球最大的線上鑽石銷售商藍色尼羅河(Blue Nile)成立於1999年，在短短5年後就在那斯達克上市，而藍色尼羅河的成功，讓鑽石線上銷售業務大放光芒，藍色尼羅河沒有實體店面的高昂成本，加上線上直接銷售免除了大量的中間商費用，使得價值非常具有競爭力，也讓這些因素成了最佳的利基。 價格當然是重點，但鑽石這樣高單價的物品能在線上銷售成功的重點是規格的標準化，如鑽石的4C(顏色、淨度、車工、克拉重量)，GIA證書的推廣及教育，線上金流和物流的成熟等，都是讓鑽石能放在網路上銷售成功的原因。隨後跟進的大陸網路公司九鑽網，一開始的網站介面幾乎完全模仿藍色尼羅河，讓我一時還以為是Blue Nile在中國開分站，現在去看九鑽網，介面都換掉了，大概也開始走出自己的路了。 這些例子對日後想進軍鑽石或珠寶線上銷售業的業者具有指標性的意義，但如何提供具備差異性的服務或形象將會是重點，因為當鑽石被高度規格化後，光靠產品本身的價差利潤將所剩無幾，而線上服務的重點就將落在網站及客戶服務上了。 參考資料： Luxist.com BlueNile.com 9diamond.com]]></description> <wfw:commentRss>http://www.mrmu.com.tw/2010/02/22/diamonds-online-ebay-blue-nile/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>如何用電腦看模擬手機上網的網站？</title><link>http://www.mrmu.com.tw/2009/12/14/mobile-phone-browser-simulator/</link> <comments>http://www.mrmu.com.tw/2009/12/14/mobile-phone-browser-simulator/#comments</comments> <pubDate>Mon, 14 Dec 2009 14:54:04 +0000</pubDate> <dc:creator>mrmu</dc:creator> <category><![CDATA[介面設計]]></category> <category><![CDATA[好用工具]]></category> <category><![CDATA[Opera Mini]]></category> <category><![CDATA[手機上網]]></category> <category><![CDATA[網站設計]]></category><guid
isPermaLink="false">http://www.mrmu.com.tw/?p=1294</guid> <description><![CDATA[這是今天一位朋友突然問我的一個問題，其實有很多種simulator，但可能要先安裝特定的手機OS模擬器，才能使用它內建的browser吧，因為我的經驗也不是非常多，我只接觸過windows mobile，但一下要搞到wm的模擬器，其實也很麻煩，又非常大。 如果想要知道自己的網站在手機上瀏覽會是什麼樣子，可以參考一下Opera Mini的線上Demo程式，這是目前我能找到最簡單的solution了~ 它的Demo程式就是下方這樣的介面，你可以試玩看看，看自己的網站在手機上看會是什麼樣子：(如果畫面出不來，或者有疑似當掉的情形，請按Ctrl + F5來重讀，再試試看。) Opera Mini的線上模擬器需要安裝最新的JRE: Java Runtime Environment. 官方網站：http://www.opera.com/mini/demo/]]></description> <wfw:commentRss>http://www.mrmu.com.tw/2009/12/14/mobile-phone-browser-simulator/feed/</wfw:commentRss> <slash:comments>4</slash:comments> </item> <item><title>Google Closure工具:Google的javascript工具組</title><link>http://www.mrmu.com.tw/2009/11/08/google-closure%e5%b7%a5%e5%85%b7google%e7%9a%84javascript%e5%b7%a5%e5%85%b7%e7%b5%84/</link> <comments>http://www.mrmu.com.tw/2009/11/08/google-closure%e5%b7%a5%e5%85%b7google%e7%9a%84javascript%e5%b7%a5%e5%85%b7%e7%b5%84/#comments</comments> <pubDate>Sun, 08 Nov 2009 07:35:00 +0000</pubDate> <dc:creator>mrmu</dc:creator> <category><![CDATA[介面設計]]></category> <category><![CDATA[Google Closure]]></category> <category><![CDATA[javascript]]></category> <category><![CDATA[網站設計]]></category><guid
isPermaLink="false">http://www.mrmu.com.tw/?p=1248</guid> <description><![CDATA[全球數百萬的Google用戶每天都使用Google提供的Gmail, Google Docs及Google Maps等便利的服務，這些服務都大量使用javascript應用，也能由此看出Google對javascript-based apps的重視程度。最近Google更提供了一組開發javascript的工具組，讓全球的開發者能更輕鬆的開發殺手級的javascript apps，這組工具分別是：Closure Compiler, Closure Library及Closure Templates，可視為分別針對javascript程式碼優化、框架、樣版引擎所提出的解決方案。 Closure Compiler 提供三種優化javascript程式碼的方式，分別是Serive UI, API, Application等，而優化的方式可以透過不同的設定來進行，可以幫你把javascript程式排得整整齊齊，也能用很「極端」的方式，幫你把無用的函式或冗詞精簡，建議在寫完javascript code後可以來compie一下。Service UI的形式是我個人覺得最方便的，因為它就是一個網頁的表單，設定一下就會跑出結果。如下圖，左邊是compile前的設定，右邊則是compile後的優化成果)，Closure Compiler Service UI的官方教學文請見這裡。 除了提供這種網頁介面直接編譯的方式外，closure compiler也有提供API可以讓你的網頁直接POST要compile的code過去，就能得到結果。Closure Compiler API 的官方教學文請見這裡。但要注意的是，如果要 compile的檔案很大， compile會失敗，這時就必須使用 Google 提供的 Closure Compiler Application 來處理，也就是要下載compiler-latest.zip 回來用 (請先確定你的電腦已安裝JRE)，解壓縮裡面有個compiler.jar檔，就用這個來 compile，不過令人感到美中不足的地方是，要用命令列的方式來compile，就像：java -jar compiler.jar &#8211;js [您的檔案名稱] &#8211;js_output_file [輸出名稱] ，這樣，詳情可見Closure Compiler Application官方教學文。 Closure Library 可視為Google版的 javascript framework，提供了許多跨瀏覽器又便利的javascript函式操作及 UI 元件，不過目前我個人還是比較習慣jQuery，就靜待觀察Closure Library是否能讓其他現有的js framework一一躺平吧。 [...]]]></description> <wfw:commentRss>http://www.mrmu.com.tw/2009/11/08/google-closure%e5%b7%a5%e5%85%b7google%e7%9a%84javascript%e5%b7%a5%e5%85%b7%e7%b5%84/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>使用javascript (或jQuery)對SEO影響的迷思</title><link>http://www.mrmu.com.tw/2009/10/19/seo%e4%bd%bf%e7%94%a8javascript-%e6%88%96jquery%e5%b0%8dseo%e5%bd%b1%e9%9f%bf%e7%9a%84%e8%bf%b7%e6%80%9d/</link> <comments>http://www.mrmu.com.tw/2009/10/19/seo%e4%bd%bf%e7%94%a8javascript-%e6%88%96jquery%e5%b0%8dseo%e5%bd%b1%e9%9f%bf%e7%9a%84%e8%bf%b7%e6%80%9d/#comments</comments> <pubDate>Sun, 18 Oct 2009 17:49:00 +0000</pubDate> <dc:creator>mrmu</dc:creator> <category><![CDATA[介面設計]]></category> <category><![CDATA[網路行銷]]></category> <category><![CDATA[jQuery]]></category> <category><![CDATA[SEO]]></category> <category><![CDATA[網站設計]]></category><guid
isPermaLink="false">http://www.mrmu.com.tw/2009/10/19/seo%e4%bd%bf%e7%94%a8javascript-%e6%88%96jquery%e5%b0%8dseo%e5%bd%b1%e9%9f%bf%e7%9a%84%e8%bf%b7%e6%80%9d/</guid> <description><![CDATA[[圖片來源:blog.sharkspace.com] 最近遇到想做SEO的客戶，因為該客戶現有的網站選單，主要以Flash製作，觀看網站的原始碼就很容易了解spider應該很難分析全站的架構。不過因為該站經營三、四年了，除了要修改選單為適合SEO的方式，我想最好也要保持選單與視覺設計的一致性，除了不要破壞視覺識別，也希望讓操作性的影響降到最低。很直覺的，我使用了jQuery這個javascript函式庫，設計了一組選單，在色系與動畫的呈現上幾乎與原先的Flash選單有90%的相似度，當然原始碼呈現出來的是完整的選單結構，也使用了標準的HTML。 客戶一開始被CSS的把戲搞混了，宣稱這些選單使用的是圖片，後來經過一番解釋才說服他 (我請他另存圖檔下來寄給我，但這當然辦不到，因為那是用CSS做的效果。)後來，客戶也許出於擔心又問了：這樣符合SEO的原則嗎？ 的確，對SEO有概念的人都知道，spider不會剖析javascript的內容。遇到script標籤，spider會停工直到遇見script的結尾標籤，spider很忙很忙的，它根本不想看這麼一堆跟網站架構無關的code。因為這種特性，出現了「如何擺放script標籤」的說詞，有人宣稱放在head，先讓spider看到的話，它會比較不愛這個頁面，也會對script接下來真正的網頁資訊感到興趣缺缺，所以可以將script放在body。 將script放在body一樣是可以運作的，但這種說法是不可信的，因為spider會先取得整個page的資訊，才開始進行分析，之所以專家建議將script放在head，是一種類似coding standard的習慣，讓code整齊乾淨兼易讀。 所以，如果有一大串javascript需要匯入使用，像是使用jQuery這種函式庫，讓怎麼維持SEO呢？通常我們要用內容較多的js檔時，會將它設為外部檔案再行匯入，jQuery也不例外，使用語法如下： 如果網頁的內容與架構不是儲存在外部的.js檔內，那您大可放心，spider會看的是接下來的網頁內容，它不會理會script標籤。但是呢，因為spider真的很忙很忙，如果要它對你的網站印象好一點，不妨撰寫robots.txt放在網站的根目錄，指出這個外部js檔不需spider分析了，幫助它減輕工作負擔，我想對SEO也是有莫大的幫助。]]></description> <wfw:commentRss>http://www.mrmu.com.tw/2009/10/19/seo%e4%bd%bf%e7%94%a8javascript-%e6%88%96jquery%e5%b0%8dseo%e5%bd%b1%e9%9f%bf%e7%9a%84%e8%bf%b7%e6%80%9d/feed/</wfw:commentRss> <slash:comments>1</slash:comments> </item> <item><title>jQuery外掛-EZJax讓你輕鬆使用AJAX載入動態內容!</title><link>http://www.mrmu.com.tw/2009/09/27/jquery%e5%a4%96%e6%8e%9b-ezjax%e8%ae%93%e4%bd%a0%e8%bc%95%e9%ac%86%e4%bd%bf%e7%94%a8ajax%e8%bc%89%e5%85%a5%e5%8b%95%e6%85%8b%e5%85%a7%e5%ae%b9/</link> <comments>http://www.mrmu.com.tw/2009/09/27/jquery%e5%a4%96%e6%8e%9b-ezjax%e8%ae%93%e4%bd%a0%e8%bc%95%e9%ac%86%e4%bd%bf%e7%94%a8ajax%e8%bc%89%e5%85%a5%e5%8b%95%e6%85%8b%e5%85%a7%e5%ae%b9/#comments</comments> <pubDate>Sun, 27 Sep 2009 11:06:00 +0000</pubDate> <dc:creator>mrmu</dc:creator> <category><![CDATA[介面設計]]></category> <category><![CDATA[AJAX]]></category> <category><![CDATA[EZJax]]></category> <category><![CDATA[jQuery]]></category> <category><![CDATA[jQuery外掛]]></category> <category><![CDATA[網站設計]]></category><guid
isPermaLink="false">http://www.mrmu.com.tw/2009/09/27/jquery%e5%a4%96%e6%8e%9b-ezjax%e8%ae%93%e4%bd%a0%e8%bc%95%e9%ac%86%e4%bd%bf%e7%94%a8ajax%e8%bc%89%e5%85%a5%e5%8b%95%e6%85%8b%e5%85%a7%e5%ae%b9/</guid> <description><![CDATA[其實jQuery本身透過.load函式就簡化了非常多傳統統AJAX的使用步驟，而EZJax外掛更加簡化，讓幾乎不懂AJAX原理與細節的人也能很容易的達成動態載入內容的功能，除了有助於搜尋引擎最佳化(SEO)外，在載入內容時也能安排一些滑動或漸入漸出的特效。 另外根據官網的說明，此外掛支援 IE6以上, FireFox, Safari, 及 Opera。先到EZJax官網下載EZJax，然後就開始試用吧!要使用EZJax外掛，首先當然是載入EZJax： 下一步就是呼叫ezjax，進行初始化，然後就可以用囉： 接下來的code，就是動態載入123.html的內容到指定的區域，首先放一個class為ezjax的連結： 我們希望點下連結後，會動態載入另一個頁面的內容，在想要秀出內容的地方放一個id為ezjax_content的div標籤就大功告成了：]]></description> <wfw:commentRss>http://www.mrmu.com.tw/2009/09/27/jquery%e5%a4%96%e6%8e%9b-ezjax%e8%ae%93%e4%bd%a0%e8%bc%95%e9%ac%86%e4%bd%bf%e7%94%a8ajax%e8%bc%89%e5%85%a5%e5%8b%95%e6%85%8b%e5%85%a7%e5%ae%b9/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> <item><title>判斷偵測是不是IE6，並提示用戶升級</title><link>http://www.mrmu.com.tw/2009/09/03/%e5%88%a4%e6%96%b7%e5%81%b5%e6%b8%ac%e6%98%af%e4%b8%8d%e6%98%afie6%ef%bc%8c%e4%b8%a6%e6%8f%90%e7%a4%ba%e7%94%a8%e6%88%b6%e5%8d%87%e7%b4%9a/</link> <comments>http://www.mrmu.com.tw/2009/09/03/%e5%88%a4%e6%96%b7%e5%81%b5%e6%b8%ac%e6%98%af%e4%b8%8d%e6%98%afie6%ef%bc%8c%e4%b8%a6%e6%8f%90%e7%a4%ba%e7%94%a8%e6%88%b6%e5%8d%87%e7%b4%9a/#comments</comments> <pubDate>Thu, 03 Sep 2009 03:45:00 +0000</pubDate> <dc:creator>mrmu</dc:creator> <category><![CDATA[介面設計]]></category> <category><![CDATA[網站設計]]></category><guid
isPermaLink="false">http://www.mrmu.com.tw/2009/09/03/%e5%88%a4%e6%96%b7%e5%81%b5%e6%b8%ac%e6%98%af%e4%b8%8d%e6%98%afie6%ef%bc%8c%e4%b8%a6%e6%8f%90%e7%a4%ba%e7%94%a8%e6%88%b6%e5%8d%87%e7%b4%9a/</guid> <description><![CDATA[萬惡的IE6，一直是網頁設計人員心中的痛，雖然有很多workaround的方法，但我覺得直接判斷網頁是不是IE6比較直接有效，如果是IE6，看要秀支援的語法還是頁面、升級連結等，或者乾脆就恐赫IE6用戶，再不升級IE，電腦會直接下載病毒好了&#8230;XD 以下是javascript的偵測語法： 再加一個，可以提示IE6用戶下載其他瀏覽器吧:]]></description> <wfw:commentRss>http://www.mrmu.com.tw/2009/09/03/%e5%88%a4%e6%96%b7%e5%81%b5%e6%b8%ac%e6%98%af%e4%b8%8d%e6%98%afie6%ef%bc%8c%e4%b8%a6%e6%8f%90%e7%a4%ba%e7%94%a8%e6%88%b6%e5%8d%87%e7%b4%9a/feed/</wfw:commentRss> <slash:comments>0</slash:comments> </item> </channel> </rss>
<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using disk
Page Caching using disk (enhanced)
Database Caching 3/48 queries in 0.214 seconds using disk
Object Caching 726/814 objects using disk

Served from: www.mrmu.com.tw @ 2012-02-12 08:40:38 -->
