Siti web per cellulari e pda wap

| 7 Comments

Da alcuni giorni mi sto dedicando alla costruzione di siti web per cellulari , pda e apparecchiature mobili. Qui voglio mettere in comune alcune mie esperienze sulla costruzione di siti web per cellulari. Se hai consigli da dare in merito, scrivili nei commenti.

Il sito proprietaricasa.org in versione wap e pda

In questa immagine puoi vedere come si presenta uno dei miei siti, rivisto per poter essere compatibile con il simulatore di mobile device della Nokia.

C'è da dire che vedere un sito web su cellulare per me è una esperienza frustrante. Non hai libertà di manovra. Tutto è rimpicciolito alle dimensioni di un francobollo o poco più. La linea è lenta e i costi di connessione sono in genere più alti. Tuttavia non è sempre possibile avere dietro un personal computer desktop o un computer portatile. Così la comodità di un PDA tascabile può fare la differenza quando si è in viaggio o fuori sede e si ha necessità di accedere ad informazioni altrimenti non disponibili.

Rendere le pagine web conformi agli standard dettati dal W3C non è sempre così semplice come può sembrare, se si parte da un sito già costruito per html o xhtml, perché le regole di definizione dei tag possono cambiare in modo più restrittivo.

E' bene fare riferimento al sito web del W3C. In particolare questi link : http://www.w3.org/Mobile/ e XHTML basic possono essere dei punti di riferimento importanti per iniziare a costruire o a trasformare siti web nelle versioni per cellulari e pda.

Così ho voluto provare a rendere uno dei miei siti web amatoriali, compatibili con i telefoni cellulari. Sono andato sul sito della Nokia e ho scaricato il SDK, simulatore web di cellulare e il Nokia gateway per poter testare le mie pagine web. Mi sono studiato un po' di XHTML Basic sul sito del W3C e ho cominciato a fare prove su prove con il php e con Movable Type per arrivare a scrivere un po' di codice XHTML funzionante.

Dopo diversi tentativi di prove con l'encoding dei caratteri e il content type, ho messo giù una pagina XHTML semplice, semplice, con un link ad un foglio di stile CSS per vedere come si vedeva il mio sito sul simulatore di cellulare della Nokia. Una vera schifezza! Non si vede niente, occorre scrollare un casino, poi i link di navigazione sono in genere disposti uno sopra l'altro perché il display è più stretto. Ci vuole molta abilità e capacità di sintesi nel progettare pagine web per cellulari.

Qui, comunque, hai come esempio il codice PHP / Xhtml che ho usato per creare l'head del file di inizializzazione e configurazione.

<?php if(!headers_sent()) {header('Content-Type: application/xhtml+xml; charset=UTF-8');} else {header('Content-Type: application/xhtml+xml; charset=UTF-8', true);}print "<?xml version=\"1.0\" encoding=\"";?>UTF-8"<? print "?>"; ?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title>Il titolo del sito</title>
<meta name="description" content="Descrizione sito" />
<meta name="keywords" content="parole chiavi" />
<link rel="stylesheet" href="Url del file di stile.css" type="text/css" />
</head>
<body>
</body>
</html>

Se si usa il PHP, bisogna controllare che la codifica dei caratteri inviata al browser del cellulare sia quella giusta, in genere UTF-8. Inoltre bisogna controllare il content type del documento che dovrebbe essere application/xhtml+xml per la compatibilità con le specifiche wap 2.0 o per quelle XHTML Basic 1.1, ma si puo' sostituire con text/html per la compatibilità con i comuni browser.

7 Comments

più ke un commento al tuo illuminate argomento..vorrei kiederti kome posso visualizzare su un nokia n95 le riprese della mia web camera..usando il programma di videosorveglianza active web camera...sono riuscito a vederlo solo con internet..avendo creato un ftp di altervista...quando voglio vedere il video in java applet le immagini non si caricano... il sito da me creato funziona perfettamente ma non visualizza il video...è possibile fare lo streaming?

sabatino, non so dirti, non conosco quel telefono della Nokia e le specifiche delle java applet che usi.

Ciao
se il programma di video sorveglianza crea un applet che carica le immagini o il video dall'ftp o altra fonte non lo visualizzerai dal browser del telefonino perchè la visualizzazione dipende dal fatto che l'applet è una mini applicaizione che ha bisogno di un browser adatto per essere eseguita. Se vuoi visualizzare il video dovresti o fare uno straming (dal server) e aprirlo con realplayer dell'N95 o creare la tua applicazione in java che gira su N95 e che usa le specifiche di J2ME (versione java per mobile).
Spero di essere stato abbastanza chiaro. Se vuoi una mano scrivimi.

AV
3J Digital

Ciao Permalink, cercavo proprio qualcunoo che incominciasse a spegare come realizzare siti per mobile partendo da pagine gia esistenti e qui l'ho trovato.

Da neofita per quanto riguarda i mobile pero ' mi è subito saltata all'occhio una cosa nel tuo codice:

il link al css non è specificato per che cosa, ovvero no c'è la definizione > media="mobile" in maniera dapoter visualizzare la stessa pagina sia con il Browser da PC che da mobile.

Probabilmente è per cio che hai avuto dei problemi con i diversi tag xhtml come definiti dal W3C.

......ti ringrazio per ora per l'informazioni condivise e andro' a scaricarmi i visualizzatori.

Saluti Alberto

Alberto, secondo me, con le connessioni mobili 3G e con cellulari pda tipo Iphone o Android o Windows Mobile, scrivere pagine web orientate alla mobilità non ha più tanto senso, visto che quei cellulari hanno browser web che rendono molto bene le normali pagine web progettate per la navigazione da desktop.

Ottimo articoli, ma è noto che il problema citato è comune a tutta la community del web. Per tale motivo nuovi sistemi come gomobi (oggi anche con il sito italiano www.gomobi.it) aiutano non poco in termini di usabilità, ma soprattutto permettendo davvero a tutti di avere il proprio sito mobile senza dover impazzire o essere necessariamente dei programmatori...

La soluzione è nel web responsive design: griglie fluide, immagini flessibili e media queries. Vi segnalo un tutorial (www.hightechware.it/sharedtip.php?id=8) che ho scritto sul remake del nostro sito in chiave reattiva.
Vi cito anche le fonti e gli articoli su alistapart al riguardo!

Leave a comment



Archives

Creative Commons License
This blog is licensed under a Creative Commons License.
Powered by Movable Type 4.35-en