Programmare una webApp per iPhone #2 – Top Bar
Benvenuti al terzo appuntamento di Programmare una webApp per iPhone, per 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 frecce 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>
Frecce di navigazione a sinistra
E' possibile inserire delle frecce 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>
Frecce 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 solo dovuto scrivere la parte riguardante alla Top Bar perchè il resto avendo fatto una copia della pagina pagina base.html era già scritto.
Appuntamento al prossimo articolo!
Continua a leggere
|
|
|
|
|
Conosciamoci
Sono Daniele Campogiani, giovane studente presso la facoltà di Ingegneria Informatica, Blogger e Programmatore... (continua)
Articoli Migliori
- Installare le applicazioni dell'AppStore GRATIS su... - 15.216 visite
- Come crackare una rete wireless con Alice WGate Pl... - 12.740 visite
- Guida passo passo per installare Mac Os X Leopard ... - 11.915 visite
- Aumentare la RAM del PC grazie ad una penna USB - 6.021 visite
- Nasce DCmC Social Streaming, lo streaming multipia... - 4.514 visite
Newsletter
Ultimi Articoli
- Facebook, YourOpenBook e tivedo.com
- Ciao Tony
- Crea il tuo sito mobile con Libero Tutti
- Cosa ho imparato da un anno di Ingegneria Informatica
- Come e perche’ secondo me dovresti iniziare ad utilizzare Twitter
Social
Tag Cloud
Passano di qui
Categorie
- Addon
- apple
- blog
- Browers
- cellulari
- Comunicazioni
- contest
- curiosità
- DCampogiani TV
- DCmC
- Gadget
- Giochi Online
- Guide
- hack
- iPhone/iTouch
- JackSMS
- nokia
- p2p
- Programmare una webApp per iPhone
- Programmazione
- Riflessioni
- Senza categoria
- Servizi Internet
- Sistemi Operativi
- social network
- trick
- Truffe
- Video Divertenti
- wordpress
Siti Amici
- Alessandro Zanin
- Blog Posh
- Bubi Devs
- Davide Fresilli
- devApp
- Giovanni Dini
- Michele Papaleo
- Re del web
febbraio 11th, 2010 - 11:33
Ecco la mia prima paginetta:
http://dipoprove.netsons.org/iphone/
Grazie Daniele…
dipo
febbraio 11th, 2010 - 11:39
dipo.fabio ha scritto:
Ottimo!
febbraio 11th, 2010 - 12:20
Daniele, perchè quello che metto dopo il
non mi appare in fondo alla pagina, ma subito sotto alla topbar???
Vabbè che la pagina è vuota, ma il tuo screen è corretto…
febbraio 12th, 2010 - 17:50
Complimenti, bel corso
febbraio 12th, 2010 - 18:45
GabCon ha scritto:
grazie mille!