diploD » nokia 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 Google Earth Plugin: visualizzare KML su una pagina web HTML http://www.diplod.it/2009/08/16/google-earth-plugin-visualizzare-kml-su-una-pagina-web-html/ http://www.diplod.it/2009/08/16/google-earth-plugin-visualizzare-kml-su-una-pagina-web-html/#comments Sun, 16 Aug 2009 18:55:18 +0000 http://www.diplod.it/?p=791 earth-plugin

Google Earth è diventato ormai uno strumento dalle mille potenzialità: esplorazione degli oceani, fotografie, edifici e terreni in 3D, visione dei luoghi nel tempo, registrazione dello schermo, sono solo alcune delle meraviglie del prodotto.

La possibilità di utilizzare file KML generati da altri è un’altra delle cose che rendono Google Earth uno strumento eccezionale per far visualizzare percorsi, itinerari, foto dei luoghi e quant’altro. Le informazioni geolocalizzate permettono di dare al fruitore un contributo unico: vedere i posti vale molto di più che descriverli.

Ebbene, da qualche tempo è disponibile un plugin che permette di portare Google Earth direttamente sulle pagine web, grazie alle Google Earth API. E’ infatti possibile inserire in una pagina web una finestra che visualizza il famoso mondo 3D, caricando un file KML.
Nel futuro non saremo più legati al 2D delle famosissime mappe di Google, ma potremo creare mashup direttamente in 3D. Gli esempi di codice sono davvero vasti e ben documentati.

Ecco il codice dell’esempio sotto, commentato nel javascript che carica il plugin:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="it-IT">
<head>
<title>Esempio Plugin Google Earth con file KML</title>
<script src="http://www.google.com/jsapi?key=LaTuaAPIKey"></script>
<script type="text/javascript">
var ge;
google.load("earth", "1");
//inizializza la mappa prendendo come riferimento l'ID del div che la contiene: map3d
function init() {
google.earth.createInstance('map3d', initCallback, failureCallback);
}
function initCallback(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
// aggiunge i controlli di navigazione
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
// aggiunge alcuni livelli: confini e strade
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);
// codice per caricare e far visualizzare il file KML
function finished(object) {
if (!object) {
// Gestione degli errori per prevenire i deadlock di alcuni browsers
setTimeout(function() {
alert('Bad or null KML.');
}, 0);
return;
}
ge.getFeatures().appendChild(object);
// imposta latitudine, longitudine e zoom
var la = ge.createLookAt('');
la.set(44.258300, 10.411550, 25, ge.ALTITUDE_RELATIVE_TO_GROUND,
0, 70, 400);
ge.getView().setAbstractView(la);
}
// carica il file KML
var url = 'http://www.diplod.it/wp-content/uploads/2009/08/AlbaCusna.kml';
google.earth.fetchKml(ge, url, finished);
document.getElementById('installed-plugin-version').innerHTML =
ge.getPluginVersion().toString();
}
function failureCallback(errorCode) {
}
google.setOnLoadCallback(init);
</script>
</head>
<body>
<div id="map3d" style="width: 500px; height: 380px;"></div>
</body>
</html>
Ovviamente per far andare il tutto è necessario ottenere una API Key, fornita gratuitamente da Google per il proprio dominio.
Il giochino è davvero meraviglioso, ecco come appare il tutto:

Se vi interessa sapere come ho fatto a generare questo file KML, provate a sbirciare qui: con un cellulare Nokia potrebbe aprirsi un altro mondo.. ;)

]]> http://www.diplod.it/2009/08/16/google-earth-plugin-visualizzare-kml-su-una-pagina-web-html/feed/ 4 Gmaps Mobile: una silenziosa rivoluzione.. http://www.diplod.it/2009/06/21/gmaps-mobile-una-silenziosa-rivoluzione/ http://www.diplod.it/2009/06/21/gmaps-mobile-una-silenziosa-rivoluzione/#comments Sun, 21 Jun 2009 17:10:16 +0000 http://www.diplod.it/?p=773 Da qualche tempo avevo installato GMap Mobile sul mio cellulare Nokia, con il classico sistema operativo Symbian. Non l’ho mai usato seriamente, era un’icona e nulla più. Anche perchè i costi di connessione, in questi casi, non ne agevolano l’utilizzo.

Scopro che Vodafone ha un’opzione tariffaria per cui con 2 euro fissi a settimana è possibile navigare gratuitamente senza limiti, utilizzando connessioni dati tramite il punto di accesso wap.omnitel.it (si.. avete capito bene, non 3 euro a settimana, ma 2 euro a settimana, per trovare questa seconda promozione, identica alla sorella più cara, basta cliccare sul link “Scopri la promozione per navigare in Vodafone live! e sui tuoi siti internet preferiti“: confermato pure da un operatore Vodafone). Ebbene, si apre un mondo che per i dispositivi mobili non avrei nemmeno immaginato possibile.

Un cellulare che diventa improvvisamente una porta d’accesso verso quel mondo di informazioni che tipicamente sono proprie di un PC. Ti capita spesso di dover cercare un ristorante mentre sei a spasso in una città inesplorata, e magari vuoi sapere il numero di telefono e gli orari di apertura. Nokia ha fatto incredibili passi avanti con il navigatore integrato, ma è ancora lontano dagli sviluppi di Google Maps. Il sito web di una attività commerciale, il numero di telefono, gli orari di apertura, la stada per arrivare, a partire dalla tua posizione (sia che il cellulare abbia o meno il GPS): sono tutte cose che diventano alla portate di qualsiasi dispositivo evoluto.

Un video come questo fino a poco tempo fa sembrava roba in arrivo tra qualche anno, oggi è realtà. E mai avrei pensato fosse così facile..

I benefici di Google Maps non sono solo quelli riguardanti la ricerca di attività commerciali, ci sono pure le informazioni di Google Transit sui mezzi di trasporto pubblici, in Italia attive oggi su:

Un’altra opportunità da sfruttare è quella delle mappe personali, oggi ancora non è possibile fare il login con il proprio account tramite l’applicazione del cellulare, ma dopo aver visto gli immensi passi avanti fatti in questi anni credo proprio che non dovremo aspettare molto..
Magari arrivo tardi, e molti si saranno già divertiti con i servizi mobile di Google, se ancora non l’avete fatto: buona scoperta a tutti.

]]> http://www.diplod.it/2009/06/21/gmaps-mobile-una-silenziosa-rivoluzione/feed/ 0 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