Riassunto della prima delle serate dedicate a Firefox OS tenute dal GL-Como. L'obbiettivo è creare una semplice app per Firefox Os.

Firefox OS è il sistema operativo mobile di Mozilla, basato su HTML5. Le app sono scritte in HTML5/Javascript, come tutta l'interfaccia utente.

Prima di lanciarci nella realizzazione della nostra applicazione, un veloce riassunto delle tecnologie che si useranno. Partiamo dall'HTML.

L'HTML è un file di testo che contiene dei tag che il browser utilizza per strutturare il contenuto.

Un tag è racchiuso tra < e > , comprente un nome e degli attributi opzionali, in forma di nome="valore"
Normalmente un tag racchiude del testo e/o altri tag, e si chiude con </nome>

es: <p></p> rappresenta un paragrafo.

<p>Questo è il testo del paragrafo. E' tutto contenuto nel tag p</p>
<p>Questo è un secondo paragrafo. Per esempio.</p>

Questo è il testo del paragrafo. E' tutto contenuto nel tag p

Questo è un secondo paragrafo. Per esempio.

Alcuni tag non hanno una chiusura, perchè non hanno un contenuto, come il tag <img>, che rappresenta un immagine.
Il tag <img> prevede l'attributo src che indica l'indirizzo dell'immagine da mostrare.

es:

<img src="/wp-content/uploads/2013/06/gimp-logo.png">

La struttura base di un file html è la seguente:

<!DOCTYPE html>
<html>
    <head>
            <!-- All'interno del tag 'head' si trovano 
                 i meta-dati relativi al documento: 
                 titolo, codifica, etc etc  -->
            <!-- Tra l'altro, questo è un commento in HTML  -->
            <title>Titolo del documento</title>
            <meta charset="utf-8">
    </head>
    <body>
            <!-- All'interno del tag 'body' si trova 
                 il vero contenuto del documento  -->
    </body>
</html>

La prima riga (<!DOCTYPE html>) serve a far sapere al browser che la pagina è scritta in HTML5

Ci sono molti tag che possiamo usare per scrivere la nostra pagina.
Quelli che abbiamo visto fin'ora:

  • <h1></h1>, <h2></h2>, ... <h6></h6> : intestazioni (header) dalla più grande alla più piccola. Utili anche per dare una struttura al documento.
  • <p></p> : paragrafo, un blocco di testo.
  • <img src=""> : immagine, con l'indirizzo dell'immagine da caricare
  • <a href=""></a> : link. il contenuto del tag \<a> diventa un link che porterà all'indirizzo specificato nell'attributo href

Un esempio completo:

     <!DOCTYPE html>
     <html>
         <head>
                 <title>Titolo del documento</title>
                 <meta charset="utf-8">
         </head>
         <body>
              <h1>Il nostro bel esempio</h1>
              <p>Questa pagina mostra alcuni esempi di HTML</p>
              <h2>Paragrafo</h2>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quam erat, semper a mollis eu, placerat at lectus. Proin in commodo dolor. Vivamus sed metus in nisi aliquet sodales. Sed vehicula sapien eu massa posuere, id egestas erat dignissim. Donec justo urna, sollicitudin eu neque a, malesuada malesuada quam.</p>
              <p>Quisque nec pellentesque neque. Sed dapibus neque nibh, sit amet aliquet metus sodales a. Aenean cursus enim velit, quis eleifend dolor faucibus a. Phasellus convallis fringilla justo, sit amet consectetur velit dapibus non.</p>
              <p>Aliquam porta elementum metus vel aliquam. Aenean consectetur pulvinar felis quis pretium. Vivamus non justo vitae sapien consectetur vestibulum dapibus eu lectus. Aliquam erat volutpat.</p>

              <h2>Immagini</h2>
              <h3>Indirizzo assoluto</h3>
              <p>Questa è un'immagine con indirizzo assoluto:
                 <img src="https://mozorg.cdn.mozilla.net/media/img/firefox/os/logo/firefox-os.png"></p>
              <h3>Indirizzo relativo</h3>
              <p>Questa è un'immagine con indirizzo relativo:
                 <img src="/wp-content/uploads/2010/10/logo_icon_alpha-150x150.png"></p>

              <h2>Link</h2>
              <p>Di seguito un link a un <a href="https://duckduckgo.com/">motore di ricerca</a> consigliato</p>
              <p>Questo è lo stesso link, ma con un'immagine: <a href="https://duckduckgo.com/"><img src="https://duckduckgo.com/assets/logo_header.v101.hdpi.png"></a></p>

         </body>
     </html>

Date un'occhio all'esempio interattivo

Un tutorial approfondito (in inglese) sull'HTML lo trovate qui, con anche la documentazione dei vari tag e degli attributi possibili.

Come i vari tag vengono visualizzati nel browser dipende dal foglio di stile (CSS), di cui parleremo più avanti.
Tutti i browser impostano un foglio di stile di default che definisce come i vari tag vengono visualizzati se la pagina caricata non ne definisce uno.
Per esempio, è il foglio di stile del browser che dice che <h1> ha il carattere grassetto, di una certa dimensione, e che <h2> ha il carattere più piccolo di <h1>.