Lindsay is observing.....: 2月 2013

幾年前，我開始積極參加各大開發者相關的研討會
主要都是好友(過去的好同事) 高見龍推薦跟介紹的
COSCUP、OSDC.TW、JSDC.TW...等，總是搶票搶得很兇

我從原本在台下傻楞楞地，什麼都聽不懂，到現在可以運用聽到新知跟技術結合在工作上，
我已經感到滿足了。

但見龍不一樣。

前年(或是大前年？)，見龍在噗浪上許了願望，想從聽眾變成講者，他成功了！
去年，我又看到了一句話：「不如自己辦一場吧！」，所以 Webconf 2013 就誕生了！

更令我佩服的是他跟朋友想 "跨界" 的野心跟企圖！

圖片出自：http://www.webconf.tw/

我本身從一開始MIS修電腦，系統、資料庫管理，網頁程式撰寫，
轉行產品研發企劃，再轉到目前的前端工程師。

Web領域，除了視覺設計之外，已經累積了不少經驗。
也因為這些經驗我參與過了 UiGathering、HPX、IxDA....等舉辦的活動。

如果你也跟我一樣同時會參與過這些盛會
你應該會發現 Developer 跟 Designer 的聚會的氛圍是大大不同的！
但兩邊分享新知的熱情是完全相同的！

Webconf 2013 做到了！橋樑搭起來了！

我在會場看到很多厲害的 Developer 在聽到講者分享到UX 相關經驗跟知識時
那種彷彿豁然開朗的眼神，就像我第一次接觸到 UX 時的驚喜感受！

如果這樣的場合，可以更多的網站企劃來聽
放下工作上對 Designer 跟 Developer 的敵對狀態
感受一下這種熱情，一定會更棒！

這次，感謝見龍的邀請，我在 twitter 跟 facebook 即時做了重點筆記跟分享
所以比較沒有完整的筆記可供分享
下面整理出我節錄跟轉推自高手的分享經典重點

報到：

大家報到了嗎？ #webconftw2013 #webconftw twitter.com/lindsayrain/st…
— lindsayrain (@lindsayrain) 2013年1月12日

開頭 Keynote - Ruddy Lee 非常的風趣，經驗豐富的他句句都是經典：

Ruddy Lee：什麼是成功？為了興趣而工作才會有所收穫！＃webconftw2013
— lindsayrain (@lindsayrain) 2013年1月12日

李智樺（Ruddy Lee）：放下手中的大象！做時間管理。發展一個持續的興趣!!!！＃webconftw #webconftw2013
— lindsayrain (@lindsayrain) 2013年1月12日

李智樺（Ruddy Lee）：寫程式，交接重不重要？交接給自己最重要！最值得留下來的是Test Case。#webconftw2013
— lindsayrain (@lindsayrain) 2013年1月12日

接著我去聽了 BBD

Joey Chen 91 三大主題：Unit Test ,TDD, Scrum＃webconf.tw
— lindsayrain (@lindsayrain) 2013年1月12日

Joey Chen 91：BBD #webconf.tw twitter.com/lindsayrain/st…
— lindsayrain (@lindsayrain) 2013年1月12日

一邊聽演講，我一邊注意其他會議廳的節錄的重點：

網站設計常犯的錯誤： 1. 透過網站告訴別人我們是多棒的公司 2. 設計用來滿足內部的需求，而不是顧客的需求 3. 讓不熟悉網站的顧客花超過四秒了解網站在做什麼 4. 不知道如何篩選不必要的設計元素（ Muki , @webconftaiwan)
— kyle lin (@kylelin_tw) 2013年1月12日

滿地都是人！#webconf.tw r2 twitter.com/lindsayrain/st…
— lindsayrain (@lindsayrain) 2013年1月12日

hlb: 只要你有CSS style guide ,總比沒有好! #webconf.tw
— lindsayrain (@lindsayrain) 2013年1月12日

Even Wu 提到的遺尿解決方案 blog.aniarc.com/post/237270051…#webconf2013 fb.me/2p8S2NXUj
— kyle lin (@kylelin_tw) 2013年1月12日

下午場，Richard 的分享獲得廣大的迴響，傳說中的irc第四會議室裡面討論更熱烈呢！

Richard：你的使用者，用的最多的是別人的網站。 #webconf.tw
— lindsayrain (@lindsayrain) 2013年1月12日

Richard ：我們是Super User，不是User #webconf.tw #webcnof2013
— lindsayrain (@lindsayrain) 2013年1月12日

Richard Tsai 提到的UCD的研究方法：A/B test , Usability test, 行為觀察 WaClick 點擊熱圖, 眼動研究,費茲定律 Fitts' Law , Card Sorting@grichard #webconftw2013
— kyle lin (@kylelin_tw) 2013年1月12日

Banner Blindness 廣告視盲（當使用者在網站上尋找特定目標時會刻意忽略那些花花綠綠的圖片～特別是廣告） @grichard #webconftw2013
— kyle lin (@kylelin_tw) 2013年1月12日

來到第二天的議程
第二天我幾乎一直在轉錄 Kyle Lin 的重點節錄
(平板電腦要打字紀錄真的太慢，我應該弄台MBA)
(Kyle 你要跟我收版稅嗎> <~ 我...我可以提供歐美影集相關經驗給你參考....)

Alvin創業談：了解你的使用者，好好照顧身邊的人，在startup裡，每個新加入的人，都是公司的一部分，發股票是一個好的方式 #webconftw2013
— kyle lin (@kylelin_tw) 2013年1月13日

Alvin創業談：不是每個人都適合當CEO，當CEO要接受採訪、被媒體追著跑，要開董事會，要每天check 銀行裡有多少錢，我不喜歡 #webconftw2013
— kyle lin (@kylelin_tw) 2013年1月13日

Hitomi Yang 話程式與設計： 1. 理解彼此實作上的限制 (不是別人做的到，我就做的到｜問題的背後是什麼 | 尊重彼此的專業) #webconf
— kyle lin (@kylelin_tw) 2013年1月13日

Clay Liao：工程師也是肉做的，也需要下班，也需要休息，也需要去看電影的！！ #webconf
— kyle lin (@kylelin_tw) 2013年1月13日

敏捷式產品設計流程 => 建立特色清單（資料收集）-> 建立各式情境（劇本）-> -> 創造角色個性(英雄) -> 決定角色風格(Styling) -> 制定Step outline 制定UI Design Pattern(Scene) -> 動畫（宣揚精神） #webconf
— kyle lin (@kylelin_tw) 2013年1月13日

David Liu 補充的 Desire Engine 例子: nirandfar.com/2012/03/how-to… fb.me/1QWcnIXKA
— kyle lin (@kylelin_tw) 2013年1月13日

Janet Huang Crowd-based Design : Crowdsourcing + Web Design => 有興趣
— kyle lin (@kylelin_tw) 2013年1月13日

Aidan Wu: 許多公司花數百億研究一顆IC 卻不願意研究一位創造百億價值的王品牛排服務員 #webconf
— kyle lin (@kylelin_tw) 2013年1月13日

最後：WebConf 2013 在龍哥 live coding 抽獎程式中結束

讓我們期待 WebConf 2014 吧！

最後，我附上這個多人共筆的
Word版：超強懶人包
Excel版：懶人包
光從這點就可以看到雲端的應用已經達到另一個境界了！

最近看到一些文章介紹 "瀑布式佈局"、"瀑布流排版"、"流瀑式佈局"
出現的其實就是長得像 Pinterest 的網站
接著就有些 blog 把這樣的網頁排版翻譯成 Waterfall Layout

Pinterest 是 Responsive Web Design 經典好作品

但，我長期看過這麼多國外文章跟網站
不禁疑惑起來，我怎麼從沒見過有人用 "Waterfall" 這個詞介紹 Pinterest ？

找了 Google、StackOverflow、Quora...等
Pinterest-like、Pinterest-style、Pinterest-kind 是最常見的形容方式。

再來就是結合CSS的一些形容方式
Pinterest Style Columns Layout、Multi-Columns Layout、...等。

再努力的翻了一個下午的文章
Masonry Layout、Dynamic Grid Layout 似乎才是更準確來形容 Pinterest 設計的英文名稱。

上面幾種都是找到 Pinterest 排版，你可用到的關鍵詞，規則也都雷同：

1. 按照瀏覽器的大小，先水平排列想要呈現區塊數量，橫向填滿頁面寬度
2. 垂直滾動頁面，新的資料區塊再從下方持續載入進來

而我想說得只是，你可以用中文敘述一種排版設計，讓人好理解

但，寫文章前請先做功課，不要自以為是的，把中文直接翻譯回去英文來解釋，ex: waterfall。

請找到正確的英文名稱，這是學習網頁設計的才應該有的態度！

Lindsay is observing.....

2013年2月26日星期二

基礎 HTML&CSS - 課程2：Elements & Sematics

2013年2月22日星期五

基礎 HTML&CSS - 課程1：Terminology, Syntax, & Introduction

2013年2月7日星期四

進階 HTML&CSS - 課程4 Responsive Web Design

2013年2月6日星期三

WebConf 2013 參加心得

2013年2月5日星期二

所謂的 Pinterest 佈局式網站

2013年2月1日星期五

進階 HTML&CSS - 課程3：Complex Selectors

2013年2月26日 星期二