diff --git a/manuscript/back.md b/manuscript/back.md index 9d4e375..b2c41f0 100755 --- a/manuscript/back.md +++ b/manuscript/back.md @@ -9,9 +9,9 @@ * [Sito di Firefox OS][5] * [Pagina dedicata alle WebAPI sul wiki MDN][6] -[1]: http://mozilla.org) -[2]: http://www.mozillaitalia.org +[1]: http://mozilla.org +[2]: http://mozillaitalia.org [3]: http://marketplace.firefox.com/developers [4]: http://developer.mozilla.org/ -[5]: http://www.mozilla.org/it/firefox/os/ -[6]: http://wiki.mozilla.org/WebAPI \ No newline at end of file +[5]: http://mozilla.org/it/firefox/os/ +[6]: http://wiki.mozilla.org/WebAPI diff --git a/manuscript/devtools.md b/manuscript/devtools.md index b576bdd..5cb6e77 100755 --- a/manuscript/devtools.md +++ b/manuscript/devtools.md @@ -57,8 +57,8 @@ In questo capitolo sono stati descritti in maniera sintetica gli strumenti di sv [2]: https://developer.mozilla.org/en-US/docs/Tools "Dev Tools su MDN" [3]: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries "Media Queries su MDN" [4]: http://it.wikipedia.org/wiki/Risoluzione_%28grafica%29 "Risoluzione grafica su Wikipedia" -[5]: http://www.abookapart.com/products/responsive-web-design -[6]: http://www.abookapart.com/products/mobile-first +[5]: http://abookapart.com/products/responsive-web-design +[6]: http://abookapart.com/products/mobile-first [7]: https://developer.mozilla.org/en-US/docs/Web/API/console [8]: https://developer.mozilla.org/en-US/docs/Tools/Style_Editor [9]: https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor diff --git a/manuscript/firstapp.md b/manuscript/firstapp.md old mode 100755 new mode 100644 index ccd72a2..ca82078 --- a/manuscript/firstapp.md +++ b/manuscript/firstapp.md @@ -12,17 +12,17 @@ Dalla parte inferiore dello schermo è possibile cancellare una nota prescelta s ![Memos, finestra di conferma della cancellazione](images/originals/memos-delete-screen.png) -Il codice sorgente di Memos è disponibile nel [Repository su Github](https://github.com/soapdog/memos-for-firefoxos) (è possibile anche scaricarlo come file [.zip](https://github.com/soapdog/memos-for-firefoxos/archive/master.zip)). Consiglio di scaricare i file, così sarà più semplice seguire la guida. Un'altra copia del codice sorgente è disponibile nella cartella **code** della [repository Github di questo libro](https://github.com/soapdog/memos-for-firefoxos). +Il codice sorgente di Memos è disponibile nel [Repository su Github](https://github.com/soapdog/memos-for-firefoxos) (è possibile anche scaricarlo come file [.zip](https://github.com/soapdog/memos-for-firefoxos/archive/master.zip)). Consiglio di scaricare i file, così sarà più semplice seguire la guida. Un'altra copia del codice sorgente è disponibile nella cartella **code** della [repository Github di questo libro](https://github.com/MozillaItalia/firefoxos-quick-guide). -Memos utilizza [IndexedDB](https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB) per salvare le note e il toolkit [*Gaia Building Blocks*](https://developer.mozilla.org/en-US/Apps/Design/Firefox_OS_building_blocks) per creare le interfacce. In un futuro aggiornamento il testo conterrà molte informazioni su *Gaia Building Blocks*, ma in questa prima versione mi limiterò ad utilizzarlo. Per ulteriori informazioni sull'argomento e per sapere quali interfacce vi sono integrate visitare i link appena segnalati. +Memos utilizza [IndexedDB][4] per salvare le note e il toolkit [*Gaia Building Blocks*][5] per creare le interfacce. In un futuro aggiornamento il testo conterrà molte informazioni su *Gaia Building Blocks*, ma in questa prima versione mi limiterò ad utilizzarlo. Per ulteriori informazioni sull'argomento e per sapere quali interfacce vi sono integrate visitare i link appena segnalati. Il primo passaggio è creare una cartella per l'applicazione di nome **memos**. ## Creare il manifesto dell'app -Il file manifesto di Memos è molto semplice. Crea un file chiamato **manifest.webapp** nella cartella **memos**. I manifesti sono dei file in formato [JSON](http://json.org) che descrivono un'applicazione per Firefox OS di cui abbiamo già parlato nel precedente capitolo. +Il file manifesto di Memos è molto semplice. Crea un file chiamato **manifest.webapp** nella cartella **memos**. I manifesti sono dei file in formato [JSON][6] che descrivono un'applicazione per Firefox OS di cui abbiamo già parlato nel precedente capitolo. -Qui di seguito è riportato il contenuto del file manifesto di **Memos**. Fate attenzione con il copia e incolla, perché è molto facile mettere una virgola nel posto sbagliato (o non metterla) e creare un file JSON non valido. Esistono molti strumenti per validare un file JSON, incluso uno specifico per validare i file manifesto delle app, lo puoi trovare online su [il marketplace](https://marketplace.firefox.com/developers/validator). Per ulteriori informazioni su questi file consultare la [pagina su MDN](https://developer.mozilla.org/docs/Apps/Manifest). +Qui di seguito è riportato il contenuto del file manifesto di **Memos**. Fate attenzione con il copia e incolla, perché è molto facile mettere una virgola nel posto sbagliato (o non metterla) e creare un file JSON non valido. Esistono molti strumenti per validare un file JSON, incluso uno specifico per validare i file manifesto delle app, lo puoi trovare online su [il marketplace][7]. Per ulteriori informazioni su questi file consultare la [pagina su MDN][8]. <<[Memos manifest (*manifest.webapp*)](code/memos/manifest.webapp) @@ -39,13 +39,13 @@ Analizziamo i campi di questo file manifesto: La parte più interessante di questo file manifesto è la richiesta per i permessi di *storage* per poter utilizzare IndexedDB senza alcun limite di spazio disco[^storage-permission](con questi permessi possiamo salvare le note che vogliamo - anche se dobbiamo fare attenzione a non usare troppo spazio sul disco dell'utente!). -[^storage-permission]: Per saperne di più su questa autorizzazione leggi [la pagina MDN sui permessi][8]. +[^storage-permission]: Per saperne di più su questa autorizzazione leggi [la pagina MDN sui permessi][9]. Ora che il file manifesto è pronto, passiamo al codice HTML. ## Scriviamo il codice HTML -Prima di iniziare a lavorare sul codice HTML facciamo una breve panoramica su [Gaia Building Blocks][4], una raccolta di codici CSS e JavaScript che rispettano il layout degli elementi d'interfaccia nativi di Firefox OS e che possiamo riutilizzare per creare l'interfaccia della nostra applicazione. +Prima di iniziare a lavorare sul codice HTML facciamo una breve panoramica su [Gaia Building Blocks][5], una raccolta di codici CSS e JavaScript che rispettano il layout degli elementi d'interfaccia nativi di Firefox OS e che possiamo riutilizzare per creare l'interfaccia della nostra applicazione. Come nelle pagine web, non è richiesto l'uso del *look and feel* di Firefox OS nella propria applicazione. Utilizzare o meno *Gaia Building Blocks* è una scelta personale - e le buone applicazioni dovrebbero sapersi distinguere per uno stile e un'esperienza utente proprie. La cosa importante da capire è che un'applicazione non subirà alcun tipo di pregiudizio o penalità su Firefox Marketplace se non utilizza lo stile di Gaia. Personalmente, non essendo un bravo designer, preferisco ricorrere a degli *UI toolkit* già pronti piuttosto che creare uno stile personale per le app. @@ -177,7 +177,7 @@ Entrambi i file devono essere posizionati nella cartella **js** che troviamo acc ### model.js -Utilizzeremo [IndexedDB][3] per salvare le note nel dispositivo. Avendo chiesto i permessi *storage* nel file manifesto possiamo salvare quante note vogliamo - però non dobbiamo abusarne! +Utilizzeremo [IndexedDB][4] per salvare le note nel dispositivo. Avendo chiesto i permessi *storage* nel file manifesto possiamo salvare quante note vogliamo - però non dobbiamo abusarne! Infatti i dispositivi Firefox OS solitamente non hanno molta memoria da dedicare alle app e il loro contenuto (le note nel nostro caso) ed è sempre meglio essere consapevoli di quali dati vengono memorizzati, inoltre gli utenti daranno un voto negativo a un'applicazione se consumerà troppa memoria senza motivo. Memorizzare troppo materiale porta a problemi di prestazioni e l'app risulterà lenta e poco reattiva. Al momento del caricamento su Firefox Marketplace, sarà necessario indicare nel modulo diretto ai revisori il motivo per cui l'app necessita di accesso illimitato alla memoria per il suo funzionamento, se non lo segnalate vi verrà esplicitamente richiesto dai revisori. Nel caso non siate in grado di giustificare tale richiesta, i revisori respingeranno l'app, che quindi non verrà pubblicata sul portale. @@ -299,7 +299,7 @@ function deleteMemo(inId, inCallback) { In questo blocco di codice abbiamo creato un costruttore che produce nuove note con alcuni campi già inizializzati. Dopodiché abbiamo implementato le altre funzioni per la presentazione, il salvataggio e la cancellazione delle note. Molte di queste funzioni richiedono che sia passato un parametro chiamato `inCallback`. Questo parametro è esso stesso una funzione che verrà invocata al termine della funzione chiamante. Questo è necessario per la natura asincrona di IndexedDB. Tutte le callback hanno la medesima struttura di chiamata `callback(error, value)`, con due parametri in ingresso, in cui uno dei due assumerà il valore `null` a seconda del risultato della funzione chiamante. -A> Poiché è un testo per principianti ho scelto di non usare le [*Promises*][9] perché non tutti potrebbero capirle. Consiglio di usare questi concetti per avere un codice più pulito e facile da mantenere. +A> Poiché è un testo per principianti ho scelto di non usare le [*Promises*][10] perché non tutti potrebbero capirle. Consiglio di usare questi concetti per avere un codice più pulito e facile da mantenere. Ora che l'archiviazione delle note e le funzioni di modifica sono state implementate, lavoriamo alla struttura logica dell'applicazione nel file **app.js**. @@ -359,7 +359,7 @@ All'inizio vengono dichiarate alcune variabili globali (bleah :-P!) per mantener Le funzioni `showMemoDetail()` e `displayMemo()` lavorano in coppia. La prima carica la nota selezionata in `currentMemo` e modifica il CSS degli elementi mostrati nella schermata di modifica. La seconda prende il contenuto della variabile `currentMemo` e mostra la nota a schermo. Potremmo mettere il codice nella stessa funzione ma averlo separato permette di divertirci di più con nuove implementazioni. -La funzione `shareMemo()` utilizza una [WebActivity][10] per aprire il programma predefinito per la posta elettronica con il contenuto della nota selezionata. +La funzione `shareMemo()` utilizza una [WebActivity][11] per aprire il programma predefinito per la posta elettronica con il contenuto della nota selezionata. La funzione `textChanged()` prende il contenuto dei campi e lo inserisce nell'oggetto `currentMemo` che salva la nota. Questo perché avremo un'applicazione con auto-salvataggio. Tutte le modifiche al contenuto o al titolo invocheranno la funzione che salverà in IndexedDB. @@ -442,7 +442,7 @@ function refreshMemoList() { } ~~~~~~~~ -La funzione `refreshMemoList()` modifica il [DOM][11] della nostra applicazione aggiornando l'elenco delle note. Sarebbe più facile usare alcuni sistemi di _templating_ come [handlebars](http://handlebarsjs.com/) o [underscore](http://underscorejs.org/) ma quest'applicazione contiene solo *vanilla javascript* quindi faremo tutto a mano. +La funzione `refreshMemoList()` modifica il [DOM][12] della nostra applicazione aggiornando l'elenco delle note. Sarebbe più facile usare alcuni sistemi di _templating_ come [handlebars][14] o [underscore][15] ma quest'applicazione contiene solo *vanilla javascript* quindi faremo tutto a mano. Queste sono le funzioni utilizzate dall'applicazione. Le uniche che mancano sono il gestore eventi e la chiamata iniziale di `refreshMemoList()`. @@ -477,7 +477,7 @@ Prima di avviare l'applicazione nel simulatore è preferibile verificare che tut ![Lista dei file utilizzati da Memos](images/originals/memos-file-list.png) -Se si ha il vago sospetto di aver commesso qualche errore è possibile verificarlo confrontando [il repository memos su github][1] (un'ulteriore copia del codice sorgente è disponibile nella cartella **code** nel [repo del testo][12]). +Se si ha il vago sospetto di aver commesso qualche errore è possibile verificarlo confrontando [il repository memos su github][1] (un'ulteriore copia del codice sorgente è disponibile nella cartella **code** nel [repo del testo][3]). Tutto a posto? Bene, cominciamo. diff --git a/manuscript/images/originals/firefox_os_simulator.png b/manuscript/images/originals/firefox_os_simulator.png index 04b9f31..e1f76d7 100644 Binary files a/manuscript/images/originals/firefox_os_simulator.png and b/manuscript/images/originals/firefox_os_simulator.png differ diff --git a/manuscript/images/originals/memos-app.png b/manuscript/images/originals/memos-app.png index 05d3a1b..616dc0b 100644 Binary files a/manuscript/images/originals/memos-app.png and b/manuscript/images/originals/memos-app.png differ diff --git a/manuscript/images/originals/memos-delete-screen.png b/manuscript/images/originals/memos-delete-screen.png index 928907c..432f200 100644 Binary files a/manuscript/images/originals/memos-delete-screen.png and b/manuscript/images/originals/memos-delete-screen.png differ diff --git a/manuscript/images/originals/memos-editing-screen.png b/manuscript/images/originals/memos-editing-screen.png index a2f635b..41f72ea 100644 Binary files a/manuscript/images/originals/memos-editing-screen.png and b/manuscript/images/originals/memos-editing-screen.png differ diff --git a/manuscript/images/originals/memos-first-run.png b/manuscript/images/originals/memos-first-run.png index bd661e4..932cf4c 100644 Binary files a/manuscript/images/originals/memos-first-run.png and b/manuscript/images/originals/memos-first-run.png differ diff --git a/manuscript/images/originals/memos-main-screen.png b/manuscript/images/originals/memos-main-screen.png index 23d1be0..99f3c97 100644 Binary files a/manuscript/images/originals/memos-main-screen.png and b/manuscript/images/originals/memos-main-screen.png differ diff --git a/manuscript/images/originals/memos-simulator.png b/manuscript/images/originals/memos-simulator.png index 1ad55a0..363099d 100644 Binary files a/manuscript/images/originals/memos-simulator.png and b/manuscript/images/originals/memos-simulator.png differ diff --git a/manuscript/images/originals/pick_image.png b/manuscript/images/originals/pick_image.png index a29a48a..c6f9356 100644 Binary files a/manuscript/images/originals/pick_image.png and b/manuscript/images/originals/pick_image.png differ diff --git a/manuscript/images/originals/screenshot-result.png b/manuscript/images/originals/screenshot-result.png index 70a4ec5..6483970 100644 Binary files a/manuscript/images/originals/screenshot-result.png and b/manuscript/images/originals/screenshot-result.png differ diff --git a/manuscript/marketplace.md b/manuscript/marketplace.md index ae8f8bb..78ce7b3 100755 --- a/manuscript/marketplace.md +++ b/manuscript/marketplace.md @@ -151,4 +151,4 @@ Ora che si è entrati a far parte del gruppo di sviluppatori di app Firefox OS, [11]: mailto:fxosquickguide@andregarzia.com [12]: http://andregarzia.com [13]: https://github.com/MozillaItalia/firefoxos-quick-guide -[14]: http://www.mozilla.org/en-US/contribute/ +[14]: http://mozilla.org/en-US/contribute/ diff --git a/manuscript/other.md b/manuscript/other.md index 09559ef..74df820 100644 --- a/manuscript/other.md +++ b/manuscript/other.md @@ -54,7 +54,7 @@ Attualmente sono disponibili in Brick i seguenti componenti, che potete già uti * [Menu][32] - vi serve un menu? * [Storage-IndexdDB][33] - per conservare informazioni sul dispositivo dell'utente -Per mostrare l'uso di questi componenti, Daniele ha realizzato un boilerplate di nome [Brickly](http://mte90.github.io/Brickly) che potete studiare per prendere confidenza con i Web Components. +Per mostrare l'uso di questi componenti, Daniele ha realizzato un boilerplate di nome [Brickly][37] che potete studiare per prendere confidenza con i Web Components. Non è nell'interesse della guida approfondire questa libreria ma solo pubblicizzare questo materiale già disponibile all'uso. @@ -188,8 +188,8 @@ Se continuerai questo percorso da Web Developer non potrai fare a meno di sporca [18]: http://buildingfirefoxos.com/building-blocks/value-selector.html [19]: http://buildingfirefoxos.com/transitions/app-invokes-app.html [20]: http://buildingfirefoxos.com/downloads/ -[21]: http://www.w3.org/TR/2013/WD-components-intro-20130606/ -[22]: http://www.polymer-project.org/ "Polymer" +[21]: http://w3.org/TR/2013/WD-components-intro-20130606/ +[22]: http://polymer-project.org/ "Polymer" [23]: http://mozbrick.github.io/ "MozBrick" [24]: http://mozbrick.github.io/docs/brick-appbar.html [25]: http://mozbrick.github.io/docs/brick-calendar.html @@ -203,4 +203,5 @@ Se continuerai questo percorso da Web Developer non potrai fare a meno di sporca [33]: http://mozbrick.github.io/docs/brick-storage-indexeddb.html [34]: https://github.com/alexgibson/concierge "Concierge" [35]: http://alxgbsn.co.uk/concierge/ "Concierge Demo" -[36]: https://www.mozilla.org/it/firefox/developer/ "Firefox Developer Edition" +[36]: https://mozilla.org/it/firefox/developer/ "Firefox Developer Edition" +[37]: http://mte90.github.io/Brickly diff --git a/manuscript/setup.md b/manuscript/setup.md index 96c7070..f6dedb4 100755 --- a/manuscript/setup.md +++ b/manuscript/setup.md @@ -65,6 +65,6 @@ Ora che abbiamo configurato l'ambiente di sviluppo, siamo pronti per soffermarci [1]: http://getfirefox.com [2]: https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/ [3]: http://sublimetext.com/ -[4]: http://www.jetbrains.com/webstorm/ +[4]: http://jetbrains.com/webstorm/ [5]: https://developer.mozilla.org/it/Firefox_OS/usare_l_app_Manager [6]: https://ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator/