Archive for 六月 2011
flash/swf convert to HTML5!
Posted on: 2011/06/29
- In: HTML | HTML5 | New Technology | News
- 發表迴響
Link: http://swiffy.googlelabs.com/
‧
HTML5看來早已非常成熟!
繼之前大家看到的html5 3d drawing, html5毛筆字，
這次為大家介紹的是: swf to html5 converter!
‧
只要你有一個獨立的swf file,
將它上載於上面的網頁，
flash/swf 便成了html5!
‧
大家可以即管試試這個convert後的作品:
http://swiffy.googlelabs.com/gallery/example3.html
‧
左手邊的是swf version,
右手邊的正是html5 version!
筆者試完後發現完全沒有相異是處，
實在是太厲害了。
‧
看來Google對html5的發展有相當大的支持呢~
是為了將來的Web apps整合和發展鋪路嗎?
HTML5 3D drawing!
Posted on: 2011/06/27
Link: http://www.3dtin.com/
HTML5的威力可以去到那裏?
以上介紹的網址可以看到html5處理3D Drawing的威力!
‧
大家到這個網址之後，
選擇左手邊的「藍色移動工具」，
隨意移動，
跟著選回第一個「畫筆工具」，
畫上你喜歡的圖案吧!
‧
筆者畫了個Ming字，
隨後點回「藍色移動工具」，
真的係立體!
Firefox 5 released!
Posted on: 2011/06/25
Download Link: http://moztw.org/
大家可以到上面的網址下載最新的Firefox 5 了!
‧
小注意:
經過一個非正式測試，
看來Firefox5對html5的支援倒退了?
到Apple Mac: http://www.apple.com/hk/mac/的時候，
上面的選擇竟然沒有了，
筆者有些失望。
‧
介面上沒有甚麼改變，
仍是Firefox 4的介面，
沒有大多吸引力。
‧
跟據網頁(http://moztw.org/firefox/releases/)列出的資料，
筆者選了幾個較為重要的Firefox 5更新:
- CSS animation Support!
- 改善 canvas、JavaScript、記憶體與網路效能
- 改善對 HTML5、XHR、MathML、SMIL 與 canvas 標準的支援
- 改善 Linux 桌面環境整合
- WebGL 內容將不再能讀取跨網域的材質。
- 背景分頁的 setTimeout 和 setInterval 會減速為 1000 ms 以增進效能。
看得出Firefox 5其實對html5有重大更新，
特別是canvas, css, js速度上有改善，
是與chrome的理念一樣，
追求更快的上網速度嗎?
10 minute email!
Posted on: 2011/06/21
- In: Uncategorized
- 發表迴響
當大家到一些討論區等需要申請新用戶的時候，
往往需要你填寫Email電郵地址，
但害怕會收到更多的垃圾郵件?
‧
如果有一個用完即棄的電郵地址，你會試用嗎?
Link: http://10minutemail.com/
‧
只要大家到上面的網頁，
便能夠「享用」你新的Email了!
大家進入這網址便會清楚見到一個電郵地址，
隨時可以Copy and paste到需要填寫Email的地方了!
‧
10 minute mail從名字看來，
只有十分鐘的時間，
不過這網站提借延長時間，
延長後便多了十分鐘的時間接收email了!
‧
如果過了十分鐘後沒有任何動作，
這個電郵便告吹，
你卻一個Junk mail都收不了!
Defensive Web Design
Posted on: 2011/06/20
筆者今天神奇地七點便醒來，
一早起來就是學習的好時機~
‧
今天為大家帶來了和User Interface有關的Web design:
Defensive web design, 或稱Contingency Design.
‧
What is Defensive Web design?
意指對錯誤所針著的網頁設計(Design for when things go wrong)。
‧
Why do we need Defensive Web design?
墨菲定律: “If anything can go wrong, it will."
每個人在用你的網頁設計的時候，
便會出現錯誤!
‧
如果能好好處理好這些錯誤，
你便能:
- 提升易用性(improve usability)
-
提升轉換率(Improved Conversion Rates)
- 增加收入(Increased Revenues)
- 增加品牌忠誠度(Increased Brand Loyalty)
(Reference: http://37signals.com/whitepaper/37s_contingency_wp_feb02.pdf)
Examples
Inline and Contextual Helps
不少的網頁設計都涉及大量文字資訊，
某些設計未必能在同一頁面展示出所有的資訊。
一些網頁會利用tooltips或是文字版FAQ/Keyword Defination,
用以提示用戶某些字眼的意思。
‧
例如新聞網頁除了有新聞的標題外，
可以在滑鼠移到標題上出理相關圖片和一些新聞資料。
‧
又或者針對keywords以tooltips形式列出其意思。
‧
Google的說明中心，
正好就是Contextual Help的好例子:
http://www.google.com/support/
‧
Slow Connections
朋友曾告訴筆者，
香港的寬頻網絡很廣又快，
根本不用理會網頁設計對速度的影響。
筆者卻不這樣認為~
正正因為這麼多人上你的網站，
所以在處理異常大的流量的時候，
網頁設計和流量正息息相關!
‧
有趣的是，
由於智能手機的技術成熟，
更多人利用流動網絡上網，
不少智能手機使用者會取消載入圖片或影片，
這些時候便會對整個個網頁設計有所影響。
CNN.com的網頁在不載入圖片之下，
仍能保持整個網頁的外觀，
很厲害!
‧
On-site Search
如果你的網頁只是寥寥無幾，
搜索功能對網頁應該幫助不大；
但如果你的網頁成千上萬，
Search就是必須的功能!
‧
以openrice為例，
大家都可以看到除了個simple search在頂，
還會另外設計一個advanced search的功能，
讓用戶更能針對自己想吃的，
找到合適的餐廳。
‧
Form Validation And Error Handling
登人或申請新用戶的時候，
最常預料到的問題就是，
輸入錯誤!
‧
以Yahoo mail為例，
申請為新用戶的時候，
必須填寫的資料可以利用背景顏色和醒目文字提示，
非常清楚列出使用者那些地方需要重新填寫。
‧
Page not found!
404Error,
相信很多人都見過的網頁問題，
有可能是網址錯誤而成!
‧
給大家看看別人如何處理404的設計:
40個404設計:
http://www.smashingmagazine.com/2007/08/17/404-error-pages-reloaded/
60個404設計:
http://www.hongkiat.com/blog/60-really-cool-and-creative-error-404-pages/
‧
Google亦提醒404 handling的時候,
可以提供一些符合瀏覽者預期的網頁連結，
方便使用者繼續在你的網頁瀏覽~
‧
小總結
一些看來很小付出的Defensive Web design,
可以為你的網頁帶來無比效益!
‧
大家應該以一個開放的態度，
不要盲目假設每個使用者都能知道自己「錯在那裏」!
‧
大家亦要留意網頁能否對應每個瀏覽器，
想copy其他網頁資料時不要簡單的Copy and paste,
可能會改變你的網頁設計!
Happy Design!
Ming Apps 