sabin buraga: open (mobile) web app development on firefox os
DESCRIPTION
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-infoiasiTRANSCRIPT
open (mobile) web app developmenton Firefox OS
Dr. Sabin BuragaFaculty of Computer Science, UAIC – Iasi, Romania
www.purl.org/net/busaco
open mobile web application
development
Internet(Web)
web app = interaction + code + data
❄ ❄❄
open mobile web application
development web app = interaction + code + data
client-side and/or server-side
Internet(Web)
❄ ❄❄
open mobile web application
development web app = interaction + code + data
client-side and/or server-side
Internet(Web)
❄ ❄❄
open mobile web application
development
web project
management
Web Project Manager
development
Programmer/Software
Engineer(s)
Designer(s)/HCI Engineer
content (data)
Domain Expert
Business Expert
(re)using software
open source software licenseswww.tldrlegal.com/browse
creativecommons.org(linked) open datadatahub.io
(re)using data/content
so, I want to use/develop a mobile web appby using open standards…
+ + =
“HTML5 should not be considered as a whole. You should cherry-pick the technology
that suits the solution to your problem.”Remy Sharp
+ + =
mark-ups(vocabulary)
+standardized
JavaScript APIs
+ + =
candidate W3C recommendation(6 August 2013)
www.w3.org/TR/html5/
actual support for various HTML5 technologies
caniuse.comwww.w3.org/standards/techs/js#w3c_all
HTML5 in the mobile web context
mobilehtml5.orgwww.w3.org/Mobile/
+ + =
Firefox OSapplication
+ + =
Firefox OSapplication
built by usingHTML, CSS & JavaScript
available Firefox OS apps: marketplace.firefox.com
.│ 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
.│ 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 documentstructured content
+ interaction
.│ 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
<!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>
HTML5 documentstructured content
+ interaction
.│ 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
.│ 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
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;...
}}
CSS styles + images
.│ 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 codecan use certain HTML5 APIs& Firefox OS APIs – WebAPI
developer.mozilla.org/docs/WebAPI
.│ 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> elementvar 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 levelctx.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
+ + =
Firefox OSsystem
+ + =
Firefox OSsystem
Gaia – user interface
+ + =
Firefox OSsystem
Geckodata rendering & processing
via open Web standards(HTML + CSS + JS + SVG + WebGL + …)
+ + =
Firefox OSsystem
GonkLinux libraries & kernel
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
for details, visit http://profs.info.uaic.ro/~stefan.negru/studentprojects/
local Firefox events – 2013organized by Dr. Sabin Buraga (FII, UAIC)
and Andreea Popescu (Mozilla rep.)with a little help from their friends*
Firefox 18 launchJanuary 2013
Firefox OS app day March 2013
Summer Web 2013 + Design Jam Iasi #2
May 2013
Firefox OS HackathonJuly 2013
Winter Web WorkshopDecember 2013
*Alecsandru Grigoriu, Stefan Negru & Victor Porof (…and others)
open mobile Web development – resourcestinyurl.com/cliw-devel
photosflickr.com/photos/96641033@N05/
presentations & prizes for best student projects
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
+ + =
useful resources for Firefox OS developers(docs, examples, help, communities,…)
developer.mozilla.org/docs/Mozilla/Firefox_OShttp://firefoxos.info/
http://buildingfirefoxos.com/
open (mobile) web app developmenton Firefox OS
good luck!
Dr. Sabin BuragaFaculty of Computer Science, UAIC – Iasi, Romania
www.purl.org/net/busaco