Make web as webapp

1. Make web as webapp lets design web as app

2. Google Reader

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

8. Contact Calendar

9. HTML5 + WebAPI Web is the platform

10. Enhanced web experience HTML5

11. HTML5 Support APIs https://developer.mozilla.org/docs/HTML/HTML5

12. WebAPI in-progress standards to facilitate web capability

13. Firefox supported WebAPI https://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 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

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! 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

34. Try on Simulator http://bit.ly/T249hs

35. UI Demos https://marketplace.firefox.com/app/ui-demos/

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

42. Help Tools $ grunt

43. Deploy in github: git push origin gh-pages in appfog: af update <myapp> in heroku: git push heroku master

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

Make web as webapp

You are reading a preview.

Check these out next

Make web as webapp

More Related Content

Slideshows for you (20)

Viewers also liked (6)

Similar to Make web as webapp (20)

More from Fred Lin (13)

Recently uploaded (20)