iPhone optimerede websider til web-IO applikationer

Hvad angår iPhone, er der to variationer:

For at gøre oprettelsen af websiden enkel, bør du beslutte en variant og konstruere websiden i overensstemmelse hermed.

Hvis der er WLAN-adgang, vises det viste eksempel på alle iPod Touch-modeller!

Eksempel: Visning af rumklima på iPhone

I det første eksempel vil vi måle temperatur, relativ luftfugtighed og barometertryk ved hjælp af en Web-Thermo-Hygrobarograph og vise det på iPhonen som en dynamisk webside.

Som allerede nævnt er det for websider, der er optimeret specielt til iPhone, vigtigt at definere HTML-elementernes størrelse og position til pixel nøjagtighed.

Tegningen skal hjælpe med at arrangere elementerne og forstå den følgende kildetekst.

Tegningen skal hjælpe med at arrangere elementerne og forstå den følgende kildetekst.<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:20px;
					width:320px;
					}
				.value
					{
					position:absolute;
					background-color:#99CCFF;
					text-align:center;
					font-size:60px;
					left:0px;
					height:80px;
					width:320px;
					}
					-->
			</style>
		</head>

Kildeteksten begynder med det Web-IO-specifikke tag <bruger.htm>, som Web-IO’en har brug for til intern tilknytning til filsystemet. <user.htm>-tagget overføres ikke fra Web-IO til browseren.

Derefter følger det normale <head>-område på websiden. Vigtigt er specifikationen “viewport“. Dette begrænser den normale udzooming af websiden til 320 pixels, så websiden altid kan vises i sin helhed og i den ønskede skalering.

Længere fremme i kildeteksten oprettes DIV-elementer til beskrivelse og visning. Tilsvarende CSS-stiloplysninger er indeholdt i hovedet for disse elementer. Blandt andet er højde og venstre position defineret.

<body>
	<div style="top:10px; ">
		Temperatur
	</div>
	<div id="temperature" style="top:30px;">
		<w&t_tags=t1>°C
	</div>
	<div style="top:120px;">
		Relative Luftfeuchte
	</div>
	<div id="humidity" style="top:140px;">
		<w&t_tags=h1> %
	</div>
	<div style="top:230px; ">
		Luftdruck
	</div>
	<div id="pressure" style="top:250px;">
		<w&t_tags=pa>hPa
	</div>
</body>
</html>

Derefter følger området <body> på websiden. Her er CSS klasser og top specifikationer, bruges til at bringe de enkelte DIV-elementer på plads. For de DIV-elementer, der stadig skal ændres efter indlæsning af websiden, tildeles en ID. Som displayteksten speciel W&T tags er indtastet. Disse tags erstattes af den aktuelt gyldige værdi af Web-IO, når siden indlæses i browseren.

<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(";");
					document.getElementById('temperature').innerHTML= ReceiveData[0].substring(0,ReceiveData[0].length-2) + '°C';
					document.getElementById('humidity').innerHTML = ReceiveData[1]
					document.getElementById('pressure').innerHTML = ReceiveData[2]
					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);
			maintimer = setTimeout("DataRequest('single')",5000);
		}
	}
	DataRequest('single');
</script>

Kernen på websiden er JavaScript-sektionen, som er indeholdt i <head>-området på websiden. Her bruges DataRequest-funktionen til at sende kommandoen enkelt til Web-IO. Web-IO sender værdierne for temperatur, relativ fugtighed og barometrisk tryk semikolon afgrænset. Split-sætningen adskiller værdierne og skriver dem til et variabelt array.

I denne metode vælges de tilsvarende DIV-elementer til visning, og de aktuelle værdier indtastes.document.getElementById()

En timer får dette til at ske cyklisk hver 5000 ms.

Websiden er nu færdig og skal blot uploades til Web-IO.

Blog

Eksempel: Visning af rumklima på iPhone