Sabin Buraga: Open (mobile) web app development on Firefox OS
•
1 like•3,325 views
Several aspects regarding (mobile) web application development on Firefox OS platform; a presentation prepared for "Computer Science at the Castle" Summer School (Macea, Arad, 2013) and updated for "Winter Web Workshop" event (Iasi, 2013): http://tinyurl.com/www-infoiasi
Recommended
Recommended
More Related Content
Similar to Sabin Buraga: Open (mobile) web app development on Firefox OS
Similar to Sabin Buraga: Open (mobile) web app development on Firefox OS (20)
More from Sabin Buraga
More from Sabin Buraga (20)
Recently uploaded
Recently uploaded (20)
Sabin Buraga: Open (mobile) web app development on Firefox OS
- 1. open (mobile) web app development on Firefox OS Dr. Sabin Buraga Faculty of Computer Science, UAIC – Iasi, Romania www.purl.org/net/busaco
- 2. ❄❄❄ Internet (Web) open mobile web application development web app = interaction + code + data
- 3. ❄❄❄ Internet (Web) open mobile web application development web app = interaction + code + data client-side and/or server-side
- 4. ❄❄❄ Internet (Web) open mobile web application development web app = interaction + code + data client-side and/or server-side
- 5. web project open mobile web application development management Web Project Manager development content (data) Programmer/ Software Engineer(s) Domain Expert Designer(s)/ HCI Engineer Business Expert
- 6. (re)using software open source software licenses www.tldrlegal.com/browse
- 7. (re)using data/content creativecommons.org (linked) open datadatahub.io
- 8. + + = so, I want to use/develop a mobile web app by using open standards…
- 9. “HTML5 should not be considered as a whole. You should cherry-pick the technology that suits the solution to your problem.” Remy Sharp
- 11. + + candidate W3C recommendation (6 August 2013) www.w3.org/TR/html5/ =
- 12. actual support for various HTML5 technologies caniuse.com www.w3.org/standards/techs/js#w3c_all
- 13. HTML5 in the mobile web context mobilehtml5.org www.w3.org/Mobile/
- 15. Firefox OS application + + = built by using HTML, CSS & JavaScript
- 16. available Firefox OS apps: marketplace.firefox.com
- 19. . │ favicon.ico │ index.html │ install.html │ manifest.webapp │ offline.appcache ├───css │ app.css │ install-button.css ├───img │ │ offline.png │ │ online.png │ │ pattern.png │ │ recommend.png │ └───icons └───js │ app.js │ init.js │ install-button.js └───lib HTML5 document structured content + interaction <!DOCTYPE html> <html> <head manifest="offline.appcache"> <meta charset="utf-8" /> <title>My App</title> <meta name="description" content="..."/> <link rel="stylesheet" href="css/app.css"/> </head> <body> <!-- provided content --> <section>...</section> <!-- battery indicator --> <div id="indicator">...</div> <script type="text/javascript" data-main="js/init.js" src="js/lib/require.js"> </script> </body> </html>
- 21. . │ favicon.ico │ index.html │ install.html │ manifest.webapp │ offline.appcache ├───css │ app.css │ install-button.css ├───img │ │ offline.png │ │ online.png │ │ pattern.png │ │ recommend.png │ └───icons └───js │ app.js │ init.js │ install-button.js └───lib CSS styles + images html { background-image: url(../img/pattern.png); } /* responsive Web design */ @media only screen and (max-width : 768px) { #indicator { border: 2px solid #999; text-align: center; ... } }
- 22. . │ favicon.ico │ index.html │ install.html │ manifest.webapp │ offline.appcache ├───css │ app.css │ install-button.css ├───img │ │ offline.png │ │ online.png │ │ pattern.png │ │ recommend.png │ └───icons └───js │ app.js │ init.js │ install-button.js └───lib JavaScript code can use certain HTML5 APIs & Firefox OS APIs – WebAPI developer.mozilla.org/docs/WebAPI
- 23. . │ favicon.ico │ index.html │ install.html │ manifest.webapp │ offline.appcache ├───css │ app.css │ install-button.css ├───img │ │ offline.png │ │ online.png │ │ pattern.png │ │ recommend.png │ └───icons └───js │ app.js │ init.js │ install-button.js └───lib ... // creating via DOM a <canvas> element var canvas = document.createElement ('canvas'); var ctx = canvas.getContext ('2d'); canvas.width = game.width * blocksize; canvas.height = game.height * blocksize; canvas.id = 'game-canvas'; ... // drawing the current game level ctx.fillStyle = 'rgb (0, 0, 0)'; ctx.font = '2em sans-serif'; ctx.fillText ('Level: ' + (game.levelidx + 1), canvas.width - blocksize, canvas.height + 1); ... excerpt from a JavaScript app implementing a game
- 25. Firefox OS system + + = Gaia – user interface
- 26. Firefox OS system + + = Gecko data rendering & processing via open Web standards (HTML + CSS + JS + SVG + WebGL + …)
- 27. Firefox OS system + + = Gonk Linux libraries & kernel
- 28. be curious & inquisitive learn (read + experiment + ask + reuse) make & show (design, code, prototypes, demos,…) achieve (experience, badges, prizes, status) compete (…oh, so many opportunities) help others
- 30. local Firefox events – 2013 organized by Dr. Sabin Buraga (FII, UAIC) and Andreea Popescu (Mozilla rep.) * with a little help from their friends Firefox 18 launch January 2013 Firefox OS app day March 2013 Summer Web 2013 + Design Jam Iasi #2 May 2013 Firefox OS Hackathon July 2013 Winter Web Workshop December 2013 *Alecsandru Grigoriu, Stefan Negru & Victor Porof (…and others)
- 31. open mobile Web development – resources tinyurl.com/cliw-devel
- 33. presentations & prizes for best student projects
- 34. be curious & inquisitive learn (read + experiment + ask + reuse) make & show (design, code, prototypes, demos,…) achieve (experience, badges, prizes, status) compete (…oh, so many opportunities) help others
- 35. + + = useful resources for Firefox OS developers (docs, examples, help, communities,…) developer.mozilla.org/docs/Mozilla/Firefox_OS http://firefoxos.info/ http://buildingfirefoxos.com/
- 36. open (mobile) web app development on Firefox OS good luck! Dr. Sabin Buraga Faculty of Computer Science, UAIC – Iasi, Romania www.purl.org/net/busaco