Make web as webapp
•
1 like•1,410 views
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
Report
Share
Make web as webapp
- 1. Make web as webapp lets design web as app
- 3. Facebook
- 4. Twitter
- 5. Web sites are capable And can act as App
- 6. WebApp Mozilla proposed standard to Make web act as app
- 7. Current Platforms support WebApp standard: ● Desktop Firefox (Win, Mac, Linux) ● Firefox for Mobile (Android) ● Firefox OS
- 9. HTML5 + WebAPI Web is the platform
- 12. WebAPI in-progress standards to facilitate web capability
- 14. Approachs ● Make it run ● Make it good
- 15. Make it Run ● Enable Web Sites as Apps ● MarketPlace
- 16. 1. Web Sites are Apps 網頁即應用
- 17. webapp types ● Hosted webapp ● Packaged webapp
- 18. Hosted webapp (dynamic or static) ● turn website into webapp ● use offline appcache for no internet usage
- 19. Packaged webapp (no server) ● Package files in .zip ● Support more features with Permisions ● No internet required http://mzl.la/TUxIY3
- 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. webapp structure MyApp ● maniest.webapp ● index.html ● js ● style ○ icons ■ icon128.png
- 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. Setup
- 25. Preview (new desktop icon)
- 27. That is not APP! let's move to the next stage
- 28. Make it Good ● Provide Develop Tools ● Provide Develop Guidelines
- 29. 2. Applify the web design your web as app http://mzl.la/V0MavA
- 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. It might means... ● Design matters ● UI matters ● Fast loadtime (< 1s) ● Maintenable (Testable) ● Offline appcache ● WebAPI
- 32. How do I start? in practice
- 33. It might means... ● Design matters ● UI matters ● Fast loadtime (< 1s) ● Maintenable (Testable) ● Offline appcache ● WebAPI
- 34. Try on Simulator http://bit.ly/T249hs
- 36. It might means... ● Design matters ● UI matters ● Fast loadtime (< 1s) ● Maintenable (Testable) ● Offline appcache ● WebAPI
- 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. WebApplate Features ● support hosted & packaged webapp development ● Speedy default server/client side configurations ● autotest & offline appcache generator http://github.com/gasolin/webapplate
- 39. Download from github ● https://github.com/gasolin/webapplate or ● https://github.com/gasolin/FxOSBMI (example with Firefox OS UI building block)
- 40. Setup Need Node.js installed update modules: # npm install start server: $ node app.js open localhost:8000
- 41. Client side test in browser
- 43. Deploy in github: git push origin gh-pages in appfog: af update <myapp> in heroku: git push heroku master
- 44. It might means... ● Design matters ● UI matters ● Fast loadtime (< 1s) ● Maintenable (Testable) ● Offline appcache ● WebAPI
- 45. Firefox OS API Boilerplate https://github.com/robnyman/Firefox-OS-Boilerplate-App
- 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