學習筆記


《應該和 IT無關的媒體與傳播》-1 起 ,從一堂傳播理論課開始

十幾年前我剛上大一,新學期一堂傳播理論課一開始,教授就和我們講了一個故事,那是同一個課目開在資訊系的通識課,那天教授講完了一整節的傳播理論課,說明及探討一些傳播現象及案例之後,來到提問時間,一陣靜默後同學舉手了「教授,請問這節課的正確答案是什麼?」


[讀書] 被新聞出賣的世界

當媒體決定訊息內容的基準,不再是重要性、精確性,而是點閱率時 我們就活在虛假及真實的夾縫中 而造假會變成真實的社會事件,會讓人一夜成名、瞬間身敗名裂 然而沒有人在乎真相 媒體養出一頭自己也無法完全掌握的巨獸,吞食整個世界 這本書算是媒體工作者的寫實告白,而且文末他沒有解決方法 XD 只是寫出了現況的混亂及無奈,由字句中的憤怒可以感受到作者的情緒,就不知道這是真心的告白亦或也是在利用情緒激起大家的關注了 XD


beyonce listen 暗月式胡亂中譯 XD

撿到歌一首,聽到有人說和現在台灣人的心聲很像 beyonce listen lyrics 暗月式胡亂中譯 XD Listen to the song here in my heart 傾聽我心中的歌 A melody I start but can’t complete 由我開始但未竟的旋律 Listen to the sound from deep within 傾聽內心深處的聲音 It’s only beginning to find release 該是時候開始釋放了 Oh, the time has come for my dreams to be heard 喔! […]


[新手前端]SEO搜尋引擎優化及 SNS社群網路服務

web網站優化 SEO 及 SNS有關的豆知識 其實SEO, SNS在技術的部分,我應該不算是善長,只是對台灣有的SNS平台都很熟悉而已。 畢竟網路上混了十多年,早期BBS, web之後的論壇到現在FB, plurk, G+ … 其實真的要專精應該要連微博、人人網都要熟悉,可惜這兩個我還沒去好好認識XD 總之,今天我們就來針對 SEO及SNS在 web界面上要注意的事。


[新手前端]CSS3動畫效果 transition, animation 2

簡介CSS3 裡的動畫效果,其實… 是W3C的文件精簡翻譯版 另附神人範例說明。 CSS3的動畫效果可以藉由CSS的 keyframe 參數來控制動畫的 期間、重覆及重覆的模式例如重覆次數、起始延遲、暫時停止。 支援度,標準化進行中。現行的瀏覽器都支援包括IE10,但還是要加上prefix。 CSS3發佈的 transitions提供了參數可以製作簡單的動畫效果。其動畫效果是由起始參數及結束時的參數所決定。transitions 只是提供設計師一個可以指定中間過度動畫的方法。 animation和transitions最大的不同在於,tansitions是當參數改變時觸發,而animation則是直接就執行,所以動畫效果需要明確的指定關鍵影格的參數。


[翻譯] 007主題曲-大雨傾盆 ADELE – Skyfall 2

這首大概是這次007 致敬版裡面最精華的一部分了 可惜暫時找不到電影裡的那一段,配上那個視覺效果真的覺得超棒的 不過有點可惜? 007電影這次後半段有點拉太長了,如果沒辦法覺得那些小細節或是人物對話好笑的話,真的會很悶…


[新手前端]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就不見啦!


[新手前端]網站案例觀察- 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及功能從頭到尾模擬一次,對怎麼做大概有個底,不確定的地方一定要詢問,免得江水一去不復返,時程用光還是要重來的慘劇。