Scrivere Webapp per Firefox OS - Orru

Giancarlo Orru

Scrivere webapp per Firefox OS

[email protected] - Investech-blue

Chi sono Un 'frontendista' dal 19951996 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...)

[email protected]

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 - DevicesKeon, 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 2014Spreadtrum 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 OSHTML5 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 ArchitectureLinux 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 appsHosted app e' semplice, basta aggiungere il manifest alla vostra webapp attuale!Manutenzione semplicePer farle funzionare offline si sfrutta l'appcache:

Packaged app Tutte le risorse devono essere incluse in uno zipRisorse incluse devono essere poco movimentate


App security e WebApiWeb 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.IT

WWW.ADNKRONOS.IT



Creazione di una hosted app a partire da una Webapp gia' scritta in HTML, CSS, Javascript con qualsiasi frameworkScrivere 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 WebApi samples Vibrate

Battery

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 : Take a picture Take a picture


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' offlineCACHE MANIFEST# Build 2014-02-15

CACHE:index.htmjs/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-appsRob Lauer - Adobe

http://www.adobe.com/devnet/html5/articles/writing-your-first-firefox-os-app.html


Responsive appsLayout pattern

Media Query

viewport!:

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 stringsChrome UA: Mozilla/5.0 (Windows NT 6.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.154 Safari/537.36Safari 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.25Opera 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.82Internet Explorer 11 UA: Mozilla/5.0 (Windows NT 6.1; Trident/7.0; rv:11.0) like GeckoFireFox UA:Mozilla/5.0 (Windows NT 6.0; rv:28.0) Gecko/20100101 Firefox/28.0Alcatel UA: Mozilla/5.0 (Mobile; ALCATELOneTouch4012X; rv:18.1) Gecko/18.1 Firefox/18.1


Per far sparire la barra degli indirizzi:Inserire una splash window in testa (loading...)window.onload = function() { window.scroll(0,480); }

Usate il font Fira (c'e' solo quello... o no???) "Fira Sans", "Feura Sans", "Open Sans", sans-serif;


Scrivere una animazione o un gioco in HTML5CSS 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 setIntervaladdEventListener e non onEvent


Mozilla Personahttp://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


LibriQuick 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


ROME 11-12 april 2014 Speaker's name

Scrivere Webapp per Firefox OS - Orru

Technology

Transcript of Scrivere Webapp per Firefox OS - Orru