diploD » iphone http://www.diplod.it by Davide Del Monte Fri, 13 Feb 2015 14:26:10 +0000 it-IT hourly 1 https://wordpress.org/?v=3.9.40 Un esempio di applicazione ajax ottimizzata per dispositivi mobili: xml e javascript. http://www.diplod.it/2010/04/22/un-esempio-di-applicazione-ajax-ottimizzata-per-dispositivi-mobili-xml-e-javascript/ http://www.diplod.it/2010/04/22/un-esempio-di-applicazione-ajax-ottimizzata-per-dispositivi-mobili-xml-e-javascript/#comments Thu, 22 Apr 2010 17:43:48 +0000 http://www.diplod.it/?p=1066 Ajax è sempre cool, se poi lo affianchi a iPhone & Co. è ancora più cool. Perchè non vedere un esempio di applicazione web fruibile da cellulare che va a interrogare i dati contenuti in un file xml? Pensiamo ai webservices, ormai l’xml è un po’ ovunque. Dobbiamo solo sfruttarlo.

Alcune utili consigli per chi sviluppa applicazioni ajax destinate ad essere fruibili attraverso dispositivi mobili:

  • Blackberry: il browser deve essere abilitato per usare javascript. Inoltre, se si fa largo uso dello script lato client, è bene evitare di spuntare tra le opzioni il flag “Termina script in esecuzione lenti”, un semplice Bubble Sort lo manderebbe in tilt.
  • Nokia (symbian): nel browser standard il metodo open(“GET”,”xml/test2.xml”,true) funziona solo in modalità asincrona, ovvero con l’ultimo parametro settato a true; scaricando il browser Opera Mini invece non ci sono problemi in entrambi i casi: sincrono/asincrono.
  • iPhone: che dire.. finora nessun problem riscontrato: browser e processore appartengono a una categoria superiore.

Purtroppo non ho ancora avuto modo di fare test su dispositivi con Android..

Ma veniamo al dunque.. Tutto prende il via dagli esempi sul sito W3C, utilissimi per fare pratica.

L’obiettivo è realizzare una applicazione che va a interrogare un file xml, riportante i dati di produzione (magari estratti direttamente dal gestionale aziendale), visualizzandoli in maniera ottimizzata per schermi di modeste dimensioni.

L’esempio con il risultato finale è visibile qui.

Questa è la struttura dela file XML:
<?xml version="1.0" encoding="UTF-8"?>
<db>
<item>
<period>04.2010</period> <!-- Periodo: mese o giorno -->
<logunit id="0010">Italy Milan</logunit> <!-- Divisione di produzione-->
<delivered matcode="000123">268</delivered> <!-- Quantita' spedita -->
<finished matcode="100123">265</finished> <!-- Quantita' versata -->
<description>Product One</description> <!-- Descrizione codice materiale  -->
<update>15.04.2010 - 16:43</update> <!-- Ultimo aggiornamento -->
</item>
</db>

Supponiamo di voler offrire all’utente un menù per selezionare la divisione logistica su cui fare l’analisi e filtrare così i dati relativi alla singola divisione raggruppati in righe in base agli intervalli temporali, cliccando sulla singola riga è poi possibile vedere il dettaglio.

Ecco il codice della pagina web, con il suo javascript:
<html>
<head>
<title>Mobile Web Access</title>
<script type="text/javascript">
var xmlDoc;
var x; //array dove memorizzo la risposta xml
//inizio chiamata
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
if (xhttp.overrideMimeType) {
xhttp.overrideMimeType('text/xml');
}
}
else // Internet Explorer 5/6
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.onreadystatechange = alertContents; //gestione eventuali errori
xhttp.open("GET","xml/test2.xml",true); //chiamata asincrona
xhttp.send("");
// Questo metodo viene eseguito in modo asincrono quando arriva la risposta dal server
function alertContents() {
if (xhttp.readyState == 4) {
if (xhttp.status == 200) {
processResponse(); //gestione risposta
}
else {
document.write('<small>There was a problem with the request, sorry. Try later or contact your system administrator..</small>');
}
}
}
function processResponse() {
xmlDoc=xhttp.responseXML;
x=xmlDoc.getElementsByTagName("item");
}
//mostra i dati nel div in alto
function show(i) {
logunit=(x[i].getElementsByTagName("logunit")[0].childNodes[0].nodeValue);
logunitID=(x[i].getElementsByTagName("logunit")[0].getAttribute("id"));
period=(x[i].getElementsByTagName("period")[0].childNodes[0].nodeValue);
description=(x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue);
delivered=(x[i].getElementsByTagName("delivered")[0].childNodes[0].nodeValue);
deliveredCode=(x[i].getElementsByTagName("delivered")[0].getAttribute("code"));
finished=(x[i].getElementsByTagName("finished")[0].childNodes[0].nodeValue);
finishedCode=(x[i].getElementsByTagName("finished")[0].getAttribute("code"));
update=(x[i].getElementsByTagName("update")[0].childNodes[0].nodeValue);
txt="<strong>Logistic Unit</strong>: "+logunitID+" - "+logunit+"<br /><strong>Period</strong>: "+period+"<br /><strong>Description</strong>: "+description+"<br /><img style='float:left; margin-right: 2px;' src='icon.png' alt='icon'/><strong>Delivered</strong>: "+delivered+"<br /><strong>Finished</strong>: "+finished+"<br /><div style='border: 1px dotted #fff; padding: 2px; background: #f9f9f9; color: #666;'><small><em>Last update: "+update+"</em></small><br/><small><a href='#item"+i+"'>Go Down To List..</a> | <a href='#show' onclick='show(" + (i-1) + ")'>Prev..</a> | <a href='#show' onclick='show(" + (i+1) + ")'>Next..</a></small></div>"  ;
document.getElementById("show").innerHTML=txt;
}
//crea tabella coi record relativi alla singola divisione
function createTable(t) {
document.getElementById("show").innerHTML="<em>"+t+": click on a table row to display the full production information.</em>";
txt="<table style='border: 2px solid #ccc; width: 100%;'>";
altStyle=0;
for (var i=0;i<x.length;i++)
{
if (x[i].getElementsByTagName("logunit")[0].getAttribute("id")==t) {
altStyle++;
if (altStyle % 2 == 0) { txt=txt+"<tr style='background: #e3efff;' onclick='show(" + i + ")'>"; }
else { txt=txt+"<tr style='border-bottom: 1px dotted #ccc;' onclick='show(" + i + ")'>"; }
txt=txt+"<td id='item"+i+"'><img src='cal.png' alt='ico'/><a href='#show'>";
txt=txt+(x[i].getElementsByTagName("period")[0].childNodes[0].nodeValue);
txt=txt+"</a></td><td><img src='car.png' alt='ico'/><a href='#show'>";
txt=txt+(x[i].getElementsByTagName("description")[0].childNodes[0].nodeValue);
txt=txt+"</a></td></tr>";
}
}
txt=txt+"</table>";
document.getElementById("table-content").innerHTML=txt;
}
</script>
</head>
<body>
<img src='mobile-logo.gif' alt='logo' /><br/>
<div id='show' style='background: #e3efff; padding: 3px; margin: 3px 0; border: 2px solid #ccc;'><em>Select Logistic Unit then click on a table row to display the full production information.</em></div>
<!--Per aggiungere una divisione, modificare questo menu -->
<img src='industry.png' alt='ico'/><a href='#show' onclick='createTable("0010")'>Italy Milan</a> | <img src='industry.png' alt='ico'/><a href='#show' onclick='createTable("0020")'>Italy Rome</a> | <img src='industry.png' alt='ico'/><a href='#show' onclick='createTable("0030")'>USA</a> | <img src='industry.png' alt='ico'/><a href='#show' onclick='createTable("0040")'>Germany</a> | <img src='industry.png' alt='ico'/><a href='#show' onclick='createTable("0050")'>China</a> | <img src='industry.png' alt='ico'/><a href='#show' onclick='createTable("0060")'>Brasil</a>
<!-- fine menu selezione divisione -->
<div id='table-content'></div>
</body>
</html>

Il codice è interamente commentato, e più che descriverlo a parole vale la pena scorrerlo e leggere i commenti. Se vuoi scaricare l’esempio completo, con sorgenti e immagini: ecco lo zip.

La scelta di incorporare css e javascript all’interno della stessa singola pagina è voluta, per ottimizzare il caricamento da parte di dispositivi mobili. Certo questa è solo una base di partenza, dalla quale si potrebbero sviluppare altre funzionalità: l’esigenza di avere dati disponibili anche su dispositivi mobili è sempre più sentita; è inevitabile che in futuro si debba far fronte a queste richieste.
In fondo è pure divertente!

]]> http://www.diplod.it/2010/04/22/un-esempio-di-applicazione-ajax-ottimizzata-per-dispositivi-mobili-xml-e-javascript/feed/ 5 Ottimizzare wordpress per iPhone, Nokia e PDA http://www.diplod.it/2009/01/23/ottimizzare-wordpress-per-iphone-nokia-e-pda/ http://www.diplod.it/2009/01/23/ottimizzare-wordpress-per-iphone-nokia-e-pda/#comments Fri, 23 Jan 2009 00:35:03 +0000 http://www.diplod.it/?p=726 I dati di Google Analytics parlano chiaro, sempre più spesso si ricevono visite da dispositivi mobili: iPhone e PDA stanno diventando uno strumento di navigazione, ma l’utente torna solo se trova qualcosa di effettivamente navigabile. Un sito web in grado di riconoscere i dispositivi con schermo piccolo è in grado di catturare anche quei navigatori d’avanguarda (passatemi il termine) e fornire a loro una versione ottimizzata del layout.

Il browser, e di conseguenza il dispositivo, con cui l’utente fa accesso a un sito web è riconoscibile attravero lo User Agent.

Oltre ai browser, gli user agent del web possono essere i crawler dei motori di ricerca, i telefoni cellulari, i lettori di schermo ed i browser braille usati da persone non vedenti.
Quando gli utenti di Internet visitano un sito web, una stringa di testo è solitamente inviata per fare identificare al server lo user agent. Questo fa parte della richiesta HTTP, con prefisso “User-agent:” o “User-Agent:” e tipicamente include informazioni come il nome dell’applicazione client, la versione, il sistema operativo e la lingua. I bot spesso includono anche l’indirizzo web e la mail del proprietario, in modo tale che l’amministratore del sito possa contattarlo.
La stringa dell’user-agent è uno dei criteri per i quali alcuni bot possono essere esclusi da alcune pagine usando il file robots.txt. Questo permette ai webmaster, che ritengono che alcune parti del loro sito (o tutto il sito) non debba essere incluso nei dati raccolti da un particolare bot o che quel particolare bot stia usando troppa banda, di bloccare l’accesso alle pagine. [wikipedia]

E’ arrivato dunque il momento di pensare al design del blog, fondamentalmente ci sono due modi per scremare opportunamente gli utenti che accedono al sito web: tramite il file .htaccess o tramite php. Noi ci concentreremo sulla seconda soluzione.

Esistono due interessanti plugin per formattare un blog in versione mobile:

  1. WP-PDA: riconosce in automatico un sacco di user agent relativi a dispositivi mobili windows mobile, playstation portatile, cellulari, ecc..), è possibile aggiungerne altri tramite il pannello di amministrazione. Per l’iPhone carica un tema particolare, concepito appositamente secondo il design apple. Nelle immagini sottostanti potete vedere la versione di questo blog vista rispettivamente su iPhone e su un browser Nokia.
    diploD visto con iPhone diploD visto da Nokia N79
  2. WP Touch: è ottimizzato per formattare le pagine quando vi si accede con l’iPhone. Il design è delizioso, ma il grosso limite è che riconosce sono lo user agent dell’iPhone e non quelli degli altri dispositivi mobili. Nell’immagine sottostante la versione di un mio blog di test.
    diploD Lab visto con iPhone

Il principio di funzionamento è uguale per entrambi i plugin: in base allo user agent viene caricato un tema apposito. Il tema è in tutto e per tutto uguale agli altri temi wordpress, utilizza gli stessi file php, ma viene semplificato il layout: meno div, meno classi css, meno fronzoli..
Nei prossimi giorni ho intenzione di rilasciare qualche tema gratuito appositamente pensato per i dispositivi mobili, da caricare nelle relative cartelle dei plugin per personalizzare ulteriormente il proprio sito.

Per testare la visualizzazione sui diversi dispositivi, senza possederli (daltronde costano davvero caro..), esiste una comodissima estensione di firefox che cambia a piacimento gli user agent: User Agent Switcher.

Per chi volesse divertirsi a fare tesi, qui c’è una esaustiva lista di user agent string, per estendere la lista di quelli disponibili nell’estensione di firefox.
E’ arrivato il momento di concentrarsi anche su questi aggeggini, via con le customizzazioni.

]]> http://www.diplod.it/2009/01/23/ottimizzare-wordpress-per-iphone-nokia-e-pda/feed/ 8 N Series: dove vuole arrivare Nokia? http://www.diplod.it/2008/12/24/n-series-dove-vuole-arrivare-nokia/ http://www.diplod.it/2008/12/24/n-series-dove-vuole-arrivare-nokia/#comments Wed, 24 Dec 2008 16:10:27 +0000 http://www.diplod.it/?p=717 [foto Flickr]

Ho da poco acquistato un Nokia N79, volevo togliermi una voglia e l’ho fatto. Così nello stesso dispositivo mi sono trovato con un navigatore, una fotocamera in grado di geolocalizzare le immagini scattate e un sacco di altri applicazioni. Il salto rispetto ai telefoni di qualche anno fa è immenso, con tre o quattrocento euro ti porti a casa un aggeggino che ha molte più cose dell’iphone, touchscreen a parte.

Il navigatore e la connettività GPS sono a mio avviso il pezzo forte, avere mappe navigabili con relativi POI è di grande aiuto. POI è una sigla che sta per Point Of Interest, si può decidere che cosa far apparire sulle mappe: dai distributori di carburante ai centri commerciali, dai monumenti ai luoghi di interesse turistico. Le mappe si scaricano prima sul proprio telefono connettendolo al PC via usb, tramite il software Nokia Map Loader. Tutto questo evita di tenere attiva un’esosa connessione che impiega banda e risorse per poter navigare le mappe, i costi delle connessioni GPRS o UMTS degli operatori italiani sono ancora piuttosto elevati. Le mappe sono gratuite, mentre i servizi di navigazione vocale sono a pagamento. E’ una scelta che non condivido, ma è tutto sommato capibile visto gli ingenti investimenti di nokia nel settore.

La casa finlandese sta spingendo molto sui suoi dispositivi multimediali (la famosa serie N) e con OVI, la piattaforma sociale on-line, ha dato il via a quella sana commistione tra web 2.0 e mondo mobile. Basti pensare alle mappe che ora sono sbarcate sul portale: maps su Ovi è un servizio gratuito che permette alle persone di pre-programmare il viaggio stando a casa al proprio PC e successivamente sincronizzarlo con il cellulare, definendo prima di partire le rotte e le destinazioni preferite. Le persone possono condividere la loro posizione e tutti i luoghi socialmente significativi con amici, invitandoli a scambiare opinioni. Altri esempi sono il perfetto supporto di servizi email come Gmail, Hotmail, Yahoo sui dispositivi della serie N; senza contare il fatto che lo stesso OVI offre servizi di email e calendario on-line.

L’emergere di software come Fring poi aprono la strada a tanti affascinanti scenari: Fring è una applicazione java per cellulari che apre l’accesso a Skype®, MSN® Messenger, Google Talk™, ICQ, SIP, Twitter, Yahoo!™ e AIM® direttamente sul proprio telefonino.

Per chi come me viene catapultato nel mondo dei cellulari evoluti il sito dedicato alla N series è un pozzo di scoperte: Widget, web radio, internet e splendide cose come viNe. Se volete mettere un po’ di acquolina in bocca vi consiglio di farci un salto.

Dopo aver giocato qualche giorno con questo aggeggino la domanda sorge spontanea: dove vuole arrivare Nokia e a cosa sta puntando?
Sebbene ultimamente abbia stimato al ribasso le previsioni di mercato, l’unico modo per restare a galla nel settore della telefonia mobile sembra essere quello di offrire servizi software integrati col personal computer. Non solo hardware di qualità quindi, ma anche e soprattutto software e servizi: mappe, sharing on-line, messaggistica, organizer. Apple e il suo iPhone hanno aperto la strada, ma Nokia non è rimasta di certo a guardare. Dopo aver toccato con mano questi servizi, mi sento di affermare che la differenza tra i due mondi è molta e la bilancia pende tutta a favore di Nokia. Apple è incredibilmente brava nel marketing, ma un dispositivo da 600 euro (senza navigatore o geotagging delle foto, senza possibilità di registrare video.. solo per citarne alcune) non vale uno degli ultimi apparecchi della serie N. Nella mia modestissima opinione.
Qualche mese riferivo dello scetticismo a riguardo degli aggeggini tutto fare, oggi devo in parte ricredermi..

]]> http://www.diplod.it/2008/12/24/n-series-dove-vuole-arrivare-nokia/feed/ 5