chibc


About chibc

chibc《暗月之鏡》 從高中網路開始普及就開始成為重度網路使用者,早期主要活動集中於巴哈姆特。
G+ CHIBC


[新手前端]網站案例觀察- swarovski

寫了這麼多天的技術還有概念,今天就來看看案例分享吧,我選了一個國際知名的水晶玻璃品牌- 施洛華士奇 http://www.swarovski.com/ 就來分析看看這個站在設計上做了什麼考量吧~ http://www.swarovski.com/ 點進去就會發現,網站判斷你的IP,提供不同語系的選項,可能只有中文有特別做吧 主要的考量是線上購物的平台不同。 進入英文網站後,可以發現網站有做RWD,Responsive web design 視窗回饋式的設計,除了底圖的大小會隨著視窗變動之外,底下banner的數量也會隨著改變。至於台灣版的…是flash,而且在Firefox裡悲劇的整塊flash不會出現,而且在IE裡大陸版的首頁字型大小也出現錯誤(不過我不懂flash不知道怎麼修 =..=+),可見得他們沒測firefox而且台灣會做RWD的人可能還不多吧… 一個網站三樣情 =..=+


[新手前端]拿到視覺出的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圖層特效裡的陰影,而且是內陰影和外陰影都有,更誇張的是可以同時設定好幾個陰影只要加上 , 分隔就行了。


[新手前端]選單共用背景圖片

現在的網頁設計比較重視語義化的結構,也就是在設計時會考慮該元素是不是真的「是內容」或者僅是裝飾品,如果是「是內容」就使用 html的元素來表示,如果單純只是造型,就使用CSS 的元素背景來呈現。 所以目前比較流行的選單做法之就是將文字隱藏後用背景圖取代,雖然有一派是主張連字都不要藏,使用所謂的icon-font或是載入字型來美化,不過在英語系國家這麼做問題不太,一個字型檔不會有多大,中文就… 常用字至少要3000個,所以,實用性不高,我們中文使用者還是乖乖的用文字取代吧…淚目。 使用的方法很簡單,一般都是用無順序列表 ul 及例表項目 li 裡面放 錨點 a的方式來做選單 li 浮動後就能做出水平選單 a 設定 block就能採用寬度,設定背景,最後用 text-indent:-9999px 將文字推出可視區域


普悠瑪卡卡號- 超扯的列車採購案

太扯了,特此一婊 真的沒看過這麼白痴的事,採購之前不知道尺寸嗎? =..=+ 還是只有基隆站太窄進不去 =..=+ 但是進不去,應該早就知道才對啊 =..=++ 基隆火車站站務都在睡喔? 這種事到底誰要負責啊? 台鐵? 人民真的很有感,每天都有很幹的爆點…………


告訴任何人該相信什麼,都是一種缺乏公平的說教

告訴任何人該相信什麼,都是一種缺乏公平的說教 不用說出答案。 只有提醒,你應該要思考這個問題 14歲的巴基斯坦女孩瑪拉拉,因為爭取女性受教權,就學途中被槍擊,但她仍然沒有放棄掙取。 年輕的,坐在教室裡的你。 正為了不懂自己為而被關在這無聊的教室裡而憤憤不平。 究竟是你不懂得愛惜前人掙取來的受教權益? 還是教育的內容出了問題? 你有想過嗎? 思考吧


[新手前端]前端工程師和「切版的」有什麼不同? 13

前端工程師和「切版的」有什麼不同? 以網頁而言所謂的前端設計指得就是相對於「程式」、「資料庫」這些所謂的後端其他的都叫前端。 也就包括視覺的呈現、流程、HTML、CSS、JS等的運用以及所謂的使用者體驗(UE)、、使用者介面(UI)、可使性(UX-usability)等等,其實包山包海,範圍可大可小。 其中的 使用者體驗(UE),更是一個舉世知名的大坑,所謂的使用者體驗,user 使用這個產品的所有體驗、感覺,當然不會只停留在你的UI設計的好不好,網站速度、效能、程式有沒有出錯、企劃本身有沒有符合需求、如何去評測UX、如何設計反饋…,UE確實負責了產品的成敗,但是UE絕對不是單一個人的責任,UE是整個團隊的共同問題,所以不管是視覺、企劃、UI、前端、後端,其實只要有把UE放在心裡就好。