<?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/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>下個網站使用HTML5/CSS3來實作吧!</title><link>http://www.mrmu.com.tw/2011/11/11/html5-css3/</link> <comments>http://www.mrmu.com.tw/2011/11/11/html5-css3/#comments</comments> <pubDate>Fri, 11 Nov 2011 13:45:35 +0000</pubDate> <dc:creator>mrmu</dc:creator> <category><![CDATA[學習資源]]></category><guid
isPermaLink="false">http://www.mrmu.com.tw/?p=1828</guid> <description><![CDATA[不曉得身為網頁設計師的你，是否有考慮在下個專案開始使用HTML5/CSS3了呢？ HTML5/CSS3在2009年開始引發討論，並且在2010年開始至今年產出了非常多極具實用性的文獻及週邊應用。除了新標籤的使用方式外，最令人關心的應該還是老舊瀏覽器的支援度問題。 但是這一年來已經有非常多的處理方法，可以幫助我們處理相容性的問題，即使IE系列支援度很差，但這也不該是讓我們躊躇不前的原因，大多數新標籤，也許舊版瀏覽器看不懂，但這並不影響瀏覽，況且也有很多處理工具可以解決，所以何不先從(正確地)加上基本的HTML5語意標籤開始？ 改版後的網站，在老舊的瀏覽器也許看起來很醜，在較新式的瀏覽器卻很酷炫，對使用者而言能產生很棒的推廣，也可以藉此機會向業主說明，IE佔有率的下降及HTML5在行動設備上的優勢(順便跟他提一下可上網的手機出貨量已經超過PC了)。 也許讓網頁使用新的文件格式，對業主來說吸引力還是不夠強，但若是SEO呢？以本站為例，全站版型在2011年10月5日改以HTML5格式撰寫，一個月後觀察Google Analytics就發現每日流量平均就提升了25%。(下面是Google Analytics的截圖，週期性的「低谷」是周六與周日) 這裡是個小小站，但像T客邦的XDite也說改寫HTML5後，T客邦的日造訪流量多了1萬。這樣的例子，幾乎可證明HTML5格式非常益於SEO。 不過會想寫一篇簡短的勸進文，主要是因為今天在Facebook社團「HTML5與CSS3在台灣」，有篇討論： 針對這樣的現況，希望自己也能稍稍協助推廣一下。而且上圖這篇有很不錯的討論，社團裡也有非常多相當有用的新知，非常建議有心推行的設計師及開發者加入討論。 有心想將版型改造為HTML5格式的WordPress玩家，也推薦近期香腸寫的HTML5改造系列文章! 最後，順便幫Facebook裡的WordPress正體中文社團打個廣告! 對WordPress架站有興趣的朋友，歡迎加入討論~]]></description> <wfw:commentRss>http://www.mrmu.com.tw/2011/11/11/html5-css3/feed/</wfw:commentRss> <slash:comments>1</slash:comments> </item> <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>如何撰寫有效率的CSS選擇器(CSS Selector)</title><link>http://www.mrmu.com.tw/2011/10/11/writing-efficient-css-selectors/</link> <comments>http://www.mrmu.com.tw/2011/10/11/writing-efficient-css-selectors/#comments</comments> <pubDate>Mon, 10 Oct 2011 16:39:28 +0000</pubDate> <dc:creator>mrmu</dc:creator> <category><![CDATA[CSS技巧]]></category> <category><![CDATA[網站設計]]></category> <category><![CDATA[css]]></category><guid
isPermaLink="false">http://www.mrmu.com.tw/?p=1787</guid> <description><![CDATA[高效率的CSS選擇器(Selector)表示法不是一個新的主題，對於網頁設計師而言，知道如何撰寫CSS，是一個基本的技術能力，而了解如何撰寫高效率的CSS則能讓網頁設計師的CSS作品獲得更好的品質。 注意：這裡所指的不是讓開發者很有效率的寫CSS，而是讓開發者寫出來的CSS Selector能很有效率的被瀏覽器執行。 本篇描述的規則，比較適用於非常需要全面提升「速度」的網站，像是每個頁面的DOM元素都超過1000個以上的網站。如果是像我這種小小的部落格，提升的效率就完全不明顯，但身為專業的網頁設計師，你還是必須把這些規則放在心上。 CSS 選擇器(Selectors) CSS 選擇器你應該不陌生，我們可以透過基本的選擇器去指定要處理的DOM元素，像是指定標籤(div,span,body&#8230;)、ID(#header)、Class(.post)等選擇器。 還有一些較不常見的摸擬類別(pseudo-classes)，如 :hover，或更為複雜的CSS3及regex選擇器，如 :first-child或 [class^="grid-"] 表示挑出所有類別名稱以grid-為開頭的元素。 而根據網站效率專家 Steve Souders 指出，各種CSS選擇器的效率由高至低排序如下： 1. ID (#id) 2. Class (.class) 3. Type (即HTML標籤,如div) 4. 鄰接選擇器 (如: h2+p，僅作用於鄰接h2的p元素) 5. Child (如: li>ul) 6. Descendant (如:ul a) 7. Universal (*) 8. 屬性 (如: [type="text"]) 9. 摸擬類別/元素 (如: a:hover) 值得注意的是，雖然ID在技術性上來說比較快，但差異其實很微小。在Windows上的Firefox6上測試，ID的reflow速度還比Class慢。但兩者間reflow速度的差距根本不值一提。 註1：reflow是指css在為網頁加上樣式的過程之一。整個CSS繪製過程會先建立DOM，再進行reflow來確定各元素的位置，最後再進行繪製(render)樣式的動作。這裡有個reflow Mozilla官網的過程影片： 如果影片失效，請點選這裡，可以看見reflow奇妙的工作方式。 註2：測試方式是用Steve Sounders製作的工具：css-selectors [...]]]></description> <wfw:commentRss>http://www.mrmu.com.tw/2011/10/11/writing-efficient-css-selectors/feed/</wfw:commentRss> <slash:comments>4</slash:comments> </item> <item><title>WordPress的Hook機制與原理</title><link>http://www.mrmu.com.tw/2011/10/10/wordpress-hook/</link> <comments>http://www.mrmu.com.tw/2011/10/10/wordpress-hook/#comments</comments> <pubDate>Mon, 10 Oct 2011 06:31:35 +0000</pubDate> <dc:creator>mrmu</dc:creator> <category><![CDATA[Wordpress開發]]></category> <category><![CDATA[網站設計]]></category> <category><![CDATA[hook]]></category> <category><![CDATA[wordpress]]></category><guid
isPermaLink="false">http://www.mrmu.com.tw/?p=1768</guid> <description><![CDATA[稍有接觸過WordPress佈景或外掛客製修改的朋友，對WordPress的Hook機制應該不陌生，但通常剛接觸WordPress Hook的新手，對其運作原理可能會有點混亂或糢糊。本文針對WordPress Hook運作大致做個簡單的說明，而預設讀者是理解基本的PHP function語法及運作，但對WordPress Hook機制不是很明白。 Hook機制裡登場的角色 先從「登場角色」的個別說明開始： WordPress核心 指的是WordPress內建的程式碼架構，提供WordPress主要的基本功能。 Hook 也許你早已聽說，Hook本身雖是鈎子的意思，但直譯又有點奇怪，所以一般通常都不直譯它，而是直接稱它Hook。WordPress的Hook也可以想像成「鈎子」，這些「鈎子」會埋在WordPress網站中特定幾處的程式碼中，埋進去時使用的語法，其「標示位置」的意義比較大，沒有實質運作的內容。當程式執行到有埋Hook的地方時，它會找出所有對應到自己的Hook Function (也就是所有「鈎到」該Hook的hook function)，並一一執行。 因此若沒有針對此Hook去「加入」要鈎上去的Hook Function，執行到此什麼也不會做。因此，它等於是WordPress核心預留一個執行的機會給未來想要加入客製功能的開發者。 Hook Function Hook Function裡會有實質運作的內容，即是實作了一些客製功能，可能是存取DB、增加HTML code、執行其他函式&#8230;等。我們在Hook Function裡寫好所需的功能後，就可以利用「加入至對應Hook」的語法，把Hook Function自已鈎到該Hook上，使得該Hook被執行到時，也會連帶執行自己。 Hook機制是如何運作的？ 舉個例子，我們拿wp_head及wp_footer這兩個內建的hook來說明，wp_head這個hook就是用來埋在負責輸出標籤的程式碼中，而wp_footer就是用來埋在輸出頁尾的程式碼中 (定義於wp-includes/general-template.php，用wp_head()及wp_footer()包裝起來)。這兩個hook，主要都是在佈景檔案中使用的，常見會出現在header.php及footer.php中。 請看下面的情境示例圖，我們把wp_head及wp_footer看成是「鈎子」，而別的hook functions就能來鈎住它： 我們馬上來寫一個簡單的例子。我們要寫一個hook function，就叫它print_sth()，然後把它鈎上wp_head這個hook。因為wp_head()的內容實際上就只有do_action(&#8216;wp_head&#8217;); 這一行內容，而wp_footer()的內容也只有 do_action(&#8216;wp_footer&#8217;);，所以我們直接把do_action的語法換到圖上去，比較容易做說明，因此示意圖變成： 如此，只要執行到輸出header.php時，就會執行到wp_head()，就如同執行到do_action(&#8216;wp_head&#8217;)，此時WP核心會去找所有「鈎上」wp_head這個hook的hook function，於是就找到我們寫的print_sth()，然後就執行它，所以結果它做的事就會出現在網站上，也完成了「客製」的動作： 簡單的說，Hook機制就是：WP核心或其他plugin、theme提供想客製功能的人一個置入客製程式碼(Hook Function)到特定的執行時間點(Hook)的機會。 WordPress的Action Hook與Filter Hook WordPress中的Hook有兩種，分別是「Action Hook」及「Filter Hook」，我們剛才舉例的wp_head及wp_footer都是屬於Action Hook。不過，一開始你可以先把這兩種Hook看成是一樣的東西，只是Filter多了一點點不同的特色，接著說明。 Action Hook WP核心 (或佈景、外掛)在做它們該做的事時，如果執行到有埋action hook的程式碼 (即是do_action語法) 時，會去找尋對應到的hook functions，進而執行這些hook functions(即那些透過add_action()來加入的hook functions)，藉此完成客製功能。WP核心並不期待Action Hook functions會有回傳值，所以這裡的hook [...]]]></description> <wfw:commentRss>http://www.mrmu.com.tw/2011/10/10/wordpress-hook/feed/</wfw:commentRss> <slash:comments>3</slash:comments> </item> <item><title>HPX之HP26-Open Source CMS架站技術聚會心得</title><link>http://www.mrmu.com.tw/2011/09/17/hpx-cms/</link> <comments>http://www.mrmu.com.tw/2011/09/17/hpx-cms/#comments</comments> <pubDate>Fri, 16 Sep 2011 16:03:51 +0000</pubDate> <dc:creator>mrmu</dc:creator> <category><![CDATA[活動聚會]]></category> <category><![CDATA[網站設計]]></category> <category><![CDATA[CMS]]></category> <category><![CDATA[HPX]]></category> <category><![CDATA[wordpress]]></category><guid
isPermaLink="false">http://www.mrmu.com.tw/?p=1738</guid> <description><![CDATA[前幾天去參加了一個特別的聚會-HP26。HPX是由悠識數位針對網站企劃相關議題所舉辦的聚會，這是第26次所以取名HP26。先前早已有所耳聞，這次剛好有空檔且主題也很有興趣，就報名參加了。 聚會當晚下了場不小的雨，幸好有所準備，才不致於淋得全身溼透。HP向來似乎都是辦在「倉庫藝文空間」，這是個很不錯的場地，視線開闊，也沒有一般會議廳冷冰冰的感覺。 這次HP26最主要談的是Open Source CMS架站技術，依上場順序是： WordPress(愛麗絲) WordPress(Joy徐) DotNetNuke(Duncan謝) Symphony(Allen) Drupal(Jimmy) Social Plugin(Rico) Joomla(Asika) 因為很想好好聽清楚、看清楚，所以選擇了第一排最中間的位子。 首先上場的愛麗絲分享的是WordPress的網站秀，由於是針對初接觸WP的非技術人員所作的分享，所以比較多的時間是放在秀一些「看似不是以WP所架設的網站」。感覺上適合的聽眾是：知道WP是什麼，但認為WP只能架部落格的初學朋友。 接著上場的是Joy，分享的是她個人學習WordPress的經歷，其中還有遭遇到實作問題的心路歷程 (相較於愛麗絲的「單車級」簡報速度，Joy可說是「跑車級」的步調XD)。感覺上適合的聽眾是：技術人員。但因為講話速度實在有點快，所以在分享問題處理經驗的部份，沒有聽得很清楚，有點可惜。 再來是Duncan，介紹微軟的DotNetNuke，真的是非常棒的簡報!分享DotNetNuke幾乎沒有技術門檻的使用情境，簡報中充滿恢諧輕鬆的氣氛，很成功的推廣了DotNetNuke「無腦架站」的特點，另外用iPhone搖控簡報並作為簡報提示，使他從頭到尾保持「永遠不回頭」的神奇特效，也是令人激賞。 接著上場的是Symphony的Chief Architect &#8211; Allen。其實我在聚會前就玩過一下Symphony，我非常欣賞Symphony極盡精簡的核心，目前可下載的穩定版本，容量只有800多K。Allen的簡報也很精實，客製後的Symphony後台也令人印象深刻。 再來是Drupal，由Jimmy進行分享。Jimmy簡報分享的案例跟上週在開源研討會一樣，是喜願小麥的案例，比較多著墨在網站內容及架構的整理，還有客製內容型態的說明。我覺得很適合「大概知道架站是怎麼回事」的初階學習者。因為我也曾小小的參與過Drupal社群，所以對Drupal雖不熟，但也不陌生，我想Jimmy有成功的推廣了Drupal獨特之處。 接著是Rico，分享的應該是Social API 與 Plugin，應該沒有限定在Drupal(吧？)!會很不確定的原因，除了Rico講解的方式我不太習慣外，我的頻率一直沒有跟他產生同步XD，所以大約知道他想說的是初學者在選用API與Plugin實作Social功能時，該注意的地方(吧？)XD&#8230;Sorry!也有可能中途沒休息，我晃神了~ 最後上場的是Joomla社群的Asika，Asika的簡報非常專業，簡報前有先了解聽眾背景，針對企劃及設計人員來介紹CMS，不會有太多的技術門檻，整體解說也很流暢。雖然其間還是有脫口出一些術語 (像CCK)，但不影響整體表現，我想聽過的人都會說讚。 因為講者們都很棒，激發出我許多想法，但礙於時間關係，我打算在最後問問題的時間做一點簡單的補充，於是迫不及待舉手發表，沒想到發問的時間都被我佔光光了XD。 會後悠識數位的「Richard不是大大」建議我可以把分享的想法整理一下，發表在Blog上。我整理了後來補充的看法，如下： 1. 網站的樣子不是問題 因為網站最終呈現的是標準的HTML，然後以CSS作樣式去呈現多媒體內容，所以懷疑某種CMS做不出某種類型的網站，是有點多慮了。CMS間的不同，在於建構內容的哲學與方式不同，所以爭論哪個CMS做出來的站比較漂亮，其實沒有太大的意義。 就前台來說，我覺得99.9的網站，上述CMS都做得出來，因為只要PHP或ASP.net做得出來，你就能以特定CMS的建構方式開發出來。 2. 沒有完不完美，只有適不適合 如果你要去家裡附近的巷子口買碗肉圓，你會開卡車、騎腳踏車還是溜滑板車？我們知道這些車都到得了，但適合這個情境，又適合你自己Style的通常只會有一種。 每個人的背景都不同，思考方式也不同，哪個CMS適合你想像中架某種類型網站的方式，而且成本最低，那就是最佳解。 要架設一個很單純的Blog，所有CMS都能架，但我會想用WordPress；但要架設一個公司內部比較繁複的CMS，但功能上都是常見的特定需求，我就會考慮Joomla或Drupal，當然要做政府包案，或要用.Net平台，MIT License的DotNetNuke就會是首選(By Duncan的貼心叮嚀)。 3. 社群是鼓勵對話，還是強調產品？ 目前各家CMS在台灣的社群活躍度，還是以Drupal社群最為活躍。如果以各家的官網企劃或設計的角度來看，我覺得Drupal的首頁就非常鼓勵對話，相較於WordPress及Joomla，就是很一般的Open Source軟體產品的口號、說明、下載等。 4. 自由社群的商業化 除此之外，我覺得Drupal有像Jimmy、Charles的「網絡行動」在推廣、Joomla有像Eddy的「資擘」(之前是正漢)、Asika等在推廣，幫助不少。 但因為我個人對網絡行動的非營利形象頗有好感，加上他們經營社群後又放手交給其他有熱情的人接手，我完全覺得Drupal中文社群是個有人推，又相當自由的社群。 Joomla雖然有資擘在推廣，但www.joomla.org.tw的下方有個「Joomla!台灣 。本網站由"資擘公司（股）" 維護製作」的聲明，感覺就比較商業化一點。 當然不是說自由軟體不該商業化，我舉雙手雙腳贊成商業化，有錢才有資源做更多更棒的事，只是社群及軟體本身是自由的，商業公司跟它們應該要切分清楚。雖說joomla.org.tw不是joomla官方網站，但比較起來感覺上就有差。 不曉得Joomla社群本身是否有意識到這樣的問題，Joomla近期成立了Facebook粉絲團叫I [...]]]></description> <wfw:commentRss>http://www.mrmu.com.tw/2011/09/17/hpx-cms/feed/</wfw:commentRss> <slash:comments>3</slash:comments> </item> <item><title>2011 開放源碼國際研討會(ICOS)參與心得</title><link>http://www.mrmu.com.tw/2011/09/13/2011-international-conference-on-open-source/</link> <comments>http://www.mrmu.com.tw/2011/09/13/2011-international-conference-on-open-source/#comments</comments> <pubDate>Tue, 13 Sep 2011 07:13:14 +0000</pubDate> <dc:creator>mrmu</dc:creator> <category><![CDATA[活動聚會]]></category> <category><![CDATA[生活記事]]></category> <category><![CDATA[網站設計]]></category> <category><![CDATA[CMS]]></category> <category><![CDATA[open source]]></category><guid
isPermaLink="false">http://www.mrmu.com.tw/?p=1731</guid> <description><![CDATA[今年的開放源碼國際研討會在臺大共同教學館舉辦，從9/9到9/11一連三天，滿滿的議程。不過不曉得中秋節連假是否有影響，我參與的議程教室都沒有坐滿人。 首先第一天我參加的議程是「自由軟體侵權案例探討」，講者是林珈宏先生，主持人是苦勞網的孫窮理先生(載紅帽的先生)。 其實會想來聽，主要是想了解台灣是否已有自由軟體侵權的案例，但目前似乎還沒有，最多就是台灣企業的分公司(像D-link及合勤)，在國外有侵權的案件。 侵權的原因，主要還是工程師使用了open source project的code，但產品上市後卻沒有依照license的聲明，去完成該盡的義務。這堂課讓我對基本的license聲明有了一點概念，原來在自由軟體完成及發佈之時，我們都是將自己的著作權依一定的條件進行了授權聲明，以確保軟體不會成為某人的資產。 雖然走上法庭的侵權案例不多，但不表示侵權的情況很少見，據講師表示，很多侵權案最後都走向和解，所以自由軟體的license還是需要好好了解的。 這一天除了聽課，還遇到了在Drupal社群推手-「網絡行動」的協同創辦人-Charles先生。不過在簡短的自介及交換名片後，他就先離開了，沒有聊到太多。 第2天我參加了「CMS Show」，講者依序是:辛文義、marr、Eddy、Jimmy。 Moodle 首先上場的辛文義老師，主要分享的是Moodle這個著名的開源教學平台。Moodle選定了「教學活動」作為發展的主軸，因此它的應用都是繞著教學應用在走，但在聽課時不禁會去思考，真的會有這樣的情境(scenario)，需要這樣的應用嗎？ 因為辛老師是中學老師，所以可能跟大專的教學方式有些不同，就我的兼課經驗來說，我會覺得像moodle、e-profolio的幫助有限，當然也可能是我自己太龜毛XD。 Plone 接下來的是marr，談的是Plone。 Plone支援的語言是Python，目前台灣的使用社群不大，marr也自嘲是校長兼撞鐘XD。 marr拿出一份2010 idealware CMS Comparison的調查，說明在外觀及易用性上，目前是WordPress居冠，但安全性部份則是以Plone最佳。從Demo中很明顯看出Plone真的是工程師的產物，似乎很缺乏Theme Designer的加入。不過Plone在Theme這邊有提出所謂「豬皮龍骨」的solution，就是可套用Joomla的Theme!? 總之我個人感覺，UI是一個重要的關鍵，雖然安全穩固很重要，但醜東西就是很難吸引到足夠的進入者去嘗試，尤其是設計師族群。 不過好看易用的東西，卻會先吸引到人群，而這些人群就會針對它的缺點提出建議及更新。不過，也許Plone就是想吸引純實用主義的人吧。 marr還分享了一個有趣的線上人員雇用的網站叫oDesk，如果找不到社群人手來幫忙，也許可以花點錢，找佣兵來助陣。 Joomla 接著是Eddy，分享的是Joomla。 Joomla是非常知名的三大PHP開源CMS(WordPress,Joomla,Drupal)之一，而Eddy目前是Joomla!台灣的站長。 Eddy從Joomla還是Mambo的時代，就參與了社群相關的工作，因此Eddy完整的參與了Joomla誕生至今的所有歷程。 Eddy一開始也從知名CMS的比較開始談起，各項評比都可見到WordPress居於領先的情況。其實我覺得大可不必去做通用性的比較 (尤其Joomla都僅只位居第二)，反倒是若針對WordPress與Joomla做差異性的應用分析，會比較吸引人，但這個好像有難度。 Eddy此次還說明了Joomla新的版本釋出方式，有分為STS(短期)及LTS(長期)兩種版本，STS就是每6個月發佈一次新版本，而LTS則是每18個月；另外，據說因為1.5非常成功，所以下一個LTS就會叫2.5。(然後1.6是杯具XD) 最後還有Joomla要走向Platform的策略，要從原本的CMS中分離出可獨立使用的Framework，聽起來好像是不錯的策略。 Drupal 本議程的壓軸是Drupal，由網絡行動另一位協同創辦人Jimmy進行分享。 Drupal同屬PHP開源三大CMS之一，而Jimmy是台灣Drupal社群前任站長。 Jimmy一開始就表示CMS間不需要嘶殺及PK，是我蠻認同的想法，而且他也表明他們只用Drupal來架站，所以對其他CMS不熟悉，因此也沒有能力去進行比較分析(說的很棒)。 Jimmy以分享案例的方式來說明Drupal的特色，有很實務面的說明，但因為要先了解案例的背景及需求，才能知道功能應用上有何特別之處，所以講了一些讓我突然放空的農業生產及分享機制XD。 印象比較深刻的是，Jimmy提到Field這個模組的應用，就是之前的CCK。它是用來自定內容型態欄位的工具，講白一點就是視覺化的SQL產出介面。 我自己先前使用CCK的感覺是，不很難用，但也不很易用XD，門檻是出現在客製部份，建立客製內容型態及欄位，在Drupal裡雖不難，但客製功能及版型部份卻是困難重重XD。 CMS Show總結 如同Jimmy所說，CMS間不需PK。我認為CMS的發展，很顯而易見的結果是性質相同的CMS，最終會愈來愈相似。但我們不會希望最後所有CMS都長得差不多、用途也差不多，然後在那邊計較微不足道的差異。 我當然是比較希望所有CMS都有自己的特色與用途，可以互相研究共同的特性，但發展可以更加多元。 另外，WordPress在本次CMS Show居然缺席了，真是讓人感到遺憾。希望明年，WordPress社群能有機會可以參與這樣的議程。 最後分享一下，研討會的搶食畫面(人太多，搶不到好位置拍照XD)，還有無限供應的M牌紅茶XD。]]></description> <wfw:commentRss>http://www.mrmu.com.tw/2011/09/13/2011-international-conference-on-open-source/feed/</wfw:commentRss> <slash:comments>3</slash:comments> </item> <item><title>Adobe Edge: HTML5、CSS3、JS的動畫特效整合開發工具</title><link>http://www.mrmu.com.tw/2011/08/02/adobe-edg/</link> <comments>http://www.mrmu.com.tw/2011/08/02/adobe-edg/#comments</comments> <pubDate>Tue, 02 Aug 2011 04:57:47 +0000</pubDate> <dc:creator>mrmu</dc:creator> <category><![CDATA[好用工具]]></category> <category><![CDATA[網站設計]]></category> <category><![CDATA[adobe edge]]></category> <category><![CDATA[css3]]></category> <category><![CDATA[html5]]></category> <category><![CDATA[javascript]]></category><guid
isPermaLink="false">http://www.mrmu.com.tw/?p=1719</guid> <description><![CDATA[HTML5問世後帶給軟體開發者不少驚奇，尤其在相關產業的大力支持下，相關的應用工具也爭相出現。Adobe在日前推出Edge，就是為了要整合新一代的HTML5、CSS3及Javascript的動畫製作能力，提供給多媒體設計師一個便利的動畫製作工具，讓設計師不必額外學習相關程式碼的撰寫，可以將心力放在設計上。 Adobe Edge的第一個版本稱為 Preview 1 ，在昨天(8/1)推出了。目前 Adobe Edge下載使用是免費的，想玩玩看的話，必須先在Adobe註冊會員帳號，才可以下載。 你可以在這裡下載 Edge，而這裡有一些 Edge做出來的實例。 下載安裝時會發現有預留輸入序號的頁籤，不過Preview版的安裝會直接跳過這個頁籤，在同意規章後就直接進行下載了。 安裝後的Adobe Edge畫面如下。 Edge的UI十分簡單，最上方左邊是工具列，內有四個工具項目，分別是選取工具(Selection Tool)、矩形工具(Rectangle Tool)、圓角矩形工具(Rounded Rectangle Tool)、文字工具(Text Tool)。 正中央是動畫呈現的舞台(Stage)，我們可以從工具列裡點選矩形或文字，然後在舞台中拉出這些元素。 左方是元素們的屬性設定(Properties)，像是位置、大小、旋轉角度、縮放等；右方是所有在舞台裡的元素列表(Elements)，方便選定。 最下方的區塊是時間軸(Timeline)，就是用來賦于元素們動畫特效的地方。 目前看來，Edge的動畫製作方式與 Flash 的 Motion 動畫操作非常相似，也是以類似制定關鍵影格(key frame)的方式來定義每個階段元素改變的形式來生成動畫。例如，一開始時間軸的第1格key frame畫面，A元素位置在左上方，在時間軸第20格我們建立一個新的key frame (在Edge裡，只要點一下第20格就好)，然後改變A元素的位置，把它移動到右下方 (或甚至改變一下它的旋轉角度及透明度)，此時我們的時間軸裡就有兩個key frame了，而Edge會自動幫你完成第1格到第20格之間的動畫。 完成動畫後，Edge也沒什麼匯出功能，直接就是存成一個html檔、一個js檔，另外還生成了一個edge_includes目錄，裡頭放了一些js檔。 直接以瀏覽器打開此html檔，就可以觀看到動畫效果了。 當然不可能只透過html檔就能產生動畫，我們可以先觀察這個html檔的內容： 可以發現html檔是html5的格式外，它還包進了jQuery及edge自身的javascript檔，而這些javascript檔，就是扮演著讓動畫實現的關鍵角色。 這裡是我做的一個DEMO，動畫效果在Chrome看起來非常流暢。 目前我使用 win7 安裝並測試 Adobe Edge，發現操作上好像沒有很順暢，尤其有一些畫面Refresh的問題，重繪的觸發時間點很怪。另外我比較想看到可以整合頁面互動的效果，目前也還沒有見到，但整體來說，這個工具還是一個蠻有前瞻性的應用，期待日後Adobe能好好發揮Edge的潛力。]]></description> <wfw:commentRss>http://www.mrmu.com.tw/2011/08/02/adobe-edg/feed/</wfw:commentRss> <slash:comments>6</slash:comments> </item> <item><title>使用PHP開源類別(TCPDF)製作 UTF-8 的PDF報表</title><link>http://www.mrmu.com.tw/2011/07/25/php-tcpdf-utf-8-pdf-report/</link> <comments>http://www.mrmu.com.tw/2011/07/25/php-tcpdf-utf-8-pdf-report/#comments</comments> <pubDate>Sun, 24 Jul 2011 20:29:19 +0000</pubDate> <dc:creator>mrmu</dc:creator> <category><![CDATA[PHP程式設計]]></category> <category><![CDATA[網站設計]]></category> <category><![CDATA[pdf]]></category> <category><![CDATA[PHP]]></category> <category><![CDATA[tcpdf]]></category> <category><![CDATA[報表]]></category><guid
isPermaLink="false">http://www.mrmu.com.tw/?p=1714</guid> <description><![CDATA[最近有PHP專案需要製作報表，決定了輸出使用PDF格式後，便開始尋找解決方案。目前網路上找到的大多是FPDF或是其衍生出來的專案，因為有點急，就直接拿FPDF來做，沒想到是惡夢的開始XD，使用FPDF製作英文內容的FPDF，是沒什麼問題，但如果是中文內容，便問題重重。 試了很多目前現存在網路上號稱支援中文的FPDF，試驗結果不是失敗就是只支援BIG5 (chinese.php檔)，偏偏客戶的中文資料有罕見字，像是媖、煊、堃、珉、彣、伃、峯、晧等字，若用BIG5就會出不來。 試了好幾個小時後宣告放棄FPDF，尋找它表現比較好的子孫，於是找到TCPDF。 TCPDF因為是FPDF的子孫，所以語法幾乎不太需要轉換，而且支援UTF-8，真的是感動哪。不過它最感心的不只是支援UTF-8，它還支援WriteHTML這個超級相見恨晚的函式，故名思義就是只要餵它HTML語法，它就可以忠實轉成PDF內容。 到TCPDF官網下載TCPDF後，解開後可發現裡頭的examples目錄就有很多範例了。做報表最基本的就是頁首、頁尾的設定了，可參考第1~3個範例；另外，第6個範例就是WriteHTML。 基本上它的使用方式很簡單，只要include TCPDF，自建一個class，然後去extend TCPDF類別，接著new出實體，就可以開始Play了： 如上，New出來的$pdf，就可以藉著執行一脫拉庫的方法，一步一步的建立PDF格式的內容，最後再output，這個php檔就會輸出成pdf格式了。 至於輸出UTF-8的中文字，只要使用此語法就OK了： 其他詳細用法，直接copy範例修改會比較快。 參考： TCPDF官網-範例]]></description> <wfw:commentRss>http://www.mrmu.com.tw/2011/07/25/php-tcpdf-utf-8-pdf-report/feed/</wfw:commentRss> <slash:comments>3</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>台灣WordPress界的第一次聚會－WordPress Party!</title><link>http://www.mrmu.com.tw/2011/05/22/wordpress-party-taiwan-no1/</link> <comments>http://www.mrmu.com.tw/2011/05/22/wordpress-party-taiwan-no1/#comments</comments> <pubDate>Sat, 21 May 2011 17:03:40 +0000</pubDate> <dc:creator>mrmu</dc:creator> <category><![CDATA[活動聚會]]></category> <category><![CDATA[網站設計]]></category> <category><![CDATA[wordpress]]></category><guid
isPermaLink="false">http://www.mrmu.com.tw/?p=1688</guid> <description><![CDATA[今天是非常特別的一天，並不是因為世界末日beta 2.0的release，而是因為台灣WordPress界的朋友們在台北舉辦了第一場盛會－WordPress Party (WPP)，與會人員有40幾人，參加率很高，也算蠻熱絡。之所以會有這麼多熱血的朋友跳出來舉辦，好像是因為今年三月份我不負責任的在FB的社團中說了一些話： 突然間，Vista大大、Pseric、藍藍路等WP資深同學就跳出來快速的擬出草案，集結十幾位工作人員，一同策劃了WP在台灣的第一場聚會，果然是兵貴神速，沒有讓這件事默默的消失在FB的大海之中，在此跟你們學習到了很多。 因為實在太熱血了，所以趁著印象深刻，稍微記錄一下今天的情況好了。這次WP聚會不是很正式的性質，主要是與會的人分享使用WP的經驗，另外穿插了三位主講人，拆組達人、香腸、藍藍路。 聚會是下午2點開始，會場在B1，因為怕有人不知道1F的入口，所以工作人員用「廚房紙巾」做了標示，這真的是&#8230;好乾淨(!?)。不過因為我有點遲到，所以第一位主講人-拆組達人的分享，我聽得很零散，所以心得也不足以分享 (最後的wp精神喊話，有點像直銷的激勵大會XD)。 半小時的主題演講後，開始第一階段的個人分享，情況就是依照參加名單的順序，一位一位上台自介。 第二位主講人是香腸，除了常常在玩爛梗之外(遊戲王蓋牌的梗你到底要玩多久XD)，其實是一位快要進國防部當廉價公務員的認真熱血大四生。 (請各位集氣祝福他抽中海陸)。香腸前晚準備簡報到凌晨三、四點，一共做了68頁的簡報，講起來也是很流暢，梗雖然爛但是也是很巧妙的部署在其中，可惜藍藍路一直在旁邊轉圈圈，最後就快速的做了Ending。 接著是第二階段的個人分享，我上台了，上台前一直在想到底要說些什麼，若是分享一些目前部落格寫的東西，我總覺得沒什麼梗，所以除了大致交待一下我跟藍藍路和香腸怎麼認識的，還有提了一下「不弱格觀察」這個作品之外，我決定分享一些我對於WP中文版型設計的想法，突然就很衝動的打開一些正在實驗的東西，又提了一些自己所見業界客製WP的狀況。 但因為沒有準備，所以草草的解說後就下台了XD。下台後我其實很怕大家根本不懂我想表達啥，不過好險Pseric、Ted有正面的回應，並且一起討論了一些關於中文版型設計的想法，讓我覺得決定分享是正確的。 接著第三位主講人是藍藍路，他分享一些他實際接WP案子的狀況，重點是他不接大案(25k以下)，並且極力說服客戶不使用太多複雜的功能及介紹免費的替代方案。講得非常流暢，一度讓我感覺他在講廣播XD。會後他跟我說，他習慣不用power point來進行演講，果然是真正的幹古魔王! 整場聚會下來，相信與會的人都會同意，主持人藍藍路很有經驗，所以把整個聚會的節奏掌握的很好，像我這種不守規距的人，自介2分鐘講不夠，還超過很多時間，他也有辦法處理，到最後租用會場的時間也沒超出太多，真幹古魔王。 整個聚會到下午五點半左右結束，後來跟藍藍路、Pseric、香腸、阿福、Sinchen、銀狐一起去善導寺附近傳說中的龍門客棧吃水餃、魯味、牛肉湯、蛋花湯，以一個吃得飽飽的狀態作了完美的Ending。 為了給主辦的工作人員一些回饋，再追加3點對於下次聚會的想法好了： 每個人自介2分鐘我覺得還蠻剛好，另外2點到5點半這個時間也很適合。 我覺得可以增加主講人數，另外可以分類一下主題，不過分享的時間不需要到三十分鐘，增加一些聽眾發問的時間。像我本身比較著眼在開發上，就會想了解其他人的想法跟做法，交流價值觀、商業模式也很不錯。 我個人不會很反對商業贊助的「部份」介入，有錢表示有資源去推動進步，而且我相信與會大多數專業的人，都在思考商業問題，這很實際也很重要，大家喜愛WP，如果能以此為業當然很棒，自由軟體的商業模式我覺得很值得推廣，自由軟體不是叫你靠著熱血及佛心去喝西北風，但如果推動的都是小小的個體，其實我們也只能等著follow國外的腳步。讓真心喜愛WP的人能幫助它進步，也能獲得應有的利益，我覺得是最好的結果。當然，如果很明顯你只是變向的在召商，拿WP當晃子，而對WP社群沒有任何貢獻，那當然是out! 附註： 1.比較官方的說明網頁 2.本次與會人員的名單]]></description> <wfw:commentRss>http://www.mrmu.com.tw/2011/05/22/wordpress-party-taiwan-no1/feed/</wfw:commentRss> <slash:comments>7</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 1/58 queries in 0.008 seconds using disk
Object Caching 687/806 objects using disk

Served from: www.mrmu.com.tw @ 2012-02-10 05:28:29 -->
