Yearly Archives: 2012


2012 部落格行動日 – 我們的力量 The Power of We

部落格行動日從2007年開始到現在,每年部落客們都選出一個主題在同一天發表文章來關注這個主題,藉由全球所有部落客在同一天做出這個行動,讓世界更關心一些公共議題,經過環境、貧窮、氣候變遷、水資源、糧食危機到2012,這次要關注的主題是:我們的力量。 過去,在君權時代、民主初期,個人的力量是相對微小的,當大環境及政策改變時個人往往只能隨波逐流,在資訊不夠流通的時代,言論及思想的散布都會被當權者所掌握,不對稱的資訊造成一般人的無知及無力。 但是在網路逐漸普及,世界越來越像地球村的現在,個人的行動及發言可以凝聚成廣大的群眾意識,原本在社會群體中微不足道的聲音可以引發火種及力量,我們不再讓掌握資訊的權力者操控,而擁有發聲和聚集的力量足以由自身開始改變世界。


[鐵人賽06]從平面設計前進 CSS-4 權重及覆蓋 1

承上篇,繼續針對選擇器說明,我們已經知道在CSS指定樣式的型式: E {color:red;} 選擇器 {類型:參數}; 同時知道選擇器可以串連,程式碼都是由上往下讀取並解析 另外之前的文章裡也提到,想要使用CSS的樣式可以用三種不同的方法來讓瀏覽器讀取CSS,分別是 行內、頁面、鍊入(載入式)。 現在知道有這麼多的方法可以指定樣式給在HTML裡的元素,那麼如果出現下面這種情況,瀏覽器要怎麼知道該呈現什麼結果,就要靠權重來區分,就像在軍隊裡要以官階大的長官下的指令算數,在家裡媽媽說了算一樣,CSS也有一套計算選擇器權重的方式。 不然如果像下例,有很多選擇器都選到同一個元素 <p> 最後字會變成什麼顏色呢? <style> p{color:red;} p{color:blue;} </style>


[鐵人賽05] 從平面設計前進 CSS-3 選擇器詳解

上一篇提到要套用樣式,就需要指定某一個特定的元素E 告訴瀏覽器,我就是要把樣式套在這個 E 上面,就像我們作圖時先找出要做特效的圖層然後套用特效一樣。 這個指定元素的部分我們叫做 “選擇器”,也就是利用這個地方來指定特定的元素,其實就是不同的選出元素的方法。 (有點像在教室裡叫第一排站起來,或全部的女生站起來,也許更像在:玩大風吹、吹什麼~ 吹我叫到的元素 E ) 選擇器可分成下表裡的類別,看得懂英文的可以直接參考 w3c的 selector說明頁(註1): 除了”全域”、”型態”及最常見的.class, #ID之外,有幾個是類似的選擇法 繼承 偽類 參數


[鐵人賽04] 從平面設計前進 CSS-2 選擇器之.class #ID

[新手前端]從平面設計前進 CSS-2 選擇器之.class #ID 上一篇簡介了如何在HTML內使用CSS,簡單來說有3種引入CSS的方法: 一是行內,如: <img src=”” style=”border:1px soild red”> 二是頁面插入式: <sytle> E{font-size:14px; color:red;} </style> 三是鍊入式: <link href=”../css.css” rel=”stylesheet” type=”text/css” /> 然後在css.css的檔案裡寫 E{樣式類別:參數;} E2{border: 1px soild red ; color: red;} 可以很簡單的知道在HTML裡因為 style是直接寫在 HTML的tag裡,所以不需要特別去指定想要套用的樣式該放在哪個元素上。不過頁面式、鍊入式的CSS就會需要特別指定好你想在哪一個元素E 上套用樣式,表示法就變成 E{類別:參數;} 在{}前方的是元素,{}中間是想要指定的樣式,對不同的元素可以分別指定不同的樣式。


[鐵人賽03]從平面設計前進 CSS-1

[新手前端]從平面設計前進 CSS-1 上一篇簡介了HTML,版面來比喻,HTML就是不同的元素,而CSS就是這些元素的造型。 如果說HTML是一篇有標題、大綱的文章,那麼CSS就是用來指定字型、大小、顏色、排版的樣式,所謂的CSS就是樣式表的意思。 同HTML一樣,CSS也是一種網頁設計師用來和瀏覽器溝通用的語言,瀏覽器永遠都會照你給的指示做出呈現,唯一的問題是設計師必需學會怎麼和他們溝通,所以在前端網頁設計時常會碰到跨瀏覽器問題就是因為主流的 IE, Firefox, chrome 對指令解讀有一些差異,其中尤以 IE的解讀方式和其他瀏覽器相差最多,所以在做樣式設計時,一般是以firefox 或 chrome的呈現結果為主,其次再修改指定讓IE也能做出類似的呈現。 <!–more–> 既然CSS也是一種和瀏覽器溝通用的語言,首先就來介紹CSS的基本語法。 首先,你必需告訴瀏覽器你想要改變樣式的是HTML裡的哪一個元素 E (element),這個E 可以是任何一個HTML裡的 tag (標籤),再來就用CSS的語法把想要改變的樣式及其參數寫入文件中。 例如針對一個HTML裡的 <a> 指定字型、顏色: <a style=” font-family:Aral; font-size:14px”> <tag a 錨點的 樣式=” 字型: Aral ; 字級: 14像素”> 其中的 style=”” 部分是HTML裡的參數指定方式,像 <a href=”” alt=””> </a> 裡面的一樣,只是這個參數是針對HTML的造型(style)來指定。而在CSS樣式裡面的指定方式也很簡單,造型類別:參數; 結尾用分號分隔。 如上述的標示方法,就叫做行內 CSS, 顧名思義就是把 style 造型寫在 […]


[鐵人賽02]從平面設計前進 HTML

[新手前端]從平面設計前進 HTML 我最早開始做網頁是高中時期,當初還在播接,各校的BBS都還興盛,入口網站是奇摩、蕃薯藤,最大的網路社團是cityfamily。 巴哈姆特還只是個學生做的BBS站。 當年我學會了用右鍵”檢視原始碼” 開始抄寫我分享插畫創作時需要的 <img src=””> 這是我最早接觸到的HTML。 現在回頭看,HTML其實是一種網頁作者用來和瀏覽器溝通的語言。作者用不同的標籤來告訴瀏覽器這些被輸入的內容應該做什麼樣的呈現。 <!–more–> 比如 <a href=””>連結文字來表示鍊出網址 </a> <img src=”表示圖片”> 也就是網頁上面所有構成的元素都是用不同的 tag (標籤)來標示作用讓瀏覽器知道要怎麼呈現。 換句話說,我們人眼看的網頁是瀏覽器看完HTML之後展示出來的結果。 所以常聽到的 IE、firfox、chrome 呈現不一制的問題就是來自於不同瀏覽器對於HTML的解讀有所不同。 在程式底的學習者來說,HTML的理解是以DOM(文件模型)為概念被理解, DOM 樹其實在網頁設計來說可以簡單的理解為… 就是HTML,因為HTML裡面充滿我們標示過的內容,告訴瀏覽器現在應該有什麼行為,網頁在被讀取時會由最上方第一行開始被讀取、解析,就像一根樹由根往上長開枝散葉一樣。 所謂的 DOM 也就是指網頁由 HTML 組成時整個文件本身元素的分佈及組合,而網頁設計的基本就是在一個文件裡不停的增加內容,然後用hTML及其他方式標示用途後交給瀏覽器解析,最後變成我們看到的網頁。 所以在接觸HTML時不用太擔心,就像學語言一樣,只是要知道用什麼詞來表示可以讓瀏覽器知道你現在希望這個內容被怎麼呈現,如此而已。 在實作上,會用到的HTML也沒有想像中多,一開始需要掌握的只有幾個像 <a> 表示錨點 <img> 表示圖片 <div> 表示群組的容器 <table> 表示表格 除了用 tag 能表示該內容的用途之外,每個tag 裡都還可以增加一些參數式的說明來讓瀏覽器理解並做出更多我們需要的行為,比如: <a href=”” title=”” […]


[翻譯] 無字的情書 – [ wordless love letter ] lyrics translation

我很喜歡一些台語歌,很多歌語和語法只有台語唱起來才會很有味道 這首《無字的情書》算是台語歌裡我很喜歡的一首,所以把他翻譯成英文 雖然我是破英文,但是如果能有更多人聽得懂台語歌就更好啦~~ grandma is non-literacy but she understand a lot of things. she said the lightning is the key of sky. once it open the rain will falling.


[新手前端日記] 我還是討厭IE, 9-不太支援opacity 透明度參數 以及 和視覺設計溝通的要點

IE 7 8 對opacity的支援度不佳,所以用jQ做 fedein out 的效果時要注意,這次這個案子最後的解法是捨png24 改用png8,一但用了png8就很悲情的要對位置對到快死。 另外因為這次的美術設計版面時,採用了大量的濾色、覆蓋、色彩增殖之類的圖層特效,造成每個元件在psd裡都無法獨立,圖層互相影响,我以前自己在做圖時也會有這種情形,因為拿張素材濾色或增殖下去效果就很華麗,叫人不愛用也難。 但是考慮到要做成元件各自分開的網頁時,大量的使用濾色或是色彩增殖這種會往下影响到背景的特效,就要小心,不然就會設計出,你在PSD裡看到是分圖層包好都獨立的元素,但其實圖層一合併就會因為背景消失而產生破圖慘況,不是元件上的特效跑出來,就是背景沒吃到特效,最好只好變成一大張動不得尺寸的固定圖… 所以這裡幾個技巧可以分享給設計者,重點就是多利用遮色片讓元件的特效可以獨立,而不是所有元素的特效都一路往下堆疊到背景色上。


媒體,少呼攏我了!!

主流媒體沒播的重要新聞越來越多,重大民生法案不聲不响的通過 電視新聞只追著八卦、無聊的小事跑,更多是業配、轉貼熱門話題、翻拍CNN、NHK畫面。 雖然網路普及但電視依然是社會多數人的訊息來源,我們真的愛看那些小事、八卦,但並不該是由電視新聞台來播放,熱門話題能討論的地方太多了,請重視自己的專業,回想起媒體第四權、人民知的權益真正的價值。 並不在於我這則新聞有多少點閱數,而在於民眾有沒有獲得他們真正需要知道的訊息。拜託我真的不想再看到翻播 youtube 熱門影片放了5分鐘或是某個大陸大媽做了什麼怪事,那都不重要好嗎? 好嗎?