Hem > Webbutveckling > Mer HTML5 godis

Mer HTML5 godis

Efter positiv respons från mitt föregående inlägg angående om HTML5 tänkte jag med detta inlägg ta upp ytterligare saker som man kan göra med HTML5 med eller utan kombination med CSS3.

När jag hade lite tid över idag slängde jag ihop en liten och rätt praktisk funktion för alla som har noll lokalsinne, men som kan läsa en Google Maps-karta. Det jag har snickrat ihop är, för den som inte har listat ut det, en funktion med hjälp av webbläsaren kan få  latitud och longitud på den position som datorn tror sig befinna sig. Detta är möjligt då den kan kolla upp om var en eller flera IP-nummer befinner sig geografiskt och därmed positionera in datorn med hjälp av dessa. Sitter man exempelvis på ett Café med trådlöst nätverk är det troligt att det finns en databas som vet Caféts IP-nummer och har koordinaterna till platsen. Om datorn upptäckt och uppkopplad mot nätverket är det tillräckligt för att webbläsaren ska kunna lista ut var du befinner dig. Dessutom kan webbläsaren med hjälp av andra omgivande trådlösa nätverk räkna ut en mer exakt position. Om datorn eller telefonen är utrustad med en GPS kan webbläsaren förstås också använda sig av den för att räkna ut sin position. För den som är intresserad av mer djupgående förklaring på hur det fungerar har about.com skrivit en artikel om ämnet.

Innan man bör ge sig på att testa min GEOLocation-sida nedan bör man ha läst om när, var och hur information om sin position ges ut. En sammanfattning av informationen är kort och gott att din position delas aldrig ut utan ditt samtycke och webbläsaren tar heller inte reda på positionen utan ditt samtycke.

Nu till det roliga. Enda kravet, bortsett från en fungerande Internetuppkoppling, för att min GEOLocation-sida ska fungera är att använda  en vettig webbläsare på sin datorn.  De webbläsare som i dagsläget fungerar bäst i är senaste versionen av antingen FireFox, Google Chrome, Safari på iPhone eller valfri Android-telefon.

Klicka här för att komma till GEOLocation-sidan.

För de olyckligt lottade som har en mindre bra webbläsare får nöja sig med ett exempel som är bilen ovan.

Här nedan kommer koden som jag använder för GEOLocation-sidan. Jag har markerat de rader som jag tror är mest intressanta i koden.

<!DOCTYPE html>
<html lang="sv">
    <head>
        <meta charset=utf-8 />
        <title>GEOLocationn</title>
    </head>
    <body>
        <section>
            <header>

              <h1>GEOLocation</h1>
            </header>
            <article>
              <p>Status för position: <span id="status">Inväntar bekräftelse eller information sänds...</span></p>
              <p>
              	<strong>Latitud:</strong> <span id="latitude">?</span> <br />

              	<strong>Longitud:</strong> <span id="longitude">?</span></p>
            </article>

        </section>
		<script type="text/javascript">
			function success(position)
			{
			  var s = document.querySelector('#status');
			  
			  s.innerHTML = "Där é du!";
			  
			  var mapcanvas = document.createElement('div');
			  mapcanvas.id = 'mapcanvas';
			  mapcanvas.style.height = '600px';
			  mapcanvas.style.width = '700px';
				
			  document.querySelector('article').appendChild(mapcanvas);
			  
			  var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
			  
			  document.getElementById('latitude').innerHTML=position.coords.latitude;
			  document.getElementById('longitude').innerHTML=position.coords.longitude;
			  
			  var myOptions = {
				zoom: 15,
				center: latlng,
				mapTypeControl: false,
				navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
				mapTypeId: google.maps.MapTypeId.ROADMAP
			  };
			  var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
			  
			  var marker = new google.maps.Marker({
				  position: latlng, 
				  map: map, 
				  title:"Här är du!"
			  });
			}
			
			function error(msg)
			{
			  var s = document.querySelector('#status');
			  s.innerHTML = typeof msg == 'string' ? msg : "Det gick inte. :(";
			}
			
			if (navigator.geolocation)
			{
			  navigator.geolocation.getCurrentPosition(success, error);
			} else {
			  error('Din webbläsare stödjer inte geo-location. Byt till en vettig webbläsare som Firefox eller Google Chrome');
			}
			
        </script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    </body>

</html>

Mer läsning om HTML5

För den som är intresserad av HTML5 och hur det fungerar finns det länkar i mitt förra inlägg om HTML5. Men för den som vill ha mer information om HTML5 och CSS3 kan jag rekommendera 15 Useful HTML5 Tutorials and Cheat Sheets.

Sedan finns det förstås W3C:s arbetsdokument om HTML5, dock rekommenderar jag bara den till för dem som kan och har tid att sätta sig in i de många och smått krångliga tekniska termerna i dokumentet. Inte direkt något som man lusläser när man precis börjat med (X)HTML. Dock innehåller dokumentet allt man behöver veta om HTML5.

Feedback

Om det är någon som önskar eller har förslag på vad jag ska ta upp om HTML5 eller CSS3 är jag jättetacksam om ni skickar in dessa antingen som ett mail eller som en kommentar nedan. Jag tycker är roligt att skriva inlägg om sådant som jag vet är efterfrågad av er läsare på min blogg. Dessutom hjälper det mig eftersom att jag lär mig mer av att skriva om något intressant på förfrågan än att jag väljer något inom området som jag redan har kunskap om.

Sedan är det självfallet är det välkommet med kommentarer i störta allmänhet så länge som det berör inläggets ämne eller något avgränsande till ämnet. Är det några frågor eller funderingar besvarar jag gärna på dessa.

  1. Inga kommentarer än.
  1. Inga trackbacks än.