花水妹

Drupal 的 Eye Candy?

花水木 — Mon, 26 Oct 2009 10:58:17 +0000

最近有幾次打擊，一次又一次讓我打入「一定要把Drupal不美不炫這件事徹底解決」這種無限輪迴的思緒裡面。

眼睛一亮的效果

其中一次是NPO的比賽，雖說Drupal得到最佳滿意度獎，但要講到絢麗，還真的是跟Joomla!有差，要做出漂亮的幻燈秀、Tab轉換的漸變動畫，甚至下拉式選單的fade in fade out，對Drupal來說都不是那麼方便的事情。

因此當我看到Joomla!的作品時，其實心中滿震撼的，如果以一天之內要做出來來說，能在首頁搞這些會讓客戶眼睛一亮的東西，真的是很了不起。而且，雖然我這樣說不一定準，但Joomla!內建的mootools的漸變動畫好像比jQuery(Drupal內建)順暢漂亮。

功能？美觀？

而上星期又有另一次打擊，就是潛在客戶拿著Drupal網站和Xoops放在一起，然後不斷說「Drupal這個網站不好看啊！功能也沒好到哪，Xoops什麼功能都有，又比較漂亮！」這讓我翻出三年前做過的Xoops網站，說真的也不差，Xoops在權限、功能、版型引擎(smarty)上也都很齊全，但我為何離開Xoops跑到Joomla!社群，為何又從Joomla!跑到Drupal，而現在已經一年多了，每次看CMS評比、測試，我都難以對其他CMS產生興趣？

有人說Drupal的原始碼漂亮，但我並非程式出身，說真的我寫的都亂七八糟，也完全沒意識到所謂的「原始碼漂亮」到底是怎麼一回事。有人說Drupal社群活躍積極，但在台灣事實上使用Joomla!和Xoops的使用者以量及社群活躍度也一直很不錯，甚至中文書都好幾本，不像Drupal也是最近才終於有第一本中文書(Drupal 6水滴架站全機能攻略)。另外也有人說那個小水滴真的很可愛，說真的我覺得那種藍並非很美麗的藍啊！

每次想跟別人解釋Drupal優勢的時候，很容易遇到別人覺得「Drupal功能強、可是醜」，讓我很難過，我難過的並不是大家誤會Drupal了，而是，Drupal真的不美啊啊啊！

Drupal真的醜嗎？

Drupal真的醜嗎？不！他都做得到，只是不容易而已，牠只是把功能切的太細，因此要實做一個漂亮的東西時，你必須從根思考。思考什麼呢？

首先，以幻燈秀來說好了，最後顯示只不過是有一連串的照片不斷的fade in fade out，可能有的會有一些文字，或是控制項(向前、向後，有的是數字)。別的CMS都是安裝之後，有個設定介面給你，看你要展示的圖片在哪，分別要打哪些說明文字，然後就美美的了。

但Drupal不是，你必須找到適合你的模組，必須先考慮你要幻燈的圖片是，(喘口氣)某內容類型的node還是某個image field還是某個block還是某個資料夾還是某個view還是某個node queue，模組們還不一定都提供你想要的來源方式。然後若有說明文字，你也必須清楚知道這些來源是整個內容管理系統裡的哪裡抓出來的，若這些你都很清楚，很有可能這個幻燈秀模組其實需要其他模組配合，你必須先去熟悉他的dependencies，有的也不是那麼容易使用。

接下來，如果很幸運都設定對了，展示出來的大部分也都還是不美，你必須知道如何用CSS美化，甚至你必須知道要去修改哪個tpl檔才能作到你要的樣子，這樣折騰下來，一個幻燈秀可能要花一個下午甚至一整天、兩三天才能實現，真的很頭痛。

做出來的效果就算很美了，花的成本卻比較高。客戶真的會了解這背後所謂的「彈性」究竟有什麼好處嗎？

再說下拉式選單好了，Joomla!許多版型都有下拉式選單，並且都有漂亮的漸變效果。Drupal呢？下拉式選單可以使用nice_menus這個模組，但是他一點也不漂亮，安裝之後就是灰灰一格一格的選單，滑鼠移過去下一層就會突然出現，像這樣：

若你想把灰灰的改顏色、換底圖、設定hover樣式，你必須知道要去哪裡修改CSS，所以你必須先了解他的運作方式才會知道你需要複寫哪些CSS，然後，你必須對xhtml/css有一定程度的了解，就算你了解，這仍舊是煩躁瑣碎的工作。

接下來，就算你把灰灰格子改漂亮了，還是比Joomla!漸變效果難看，因為他沒有fade in fade out，是直接蹦出來的。若你想把nice_menus改成有動畫效果，這更難了，在Drupal討論區有許多人討論，但結論是「等下一個版本吧」(目前dev中的就有這個效果)。

所以你可能想自己找方式，去找了jQuery的外掛，終於辛辛苦苦做出有漸變效果的下拉式選單，但花的時間和精神也真是太多了。

這樣說下來感覺很像在說Drupal外觀真的不好，但，我是Drupal社群的一份子，我就會努力扭轉這種事實形象！

這幾天用Drupal做了一個網站，用了兩個Eye Candy，一個是首頁的Carousel http://cairns.nxwok.com，一個是作品集相簿 http://cairns.nxwok.com/portfolio。實做過程也是顛頗啊！

[Module] Front page

花水木 — Fri, 23 Oct 2009 11:55:21 +0000

因為新Case的關係，讓我終於嘗試這個模組了。這個Front page模組主要功能是讓你設計一個「入口頁面」，讓你的首頁與其他頁面的架構、版面完全不同，並且可以很靈活地調整。主要的使用例子如下：

形象網站首頁Flash動畫
像Facebook一樣，登入者首頁和未登入完全不同。登入前是整體介紹及Login框，登入後首頁就是個人的Home。

是的，目前我只想到這兩個物盡其用的例子。他的介面如下(點擊放大)：

非常好懂，一裝上去就會用了。

製作首頁的方式非常多，除了Front page是專門提供以上用法之外，更多人使用Panel、Views、Blocks來配置首頁，就看你對首頁的需求了。首頁對一個網站的重要性實在太大了，在決定要用哪種方式前，最好先評估一下哪個方式最適合自己。

相關網頁:

Front Page | drupal.org 官方頁面

如何使用 Front Page 製定首頁?? | drupaltaiwan.org

入口頁面？ | drupaltaiwan.org

Front Page | drupaltaiwan.org

好用的網站草稿工具 Balsamiq Mockups

花水木 — Thu, 22 Oct 2009 11:47:20 +0000

其實大概去年或前年我就在一位叫做Even Wu但現在找不到人的前端超強者的部落格裡面看到這個工具，可以說眼睛為之一亮，一看就是非常合我口味的好工具。

可是因為當時太窮，所以沒買下去。後來參加NPO網站競賽時，主辦單位又拿出這個東西，並且把我們的專案使用這個工具製作出草稿，真是勾的我心癢癢啊！就非常想得到這個軟體。終於跑去找關於這個軟體的資訊了。

這個叫做Balsamiq Mockups的工具提供了許多網站常用的元件，可以用拖拉的方式直接拖到你的草稿裡面，不但可以讓自己腦力激盪一番，用來跟夥伴或客戶做簡報、介紹你的想法也是很方便。這玩意兒可以說是很棒的前製作業工具，讓你企劃網站、設計介面的時候更有頭緒。

這個軟體是要錢的，一套要79元美金，合台幣大約2765元。但你也可以透過以下方式免費得到：
1.do-gooder：如果你是個對社會有貢獻的改革理想家，無論哪方面(non-profit, charity, open-source contributor)都可以來信要。
2.技術型部落客：如果你有個專門討論技術方面的部落格，也可以寫信去要。
3.demo給15人：如果你願意在15人以上的會議中介紹這個工具，也可以事先寫信去要，而且可以要到兩個，一個讓你demo，一個是讓你現場送人的。
4.高中教師：如果你是高中老師也可以。
其他詳細方式可見此：
http://www.balsamiq.com/products/mockups/desktop

我看到這些說明，很開心就寫信去了，標題說「我不但是do-gooder也是IT部落客」(當然是寫英文)，然後內容寫說我有在Drupal這個Open Source CMS社群玩樂，並且也有寫一個專討論技術的blog(就是這個啊！)

然後興沖沖的寄出了。

但後來我發現剛剛那頁官網，他在一連串的條件下面又寫了：

因為來信量真的很多，我們無法保證每封信都會回。我們會盡量回信，但如果你沒收到回信，希望你能體諒我們。

看到這串字，我就覺得唉可能收不到了吧！他們每天一定收超級多信，我英文又爛，搞不好他根本懶得仔細看懂。我又一個衝動很想趕快用這個軟體，就刷卡買了，花了79元美金。

然後隔天，我就收到回信了，他們說「很樂意給妳免費license」。

所以我有兩個license。

Drupal的系統需求？

花水木 — Thu, 22 Oct 2009 11:34:19 +0000

Drupal官方網站有寫系統需求:
http://drupal.org/requirements

看起來沒什麼大不了，但事實上，如果你想比較大部分的掌握Drupal6以上的常用模組，以下幾點是一定要跟hosting協調、要不就是得換一家自由的hosting公司。

1.PHP5.2：

我第一個Drupal網站，客戶使用的是某小家主機商，該主機商客戶以某開放原始碼購物車為主，該購物車程式只適合PHP4，因此我只能想辦法在PHP4 的環境底下架設Drupal，基本上是困難重重，當初使用的是Drupal 5，若要用Drupal 6的話，PHP4是完全不行的。就算有PHP5，也一定要PHP5.2以上才能使用多個常用模組，如image api。但可笑的是，PHP5.3反而也不行，總之一定要PHP5.2。

2.php_value memory_limit 至少64M以上：

這是保守估計，一般都希望能96M，才能處理更多事情，獎金獵人網站我開到256M。不夠的話容易在啟用模組、佈景的時候發生一片空白的現象。

3.php_value max_execution_time 至少300秒：

因為有時需要處理很多東西，不給個300秒很容易整個白頻。

4.支援.htaccess：

不支援的話，你要調整上面兩個數值很困難。

5.MySQL5:

官方說法是MySQL4也可以，但最好使用5以免有許多編碼問題。

6.MySQL wait timeout 時間：

這個數值我還是不確定，目前獎金獵人雖然很穩定，但啟用模組、執行cron或是升級系統的時候還是常發生這樣的東西。

504 Gateway Time-out
-----------------
nginx/0.7.61

跟主機商洽談過，他有幫忙我調整數值，但還沒完全解決。根據Drupal Taiwan的大師解答應該是MySQL的wait timeout的問題。因此挑主機商時這個也要注意。

可見Drupal真的不是一個好搞的東西唉！(嘆)

[CSS] 萬無一失的透明寫法

花水木 — Thu, 22 Oct 2009 03:21:25 +0000

CSS可以讓東西變成透明，可以讓東西變得漂漂亮亮，但是很麻煩的是，不同瀏覽器需要的寫法不同，因此一個透明，事實上你要寫三行CSS才行。

.opacity {
  opacity: 0.8;
  -moz-opacity:0.8;
  filter:alpha(opacity=80);
}

其中opacity: 0.8;是給Firefox新版用的，所有標準化的瀏覽器也都適用，-moz-opacity:0.8;是給Firefox舊版，filter:alpha(opacity=80);則是IE專用。

[Drupal] 在頁面的tabs新增獨特class

花水木 — Mon, 12 Oct 2009 01:33:17 +0000

Drupal的menu系統有一個Local menu task，會顯示目前頁面的相關頁面，如圖：

上圖中紅色框起來的地方就是Tabs (Local menu task)。我是如何作到其中幾個是紅字呢？

一般來說，若你希望能分別使用CSS自訂Tabs的樣式，預設的class可能會不夠用。

這時可以在template.php加上以下原始碼：

<?php
function phptemplate_menu_local_task($link, $active = FALSE) {
 
	//取a元素的href 
	preg_match('/\"[^\"]*\"/', $link, $matches );
	$matches[0] = substr ( $matches[0] , 2 , strlen($matches[0]) - 3 );	
	$path_head = substr( $matches[0], 0, strpos( $matches[0], "/"));
	$path_tail = substr( strrchr( $matches[0], "/" ), 1 );
 
	//把  /user/me  變成   user-me
    $results[0] = str_replace('/', '-', $results[0]);
 
	//print_r
    $admin = user_access('administer users');
    if($admin){
      //drupal_set_message('<pre>' . $path_head . '-' . $path_tail . '</pre>');
    }
 
	$tab_class = $path_head . '-' . $path_tail;
 
	//增加獨特 ID
	static $mid = 0;
    $mid  += 1; 
    $moon_cake = 'bhuntr-' . $mid;
 
    return '<li class="' . $tab_class  . ' '  . $moon_cake. ($active ? ' active"' : '"') .'>'. $link ."</li>\n";
}
?>

這樣每個li就會生成獨特的class，再用CSS調整就再容易不過了。

[SEO] 建立標準網址 - Canonical URL

花水木 — Sat, 19 Sep 2009 15:47:35 +0000

同一頁面多個網址？

有時候一個網站裡面，同一個頁面會有不同的網址。比方說產品頁面，可能網址會因為分類不同而有不同的網址，但事實上是同一產品。

對Google、Yahoo或MSN搜尋引擎來說，他們的蜘蛛來爬你網站時會辨認所有的URL，若有許多URL內容都重複，則會降低分數，進而降低名次。

Canonical URL

有個辦法可以解決，就是在每個重複內容的頁面裡面的<head></head>加入以下程式碼：
<link rel="canonical" href="真正的產品頁面網址" />

其中「真正的產品頁面網址」可以使用絕對或相對路徑。

參考網站：

http://googlewebmastercentral.blogspot.com/2009/02/specify-your-canonica...
http://mrjavo.com/what-is-a-canonical-url/

六個網站測速工具

花水木 — Tue, 01 Sep 2009 15:30:26 +0000

網站易用性的理論很多，不過首要重點仍舊是：速度。

今天用各種測速方法測試了最近使用Drupal製作的獎金獵人，因為我現在人在澳洲，網路不快，常常懷疑我做的網站到底是真慢還是因為澳洲網路慢，故做了測速。

順便介紹幾種測速方式。

1.Webwait

http://webwait.com

很乾脆給你讀個十次看平均速度，我得到5.48秒。

2.Webslug

http://www.webslug.info/
可以比較兩個網站的速度，我拿來比較的是我的Wordpress部落格以及Drupal獎金獵人。

不過我覺得這不能說wordpress就比較慢，只能暫時說是個案。

3.YSlow

https://addons.mozilla.org/en-US/firefox/addon/5369
這是Firefox外掛，會幫你分析你的網站慢在哪，並用等級告訴你哪個地方最需要加強。

目前還沒時間一一優化。之後再分享。

4.Pingdom Tools

http://tools.pingdom.com/fpt/
老牌測速網站，會列出所有讀到檔案的連線、下載時間。我測起來是17.3秒。好慢！

5.Website Pulse

http://www.websitepulse.com/help/tools.php
從西雅圖測速。

6.Load Impact

http://loadimpact.com/
數據頗詳細。點免費測速之後要等一陣子，他會測試你的網站「抗壓性」，也就是可以經得起多少人同時在線上。不過測的同時我用Woopra看，倒是沒看到有人的蹤影。
我的測速結果在此。

順帶一題，雖然Woopra沒偵測到有人，不過你看：

Drupal內建的功能卻偵測到呢！這個網站從未有過這麼多人同時在線上。

最後，可以做個可用性小測驗：
http://www.humanfactors.com/downloads/webquiz.asp

之後我會朝網站介面可用性努力，讓獎金獵人動線更為完整。(目前有點混亂說)

[Drupal] 使用者自訂快跳選單

花水木 — Wed, 26 Aug 2009 04:03:56 +0000

嗨！最近除了睡覺之外，都是在跟Drupal奮戰。最近研究的是使用者的部份，如何優化Drupal的使用者體驗是滿有趣的主題呢！

這個小小的教學主要是示範「整合兩個模組」，希望做到的事情是：

希望每個會員登入後，右上角有個叫做「快跳」的下拉式選單，裡面有管理者預設的一些常用連結，會員可以自行再修改、新增自己想要的頁面到快跳。

先看成果：

用到的模組有：Bookmarks, Jump

Bookmarks可以作到「每個使用者都有自己的選單」
Jump可以作到「把選單變成Dropdown選單」

步驟：
1.安裝以上模組
2.把Bookmarks區塊放到網站任何位置。這個模組提供的區塊就是「會員選單」。但並非是下拉式的，所以在我的案例中，我是不希望他出現。不過這個區塊身負著「產生選單及放入預設選單項目」的重任，所以一定要放這個區塊。可以再用CSS隱藏掉(visibility:hidden)。
3.新增一區塊，輸入格式改為PHP，輸入

<?php
global $user;
$path = drupal_urlencode(drupal_get_normal_path(drupal_get_path_alias($_GET['q'])));
$jump_menu = jump_quickly('bookmarks-' . $user->uid);
$output =  '<div id="jump_to">' . $jump_menu;
$output .=  l(t('本頁加入快跳'), 'bookmarks/item/addpage/'. base64_encode($path),array('attributes' => array('id' => 'bookmarks_addthispage'))) . ' | ' . l(t('新增常用連結'), 'bookmarks/mine/presets' ,array('attributes' => array('id' => 'bookmarks_addpreset'))) . '</div>';	
print $output;
?>

EXTRA,
Jump的樣式是有個下拉式選單，然後右邊有個GO按鈕，但我希望他能夠變成一選就跳，不需要還要按GO按鈕，這樣才叫快跳嘛！
作法如下：
1.新增模組quicker_jump
2.寫法：

/*---------------------------
  改變右上角的快跳
  需要：jump.module
----------------------------*/	
function quicker_jump_form_alter(&$form, $form_state, $form_id) {
  $form_id_short = drupal_substr($form_id, 0, 17);
  if($form_id_short == 'jump_quickly_form') {
    $form['jump_goto']['#attributes'] =  array('onchange' => 'this.form.submit();');
	array_unshift($form['jump_goto']['#options'], '快跳...');
	$form['jump_goto']['#default_value'] = '快跳...';
	//$form['jump_goto']['#options']['default_selected']['selected'] =  'selected';
 
    $form['submit']['#prefix'] = '<div class="hidden">';
	$form['submit']['#suffix'] = '</div>';
 
    return $form;
  }
}

[Module] FeedBurner (D6 only)

花水木 — Sat, 04 Apr 2009 08:49:51 +0000

這個網站的前身是Wordpress，本來是個純部落格的架構，然後RSS訂閱都是使用Feedburner來計算。換成Drupal之後，Feedburner訂閱數驟減，才想起我沒把預設的RSS換成Feedburner連結，所以可能有些人變成是訂閱未經Feedburner燒錄的RSS。

今天介紹的Drupal模組功能跟Wordpress的FeedSmith相同，主要都是幫你把你的站內RSS訂閱轉換成Feedburner的URL，都很好用，以下有本站擷圖。

不過這個模組只支援Drupal 6.x，且目前是beta版，從去年八月底就無更新了。

相關網頁:

官方模組頁面

正體中文支援站模組頁面