HINA :: 工程幼稚園

[AS3 note.] 翻頁座標分析 part 2

2009-09-11T17:10:23+08:00

r² = b² + (r-a)²
r² = b² + r² -2ar+r²
r = b²/ 2a

求得第三點 D3 的座標值 (ex, r)，上圖綠色的線代表書本上緣的邊界值，所以 r 值其實已經超出了邊界值(r > ey)，所以必須要再次計算翻頁出來的真正 D3 的位置。由直角三角形比例線段求得點 D3 對於邊界值的距離 z。

r/c = t/z
z = tc / r

所以新的 D3 座標值應該為 (ex - z, ey)，其中 z 為 (r - ey)*c / r，求得新的 D3 座標點後，接下來要求的是 D4 的座標點。

(v - z)² + p² = z² -> p² = z² - (v - z)²
v² + (t - p)² = t²
v²+ t²- 2pt + p²= t²
v²+ t²- 2pt + (z²- (v - z)²) + p²= t²
v = pt / z

p² = z² - (v - z)²
p² = 2(pt/z)z - (pt/z)²
pz² = 2tz² - pt²
p = 2tz²/ (z²+ t²)
p = 2tz²/ g²

v = (2tz²/ g²)(t/z)
v = 2t² z / g²

已上求得點 p, v 對於上緣極限值的距離，所以可得點 D4 的真實座標值為 ( ex - v, ey - p )。倘若點 D3 沒有超出上緣極限值，則 D3 = D4 為共點。

基本上，若是以矩形對角線相交點為二元座標原點，則書本四個角落分別就是四個象限，公式都一樣，只有正負值的變化而以。
就降

創用 CC 授權

本創作適用姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

[AS3 note.] 翻頁座標分析 part 1

2009-09-10T18:17:05+08:00

r² = (2c)² + (b-r)²
r² = 4c² + b² -2br+r²
r = 4c²/2b + b/2
r = ((2a)² -b² )/2b + b/2
r = 2a²/ b

故在滑鼠任意點 (x,y) 與已知點 (fx,fy) 可求得底邊點 (r, fy)。則 r 點 x 座標值為 fx - 2a²/ b，其中：

a = 1/2 ( sqrt((fy-y)² + (fx-x)² )
b = fx-x

所以，就這樣

創用 CC 授權

本創作適用姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

[jQuery tech.] GUI for jQuery 超強 jQuery 工具

2009-09-09T11:06:06+08:00

GUI for jQuery

這東西是出來扼殺程式設計師的嗎（大誤），你看看這種拖拖拉拉的 GUI 到底是怎麼回事（你說說看，你說說看啊）。對於小型活動、時程短暫或是使用次數非常低（甚至是一次性頁面）來說，非常的方便。

結論就是，我還是包袱ㄚ款款ㄟ來去賣雞排好了

創用 CC 授權

本創作適用姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

Mobloging - 2009-08-30

2009-08-30T20:58:38+08:00

18:34:40

高鐵夕末。

創用 CC 授權

本創作適用姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

[影像] 福隆便當小折鐵腿行

2009-08-29T23:06:36+08:00

趁著假日，跟女友去福隆吃便當，騎腳踏車。

便當。

舊草嶺隧道口。

龍門吊橋。

學人精。

回程火車上窗外的風景

就降~~

創用 CC 授權

本創作適用姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

[AS3 tech.] Flickr 自選區域註解 Flash 版

2009-08-28T11:51:46+08:00

Flickr 瀏覽圖片的註解功能，花了點時間把它變成 Flash 版本了。不過因為 TC 不能放這種跨網域存取的 flash 檔案，所以只好放在其他地方了。在這邊附上截圖給大家參考：

這個東西並不難，滑鼠動態圈選的部分之前的文章已經有提到兩個很完整的範例了。至於動態圈選的時候，因為利用 Sprite 來畫框框，配合 MOUSE_MOVE 的監聽，會出現殘影，所以，其實可以利用 MovieClip 來做，只要加一塊半透明的 MovieClip 然後利用 MOUSE_MOVE 來控制 MovieClip 的 Scale 特性，就不會有殘影問題了。缺點是，如果這塊 MovieClip 裡面還放了東西，那就會變形囉。

就降~

創用 CC 授權

本創作適用姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

[灌水] 這是灌水文章...

2009-08-24T18:13:31+08:00

上次的那個程式改成這樣了。

嗯，這篇是純灌水，等我想到再補

創用 CC 授權

本創作適用姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

[TextCube] TextCube 1.8 beta 心得

2009-08-14T11:33:16+08:00

從 TC 1.7 到 TC 1.8 Alpha 到 TC 1.8 Beta，大致上的心得是這樣：

僅是 0.1 的差別，資料庫結構不變（恭喜夫人，賀喜老爺）。
檔案結構全數更動（天殺的）。
TableQuery 與 DBQuery 將併入 POD Framework 中不再使用（舊的 plugins 死一半）。
新的資料庫介面叫做 DBModel（舊的 plugins 再死一半）。
開始正式支援 MySQLi、PostgreSQL，與韓國自行開發的資料庫系統 Cubrid。
保留舊有的 library 資料夾，不知道是為了相容性問題還是怎樣，沒有包成 Controller。
還是很愛用全域變數與超全域變數（global、$_GET、$_POST 應該就屬 TC 最愛用）。
可以裝在 Nginx 上面（但是我沒試過）。
Workflow 改很大，改不用錢（plugins 死很大，死不用錢）。
使用很多 PHP 5 的功能，雖然是 MCV 但相對複雜很多（大概只有官方自己看得懂）。
僅支援 PHP 5.2 以上。
可以編輯標籤。
文章發佈設定上多了幾個項目（大多跟 Feed 有關）。

其實我之前也看過有人已經裝了 Beta 4 然後問了我一些問題，但是，老實說我真的愛莫能助。畢竟他已經把 TableQuery 跟 DBQuery 這兩組從 1.5 開始用到現在的 class 納入移除的 TODO 裡面，只要有插件用上的非死即傷。這種事情在 TatterTools 0.96、TatterTools 1.x 與 TextCube 1.5、TextCube 1.7 上面不知道發生過多少次了（怨），我上述列出的四個版本號，都是有重大改變的，我覺得 TC 用戶不多或是不想升級的主要原因，大概就是這樣吧（升級連資料庫結構都換掉，心臟要夠大顆的人才敢用）。

最近跟官方主要開發者連繫上，問了些關於插件的問題後閒聊了兩句，看來 TextCube 1.8 要推出的時間應該不遠了。不過看了看官方的 Ticket 還這麼多，我想推出的時間應該還有好一陣子吧（搞不好是明年）。至於大家一直期待的 TextCube 2.0，老實說，他是不是真的會推出 Open-source 的版本我是觀望啦，但是如果真的推出了，我覺得那應該是社群性非常強大的部落格系統了，我在官方給我的試用上，真的覺得社群性遠大於部落格本身的功能了。

先這樣，官方 beta 5,6 安裝檔案在 MySQLi 的安裝上有問題，不過我還是裝起來測試了一下，還算可以啦！只是又有新的語言檔案要翻譯了

創用 CC 授權

本創作適用姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

[Python tech.] pyMSN 大蛇版 MSN 撞牆初探

2009-08-14T13:57:18+08:00

http://telepathy.freedesktop.org/wiki/Pymsn

update, 這個 Python 實在是大的要命，測試過後發現以下問題：

notification.py 裡面少一個 event handler，會讓執行過程中跳出 WARNING。
如果對話視窗沒有被使用者關閉，當 pymsn 重新登入的時候，使用者的控制項會失效。原因在於 msnp 再重新登入之後，查到使用者的對話視窗，會送一次 RNG，而這個 RNG 會重新對 switchboard server 申請一個新的 session 來給 Client 端使用。然而，pymsn 在送回 RNG 之後，使用 ANS IRO 的 transaction_id 被重新歸零了，所以會導致同一個 Client 端有兩個 session，造成無法對應到使用者而失效。

解決的辦法是：
把它（event handler）加回去，打開 pymsn/msnp/notificatoin.py 檔案。
我在 --- Presence & Privacy --- 的底下加入：

def _handle_GCF(self, command):
    pass

另外一個 event 錯誤的問題目前尚無解答，這個 transaction_id 為什麼會被歸零，還是要查看原始碼才知道問題出在哪裡。不過，因為 Python 我實在是太不熟了，等我看懂我想這個問題應該就有人會解決了吧。

INFO:protocol:switchboard_manager:requesting new switchboard

/// 這裡的 SB 的 transaction_id 是 12

DEBUG:Transport:>>> XFR 12 SB
DEBUG:Transport:<<< XFR 12 SB 207.46.26.159:1863 CKI 355252581.3720.42179215 U messenger.msn.com 1
DEBUG:Transport:<-> Connecting to 207.46.26.159:1863
DEBUG:Transport:>>> USR 0 bot1@hinablue.me 355252581.3720.42179215
DEBUG:Transport:<<< USR 0 OK bot1@hinablue.me Python%20MSN%20Bot
INFO:protocol:switchboard_manager:New switchboard attached
DEBUG:Transport:>>> CAL 1 hinablue@msn.com
DEBUG:Transport:<<< CAL 1 RINGING 355252581
DEBUG:Transport:<<< JOI hinablue@msn.com *9mil%20Hina::Cain%20@%20NB%20猛當機...%20該不會是在討錢了吧%20orz 2789003308
DEBUG:Transport:<<< RNG 1983480976 207.46.26.47:1863 CKI 84735.18013320 hinablue@msn.com *9mil%20Hina::Cain%20@%20NB%20猛當機...%20該不會是在討錢了吧%20orz U messenger.msn.com 1
DEBUG:Transport:<-> Connecting to 207.46.26.47:1863

/// 這裡送出了 RNG 並且連線到 switchboard server

DEBUG:Transport:>>> ANS 0 bot1@hinablue.me 84735.18013320 1983480976

/// 拿回來的 ANS 的 transaction_id 是 0，但是這裡的 transaction_id 應該是接續 XFR 的 trid+1="13" 才是正確的

DEBUG:Transport:<<< IRO 0 1 1 hinablue@msn.com *9mil%20Hina::Cain%20@%20NB%20猛當機...%20該不會是在討錢了吧%20orz 2789003308

/// 既然 transcation_id 都不對了，IRO 自然也就不是原來的 Client 了。

DEBUG:Transport:<<< ANS 0 OK

/// 這裡 ANS OK 沒錯，但是 ANS 的對象已經不是原來的 Client 了。

以上就是他的錯誤，至於怎麼解，目前傷腦筋中。

在 FreeBSD 裡面測試了一下，需要安裝：

python（廢話）。
py-gobject，路徑在 /usr/ports/devel/py-gobject/。
ElementTree，路徑在 /usr/ports/devel/py-elementtree/。
pyOpenSSL，路徑在 /usr/ports/security/py-openssl/。
pyCrypto，路徑在 /usr/ports/security/py-pycrypto。
epydoc，路徑在 /usr/ports/devel/epydoc/，產生 api-doc 要用的。

然後就可以 python test.py 測試了。

test [/home/hinablue/pymsn-0.3.3] -hinablue-> python test.py
Account: (打入帳號)
Password: (打入密碼)
DEBUG:Transport:<-> Connecting to messenger.hotmail.com:1863
DEBUG:Transport:>>> VER 0 MSNP15 MSNP14 MSNP13 CVR0
DEBUG:Transport:<<< VER 0 MSNP15
...(後略)

按下 ctrl+C 就可以離開了。至於互動上，要參考 user-api-doc 去自己實作囉。

創用 CC 授權

本創作適用姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

[Flash tech.] 簡單的 Flash 滑鼠拖曳圈選

2009-08-26T16:05:35+08:00

強者請直接參考這兩篇：

上述兩篇是教你怎麼在 Flash 裡面利用滑鼠的拖曳動作來做圈選框，並將圈選框內的圖形給複製出來。我呢，則是將圈選框小改了一下，因為利用 Shape 透過 graphics 的方式來做的話，會有很多影分身出現。所以我就換了個思考模式，一樣是利用滑鼠的拖曳動作，把他換成 MovieClip 來做的話，就不會有影分身問題，而且也可以將透明度給拉出來，讓圈選的部位可以半透明。

這是影片測試結果，我可以多次的圈選區塊：

線上輸出測試：

然後，輸出圈選區塊的座標值：

礙於這是私人需求的程式，所以原始碼就不在此野人獻曝了，基本上是參考我所列出來的那個網站修改而來的，有需要的人就煩請自己動動腦囉。

創用 CC 授權

本創作適用姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

[BSD tech.] 在 freeBSD 中掛 2TB 以上的硬碟

2009-07-27T18:15:32+08:00

筆記一下。

在 FreeBSD 7 以後掛載大容量硬碟，建議使用 gpart 來做規劃。核心需要重編一下，這是 man gpart 的建議。我只編我需要的兩個項目而已，其他的，若是有需要可以自行選用。

options    GEOM_PART_BSD
options    GEOM_PART_GPT

然後，先確定你的機器有抓到設備，接著我們就開始來做新硬碟的切割。我這次是掛載了四顆 1TB 的硬碟，所以他們分別叫做 ad4、ad6、ad8、ad10，其實操作方法都一樣。

gpart create -s GPT ad4
gpart show
=>        34    1953525101    ad4    GPT    (932G)
              34    1953525101    -- free --

gpart add -b 34 -s 1953525101 -t freebsd-ufs ad4
gpart show
=>        34    1953525101    ad4    GPT    (932G)
              34    1953525101         1    freebsd-ufs    (932G)

由於我整顆硬碟不分割使用，所以在 gpart add 的時候，磁區自然就使用全部了。至於 34 之前不能用，是因為那是留給 PMBR (sector 0)、primary GPT header (sector 1) 和 primary GPT table (sector 2~33) 用的。

接下來只要格式化之後，再掛起來就可以用了。

newfs -b 16384 -f 2048 -U /dev/ad4p1

對了，用 gpart 新增的磁區，它的 index 從 1 開始依此類推，所以第一個就是 ad4p1 了。

ps. 核心若是沒編譯，系統會超級不穩。

創用 CC 授權

本創作適用姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

[影像] 花蓮曬黑黑機車之旅

2009-07-22T11:15:02+08:00

這次出遊是帶了女友的工讀生們，總共七個人一起搭車到花蓮，交通工具的部分由神通廣大的工讀生完成購票，我只能說傑克，這真是太神奇啦！

禮拜五出發，我請了三個小時的補休回家拿行李，在永福橋上看到彩虹。

晚上到了花蓮一直到第二天天氣都不是很好，陣雨不斷，不過過了中午之後就開始放晴了，非常熱。花蓮的租車還真是超級無敵便宜，我們租的這台 CUXI 一天才 300 元，普通的 125c.c. 一天才 250 元而已。不知道是不是因為認識車行老闆的關係（XD）。

吃過中餐之後就殺到遠雄海洋公園了！等兩點入園，票價比較便宜。

票卡長這個樣子，這個票卡入園就回收，所以也別想帶回家（除非你花錢不進去）。

總共就這些人，除了我以外。

我在這邊（XD）。

可愛的背包，但是實際上這個背包的容量只能放一支手機。

海洋公園的纜車上的遠眺。

搭纜車到最上面，這裡是遊樂區。旁邊有一座室內的城堡，但是後來忘記進去看看了。

招牌纜車，遠遠就看得到。

遠雄海洋公園的招牌！

碰碰船，還蠻好玩的，可惜時間很短。

一樣是遠雄招牌之一，票卡上印的就是它！

又是遠雄招牌，海豚表演！

累了，也傍晚了，在門口等其他小朋友到齊。

離開前的最後一瞥。

晚餐是去吃秘密雞地，因為是祕密所以就不多說（啥）。吃完之後到隔壁的鯉魚潭看水舞秀，人超多的啦！

水舞季中央舞台有原住民的表演，表演結束之後就開始施放煙火。我的位子抬頭剛好是它媽的好大一棵樹，所以我漏掉了兩三發高空大型煙火（怨）。

隔天，來到七星潭，除了熱，還是熱，有夠熱，非常熱，超級無敵熱。

天氣就是這麼好，白浪滔滔，測光超亂！在海邊還是需要外閃的（忘了帶）。

內閃硬上，勉強及格。

海水又冰又涼！

但是真的很熱（相機又入塵了）。

打完收工（混）

創用 CC 授權

本創作適用姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

[CSS tech.] Blueprint CSS simple howto

2009-07-13T16:19:34+08:00

我不知道該怎麼樣去解釋甚麼是 Blueprint CSS Framework，所以，底下我直接摘錄 Blueprint CSS Framework 的官方 README 中的說明（謎：你是要充版面吧），另外，他們也有 Google Code 可以參考：

Welcome to Blueprint! This is a CSS framework designed to cut down on your CSS development time. It gives you a solid foundation to build your own CSS on. Here are some of the features BP provides out-of-the-box:

* An easily customizable grid
* Sensible default typography
* A typographic baseline
* Perfected browser CSS reset
* A stylesheet for printing
* Powerful scripts for customization
* Absolutely no bloat!

簡單來說，他是一個蠻基本的 CSS 設定，但是除了基本設置之外，另外有分欄設定，也有針對列印等設置。太過詳細的這裡就不贅述，基本上我覺得他不算是一個真正的 framework，不過如果拿來當作是一個開始也算是不錯的選擇。畢竟，寫了太多 CSS 之後，其實有個統一的標準也是一件好事。從官方下載檔案之後，其中我們之需要 blueprint 資料夾就可以了。我們將這個資料夾放到我們放置 CSS 檔案的資料夾中，例如：styles/blueprint，這樣，我們就可以開始規劃我們的 Layout 了。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Blueprint simple layout</title>
  <!-- Framework CSS -->
  <link rel="stylesheet" href="./styles/blueprint/screen.css" type="text/css" media="screen, projection">
  <link rel="stylesheet" href="./styles/blueprint/print.css" type="text/css" media="print">
  <!--[if lt IE 8]><link rel="stylesheet" href="./styles/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
</head>
<body>
</body>
</html>

事前準備工作結束，單純的把 Framework 給寫進來就好了，接著，我們得思考我們的 Layout 該長成甚麼樣子呢？假設我們要做個三欄式的模樣，那它大概會長成這個樣子：

然後呢？我們回到 HTML 裡，一開始，我們需要準備一個＂容器＂來裝我們所需要的東西。這個容器通常我們將它放置在最外層，使用 DIV 標籤，並給他一個 ID 命名為＂container＂。在使用 Blueprint CSS 時，我們必須要有這個容器，關於這一點請牢記。

我們再回過頭來看看 Blueprint CSS 到底做了甚麼事情。關於 screen.css 這支 CSS 檔案的原始檔案，都在 src 的資料夾底下，這個檔案總共包含了有：Reset、Grid、Forms、Typography 爾等的設定。另外 ie 則是使用 ie.css 做額外的設置。

首先，我們先來看 Reset，顧名思義，他就是將 CSS 的設置針對瀏覽器做初始化的動作。關於這方面的工具其實很多，包括 jQuery 也有這樣的 Plugin 可以使用，不過這裡不提 CSS 以外的事情，所以這是基本重新設定 CSS Styling 的方式。

接著，Typography，針對文字控制（印刷）的部分做一個標準化的動作，其實這個所指的印刷，不單純是所謂的列印這個動作，而是廣泛的針對顯示在螢幕上的樣式做設定。換句話說，他是統一畫面上文字控制的一個初始化設定。當然，Blueprint CSS 也是有針對列印的部分額外提出一個 print.css 來做控制。

再來，Forms，針對所有表單元件進行初始化。當然，這些設定是可以依照個人需求去修改的，不過，並不建議直接修改這個檔案，最好另外將其設定寫在額外的 CSS 檔案會比較好。

最後，Grid，針對容器的設定。這是這個 Framework 的靈魂所在，所有關於容器這個部份的設定，都在這個 CSS 裡面完成。使用這個 Framework 的限制是，容器的大小固定在 950px 以內，所以若是要使用更大的容器尺寸，這個 Grid 設定就不敷使用了。不過，其實還是有跡可循的，關於這方面在此暫時跳過。

所以，其實這一整個 Framework 在做的事情，只是幫你把粗略的架構給畫出來，而且你不需要去針對各項元件的設定而傷透腦筋。不過，要真的從中去學習或是修改這樣的 Framework，除非你有非常多的時間跟耐性，不然我並不建議真的需要去理解它（Framework）到底在做甚麼。

回到 Grid，我們其實對於容器，只需要知道我們所需要的大小即可。由 Blueprint CSS 的預設容器大小 950px 來看，我們倘若需要三欄設定，左與右皆為 190px，那麼依照 Blueprint CSS 的設定，左右的 Class 只要設定為 span-5 即可，那麼中間怎麼辦呢？依照簡單的數學公式：

950 - 190*2 - 10*2 = 550

所以，中間的寬度是 550px，那麼我就可以從 Grid 中得知，中間的 Class 我可以設置為 span-14。而，為了避免留白的推擠導致欄位被迫換行，我可以在左右的 Class 分別加上 first 與 last 的 Class 設定，來清除空白。所以，我們由 Grid 中所得知的設定，就是如此。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Blueprint simple layout</title>
  <!-- Framework CSS -->
  <link rel="stylesheet" href="./styles/blueprint/screen.css" type="text/css" media="screen, projection">
  <link rel="stylesheet" href="./styles/blueprint/print.css" type="text/css" media="print">
 <!--[if lt IE 8]><link rel="stylesheet"href="./styles/blueprint/ie.css" type="text/css" media="screen,projection"><![endif]-->
</head>
<body>
  <div class="container">
  
    <div class="header">
      <h1>header</h1>
    </div>
    <hr>
    
    <div class="span-5 first">
      <h1>sidebar 1</h1>
    </div>
    
    <div class="span-14">
      <h1>content</h1>
    </div>
    
    <div class="span-5 last">
      <h1>sidebar 2</h1>
    </div>
    
    <hr>
    <div class="footer">
      <h1>Footer</h1>
    </div>
  
  </div>
</body>
</html>

這樣就完成了。沒有錯，不要懷疑，這樣就完成了三欄式的基本設定。

如果需要更複雜的設定呢？其實 Grid 也幫你準備好了，只是，這樣的類別設定是不是真的很容易理解？老實說我個人還是有相當的疑慮。對於特殊的定位或是相關位置控制，可以使用的類別有：append、prepend、pull、push 這四種，不過，前兩個並不帶有浮動（float）設置，後兩者則各自帶有浮動與相對定位（position: relative;）設置，在使用上並不相同。

我舉個例子，不過這種較為複雜的設定，希望是對於物件定位稍有了解的人再來看會比較容易理解。

實際上的操作是這樣的：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Blueprint simple layout</title>
  <!-- Framework CSS -->
  <link rel="stylesheet" href="./styles/blueprint/screen.css" type="text/css" media="screen, projection">
  <link rel="stylesheet" href="./styles/blueprint/print.css" type="text/css" media="print">
  <!--[if lt IE 8]><link rel="stylesheet" href="./styles/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
  <style type="text/css" media="screen">
    
  </style>
</head>
<body>
  <div class="container">
  
    <div class="header">
      <h1>header</h1>
    </div>
    <hr>
    
    <div class="span-5 first">
      <div style="height: 3em;">
      </div>
      <h1>Sidebar 1</h1>
    </div>
    
    <div class="pull-5">
      <h1>Sidebar 0</h1>
    </div>

    <div class="span-14">
      <h1>Content</h1>
      <br><br><br><br><br><br><br>
    </div>
    
    <div class="span-5 last">
      <h1>Sidebar 4</h1>
    </div>

    <div class="span-14 push-5 last">
      <h1>Sidebar 3</h1>
    </div>
    
    <hr>
    <div class="footer">
      <h1>Footer</h1>
    </div>
  
  </div>
</body>
</html>

其實如果對定位的關係不甚理解的話，其實這個地方並不是那麼容易懂。如果換個方式來說的話，其實它就是浮動元件（float）中，利用推齊（clear）的屬性來做成的效果，只是，在這個地方他利用浮動與留白來做，好處是可以較為精準的控制元件的位置，缺點是，相對於使用推齊的方式來說，不容易理解。

大致上是這樣，對於做 Layout 來說，不失為一個好用的工具。另外推一個好站：DivtoDesign，關於他的 CSS Fframework 的文章可以參考這一篇：960 CSS Framework – Learn the Basics

最近心得：DIV 不是萬能，嚴謹易讀的 HTML 結構才是唯一正途！

創用 CC 授權

本創作適用姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

[非關影像] 星沙長成這個樣子啦

2009-07-12T02:04:41+08:00

我先說，不是我帶回來，而是沙子卡進褲子口袋，今天拿褲子的時候才發現的，一堆沙子裡面有幾個零星的星沙。

就降，打完收工 XD

創用 CC 授權

本創作適用姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。

[IE Sucks] 我操你媽天殺的 IE6+7

2009-07-09T17:28:11+08:00

WTF IE 6+7 Sucks!

WTF IE8, print always reload image source from remote.

我已經不知道要說甚麼了

創用 CC 授權

本創作適用姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。