2007 • 06 • 09

“Unfair”


1 Comment , , , and
Unfair

I redesigned again

這是一篇早就想要寫的文章，談談目前的這個「新設計」——二月底就已經上線了，現在才要介紹啊… XD

這次的新設計運用到許多我有興趣的新元素：方格系統、大型頁尾、動態排版、棄分類而就標籤、語意網/微格等等。

Grid System

方格系統看起來像是一個容易僵硬的設計方法，但我覺得它的實用價值完全足以彌補它的缺點。使用方格系統可以讓文章排版整潔、容易閱讀，而且便於改成動態排版。我最近在《寫給大家的平面設計書》也學到了「對齊」的重要，方格系統雖然沒有特別說要對齊，但是事實上就是對齊得很嚴重的排版 XD

我覺得愈單純的設計就愈困難，為了符合方格系統，副標題的設計讓我嘗試了一段時間，起初我讓副標題只是單純的字體較大、兩倍行高，但副標題如果上、下段落距離相等的話，就會讓副標題與後段文字比較沒有連結的感覺，因此我在副標題上方還多加了一行空白。這部份之所以不好調整，是因為方格系統必須有固定的行高，就像是橫行筆記本那樣，整張網頁都要跟同樣高的橫線對齊，然後為了對齊橫線，文字擺放位置，空白的大小就有所限制，調整了一段時間才覺得這樣比較順眼。

方格系統在選擇字型方面必須非常嚴謹，因為少了裝飾，就必須用 Typography 來彌補。

Read More »
2007 • 04 • 24

Permalink Redirect


1 Comment , , , and

Permalink Redirect 是一個用來統一文章連結的 WordPress Plugin ，可避免讓搜尋引擎索引到重複的內容。例如目前這篇文章的連結就有兩個：

  1. http://blog.bcse.info/?p=407
  2. http://blog.bcse.info/wordpress-permalink-redirect/

而使用此 Plugin 後，第一個網址會以 301 Permanently Moved 方式轉址到第二個網址。此 Plugin 同時也提供舊連結格式轉換為新連結格式的處理方案，其實這才是我想用這 Plugin 的最大原因，但是很可惜的是無法適用於本站。因為我本來是採用文章的 primary key 作為網址，而且只有這個參數，現在想改為文章標題，但系統無法判斷 http://blog.bcse.info/407 這樣一個網址中的 407 到底是 primary key 還是標題…

所以現在我只好把舊文章的 post slug 全部改成與 primary key 相同，這樣的話就算依照新的格式，產生的網址也還是一樣的。下 SQL 直接修改很快，只消一句 query ：

UPDATE `wp_posts` SET `post_name` = `ID` WHERE `post_type` = 'post';
2007 • 04 • 04

CSS Naked Day 2007


0 Comments , , , and
CSS Naked Day 2007 Logo

今年本格再度參加了 CSS Naked Day ，但不同於上次，這次本格會脫滿48小時。
（因為各地時差的不同，4月5日共有48小時）

2007 • 04 • 03

The Exodus


4 Comments , , , , , , , , and

Prologue

我本來以為可以待在 DreamHost 更久，但大約一個月前發生了一件事，只好被迫搬出來，情況跟 XDite.net 發生的差不多。於是這個月我的網管相關知識增進了不少，真得感謝 DreamHost… orz

Blog 的資料庫我有作每日備份，所以我到 Gmail 信箱取得備份後資料救回來了， Gmail 資料庫備份真是惠我良多，平常資料庫爆炸時也都是靠它救回來的。我的 bcse.info 網域名稱並非放在 DreamHost ，原因很簡單的只是懶得從先前的主機商 Burning-G 那裡 transfer 過去，之前其實曾經考慮過要 transfer 過去的，但是想一想就忘了，所以算是運氣不錯 XD

Domain Name

趁著這次事件，我順便也去向 Burning-G 要求自行管理 domain name ， Burning-G 使用的是 eNom 系統，只要我在 eNom 或 eNom 任何一個下線註冊好帳號， Burning-G 便能把管理權限 push 給我，這個 push 的動作只是在 eNom 系統內部的轉移權限，不算 transfer ，所以不需額外付費，如果我是要轉移到其他 registrar ，例如 Go Daddy, Network Solutions 等，就需要付 transfer 的費用，也等於是在新的 registrar 上續約。（老實說這一段我不確定）

Read More »
2007 • 03 • 26

WordPress supports tagging natively!


2 Comments , , , and

在剛才的一個更新中， WordPress 終於有了自己的 Tagging 系統，以後不用再裝 Ultimate Tag Warrior 了。

前陣子玩 Habari 時，其中一個吸引我的功能就是他完全採用 tagging ，沒有 category ，我目前相當喜歡這種分類方式，所以現在最新的設計 —— “Unfair” —— 中，只在 Live Archives 中看得到 category 。

我先開始寫的是 Habari 版本的 “Unfair” ， Habari 版本的 “Unfair” 已經寫得接近完成，但是畢竟 Habari 是一個開發中的系統，模板相關 function 尚未完整，在我硬幹出判斷首頁、內頁、彙整頁的方法後， Habari 才又加上這項功能，因此我想雖然 Habari 這麼好玩，還是得等完整一點時才轉移比較好，於是才把 “Unfair” 改成 WordPress 版本。

現在 WordPress 內建了 tagging 功能… 我想轉移 Habari 的誘因又少一件了… XD

Update: 我發現這跟 UTW 的 Tag Archive 有衝突，所以先 downgrade 回 revision 5109。（我猜應該只是變數名稱相同，不過反正不急，我想等作者自己來修 :p）

Update 2: WordPress 官方出了 UTW Importer ，有點驚訝 XD

2006 • 08 • 26

Our family album


1 Comment , , , and

以下是敝站改版歷史，這篇將隨著改版而偷偷更新 :p

V9: Feb 2008–

代號：De Morgan。

V8: Sep 2007–Feb 2008

代號：Selenium。

V7: Feb 2007–Sep 2007

代號：Unfair。

V6: Aug 2006–Feb 2007

代號：K2rESCENT negative 。除了改黑之外，字也改小了，這是因為黑底白字的對比夠大，如果字還是很大，反而會顯得刺眼，我也是很怕深色背景刺眼的人，這個顏色搭配起來我覺得閱讀滿舒適的。另外之前設計的 Logo 也在此初次使用。

V5.6: May 2006–Aug 2006

代號：K2rESCENT serif ，突然覺得易讀跟精緻比較起來易讀更加重要，於是把字體放大、改用 Liquid Layout （為了加寬可用區域）、改用 Serif 字體，其實不算大改，所以不放縮圖。也因為沒改多少，這個版本我幾乎忘記要拍照…（下面幾張是因為平常就有習慣蒐集 Safari 拍下的樣子，從其中翻出來的）

其他照片：Safari、Archives in Safari、Content in Safari、Wide in Safari

V5.5: Nov 2005–May 2006

代號：K2rESCENT，其實不算什麼設計，只是套用 K2 ，改個背景而已 XD 代號差了一個 2 就是因為 K2 。附帶一提， KrESCENT 是基於 Kubrick 改的，剛才也提到它大量參考了 Eureka seveN ， KrESCENT 這名字應該不難看出是取自 Crescent ，而首字改成 K 是為了呼應 Kubrick ， Eureka seveN 的主角群是 Gekko State ，跟「月」有關係，至於 r 小寫就純粹只是覺得這樣比較好看而已。 K2rESCENT 和 KrESCENT 看起來雖然完全不同，不過還是有延續的概念在… 就是這張桌布。接下來還有 V5.5.1 ，那個就是為了配合 K2 更新而做的小改變罷了。

註：這裡的版號 5.5 並不是因為中間有 4 個放棄的設計，純粹是因為兩者看起來實在差很多。

其他照片：5.5 in Safari、5.5 Archives in Safari、5.5.1 in Firefox、5.5.1 in Safari

V5: Jul 2005–Nov 2005

V5.0-firefox

代號：KrESCENT。這個設計大量參考了 Eureka seveN ，是為了轉移到 WordPress 而製作的 Redesign ，意外的這也是一個短命的設計，我很喜歡這個說… 設計、實作都花了很久的時間調整，最後還是丟棄的原因好像是因為 bug 太多、主要內容區塊寬度太窄但又難以加長。值得一提的特點是它是 Zoom Layout ，也因為這個特點讓它很難作，後來我就只用基本的 Fixed Layout 和 Liquid Layout 了 XD

其他照片：Archives、Safari 1、Safari 2

V4.3: （未使用）

V4.3

代號：諦徽．華。這是一個胎死腹中的設計，當時明明沒靈感卻想做 Redesign ，還撐到設計階段完畢，開始寫 CSS，結果終究沒使用。版號 4.3 是因為中間還有兩個 4.1 、 4.2 也都不採用 XD

V4: Jul 2004–Jul 2005

V4 (20040721)

代號：Destiffany ，這個版本我非常喜歡，我甚至是從這時開始喜歡藍綠色 XD 明明用的是 pLog ，卻是基於 WordPress 的 Rubric 改寫而成。當時為了 pLog 寫了一個 Template: WordpLog ，一開始只是用來模仿 WordPress ，讓 pLog 也能使用 WordPress 的那一大堆 Style 。之後愈寫愈複雜，首度用到 Smarty 的 Config File 、為了符合 XHTML 1.1 Strict 而被 JavaScript DOM 所煎熬、不斷的檢驗 Accessibility ，這些瑣事實在是很麻煩，但當時做得很開心。一直到了 pLog 1.0 ，那是一次大轉變，因為有了可判斷 Plug-in 是否已經安裝的新功能，導致 Config File 架構必須揚棄（但也不是說因為有了新功能， Config File 就不能用了，就算是現在也還有人為了達到某些目的而繼續使用 Config File ），要用新方法重新改寫這些實在是很麻煩（因為 pLog 主導人 Oscar 對於這很堅持…），於是 WordpLog 就在這裡死了。我沒有改寫 WordpLog ，繼續用了一段時間，好像也沒有升級成 pLog 1.0 ，之後便改用真正的 WordPress。

V3: Mar 2004–Jul 2004

V3 (20040507)

V2 結束後是一大斷層，過了很久以後，我無意間得知了 Blog 這種方便的東西（很適合我這種懶人），於是開始研究。最早試用的是 pLog/LifeType ，然後 MovableType, WordPress, Nucleus 等也都逐一試過，我記得當時明明是覺得 WordPress 最好用，但不知為了什麼原因，最後我用的是 pLog 。這段期間外觀一直在改，但都不是我自己設計的，上圖是其中一個算用比較久的吧… 那個是抄別人的設計。

V2: ?? 2003–?? 2003

V2-asis

這是壽命最短暫的一個版本，也是第一次使用 XHTML + CSS 排版，實際的頁面已經不見了，完全沒有留下痕跡，而這張則是當時修 Linux 課程時的作業，我直接拿 V2 的版面來用，所以還是可以用來參考 XD 這時主要注重的是 XHTML 的 Validation ， CSS 方面還是各家瀏覽器的特殊屬性盡量用。因為太懶了，這版剛作完我就完全不再動它，幾乎是一完成就死亡。

V1: Sep 2003–Nov 2003

V1-inside

這個時候我對於 WebStandards 一點概念都沒有，跟大多數剛入門的新手一樣喜歡 IE 絢麗的獨有特效，在這個設計中用到最先進的技術是 Microsoft WEFT ， DirectX Transform Filters 也用了一堆（現在為了要讓 IE6 顯示出 Alpha channel PNG ，也會用到其中一個 Filter ）。排版當然是使用過時的表格排版，不過剛才用 Firefox 打開來看，發現版面幾乎完全沒有跑掉（我製作時完全沒考慮過 Firefox ），從這點而言我還真是羨慕這種過時的排版方式 XD

當時的版本還有一頁現在已經退流行的「進入畫面」，後面的雪山風景是假裝的 360° 環繞場景，會緩慢的移動，之所以說是假裝的是因為那張圖本來還滿小的，也不是 360° 環繞場景，我是拉寬後再做一些無接縫處理來騙人的。

2006 • 08 • 23

K2rESCENT negative


3 Comments and

因為我想要它是深色的，所以改一下。沒想到要修改的地方還真多，花了半天才改完整。

Lvx ex Caelis V6 - K2rESCENT negative

← Previous  1 2 3 4 5 Next →