圖片來源是 WebConf 的官方 flickr。這張圖代表網路上有不同的程式語言，包括 ASP.NET（微軟的蝴蝶）、Ruby（紅寶石）、Python（蛇）、PHP（大象）。（最後那隻馬我不知道是誰⋯⋯XD）
然後我要趕快把剩下的筆記用這篇整理完，不然放著放著恐怕又要放到 2015 年了⋯⋯（望向我的 PHPConf 2012 的筆記）
Muki, "Wordpress x Design thinking"
Muki 出版過 wordpress 相關書籍（《親手打造部落格的家 WordPress 架站、管理、經營》、《WordPress 部落格架站十堂課 3.0》），這場演講內容側重設計，比較不會看到太多程式碼。
她利用 wordpress 做了一些網站設計的實驗：
- 點進文章後，讓 detail page 的邊欄顯示留言內容，但後來發現除了技術文章的留言有意義，一般文章只有站長才會想知道留言。
- 把文章分類設成一個開啟與關閉的設計，預設把選單隱藏起來，但實作後發現一來開啟文章分類的連結長得不顯眼、應該設計成 button 狀，另外就是分類太雜亂了。
- 喜歡黑白灰的配色，所以做了一個很簡單清爽的版型。
- 後來使用 wordpress 的彈性，加入 flash 實作搜尋區塊。
設計時要多多整理工作模式：怎樣的模式會讓你思考更快速，怎樣的模式可以讓你工作更順暢。設計網站時，要多做 memo、要不停地把 mockup 畫下來，最好隨身攜帶紙筆。多想想使用者需要怎樣的東西，怎樣是使用者常操作的閱覽行為，品牌網站和部落格的使用方式是不相同的。
推薦網站：
「行銷和業務常會一直說『我覺得使用者』（repeat 多次），要跳脫這種想法，不是站在自己的角度（所謂的『我覺得』）去看，多去想想做這個網站要負擔的任務。」
（話說這場是我第一次看到簡報裡有人幫自己找工作 :p Muki 在某一頁 slide 上寫："Hire me, if you're interested in my work experience."）
Q:「在做版面設計時是會碰到程式碼的，不知道如何做專案分工？」
A: 「只要把變數想成一個自己看不懂的字，例如『姓名：王大明』變成『姓名 <?=$username;>』，不要去動它就好，不要看到程式就恐慌。至於設計師在與工程師合作時，留下適當的區塊，註解告知程式碼可以放在哪裡。」
Adam, 《那些 Mockup 沒告訴你的事》
Adam 目前是趨勢的前端工程師。演講的第一個問聽眾的問題是調查現場有多少個「做網站設計又要自己寫 CSS 的設計師」，問完以後發現這樣的人很多，竟然說台灣有救～XD
Adam 本身是管理科學系畢業，網頁設計是大學自學而得。進入 Yahoo 後，一邊讀 web design index 一邊學網站設計，平常用的工具是 vim + PhotoShop。
演講中提到一些過去開發過程遇到的狀況：
- 沒有思考到輸入框可能會搭配多國語系時，用了 JavaScript 去計算寬度或是用到 CSS flex-box，雖然版面不會跑掉，但是比例會很奇怪。
- 拿固定寬度的圖片當按鈕，一樣會有多國語系的問題，或是不容易再應用，或是要做 CSS Sprite 時會瘋掉。
- facebook 分享的區塊在計算高度時就沒有想到 line-height，最後一行字會被截掉，影響美觀度。
- 沒考慮到 z-index 或是 lightbox 濫用，會造成東西通通疊在一起變成大亂鬥。
- 「無名小站這一頁就很有一致性（無名變色龍），但可惜也只有這一頁有一致性。」XD
親和力不等於無障礙。做網頁要多考慮 ARIA，思考語意是否正確，對 SEO 也會有幫助。
做網站應該要漸進式改良，「電扶梯永遠不會壞。沒有電的時候，它還是一個樓梯；有電時，它可以讓你移動得更快更輕鬆。」比方說，使用 HTML5 加上 placeholder，如果是舊版的瀏覽器頂多就是沒有輔助文字、對新版使用者可以改善使用經驗，但都不影響他們操作。
推薦的網路資源：
- http://caniuse.com，可以測試瀏覽器的支援度
- http://youtu.be/hdTxer90_1E，這個影片可以幫助你擺脫 IE6/7/8
- http://www.slideshare.net/nzakas/responsive-interfaces
Parallax scrolling 很有趣，但在靜態的表達方式（例如畫 wireframe or mockup 時）不容易表現出來。
設定超連結的樣式時，因為 mobile 上沒辦法反應 :hover/mouseover，所以 CSS 要加上 :active。
Q：「在網路上資源很多，有特別推薦的網路資源嗎？」
A:「看太多東西還是會混亂，還是要多做，多看才會吸收。」
Q: 「有沒有特別想對視覺設計師說的話？」
A: 「開始寫 code 吧！學 CSS、看 HTML，這樣和別人能合作得更好。」
Q: 「front-end engineer 學設計或設計師學程式該從哪開始學？」
A: 「學海無涯唯勤是岸。F2E 要學設計要先把工具學好，試著用視覺的方式把東西做出來，設計師就開始試著用 code 把視覺表現出來。」
Q: 「想問大公司的設計流程？是單向的嗎？比方說 mockup 畫好，就是直接實作還是會回頭討論？」
A: 「如果你不是菜鳥的話，對有問題的東西是會回頭 argue 的。有時 QA 會塞一大堆字，讓頁面破版，久了你就會察覺問題，提早和設計師討論。」
Q: 「mockup 如果一直調整，會不會有很多來回確認的時間浪費？」
A: 「mockup 交到工程師手上時，應該要已經確認得差不多了，才會叫他開始寫 code，而不是一直改變設計。基本上這問題誰也無法解決，除了老闆。XD」
大澤木小鐵 (jaceju)，《磚業也要專業 - 如何成為更好的 PHPer》
大澤木小鐵目前在台灣新浪任職工程師，對台灣目前現狀的評語是，「微薪、技佳，成為台灣員工最好的寫照。」
會後他自己發了一篇長文寫他想講的演講內容，可以參考：《WebConf Taiwan 2013 心得與簡報》。
大致上升版會有問題的 PHP 版本是：
- 4.x -> 5.x
- 5.2 -> 5.3
官方手冊有升級說明。
PHPer 應該要瞭解 PHP 運行的基本環境，對找到問題來源會大有幫助：
- Error Reporting
- Session Save Path
- Web Server
- OS
新版的 PHP 有 Standard PHP Library (SPL)。
一些開發過程的小建議：
- 開發時，要有好的 IDE, e.g. Eclipse, NetBeans for PHP，搭配好的除錯工具。
- 版本控制：有很多工程師還是習慣在線上改 PHP，直接利用 FTP 備分，但是如果要做多人開發的程式碼衝突管理、或是版本還原，還是要有版本控制工具為佳。
- 參考由社群自訂的 PHP 編碼標準：https://github.com/php-fig/fig-standards，可以統一 coding style。
- 程式碼在開發階段要考慮佈署的困難度，比方說引入程式時要使用相對路徑：
include __DIR__ . '/config.php';
翁浩正 (Allen Own), 《你們都誤解了，網路是很安全的！》
因為這場的節奏很快，所以就直接條列我筆記下來的內容囉。
- Wordpress 2.0.2 有很多弱點 (exploit)，上網查一下就可以找到一些攻擊程式。
- 「不要因為不敢重開機就不更新系統！」
- 未使用的服務要記得關掉，不然就有機會成為攻擊的入口。
- development / production 一定要確實隔離，避免版本控制、備分檔案、設定檔等被接觸到，有很多人都會把檔案加上副檔名為 .bak 作為備分，直接就可以看到程式碼內容，這樣就有可能被看到程式內容、找到進入點。
- 管理者的後台最好和網站分開管理。
- 應該跟著正確的教學文件撰寫程式碼，以免從中學到錯誤的程式碼。（雖可執行，但卻充滿弱點）
- production 錯誤訊息要關掉，網路上很容易就可以找到錯誤範例。
- 台灣某位大駭客的名言：「帳號有時比密碼還難猜。」
- 管理者的無恥行為：隱匿不報、推卸責任、湮滅證據。
- 沒有入侵不了的系統，但增加入侵的時間、成本，就能防禦駭客攻擊。
- 想查被攻擊的網站和屍體可以看這邊：http://www.zone-h.org/archive
Q: 「有沒有建議的網路資源？」
A: 「推薦 security focus，或訂閱我們的 Facebook。」
Q: 「有信用卡的安全性問題嗎？」
A: 「當然有啊但是有簽 NDA 所以不能講。我個人的做法是固定用一張信用卡刷線上購物，裡面就放少少的錢。」
Q: 「個資法會不會變成合法的勒索方式？比方說故意先註冊，再 dump 網站上所有會員的個人資料出來，藉此向網站要到錢？」
A: 「這聽起來是一個滿成功的 business model⋯⋯（誤）」
Q: 「有沒有駭客專門挑詐騙集團下手的？」
A: 「前陣子 facebook 上常有詐騙要你投票騙取你手機密碼的，都陸續有駭客去打這些釣魚網站，不過沒有有組織的行動。」
蔡明哲 (Richard Tsai)，《借力使力的乾坤挪移大法：以使用者為中心的設計決策奧妙》
第一份工作是在凌群做 RD 工程師，以 C 撰寫 security 模組。因為嫌 SA 做得不好所以去做了 SA，覺得 PM 管得不好所以跑去當 PM，覺得企劃規劃得凌凌落落所以去當企劃⋯⋯
有很多公司的設計方法是以老闆為中心的設計 (Boss-Centered Design)。如果你的老闆像 Steven Jobs，那就很好，怕的是老闆今天覺得自己是賈伯斯，明天又覺得這樣不行。
另外還有一種做法是以客戶為中心的設計 (Client-Centered Design)、或是以設計師/開發者為中心的設計⋯⋯如果怎麼設計都找不出決策方式，也可以求籤擲筊找決策 (God-Centered Design)。XD
其實我們不缺點子，但是我們無法收斂需求，以至於常常做出攻能超多但價格便宜，以至於賺不到什麼錢的產品。
我們常覺得「我們也是使用者」，但是 Richrad 覺得會來參加 WebConf 的人，「我們都是 super user，不是一般 user。」像是家裡的長輩們打開 Word，打滿了一頁以後，覺得沒有空間可以再往下打，他們會把 Word 文件的整頁模式視之為一般的紙張、覺得「啊這樣就寫完了啊」，很難想像竟然可以自動擴充下一張。
Usability Test 易用性測試有點像軟體開發時的 UAT (User Acceptance Testing)，找你的終端使用者來操作網站、進行測試。設計師以自己之前操作繪圖軟體的經驗，將「更換行李箱顏色」的功能按鈕設計成繪圖軟體裡選色的滴管圖示，但一般使用者無法理解這個 meta。
現場做了一些測試，其中我滿驚訝的是一份選購住家環境報告的網站，大部分在場的設計師與工程師（目測大約九成）認為版型 C 效果較好，但實際上效果好的卻是版型 B！（驚）
實驗證明，家庭主婦超精明，最上方的 banner 廣告與本檔促銷都幾乎跳過，常點選選單，最常使用的是：搜尋框，直接找她要的產品！
經實驗記錄顯示，多數使用者完全不管廣告，Yahoo 新聞的廣告被閱讀的效果也比其他網站好。
BobChao, 《網站分析？我小的時候覺得自己會》
早期會將 Apache server log 拆解分析，統計出每個頁面有多少 request、由哪種 client 連上；現在多數的統計分析是類似 Google Analytics 這樣的 JavaScript based 的統計工具，可以計算使用者的回訪率等等資料。
網站分析：
- 先訂目標、找對 KPI
- 認清數字背後的意義，例如單單只看使用者連入某頁的 pageview 可能無具體意義，但如果鎖定「從某個活動導入的流量」，就能知道活動的成效
- 利用工具交叉分析查閱
Q: 「GA 能觀察 single user 的瀏覽行為嗎？」
A: 「依照 Google 的政策是不能這樣，變通的方法是為這樣的 user 增加一個 tag，來篩選那個使用者的瀏覽記錄。」
TonyQ, 《網站效能調整－網站系統篇》
TonyQ 說他這場想講的是平民版的 Website Performance 調校技巧。（意思應該是不用買機器來改善吧？）
在 startup 常見的 performance 問題，透過小型的調校來改善網站回應速率。
效能很難依賴外面的人來改善，通常網站的開發人員比較能掌握整體環境。
根據 TonyQ 提供的案例：某個新創網站在上了媒體後，流量爆增後，機器便無法負載，即使機器升級也沒有太多的改善，直到透過網站調校改善過效能後才改善。
網站的效能不一定因為網站承載了流量而產生，有個網站的效能是用了過多的 YouTube API，導致網站都在等待 YouTube 的回應中渡過，而讓人覺得效能不佳。
根據他的觀察，網站 70% 的時間會佔在某一個區塊，20% 的時間會在另一個問題上，10% 的時間用在剩下的內容。以開發 mamibuy 為例，他在開發時會把一樣的程式複製一份出來做成測試頁，把每一個區塊佔用的時間印出來，觀測頁面上哪些東西最花時間。
認為網站發生效能問題時不要用猜的，直接去看設定檔與統計資訊來分析，找到最佔時間的東西後再來調校，會比盲目 debug 還划算。
減少 SQL 佔用的時間的方法：
- 避免不必要的 join，減少資料複雜度
- 隨機這件事盡量不要用 order by rand()，先把 PK 拿出來 rand() 做成 temp table 再回頭 join 其他欄位，速度會快很多
總而言之：
- 不做不必要的事
- 把常要運算的東西做成快取，或是像首頁的東西大部分不需要太即時，可以做成靜態的
- 不要每個東西都做成 cache，在部分 OS 用太多會造成問題，或是 cache 和實際資料不一致時會造成使用者的混亂
- 避免用 like，全文檢索可以考慮改用 Google 的全文搜尋
- 要常觀測自己的系統
然後是第一天的微議程 (Lightning Talk)～
thegive, 《關於 Release 的二三事》
在奇摩購物中心上班。一開始的 release manager 是輪流的，後來就有專職的 release manager，現在有專門的 release team，當中大約有 100 人，Yahoo 有一個跨六國、共 32 teams 的超級大 team，共用一個 source tree & CI。
- 星期一大家都在開會或請假，不宜 release
- 星期五大家也都愛請假，也不能 release
- 尾牙、連續假期後一天不要 release
所以後來就在星期二 release。真的要 release 時還可以參考黃曆，找「破土、開光」的日子 release，不要選「諸事不宜」的日子XD
導入 scrum 後，PO 變成一個要夾在 PM & RD 之間的人，不過有了協調與 SOP 後，品質有好 40%。
buwei chiu, 《易用性研究》
- http://hax4.in
- 連結分析
- 視覺分析
- 操作分析
所開發的產品是滑鼠軌跡追蹤工具，可以記錄使用者的點擊與瀏覽軌跡。
Marty, 《回到 HTML 的本質與初衷》
HTML 是簡單的東西，不過如果真的簡單就不會有今天這個活動了。XD
寫了一個 jQuery plugin "gk"，可以透過比較能理解的、類似 HTML 的 tag 來創作裡面的內容。
許議中，《fail2ban 的使用與郵件系統防護》
在貿易公司上班的 mis，因為經常受駭客攻擊所以有一個郵件主機防護工具 Fail2Ban。
鴨七 yorkxin，《有沒有用 CSS 就可以對各別字元指定字體的八卦？》
掛一個 class 就對特定字元套不同的字型，範例裡用到 web font。
林子翔，"FrontEnd Modularity and Web Componment"
前端的模組化設計：讓元件各自獨立、模組又可具再用性 (reusable)。
廖一帆，"3D HTML5 Game"
利用 HTML5 做博奕遊戲。3D 建模的資料不多。
three.js 可以接受四種格式，建議用 JSON。
3D 建模的 exporter 可以用 Blender。（3DS MAX 過時了，建議不要用）
第二天我好像就沒什麼力氣了。Orz
只記得 ihower 說「加頻寬對於網頁的載入時間沒太大的幫助（在 3M bps 之後差異就不大了）」、c9s 說有個 formkit 專案可以用來產生表單元件，然後第一次看到 g0v，超熱血的⋯⋯
後面幾場我就沒有做筆記了，不過我還滿喜歡愛料理的分享。
可以搭配參考這篇 womany 的專案管理工具分享：http://womany.net/read/article/2229
（下一次參加研討會不知道會是什麼時候啊⋯⋯）
相關連結
- 閃光洽的 WebConf 2013 會後記錄（有收集大量的心得連結）
- 日落的參加心得噗，因為我當日沒有把贈品逐一拍照記錄，但我很想說⋯⋯這一場的主辦根本是文具控！除了質感非常好的 WebConf 2013 紀念鉛筆（黑色和原木色各一枝），還有一本空白筆記本，筆記本裡頭每一頁都有切易撕線喔！不是文具狂熱者根本不會想到要為贈品做這種設計吧？ XD
留言列表
Dear Baby (6)