Eccoci ad un altro appuntamento di Programmare una webApp per iPhone, la lezione di oggi sarà abbastanza impegnativa perchè tratteremo l'argomento più importante: come presentare il nostro contenuto.

Per contenuto intendo la parte centrale dalla nostra pagina, quella compresa tra la top bar ed il footer per intenderci.

Il Contenuto

Innanzitutto il codice di questa sezione va racchiuso tra i seguenti tag:

<div id="content"></div>

e fin qui penso non ci sia nessun problema, ora andiamo a vedere cosa abbiamo a disposizione.

Titoli in Grigio

Il primo elemento che andiamo ad analizzare è questo tag:

<span class="graytitle">Qui il vostro titolo</span>

che semplicemente mostrerà un titolo personalizzato di colore grigio. Io personalmente lo trovo molto utile sopra ad una tabella(che vedremo più avanti). Ecco qui un esempio:

Le scritte "Stadio" e "Trofei" sono state ottenute così.

I Page items

E' l'elemento più importante, e viene utilizzato come "raccoglitore" per inglobare altri elementi più semplici.

Crea infatti un gruppo di elementi che poi gestiamo come vogliamo, il tag è il seguente:

<ul class="pageitem"></ul>

Possiamo avere quanti pageitem vogliamo all'interno della nostra pagina, l'importante è che sia presente almeno uno, ecco un'immagine per far capire ancora meglio cosa intendo:

In quest'immagine ho evidenziato ogni "pageitem" di rosso e li ho numerati, sono quindi presenti 4 "pageitem".

All'interno di ognuno possiamo inserire diversi elementi, vediamo quali sono e le loro caratteristiche.

Textboxes

E' semplicemente un blocco di testo nel quale possiamo scrivere quello che vogliamo, va inserito all'interno di un "pageitem" (come spiegato sopra) per vederlo apparire correttamente.

Il tag per richiamarlo è il seguente:

<li class="textbox"></li>

e all'interno possiamo scrivere del semplice testo inserendo questo codice:

<p>Testo</p>

Oppure del testo in blu come titolo, in questo caso scriveremo:

<span class="header">Titolo</span>

Facciamo un piccolo riassunto:

Vogliamo una pagina con un titolo in grigio, sotto a questo un singolo gruppo di elementi (un solo "pageitem") che all'interno abbia del testo con un titolo (una semplice "textbox"), ecco il codice che andremo a scrivere:

<div id="content">

<span class="graytitle">Titolo Grigio</span>

<ul class="pageitem">

<li class="textbox">

<span class="header">Titolo Blu all'interno della casella di testo</span>

<p>Il vostro testo</p>

</li>

</ul>

</div>

Per oggi è tutto, nella prossima lezione parlerò di menus e liste. Al prossimo Post!

Una sitemap è un file XML  che viene utilizzato dai motori di ricerca per permettere una indicizzazione più intelligente anche i siti dinamici fornendo URL corretti.

Benchè esistano diversi servizi online che permettono di crearne una la soluzione migliore potrebbe essere quella di generarsene una autonomamente, interrogando un database, facendo in modo che la sitemap risulti sempre aggiornata.

Per capire meglio analizziamo prima la struttura di una sitemap statica:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
	<url>
		<loc>http://www.example.com/</loc>
		<lastmod>2005-01-01</lastmod>
		<changefreq>monthly</changefreq>
		<priority>0.8</priority>
	</url>
</urlset>

Per avere una sitemap dinamica, occorre creare una pagina php che interroghi un database, la struttura base sarà la seguente:

<?php
  $query = mysql_query ( "SELECT * FROM tabella ORDER BY id DESC" );
  $row = mysql_fetch_assoc ( $query );
  echo '<?xml version="1.0" encoding="utf-8"?>' . "

  ";
  ?>

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <?php
  ############# BEGIN LOOP ############
  do {

  $link = 'http://www.vostrosito.com/articolo.php?id=' . $row['id'];
  $lastmod = ( $row['date_updated'] ) ? $row['date_updated'] : $row['date_added'];
  $priority = 0.5;
  $changefreq = 'monthly';
  ?>
  <url>
  <loc><?=$link?></loc>
  <lastmod><?=$lastmod?></lastmod>
  <priority><?=$priority?></priority>
  <changefreq><?=$changefreq?></changefreq>
  </url>
  <?php
  } while ( $row = mysql_fetch_assoc ( $query ) );
  ############# END LOOP ############
  ?>
  </urlset>

Qui è stata impostata la priorità di ogni articolo a 0.5 e viene presa come data quella corrispondente all'ultima modifica (se presente). E' stata inoltre impostata a "monthly" la frequenza di aggiornamento.

I dati sopra indicati sono da editare a seconda delle esigenze, ma lo schema logico rimane sempre lo stesso.

E voi vi affidate a qualche buon plugin oppure preferite sperimentare e scrivere del vostro codice?

grazie a : webmasterpoint

Mi sono recentemente trovato nella situazione di dover proteggere con una password una pagina che avevo caricato su di un server, non sapendo bene come iniziare a scrivere codice ho fatto una ricerca e ho trovato un script che fa esattamente quello che volevo.

Questo script è stata la risposta alle mie domande, e l'uso è davvero semplicissimo.

Configurare lo script

Dopo averlo scaricato (qui il link) occorre modificarlo con il vostro editor preferito, cambiando username e password (è possibile anche avere più utenti). Più precisamente ecco il testo da editare:

$LOGIN_INFORMATION = array(

'zubrag' => 'root',

'admin' => 'adminpass'

);

$LOGIN_INFORMATION = array(  'zubrag' => 'root',  'admin' => 'adminpass');

Ora salvate e caricate sul vostro server questa pagina.

Proteggere la pagina

Recatevi all'indirizzo dove avere caricato la pagina precedente e richiamatela in modalità help, un esempio per chiarire:

http://www.miosito.com/password_protect.php?help

Vi verrà mostrata a schermo una scritta simile a questa:

<?php include("/home/users/htdocs/security/password_protect.php"); ?>

Copiatela e inseritela come PRIMA riga della pagina che volete proteggere.

Se ora proverete ad accedere alla pagina che volevate proteggere ecco il risultato:

Eccoci con un nuovo appuntamento dei tutorial per programmare una webApp per iPhone, prima di iniziare ecco alcune comunicazioni importanti.

E' uscita una nuova versione di iWebKit, precisamente la 5.0 per cui vi invito a scaricare la nuova versione che ha alcune migliorie e velocizza il caricamento delle pagine.

Non preoccupatevi per le pagine che avete già scritto, non perderete nulla, dovete solo sovrascivere le cartelle css, images, javascript, pics e thumbs, lasciando invece le pagine precedentemente create.

Se invece partite da zero e non avete ancora scritto nessuna pagine, il procedimento per creare il vostro progetto rimane lo stesso, e lo potete trovare qui.

Bene, incominciamo con la lezione di oggi parlando di Trio e Duo buttons.

Per favi capire megli vi allego subito due immagini per farvi capire meglio di cosa sto parlando:

Esistono diversi tipo di queste barre di selezione, innanzitutto si può segliere se avere 2 o 3 bottoni, ed inoltre se avrle a livello della top bar (come le immagini qui sopra) oppure più in sotto (come vedrete più avanti).

Bottoni a livello della Top Bar

Vediamo il codice per queste barre di selezioni qui sopra, per la prima (quella con due pulsanti) il codice da inserire è il seguente:

<div id="duoselectionbuttons"><a href="collegamento A">Testo A</a><a href="collegamento B">Testo B</a></div>

Mentre per la barra con tre pulsanti ecco il codice:

<div id="triselectionbuttons"><a href="collegamento A">Testo A</a><a href="collegamento B">Testo B</a><a href="collegamento C">Testo C</a></div>

IMPORTANTE entrambi questi codici vanno inseriti all'interno del <div> riferito alla topbar, avendo come risultato quindi qualcosa del genere (mi riferisco a 2 pulsanti, ma è analogo anche per 3 pulsanti):

<div id="topbar">

<div id="triselectionbuttons"><a href="A.html">AText</a><a href="B.

html">BText</a><a href="C.html">CText</a></div>

</div>

Pulsanti sotto una Top Bar

E' possibile anche inserire queste barre sotto una top Bar precedentemente creata avendo un risultato simile a questo:

Questa volta il codice da inserire NON va messo allinterno del <div> riferito all top bar, ma immediatamente sotto, per avere 2 pulsati ecco il codice:

<div id="duobutton"><div><a href="A.html">Text</a><a href="B.
html">Text</a></div></div>

e analogamente per 3 pulsanti:

<div id="tributton"><div><a href="A.html">AText</a><a href="B.
html">BText</a><a href="C.html">CText</a></div></div>

potete trovare alcune pagine di esempio qui.

Selezionare una voce

E' inoltre possibile selezionare una voce, come le immagini sottostanti, per far visualizzare all'utente in che pagina si trova, il codice da inserire è il seguente:

id="pressed"

e va inserito come segue:

<div id="triselectionbuttons"><a id="pressed" href="A.html">AText</a><a
href="B.html">BText</a><a href="C.html">CText</a></div>

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!

Eccoci al secondo appuntamento con la rubrica "Programmare una webApp per iPhone"! Oggi ripasseremo un po di html che ci servirà nelle lezioni successive.

Ogni file html ha diversi tag, vediamo quali sono i principali e che funzione hanno.

Head

<html>
<head>
<title>Titolo della pagina</title>
</head>

Dove vengono specificate le caratteristiche speciale della pagina.

Body

Il body è il la parte della pagina che conterrà tutto quello che vogliamo visualizzare, come immagini, testi, collegamenti e quant'altro.

Una pagina web ha quindi tipicamente questa struttura:

<html>
<head>
<title>Titolo della pagina</title>
</head>
<body>
Contenuto
</body>
</html>

Grassetto e Corsivo

Pre rendere un testo in grassetto è sufficiente includerlo tra il seguente tag:

<b>Text</b>

Mentre per renderlo in corsivo occorre usare quest'alto tag:

<i>Text</i>

Creare un link

Come capirete meglio nelle prossime guide ogni progetto è fatto da diverse pagine, per creare un collegamento ad una pagina si usa il seguente tag:

<a href="nomepagina.html">Testo/Immagine</a>

Inserire Immagini

Per inserire un'immagine in una pagina web ecco il codice che viene utilizzato

<img src="nomeimmagine.jpg" alt="Descrizione immagine" />

Andare a capo

Può capitare che si ha la necessità di andare a capo in un testo abbastanza lungo e il tag che viene utilizzato è

<br/>

Per esempio: "Voglio andare a <br/> capo" risulterà essere

Voglio andare a

capo

Centrare gli oggetti

Per centrare gli oggetti (testo/immagini...) basta inserire l'oggetto tra questo tag:

<p style="text-align:center">OGGETTO</p>

per capire meglio, il codice soprà corrisponde a

OGGETTO

Commenti

I commenti sono dei testi che verranno completamente ignorati dal browser ma che risultano utili ai programmatori in quanto permettono di appuntarsi qualcosa, oppure per spiegare cosa fa un determinato pezzo di codice

<!-----Questo è un commento----->

Facciamo un po di chiarezza: questa è la sintassi dell'html in generale, quindi tutti i siti web utilizzano questi tag.

Nelle prossime lezioni scriveremo del codice proprio per iPhone e vedremo come sia possibile creare menù, tabelle ed altro.

Questo articolo potrebbe risultare noioso e senza nulla di "pratico" ma vi assicuro che in futuro lo troverete davvero utile ogni qual volta che avrete un dubbio del tipo: "qual'è il tag che devo utilizzare qui?" vi basterà leggere questo post per trovare una risposta.

Innauguro con questo articolo una serie di guide che hanno come obiettivo finale la realizzazione di una semplice webApp.

Perchè una webApp?

Quando iniziai a "smanettare" con il mio iPod Touch, cercai online guide sulla programmazione per iPhone, e mi trovai spiazzato, non avevo mai studiato programmazione ad oggetti, e non possedevo un Mac, entrambi requisiti necessari per programmare per iPhone.

Così pensai ad uno stratagemma per riuscire lo stesso nel mio intento: creare una webApp.

I frutti del mio studio e della mia curiosità hanno poi preso forma e nome: DCmC, applicazione presente su cydia  e hostata da iSpazio.

Tutta l'applicazione è infatti scritta in html e php, quindi ho potuto svolgere tutto il lavoro, senza dover imparare l'objective C e senza possedere un Mac.

Quindi riassumendo perchè una webApp?

• Possibilità di usare Windows
• Nessuna conoscenza della programmazione ad oggetti richiesta
• Unico requisito è la conoscenza base dell'html (e per applicazioni più complesse del php)

Ma ecco anche qualche aspetto negativo:

• Non è possibile interagire con l'hardware (quindi accelerometro e simili)

Tutte queste guide utilizzeranno iWebKit, uno stumento che rende semplicissimo programmare webApp per iPhone.

Tutto quello che dovrete scrivere sono solo rige di codice html.

Quindi come primo passo scaricate l'ultima versione di iWebKit (al momento è la 4.6.2) e salvatela nel vostro computer.

Dalla prossima guida scriveremo le prime righe di codice, intanto che ne pensate di questo nuovo progetto sul mio blog?

Quando ci si sposta capita di dimenticare qualcosa, succede nella vita e succede nei Blog.

Ma per cercare di limitare i danni ecco qualche semplice passaggio che ho effettuato io e che mi sento di consigliarti.

Preciso che questa procedura è per Wordpress, ma la anche se utilizzi piattaforme diverse ti consiglio comunque la lettura per trovare qualche spunto per risolvere anche la tua situazione.

Innanzitutto accedi alla bacheca del tuo vecchio blog, e da Strumenti scegli la voce Esporta.

Ora devi scegliere che autore esportare, e poi selezionare Scarica file di Esportazione.

Verrà generato un file .xml, salvalo sul tuo PC.

Ora lasciamo per un attimo da parte il vecchio blog e recati in quello nuovo.

Dopo aver effettuato l'accesso recati in Strumenti e seleziona Importa.

Come vedi hai la possibilità di importare materiale anche da altre piattaforme, ma la voce che ci interessa è Wordpress, cliccaci.

Carica il file .xml precedentemente salvato e selziona Importa.

Nella prossima schermata di verrà chiesto di gestire gli autori, puoi per esempio sovrascrivere un autore esistente (admin) con uno degli autori importati.

Se vuoi che negli articoli del nuovo blog sia presenti le immagini allegate è NECESSARIO selezionare anche "Scarica ed importa gli allegati".

Date l'ok ed aspettate qualche minuto.

Bene, un ultimo passaggio ed avrai finito.

Ragionando ora sul nuovo blog ha tutti gli articoli, i commenti e le pagine, ma non manca qualcosa?

Magari le visite?

Si, perchè se il tuo precedente blog magari era ben indicizzato da Google, il blog nuovo faticherà un pò all'inizio a comparire nei risultati di Google, quindi come risolvere?

Riprendi in mano la bacheca del vecchio blog, e da Aspetto seleziona Editor.

Nella pagina single.php inserisci il seguente codice:

1
2
3
4
5
6
7
8
9
10

<script type="text/javascript">
<!--
function doRedirect() { //funzione con il link alla pagina che si desidera raggiungere
location.href = "http://www.nuovoblog.com/?p=<?php the_id(); ?>";
}
window.setTimeout("doRedirect()", 1000); //Fa partire il redirect dopo tot. secondi
//-->
</script>
 
<h1>STAI PER ESSERE REINDIRIZZATO ALL'ARTICOLO PRESENTE SUL MIO NUOVO SITO, SE IL REDIRECT NON DOVESSE FUNZIONARE CLICCA <a href="http://www.nuovosito.com/?p=<?php the_id(); ?>"title="Versione Aggiornata di <?php the_title(); ?>">QUI</a></h1>

Tra il titolo "the_title()" e il testo dell'articolo "the_content()"

Il cdice ha la funzione di mostrare un messaggio ai visitatori che hai cambiato indirizzo del blog e dopo 1 secondo li reindirizzerà allo stesso articolo presente sul nuovo blog.

Che ne pensate?
Voi avete altre soluzioni?

E' diverso tempo che non mi trovo davanti a queste pagine per scrivere qualcosa di interessante, ma questa sera ho fatto una riflessione che vorrei condividere con voi.

Innanzitutto mi scuso per l'assenza (ma probabilmete presto capirete perchè ultimamente ho meno tempo per scrivere articoli), ma cominciamo subito.

Tutti sapete cos'è un file .IPA immagino, ma per chi non lo sappia ancora questi sono file che permettono di installare applicazioni dell'AppStore crackate.

Niente di particolare, esiste da anni la pirateria, canzoni, programmi per PC, programmi per Mac fino ai dispositivi portatili.

Ma le ipa sono qualcosa di pazzesco, un'applicazione si cracka in pochi minuti e si installa in ancora meno tempo!

Naturalmente ciò è fattibile solo per chi possiede un dispositivo con Jailbreak, ma orami buona parte degli utenti che lo effettuano lo fanno proprio per poter installare appicazioni carckate.

Ma come funziona la crack delle applicazioni?

Viene rimosso il signature dal ipa e poi nel file info.plist viene scritto signeridentity = native application. Infatti un'applicazione senza signerIdentity non potrebbe essere eseguita e quindi viene fatta passare come applicazione nativa (tipo Messaggi o Calendario per intenderci).

Un programmatore quindi riesce a capire se l'applicazione è stata crackata o meno (l'ho fatta molto semplice, in realtà è un pò poù complicata ma i passaggi logici sono questi).

Quindi se l'applicazione è stata crackata necessariamente l'iPhone è Jailbroken.

Ma cosa si può fare con un iPhone jailbroken? Praticamente Tutto!

Quindi dopo aver verificato se l'app è stata crackata il programmatore puo eseguire un metodo che danneggi l'iPhone incriminato, potrebbe semplicemente spegnerlo, cancellare un file, copiare la rubrica, le mail e tutto quello che vuole.

Unico ostacolo potrebbe essere l'AppStore, (e qui vado a deduzioni perchè non so benissimo come funzioni).

La apple comunque non ha il codice sorgente, può solo eseguire l'app, quindi non dovrebbe accorgersi di questi metodi "vendicatori" e approvare l'applicazione.

Cosa ne pensate?

P.S. ho scritto tutto di getto, quindi se c'è qualche errore tecnico vi prego di segnalarmelo nei commenti.

EasyPHP è una piattaforma di sviluppo grazie alla quale è possibile eseguire script php senza connettersi ad un server esterno.

L'installazione è facilissima ed avviene grazie ad un eseguibile per Windows scaricabile gratuitamente dalla pagina di download del sito che installerà nel vostro PC:

• PHP 5.3.0
• Apache 2.2.13
• MySQL 5.1.37
• PhpMyAdmin 3.2.1

Praticamente tutto quello che serve nella realizzazione di un sito web, e tutto installabile in un solo click.

Io l'ho usato per poter installare Wordpress in locale per fare qualche test, ma gli utilizzi sono innumerevoli.

Buon Code!

Come vi avevo promesso, eccovi qui la seconda (di tre) parte del corso di programmazione per iPhone tenuto dal MittAPP (vi ricordo che il corso è in lingua inglese)