|
Le tecnologie mostrate qui fanno riferimento all’iPhone Apple, ma adattando le dimensioni di visualizzazione alla risoluzione del display, possono essere applicate anche a qualsiasi altro cellulare idoneo per Internet. L’unico requisito è il supporto di JavaScript e in particolare di oggetti richiesta HTTP (tecnica AJAX). Per quanto riguarda la visualizzazione dell’iPhone, ci sono due varianti: 
Per agevolare la creazione della pagina web, occorre scegliere una variante e creare la pagina web in base a questa.
Se è disponibile un accesso WLAN l’esempio mostrato funziona anche su tutti gli iPod Touch! |
Esempio - azionare le tapparelle con l’iPhone
In questo esempio gli ingressi di azionamento di una tapparella elettrica devono essere azionati mediante gli output di un Web-IO 2x digitale dell’iPhone.
Come già ricordato, nelle pagine web che devono essere ottimizzate in particolare per l’iPhone è importante definire gli elementi HTML di dimensione e posizione utilizzati precisamente al pixel.
Il disegno serve per la disposizione degli elementi e per comprendere il seguente testo sorgente.
|
<user.htm>
<html>
<head>
<title>Aktuelles Klima</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
<meta name="viewport"
content="width=320" />
<style type="text/css">
<!--
* { font-family:Verdana, Helvetica;
}
.description { position:absolute;
text-align:center;
font-size:18px;
left:0px;
height:25px;
width:320px;
}
.confirm {
position:absolute;
background-color:#99CCFF;
left:0px;
height:160px;
width:320px;
}
.buttons
{ position:absolute;
font-size:50px;
width:280px;
height:120px;
left:20px;
}
-->
</style>
</head> |
|
Il testo sorgente inizia con il tag specifico per il Web-IO <user.htm>, richiesto dal Web-IO per la classificazione interna nel File-System. Il tag <user.htm> non viene trasmesso al browser dal Web-IO.
Poi segue il normale campo <head> della pagina web. È importante l’indicazione "viewport". In questo modo lo zoomout della pagina web effettuato normalmente dall’iPhone viene limitato a 320 pixel, in modo che la pagina web sia sempre completa e visualizzata nel ridimensionamento desiderato.
Nella parte successiva del testo sorgente vengono definiti gli elementi DIV per la descrizione e la visualizzazione. Per questi elementi si trovano le rispettive informazioni CSS-Style nell’intestazione. Per definire altezza e posizione sinistra.
|
<body>
<div class="description"
style="top:5px;">Rolladen Steuerung</div>
<div id="go_up"
class="confirm" style="top:30px;"></div>
<input type="button" class="buttons"
onclick="goup();" style="top:50px;"
value="AUF">
<div id="go_dw"
class="confirm" style="top:190px;"></div>
<input type="button" class="buttons"
onclick="godown();" style="top:210px;"
value="ZU">
</body>
</html> |
|
Segue poi il campo <body> della pagina web. Qui vengono utilizzate le classi CSS definite nell’intestazione e le indicazioni più importanti per posizionare i singoli elementi DIV. Agli elementi DIV che devono essere ancora modificati dopo il caricamento della pagina web, viene assegnata una ID. Attraverso onclick si decide quale funzione JavaScript devono richiamare i tasti.
|
<script language="JavaScript" type="text/javascript">
function DataRequest(sendstring)
{ var xmlHttp = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP")
: xmlHttp = new XMLHttpRequest();
if (xmlHttp)
{ xmlHttp.onreadystatechange = function()
{ if (xmlHttp.readyState ==
4)
{ if (xmlHttp.status
== 200)
{ var
ReceiveData = xmlHttp.responseText.split(";");
if
(ReceiveData[1]=='2')
{
document.getElementById('go_up').style.backgroundColor=
'#99CCFF';
}
if
(ReceiveData[1]=='1')
{
document.getElementById('go_dw').style.backgroundColor=
'#99CCFF';
}
xmlHttp=null;
}
}
}
xmlHttp.open("GET",
sendstring, true);
xmlHttp.setRequestHeader("Connection",
"close");
xmlHttp.setRequestHeader("If-Modified-Since",
"Thu, 1 Jan 1970 00:00:00 GMT");
xmlHttp.send(null);
}
}
function godown()
{ DataRequest('outputaccess0?PW=&State=ON&')
document.getElementById('go_dw').style.backgroundColor=
'#CCCCCC';
}
function goup()
{ DataRequest('outputaccess1?PW=&State=ON&')
document.getElementById('go_up').style.backgroundColor=
'#CCCCCC';
}
</script>
|
|
La parte centrale della pagina web è la parte del JavaScript, inserito nel campo <head> della pagina web. Le funzioni goup() e godown() richiamano la funzione DataRequest e inoltrano sotto forma di stringa di comando il comando specifico Web-IO per impostare l’output desiderato. Con questo sistema document.getElementById inoltre l’elemento DIV situato sotto il tasto diventa grigio, per segnalare all’utente che il clic sul tasto è stato riconosciuto.
La funzione di ricezione incorporata nella funzione DataRequest colora nuovamente l’elemento DIV in azzurro dopo la ricezione della conferma.
Adesso il sito web è pronto e deve solo essere caricato nel Web-IO.
Dal momento che gli output devono attivare il comando delle tapparelle solo con un breve impulso, per entrambi gli impulsi può essere prestabilita ancora una lunghezza dell’impulso di 1000 ms.
|
