WebConf 2013 Day 1 

圖片來源是 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,如果是舊版的瀏覽器頂多就是沒有輔助文字、對新版使用者可以改善使用經驗,但都不影響他們操作。

推薦的網路資源:

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 的統計工具,可以計算使用者的回訪率等等資料。

網站分析:

  1. 先訂目標、找對 KPI
  2. 認清數字背後的意義,例如單單只看使用者連入某頁的 pageview 可能無具體意義,但如果鎖定「從某個活動導入的流量」,就能知道活動的成效
  3. 利用工具交叉分析查閱

Q: 「GA 能觀察 single user 的瀏覽行為嗎?」
A: 「依照 Google 的政策是不能這樣,變通的方法是為這樣的 user 增加一個 tag,來篩選那個使用者的瀏覽記錄。」

  

TonyQ, 《網站效能調整-網站系統篇》

TonyQ 說他這場想講的是平民版的 Website Performance 調校技巧。(意思應該是不用買機器來改善吧?)

在 startup 常見的 performance 問題,透過小型的調校來改善網站回應速率。

效能很難依賴外面的人來改善,通常網站的開發人員比較能掌握整體環境。

根據 TonyQ 提供的案例:某個新創網站在上了媒體後,流量爆增後,機器便無法負載,即使機器升級也沒有太多的改善,直到透過網站調校改善過效能後才改善。

網站的效能不一定因為網站承載了流量而產生,有個網站的效能是用了過多的 YouTube API,導致網站都在等待 YouTube 的回應中渡過,而讓人覺得效能不佳。

根據他的觀察,網站 70% 的時間會佔在某一個區塊,20% 的時間會在另一個問題上,10% 的時間用在剩下的內容。以開發 mamibuy 為例,他在開發時會把一樣的程式複製一份出來做成測試頁,把每一個區塊佔用的時間印出來,觀測頁面上哪些東西最花時間。 

認為網站發生效能問題時不要用猜的,直接去看設定檔與統計資訊來分析,找到最佔時間的東西後再來調校,會比盲目 debug 還划算。

減少 SQL 佔用的時間的方法:

  1. 避免不必要的 join,減少資料複雜度
  2. 隨機這件事盡量不要用 order by rand(),先把 PK 拿出來 rand() 做成 temp table 再回頭 join 其他欄位,速度會快很多

 總而言之:

  1. 不做不必要的事
  2. 把常要運算的東西做成快取,或是像首頁的東西大部分不需要太即時,可以做成靜態的
  3. 不要每個東西都做成 cache,在部分 OS 用太多會造成問題,或是 cache 和實際資料不一致時會造成使用者的混亂
  4. 避免用 like,全文檢索可以考慮改用 Google 的全文搜尋
  5. 要常觀測自己的系統

 

 

然後是第一天的微議程 (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, 《易用性研究》 

所開發的產品是滑鼠軌跡追蹤工具,可以記錄使用者的點擊與瀏覽軌跡。

 

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

, , , ,

小草 發表在 痞客邦 PIXNET 留言(0) 人氣()