Tworzenie stron internetowych
Automatyczne obracanie panoramy [Google Maps]
Jak automatycznie obracać panoramę z Google Street View?
Zastanawiasz się jak automatycznie przewijąc panoramę w Google Maps? Poniższy efekt możemy uzyskać w kilka minut.
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<style>
body, html {
height: 100%;
width: 100%;
padding: 0px;
margin:0px;
}
#panorama{
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<div id="panorama"></div>
<script>
var pano;
var speed = 30;
var latlng = new google.maps.LatLng(40.774971,-73.9666061);
var panoOptions = {
position: latlng,
pov: {
heading: 0,
pitch: 0
}
};
pano = new google.maps.StreetViewPanorama(document.getElementById('panorama'), panoOptions);
window.setInterval(function() {
var pov = pano.getPov();
pov.heading += 0.2;
pano.setPov(pov);
}, speed);
</script>
Pełny kod: (wersja full screen)
<DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Automatyczna panorma</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<style>
body, html {
height: 100%;
width: 100%;
padding: 0px;
margin:0px;
}
#panorama{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="panorama"></div>
<script>
var pano;
var speed = 30;
var latlng = new google.maps.LatLng(40.774971,-73.9666061);
var panoOptions = {
position: latlng,
pov: {
heading: 0,
pitch: 0
}
};
pano = new google.maps.StreetViewPanorama(document.getElementById('panorama'), panoOptions);
window.setInterval(function() {
var pov = pano.getPov();
pov.heading += 0.2;
pano.setPov(pov);
}, speed);
</script>
</body>
</html>
Wyjaśnienia:
latlng – dane GEO naszego punktu
speed – szybkość obracania
headin – określa kąt obrotu wokół położenia kamery (stopnie)
pitch – określa odchylenie kąta „w górę” lub „w dół” (stopnie)
Skrypt można dowolnie modyfikować i umieszczać na swojej stronie.
Jak używać breadcrumbs?
Wielu internautów oczekuje od stron internetowych, że będa miały wdrożone „breadcrumbs”.
Te z pozoru niezauważalne elementy nawigacji dają nam uproszczoną możliwość przeglądania serwisów www bez utraty świadomości gdzie się znajdujemy.
Niektóre breadcrumbs wpływają pozytywnie na odbiór stron przez użytkowników (UX), gdzie z kolei inne, powodują komplikację w nawigowaniu po serwisie www. Zbadajmy zatem jak breadcrumbs wpływa na UX oraz optymalizację SEO.
Czym są breadcrumbs?
Breadcrumbs – czyli okruszki chleba. Termin ten, został zaczerpnięty z bajki braci Grimm o Jasiu i Małgosi. Macocha głównych bohaterów porzuciła je w lesie mając nadzieję, że nigdy więcej ich nie zobaczy. Inteligentny Jaś jednak zostawiał po sobie ślad używając okruszków chleba. W ten sposób stworzył ścieżkę dzięki której dzieci mogły znaleźć drogę powrotną do domu. Okruszek po okruszku. Breadcrumbs na stronach internetowych opisują, ścieżkę “podróży” użytkownika.
Wielu programistów tworzy serwisy internetowe używając strony głównej jako punkt wyjściowy. Strona główna z kolei linkuję do kolejnych podstron takich jak np. strona kontaktowa, strona “o nas”, czy do podstron poszczególnych produktów. Każda z tych stron ma swoje miejsce w hierarchii serwisu. Breadcrumbs pomaga zwizualizować ten schemat i umożliwia poruszanie się wewnątrz niego. Nawigacja za pomocą breadcrumbs może wyglądać następująco:
Strona główna > Elektronika > AGD i RTV > Telewizory > Sony Trinitron 27
Jeżeli klientów nie interesuje telewizor sony, ale chcą kontynuować poszukiwania swojego upragnionego telewizora to jednym kliknięciem mogą dostać się się do kategorii zawierającej wszystkie telewizory. Natomiast gdy okaże się, że potrzebujemy czegoś więcej z działu elektroniki to wystarczy ponownie jedno kliknięcie i przenosimy się do sekcji związanej z elektroniką. Intuicyjne, prawda?
Nawigowanie po breadcrumbs zapewnia użytkownikom pewien kontekst, dzięki czemu mogą odpowiedzieć sobie na pytania:
- Gdzie obecnie jestem w odniesieniu do całej witryny?
- Jakie mam dostępne wybory do poruszania się po stronie? Breadcrumbs sprawiają, że każda sekcja jest łatwa do znalezienia.
- Czy chcę tam przejść? Breadcrumbs sugerują eksplorowanie stron internetowych, zachęcając użytkowników do przechodzenia do kolejnych miejsc.
Korzyści ze stosowania Breadcrumbs
Breadcrumbs ułatwia nawigację po witrynach internetowych w celu ulepszenia wrażeń użytkowników (UX) w następujący sposób:
- Odwiedzający wykonują mniej kroków.
Jeśli użytkownicy poszukują ciekawych treści a nie chcą opuszczać strony na której się znajdują mogą użyć breadcrumbs w celu pozyskania kolejnych treści (zamiast np. wrócić do strony głównej). - Breadcrumbs wyjaśniają nawigowanie po stronie.
Często użytkownicy nie są pewni, czego szukają, ale czują, że będą wiedzieli, kiedy to zobaczą. Dopóki mogą przejść płynnie przez poszczególne pozycje strony internetowej, każdy krok przybliża ich do celu. Jeśli muszą pójść w danym kierunku, mogą stracić ścieżkę by następnie zdecydować, że jednak nie są zainteresowani danym obszarem strony. Breadcrumbs pomaga odnaleźć drogę powrotną. - Efektywnie wykorzystują przestrzeń.
Breadcrumbs to prosty tekst z poziomymi liniami, które nie przyczyniają się do przeciążenia treści na stronach internetowych.
Kiedy używać breadcrumbs?
Decydując się na użycie breadcrumbs musisz pamiętać, że Twoja strona musi być podzielona na sekcje i podsekcje. Poszczególne podstrony powinny być zgrupowane według powiązanych kategorii, dzięki czemu zadbamy o poprawne UX. Breadcrumbs nie są przydatne przy w witrynach, których podstrony nie są w żaden sposób zgrupowane, np blogi z niepowiązanymi tematami itd.
Typy breadcrumbs
Breadcrumbs może określać pozycję, ścieżkę lub charakterystykę strony:
- Pozycja.
Jeśli strony internetowe posiadają więcej niż dwa poziomy, breadcrumbs wskazują położenie każdej podstrony w stosunku do pozostałych. Na przykład jeśli użytkownicy wyszukują „dywan w kolorze turkusowym” i wybiorą link, który przeniesie ich do określonego produktu, mogą zdać sobie sprawę, że chcieliby zobaczyć inne produkty tego samego sprzedawcy. Być może nigdy nie byli na innych podstronach w serwisie, a breadcrumbs sugerują, że mogą poznać kolejne elementy serwisu. Każdy link tekstowy breadcrumbs przenosi użytkowników o jeden poziom wyżej. - Ścieżka nawigacyjna.
Pokazuje, że każdy krok użytkownika przybliżył go do celu. Jeśli chodzi o historię ścieżki po której poruszał użytkownik, breadcrumbs stają się mniej użyteczne jeśli użytkownicy przejdą na stronę bezpośrednio z wyszukiwarki. - Elementy zgrupowane według właściwości.
Serwisy ecommerce często używają tego rodzaju ścieżki nawigacyjnej do grupowania podobnych produktów.
Twórcy stron internetowych mogą mieszać powyższe typy breadcrumbs aby ułatwić odwiedzającym nawigowanie. Na przykład ścieżka nawigacji dla witryny hipermarketu może wyglądać następująco:
Strona główna > Ubrania > Odzież Damska > Piżamy i Szlafroki > Koszulki Spodenki > Koszulki z długim rękawem
Pierwsze trzy kategorie są oparte na lokalizacji. Ostatnie trzy elementy są podzielone ze względu podobne cechy charakterystyczne dla każdego poziomu.
Breadcrumbs a SEO
Od kiedy wyszukiwarki nieustannie rozwijają swoje reguły określające pozycję stron internetowych w wynikach wyszukiwania to, specjaliści od SEO nie są zgodni jak duże znaczenie ma stosowanie breadcrumbs w optymalizacji stron www pod kątem wyszukiwarek. Jednakże większość z nich zgadza się, że breadcrumbs może pomóc. Należy pamiętać, że ich podstawową funkcją jest poprawa UX.
„Coming Soon Page”. Dobre praktyki.
Co należy zrobić, gdy strona internetowa jest w budowie i nie jesteś jeszcze gotów na jej uruchomienie?
Niezależnie od tego, czy projektujesz stronę prezentującą nowy produkt lub aplikację, czy po prostu tworzysz nową wersję swojej strony internetowej warto stworzyć “Coming Soon Page”. Dobrze przygotowana “strona w budowie” może pomóc Ci zdobyć potencjalnych klientów. Zajawka strony być dobrym narzędziem promocyjnym, marketingowym dla niektórych serwisów internetowych. Dobrze zaprojektowany Landing Page może przyciągnąć uwagę dla nowej aplikacji lub produktu – jest to dość popularne rozwiązanie.
Kilka porad…
To czego potrzebujesz by stworzyć efektowne “Coming Soon Page” to nie tylko zestaw kolorów czy ładnych zdjęć. Potrzebujesz takich komponentów, które będą potrafiły zaangażować odwiedzających użytkowników.
Najlepsze tego typu strony nie są skomplikowane, zawierają tylko jedną rzecz którą chcemy by wykonali nasi odwiedzający. Nie twórz zbyt wielu opcji. Pamiętaj, że Landing Page to tylko zwiastun Twoje docelowej strony internetowej.
Pomyśl o atrakcyjnych graficznie elementach jak licznik, który będzie odliczać czas do uruchomienia pełnej wersji Twojej strony lub np. rozpoczęcia sprzedaży danego produktu. Pamiętaj by czas który odliczasz miał pokrycie w rzeczywistości!
Bardzo często stosuje się formularz, za pomocą którego zbieramy adresy e-mail zainteresowanych nami osób. Dzięki czemu po uruchomieniu właściwej wersji strony internetowej możemy poinformować o tym fakcie naszych potencjalnych klientów. Konwersja w tym przypadku jest wyjątkowa wysoka.
Tworząc “Coming Soon Page” używaj kolorystyki, typografii czy zdjęć, które są ściśle powiązane z Twoja marką. Użytkownicy muszą czuć, że Landing Page jest elementem Twojej docelowej strony a nie jej odrębnym tworem.
Dołącz logo i krótki opis tego czym się zajmujesz. W przypadku nowej marki lub wprowadzenia produktu użytkownicy potrzebują wystarczających informacji, aby wiedzieć, że są zainteresowani tym, co oferujesz.
Jeżeli potrzebujesz pomocy w zaprojektowaniu strony internetowej służymy pomocą!
