Scrivere Webapp per Firefox OS - Orru

Giancarlo Orru
Scrivere webapp per Firefox OS
gengisca@yahoo.com - Investech-blue

Chi sono – Un 'frontendista' dal 1995
● 1996 WWW.ILMESSAGGERO.IT
● 1998 WWW.SFEXAMINER.COM (Intranet JS)
● 1999 WEBROOM – (CMS Grafico in DHTML / AJAX!)
● 2000-3 WWW.HSE.IT (TV COMMERCIALE)
● 2005 WWW.CDFLASH.COM
● 2007 WWW.TELSTRA.COM.AU (Mobile TV)
● 2008 Mobile TV e Audio streaming in Flashlite
● 2010 WWW.DU.AE (Mobile Social) - Wurfl
● 2012 WWW.ITVONLINE.NL (WEBTV di KPN)
● Colleziono siti (MOBYLE.IT, SHOPMETRO.IT, LAPUB.IT...)
● gengisca@yahoo.com
ROME 11-12 april 2014 – Giancarlo Orru

Il primi due miliardo di smartphones sono stati
costruiti con PalmOS, Symbian, IOS, Android...
Per i prossimi due... Firefox OS e' pronto!

Icone Browser Marketplace
Firefox OS – Schermate di esempio

Firefox OS - Devices
● Keon, Peak
● ZTE Open - FF OS 1.0.1 (Spagna)
● Alcatel OneTouch Fire - FF OS 1.1
● Alcatel OneTouch Fire S - FF OS 1.3 (Q3 2014)
● Geeksphone Revolution - FF OS 1.2 – Dual OS!
● Huawei Y300II - FF OS 1.1
● LG Fireweb - FF OS 1.1
● Alcatel OneTouch Fire 7 - FF OS 1.3
● APC PAPER (Cortex A9 800Mhz - 720P) Free 4 Bug solved
● Panasonic Smart TV (Q4 2014)
● Sony... gadgets?

MWC 2014
● Spreadtrum da 25$ (Cortex A5) EDGE
Per il mercato asiatico (India, Indonesia)
● Flame 4,5” NFC (for developers)
● Foxconn InFocus Tablet 10”
● VIA VIXEN Tablet 7”

Scrivere Webapp per IOS / Android...(Per non
parlare delle APP)
● HTML5
● Phonegap/Cordova
● Titanium Appcelerator
● 99 dollari all'anno (IOS)
● 60% degli sviluppatori IOS spende piu' di
quanto ricava (non calcolando il costo del
Mac...)
● Ma quante app vengono respinte?
● Vogliono subito una CC???

Scrivere Webapp per Firefox OS
● HTML5 e' 'nativo'!
● WebApi
● Web Activities
● Phonegap/Cordova
● Firefox OS Simulator, App manager,
Responsive Design View, Web Console,
Debugger, Monitor
● Tutto GRATIS!!!

App Manager - Firefox 26+

Firefox OS Architecture
● Linux AOSP (Android Open Source Project),
hardware abstraction layer , open souce
libraries – GONK
● Firefox OS application runtime, support for
HTML, CSS e JavaScript – Gecko!!!
● The user interface of the Firefox OS platform -
GAIA!!!

Packaged e Hosted apps
● Hosted app e' semplice, basta aggiungere il
manifest alla vostra webapp attuale!
Manutenzione semplice
Per farle funzionare offline si sfrutta l'appcache:
<html manifest="example.appcache">
● Packaged app – Tutte le risorse devono essere
incluse in uno zip
Risorse incluse devono essere poco
movimentate

App security e WebApi
● Web apps – Alarm, Music, Video, FM Radio,
Geolocation, Simple push, Storage (senza
limiti...)
● Privileged apps – Viste e approvate - Alarm
clock, calendar alarms, New email, incoming
SMS, Browser, Contacts, TCP Socket
● Certified apps (Solo per Operatori e OEM)–
Phone calls, bluetooth, camera, mobile
connection, settings, power management, sms,
wifi...

WWW.ANSA.ITWWW.ADNKRONOS.IT

Creazione di una hosted app a partire da una
Webapp gia' scritta in HTML, CSS, Javascript
con qualsiasi framework
● Scrivere il Manifest
● Tutto qui???

Esempio di Manifest
{
"name": "Meteo", "version": "1.0", "description": "A meteo app",
"launch_path": "/ff01/index.html",
"icons": { "60": "/icons/icon01_60.png", "128":
"/icons/icon01_128.png" },
"developer": { "name": "Giancarlo Orru", "url":
"http://www.mobyle.it" },
"permissions": { "geolocation": { "description": "Marking out
user location" } }
}

Esempio di WebApi – index.htm
<!DOCTYPE html>
<html><head>
<title>WebApi samples</title>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<button id="vibrate">Vibrate</button><br/><br/>
<button id="battery">Battery</button><br/><br/>
<script src="app.js"></script>
</body>
</html>

File app.js
(function () {
var vibr = document.querySelector("#vibrate");
if (vibr) {
vibr.onclick = function () { window.navigator.vibrate(500); };
}
var batt = document.querySelector("#battery");
if (batt) {
batt.onclick = function () {
var battery = navigator.battery || navigator.mozBattery ||
navigator.webkitBattery;
alert("Battery status: " + battery.level * 100 + "%" + (battery.charging ? "
Battery is charging": "")); };
}
})();

Esempio di WebActivity tratto dal Boilerplate di Robert Nyman :
<!DOCTYPE html>
<html><head>
<title>Take a picture</title>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<button id="pick-image">Take a picture</button>
<span id="image-presenter"></span>
<script src="app.js"></script>
</body>
</html>

File app.js:
(function () {
var pickImage = document.querySelector("#pick-image");
if (pickImage) {
pickImage.onclick = function () {
var pick = new MozActivity({
name: "pick",
data: {
type: ["image/png", "image/jpg", "image/jpeg"],
nocrop: true // don't allow the user to crop the image
}
});

pick.onsuccess = function () {
var img = document.createElement("img");
img.src = window.URL.createObjectURL(this.result.blob);
var imagePresenter = document.querySelector("#image-presenter");
var myImg = imagePresenter.appendChild(img);
imagePresenter.style.display = "block";
myImg.style.width = "95%";
};
pick.onerror = function () {
console.log("Can't view the image");
};
};
}
})();

File manifest.webapp:
{ "name": "FFOS",
"description": "First FireFox OS APP!",
"launch_path": "/pct/index.htm",
"developer":
{ "name": "Gengisca", "url": "http://www.mobyle.it" },
"icons":
{ "32": "/pct/logo32.png",
"60": "/pct/logo60.png",
"90": "/pct/logo90.png",
"120": "/pct/logo120.png",
"128": "/pct/logo128.png",
"256": "/pct/logo256.png" },
"default_locale": "en" }

Manifest.appcache se device e' offline
● CACHE MANIFEST
# Build 2014-02-15
CACHE:
index.htm
js/app.js
NETWORK:
*
● www.html5rocks.com/en/tutorials/appcache/beginner

Boilerplate completo di Robert Nyman:
● https://github.com/robnyman/Firefox-OS-Boilerplate-App
● http://hacks.mozilla.org/2013/01/introducing-the-
firefox-os-boilerplate-app/
Altri esempi 'basic':
Addy Osmani – The Nitty Gritty
● http://thenittygritty.co/ffos-apps
Rob Lauer - Adobe
● http://www.adobe.com/devnet/html5/articles/writing-
your-first-firefox-os-app.html

Responsive apps
● Layout pattern
● Media Query
<link rel="stylesheet" media="only screen and (max-width: 350px)" href="320.css">
<link rel="stylesheet" media="only screen and (min-width: 351px) and (max-width: 719px)"
href="480.css">
<link rel="stylesheet" media="only screen and (min-width: 720px) and (max-width: 1079px)"
href="980.css">
● viewport!:
<meta name="viewport" content="width=device-width, user-scalable=no">
E se lo vogliamo compatibile con il vecchio
BlackBerry? Responsive server – RESS (Wurfl,
MobileAware, Antenna...)

Responsive design, device detection, o
entrambi?
● Firefox OS non viene riconosciuto come mobile
device dai maggiori siti italiani!!!
● Responsive Server – RESS – Il server genera il
codice a seconda dello 'User-Agent'

User Agent strings
Chrome UA: Mozilla/5.0 (Windows NT 6.0) AppleWebKit/537.36 (KHTML,
like Gecko) Chrome/33.0.1750.154 Safari/537.36
Safari UA: Mozilla/5.0 (iPad; CPU OS 6_0 like Mac OS X)
AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5355d
Safari/8536.25
Opera UA: Mozilla/5.0 (Windows NT 6.0) AppleWebKit/537.36 (KHTML,
like Gecko) Chrome/33.0.1750.154 Safari/537.36 OPR/20.0.1387.82
Internet Explorer 11 UA: Mozilla/5.0 (Windows NT 6.1; Trident/7.0;
rv:11.0) like Gecko
FireFox UA:Mozilla/5.0 (Windows NT 6.0; rv:28.0) Gecko/20100101
Firefox/28.0
Alcatel UA: Mozilla/5.0 (Mobile; ALCATELOneTouch4012X; rv:18.1)
Gecko/18.1 Firefox/18.1

Scrivere una animazione o un gioco in HTML5
● CSS semplice, tutti i browser lo gestiscono al
meglio
● Canvas – hardware acceleration – Parecchi
giochi HTML5 lo utilizzano
● SVG Veloce se si utilizza l'object model
direttamente, puo' confondere le idee, non puoi
usare bitmap direttamente, ma effetti speciali!!!
● Webgl (da firefox 27 anche debugger)
requestAnimationFrame e non setInterval
addEventListener e non onEvent

Mozilla Persona
● http://www.mozilla.org/en-US/persona/
Validazione delle app
● https://marketplace.firefox.com/developers/validator
Distribuzione delle app
● https://marketplace.firefox.com/developers/docs/deploy

Libri
● Quick Guide For Firefox OS App Development
● Firefox OS for Activists
● Beginning Firefox OS HTML5 Game Programming
Links
● https://developer.mozilla.org
● https://developer.mozilla.org/en-US/Firefox_OS
● https://developer.mozilla.org/en-US/docs/Web
● http://buildingfirefoxos.com
● https://github.com/mozilla-b2g

HTML5TEST.COM

Scrivere Webapp per Firefox OS - Orru

Scrivere Webapp per Firefox OS - Orru

Recomendados

Recomendados

Más contenido relacionado

Similar a Scrivere Webapp per Firefox OS - Orru

Similar a Scrivere Webapp per Firefox OS - Orru (20)

Más de Codemotion

Más de Codemotion (20)

Último

Último (20)

Scrivere Webapp per Firefox OS - Orru