| layout | title | date | tags | ||
|---|---|---|---|---|---|
post |
2013 WebConf |
2013-01-14 |
|
還記得大三以前，我超討厭寫網頁。自從大三暑假去實習接觸了 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 時，應該要將行為考慮進去！
效能最大的敵人－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 的「設計與開發如何真心合作？」，聽完整個融會貫通，原來溝通首要條件是－長得正！阿沒有啦，其實溝通簡單說需要的就是「同理心」，而這議題不應該只針對設計與開發，人與人之間的溝通就是這樣！
微議程中有幾了滿有趣的項目：
開會千萬不要挑的日子：禮拜一不要－沒人進入狀況、禮拜五不要－隔天沒人修 bug、假期後不要－沒人進入狀況。結論：禮拜二最合適。
至於 release 的日子，一定要找適合破土開光之日！聽說，真的有差。
HTML 一開始設計的很簡單，就是為了讓任何人都能輕易上少。但看看現在的 HTML 發展，可以發現－HTML 一點都不簡單。
如果很簡單－那還需要辦 WebConf 嗎？讓我想到我老闆…
旋轉個文字要寫 CSS，何不直接加在 tag 中的屬性呢？掛個 Google Maps，程式碼長度更多了…。於是有個專案產生了－gk，可以自定標籤，並定義行為！不過這是個很新的專案，所以保證有 bug，保證調整 API！XD
原來 font-face 可以直接指定對哪些字產生效果，若對於某些字有特殊需求的話，可以直接採用這個方式，就不必用 span 標籤了！
其實我都沒在聽他講什麼，我只覺得他簡報酷斃了！！！可以同步塗鴉超有趣，是說他介紹的是 QNAP，然後有人在上面寫 Synology 超白爛XD
高橋流簡報方式實在很酷，而且這個主題我也滿有興趣的。FSM = finite state machine，中文－有限狀態機。計算理論中很重要的一個主題，可能因為跟計算機科學感覺有關所以特別激起我的興趣吧 XD。不過，我其實聽不懂他到底在講什麼，但感覺很有趣 XD
反正有註冊功能的話，請先 Google 「個人資料提供同意書」，找個範例，簡單修改貼上去！以免觸犯「個資法」！
最後，多線議程真的好討厭阿！！沒聽到 Even Wu、阿修、BobChao 等等許多的精采議程真的好可惜，分明意圖使人了解「選擇都伴隨著犧牲」！！
所以決定來看看 Even Wu 的「2012 年網頁技術濃縮咖啡」投影片，首先－網頁是資訊流！在網頁設計上，程式設計師利用 CSS 整理資訊流。但是 CSS 天生有些缺陷，所以建議使用 CSS 的 framework，如 SCSS 與 Compass，另外我之前實習有用過 LESS。配色上要注意深淺色的比重，比重會因背景色彩而被改變！另外字型可以使用線上的字體服務，可以令使用體驗不因平台而受限。然後沒聽到好令人悔恨阿！單看投影片好多無法理解 :(。
再看看阿修的「用原型驅動設計」投影片，痾…單看投影片還是不懂。單看投影片實在太難理解了，只好期待會有影片釋出了！！！
整場 WebConf 下來，對自己只有六個字可以形容了：
無知、無能、無恥！