Upcoming SlideShare
Make web as webapp
- 1. Make web as webapplets design web as app
- 2. Google Reader
- 3. Facebook
- 4. Twitter
- 5. Web sites are capableAnd can act as App
- 6. WebAppMozilla proposed standard toMake web act as app
- 7. Current Platforms supportWebApp standard:● Desktop Firefox (Win, Mac, Linux)● Firefox for Mobile (Android)● Firefox OS
- 8. Contact Calendar
- 9. HTML5 + WebAPIWeb is the platform
- 10. Enhanced web experienceHTML5
- 11. HTML5 Support APIshttps://developer.mozilla.org/docs/HTML/HTML5
- 12. WebAPIin-progress standards to facilitateweb capability
- 13. Firefox supported WebAPIhttps://developer.mozilla.org/en-US/docs/WebAPI
- 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 requiredhttp://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 structureMyApp● maniest.webapp● index.html● js● style○ icons■ icon128.png
- 22. index.html<html><body>Hello World!</body></html>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)
- 26. Preview (app screen)
- 27. That is not APP!lets move to the next stage
- 28. Make it Good● Provide Develop Tools● Provide Develop Guidelines
- 29. 2. Applify the webdesign your web as apphttp://mzl.la/V0MavA
- 30. Expect for App experience1. Just fit specific need2. Slick UI3. Fast4. Stable5. Works without internet6. 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
- 35. UI Demoshttps://marketplace.firefox.com/app/ui-demos/
- 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, testframework, help tools, deploy instructionshttp://github.com/gasolin/webapplate
- 38. WebApplate Features● support hosted & packaged webappdevelopment● Speedy default server/client sideconfigurations● autotest & offline appcache generatorhttp://github.com/gasolin/webapplate
- 39. Download from github● https://github.com/gasolin/webapplateor● https://github.com/gasolin/FxOSBMI(example with Firefox OS UI building block)
- 40. SetupNeed Node.js installedupdate modules:# npm installstart server:$ node app.jsopen localhost:8000
- 41. Client side test in browser
- 42. Help Tools$ grunt
- 43. Deployin github:git push origin gh-pagesin 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 Boilerplatehttps://github.com/robnyman/Firefox-OS-Boilerplate-App
- 46. ResourcesDeveloper Hub https://marketplace.firefox.com/developers/Examples● FirefoxOS-boilerplate http://bit.ly/WAFLoe● FxOSBMI http://bit.ly/ZppWEAWebapp Template● webapplate http://bit.ly/13sLd5j
Be the first to comment