Make web as webapp

987 views
901 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
987
On SlideShare
0
From Embeds
0
Number of Embeds
25
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Make web as webapp

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

×