MAC Snow Leopard apache 初始設定！

最近買了一顆新硬碟，手很癢就把我的雪豹重裝了，唉～悔不當初阿！
當然因為工作上的需要所以要把Apache+PHP+Mysql先弄起來摟！不然就沒辦法working了！
在MAC底下啟動Apache相當簡單，只要在"系統偏好設定"->"共享"->網頁共享"打勾就可以了，啟動後連連看http://localhost/~帳號名稱，看看結果應該會如下圖所示！

成功啟動後當然會有一些相關設定需要調教，例如說最重要的PHP；直接到/etc/apache2/httpd.conf裡面進行調教，預設

#LoadModule php5_module        libexec/apache2/libphp5.so

是關閉的，將前面的＃拿掉在重啟Apache就有PHP5摟！繼續往下看，因為有.htaccess與virtual host的需要，所以將下面

# Virtual hosts
Include /private/etc/apache2/extra/httpd-vhosts.conf
# Various default settings
Include /private/etc/apache2/extra/httpd-default.conf

開啟，之後存檔。接著到/etc/apache2/extra中增加自己所要的virtual host，飯粒：

 
#virtual host example

        DocumentRoot ../Site0/main/ 
        ServerName www.example.com


        Options FollowSymLinks   #允許apache遵循link語法
        AllowOverride All       #允許該目錄使用.htaccess

在/etc/apache2/users裡面會有一個user的設定檔將裡面的AllowOverride改為All，之後重啟apache大致上就設定完成啦！

css文字與圖片置中與簡易按鈕製作

有的時候只想要把文字或是圖片水平且垂直置中時，很懶得去想css怎麼達成，老是用margin + padding去做又會破壞版面，而且看起來是相當蠢的作法，今天就研究了一下到底怎麼水平與垂直置文字與圖片，不要再蠢下去了。
其中關鍵語法是用line-height與vertical-align去達成，下面舉個簡單的範例。

水平置中

.text_align {
        text-align:center;
}

垂直置中

.vertical_align {
        line-height:50px;
        font-size:1.2em;
}

水平垂直置中

.align { 
        text-align:center;
        line-height:50px;
        font-size:1.2em;
}

圖片置中

.wrap {
         /* Firefox, Chrome */
          line-height : 50px;
          white-space : nowrap;

        /*設置水平居中*/
        text-align:center;

        /* 針對IE的Hack */
        *display: block;
        *font-size: 45px;/*50 * 0.9 = 45px*/
        *font-family:Arial;
}
.wrap img{
        height:20px;
        width:20px;
        vertical-align: middle;
}

圖片編輯器-裁切篇

圖片編輯器停頓了一陣子，因為自己不曉得在忙些什麼所以就一直放著沒寫；繼上次圖片編輯器-旋轉篇後，今天在來介紹一下裁切照片的部分，主要參考的外掛為JCrop，可以輕鬆達成以前端呈現裁切照片的效果，跨瀏覽器支援也相當完整（Firefox 2+、Safari 3+、Opera 9.5+、Google Chrome 0.2+、Internet Explorer 6+），除了一般裁切外還包括設定比例裁切、裁切縮圖、預設裁切區塊、裁切動畫與裁切背景顏色更換等功能相當齊全，並且有後端php程式教學，其完整demo展示在此。
在使用上並沒有什麼太大的問題，設定等比例裁切也相當方便，基本使用如下：

1. 載入jQuery與jCrop

<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" /> 



2. 載入所要裁切的照片ID
3. 參數設定

基本上使用與設定如上述所寫的，完整的使用說明請參閱。
在IE使用上有點小bug，就是當使用到等比例裁切時，會發生錯誤，於是就上網搜尋了一下解法，發現大家都有遇到此困擾，但是沒有看到相對應的解法，最後只有硬著頭皮去看source code。
結果在程式第230~240行左右有一個getFixed()的函式，裡面定義了兩個全域變數，分別為 h、w，可能是與其他區域變數有衝突而產生錯誤，於是將其定義改成區域變數就解決了！！

var aspect = options.aspectRatio,
min_x = options.minSize[0]/xscale, 
min_y = options.minSize[1]/yscale,
max_x = options.maxSize[0]/xscale, 
max_y = options.maxSize[1]/yscale,
rw = x2 - x1,
rh = y2 - y1,
rwa = Math.abs(rw),
rha = Math.abs(rh),
real_ratio = rwa / rha ? rwa / rha : 0,
xx, yy, w, h //w, h未宣告在 ie 上會發生錯誤，因此加上加上w, h宣告

快打旋風 || ( Street fighter || )

• 簡介： 早期一款經典的格鬥遊戲，改良了一代操作遲鈍的缺點，二代玩起來讓人耳目一新，操作非常的順暢，可操作的人數更增加到八個，而且個個身懷絕技，讓喜歡快打遊戲的人有了其他角色選擇，更加延長了快打旋風二代的遊戲壽命，二代推出後果然大受歡迎，漫畫和動畫接二連三的推出，連電影也插上一腳，身處那個年代卻沒玩過的玩家，只能說他是異類了，目前已經開放至所有角色，可選擇四大天王作為挑戰 !

• 按鍵：



• (預設) 移動：[↑][↓][←][→] 
• 手攻擊(P)：輕[S]中[D]重[F] 
• 腳攻擊(K)：輕[X]中[C]重[V] 
• 開始：[Enter] 
• 搖桿設定方法

• 操作方式：



• 請點選第一個選進入按鍵選項 玩家可點選Configure進入更改按鍵(完成請點選X跳出) 或點選PLAY NOW直接開始遊戲 開始遊戲後玩家就要選擇欲操縱的角色，想必接下來的不用多說了吧!

• 人物招式：



• 龍 ( RYU ) ：


• 波動拳：↓↘→＋P 
• 昇龍拳：→↓↘＋P 
• 龍卷旋風腳：↓↙←＋K 
• 肯 ( KEN ) ：


• 波動拳：↓↘→＋P 
• 昇龍拳：→↓↘＋P 
• 龍卷旋風腳：↓↙←＋K
• 本田 ( E.HONDA ) ：


• 百裂張手：P連打 
• 超級頭鎚：←集氣→＋P 
• 春麗 ( CHUN-LI ) ：


• 百裂腳：K連打 
• 倒旋鶴腳踢：↓集氣↑＋K 
• 布蘭卡 ( BLANKA ) ：


• 雷霆放電： P連打
• 迴旋攻擊：←集氣→＋P 
• 凱爾 ( GUILE ) ：


• 迴旋斬：←集氣→＋P 
• 倒旋踢：↓集氣↑＋K 
• 桑基爾夫 ( ZANGIEF ) ：


• 雙截拳：3P 同時押 ( 中拳 + 重拳 ) 
• 倒抱頭挫：接近時搖桿轉一圈+拳 
• 塔爾錫 ( DHALSIM ) ：


• 瑜珈之火：↓↘→＋P 
• 瑜珈之焰：←↙↓↘→＋P 
• 拜森 ( BISON ) ：


• 衝刺直拳：←集氣→ + P 
• 衝刺勾拳：←集氣→ + K 
• 迴旋衝刺直拳：3P 押住，再同時放開 ( 時間越久越強 )
• 巴洛克 ( BALROG ) ：


• 鷹爪擊：↓集氣↑ + K 跳起後 + P 
• 倒摔擊：↓集氣↑ + K 跳起後近敵 + P
• 迴旋攻擊：←集氣→ + P空中衝擊：↓集氣↑ + P
• 沙卡特 ( SAGAT ) ：


• 虎刃波( 高 )：↓↘→ + P
• 虎刃波( 低 )：↓↘→ + K
• 升虎拳：→↓↘+ P
• 虎膝擊：↓↘→↗+ K
• 貝卡 ( VEGA ) ：


• 地獄火：←集氣→ + P 
• 回轉沖踢：←集氣→ + K 
• 千斤頂壓：↓集氣↑ + P
• 惡魔倒轉：↓集氣↑ + P
• 遊戲密技：限凱爾 ( GUILE )使用


• 金雞獨立： 使用方法先靠近敵人，再按重Ｋ，使ＧＵＩＬＥ翻轉踢，在腳落地之前，輸入指令 ← →＋Ｐ，使用後凱爾會以一隻腳站立在原地，成金雞獨立狀，解開方法：輸入↓↑＋Ｋ就可以了。

Internet Explorer Collection

Internet Explorer Collection 顧名思義就是各版 IE 大合輯，支援版本為

• Internet Explorer 1.0 (4.40.308)
• Internet Explorer 1.5 (0.1.0.10)
• Internet Explorer 2.01 (2.01.046)
• Internet Explorer 3.0 (3.0.1152)
• Internet Explorer 3.01 (3.01.2723)
• Internet Explorer 3.03 (3.03.2925)
• Internet Explorer 4.01 (4.72.3110.0)
• Internet Explorer 5.01 (5.00.3314.2100)
• Internet Explorer 5.5 (5.51.4807.2300)
• Internet Explorer 6.0 (6.00.2800.1106)
• Internet Explorer 6.0 (6.00.2900.2180)
• Internet Explorer 7.0 (7.00.5730.13)
• Internet Explorer 8.0 (8.00.6001.18702)

還可以安裝 Internet Explorer Developer Toolbar，這樣以後在 IE 測試平台上就方便多了。



點擊至下載頁面

圖片編輯器-旋轉篇

網頁圖片編輯之前一直很少接觸，為了達到使用者線上編輯的功能，因此規劃旋轉、裁切與圖片加字三個功能的小編輯器，感覺旋轉的功能比較簡單就從旋轉開始做起吧！ 因為本身是用jQuery進行開發，照慣例先去問問Google 大神有沒有先拜已經開發好的套件可以使用，果然推薦wilq32.RotateImage這個套件，在旋轉圖片上功能齊全，可以輸入任意角度、動畫旋轉及多瀏覽器支援，相當完整，還可以加入需要的event作為觸發，例如像mouseover或mouseout等事件。但是因為各家瀏覽器的關係，使每個瀏覽器執行該程式時都會依據特性去對圖片進行旋轉。基本上分為兩類作法，

1. 在IE上使用VML標籤語言，因此必須在body中加入下列宣告。
2.  其他瀏覽器則是採用canvas標籤達成圖片翻轉效果。

這個plugin執行時，除了產生新的翻轉圖片之外還會產生一個外框，此外框的長寬設定如下

img._widthMax=img._heightMax=Math.sqrt((height)*(height) + (width) * (width));

長寬設定為原本圖片長寬平方和開跟號，以保持圖片翻轉時的美觀； 但是在網頁中圖片的擺放位置與長寬設定基本上都是固定的，如果加入翻轉特效後，多了外框的空間會破壞原有的排版，所以就把外框的長寬改成跟原有圖片大小相符：

img._widthMax=img._heightMax=height > width ? height : width;

這樣在旋轉的時候就不會為版面傷腦筋啦！