money.js ist eine kleine (<1kb) JavaScript-Bibliothek zur Währungsumrechnung. Gedacht ist die Zusammenarbeit mit der stündlich aktualisierten Open Source Exchange Rates API. Es können jedoch auch eigene Wechselkurse angegeben werden.

Beispiele

Hier ein paar der offiziellen Beispiele:

1
2
3
4
5
6
7
8
9
10

// From any currency, to any currency:
fx.convert(12.99, {from: "GBP", to: "HKD"});
 
// Chaining sugar:
fx(1000).from("USD").to("GBP");
fx(1000).to("AED");
 
// With simple settings and defaults, making this possible:
fx.convert(5318008);
fx(5318008).to("AED");

Weiterführende Links

• Offizielle Website
• Demo Playground
• Dokumentation
• GitHub Repository
• Open Source Exchange Rates API

Kategorie: Webentwicklung » JavaScript | Tags: Bibliothek, money.js, Open Source Exchange Rates API, Währungsumrechnung, Wechselkurs

zum Artikel | 3 Kommentare

Lang ist’s her: Im April letzten Jahres schrieb ich den ersten Artikel zur Serie WebSockets mit JavaScript und PHP. Da ich es verpennt habe, die Serie fortzusetzen und es mittlerweile ein paar sehr gute Tutorials da draußen gibt, möchte ich die Reihe mit diesem Artikel und ein paar WebSocket-Linktipps abschließen.

Entwicklung

„Damals” steckte das Thema noch in den Kinderschuhen – doch mittlerweile sind WebSockets neben Chrome auch in den neuesten Versionen von Safari implementiert. Für den Firefox war zwar die Version 3.7 angepeilt – doch wegen einer Sicherheitslücke im Protokolldesign, werden es die WebSockets nicht einmal in die finale Version von Firefox 4.0 schaffen. (Quelle) In Opera sind sie deshalb seit Version 11 standardmäßig deaktiviert und lassen sich nur über einen Eintrag in der Config wieder aktivieren. (Quelle)

Linktipps

Wikipedia: Websockets

• allgemeiner Überblick

Websocket.org

• kurze Zusammenfassung
• Beispiele mit Testserver
• genauere Betrachtung & Vorteile von WebSockets

Comet Daily: State of Websocket Support

• Welche Browser unterstützen WebSockets?

Nettuts+: Start Using HTML5 WebSockets Today

• Was sind WebSockets?
• Was ersetzen WebSockets?
• Implementierung von Websockets
  (Server, URLs & Ports, Client, Events, etc…)

David Walsh: WebSocket und Socket.IO

• Was ist die WebSocket API?
• Verwendung der WebSocket API
• WebSockets mit Socket.IO
• dojox.Socket und Socket.IO

Solltet ihr noch weitere gute Linktipps haben, schreibt sie einfach in die Kommentare. Ich werde die Liste dann ergänzen.

Kategorie: Webentwicklung » JavaScript | Tags: API, Artikel, Browser, Comet Daily, David Walsh, Entwicklung, Firefox, Firefox 3.7, Firefox 4.0, Google Chrome, JavaScript, Kompatibilität, Linktipps, Nettuts+, Opera, PHP, Protokoll, Safari, Serie, Sicherheitslücke, Socket.IO, Tutorial, Version, WebSocket API, Websocket.org, WebSockets, Wikipedia

zum Artikel | ein Kommentar

Wenn wir uns im Netz bewegen bestehen alle Websites irgendwie aus Kästen. Alles ist in irgendeiner Art und Weise irgendwie rechteckig. Zwar geben uns neue CSS3-Techniken die Möglichkeit unsere Elemente abzurunden, aber dennoch: Sie sind Kästen. Wen man eine schöne (nicht rechteckige) Grafik anklickbar machen möchte – und zwar nicht den gesamten Kasten, in dem sie sich befindet, muss man zum Beispiel auf arbeitsintensive Image Maps oder Flash zurückgreifen.

In diesem Artikel möchte ich euch zeigen, dass es mit Hilfe des Canvas-Elements aus HTML5 auch anders funktioniert. Das Element wird dabei nur als Hilfsmittel genutzt und nicht dazu, die Grafik einzubinden.

Die Idee

Die Idee stammt zugegebenermaßen nicht von mir selbst – die Umsetzung in diesem Artikel jedoch schon. Ich schaute letztens eine interessantes Video über die Erstellung einer Game Engine in JavaScript. Im Video wurde darüber gesprochen Canvas als ein Tool zu benutzen um Pixeldaten aus einem Bild auszulesen – genauer gesagt aus einer PNG-Datei, die Transparenz beinhaltet.

So lässt sich ein zweidimensionales Array aus Nullen und Einsen erstellen, mit Hilfe dessen man leicht entscheiden kann, ob die Maus sich auf oder neben dem Objekt befindet. Dabei ist man noch nicht einmal beschränkt auf Klick-Events. Nette Hover-Effekte lassen sich genauso gut erstellen.

Demonstration

Obwohl es in allen modernen Browsern funktionieren sollte, habe ich die Demo kurz im Firefox abgefilmt, sodass auch wirklich jeder in den Genuss kommen kann. Im Video ist ein Hover-Effekt zu sehen, der die Deckkraft der Bilder verändert.

Link zur Live-Demo »

Setup

HTML

Wie ich anfangs bereits erwähnte, können Bilder ganz normal in die Seite eingebunden werden, wie man es gewohnt ist. In meinem Beispiel habe ich Divs erstellt, die ein Hintergund-Bild besitzen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<div id="main" class="container">
    <div class="clickable arrow"></div>
    <div class="clickable build"></div>
    <div class="clickable building"></div>
    <div class="clickable folder"></div>
    <hr />
    <div class="clickable home"></div>
    <div class="clickable interact"></div>
    <div class="clickable paint"></div>
    <div class="clickable pathing"></div>
    <hr />
    <div class="clickable pen"></div>
    <div class="clickable people"></div>
    <div class="clickable phonebook"></div>
    <div class="clickable plus"></div>
    <hr />
    <div class="clickable printer"></div>
    <div class="clickable school"></div>
    <div class="clickable vault"></div>
    <div class="clickable world"></div>
    <hr />
</div>

CSS

Die CSS-Regeln sind ebenfalls überschaubar. Die Deckkraft wird bei allen Bildern etwas verringert. Im Internet Explorer funktioniert der Effekt eh nicht, deswegen müssen wir uns auch auch nur um die Deckkraft bei den anderen Browsern kümmern.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

hr {
    clear: left;
}
 
.clickable {
    float: left;
    width: 128px;
    height: 128px;
    margin-right: 30px;
    -moz-opacity: 0.5;
    opacity: 0.5;
}
 
.hover {
    -khtml-opacity: 1.0;
    -moz-opacity: 1.0;
    opacity: 1.0;
}
 
.arrow    { background: url('../img/arrow.png');      }
.build    { background: url('../img/build.png');      }
.building { background: url('../img/building.png');   }
.folder   { background: url('../img/folder.png');     }
 
.home      { background: url('../img/home.png');      }
.interact  { background: url('../img/interact.png');  }
.paint     { background: url('../img/paint.png');     }
.pathing   { background: url('../img/pathing.png');   }
 
.pen       { background: url('../img/pen.png');       }
.people    { background: url('../img/people.png');    }
.phonebook { background: url('../img/phonebook.png'); }
.plus      { background: url('../img/plus.png');      }
 
.printer   { background: url('../img/printer.png');   }
.school    { background: url('../img/school.png');    }
.vault     { background: url('../img/vault.png');     }
.world     { background: url('../img/world.png');     }

JavaScript

Ich folgenden JavaScript-Teil werde ich jQuery-Funktionen nutzen, die mir das Leben hier und da etwas einfacher machen. Die Funktionen sind aber keinesfalls für die Umsetzung notwendig.

Insgesamt ist der oben gezeigt Hover-Effekt in drei Teile aufgeteilt:

1. Die Maus betritt den Div (mouseenter)
2. Die Maus bewegt sich im Div (mousemove)
3. Die Maus verlässt den Div (mouseleave)
   

Natürlich muss jeder selbst wissen, wie man es letzendlich implementiert. Ich möchte lediglich die Grundidee mit diesem Beispiel veranschaulichen.

1. Event: mouseenter

Wenn die Maus den Div betritt, muss das Array erzeugt werden, das die Bild-Daten enthält. Dazu wird ein Canvas-Element erstellt, in dem das Hintergrundbild des Divs gezeichnet wird. Danach können die Pixel ausgelesen werden. Anhand des Alpha-Wertes (jeder vierte Wert) wird die Transparenz abgefragt und eine Clickmap erzeugt (0=nichts, 1=Objekt).

Zum Schluss wird die Clickmap gespeichert, damit wir sie im nächsten Schritt abfragen können.

Mit den jQuery-Funktionen ist alles recht simpel und schick gelöst. Nur mit der Abfrage des Hintergrundbildes bin ich noch nicht ganz zufrieden. Genaueres dazu hatte ich bereits letztens in einem anderen Artikel geäußert.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

$('.clickable').mouseenter(function(e) {
    var obj = $(this);
 
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
 
    var img = new Image();
    img.onload = function() {
        // Bild nachzeichnen & ImageData auslesen
        canvas.width  = img.width;
        canvas.height = img.height;
        context.drawImage(img, 0, 0);
 
        var imageData = context.getImageData(0, 0, img.width, img.height);
 
        // Clickmap erstellen
        var clickMap = [];
        for (var i=0, n=imageData.data.length; i<n; i+=4) {
            var row = Math.floor((i/4)/img.width);
            var col = (i/4) - (row * img.width);
 
            if (!clickMap[row]) clickMap[row] = [];
            clickMap[row][col] = (imageData.data[i+3] == 0) ? 0 : 1;
        }
 
        // Clickmap speichern
        obj.data('clickMap', clickMap);
    }
 
    // Bild-Quelle angeben und onload-Event auslösen
    img.src = obj.css('backgroundImage').replace(/\"/g, '').slice(4, -1);
});

2. Event: mousemove

Wenn wir die Maus über dem Div bewegen wird abgefragt ob wir uns auf einem sichtbaren Pixel befinden. Wenn dies der Fall ist, wird dem Div eine CSS-Klasse hinzugefügt bzw. wieder entfernt, wenn der Cursor sich auf einem transparenten Pixel befindet. In diesem Beispiel ändert die CSS-Klasse die Deckkraft.

Bei der Berechnung der Cursor-Position werden Seitenabstand und Scrollweite berücksichtigt. Die Offset-Werte müssen gerundet werden, da es im Firefox zu Dezimalwerten kommen kann.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

$('.clickable').mousemove(function(e) {
    var obj = $(this);
 
    if ("undefined" === typeof(obj.data('clickMap'))) {
        return;
    }
 
    var offset = obj.offset();
    var xPos = e.clientX - Math.round(offset.left) + $(window).scrollLeft();
    var yPos = e.clientY - Math.round(offset.top)  + $(window).scrollTop();
 
    if (obj.data('clickMap')[yPos][xPos]) {
        obj.addClass('hover');
    } else {
        obj.removeClass('hover');
    }
});

3. Event: mouseleave

Da der Fall auftreten könnte, das jemand die Maus besonders Schnell aus dem Div zieht oder das Bild am Rande des Divs einen sichtbaren Pixel besitzt sollte die CSS-Klasse auf jeden Fall entfernt werden, sobald man den Div verlässt.

1
2
3

$('.clickable').mouseleave(function(e) {
    $(this).removeClass('hover');
});

Fazit

Das war’s. Hat mich zwar einige Zeit gekostet diesen Effekt zu basteln, aber wenn man es jetzt so sieht, steckt nicht wirklich viel dahinter. Ich hoffe, dass ich euch damit weiterhelfen oder zumindest inspirieren konnte. Ich finde es zunmindest erstaunlich, wie neue Web-Technologien uns die Arbeit erleichtern können.

Kategorie: Webentwicklung » JavaScript | Tags: Alpha-Wert, Artikel, Browser, Canvas, Clickmap, CSS-Klasse, CSS3, Cursor, Deckkraft, Demo, Demonstration, Div, Effekt, Element, Event, Firefox, Flash, Funktion, Game Engine, Grafik, Hilfsmittel, Hover, HTML5, IE, Image Map, jQuery, mouseenter, mouseleave, mousemove, Offset, Pixel, Seitenabstand, Tool, Transparenz, Video

zum Artikel | 8 Kommentare

Heute stand ich mal wieder vor einem kleinen Problem und bin mir bis jetzt nicht sicher, ob ich es optimal gelöst habe. Ich hoffe auf Verbesserungsvorschläge oder Zustimmung von euch. Mein Problem: Die Hintergrundbild-URL eines Divs muss ausgelesen werden…

Das Problem

An sich ist es kein Problem auf bestimmte Style-Werte von Elementen zuzugreifen. Wenn man jedoch die URL eines Hintergrundbildes (style.backgroundImage) abfragt, erhält man – je nach Browser-Engine – unterschiedliche Rückgabewerte:

Gecko (z.B. Firefox)

url("http://pfad.de/zum/bild.png")

Webkit (z.B. Chrome & Safari)

url(http://pfad.de/zum/bild.png)

Das haben zumindest meine Tests mit den neusten Versionen der jeweiligen Browser ergeben. Bei Chrome und Safari wird die URL nicht in Anführungszeichen gesetzt. Wenn man sich jetzt als Ziel gesetzt hat, nur die URL des Hintergrundbildes abzufragen, muss man beide Engines beachten.

Die Lösung

Meine Lösung besteht darin, dass ich zunächst die Anführungszeichen aus der Zeichenkette entferne und danach alle Zeichen – bis auf die ersten Vier sowie das Letzte – mittels slice() extrahiere:

1

var url = document.getElementById('foo').style.backgroundImage.replace(/\"/g, '').slice(4, -1);

Der Internet Explorer 8 verhält sich in diesem Fall wie der Firefox. Andere Versionen habe ich nicht getestet. Was haltet ihr von dieser Lösung? Gibt es eine bessere oder einfachere Umsetzung?

Kategorie: Webentwicklung » JavaScript | Tags: backgroundImage, Element, Engine, Firefox, Gecko, Google Chrome, Hintergrundbild, IE8, Lösung, Problem, Safari, Style, URL, Webkit

zum Artikel | 2 Kommentare

Nach dieser Überschrift sehe ich schon das große Fragezeichen in den Gesichtern der Leser. Dabei ist das Problem, um das ich mich in diesem Artikel kümmern möchte, recht trivial. Auf manchen Websites werden wertvolle Votes, Hypes, Diggs, Likes, oder Wasweißichs verschenkt, weil der Button falsch eingebaut wird.

Beispiel: t3n Social News

Ich möchte die Situation am Beispiel der Social News von t3n verdeutlichen, da es mir selbst so ergangen ist.

Um den t3n Social News Button einzubauen, hat man genau zwei Möglichkeiten:

1. ohne Angabe der URL

1

<script type="text/javascript" src="http://t3n.de/socialnews/ebutton/"></script>

2. mit Angabe der URL

1

<script type="text/javascript" src="http://t3n.de/socialnews/ebutton/http%253A%252F%252Fwww.yeebase.com%252Fblog%252F"></script>

Das Counting-Problem

Bei Variante 1 wird die URL also automatisch ausgelesen. Das würde bedeuten, dass beispielsweise Besucher von Feedburner für eine andere URL Voten, als Besucher, die direkt auf die “echte” URL gegangen sind, da Feedburner ein paar Parameter an die URL hängt:

http://example.org/

gegen:

http://example.org/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+XYZBlog+(XYZBlog)&utm_content=Google+Reader

Außerdem werden die Votes, die man bereits für die Orginal-URL bekommen hat, gar nicht erst angezeigt.

Aufruf: Immer URL übermitteln

Deshalb meine logische Schlussfolgerung: Man sollte immer, wenn es möglich ist, die gewünschte URL der Seite übermitteln, da man es sonst – übertrieben gesagt – dem Zufall überlässt, wo die ersehnten Votes landen.

t3n Social News Button für WordPress

Zum Schluss gibt es noch einen kleinen Code-Schnipsel. So könnt ihr den t3n Social News Button in euer WordPress-Theme integrieren:

1

<script type="text/javascript" src="http://t3n.de/socialnews/ebutton/<?php echo urlencode(urlencode(get_permalink())); ?>"></script>

Ein Plugin wäre hier mehr als überflüssig.

Kategorie: Webentwicklung » JavaScript | Tags: Button, Code-Schnipsel, Digg, Feedburner, get_permalink, Hype, Like, Parameter, Plugin, Social News, t3n, Theme, URL, urlencode, Vote, WordPress

zum Artikel | keine Kommentare

1. Plugin für Besucher

Zum einen kann ab sofort ein offizielles Deaktivierungs-AddOn für alle gängigen Browser (außer Safari) heruntergeladen werden. Es sorgt ganz einfach dafür, dass keine Daten vom Besucher zu Google Analytics gelangen. Damit besteht zwar nicht die Möglichkeit, den Dienst legaler zu machen, trotzdem haben Benutzer jetzt die Chance, Aufzeichnungen ihres Surf-Verhaltens zu blockieren.

2. Code für Webmaster

Auf der anderen Seite können Webmaster ihren Google Analytics Code um eine weitere Zeile ergänzen. Ich beschrieb bereits im Januar, wie man Google Analytics asynchron laden kann. Diesen Code verändern wir nun wie folgt:

1
2
3
4
5
6
7
8
9
10
11
12

<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-XXXXX-X']);
_gaq.push(['anonymizeIp']);
_gaq.push(['_trackPageview']);
 
(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

Es wurde eigentlich nur eine Zeile hinzugefügt.

4

_gaq.push(['anonymizeIp']);

Sie bewirkt, dass die letzte Achtergruppe der IP-Adresse vernachlässigt wird. Somit werden zwar die geographischen Angaben in den Statistiken etwas ungenauer, sollten jedoch immer noch ausreichend sein, um einen Überblick zu bekommen. Zudem ist man auf der sicheren Seite, was den Datenschutz anbelangt.

Kategorie: Webentwicklung » JavaScript | Tags: AddOn, anonym, asynchron, Datenschutz, Google Analytics, IP-Adresse, legal, Plugin

zum Artikel | keine Kommentare

Was sind WebSockets?

WebSockets ist ein Netzwerkprotokoll, welches mit HTML5 eingeführt wurde und momentan nur von Google Chrome unterstützt wird. Es dient dazu die Kommunikation zwischen einem Client und dem Server in einem Webbrowser zu optimieren.

Bisher mussten Antworten vom Server immer vom Client gefordert werden (Pull-Technologie). Mit WebSockets ist es nun Möglich eine bidirektionale Verbindung zwischen Client und Server herzustellen, sodass der Server jederzeit Nachrichten an den Client senden kann (Push-Technologie).

Es gibt zwar schon zahlreiche Möglichkeiten die Funktionalität eines WebSockets nachzuahmen (Bsp.: AJAX-Longpolling), jedoch bringen diese Hacks immer einen gewissen Overhead durch das HTTP-Protokoll mit sich. WebSockets besitzen diesen Nachteil nicht.

Das WebSocket-Interface

Werfen wir einen Blick auf das WebSocket-Interface:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

[Constructor(in DOMString url, in optional DOMString protocol)]
interface WebSocket {
    readonly attribute DOMString URL;
 
    // ready state
    const unsigned short CONNECTING = 0;
    const unsigned short OPEN = 1;
    const unsigned short CLOSING = 2;
    const unsigned short CLOSED = 3;
    readonly attribute unsigned short readyState;
    readonly attribute unsigned long bufferedAmount;
 
    // networking
    attribute Function onopen;
    attribute Function onmessage;
    attribute Function onerror;
    attribute Function onclose;
    boolean send(in DOMString data);
    void close();
};
WebSocket implements EventTarget;

Eigenschaften

• readyState – Status der Verbindung (0=connecting, 1=open, 2=closing, 3=closed)
• bufferedAmount – Bytes, die in der Warteschlange stehen

Methoden

• send – eine Nachricht an den Server senden
• close – die Verbindung schließen

Event-Handler:

• onopen – bei Öffnen der Verbindung
• onmessage – bei Empfangen einer Nachricht
• onerror – bei Auftreten eines Fehlers
• onclose – bei Schließen der Verbindung

Ausblick

Mit dem Wissen über dieses Interface seid ihr bestens gerüstet für die nächsten Teile dieser Artikel-Serie, in denen wir eine vollständige Implementierung von WebSockets mit JavaScript und PHP erarbeiten und diese auf eine funktionsfähige Chat-Anwendung erweitern.

Kategorie: Webentwicklung » JavaScript | Tags: AJAX, Client, Google Chrome, Grundlagen, HTML5, HTTP-Protokoll, Interface, Kommunikation, Longpolling, Netzwerkprotokoll, Pull-Technologie, Push-Technologie, Server, WebSockets

zum Artikel | 12 Kommentare

Google hat das Problem bereits erkannt und bietet seit einiger Zeit die Möglichkeit, Google Analytics asynchron zu laden.

Mit Bloggerei & Co hat man es nicht so leicht. Ich habe Einiges ausprobiert, bin jedoch nicht zu einem überzeugenden Ergebnis gekommen. Doch fangen wir von vorne an:

Möglichkeit 1: Nachträglich einfügen

Die einfachste Variante wäre, das Bild (oder den Code des Anbieters) gar nicht im HTML-Dokument zu platzieren, sondern erst nachträglich mit JavaScript einzufügen. Der Ladebalken des Browsers wäre verschwunden bevor das Bild überhaupt beginnt zu laden.

Jedoch funktioniert das schon mal nicht mit Bloggerei. Denn dort schaut regelmäßig ein Bot vorbei, der überprüft ob der Code richtig eingebunden ist. Beim Bot wird kein JavaScript ausgeführt, sodass dieser keinen Code zu Gesicht bekommt. Bringt also nichts…

Möglichkeit 2: Verstecken & nachträglich anzeigen

Für den zweiten Versuch habe ich mir eine kleine “Testumgebung” geschaffen. Zunächst benötigte ich ein Bild, das immer eine gewisse Zeit benötigt um geladen zu werden. Das habe ich ganz einfach in PHP mit einem Timeout gelöst (img.php):

1
2
3
4
5
6
7
8
9
10

<?php
sleep(3);
 
$file = 'img.jpg';
$image = imagecreatefromjpeg($file);
 
header("Content-type: image/jpeg");
 
imagejpeg($image);
imagedestroy($image);

Dieses Bild wird nun in einer HTML-Datei eingebunden:

1
2
3
4
5
6
7
8
9

<html>
    <head>
        <title>Speedtest #1</title>
    </head>
 
    <body>
        <img alt="Speedtest" src="img/img.php" />
    </body>
</html>

Würden wir die HTML-Datei jetzt aufrufen, würde es etwa drei Sekunden dauern bis der Ladebalken im Browser verschwindet. Deshalb war meine Idee, das Bild mittels CSS zu verstecken, damit der Browser es nicht beim Rendern der Seite lädt. Danach (wenn der Ladebalken verschwunden ist) kann man es schließlich mit JavaScript ganz einfach wieder sichtbar machen.

Die HTML-Datei habe ich also wie folgt geändert:

1
2
3
4
5
6
7
8
9

<html>
    <head>
        <title>Speedtest #2</title>
    </head>
 
    <body onload="document.getElementsByTagName('img')[0].style.display = 'inline';">
        <img alt="Speedtest" src="img/img.php" style="display:none;" />
    </body>
</html>

Diese Lösung wäre zu schön gewesen. Leider wird das Bild trotz des CSS-Befehls “display: none;” bereits beim Rendern der Seite geladen. (Das Gleiche gilt für “visibility: hidden;”.)

Diese Möglichkeit kommt also ebenfalls nicht in Frage.

Möglichkeit 3: Platzhalter & nachträglich laden

Vorab kann ich sagen: Diese Möglichkeit funktioniert zwar, ist aber genau wie die erste Variante nicht für Bloggerei und ähnliche Dienste einsetzbar, da hier der Code verändert werden muss.

Anstelle des eigentlichen Bildes setzen wir einen Platzhalter ein. Zum Beispiel ein 1×1 Pixel großes Bild, dass auf unserem Server liegt und natürlich verfügbar ist. Nachträglich ändern wir den src-Parameter des img-Elements.

Der Code sähe dann so aus:

1
2
3
4
5
6
7
8
9

<html>
    <head>
        <title>Speedtest #3</title>
    </head>
 
    <body onload="document.getElementsByTagName('img')[0].src = 'img/img.php'">
        <img alt="Speedtest" src="img/blank.jpg" />
    </body>
</html>

Wie bereits erwähnt, funktioniert diese Variante einwandfrei. Der Ladebalken ist verschwunden, obwohl das eigentliche Bild noch nicht geladen ist. Jedoch würden wir den Code des Anbieters verändern und das Ziel ist somit immer noch nicht erreicht.

Fazit

Es gibt zwar neben der vorgestellten Möglichkeit noch andere Varianten Bilder asynchron zu laden – um letztendlich den Ladebalken zu entfernen, darf das Bild jedoch noch nicht im HTML-Dokument vorhanden sein. Da dies leider von Anbietern wie Bloggerei gefordert wird, muss man sich wohl mit den längeren Ladezeiten bei Server-Problemen seitens des Anbieters zurechtfinden.

Falls mir doch jemand eine Lösung für das Problem nennen kann, wäre ich sehr dankbar!

Kategorie: Webentwicklung » HTML & CSS | Tags:

zum Artikel | 2 Kommentare

Bisher war es recht schwierig den Standort des Besuchers einer Website ausfindig zu machen. Mit HTML5 ist dies kein großes Problem mehr. Die GeoLocation-Funktion liefert den Standort des Besuchers bzw. dessen Geräts.

Die Funktion

In folgendem Beispiel lesen wir ganz einfach die Koordinaten des Besuchers aus. Natürlich muss dies vom Besucher bestätigt werden.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

var coords;
 
function getGeoLocation()
{
    if (navigator.geolocation) {
        // GeoLocation verfügbar
        navigator.geolocation.getCurrentPosition('saveCoords');
    } else {
        // GeoLocation nicht verfügbar
        alert('Die GeoLocation-Funktion wird von Ihrem Browser leider nicht unterstützt.');
    }
}
 
function saveCoords(position)
{
    coords = position.coords.latitude + ',' + position.coords.longitude;
}

Im der Funktion im Code-Beispiel wird zunächst überprüft, ob der Browser GeoLocation unterstützt. Falls nicht, wird eine Fehlermeldung ausgegeben. Ansonsten werden die Koordinaten des Besuchers abgespeichert und stehen zur Verwendung bereit.

Ein Beispiel

Wer sich eine fertige Anwendung ansehen möchte, kann dies unter html5demos.com/geo machen. Dort wird die aktuelle Position des Benutzers abgefragt und anschließend in Google Maps angezeigt.

Kategorie: Webentwicklung » HTML & CSS | Tags: GeoLocation, HTML5, Koordinaten, Standort

zum Artikel | keine Kommentare

1
2
3
4
5
6
7
8
9
10

<script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-XXXXX-X']);
    _gaq.push(['_trackPageview']);
    (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
    })();
</script>

Lesestoff zum Thema:

• Offizielle Ankündigung im Google Code Blog
• Dokumentation: Standardmethode
• Dokumentation: Asynchrone Methode

Kategorie: Webentwicklung » JavaScript | Tags: asynchron, Google, Google Analytics, Performance

zum Artikel | 2 Kommentare