[翻譯] 007主題曲-大雨傾盆 ADELE – Skyfall 2
這首大概是這次007 致敬版裡面最精華的一部分了 可惜暫時找不到電影裡的那一段，配上那個視覺效果真的覺得超棒的 不過有點可惜? 007電影這次後半段有點拉太長了，如果沒辦法覺得那些小細節或是人物對話好笑的話，真的會很悶…
Yearly Archives: 2012
[新手前端]float與clearfix -白話就是，為什麼背景底圖不見了?! 3
之前有在這篇介紹過 float的特性，簡單說就是會往上浮起來，會脫離原有的DOM順序。 子元素浮動到上層之後，在某些情況下會造成所謂 “父元素的高度塌陷”，也就是原本包住子元素的容器會因為子元素全部都浮動脫離原有的DOM序，造成高度預設為auto的父元素”沒有內容”而失去高度，見下圖：
[新手前端]網站案例觀察- swarovski2-taiwan
今天還是網站範例解說，還是同一個站…的中文版。 http://asia.swarovski.com/taiwan 昨天就提到該站的中文版是獨立製作的，所以和原站在設計風格、技術上都不同，馬上就來比較一下兩者的差異。 首先是landing page，英文國際站採用了 RWD 做了滿版的設計，配上jQuery的silder控制，讓不同的event都能用海報式的全版模式做露出及切換，中文版是採用flash，包括LOGO都用flash制作，Flash不是不好，不過在這裡的使用因為設計不再是滿版，氣勢上就弱了，拉動視窗可以看到flash被擠壓時人臉的變化及色差，色差這種事很憑感覺啊… 圖片的DEMO方式會讓人心理上的感覺差很多。 另外就是底下雖然一樣有類似的 fixed footer的設計，但是因為上方是flash的關係，所以當高度小於上方元素時，當做導航功能的footer就不見啦!
phoneflower, 手機葵, 不是向日葵
雖然20年前剛開始有網路我就有資訊沈迷的現象 現在有手機這種界面，這種現像越來明顯了 不單純只是手機，各種螢幕包括PC及電視，人們仰望、觀看，似乎逐漸喪失思考的能力 像一朵朵望著螢幕的太陽花，只是目光追隨的不是太陽罷了
[新手前端]網站案例觀察- swarovski
寫了這麼多天的技術還有概念，今天就來看看案例分享吧，我選了一個國際知名的水晶玻璃品牌- 施洛華士奇 http://www.swarovski.com/ 就來分析看看這個站在設計上做了什麼考量吧~ http://www.swarovski.com/ 點進去就會發現，網站判斷你的IP，提供不同語系的選項，可能只有中文有特別做吧 主要的考量是線上購物的平台不同。 進入英文網站後，可以發現網站有做RWD，Responsive web design 視窗回饋式的設計，除了底圖的大小會隨著視窗變動之外，底下banner的數量也會隨著改變。至於台灣版的…是flash，而且在Firefox裡悲劇的整塊flash不會出現，而且在IE裡大陸版的首頁字型大小也出現錯誤(不過我不懂flash不知道怎麼修 =..=+)，可見得他們沒測firefox而且台灣會做RWD的人可能還不多吧… 一個網站三樣情 =..=+
超不上相的自畫像
暗月本人超不上像的… 每次在聚會裡被拍到看起來都像歐巴桑… Orz 所以有點討厭被 tag… 沒有一張好看的 =..=+
[新手前端]拿到視覺出的mockup，開始要切版了
前幾天的分享裡有聊到，前端的工作並不僅僅是切版而已，整個web的呈現部分都可以廣意的算在前端頭上，今天就來縮小範圍拉深主題，聊聊切版需要注意些什麼地方，不過因為我是新手嘛，有可能是錯的，如果發現我觀念有錯什麼的，要早點和我說啊!! 首先，拿到版面後第一個要確認的就是各個區塊的功能，一般拿到的版都是PSD的附上簡報或文件說明內容，開始動工之前有可能可以開個會，在拿到版開始做以前，務必要先把整個版的UI及功能從頭到尾模擬一次，對怎麼做大概有個底，不確定的地方一定要詢問，免得江水一去不復返，時程用光還是要重來的慘劇。
[新手前端] HTML5的新tag 語意化標籤
HTML5 其實還是HTML，只是像軟體有更新一樣，HTML也更新到HTML5而且有更多的功能，具體的呈現就是出現許多新的 tag標籤。 HTML5裡主要的更新之一就是用語義化的tag取代不具意義的<div>，另一部分是針對新的裝置，像手機觸控、螢幕滑動控制等tag、增進客戶端及驗證表單、影音、多媒體還有最炫的Canvas繪圖區功能等等。 又因為HTML是一種讓瀏覧器看的語言，在舊版瀏覽器裡HTML5有可能沒有被支援，而有些新的HTML5功能又還在討論中，所以本篇就先來談談HTML5裡面已經可以使用而且好處多多的 語意化標籤。
[新手前端]視覺及企劃也該知道的網頁設計概念- 網頁設計 ≠ 平面設計，有些”眉角”還是要了解一下 1
網頁設計 ≠ 平面設計，有些”眉角”還是要了解一下 前端網頁設計的技巧很雜，不過有很多問題其實在企劃或視覺設計版面的階段就要先溝通好，否則等到定稿了再來調整就肯定「痛苦太多收獲太少」不然就是牽一髮動全身叫人不想死也難…. 癈話不多說，直接寫心得： 1. HTML元素都是矩型： 首先建立一個我之前也提過的概念，HTML裡的元素其實不管造型如何，都是「正矩形」，先有盒模型的概念，在設計時就比較不會出現天馬行空的「視覺饗宴」了。 2.網頁是活的： 網頁設計和平面設計最大的差異是「網頁是活的」，和平面不同，平面設計時你的元素是固定的，字型設什麼樣子就是那樣，不會隨著印刷品放置的時間和看的人不同字型忽大忽小，或是圖片有時大有時小。 但是很不幸的，網頁會。
純CSS喬巴又來了，css3- boxshadow
基本上是個有病的人才會去做的東西，我有病 點連結後可以看到，有個喬巴的圖示出現在畫面上，看原始碼，會發現只有套一個樣式而且不是背景圖。 這個，就是CSS3 裡的box-boxshadow 新功能，其實就是盒模型的陰影，也就是幫元素加上陰影，有了這個樣式之後，就不需要每次要調一點小東西就要開 photoshop了。 除了陰影的方向、內外、距離、顏色、大小之外還可以設定透明度，幾乎就等於 photoshop圖層特效裡的陰影，而且是內陰影和外陰影都有，更誇張的是可以同時設定好幾個陰影只要加上 , 分隔就行了。