Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. UX
Webdesign

Websites mit HTML5-Geolokalisierung positionieren

by
Length:LongLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Die Annahme kann in der Welt von UX ein riskantes Geschäft sein, aber einige Annahmen können es Ihnen ermöglichen, Ihren Besuchern eine individuellere Benutzererfahrung zu bieten.  Wir werden uns darum bemühen, das Benutzererlebnis zu verbessern, indem Sie den Standort Ihrer Websites besser kennenlernen.

Die Benutzererfahrung ist in den letzten zehn Jahren an die Spitze des Webdesigns getreten.  Als Benutzer werden wir ständig aufgefordert, aktualisierte Informationen über uns bereitzustellen.  Irgendetwas von Twitter fragt uns "Was ist los?" an Facebook und fragt uns, was uns gefällt.  All dies ermöglicht es diesen Unternehmen unter anderem, ein ziemlich detailliertes und genaues Profil von Ihnen aufzubauen, um Ihnen eine persönlichere Benutzererfahrung zu bieten.

Etwa zur gleichen Zeit, als HTM5 angekündigt wurde, wurde uns eine andere API von W3C vorgestellt.  Ich bin mir ziemlich sicher, dass Sie davon gehört haben. die Geolocation-API.  Auf diese Weise kann Ihre Website geografische Positionsinformationen mithilfe von JavaScript empfangen.


Wie funktioniert Geolocation?

Auf Geolocation-Daten kann aus verschiedenen Quellen zugegriffen werden. Auf Websites wird dies traditionell durch die IP-Adresse eines Besuchers bestimmt.  Es würde sich dann mit einem WHOIS-Dienst verbinden und die physische Adresse des Besuchers von den Whois-Informationen abrufen.  In letzter Zeit ist jedoch ein populärer und genauerer Zugang zu diesen Informationen üblich geworden; Verwenden eines eingebauten GPS-Chips.  Diese befinden sich in den meisten Smartphones und Tablets und sind für die zunehmende Beliebtheit von ortsabhängigen Diensten verantwortlich, die wir möglicherweise verwenden.  Denken Sie an Foursquare oder an eine andere App, in die Sie einchecken könnten.


Datenschutz der Benutzer

In der vom W3C freigegebenen API-Spezifikation heißt es:

Benutzerprogramme dürfen Standortinformationen nicht ohne ausdrückliche Erlaubnis des Benutzers an Websites senden.

Bevor ein Gerät oder Browser auf die Geolokalisierungsdaten eines Besuchers zugreifen kann, muss der Besucher diese zuerst genehmigen.  So erscheint es in Google Chrome:

Mehr als je zuvor bemerken Benutzer, welche Informationen Websites über sie speichern, und Ihre Benutzer müssen sich darauf verlassen können, wofür Sie ihre Daten verwenden.  Informieren Sie sie genau, warum Sie diese Informationen benötigen, und weisen Sie darauf hin, wie dies für sie hilfreich sein kann, um ein besseres Online-Erlebnis zu schaffen.

Bei der Verwendung einer Geolocation-Website oder -Anwendung sollten Sie die Menge der Informationen, die Sie mit anderen Personen teilen, kontrollieren.  Die meisten Apps und Dienste für die Standortfreigabe bieten eine Art Datenschutzkontrolle. Stellen Sie also sicher, dass Sie diese verwenden und geben Sie niemals Ihre persönliche Adresse weiter.


Verwendet für Geolocation

Sobald Sie eine Site oder App mit Ortsbezug haben, können Sie Ihren Besuchern genauere und angemessenere Inhalte bereitstellen.  Lassen Sie uns einen Blick darauf werfen, wie Geolocation nützlich sein kann.

Geomarketing

Geomarketing ist ein relativ neuer Begriff und kann wie folgt beschrieben werden:

Die Integration geografischer Informationen in verschiedene Aspekte des Marketing einschließlich Vertrieb und Vertrieb.

Obwohl es sich um einen neuen Begriff handelt, gibt es seit einiger Zeit das eigentliche Prinzip des Geomarketing. Facebook nutzt diesen Ansatz schon seit einiger Zeit. Facebook würde daraus ortsbezogene Daten (basierend auf den IP-Adressen der Nutzer) abrufen und dann die für diese geografische Region geeigneten Anzeigen schalten.  Google und andere Suchmaschinen haben dies ebenfalls genutzt und enthalten standortbasierte Suchergebnisse für ihre Nutzer.

Crowdsourcing

Es sind nicht nur Vermarkter, die von Geolocation-Services profitieren können, sondern auch Kreativtypen haben es genutzt (wahrscheinlich ohne es zu merken).  Die Menschen haben es genutzt, um Zugang zu einer großen Anzahl von Menschen zu erhalten, die sich alle in derselben Gegend befinden und das gleiche Ziel haben, "etwas geschehen zu lassen".  Dies kann von Flashmobs über umfangreiche Tanzroutinen bis hin zum Erstellen von Community-Gruppen für Personen mit ähnlichen Interessen reichen.

Es wurde auch in Situationen wie dem Erdbeben in Haiti im Jahr 2010 eingesetzt, als sich große Gruppen von Menschen versammelten, um Hilfe durch soziale Netzwerke und Geo-Standorte zu sammeln.

Bietet an

In letzter Zeit sind überall "Angebotsseiten" entstanden.  Vor allem Groupon wurde im November 2008 gegründet.  Groupon bietet seinen Nutzern tagesaktuelle Serviceleistungen an, und an jedem Tag hat die Website eine vordefinierte Anzahl von Angeboten für jedes Angebot.  Jeder Artikel muss genug Benutzer interessieren, um sich für dieses Angebot zu registrieren. Auf diese Weise erhalten sie es, aber nur, wenn es die Anzahl der vorbestimmten Personen erreicht.

Dieses Konzept reduziert das Risiko für Einzelhändler und ermöglicht es ihnen, in großen Mengen zu verkaufen, wodurch das Konzept rundum gewinnbringend wird.  Die Stärke von Groupon liegt in der engen Integration mit dem Standort des Benutzers.  Durch das Angebot lokaler Angebote und Angebote hat sich der Benutzer zu einer der beliebtesten Coupon-Websites entwickelt und sein Format wurde mehrfach repliziert.


Praktische Beispiele

Nun verstehen Sie etwas mehr über Geolocation. Schauen wir uns einige Beispiele aus der realen Welt an.

Die Rocky Horror Show

Auf der Rocky-Horror-Website können Sie sich die Showtime an Orten in Ihrer Nähe ansehen.  Gehen Sie einfach auf die Website und klicken Sie auf "Find my location".

Flickr-Orte

Mit derselben Technologie zeigt Flickr, was andere Nutzer auf die Website in Ihrer Nähe hochgeladen haben.

Mapumental

Mapumanetal kam 2006 auf den Markt, als die britische Verkehrsbehörde das Startup kontaktierte, um mit den Informationen zu Daten des öffentlichen Verkehrs zu arbeiten.  Sie beschreiben, was sie bei Mapumental tun: "Wir erstellen Karten, mit denen die Menschen schneller bessere Entscheidungen treffen können." Es bietet eine Vielzahl von Tools und Services, mit denen Echtzeit-Reisedaten visualisiert werden können.


Geolocation implementieren

Wenn Sie bisher keine Geolocation in Websites oder Apps implementiert haben, ist die gute Nachricht so einfach, dass es nicht einfacher sein könnte.  In diesem Tutorial werde ich zeigen, wie Sie den Standort eines Benutzers auf Ihrer Website oder Web-App ermitteln können.

Das HTML-Markup

Ich habe dies so gestaltet, dass Sie es ganz einfach auf Ihrer eigenen Website hinzufügen können.  Ziel ist es, dass der Nutzer eine Schaltfläche drückt, die seinen Standort abruft und auf der Website mit Hilfe der Google Maps-APIs angezeigt wird.

Wir beginnen mit einem Wrapper, um das Design zu zentrieren.  Ich habe mich dafür entschieden, dies bei 960px zu tun, aber Sie können wählen, welche Größe Sie für Ihr Design benötigen.  In diesem 'Wrapper' habe ich ein div erstellt, in dem sich die Map befindet, sobald sie erstellt wurde.  Ich habe hier eine ID von 'Map' gegeben.

Innerhalb des Bereichs "Map" habe ich dann eine Spanne, die ich als "Helfer" bezeichnete.  Dies wird eine kleine Helferanleitung sein, die den Benutzer anweist, was er tun muss.  Dies mag ein wenig unnötig erscheinen, aber es ist immer ratsam, Benutzern zu helfen, wenn möglich.

Wir haben dann ein Preloader-Image, das ich als 'Preloader' bezeichnet habe.  Wenn Sie nach Preloadern suchen, können Sie sich unter preloaders.net informieren.

Das sollten Sie bisher haben:

Nach dem 'map' div verwende ich ein einfaches Ankertag, das als Schaltfläche für den Benutzer fungiert.  Dies hat eine Klasse von (Sie haben es erraten) "Button".

Nachdem der Benutzer auf die Schaltfläche geklickt hat, möchten wir nicht nur die Karte anzeigen, sondern auch die Position, den Längengrad und den Breitengrad des Benutzers anzeigen.  Dafür habe ich ein div mit einer ID von 'results' erstellt, die dann drei Bereiche mit jeweils einer relevanten Klasse enthält.  Für das Markup ist es das.  So sollte das gesamte Markup aussehen:

Das CSS

Das CSS ist ziemlich unkompliziert.  Hier ist es voll:

Zu beachten ist, dass der Preloader das einzige Div-Element ist, das absolut positioniert ist.  Dies ist absolut in Bezug auf die 'map' div positioniert.  Um dies zu erreichen, stellen Sie einfach sicher, dass die Position von 'map' auf relativ gesetzt ist.  Dadurch kann der Preloader gegenüber dem gesamten Dokument gegenüber dem übergeordneten Dokument positioniert werden.

jQuery

Google bietet eine Reihe von APIs für seine MAP-Dienste an, die bis zu bestimmten Nutzungsgrenzen kostenlos sind.  -Tags oder in einer separaten JavaScript-Datei einige Variablen für die HTML-Elemente, auf die wir über jQuery abzielen. Danach fallen Gebühren an.

Glücklicherweise sind beide Dienste, die wir nutzen werden, völlig kostenlos. Tatsächlich verwendet eine der Techniken die API überhaupt nicht. Stattdessen wird das Standard-Map-Embed-iframe verwendet, in dem wir einige Werte ändern, die wir vom Browser des Benutzers erhalten.

Zunächst definieren wir in einigen <script>-Tags oder in einer separaten JavaScript-Datei einige Variablen für die HTML-Elemente, auf die wir über jQuery abzielen.

Anschließend müssen wir überprüfen, ob der Browser die Geolocation-API unterstützt.  Wir können dies mit der folgenden 'if'-Anweisung testen.

Sobald wir die Browser-Unterstützung eingerichtet haben, erkennen wir das Klicken der Schaltfläche innerhalb des Teils, in dem es kommentiert ist: "Browser unterstützt es, wir können es tun".

Das Button-Click-Ereignis sollte folgendermaßen aussehen:

Nachdem Sie auf die Schaltfläche geklickt haben, wird der Preloader angezeigt.  Der wichtige Teil, den Sie hier sehen sollten, ist die vorletzte Zeile, die 'Navigator' enthält.  Dies bedeutet im Wesentlichen: "Den Standort des Benutzers abrufen und bei Erfolg die Standortposition an die 'exportPosition'-Funktion senden, andernfalls einen Fehler an die errorPosition-Funktion senden".

Lass uns also einsteigen und diese Funktionen erstellen.  Die Fehlerfunktion ist ziemlich einfach:

In der obigen Funktion können Sie sehen, dass die Funktion Warnungen und Fehler ausgibt und den Preloader erneut anzeigt.

In der Erfolgsfunktion, unterhalb derer als 'exportPosition' bezeichnet wird, werden die von der Geolocation-API bereitgestellten Längen- und Breitengrade abgerufen und als Variablen mit demselben Namen festgelegt.

Sobald wir diese haben, können wir sie innerhalb des iframe-Einbettungscodes von Google Maps verwenden.  Wir können sie auch innerhalb der Bereiche verwenden, die dem Benutzer Längen- und Breitengrad anzeigen.  So sieht es aus:

Der wichtige Teil ist die iframe-URL.  Innerhalb der URL füge ich die Variablen '+ Latitude +' und '+ Longitude +' ein.  Aus der Nähe sieht das so aus:

Dies fügt den MAP in das '#map' div ein und zeigt dem Benutzer Längen- und Breitengrad an.  Es gibt noch eine weitere Sache, die wir gerne wissen würden. Dies ist der Name des Standorts des Benutzers.  Dazu müssen Sie die Google Maps-API über AJAX aufrufen.  Wir fügen diese AJAX-Funktion innerhalb der 'exportPosition'-Funktion hinzu.  Das sieht so aus:

In der Erfolgsantwort nehmen wir den Namen des Standortes zurück, der vom AJAX-Aufruf empfangen wurde, und fügen ihn dem Bereich '.location' hinzu.  Wenn aus irgendeinem Grund ein Fehler in diesem Aufruf auftritt, wird die Funktion 'errorPosition' ausgeführt und der Benutzer wird darauf hingewiesen, dass er seinen Standort nicht finden konnte.

Die Geolocation-API funktioniert in allen modernen Browsern.  Wenn Sie über Ethernet oder Ähnliches Corelocation sind, können Probleme beim Erfassen der Standortdaten auftreten. Dies bedeutet, dass Sie über WIFI mit dem Internet verbunden sein müssen.  Wenn Sie über Ethernet oder Ähnliches verbunden sind, können Probleme beim Erfassen der Standortdaten auftreten.

Es muss auch darauf hingewiesen werden, dass diese Tutorial-Dateien auf einen Live-Webserver hochgeladen werden müssen, damit sie funktionieren und auf Localhost nicht funktionieren.


Fazit

Ich hoffe, Sie haben jetzt ein besseres Verständnis für die Geolocation-API, wie sie funktioniert und wie Sie sie mit sehr geringem Aufwand implementieren können.  Durch die Verwendung von Geolocation auf kreative und effektive Weise sollten Sie jetzt in der Lage sein, Ihren Benutzern eine bessere Benutzererfahrung zu bieten.

Haben Sie die Geolocation-API in Websites implementiert, an denen Sie gerade gearbeitet haben, um die Benutzererfahrung zu verbessern?  Haben Sie gesehen, dass es cool und kreativ verwendet wurde?  Lass es uns in den Kommentaren wissen.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.