還記得大三以前,我超討厭寫網頁。自從大三暑假去實習接觸了 web 後,竟然 180 度大轉彎,決定進入 web 的領域。得知要舉辦 WebConf 時,就下定決心死都要報名到!但很可惜的沒搶到學生票,竟然一分鐘完售!好在有人沒繳錢有搶到一般票,但 1300 有點傷荷包倒是,但比 HITCON 便宜多了 XD。

這 1300 花的值不值得?值得

先從我有親身參與的講題開始!

在資訊安全的部份,能聽到資安專家(不是駭客)Allen Own 講述網路其實很安全(才怪)。令我發現我寫過的網站根本就是一堆洞,還有發現自己部落格沒關閉帳號申請的功能,直接門戶大開…,之前一直不解為什麼有一堆垃圾郵件要來我這申請帳號,我終於懂了。近期 user friendly 大家都掛在嘴邊,但小心讓 user friendly 同時也變成 hacker friendly。網頁產生的資訊漏洞都因為管理者的無知無能與無恥。管理者一定要注意最新的資安漏洞與攻擊手法,並及早建置防禦系統,最重要的是「避免僥倖的心態」!另外系統要持續更新,安全性設置需要注意,以及開發與管理應該分開!使用他人程式要注意,自己撰寫的也更要小心!然後發現竟然有這個網站 http://cmd5.com/ 可以解密 md5。接下來最糟糕的是隱匿不報、推卸責任與湮滅證據!最後,這個世界上沒有入侵不了的系統,增加駭客入侵的成本(時間、金錢等)就是最好的防禦!不過還是有個終極防禦法-拔除網路線

接下來第二天另一個資安小專家(也不是駭客而且還是大學生!)Orange 講傳好多洞真的很值得。首先講述了駭客的攻擊流程「觀察找漏洞 → 經由漏洞上傳後門取得控制權 → 清理足跡」。駭客們常藉由上傳 webshell 來取得主機控制權,許多網站都擁有上傳的功能,例如上傳大頭貼。只要上傳一張經過設計的圖片,即可偷偷將 webshell 上傳成功了!!這真的太可怕了…。上傳時最好使用白名單,使用黑名單需要注意的東西太多了…。

最後,寫程式時,請參閱正確的教學文件,不要估狗到什麼就貼什麼。Allen Own 與 Orange 都強調了這一點!!看來我需要多檢討,太喜歡估狗找 code 貼了 :(。

網頁技術的部分聽了大澤木小鐵的講解 php 開發,也對 php 有了更深入一點的認識,然後發現自己有多無知。還有榮獲 Github 貢獻量第二名的 c9s 也講了 php 的開發,但講的好深奧,聽不懂 :(。但有些觀念很不錯,例如:程式設計 ≠ 設計輪子,使用他人的東西會被受限。這也是我常在思考的問題,常聽到許多人說不該自己重新發明輪子,但常常別人所提供的輪子好像總不是那麼符合自己的期待,這時到底該不該自己發明輪子呢?另外閃光洽的 media query 感覺準備的很豐富,但時間匆促也讓整場 talk 很多部分僅帶過,以及自己沒有試過相關的功能沒有背景,導致許多部分完全無法吸收,悲劇。

在 UX 的方面聽了 Adam 的從 mockup 到網頁中要注意的事項,這是我非常喜歡的其中一場,以下是 Adam 列舉出幾個在設計時應該注意的問題:

彈性

i18n 雖然好,但 i18n 在使用上,文字也因為語言的差異而有不同的長度,在使用上應該要特別注意,免得出現極長的按鈕之類的!

圖片解析度問題,隨著解析度多樣與高解析度螢幕的出現(retina),不該再使用固定長寬的圖片了!小弟我個人認為,圖片呈現時的解析度很直接的影響畫面的質感。不管再網頁上或是其他平面設計上,圖片顆粒出現就就不對啦!!本來就要做 8-bit 風格的話除外。

半透明效果,由於 opacity 會繼承,在半透明區塊上顯示文字時,會需要將文字與半透明區塊分離,此時可能就會造成半透明區塊高度調整爆炸!!所以,請愛用 rgba。

對齊

了解 CSS 的文字呈現方式,如 line-height、kerning、letter-spacing 與 text-overflow 等!避免文字區塊過長過短等問題,或甚至超出邊界的問題。但怎麼做才是對的,沒有準則,依照網頁設計的需求為主!

另外,文字的呈現方式也直接影響了使用者的閱讀體驗,

了解 CSS 的 box-model,這大概是基本功。不過,CSS 的排版方常常出乎我意料,我覺得是我學太淺了…。

一致性

個人的理解是,給使用這一致的使用體驗。在好的互動設計,都比不上使用者習慣的互動設計好用!保有一致的使用體驗,才能令使用者使用的順手,覺得親切!

親和力

保有網頁的語意,使用正確的 tag,給搜尋引擎親和力!另外是配色,不過配色非常因人而異,想找更多配色可以到 kuler 查找!相近色彩的使用需非常小心,當使用這螢幕顯色能力差時,可能根本無法區分該色彩之異同。

tabindex,很多人習慣用 tab 來切換瀏覽焦點,包括我!對於無法使用 tabindex 的網站,就只能覺得麻煩!

天然的最好,客製化物件固然好,但在跨瀏覽器的支援上可能就會出問題,若非必要,建議使用原生的!

漸進式改良

以樣式來說,CSS3 不是未來,是現在;以行為來說,HTML5 不是未來,是現在。

別花太多時間 fallback(支援舊版瀏覽器)!

Mockup 是介面不是圖

這是我最覺得受用的一點!網頁是個介面,可以互動的,絕對不是一般的平面設計而已!因此在設計 mockup 時,應該要將行為考慮進去!

效能

效能最大的敵人-http request。這裡只舉圖片當例子,要減少圖片所造成的大量 http request 可以透過 LazyLoad 或是 pinterest 的瀑布流來做。

跨裝置設計

跨裝置除了螢幕大小外,還有使用情境!螢幕大小的問題可以透過 responsive design 來解決,但情境呢?在設計網頁時,我們常常用 hover 或 mouseover 來進行互動,但在行動裝置上,滑鼠在哪?所以,請愛用 active!這也是我從沒注意到的一點,原來行動裝置不能 hover!!!

還有 David Liu 的 UX 觀察總結,提出了一些對於 UX 的看法以及設計方法,價值在於「解決問題」。另外 Richard 的設計決策,雖然聽到睡著(大概是吃飽想睡的關係),但他的一些提問讓我了解到我們都是超級使用者,我們比使用者了解我們的產品,而且自以為了解使用者,另外,使用者比我們想像的聰明。在設計使用者介面時,不要再「我覺得這樣對使用者比較好」了,數據會說話,直接用 A/B test 來查看使用者到底喜歡什麼。


後端的部份也很有幸聽到常在 PTT 上出現的 TonyQ 講網頁效能的優化,幾個可以注意的點是:

  • slow query log
  • hot page
  • ORM

以及 ihower 講解新一代的傳輸協定 HTTP/2.0-SPDY,雖然對底層傳輸的方式很不熟,但講者解說的方式我覺得還滿好理解的。大致可以了解為何網站讀取速度慢,以及一些優化方式。最後,可能因為 SPDY 的出現,導致某些現存的優化方式將無用武之地,例如:CSS sprite。

開發上有聽到許多不錯的觀念,尤其是「交接」與「測試」。不管對任何人,儘管是自己,也都要做好交接的工作。方便讓任何人(包括自己)可以快速進入狀況,開始工作!另外別只相信測試過的程式,應該要保留測試資料,測試資料是最好的文件,也稱作-live document,看來 test 真的很重要阿!突然想到這學期 Jserv 課程中的 unit test 項目最後放棄了,好羞愧。

溝通上聽了正妹 Hitomi 的「設計與開發如何真心合作?」,聽完整個融會貫通,原來溝通首要條件是-長得正!阿沒有啦,其實溝通簡單說需要的就是「同理心」,而這議題不應該只針對設計與開發,人與人之間的溝通就是這樣!

微議程中有幾了滿有趣的項目:

thegiive - 關於 Release 的二三事

開會千萬不要挑的日子:禮拜一不要-沒人進入狀況、禮拜五不要-隔天沒人修 bug、假期後不要-沒人進入狀況。結論:禮拜二最合適。

至於 release 的日子,一定要找適合破土開光之日!聽說,真的有差。

marty shu - 回到 HTML 的本質與初衷

HTML 一開始設計的很簡單,就是為了讓任何人都能輕易上少。但看看現在的 HTML 發展,可以發現-HTML 一點都不簡單。

如果很簡單-那還需要辦 WebConf 嗎?讓我想到我老闆…

旋轉個文字要寫 CSS,何不直接加在 tag 中的屬性呢?掛個 Google Maps,程式碼長度更多了…。於是有個專案產生了-gk,可以自定標籤,並定義行為!不過這是個很新的專案,所以保證有 bug,保證調整 API!XD

鴨七:有沒有用 CSS 就可以對各別字元指定字體的八卦?

原來 font-face 可以直接指定對哪些字產生效果,若對於某些字有特殊需求的話,可以直接採用這個方式,就不必用 span 標籤了!

劉宇庭 (Justin Liu):Web 專案管理,何不找 NAS 幫你?

其實我都沒在聽他講什麼,我只覺得他簡報酷斃了!!!可以同步塗鴉超有趣,是說他介紹的是 QNAP,然後有人在上面寫 Synology 超白爛XD

Gias Kay Lee:FSM FTW!

高橋流簡報方式實在很酷,而且這個主題我也滿有興趣的。FSM = finite state machine,中文-有限狀態機。計算理論中很重要的一個主題,可能因為跟計算機科學感覺有關所以特別激起我的興趣吧 XD。不過,我其實聽不懂他到底在講什麼,但感覺很有趣 XD

Duncan Hsieh - 遇到個資法怎麼辦?

反正有註冊功能的話,請先 Google 「個人資料提供同意書」,找個範例,簡單修改貼上去!以免觸犯「個資法」!

最後,多線議程真的好討厭阿!!沒聽到 Even Wu、阿修、BobChao 等等許多的精采議程真的好可惜,分明意圖使人了解「選擇都伴隨著犧牲」!!

所以決定來看看 Even Wu 的「2012 年網頁技術濃縮咖啡」投影片,首先-網頁是資訊流!在網頁設計上,程式設計師利用 CSS 整理資訊流。但是 CSS 天生有些缺陷,所以建議使用 CSS 的 framework,如 SCSS 與 Compass,另外我之前實習有用過 LESS。配色上要注意深淺色的比重,比重會因背景色彩而被改變!另外字型可以使用線上的字體服務,可以令使用體驗不因平台而受限。然後沒聽到好令人悔恨阿!單看投影片好多無法理解 :(。

再看看阿修的「用原型驅動設計」投影片,痾…單看投影片還是不懂。單看投影片實在太難理解了,只好期待會有影片釋出了!!!

整場 WebConf 下來,對自己只有六個字可以形容了:

無知、無能、無恥!

附贈:WebConf 2013 懶人包