Share
Asumarea poate fi o afacere riscantă în lumea UX, dar unele presupuneri vă pot permite să furnizați vizitatorilor dvs. o experiență mai adaptată pentru utilizatori. Ne vom uita la îmbunătățirea experienței utilizatorilor, făcând conștienți de localizarea site-urilor web.
Experiența utilizatorilor a început să fie în fruntea designului web în ultimii zece ani. În calitate de utilizatori, suntem în mod constant rugați să furnizăm informații actualizate despre noi înșine. Orice din Twitter ne întreabă "Ce se întâmplă?" la Facebook, care ne întreabă ce ne place. Toate acestea permit acestor companii, printre altele, să vă construiască un profil destul de detaliat și precis, astfel încât să vă poată oferi o experiență de utilizare mai personală.
În jurul aceluiași moment în care HTM5 a fost anunțat, un alt API a fost introdus de noi de la W3C. Sunt sigur că ați auzit de ea; API-ul Geolocation. Acest lucru permite site-ului dvs. să primească informații de poziționare geografică utilizând JavaScript.
Datele de geolocație pot fi accesate prin diferite surse diferite. În mod tradițional pe site-uri web, acesta ar fi determinat de adresa IP a vizitatorului. Se va conecta apoi la un serviciu WHOIS și va prelua adresa fizică a vizitatorului de la informațiile despre cine. Recent, totuși, un mod mai popular și mai precis de a accesa aceste informații a devenit obișnuit; utilizând un cip GPS integrat. Acestea se regăsesc în majoritatea telefoanelor și tabletelor inteligente și sunt responsabile de creșterea popularității serviciilor de localizare pe care le putem folosi. Gândiți-vă la Foursquare sau la orice altă aplicație pe care s-ar putea să o verificați.
În specificația API, publicată de W3C, se menționează:
Agenții de utilizare nu trebuie să trimită informații despre locație pe site-uri Web fără permisiunea expresă a utilizatorului.
Înainte ca un dispozitiv sau un browser să poată accesa datele de geolocație ale unui vizitator, vizitatorul trebuie să îl autorizeze mai întâi. Acesta este modul în care apare în Google Chrome:
Acum, mai mult ca niciodată, utilizatorii iau notă despre informațiile pe care le stochează site-urile web despre aceștia și utilizatorii dvs. vor trebui să se simtă încrezători în ceea ce utilizează datele lor. Îi informați cu privire la exact de ce aveți nevoie de aceste informații și subliniați cum le va fi util pentru a crea o experiență online mai bună.
Cand utilizând un site sau o aplicație de geolocație este o bună practică de a controla cantitatea de informații pe care le distribuiți altor persoane. Cele mai multe aplicații și servicii de distribuire a locației oferă un fel de control al confidențialității, deci asigurați-vă că utilizați acest lucru și că nu vă distribuiți niciodată adresa dvs. personală.
După ce ai un site sau o aplicație care ține cont de locație, poți oferi un conținut mai precis și mai potrivit pentru vizitatorii tăi. Să aruncăm o privire la modul în care geolocația poate fi utilă.
Geomarketingul este un termen relativ nou și poate fi descris ca:
Integrarea inteligenței geografice în diferite aspecte ale marketingului, inclusiv vânzări și distribuție.
Deși un nou termen, principiul actual al marketingului geografic a fost în jur de ceva timp. Facebook utilizează această abordare de ceva timp. Facebook ar colecta date bazate pe localizare (bazate pe adresele IP ale utilizatorilor), apoi va afișa anunțuri adecvate pentru regiunea geografică respectivă. Google și alte motoare de căutare au folosit de asemenea acest lucru și includ rezultatele de căutare bazate pe locație pentru utilizatorii lor.
Nu numai comercianții care beneficiază de servicii de geolocație pot beneficia, dar și modelele creative le-au folosit (probabil fără să-și dea seama). Oamenii l-au folosit pentru a avea acces la un număr mare de oameni, toți aceștia fiind situați în aceeași zonă și au același scop de a "face ceva să se întâmple". Acestea pot varia de la flash mobs, la rutine de dans la scară largă, la crearea de grupuri comunitare pentru persoanele care au interese similare.
Acesta a fost, de asemenea, utilizat în situații precum cutremurul din Haiti în 2010, când grupuri mari de oameni obișnuiți s-au adunat pentru a crește ajutorul prin intermediul rețelelor sociale și al locației geografice.
Recent, o mulțime de "site-uri de ofertă" au început să apară peste tot. Cel mai important este Groupon, care a fost lansat în noiembrie 2008. Groupon oferă servicii de deservire pentru utilizatorii săi și, în fiecare zi, site-ul are o cantitate prestabilită de oferte pentru fiecare ofertă. Fiecare element trebuie să fie interesat de utilizatori suficient pentru a se înscrie pentru oferta respectivă; pe aceasta o primesc, dar numai dacă ajunge la numărul de oameni predeterminați.
Acest concept reduce riscul pentru comercianții cu amănuntul și le permite să vândă în vrac, făcând conceptul un câștigător pe tot parcursul anului. Puterea Grupului se află în cadrul integrării strânse pe care o are cu locația utilizatorilor. Oferind utilizatorilor oferte locale și ofertele sale a devenit unul dintre cele mai populare site-uri de cupoane și a avut replicat formatul de mai multe ori.
Acum înțelegeți mai mult despre geolocație, să aruncăm o privire la câteva exemple din lumea reală.
Site-ul de groază din stâncă vă permite să obțineți emisiuni pentru spectacol în locații care vă sunt aproape. Pur și simplu mergeți pe site și faceți clic pe "Găsiți locația mea".
Folosind aceeași tehnologie, Flickr arată ce au încărcat alții pe site-ul web aproape de locul unde te afli.
Mapumanetal a venit în 2006, când Departamentul pentru Transporturi din Marea Britanie a contactat lansarea pentru a lucra cu informațiile pe care le dețineau cu privire la datele de transport public. Ei descriu ceea ce fac la Mapumental ca "Noi creăm hărți care îi ajută pe oameni să ia decizii mai bune, mai repede". Acesta oferă o varietate de instrumente și servicii care oferă modalități de vizualizare a datelor de călătorie în timp real.
Dacă nu ați implementat anterior geolocație în niciun site sau aplicație, atunci vestea bună este că nu ar putea fi mai simplă. În acest tutorial vă voi arăta cum puteți obține locația unui utilizator pe site-ul dvs. web sau pe o aplicație web.
Am proiectat acest lucru astfel încât să puteți adăuga pe site-ul dvs. destul de ușor. Scopul este ca utilizatorul să apese un buton care va obține apoi locația acestuia, afișându-l pe site cu puțin ajutor din API-urile Google Maps.
Începem cu un înveliș pentru a centra designul. Am ales să faceți acest lucru la o lățime de 960 pixeli, dar puteți opta să utilizați orice dimensiune potrivită pentru designul dvs. În cadrul acestei "împachetări" am creat un div, unde harta va sta când va fi generată. Am dat acest ID de "Map".
În cadrul diviziei "Map" am apoi un interval de timp pe care l-am dat o clasă numită "ajutor". Acesta va fi un mic ghid de ajutor care va instrui utilizatorul ce trebuie sa faca. Acest lucru poate părea puțin inutil, dar este întotdeauna o bună practică de a ajuta utilizatorii atunci când este posibil.
Apoi avem o imagine preloader pe care am dat-o ID-ul de "preloader". Dacă sunteți în căutarea de a găsi preloaders atunci puteți verifica preloaders.net.
Așa trebuie să aveți până acum:
Dați clic pe butonul de mai jos pentru a afișa locația dvs. pe hartă
După divizarea 'hartă' folosesc o etichetă de ancorare simplă care va acționa ca un buton pentru clic pe utilizator. Acest lucru are o clasă de (după cum ați ghicit-o) 'buton'.
Odată ce utilizatorul a dat clic pe buton, nu numai că vrem să afișăm harta, dar, de asemenea, ar putea fi util să afișăm locația, longitudinea și latitudinea utilizatorului. Pentru aceasta am creat un div cu un ID de "rezultate" care conține apoi trei spanuri fiecare cu o clasă relevantă. Pentru marcarea asta este. Acesta este scopul pe care ar trebui să-l aibă întregul markup:
Dați clic pe butonul de mai jos pentru a afișa locația dvs. pe hartăGăsiți locația mea
CSS este destul de simplă. Aici este în întregime:
@charset "utf-8"; html background: # 222222; font-family: helvetica, arial, sans-serif; .wrapper width: 960px; marja: 0 auto; Poziția: relativă; #map poziție: relativă; text-align: centru; culoare: # 363535; text-transform: majuscule; lățime: 425px; înălțime: 350px; marja: 0 auto; margin-top: 20px; padding: 5px; frontieră: 1px solid negru; fundal: # 474747; box-shadow: 0px 0px 3px 3px rgba (0, 0, 0, .3); #map.helper display: bloc; font-weight: bold; font-size: 12px; culoare: rgb (54, 54, 54); lățime: 180px; înălțimea liniei: 135%; marja: 0 auto; margin-top: 140px; #map #preloader poziție: absolută; top: 141px; stânga: 190px; display: none; #map iframe graniță: 1px solid negru; butonul padding: 13px 40px; background-color: # 00caa7; Culoare: # 00caa7; border-radius: 3px; culoare albă; display: block; text-decoration: none; box-shadow: inset 0px 1px 0px rgba (255, 255, 255, 0.3); lățime: 122px; marja: 0 auto; margin-top: 20px; .button: mutați background-color: # 00b495 #results culoare: rgb (0, 180, 149); poziția: absolută; margin-top: 20px; text-align: centru; linia-înălțime: 23px; lățime: 100%;
Un lucru de remarcat este că preloaderul este singurul element div care este absolut poziționat. Acest lucru este absolut poziționat în legătură cu diviziunea "hartă". Pentru a realiza acest lucru, asigurați-vă că harta "div" are poziția sa setată la relativă. Acest lucru va permite ca preloader-ul să fie poziționat la părintele său, spre deosebire de întregul document.
Google oferă o gamă de API-uri pentru serviciile sale MAP care sunt libere până la anumite limite de utilizare. După aceasta, se vor aplica taxe.
Din fericire, ambele servicii pe care le vom folosi sunt complet gratuite; în fapt, una dintre tehnici nu utilizează deloc API-ul, în schimb folosindu-se iframe-ul embed-ului standard al hărții în care vom schimba unele dintre valorile pe care le primim din browser-ul utilizatorului.
În primul rând, în unele >
Accentsconagua
butonul var = jQuery (butonul "."); var preloader = jQuery ('preloader'); var longitudediv = jQuery ("longitudine"); var lattitudediv = jQuery ("latură"); var locațiediv = jQuery ("locație"); Odată ce am făcut asta, trebuie să verificăm dacă browserul acceptă API-ul Geolocation. Putem testa acest lucru cu următoarea declarație "if".
dacă (navigator.geolocation) // Browser acceptă, suntem bine să mergem! else alert ("Îmi pare rău că browserul dvs. nu acceptă API-ul de localizare"); Odată ce am stabilit suportul browserului, vom detecta apoi butonul de clic în cadrul părții în care este comentat "Browserul acceptă acest lucru, suntem bine să mergem".
Evenimentul cu click pe buton ar trebui să arate astfel:
button.click (funcția (e) e.preventDefault (); preloader.show (); navigator.geolocation.getCurrentPosition (exportPosition, errorPosition););
Odată ce butonul a fost apăsat, se va afișa preloaderul. Partea importantă de analizat aici este cea de-a doua linie până la ultima care conține "navigator". Ceea ce se spune în mod eficient este: "a obține locația utilizatorilor și dacă trimiteți cu succes poziția locației la funcția" exportPosition ", trimiteți altfel o eroare funcției errorPosition".
Deci, hai să intrăm și să creăm aceste funcții. Funcția de eroare este destul de dreaptă:
function errorPosition () alert ('Ne pare rău că nu s-ar putea găsi locația ta'); pretext.show (); În funcția de mai sus puteți observa că funcția va alerta și se va afișa eroarea, apoi se va afișa din nou preîncărcătorul.
În funcția de succes de mai jos, care se numește 'exportPosition', obținem latitudinea și longitudinea furnizate de API-ul geolocație și le setăm ca variabile cu același nume.
Odată ce le avem, le putem folosi în codul de încorporare iframe din Hărți Google. De asemenea, le putem folosi în cadrul deschiderilor care afișează longitudinea și latitudinea pentru utilizator. Iată cum arată:
funcția exportPosition (poziție) // Obțineți proprietățile de localizare și le setați ca variabile latitude = position.coords.latitude; longitude = position.coords.longitude; // Introduceți iframe google maps și schimbați locația utilizând variabilele returnate din jQuery API ('# map') html ('„); longitudediv.html ("Longitudine:" + longitudine); lattitudediv.html ('Latitude:' + latitudine); Partea importantă este adresa urlului iframe. În url am inserat variabilele "+ latitude +" și "+ longitudine +". Aproape de aceasta arata:
Aceasta va insera MAP-ul în div "#map" div și va arăta longitudinea și latitudinea pentru utilizator. Există și încă un lucru pe care ne-ar plăcea să-l cunoaștem; acesta fiind numele locației utilizatorului. Pentru a face acest lucru, trebuie să sunăm la API-ul Google Maps prin AJAX. Adăugăm această funcție AJAX în cadrul funcției "exportPosition". Aceasta arata ca:
// Apelați la Google Maps api pentru a obține numele locației jQuery.ajax (url: 'http://maps.googleapis.com/maps/api/geocode/json?latlng='+latitude+', '+ longitudine +' & senzor = adevărat ', tastați:' POST ', dataType:' json ', success: function (data) // Dacă reușiți să adăugați datele la locația div' locationdiv.html ' date.results [0] .address_components [2] .long_name);, eroare: funcție (xhr, textStatus, errorThrown) errorPosition (););
În răspunsul de succes luăm numele locației primite înapoi din apelul AJAX și îl adăugăm în intervalul ".locație". Dacă, din orice motiv, există o eroare în acel apel, atunci acesta va rula funcția "errorPosition" și va avertiza utilizatorul că nu și-a găsit locația.
API-ul Geolocation funcționează în toate browserele moderne. Cu toate acestea, unele versiuni de utilizare a Safari CoreLocation pentru a obține date de geolocație, ceea ce înseamnă că trebuie să fiți conectat la internet utilizând WIFI. Dacă sunteți conectat prin Ethernet sau similar, atunci este posibil să aveți probleme cu strângerea datelor despre locație.
De asemenea, merită să subliniem că aceste fișiere tutorial trebuie să fie încărcate pe un server web live pentru a funcționa și nu vor funcționa pe localhost.
Sper că acum aveți o mai bună înțelegere a API-ului de geolocație, cum funcționează și cum îl puteți implementa cu foarte puțin efort. Folosind localizarea geografică într-o manieră creativă și eficientă, acum ar trebui să puteți oferi o experiență mai bună utilizatorilor.
Ați implementat API-ul de localizare în orice site pe care ați lucrat pentru a încuraja o experiență mai bună a utilizatorului? Ați văzut-o folosită într-un mod minunat și creativ? Spuneți-ne în comentariile de mai jos.
