About Mobile Web Development Thing

  • 1,608 views
Uploaded on

Slide @ JSDC.tw 2013

Slide @ JSDC.tw 2013

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,608
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
54
Comments
0
Likes
17

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 關於 Mobile Web 開發 二三事Eric Chuang
  • 2. 自我介紹Eric Chuang@Yahoo!Blog @ http://cire.pixnet.net
  • 3. 先問一個問題你喜歡使用 Mobile Web ?還是喜歡用 Mobile App ?
  • 4. 一些統計數據http://blog.flurry.com/bid/95723/Flurry-Five-Year-Report-It-s-an-App-World-The-Just-Web-Lives-in-It
  • 5. Linkedin App 的故事 2011 版source: http://venturebeat.com/2011/08/16/linkedin-node/"Exclusive: How LinkedInused Node.js and HTML5 tobuild a better, faster app"
  • 6. Linkedin App 的故事 2013 版source: http://venturebeat.com/2013/04/17/linkedin-mobile-web-breakup/"Why LinkedIn dumpedHTML5 & went native forits mobile apps"
  • 7. 但是...我們仍然想要提供給使用者良好的行動網頁經驗!
  • 8. V.S
  • 9. 挑戰的複雜度手機 X 瀏覽器 X OS 版本 X ...
  • 10. OS版本Android
  • 11. 目前我們行動網頁的目標iOSMobile SafariAndroidAndroid BrowserChrome BrowserWindows Phone 8 (在不久的將來)
  • 12. iPhone1136 x 640960 x 640480 x 320Android好多好多!以三星為例: 1.5, 1.8, 1.9, 2, 2.2, 2.3,2.4, 2.8, 3, 3.1, 3.2, 3.5, 3.7, 4, 4.3,4.5, 4.7, 4.8, 5.0, 5.3, 5.5, 5.8, 7.0,7.7, 8.9, and 10.1.from http://www.pcmag.com/article2/0,2817,2408689,00.asp從螢幕尺寸來看
  • 13. 一種解法 CSS Media Query@media (min-width: 320px) {width: 50%;}@media (min-width: 480px) {width: 33.3333333%;}@media (min-width: 680px) {width: 25%;}Ref: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
  • 14. 別忘了設定 viewport<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  • 15. 還可以優化的方法針對不同螢幕回應適當的 template 與assetTempate way:Mojito MVC Frameworkhttp://developer.yahoo.com/cocktails/mojito/docs/intro/mojito_mvc.html#viewsCookie way:http://blog.keithclark.co.uk/responsive-images-using-cookies/
  • 16. 挑戰 + 1:效能
  • 17. Source: http://visual.ly/mobile-page-load-time-vs-user-expectations
  • 18. 降低 Page Load 時間1. 減少 HTTP requests 數量.2. 減少頁面大小.3. 縮圖可以在伺服器上做.4. 後端要夠力.
  • 19. 降低 Page Load 時間Nodejs 解決方案a. Async.js https://github.com/caolan/asyncb. Memcached https://github.com/3rd-Eden/node-memcached
  • 20. 降低 Page Load 時間JS/CSS 解決方案yuglify https://github.com/yui/yuglify> npm -g install yuglify> yuglify ./lib/*.js如果使用 Mojito 開發也可以試試延伸套件 Mojito-Shakerhttp://developer.yahoo.com/cocktails/shaker/
  • 21. 效能提升方案大量運算時 - Webworkervar worker = new Worker(my_file.js);worker.addEventListener(message, function (e){// do something with the message from the// worker});// pass some data into the workerworker.postMessage({foo: bar});REF: http://code.flickr.net/2012/06/06/web-workers-and-yui/
  • 22. 效能提升方案硬體加速-webkit-transform:translate3d(0, 0, 0);
  • 23. 效能提升方案視覺化的欺敵戰術
  • 24. 效能提升方案gzip"Content-Encoding gzip"cdnlazy loadajax cache header"Cache-Control max-age=300"
  • 25. 網址優化方案http://us.yahoo.comhttp://tw.bid.yahoo.com <-> http://m.tw.bid.yahoo.com
  • 26. 讓開發容易點共用且統一的 liberror handleajaxi18Napi call handle
  • 27. 使用的框架我們使用 YUI也用 LESSLESS extends CSS with dynamic behavior such as variables,mixins, operations and functions.http://lesscss.org/
  • 28. Bottle這是一個提供 Mobile-friendly 元件庫它是 YUI Gallery自己開發自用http://zordius.github.com/yui3-gallery/gallery-bottle/http://www.yuiblog.com/blog/2013/01/07/yuiconf-2012talk-bottle-mobile-ui-library-with-montie-tsai-and-zordius-chen/
  • 29. 來談談測試
  • 30. 遠端除錯Safari Developer tools + Mobile Safarihttp://tinyurl.com/arzbq8rAndroid Chrome + Android SDK + Chromehttps://developers.google.com/chrome-developer-tools/docs/remote-debuggingandroVMhttp://androvm.org/blog/Android Emulatorhttp://developer.android.com/develop/index.htmlweinrehttp://people.apache.org/~pmuellr/weinre/docs/latest/
  • 31. 網路資源http://developer.yahoo.com/yslow/https://developers.google.com/speed/pagespeed/insightshttp://mobilehtml5.orghttp://caniuse.com
  • 32. Thanks!