Programmare una WebApp per iPhone - Lezione 2 – Creiamo una Top Bar | Corso Sviluppatori iSpazio

In qualità di Affiliato Amazon, iSpazio riceve una commissione dagli acquisti idonei senza alcun costo per voi. (info).

Ecco la seconda lezione del nostro nuovo Corso di Sviluppo a cura di Daniele Campogiani. Impareremo a creare WebApp per iPhone ovvero dei siti internet ottimizzati da visualizzare tramite Safari ed utilizzare come applicazioni o giochi. E’ un corso aperto a tutti gli utenti, sia Windows che Mac.

Advertising

Oggi mettiamo da parte la teoria e vediamo come create una Top Bar, ossia una barra di navigazione che ci servirà per muoverci tra le varie pagine del nostro progetto.

Creiamo un progetto

Essendo la webApp basata su pagine html basta un semplice editor html per creare i file (consiglio Notepad++), ma per fare un po di ordine vi consiglio di organizzare i file in cartelle come spiegato di seguito.

Dopo aver scaricato iWebKit decomprimete l’archivio e create una copia della cartella Framework, poi rinominatela con il nome del vostro progetto.

Dovreste avere la cartella organizzata come nell’immagine sopra. Ora aprite la cartella che avete appena creato e aprite con il vostro editor il file index.html.

I tag che tovete modificare sono i seguenti

<title>Title of your site</title> inseriendo il nome della vostra webapp

<meta content=”keyword1,keyword2,keyword3? name=”keywords” /> dove al posto di keyword1,keyword2,keyword3 dovete inserire le parole chiave per farvi trovare dai motori di ricerca (potete inserirne anche più di tre)

<meta content=”Description of your site” name=”description” /> sostituendo “Description of your site” con una breve descrizione della vostra webapp

Volendo potete anche modificare il footer (la parte in basso di una pagina) rimuovendo il link a iwebkit, ma anche lasciarlo come ringraziamento agli autori di iWebKit non è male, no?

Bene, questa sarà la pagina base, ossia la pagina “stampo” tramite la quale creemo tutte le altre.

Ora chiudere l’editor e ritornate alla cartella “Mio Progetto”, come prima create una copia della pagina index.html e rinominatela in pagina base.html

Chiariamo un po le idee dopo tutti questi copia ed incolla, la pagina index.html è la pagina principale, ossia quella che viene aperta all’avvio della webapp. La pagina pagina base.html è una semplice copia che ci facciamo per semplificarci il lavoro, infatti ogni volta che vorremo aggiungere una pagina al nostro progetto faremo un copia e incolla e un successivo rinomina di pagina base.html evitando così di riscrivere tante righe di codice (se non vi è ancora chiaro lo capirete con l’uso).

Creiamo una Top Bar

Per inserire una top bar il primo passaggio è inserire il seguente codice:

<div id=”topbar”>
<altri tag da inserire>
</div>

Come potete vedere nella pagina index.html è già presente, quindi se non volete una Top Bar dovete rimuovere quel codice.

Così scrittà però è abbastanza inutile, perchè non ha ne freccie di navigazione ne bottoni ne titolo, vediamo come aggiungerli.

Aggiungere un titolo

Per inserire un titolo che verrà visualizzato al centro della Top Bar (sia in landscape che in portrait) ecco il codice da inserire:

<div id=”title”>Title</div>

Freccie di navigazione a sinistra

E’ possibile inserire delle freccie di navigazione per passare da una pagina all’altra, ecco il codice da inserire:

<div id=”leftnav”>
<a href=”pagina 1.html”>Pagina 1 testo</a>
<a href=”pagina 2.html”>Pagina 2 testo</a>
</div>

Potete inserire quanto collegamenti volete, in più volendo potete inserire un collegamento alla home dell’app inserendo questo collegamento:

<a href=”index.html”><img alt=”home” src=”images/home.png”/></a>

Freccie di navigazione a destra

Esattamente tutto come prima, cambia solo la prima riga che diventa:

<div id=”rightnav”>

Pulsati

Per inserire un pulsante nella top bar ecco il codice da inserire, ricordo che vale lo stesso discorso per le barre di navigazione: “leftbutton” indica che il pulsante sarà a sinistra “rightbutton” a destra

<div id=”leftbutton”>
<a href=”pagina.html”>Testo</a>
</div>

Per far capire meglio la differenza tra bottone e freccia vi allego un’immagine:

Il collegamento alla Home sulla sinistra è una freccia di navigazione mentre il collegamento a “website” è un pulsante, inoltre “Ciao Mondo” è il titolo della Top Bar.

Ecco qui il codice della pagina dell’immagine qui sopra:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>
<meta content=”yes” name=”apple-mobile-web-app-capable” />
<meta content=”text/html; charset=iso-8859-1? http-equiv=”Content-Type” />
<meta content=”minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no” name=”viewport” />
<link href=”css/style.css” rel=”stylesheet” type=”text/css” />
<script src=”javascript/functions.js” type=”text/javascript”></script>
<title>Mio Sito</title>
<meta content=”keyword1,keyword2,keyword3? name=”keywords” />
<meta content=”Description of your site” name=”description” />
</head>

<body>

<div id=”topbar”>
<div id=”title”>Ciao Mondo</div>
<div id=”leftnav”>
<a href=”index.html”><img alt=”home” src=”images/home.png”/></a>
</div>
<div id=”rightbutton”>
<a href=”http://www.danielecampogiani.com”>Website</a>
</div>
</div>
<div id=”content”>
</div>
<div id=”footer”>
<!– please keep this line of text for three reasons: to help us, to thank us and just because it is cool–>
<a href=”http://iwebkit.net”>Powered by iWebKit</a></div>

</body>

</html>

Io ho dovuto scrivere soltanto la parte riguardante la Top Bar perchè il resto, avendo fatto una copia della pagina pagina base.html, era già scritto.

La TopBar è stata creata. Appuntamento con il prossimo articolo per imparare un’altra operazione fondamentale nella costruzione di una webapp.

Sai che siamo anche su Telegram? Unisciti al nostro canale iSpazio per ricevere le notifiche oppure Apple Italia per chattare con altri utenti. Scopri i migliori prodotti Tech in sconto su Amazon con il nostro canale OFFERTE iSpazio.