diff options
Diffstat (limited to 'files/it/archive/b2g_os/quickstart')
6 files changed, 447 insertions, 0 deletions
diff --git a/files/it/archive/b2g_os/quickstart/app_tools/index.html b/files/it/archive/b2g_os/quickstart/app_tools/index.html new file mode 100644 index 0000000000..5d8657ae2a --- /dev/null +++ b/files/it/archive/b2g_os/quickstart/app_tools/index.html @@ -0,0 +1,16 @@ +--- +title: Strumenti di sviluppo per le app +slug: Archive/B2G_OS/Quickstart/App_tools +translation_of: Archive/B2G_OS/Quickstart/App_tools +--- +<div class="summary"> + <p>Cosa si usa per sviluppare le App Open Web? La risposta è "Gli stessi che si utilizzano abitualmente quando si sviluppa per il Web". La seguente è una lista di strumenti e risorse per aiutarti a sviluppare le tue prime App Open Web. Possono essere facilmente integrati nel tuo metodo di sviluppo web, se ne hai uno, o puoi creare un nuovo flusso di lavoro basandoti su di essi.</p> +</div> +<h2 id="Test_di_validazione_dell'app">Test di validazione dell'app</h2> +<p>La tua app è pronta per Firefox Marketplace? Il <a href="https://marketplace.firefox.com/developers/validator">Test di validazione dell'app</a> analizzerà il tuo manifest e ti mostrerà gli errori che potrebbe avere, o gli avvertimenti a cui dovresti prestare attenzione.</p> +<h2 id="Firefox_OS_Simulator">Firefox OS Simulator</h2> +<p>Installare e utilizzare il <a href="https://marketplace.firefox.com/developers/docs/firefox_os_simulator">Firefox OS Simulator</a> è il modo più semplice per avere la tua app pronta in breve tempo. Dopo averlo installato, il simulatore è accessibile dal menu Sviluppo Web -> Firefox OS Simulator. Assieme al simulatore viene lanciata una console JavaScript che permette di eseguire il debug delle applicazioni dall'interno del simulatore.</p> +<h2 id="App_Manager">App Manager</h2> +<p>Il nuovo arrivato per quanto riguarda gli strumenti di test si chiama <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_App_Manager">App Manager</a>. Questo strumento ti permette di collegare Firefox a un dispositivo compatibile via USB (o a un simulatore Firefox OS), inviare app direttamente al dispositivo, validarle ed eseguirne il debug mentre vengono eseguite sul dispositivo.</p> +<h2 id="Strumenti_di_sviluppo_di_Firefox">Strumenti di sviluppo di Firefox</h2> +<p>Firefox ora include un insieme di strumenti di sviluppo predefiniti progettati da zero per consentire un'esperienza di sviluppo rapida ed efficiente. Per scoprire di più riguardo questi strumenti, e conoscere una lista dettagliata di cos'altro Mozilla abbia da offrire, visita la <a href="/en-US/docs/Tools">zona Strumenti</a>.</p> diff --git a/files/it/archive/b2g_os/quickstart/index.html b/files/it/archive/b2g_os/quickstart/index.html new file mode 100644 index 0000000000..325ec38fd0 --- /dev/null +++ b/files/it/archive/b2g_os/quickstart/index.html @@ -0,0 +1,48 @@ +--- +title: Crea +slug: Archive/B2G_OS/Quickstart +tags: + - TopicStub +translation_of: Archive/B2G_OS/Quickstart +--- +<div class="summary"> + <p>Informazioni rapide per lo sviluppo di app open web.</p> +</div> +<dl> + <dt> + <a href="/docs/Web/Apps/Quickstart/Build/Intro_to_open_web_apps">Introduzione alle app open web</a></dt> + <dd> + Cosa sono le app open web? In cosa differiscono dalle normali pagine web? Perché la differenza è importante? Questo articolo punta a rispondere a queste e ad altre domande.</dd> + <dt> + <a href="/docs/Web/Apps/Quickstart/Build/Your_first_app">La tua prima app</a></dt> + <dd> + Questo articolo ti guida attraverso i passaggi base e le conoscenze addizionali rispetto allo sviluppo di normali pagine web per creare app open web installabili.</dd> + <dt> + <a href="/docs/Web/Apps/Quickstart/Build/Intro_to_Firefox_OS">Introduzione a Firefox OS</a></dt> + <dd> + Una presentazione di Firefox OS, la nuova piattaforma mobile di Mozilla basata sulle app open web.</dd> + <dt> + <a href="/docs/Web/Apps/Quickstart/Build/Intro_to_manifests">Introduzione ai manifesti</a></dt> + <dd> + FAQ creata per rispondere a qualsiasi domanda tu abbia sui manifesti, l'hosting delle app, origini e altri argomenti correlati.</dd> + <dt> + <a href="/docs/Web/Apps/Quickstart/Build/For_Web_developers">Sviluppo di app per sviluppatori web</a></dt> + <dd> + Per gli sviluppatori web: in cosa le app open web differiscono da ciò a cui sei abituato? Questo articolo spiega tutto.</dd> + <dt> + <a href="/docs/Web/Apps/Quickstart/Build/For_mobile_developers">Sviluppo di app per sviluppatori <em>mobile</em></a></dt> + <dd> + Per gli sviluppatori di applicazioni <em>mobile</em> native: quali vantaggi ti portano le app open web, e in cosa differiscono da ciò a cui sei abituato? Qui ci sono alcune idee.</dd> + <dt> + <a href="/docs/Web/Apps/Quickstart/Build/Developing_app_functionality">Sviluppo di funzionalità per le app</a></dt> + <dd> + Questa pagina presenta i diversi tipi di funzionalità che potresti voler includere nelle tue app, con link a ulteriori informazioni.</dd> + <dt> + <a href="/docs/Web/Apps/Quickstart/Build/Payments">Pagamenti</a></dt> + <dd> + Come puoi implementare le funzionalità per ricevere pagamenti dagli utenti che installano le tue app open web? Qui trovi i dettagli.</dd> + <dt> + <a href="/docs/Web/Apps/Quickstart/Build/App_tools">Strumenti per le app</a></dt> + <dd> + Nell’ultimo articolo di questa sezione sono raccolti alcuni link a ulteriore documentazione sugli strumenti a disposizione degli sviluppatori per creare app open web di qualità.</dd> +</dl> diff --git a/files/it/archive/b2g_os/quickstart/intro_app_web_aperte/index.html b/files/it/archive/b2g_os/quickstart/intro_app_web_aperte/index.html new file mode 100644 index 0000000000..bd1a8d4cb5 --- /dev/null +++ b/files/it/archive/b2g_os/quickstart/intro_app_web_aperte/index.html @@ -0,0 +1,53 @@ +--- +title: Introduzione alle app web aperte +slug: Archive/B2G_OS/Quickstart/Intro_app_web_aperte +translation_of: Archive/B2G_OS/Quickstart/Intro_to_open_web_apps +--- +<p><img alt="Multidispositivo" src="/files/4523/multidevices.png" style="width: 640px; height: 225px;"></p> +<div class="summary"> + <p>This article is designed to act as a good starting point for anyone wishing to learn more about Open Web Apps, whether you are a developer or project manager, or have another role relevant to app development or delivery. Here we'll provide you with a light, high level overview of Open Web Apps and the philosophy behind them.</p> +</div> +<p>Open Web Apps are essentially no different than standard websites or Web pages. They are built using standard open Web technologies ‚Äî HTML, CSS, JavaScript, etc. ‚Äî and can be accessed using a Web browser. The main differences lie in their ability to be installed on a device and work offline, and access to advanced APIs that allow interaction with device features such as the camera, address book, and other such things. In addition, they are built on open technologies as much as is possible. Where differences lie in technology implementation between platforms, efforts should be made to ensure that both are supported, through a combination of feature detection and appropriate code for different platforms, and graceful degradation.</p> +<h2 id="Advantages_of_Open_Web_Apps">Advantages of Open Web Apps</h2> +<p>Let's look at the advantages of Open Web Apps in a little more detail:</p> +<ul> + <li><strong>Local installation and offline storage</strong>: Open Web Apps can be installed on the device, and leverage APIs such as <a href="/en-US/docs/Web/Guide/DOM/Storage" title="/en-US/docs/Web/Guide/DOM/Storage">local storage</a> and <a href="/en-US/docs/IndexedDB" title="/en-US/docs/IndexedDB">IndexedDB</a> to provide local data storage capabilities. In addition, open Web technologies tend to have a much smaller footprint than native apps and can generally be updated atomically rather than having to install a complete new package each time there's an update. (an exception to this is packages apps, which require a whole new package when updating.) Apps are therefore less dependent on an always-on Web connection, and more useful when networks are patchy.</li> + <li><strong>Hardware access</strong>: The metadata provided with Open Web Apps can be used to grant the application permission to privileged APIs that enable usage of device hardware features, something the Web platform has not traditionally enjoyed.</li> + <li><strong>Breaking the walled gardens</strong>: The norm for mobile platforms tends to be be walled gardens written with proprietary technologies, so apps are locked inside their platforms. And smartphones tend to be expensive, and require credit cards for app purchases. Open Web Apps tend to be able to run on much cheaper hardware, especially in the case of Firefox OS devices where you've literally just got Firefox running on top of a lightweight Linux kernel. And they are written using open Web technologies, which is the most distributed platform around. In addition, Firefox OS devices feature payment systems where you can simply prepay for apps, or add the cost to your phone bill.</li> + <li><strong>Open Web App stores</strong>: Following on from the previous point, you can choose to host your apps in an existing marketplace (such as the <a href="https://marketplace.firefox.com/" title="https://marketplace.firefox.com/">Firefox Marketplace</a>), or host them somewhere else entirely. It's up to you. Mozilla aims to put the developer back in control of every aspect of the app experience ‚Äî from easy development to distribution to direct customer relationship management. And the apps can be searched for just like any other Web-based experience.</li> +</ul> +<p>The following video also looks at general advantages of open web apps, and developing for the Firefox OS platform:</p> +<p style="text-align: center;"><iframe frameborder="0" height="270" src="https://www.youtube.com/embed/RJJkFshnnVc/?feature=player_detailpage" width="480"></iframe></p> +<h2 id="Il_Web_è_la_piattaforma">Il Web è la piattaforma</h2> +<p>An open web app as it exists as installed on a platform like Firefox OS is not a bookmark ‚Äî it‚Äôs a proper part of the system. Le app web rappresentano una importante promessa per il futuro Sono un'opportunità che non dobbiamo perdere se non vogliamo che il Web torni ancora una volta a essere frammentato. Tenendo presente ciò, appare chiaro che l'obiettivo delle app web aperte (AWA per brevità) è diventare standardizzare ed entrare a far parte del "Web". Se avranno successo, le AWA eventualmente funzioneranno su ogni browser, sistema operativo e dispositivo.</p> +<p>Noi di Mozilla stiamo lavorando sodo per realizzare una piattaforma di app sostenuta interamente dal Web aperto. Non vogliamo creare una "piattaforma Mozilla" o una "piattaforma Firefox". <strong>Il Web è la piattaforma.</strong> Stiamo realizzando una collezione di API aperte e implementazioni per dimostrare che le app portabili possono esistere sul Web senza essere bloccate dai lucchetti dei venditori. Altri gruppi come Facebook e Google Chrome stanno lavorando su piattaforme di app che si appoggiano al Web. Le <a href="https://developers.facebook.com/docs/guides/canvas/">app di Facebook</a> sono progettate per agganciarsi al sito di Facebook, mentre le <a href="http://www.google.com/intl/en/chrome/webstore/apps.html">app di Chrome</a> sono progettate per i dispositivi con Chrome OS e per i server di Google. Le app di Chrome sono le più simili alle app web aperte. Continua la nostra collaborazione con il team di Google Chrome per stare al passo con l'evoluzione degli standard delle app e sicuramente condividiamo in gran parte la stessa visione. Esiste un enorme potenziale per tutte le piattaforme di app basate sul Web di convergere e estendiamo a ogni venditore l'invito di aiutarci a creare le API per app web aperte più adatte.</p> +<p>Sebbene al momento sia necessario un motore basato su Mozilla Firefox ("Web runtime") per utilizzare le app web aperte, in futuro non sarà sempre così. Stiamo ancora lavorando su molti punti di questo progetto e non ci è possibile implementare tutto su ogni browser contemporaneamente. Anche se numerose parti delle app web aperte sono già standardizzate, ci sono molti altri aspetti ancora da definire. È nostra intenzione e speranza rendere le app web aperte una funzionalità standardizzata disponibile su tutti i principali browser.</p> +<p>Quindi quando si consultano le pagine di MDN sulle app web aperte è opportuno tenere conto che, nonostante molte informazioni siano al momento specifiche per Firefox, se tutto procede come auspicato in futuro consentiranno di sviluppare app per tutti i browser.</p> +<h2 id="Standard_web">Standard web</h2> +<p>La tecnologia AWA non è una sola, più che altro è un ombrello sotto il quale si raggruppano numerose tecnologie differenti, alcune delle quali ancora molto giovani. Attualmente alcune parti di AWA sono standardizzate (HTML5, CSS, JavaScript, IndexedDB, ecc.) Altre parti non sono state ancora standardizzate, pertanto Mozilla le ha implementate solo in Firefox e altri prodotti Mozilla. Dal momento che la missione di Mozilla è condividere le potenzialità del Web con tutti, questa situazione è solo temporanea. Per questa ragione nei documenti AWA tenteremo di identificare con chiarezza le parti non ancora standardizzate.</p> +<p>Tieni anche in considerazione che potrebbero esistere anche altre tecnologie proposte per AWA candidate a definirne lo standard e non utilizzate da Mozilla.</p> +<h3 id="Standard_finali_a_cui_miriamo">Standard finali a cui miriamo</h3> +<p>Le seguenti parti, non ancora standardizzate per tutte le piattaforme web, al momento sono disponibili solo su Firefox:</p> +<ul> + <li><a href="/en-US/docs/Web/Apps/Manifest">Manifesto AWA</a> per definire un'app</li> + <li><a href="/en-US/docs/Web/Apps/JavaScript_API">API completa di AWA</a> per lavorare con le app</li> + <li><a href="https://wiki.mozilla.org/WebAPI">API web</a> per accedere a funzioni come la geolocalizzazione del telefono ecc. Vedi anche <a href="http://arewemobileyet.com/">arewemobileyet.com</a> per un rapporto di stato.</li> + <li><a href="/en-US/docs/Mozilla/Persona">Identity (Persona)</a> per gestire i dati degli utenti</li> + <li><a href="https://wiki.mozilla.org/WebAPI/WebPayment">API WebPayment</a> per facilitare i pagamenti in-app e gli acquisti di app da tutti i Marketplace</li> + <li><a href="https://wiki.mozilla.org/Apps/WebApplicationReceipt">Ricevute AWA</a> per convalidare le app pagate su ogni dispositivo e vendere app da tutti i Marketplace</li> +</ul> +<h3 id="Marketplace">Marketplace</h3> +<h4 id="Acquista_una_volta_utilizza_dappertutto">Acquista una volta, utilizza dappertutto</h4> +<p>Mozilla ha sviluppato da zero un sistema che permette agli utenti di acquistare un'app una sola volta e utilizzarla su tutti i suoi dispositivi HTML5. Molto presto Mozilla <a href="http://bits.blogs.nytimes.com/2012/09/07/a-firefox-smartphone-for-the-poor/">lancerà il primo telefono cellulare Firefox OS</a>, che tuttavia sarà solo uno dei tanti dispositivi su cui utilizzare le app. Quando acquisti un'app da <a href="https://marketplace.firefox.com/">Firefox Marketplace</a>, il sistema installa una ricevuta sul tuo dispositivo. La <a href="https://wiki.mozilla.org/Apps/WebApplicationReceipt">ricevuta</a> è un JSON Web Token contenente metadati con un collegamento alla chiave pubblica di Firefox Marketplace e all'URL del servizio di verifica. All'avvio dell'app, essa è in grado di verificare la ricevuta, tuttavia la ricevuta del dispositivo <em>non è legata</em> a Firefox Marketplace. Si tratta semplicemente di una prova di acquisto crittograficamente verificabile. Chiunque può vendere app web aperte se rispetta le specifiche della ricevuta. <strong>Quando acquisti un'app, essa è pensata per essere portabile su tutti i dispositivi che supportano il sistema per app web aperte.</strong></p> +<p>Mozilla is building the infrastructure needed to run Open Web Apps on any HTML5 device. <a href="http://www.mozilla.org/en-US/firefox/mobile/features/">Firefox for Android</a> will let you install and run apps (you can try it today on the <a href="http://nightly.mozilla.org/">nightly</a> build). Installed app icons go to your home screen just like regular Android apps. You can also install and run Web apps on your Windows, Mac, or Linux desktop using Firefox (this currently works in the <a href="http://nightly.mozilla.org/">nightly</a> build). Currently some version of Firefox is required, but it is intended that the Open Web Apps system will eventually be supported by all major browsers as a set of standards. From day one Mozilla has included all major HTML5 compliant browsers in its proof of concepts; you can take a look at this hosted JavaScript <a href="https://persona.org/include.js">shim</a> for ideas on how to support the apps platform on a non-Firefox browser.</p> +<p>In futuro il sistema di app web aperte supporterà <a href="http://docs.services.mozilla.com/aitc/">la sincronizzazione delle app installate</a> tra tutti i dispositivi. Poiché le ricevute sono portabili, esse possono essere sincronizzate direttamente dall'utente, se lo desidera. In caso non fosse ovvio, un'app web aperta gratuita può essere eseguita in qualsiasi browser, in quanto non è diversa da un sito web. Potrebbe tuttavia utilizzare nuove <a href="https://wiki.mozilla.org/WebAPI">API specifiche per cellulari</a> che non sono state implementate su tutte le piattaforme.</p> +<p>The video below provides a useful overview of the advantages of open marketplaces and an open web approach to app discovery:</p> +<p style="text-align: center;"><iframe frameborder="0" height="270" src="https://www.youtube.com/embed/QCH_ncCrZfE/?feature=player_detailpage" width="480"></iframe></p> +<h3 id="API_WebPayment">API WebPayment</h3> +<h4 id="Commercio_di_app">Commercio di app</h4> +<p>Parte del successo delle piattaforme di app per cellulari come iOS e Android è la facilità con cui è possibile sperimentare nuovi modelli di business attraverso i pagamenti via cellulare. Questi modelli si stanno ancora evolvendo ma non c'è dubbio che al momento il commercio di app si svolga in maniera molto più naturale sui cellulari piuttosto che sui computer desktop. In particolare è molto più comodo addebitare un acquisto sulla bolletta del telefono quando lo si sta utilizzando come strumento per accedere alla rete. Grazie al lancio di Firefox OS l'ecosistema delle app supporterà l'acquisto e i pagamenti in-app attraverso l'<a href="https://wiki.mozilla.org/WebAPI/WebPayment" style="">API WebPayment</a>. Garantire l'efficienza nel gestire il commercio è un fattore cruciale nella crescita di una piattaforma di app. <strong>L'API per i pagamenti che proponiamo è assolutamente <em>facoltativa</em></strong>. Mozilla non impedirà ad alcuna app di utilizzare un proprio sistema di pagamenti in-app.</p> +<h2 id="Vedi_anche">Vedi anche</h2> +<ul> + <li><a href="https://blog.mozilla.org/webdev/2012/09/14/apps-the-web-is-the-platform/">Apps: The Web Is The Platform</a>, di Kumar McMillan (gran parte del contenuto dell'articolo è stato tratto da questo post sul suo blog)</li> + <li><a href="https://plus.google.com/113127438179392830442/posts/fR3iiuN4kEF">See the Web platform succeed for applications</a>, di Paul Irish</li> +</ul> diff --git a/files/it/archive/b2g_os/quickstart/intro_to_firefox_os/index.html b/files/it/archive/b2g_os/quickstart/intro_to_firefox_os/index.html new file mode 100644 index 0000000000..88b6068425 --- /dev/null +++ b/files/it/archive/b2g_os/quickstart/intro_to_firefox_os/index.html @@ -0,0 +1,16 @@ +--- +title: Introduzione a Firefox OS +slug: Archive/B2G_OS/Quickstart/Intro_to_Firefox_OS +translation_of: Archive/B2G_OS/Quickstart/Intro_to_Firefox_OS +--- +<div class="note"> + <p><strong>Note</strong>: The Quickstart section has been updated with a <a href="/en-US/Apps/Quickstart">new, more focused Quickstart article</a>, which replaces all the previous Quickstart articles. We hope you'll find this more useful, and a quicker learning experience than the older set of articles.</p> +</div> +<div class="summary"> + <p>Firefox OS è un nuovo sistema operativo mobile sviluppato da Mozilla all'interno del progetto Boot to Gecko (B2G). Firefox OS utilizza il Kernel Linux e un motore di runtime basato su Gecko, che consente agli utenti di eseguire applicazioni sviluppate interamente utilizzando <a href="/it/docs/Web/HTML">HTML</a>, <a href="/it/docs/CSS">CSS</a>, <a href="/it/docs/JavaScript">JavaScript</a> e anche le Open Web API.</p> +</div> +<p>Firefox OS (conosciuto anche con il nome in codice Boot to Gecko o B2G) è un sistema operativo mobile open source, basato sul Kernel Linux, il quale fa il boot all'interno di una runtime engine bassata su Gecko, questo da la possibilità agli utenti di far girare applicazioni sviluppate solo con <a href="/it/docs/HTML">HTML</a>, <a href="/it/docs/Web/Guide/CSS">CSS</a>, <a href="/it/docs/JavaScript">JavaScript</a> e le Open Web APIs. Firefox OS è un sistema operativo mobile libero dalle tecnologie proprietarie, in più offre una potente piattaforma di svillupo dando la possibilità di creare prodottti eccellenti. Inoltre, è un sistema flessibile, in grado di rende felice l'utilizzatore finale.</p> +<p style="width: 480px; margin: 0 auto;"><iframe frameborder="0" height="270" src="https://www.youtube.com/embed/-9vktI70iHc/?feature=player_detailpage" width="480"></iframe></p> +<p>Firefox OS utilizza di default l'interfaccia grafica <a href="/it/docs/Mozilla/Firefox_OS/Platform/Gaia">Gaia</a>, che gestisce le funzioni fondamentali del telefono, ad esempio impostazioni, chiamate, SMS, prendere e archiviare foto, ecc</p> +<p>For Web developers, the most important part to understand is that the entire user interface is a Web app, one that is capable of displaying and launching other Web apps. Any modifications you make to the user interface and any applications you create to run on Firefox OS are Web pages, albeit with enhanced access to the mobile device's hardware and services.</p> +<p>Firefox OS is currently under heavy development; we are constantly working on ways to make it easier for you to use and hack on Gaia and create apps. However, you need knowledge about systems in order to do things like build the entire Firefox OS stack, or flash a phone with a build of Firefox OS. To find such information, and lots more besides, head on over to our <a href="/en-US/docs/Mozilla/Firefox_OS">Firefox OS content zone</a>.</p> diff --git a/files/it/archive/b2g_os/quickstart/la_tua_prima_app/index.html b/files/it/archive/b2g_os/quickstart/la_tua_prima_app/index.html new file mode 100644 index 0000000000..b470246ed7 --- /dev/null +++ b/files/it/archive/b2g_os/quickstart/la_tua_prima_app/index.html @@ -0,0 +1,262 @@ +--- +title: La tua prima app +slug: Archive/B2G_OS/Quickstart/La_tua_prima_app +translation_of: Archive/B2G_OS/Quickstart/Your_first_app +--- +<article class="brush: js"> +<div class="summary"> +<p>Le applicazioni web aperte offrono agli sviluppatori esattamente quello che hanno voluto per anni: un ambiente multi-piattaforma dedicata alle applicazioni installabili create con solo HTLM, CSS e JavaScript — Firefox OS è la prima piattaforma aperta dedicata alle apllicazioni web. Questa guida si propone di farvi ottenere rapidamente le basi e le istruzioni di complicazione in modo da poter creare la prossima grande app!</p> +</div> + +<p>Se vuoi seguire questa guida, è possibile scaricare il nostro <a href="https://github.com/chrisdavidmills/mdn-app-template">modello di applicazione di avvio rapido</a>. Trova più info leggendo la nostra guida sul <a href="/en-US/docs/Project:MDN/Style_guide/Sample_app_coding_guidelines#Apps_template">modello dell'applicazioni</a>.</p> + +<h2 id="Struttura_di_un'applicazione">Struttura di un'applicazione</h2> + +<h3 id="Packaged_vs._Hosted_Apps">Packaged vs. Hosted Apps</h3> + +<p>Ci sono due tipi di applicazioni web aperte: <code>packaged</code> e <code>hosted</code>. Le applicazioni Packaged sono essenzialmente formate da un file <code>zip</code> contenente tutto il necessario: HTML, CSS, JavaScript, immagini, manifest, etc. Le applicazioni Hosted (ospitate) sono eseguite e gestite da un server su un determinato dominio, proprio come un normale sito web. Entrambi i tipi di app richiedono un manifest valido. Quando arriva il momento di inserire la vostra app nel Marketplace di Firefox si carica sia l'app sotto forma di file zip che a indiciare l'url del dominio dove si trovano i vari file dell'applicazione sul server.</p> + +<div style="width: 480px; margin: 0 auto;"> +<p>{{EmbedYouTube("Q7x-B13y33Q")}}</p> + +<div class="video-caption"> +<p> Realizzato in collaborazione con Treehouse: <a class="button" href="http://teamtreehouse.com/?cid=1154">DACCI UN'OCCHIATA!</a></p> +</div> +</div> + +<p>Ai fini di questa guida, svilupperete la vostra applicazione Hosted in <code>localhost</code>. Un volta che l'applicazione è pronta di può decidere di caricarla nel Marketplace di Firefox come "Hosted App".</p> + +<h3 id="Manifest_di_una_App">Manifest di una App</h3> + +<p>Ogni applicazione Firefox richiede un file manifest.webapp alla radice dell'app. Il file <a href="/en-US/docs/Web/Apps/Manifest"><code>manifest.webapp</code></a> fornisce importanti informazioni sull'app come: la versione, nome, descrizione, posizione delle icone e immagini, strighe locali, domini di dove l'app si andrà a installare, e molto altro (Solo il nome e la descrizione sono richieste). Il semploce manifest incluso in un applicazione si presenta:<code> </code></p> + +<pre class="brush: js">{ + "version": "0.1", + "name": "Open Web App", + "description": "La vostra nuova App Web", + "launch_path": "/app-template/index.html", + "icons": { + "16": "/app-template/app-icons/icon-16.png", + "48": "/app-template/app-icons/icon-48.png", + "128": "/app-template/app-icons/icon-128.png" + }, + "developer": { + "name": "Il tuo nome", + "url": "http://sitodellapp.com" + }, + "locales": { + "es": { + "description": "Su nueva aplicación impresionante Open Web", + "developer": { + "url": "http://yourawesomeapp.com" + } + }, + "it": { + "description": "La vostra nuova fantastica Open Web App", + "developer": { + "url": "http://yourawesomeapp.com" + } + } + }, + "default_locale": "it" +}</pre> + +<div style="width: 480px; margin: 0 auto;"> +<p>{{EmbedYouTube("dgAUgHQOm8M#t")}}</p> + +<div class="video-caption"> +<p>Realizzato in collaborazione con Treehouse: <a class="button" href="http://teamtreehouse.com/?cid=1154">DACCI UN'OCCHIATA!</a></p> +</div> +</div> + +<p> </p> + +<p>Un Manifest di base dovrà essere sempre la prima cosa da creare per la vostra app. Per maggiori info leggere l'<a href="https://developer.mozilla.org/it/Apps/Manifest">App Manifest.</a></p> + +<h2 id="App_Layout_Design">App Layout & Design</h2> + +<p>Il design responsive è diventato sempre più importante, se prendiamo in considerazione il fatto che le risoluzioni dello schermo dei vari device sono ormai diventate degli standard da seguire.<br> + Anche se l'obiettivo principale della vostra applicazione, è quella di distribuirla sulle piattaforme mobili come Firefox OS, potette comunque rendere compatibile l'applicazione con le altre piattaforme. Per fare si che la vostra applicazioni adatti in automatico il layout in base al dispositivo, come mostrato in questo esempio, dovete utilizzare il <a href="https://developer.mozilla.org/docs/CSS/Media_queries">CSS media queries</a>:</p> + +<pre class="brush: css">/* The following are examples of different CSS media queries */ + +/* Basic desktop/screen width sniff */ +@media only screen and (min-width : 1224px) { + /* styles */ +} + +/* Traditional iPhone width */ +@media + only screen and (-webkit-min-device-pixel-ratio : 1.5), + only screen and (min-device-pixel-ratio : 1.5) { + /* styles */ +} + +/* Device settings at different orientations */ +@media screen and (orientation:portrait) { + /* styles */ +} +@media screen and (orientation:landscape) { + /* styles */ +}</pre> + +<p>There are many JavaScript and CSS frameworks available to aid in responsive design and mobile app development (<a href="http://twitter.github.com/bootstrap">Bootstrap</a>, etc.); choose the framework(s) that best fit your app and development style.</p> + +<h2 id="Web_APIs">Web APIs</h2> + +<p>JavaScript APIs are being created and enhanced as quickly as devices are. Mozilla's <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> effort brings dozens of standard mobile features to JavaScript APIs. A list of device support and status is available on the <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> page. Of course JavaScript feature detection is still the best practice:</p> + +<pre class="brush: js">// If this device supports the vibrate API... +if('vibrate' in navigator) { + // ... vibrate for a second + navigator.vibrate(1000); +}</pre> + +<p>In the following example snippet we modify the display style of a <code><div></code> based on changes in the device's battery state:</p> + +<pre class="brush: java">// Create the battery indicator listeners +(function() { + var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery, + indicator, indicatorPercentage; + + if(battery) { + indicator = document.getElementById('indicator'), + indicatorPercentage = document.getElementById('indicator-percentage'); + + // Set listeners for changes + battery.addEventListener('chargingchange', updateBattery); + battery.addEventListener('levelchange', updateBattery); + + // Update immediately + updateBattery(); + } + + function updateBattery() { + // Update percentage width and text + var level = (battery.level * 100) + '%'; + indicatorPercentage.style.width = level; + indicatorPercentage.innerHTML = 'Battery: ' + level; + // Update charging status + indicator.className = battery.charging ? 'charging' : ''; + } +})();</pre> + +<p>In the code sample above, once you confirm that the <a href="https://developer.mozilla.org/en-US/docs/DOM/window.navigator.battery">Battery API</a> is supported, you can add event listeners for <code>chargingchange</code> and <code>levelchange</code> to update the element's display. Try adding the following to the quickstart template, and see if you can get it working.</p> + +<p>Check the <a href="https://wiki.mozilla.org/WebAPI">WebAPI</a> page frequently to keep up to date with device API statuses!</p> + +<h3 id="Install_API_functionality">Install API functionality</h3> + +<p>In our sample quickstart app template, we've implemented an install button that you can click when viewing the app as a standard Web page, to install that site on Firefox OS as an app. The button markup is nothing special:</p> + +<pre class="brush: html"><button id="install-btn">Install app</button></pre> + +<p>This button's functionality is implemented using the Install API (see install.js):</p> + +<pre class="brush: js">var manifest_url = location.href + 'manifest.webapp'; + +function install(ev) { + ev.preventDefault(); + // define the manifest URL + // install the app + var installLocFind = navigator.mozApps.install(manifest_url); + installLocFind.onsuccess = function(data) { + // App is installed, do something + }; + installLocFind.onerror = function() { + // App wasn't installed, info is in + // installapp.error.name + alert(installLocFind.error.name); + }; +}; + +// get a reference to the button and call install() on click if the app isn't already installed. If it is, hide the button. +var button = document.getElementById('install-btn'); + +var installCheck = navigator.mozApps.checkInstalled(manifest_url); + +installCheck.onsuccess = function() { + if(installCheck.result) { + button.style.display = "none"; + } else { + button.addEventListener('click', install, false); + }; +}; +</pre> + +<p>Let's run through briefly what is going on:</p> + +<ol> + <li>We get a reference to the install button and store it in the variable <code>button</code>.</li> + <li>We use <code>navigator.mozApps.checkInstalled</code> to check whether the app defined by the manifest at <code>http://people.mozilla.com/~cmills/location-finder/manifest.webapp</code> is already installed on the device. This test is stored in the variable <code>installCheck</code>.</li> + <li>When the test is successfully carried out, its success event is fired, therefore <code>installCheck.onsuccess = function() { ... }</code> is run.</li> + <li>We then test for the existance of <code>installCheck.result</code> using an <code>if</code> statement. If it does exist, meaning that the app is installed, we hide the button. An install button isn't needed if it is already installed.</li> + <li>If the app isn't installed, we add a click event listener to the button, so the <code>install()</code> function is run when the button is clicked.</li> + <li>When the button is clicked and the <code>install()</code> function is run, we store the manifest file location in a variable called <code>manifest_url</code>, and then install the app using <code>navigator.mozApps.install(manifest_url)</code>, storing a reference to that installation in the <code>installLocFind</code> variable. You'll notice that this installation also fires success and error events, so you can run actions dependant on whether the install happened successfully or not.</li> +</ol> + +<p>You may want to verify the <a href="/en-US/docs/Web/Apps/JavaScript_API">implementation state of the API</a> when first coming to Installable web apps.</p> + +<div class="note"> +<p>Note: Installable open web apps have a "single app per origin" security policy; basically, you can't host more than one installable app per origin. This makes testing a bit more tricky, but there are still ways around this, such as creating different sub-domains for apps, testing them using the Firefox OS Simulator, or testing the install functionality on Firefox Aurora/Nightly, which allow installable web apps to install on the desktop. See <a href="/en-US/docs/Web/Apps/FAQs/About_app_manifests">FAQs about apps manifests</a> for more information on origins.</p> +</div> + +<h2 id="WebRT_APIs_(Permissions-based_APIs)">WebRT APIs (Permissions-based APIs)</h2> + +<p>There are a number of WebAPIs that are available but require permissions for that specific feature to be enabled. Apps may register permission requests within the <code>manifest.webapp</code> file like so:</p> + +<pre class="brush: js">// New key in the manifest: "permissions" +// Request access to any number of APIs +// Here we request permissions to the systemXHR API +"permissions": { + "systemXHR": {} +}</pre> + +<p>The three levels of permission are as follows:</p> + +<ul> + <li>Normal — APIs that don't need any kind of special access permissions.</li> + <li>Privileged — APIs available to developers to use in their applications, as long as they set access permissions in the app manifest files, and distribute them through a trusted source.</li> + <li>Certified — APIs that control critical functions on a device, such as the call dialer and messaging services. These are generally not available for third party developers to use.</li> +</ul> + +<p>For more information on app permission levels, read <a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps" title="/en-US/docs/Web/Apps/Packaged_apps#Types_of_packaged_apps">Types of packaged apps</a>. You can find out more information about what APIs require permissions, and what permissions are required, at <a href="/en-US/docs/Web/Apps/App_permissions">App permissions</a>.</p> + +<div class="note"> +<p>It's important to note that not all Web APIs have been implemented within the Firefox OS Simulator.</p> +</div> + +<h2 id="Tools_Testing">Tools & Testing</h2> + +<p>Testing is incredibly important when supporting mobile devices. There are many options for testing installable open web apps:</p> + +<h3 id="Firefox_OS_Simulator">Firefox OS Simulator</h3> + +<p>Installing and using the <a href="https://marketplace.firefox.com/developers/docs/firefox_os_simulator">Firefox OS Simulator</a> is the easiest way to get up and running with your app. After installed the simulator is accessible via the Tools -> Web Developer -> Firefox OS Simulator menu. The simulator launches with a JavaScript console so that you may debug your application from within the simulator!</p> + +<h3 id="App_Manager">App Manager</h3> + +<p>The new kid on the block with regards to testing tools is called the <a href="/en-US/docs/Mozilla/Firefox_OS/Using_the_App_Manager">App Manager</a>. This tool allows you to connect desktop Firefox to a compatible device via USB (or a Firefox OS simulator), push apps straight to the device, validate apps, and debug them as they run on the device.</p> + +<h3 id="Unit_Testing">Unit Testing</h3> + +<p>Unit tests are extremely valuable when testing on different devices and builds. jQuery's <a href="http://qunitjs.com">QUnit</a> is a popular client-side testing utility, but you can use any set of testing tools you'd like.</p> + +<h3 id="Installing_Firefox_OS_on_a_Device">Installing Firefox OS on a Device</h3> + +<p>Since Firefox OS is an open source platform, code and tools are available to build and install Firefox OS on your own device. Build and installation instructions, as well as notes on what devices it can be installed on, can be found on <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Firefox_OS/Platform">MDN</a>.</p> + +<p>Dedicated Firefox OS developer preview devices are also available: read our <a href="https://marketplace.firefox.com/developers/dev_phone">Developer preview phone page</a> for more information.</p> + +<h2 id="App_Submission_and_Distribution">App Submission and Distribution</h2> + +<p>Once your app is complete, you can host it yourself like a standard web site or app (read <a href="/en-US/docs/Web/Apps/Publishing/Self-publishing_Apps">Self-publishing apps</a> for more information), or it can be <a href="https://marketplace.firefox.com/developers/submit/app/manifest">submitted</a> to the <a href="https://marketplace.firefox.com">Firefox Marketplace</a>. Your app's manifest will be validated and you may choose which devices your app will support (i.e. Firefox OS, Desktop Firefox, Firefox Mobile, Firefox Tablet). Once validated you may add additional details about your app (screenshots, descriptions, price, etc.) and officially submit the app for listing within the Marketplace. Once approved your app is available to the world for purchase and installation.</p> + +<h3 id="More_Marketplace_Listing_Information">More Marketplace & Listing Information</h3> + +<ol> + <li><a href="/en-US/docs/Web/Apps/Publishing/Submitting_an_app">Submitting an App to the Firefox OS Marketplace </a></li> + <li><a href="/en-US/docs/Web/Apps/Publishing/Marketplace_review_criteria">Marketplace Review Criteria </a></li> + <li><a href="http://s.vid.ly/embeded.html?link=8k2n4w&autoplay=false">App Submission Video Walkthrough </a></li> +</ol> +</article> diff --git a/files/it/archive/b2g_os/quickstart/per_sviluppatori_web/index.html b/files/it/archive/b2g_os/quickstart/per_sviluppatori_web/index.html new file mode 100644 index 0000000000..521d78d1c5 --- /dev/null +++ b/files/it/archive/b2g_os/quickstart/per_sviluppatori_web/index.html @@ -0,0 +1,52 @@ +--- +title: Sviluppo delle App per Sviluppatori web +slug: Archive/B2G_OS/Quickstart/per_sviluppatori_web +translation_of: Archive/B2G_OS/Quickstart/For_Web_developers +--- +<div class="summary"> + <p>Se sei uno Sviluppatore web e hai un sito o una applicazione web che vuoi trasformare in una app installabile, ci sono <em>tecnicamente</em> poche cose da fare. Questo articolo spiega i requisiti minimi, insieme alle idee da conoscere sulle web app e quanto sono diverse dai siti web comuni.</p> +</div> +<p>I requisiti minimi sono pochi:</p> +<ol> + <li>Creare un <a href="/en-US/docs/Web/Apps/Manifest">app manifest</a>.</li> + <li>Distribuire il file app manifest con l'estensione <code>.webapp</code>. Impostare l'header <code>Content-Type</code> in <code>application/x-web-app-manifest+json</code>.</li> + <li>Pubblicare l'app, sul proprio sito, nell' app store o su entrambi. Pubblicare in proprio richiede <a href="/en-US/docs/Web/Apps/JavaScript_API">l'aggiunta di codice al tuo sito, per gestire l'installazione e l'aggiornamento dell'app</a> nel browser degli utilizzatori.</li> +</ol> +<h2 id="Funzionalità_facoltative">Funzionalità facoltative</h2> +<p><em>Filosoficamente</em>, l'idea di una Open Web App installabile è molto di più che aggiungere semplicemente un file manifest al sito. Le tecnologie degli Standard Web possono essere viste come piattaforme per applicazioni in piena regola che permettono ad un browser di rappresentare le interfacce utente, interpretare il codice e utilizzare i protocolli Web per comunicare con il server.</p> +<p>Mozilla offre eseguibili "<a href="/en-US/docs/Web/Apps/Architecture#Web_runtime">Web runtime</a>" per varie piattaforme in modo che le applicazioni siano in grado di funzionare nella propria finestra senza il contorno di un browser.</p> +<p>Per "appificare" un sito Web ci sono alcune aspetti specifici da considerare:</p> +<ul> + <li>La mia app dovrebbe funzionare senza essere collegati al Web?</li> + <li>Come usa i dati la mia app? Come occorre memorizzarli?</li> + <li>Le performance della mia app possono trarre beneficio dalle funzionalità avanzate come i <a href="/en-US/docs/Web/Guide/Performance/Using_web_workers">Web Workers</a> oppure i <a href="/en-US/docs/WebSockets">WebSockets</a>?</li> + <li>E molte altre domande</li> +</ul> +<p>Se vuoi avvantaggiarti completamente delle capacità offerte alle app installabili, hai cose da fare in abbondanza, ad esempio:</p> +<ul> + <li>Usa <a href="/en-US/docs/Web_Development/Responsive_Web_design">Web design responsive</a> per apparire meglio su tutte le periferiche.</li> + <li>Guadagna denaro con le app.</li> + <li>Fornisci un modo per <a href="/en-US/docs/Web/Apps/Identity_integration">identificare gli utenti</a></li> + <li><a href="/en-US/docs/Web/Apps/Offline_apps">Abilita il caching offline</a> affinché la app sia usabile quando il dispositivo è scollegato da Internet.</li> + <li>Memorizza dati in locale utilizzando <a href="/en-US/docs/IndexedDB">IndexedDB</a> o <a href="/en-US/docs/Web/Guide/DOM/Storage">localStorage</a>.</li> + <li><a href="/en-US/docs/Web/Apps/Platform-specific_details">Avvia l'app</a> nativamente (con una icona sul desktop del pc oppure nella schermata iniziale del dispositivo).</li> + <li>Usa le API del dispositivo per interagire con l'hardware, ad esempio <a href="/en-US/docs/WebAPI/Using_geolocation">geolocalizzazione</a> e <a href="/en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained">orientamento</a>.</li> + <li>Permetti agli utenti di inviarti feedback. Le ricerche di Mozilla sugli utenti sottolineano che loro vogliono dare feedback agli sviluppatori e vogliono che sia un umano a rispondere. Vogliono esprimere suggerimenti ed aiutare a risolvere i problemi. Possono smettere di usare una app se riscontrano problemi che nessuno dà loro una mano a risolvere.</li> +</ul> +<h2 id="Tecnologie_utili">Tecnologie utili</h2> +<p>Ci sono alcune tecnologie web che potrebbero essere utili per scrivere app installabili. Nella lista seguente non c'è nulla ad uso esclusivo delle sole app ma dell'intero Web.</p> +<ul> + <li><a href="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a></li> + <li><a href="/en-US/docs/Web/CSS">CSS</a></li> + <li><a href="/en-US/docs/JavaScript">JavaScript</a></li> + <li><a href="/en-US/docs/HTML/Canvas">Canvas</a></li> + <li><a href="/en-US/docs/AJAX">Ajax</a></li> + <li><a href="/en-US/docs/HTML/Using_the_application_cache">Risorse offline in Firefox</a></li> + <li><a href="/en-US/docs/Web/Guide/DOM/Storage">DOM Storage</a></li> + <li><a href="/en-US/docs/IndexedDB">IndexedDB</a></li> + <li><a href="/en-US/docs/DragDrop/Drag_and_Drop">Drag and drop</a></li> +</ul> +<h2 id="Leggi_anche">Leggi anche</h2> +<ul> + <li><a class="external" href="http://smus.com/mobile-web-app-tech-stack">A mobile web application stack </a></li> +</ul> |