Successfully reported this slideshow.
Your SlideShare is downloading. ×

Make web as webapp

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
Developing FirefoxOS
Developing FirefoxOS
Loading in …3
×

Check these out next

1 of 46 Ad

Make web as webapp

Download to read offline

Talk in GTUG Taipei 2013/5/9. There's some work to make web as webapp. The slide addressed the extra steps for existing web site, and suggest some tools and guide for newly developed website.

webapplate http://github.com/gasolin/webapplate
FxOSBMI https://github.com/gasolin/FxOSBMI

Talk in GTUG Taipei 2013/5/9. There's some work to make web as webapp. The slide addressed the extra steps for existing web site, and suggest some tools and guide for newly developed website.

webapplate http://github.com/gasolin/webapplate
FxOSBMI https://github.com/gasolin/FxOSBMI

Advertisement
Advertisement

More Related Content

Slideshows for you (20)

Advertisement

Similar to Make web as webapp (20)

Advertisement

Recently uploaded (20)

Make web as webapp

  1. 1. Make web as webapp lets design web as app
  2. 2. Google Reader
  3. 3. Facebook
  4. 4. Twitter
  5. 5. Web sites are capable And can act as App
  6. 6. WebApp Mozilla proposed standard to Make web act as app
  7. 7. Current Platforms support WebApp standard: ● Desktop Firefox (Win, Mac, Linux) ● Firefox for Mobile (Android) ● Firefox OS
  8. 8. Contact Calendar
  9. 9. HTML5 + WebAPI Web is the platform
  10. 10. Enhanced web experience HTML5
  11. 11. HTML5 Support APIs https://developer.mozilla.org/docs/HTML/HTML5
  12. 12. WebAPI in-progress standards to facilitate web capability
  13. 13. Firefox supported WebAPI https://developer.mozilla.org/en-US/docs/WebAPI
  14. 14. Approachs ● Make it run ● Make it good
  15. 15. Make it Run ● Enable Web Sites as Apps ● MarketPlace
  16. 16. 1. Web Sites are Apps 網頁即應用
  17. 17. webapp types ● Hosted webapp ● Packaged webapp
  18. 18. Hosted webapp (dynamic or static) ● turn website into webapp ● use offline appcache for no internet usage
  19. 19. Packaged webapp (no server) ● Package files in .zip ● Support more features with Permisions ● No internet required http://mzl.la/TUxIY3
  20. 20. Summary: Steps to hosted webapp ● Dev web app using HTML, CSS & Javascript ● Create an webapp manifest file ● publish/install the app on public domain ● https://marketplace.firefox.com/developers/ ● MDN http://mzl.la/Szsehb
  21. 21. webapp structure MyApp ● maniest.webapp ● index.html ● js ● style ○ icons ■ icon128.png
  22. 22. index.html <html><body>Hello World!</body></html> icon128.png
  23. 23. manifest.webapp { "name": "MyApp", "description": "Hello World!", "launch_path": "/index.html", "developer": { "name": "gasolin", "url": "https://gasolin.idv.tw" }, "permissions": [ "contacts" ], "icons": { "128": "/style/icons/icon128.png" } }
  24. 24. Setup
  25. 25. Preview (new desktop icon)
  26. 26. Preview (app screen)
  27. 27. That is not APP! let's move to the next stage
  28. 28. Make it Good ● Provide Develop Tools ● Provide Develop Guidelines
  29. 29. 2. Applify the web design your web as app http://mzl.la/V0MavA
  30. 30. Expect for App experience 1. Just fit specific need 2. Slick UI 3. Fast 4. Stable 5. Works without internet 6. Use mobile features
  31. 31. It might means... ● Design matters ● UI matters ● Fast loadtime (< 1s) ● Maintenable (Testable) ● Offline appcache ● WebAPI
  32. 32. How do I start? in practice
  33. 33. It might means... ● Design matters ● UI matters ● Fast loadtime (< 1s) ● Maintenable (Testable) ● Offline appcache ● WebAPI
  34. 34. Try on Simulator http://bit.ly/T249hs
  35. 35. UI Demos https://marketplace.firefox.com/app/ui-demos/
  36. 36. It might means... ● Design matters ● UI matters ● Fast loadtime (< 1s) ● Maintenable (Testable) ● Offline appcache ● WebAPI
  37. 37. WebApplate ● Best practices for new webapp development ● Contain dev server, web templates, test framework, help tools, deploy instructions http://github.com/gasolin/webapplate
  38. 38. WebApplate Features ● support hosted & packaged webapp development ● Speedy default server/client side configurations ● autotest & offline appcache generator http://github.com/gasolin/webapplate
  39. 39. Download from github ● https://github.com/gasolin/webapplate or ● https://github.com/gasolin/FxOSBMI (example with Firefox OS UI building block)
  40. 40. Setup Need Node.js installed update modules: # npm install start server: $ node app.js open localhost:8000
  41. 41. Client side test in browser
  42. 42. Help Tools $ grunt
  43. 43. Deploy in github: git push origin gh-pages in appfog: af update <myapp> in heroku: git push heroku master
  44. 44. It might means... ● Design matters ● UI matters ● Fast loadtime (< 1s) ● Maintenable (Testable) ● Offline appcache ● WebAPI
  45. 45. Firefox OS API Boilerplate https://github.com/robnyman/Firefox-OS-Boilerplate-App
  46. 46. Resources Developer Hub https://marketplace.firefox. com/developers/ Examples ● FirefoxOS-boilerplate http://bit.ly/WAFLoe ● FxOSBMI http://bit.ly/ZppWEA Webapp Template ● webapplate http://bit.ly/13sLd5j

×