Your SlideShare is downloading. ×
0
Scrivere Webapp per Firefox OS - Orru
Scrivere Webapp per Firefox OS - Orru
Scrivere Webapp per Firefox OS - Orru
Scrivere Webapp per Firefox OS - Orru
Scrivere Webapp per Firefox OS - Orru
Scrivere Webapp per Firefox OS - Orru
Scrivere Webapp per Firefox OS - Orru
Scrivere Webapp per Firefox OS - Orru
Scrivere Webapp per Firefox OS - Orru
Scrivere Webapp per Firefox OS - Orru
Scrivere Webapp per Firefox OS - Orru
Scrivere Webapp per Firefox OS - Orru
Scrivere Webapp per Firefox OS - Orru
Scrivere Webapp per Firefox OS - Orru
Scrivere Webapp per Firefox OS - Orru
Scrivere Webapp per Firefox OS - Orru
Scrivere Webapp per Firefox OS - Orru
Scrivere Webapp per Firefox OS - Orru
Scrivere Webapp per Firefox OS - Orru
Scrivere Webapp per Firefox OS - Orru
Scrivere Webapp per Firefox OS - Orru
Scrivere Webapp per Firefox OS - Orru
Scrivere Webapp per Firefox OS - Orru
Scrivere Webapp per Firefox OS - Orru
Scrivere Webapp per Firefox OS - Orru
Scrivere Webapp per Firefox OS - Orru
Scrivere Webapp per Firefox OS - Orru
Scrivere Webapp per Firefox OS - Orru
Scrivere Webapp per Firefox OS - Orru
Scrivere Webapp per Firefox OS - Orru
Scrivere Webapp per Firefox OS - Orru
Scrivere Webapp per Firefox OS - Orru
Scrivere Webapp per Firefox OS - Orru
Scrivere Webapp per Firefox OS - Orru
Scrivere Webapp per Firefox OS - Orru
Scrivere Webapp per Firefox OS - Orru
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Scrivere Webapp per Firefox OS - Orru

1,047

Published on

Slides from Giancarlo Orru talk @Codemotion Roma 2014

Slides from Giancarlo Orru talk @Codemotion Roma 2014

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,047
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Giancarlo Orru Scrivere webapp per Firefox OS gengisca@yahoo.com - Investech-blue
  • 2. 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
  • 3. Il primi due miliardo di smartphones sono stati costruiti con PalmOS, Symbian, IOS, Android... Per i prossimi due... Firefox OS e' pronto! ROME 11-12 april 2014 – Giancarlo Orru
  • 4. Icone Browser Marketplace Firefox OS – Schermate di esempio
  • 5. 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? ROME 11-12 april 2014 – Giancarlo Orru
  • 6. 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” ROME 11-12 april 2014 – Giancarlo Orru
  • 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??? ROME 11-12 april 2014 – Giancarlo Orru
  • 8. 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!!! ROME 11-12 april 2014 – Giancarlo Orru
  • 9. App Manager - Firefox 26+ ROME 11-12 april 2014 – Giancarlo Orru
  • 10. ROME 11-12 april 2014 – Giancarlo Orru
  • 11. 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!!! ROME 11-12 april 2014 – Giancarlo Orru
  • 12. 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 ROME 11-12 april 2014 – Giancarlo Orru
  • 13. 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... ROME 11-12 april 2014 – Giancarlo Orru
  • 14. ROME 11-12 april 2014 – Giancarlo Orru
  • 15. ROME 11-12 april 2014 – Giancarlo Orru WWW.ANSA.ITWWW.ADNKRONOS.IT
  • 16. ROME 11-12 april 2014 – Giancarlo Orru
  • 17. ROME 11-12 april 2014 – Giancarlo Orru
  • 18. Creazione di una hosted app a partire da una Webapp gia' scritta in HTML, CSS, Javascript con qualsiasi framework ● Scrivere il Manifest ● Tutto qui??? ROME 11-12 april 2014 – Giancarlo Orru
  • 19. 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" } } } ROME 11-12 april 2014 – Giancarlo Orru
  • 20. 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>
  • 21. 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": "")); }; } })();
  • 22. 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> ROME 11-12 april 2014 – Giancarlo Orru
  • 23. 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 } }); ROME 11-12 april 2014 – Giancarlo Orru
  • 24. 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"); }; }; } })(); ROME 11-12 april 2014 – Giancarlo Orru
  • 25. 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" } ROME 11-12 april 2014 – Giancarlo Orru
  • 26. 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
  • 27. 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 ROME 11-12 april 2014 – Giancarlo Orru
  • 28. 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...) ROME 11-12 april 2014 – Giancarlo Orru
  • 29. 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' ROME 11-12 april 2014 – Giancarlo Orru
  • 30. 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 ROME 11-12 april 2014 – Giancarlo Orru
  • 31. 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 ROME 11-12 april 2014 – Giancarlo Orru
  • 32. 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 ROME 11-12 april 2014 – Giancarlo Orru
  • 33. 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 ROME 11-12 april 2014 – Giancarlo Orru
  • 34. HTML5TEST.COM ROME 11-12 april 2014 – Giancarlo Orru

×