mr.mu

下個網站使用HTML5/CSS3來實作吧!

mrmu — Fri, 11 Nov 2011 13:45:35 +0000

不曉得身為網頁設計師的你，是否有考慮在下個專案開始使用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架站有興趣的朋友，歡迎加入討論~

WordPress 台中趴踢樂，11/20台中見!

mrmu — Mon, 07 Nov 2011 02:49:59 +0000

自從今年5月份在台北舉辦了第一次的WordPress Party聚會後，10/15在台南也舉辦第二次WP一連兩天的聚會。在北部、南部都有過聚會後，終於中部也有一場了。活動訊息如下：活動名稱：WordPress 台中趴踢樂活動時間：2011年11月20日 (13:00~16:00，12:30 開放入場) 活動地點：黑貓月亮2F，台中市西屯區大墩二十街111號名額限制：25人 (就在寫本文寫到一半時額滿了XD) 活動費用：120元 (現場收費，飲料無限暢飲) 這次聚會講者有兩位，首先是在WP界頗有名氣的香腸，主題是「網站架設很困難？WordPress輕鬆一次幫你辦到好！」另一主題將由小弟介紹「WordPress還能怎麼玩？WP更多元寬廣視野」。雖然人已經滿了，但還是附上活動網頁，如果中途有人不克前來，也許還有機會一同參加XD：http://blogxd.com/WParty/ 另外WordPress台南場又有活動了! WordPress佈景行不行，名額有限，快衝吧!!

初學程式語言-先學個大概，再求精細

mrmu — Fri, 28 Oct 2011 07:51:19 +0000

因為最近時間還算許可，所以兼了一門基礎的程式設計課程。先前的教學主題，比較是放在大二、大三生稍微進階一點點的程式設計，但這學期要教的學生大多都是第一次接觸程式語言的朋友。雖然在備課上較為輕鬆，但每每回想起自己初次學習程式語言時的那種身處迷霧般的感受，不免還是會一直思考如何調整上課的方式，也因此產生了一些想法。本篇是討論如何提供程式設計初學者適當的教學內容，是我個人想法，也歡迎討論。自然語言也是這樣試想小朋友剛學說話時，我們通常不會教他一堆修飾詞、形容詞，而是希望他講出重點，即是先讓句子的實用性出現。例如：「媽媽，我想要溜滑梯，可以嗎？」，第一次教他當然不能期望他說得完整，而是先讓他從會說「溜」開始，當他指著滑梯說「溜」時，通常大人就知道怎麼回事了。當大人理解小朋友的想法，並作出正確的回應，小朋友也獲得了成就感，擁有了再次學習的動力。而我認為，一開始學習程式語言也應該要如此。傳統課堂上的教學通常的情況是，老師在檯上照本宣科，拿一本書從頭講解，也許在一開始談變數，就把所有它的形態、所佔容量都講完(甚至還要求背起來，考試拿來考)；其他章節也是，一開始就照著書本，把主題談得很詳細，老師本人覺得講得很完整，很有快感，但聽得人卻很痛苦，覺得還沒開始寫程式，就要記憶一堆不知為何物的知識，很複雜。為何這樣情況會很常見？我猜部份的原因是，這樣的教學方式，老師最輕鬆。這種情況下，對少數幾個原本就非常有興趣的同學來說，也許反而更加好奇，然後增加自修的時間去研究；不過往往我們最常見到的是，大多數有點興趣的同學會深深覺得「自己不是寫程式的料」，然後整個學期靠用「背」的來過關，然後從此放棄學習程式設計。「資管系學生，是不是都該跑去寫程式」，這個問題很有爭議，但若問題改為「資管系學生，是不是都該對程式有一定程度的認識」，我就覺得是必要的。先學個大概，再求精細也因為如此，這學期我只列了幾本參考書目，但沒有選定一本書。我覺得書是參考用的，很少能拿來依其目錄編排來作為主要的學習流程。因為每個人的學習狀況不太相同，最好的方式還是由老師動態調整路線。我上過某程式課，第一堂在電腦教室上課，卻都在解說課本上的東西，直到下課都沒讓我們實際操作玩一下，真的相當解High。為了避免一開始談一大堆無聊的東西浪費時間，這學期的策略是，先講最少最基礎的東西，讓學生前幾堂課就能一直寫程式。談到程式語言裡的「變數」，儘管VB裡有超過十幾個型態，但我只講Integer跟String，一開始學副程式也不會講到Call By Value 或 Call By Reference。我只求先讓它動，寫得很醜很隨便都沒差。前半個學期學的東西，都是以「最低可用」的標準來介紹，然後再依同學的問題開始發展之後的教學路線，除了依能力來學習，問得多的就學得多，老師也不用無謂的趕進度，因為我的目標不是注滿指定容量的水，而是試圖點燃火苗。也許整個學期下來，能講到的主題不會像傳統方式那麼多元，但卻是最依同學能力，最切合需求的初階課程，未來對程式這麼排斥的同學也就不會太多。至於原來就很有興趣同學，就更不必去擔心了。一堂課的學習成績依興趣、態度、智力，每個人的程度都不會相同，我不會作齊頭式的要求，而是看立足點。我這樣教，只是想讓入門的門檻低一點，讓更多同學不再害怕學習寫程式，而不是想把學不會或寫不好程式的人當掉。我完全允許學生「混」過關，只要乖乖參與課程、不作弊、有交作業、有來考試，通常我不會當人。但我更想做的是鼓勵學的好或學習態度好的同學。學的好，當然是高分，不過學得不怎麼樣的同學，如果態度非常好，而且有建立起興趣，我通常會給很大的鼓勵性加分。也許學生會問，配分不是一開始學期初就談好了嗎？是的，但是作業、期中、期末、平時這些都是可以動態調整的，而且老師想要它多動態就有多動態。有時我覺得，成績在我看來佔最重的是「印象分數」。「教學」是人的活動，我們在教育的是「人」不是「機器」，人的變數很多，這些變數是構成印象的要素，在我看來這比分數更適合評斷學習成效，我不會在乎你多背了幾個語法，但卻很在意你是如何解決問題，或是不是積極去學習。分數是死的，它代表的意義很少，硬要說的話，也許分數高可以讓一個人的機會變多，如果是這樣，那我願意把機會多給一些具備更多可能性的同學。

網頁設計中的多層視差滾動效果 (Parallax scrolling)

mrmu — Tue, 18 Oct 2011 17:51:02 +0000

觀察上面的圖片，裡面有三張圖片，分別放置於不同階層，如此可以構成一幅具有簡單景深的畫面。假設我們將三張圖作成由右向左捲動的動畫，但背景圖片動得比較慢，前景圖片動得比較快，我們就可以感受到較符合生活經驗的景深效果。這種效果稱為視差滾動(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 參考資料：維基百科 – Parallax scrolling Scrolling Parallax Plugin for jQuery 官網

如何撰寫有效率的CSS選擇器(CSS Selector)

mrmu — Mon, 10 Oct 2011 16:39:28 +0000

高效率的CSS選擇器(Selector)表示法不是一個新的主題，對於網頁設計師而言，知道如何撰寫CSS，是一個基本的技術能力，而了解如何撰寫高效率的CSS則能讓網頁設計師的CSS作品獲得更好的品質。注意：這裡所指的不是讓開發者很有效率的寫CSS，而是讓開發者寫出來的CSS Selector能很有效率的被瀏覽器執行。本篇描述的規則，比較適用於非常需要全面提升「速度」的網站，像是每個頁面的DOM元素都超過1000個以上的網站。如果是像我這種小小的部落格，提升的效率就完全不明顯，但身為專業的網頁設計師，你還是必須把這些規則放在心上。 CSS 選擇器(Selectors) CSS 選擇器你應該不陌生，我們可以透過基本的選擇器去指定要處理的DOM元素，像是指定標籤(div,span,body…)、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 [...]

WordPress的Hook機制與原理

mrmu — Mon, 10 Oct 2011 06:31:35 +0000

稍有接觸過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、執行其他函式…等。我們在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(‘wp_head’); 這一行內容，而wp_footer()的內容也只有 do_action(‘wp_footer’);，所以我們直接把do_action的語法換到圖上去，比較容易做說明，因此示意圖變成：如此，只要執行到輸出header.php時，就會執行到wp_head()，就如同執行到do_action(‘wp_head’)，此時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 [...]

HPX之HP26-Open Source CMS架站技術聚會心得

mrmu — Fri, 16 Sep 2011 16:03:51 +0000

前幾天去參加了一個特別的聚會-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 – 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…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 [...]

2011 開放源碼國際研討會(ICOS)參與心得

mrmu — Tue, 13 Sep 2011 07:13:14 +0000

今年的開放源碼國際研討會在臺大共同教學館舉辦，從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。

Adobe Edge: HTML5、CSS3、JS的動畫特效整合開發工具

mrmu — Tue, 02 Aug 2011 04:57:47 +0000

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的潛力。

使用PHP開源類別(TCPDF)製作 UTF-8 的PDF報表

mrmu — Sun, 24 Jul 2011 20:29:19 +0000

最近有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官網-範例