[CSS] 一次設定三個值給 margin?

我想大部分學過 CSS 的人都知道, 當你設定一個值給 margin 時, 例如: #wrap{margin:10px;}, 這個值是設定給上下左右四個 margin. 然而你知道當你設定二個,三個, 或甚至是四個值給 margin 時, 他們是如何被處理的嗎? 請看以下:

• 兩個值: 若 margin:5px 10px 時, 則 5px 是設定給 top 和 bottom; 而 10px 則是設定給 left 和 right
• 三個值: 若 margin:5px 10px 15px 時, 則 5px 是設定給 top; 而 10px 則是設定給 left 和 right; 接著 15px 則是設定給 bottom (這裡的指派順序要特別注意)
• 四個值: 若 margin:5px 10px 15px 20px 時, 則 5px 是設定給 top; 而 10px 則是設定給 right; 而 15px 則是設定給 bottom; 最後 20px 則是設定給 left (這裡的指派順序也要特別注意, 它是依據順時針的方向進行)

Apple iPhone and HTC Touch – (Un)official Comparision!!

[Apple] Apple iPhone 暴力測試影片

[Apple] 賈柏斯將要給予 Apple 的每一位員工一台 8GB iPhone

根據 vnunet.com 的以下這篇報導, 賈柏斯 (Steve Jobs) 將要送給 Apple 的 20,000 位員工, 每人一部 8GB 的 iPhone.

[News] Jobs hints at 3G iPhone
>>>
… “In the run up to today’s launch Jobs has stated publicly that Apple will give every one of its 20,000 employees an 8GB iPhone” …
<<<

[XHTML] Favicons (Favorites Icon的簡稱)

最近在一本原文書”HTML, XHTML, & CSS, Sixth Edition: Visual QuickStart Guide“上看到一個很有趣的單字”Favicons“, 它是 Favorites Icon 的簡稱, 指的是大家所熟知的網頁小圖示, 也就是顯示在大部分瀏覽器 Address Bar 或 Bookmark Menu 的小圖示.

文中提及了幾個重點, 筆者在此跟大家分享一下, 如果你本身對此已經非常熟悉, 那麼就當成是溫故知新吧!

• Favicons 必須是 16 x 16 pixels 的 .ico 檔
• 以下是 (X)HTML 的語法, 第二行的語法是為了支援 Internet Explorer
  <link rel=”shortcut icon” href=”favicon.ico” mce_href=”favicon.ico” type=”image/x-icon” />
  <link rel=”icon” href=”favicon.ico” mce_href=”favicon.ico” type=”image/x-icon” />
• 部分瀏覽器會限制 Favicons 必須位於根目錄, 所以建議大家就遵循唄!
• 由於 Favicons 必須是 .ico 檔案格式, 因此你必須使用圖示編輯軟體來製作, 另一個比較簡單的方法是, 使用你我所熟悉的 Photoshop 軟體, 加上 Telegraphics 的免費 plug-in
• 建議將 Favicons 的背景設計為透明的, 這樣在視覺上會比較好看

[IE] 設定 IE 檢視原始檔功能的關聯程式

最近, 因為研究 Ruby 的關係, 安裝了支援 Ruby 的 IDE 工具”Aptana“, 但是卻發現,  IE “檢視原始檔”功能所預設啟動的應用程式被 Aptana 霸占了, 並不是說 Aptana 不好, 只是習慣隨時觀摩其它網頁原始程式碼的我, 受不了每次啟動 Aptana 時都需要等待數秒鐘的時間, 因此, 就產生了必須將 IE “檢視原始檔”功能所啟動的應用程式改變的需求. 方法如下:

1. 執行 regedit, 啟動”登錄編輯程式” (執行”開始 > 執行”命令, 於”開啟”一欄輸入”regedit”, 按下”確定”鈕)
2. 尋找 “HKEY_LOCAL_MACHINE > SOFTWARE > Microsoft > Internet Explorer > View Source EditorEditor > Editor Name” 目錄
3. 開啟唯一的參數”(預設值)”設定畫面
4. 將”數值資料”一欄的值改成你想要啟動的應用程式, 譬如: UltraEdit-32 Text Editor 是 “C:\Program Files\IDM Computer Solutions\UltraEdit-32\uedit32.exe”

[Ajax] “Ajax 設計模式” 書摘

書名: Ajax 設計模式 (原文書名 “Ajax Design Patterns“)

序

• Ajax 的核心技術, 包括 XMLHttpRequest, DOM, JASON, …
• Ajax 所牽涉的技術領域, 包括 HTML, XHTML, CSS, XML, JavScript, …
• Ajax 本身是一種設計模式
• 由於 Ajax 的普遍與廣受歡迎, 網際網路上正興起一股視覺 (visual effects) 效果的熱潮

第一章 Ajax 簡介

這一章介紹基本的 Ajax 技術, 提供概觀性的例子, 並對 Ajax 的未來提出一些描述

• 日益受重視的 Web Usability (詳見 Thomas Baekdal 的 The Usability Revolution is over – We Won!)
• 如果處於飽和市場裡的 Internet 公司無法在根本的功能性上來做競爭, 他們還能競爭些什麼? 答案就是 — 對使用者要緊的事
• 提倡簡單介面 (But, 簡單可不是笨喔!!)
• 終於, Ajax 為 Web 應用程式扳回一成 (Jack: I like this words)
• 2005 年 2 月 18 日, Jesse-James Garrett 發表了一篇文章 “Ajax: A New Approach to Web Applications“, 引進了 “Ajax” 這個名詞. 而在 Garrett 的這篇文章為 Ajax 貼上標籤之前, 其實 Ajax 的技術已經存在, 但這篇文章是一個轉淚點
• Ajax, 代表 Asynchronous JavaScript and XML
• 在過去, Web 應用程式最大的問題是”介面”
• Ajax 應用程式能監控使用者動作, 例如: 表單可以根據使用者的輸入而改變, 或者錯誤的值一被輸入, 錯誤訊息就馬上出現
• WHATWG (Web Hypertext Application Technology Working Group) 組織正在推動將網際網路作為真實的應用程式 
• 某些人已經預言文字處理器和個人資訊管理員 (PIM) 這類傳統桌面應用程式的死亡
• Flash 能做到許多 Ajax 所不能做的事, 例如硬體存取, 豐富的圖形, 和本地端文件的儲存. 針對本地端文件的儲存, Ajax 程式庫 Dojo 結合了 Flash 的本地端儲存能力, 另外, Firefox 有計畫要支援, 而 Microsoft 的 Atlas 框架也已經表明將要如此做
• 人們一直在試驗他們能想到的每個妙招, 讓所謂的 Server Push, Streaming, Two-way Web, 或 Comet 成為可能
• XForms 是 W3C 正在定義的新標準, 是標準網頁表單的重大升級
• 目前已經有很多 Ajax 相關程式庫 (Library) 和框架 (Framework) 存在了, 而 IDE (ex, MORFIX, JoyiStar WebShop, …, etc) 和相關工具也持續的演進中

第二章 以設計模式為主軸的教學課程

這一章介紹 Ajax 和 Ajax Patterns, 包括關鍵技術的旋風式介紹, 以及高階設計模式如何運作以強化系統 (教學課程線上版本在 http://ajaxify.com/tutorial/)

ps. 如果你對此書也有所感觸, 或某一段想要 Highlight 的內容, 希望你也能以 Comments 的方式在此分享…

[Ruby] 請使用 db:migrate 取代 migrate

今天, 依據書中所述, 輸入 rake migrate 指令執行 migration 建立資料表時, 雖然 task 仍可順利的被執行, 但是卻出現了以下的提示訊息. 意思是說, task migrate 已經被反對使用了, 請使用 db:migrate 來取代 migrate.

[Ruby] rake aborted! uninitialized constant ActiveRecord

終於搞定了錯誤訊息 ”uninitialized constant ActiveRecord”. 近日筆者研讀 “Ruby on Rails 網路應用程式開發與建置” 一書時, 發生了無法順利執行 rake db_setup 工作 (P.029) 建立資料庫, 錯誤訊息如下:

rake aborted! uninitialized constant ActiveRecord

我的解決方案是, 將 db_setup.rake (p.028) 的程式碼修改為如下:

005  task :db_connect do
005  task :db_connect => [ :environment ] do

以下是我的執行環境:

Windows XP Pro SP2 + ruby 1.8.6 (2007-03-13 patchlevel 0) [i386-mswin32] + MySQL 5.0.37

[Ruby] “Ruby on Rails網路應用程式開發與建置” 書摘

書名: Ruby on Rails網路應用程式開發與建置

書中一開始作者給予 Ruby on Rails (常簡稱為 RoR 或 Rails) ”儘管複雜卻很簡單”的描述, 個人決定抱持喜樂的心情來好好研讀. But, 時間一分一秒過去…, God…, 啊…, 這是甚麼…, 為什會有兩個::連在一起的語法呢?….翻閱了部分章節之後, 我漸漸驚覺事情不妙, 這條學習曲線似乎不若我想像的簡單, 好多奇怪的變數命名規則 (@name, :name, …) 喔! 而程式語法之精簡也令人難以置信. 我想, 要學好 Ruby on Rails, 最好是一本範例書, 加上一個 on-site manual for reference.

接下來, 我將會在此分享我的研讀筆記…