Scott Tiger Tech Blog

Blog technologiczny firmy Scott Tiger S.A.

Archiwum: 'HTML5' Kategorie

Beacon API

Autor: Piotr Karpiuk o 27. czerwca 2016

Archaiczny protokół HTTP stosowany w przeglądarkach WWW ma sporo wad. Jak na przykład powiadomić serwer, że użytkownik przestał korzystać z witryny (zamknął okno lub zakładkę z witryną, kliknął link prowadzący do innej witryny)? Ma to duże znaczenie dla celów analitycznych (informacje zwrotne dla twórców treści i reklamodawców), ale również dla twórców aplikacji webowych – chodzi o wyznaczenie momentu w którym można zamknąć sesję użytkownika, wylogować go i zwolnić zasoby serwera. JavaScript oferuje zdarzenie unload, które można przechwycić, ale jego obsługa niesie ze sobą ograniczenia: nie można w nim wykonać asynchronicznego wywołania AJAX. Deweloperzy radzą sobie z tym wykonując synchroniczne wywołanie AJAX (co niepotrzebnie wydłuża czas zamknięcia strony i/lub przejścia do nowej witryny), albo uciekając się do ryzykownych (niestandardowych) sztuczek takich jak tworzenie obiektu Image i wysyłanie danych do serwera w atrybucie src.
Beacon API (Chrome, Firefox, Opera) proponuje eleganckie rozwiązanie: asynchroniczne wysłanie sygnału w tle:

window.addEventListener('unload', function() { navigator.sendBeacon("/log", analyticsData); }, false);

Napisany w HTML5, Nowoczesne przeglądarki WWW, WWW | Brak komentarzy »

OpenStreetMap: interaktywna mapa 3D

Autor: Piotr Karpiuk o 20. kwietnia 2016

Spośród obejrzanych różnych wizualizacji bazy danych OpenStreetMap, szczególne wrażenie zrobiła na mnie interaktywna wizualizacja 3D w przeglądarce wykonana przez firmę F4Map. Kliknij w poniższy obrazek, aby polatać sobie trochę nad Warszawą, lub innym wybranym przez siebie miejscem na świecie. Do poruszania się używamy klawiszy strzałek oraz PgUp/PgDown. Przeglądarka musi obsługiwać WebGL (większość już obsługuje).


Źródło: F4map.com

Napisany w Bazy danych, datavis, GIS, HTML5, WWW | Brak komentarzy »

Polski OpenStreetMap: struktura i zawartość

Autor: Piotr Karpiuk o 10. kwietnia 2016

OpenStreetMap to „wikipedia obiektów geograficznych” – baza praktycznych danych geograficznych rozwijana przez wolontariuszy na całym świecie, zbierających dane o swojej okolicy. Na pierwszy rzut oka OSM to po prostu mapa topograficzna, w dodatku niezbyt atrakcyjna w porównaniu z Google Maps czy Bing Maps. To jednak tylko złudzenie. OSM to baza danych, a mapa topograficzna jest tylko jedną z wielu możliwych wizualizacji, która – jak każda wizualizacja – uwypukla niektóre informacje pomijając inne.

Weźmy pod uwagę taki obiekt jak ławeczka w parku, pomijana na mapach topograficznych (nawet tych dokładnych). W OSM możemy się dowiedzieć czy ławeczka ma oparcie (znacznik backrest), ile osób może na niej usiąść (seats), z jakiego materiału jest wykonana (material), na jaki kolor jest pomalowana (colour), w którym kierunku jest skierowana (direction – azymut), czy jest zadaszona (covered), jaka firma się nią opiekuje (operator), a także zdjęcie (image), czy obok stoi kosz na śmieci (waste_basket), w którym roku została postawiona (start_date), itd.

Przykłady innych obiektów:

Żywopłot Wysokość (height), rodzaj liści (leaf_type), czy roślina całoroczna (leaf_cycle), jakiego rodzaju i gatunku (genus, species)
Schody Liczba schodków (step_count), czy ruchome (conveying), czy jest poręcz (handrail)
Winda Producent (brand), pojemność (capacity), czy towarowa (goods), czy wewnątrz budynku (indoor), między którymi piętrami (level, np. -1;0;1;2)
Droga Szerokość (width), liczba pasów (lanes), jakiego rodzaju nawierzchnia (surface), max. wysokość dla pojazdów (maxheight), czy jest chodnik i po której stronie (sidewalk, footway), czy jest oświetlenie (lit), stopień utwardzenia (tracktype), stopień spadku (incline), ograniczenia dostępu (access), czy mogą jeździć ciężarówki (hgv)
Toaleta czy publiczna (access), czy płatna (fee), w jakich godzinach czynna (opening_hours), czy mogą z niej korzystać kobiety/mężczyźni/niepełnosprawni (male, female, wheelchair), sposób spuszczania wody (toilets:disposal), czy jest woda pitna (drinking_water), czy jest miejsce do przewijania pieluch (diaper), czy jest papier toaletowy (toilets:paper_supplied), czy można umyć ręce (toilets:handwashing)
Kościół Religia i wyznanie (religion, denomination), godziny mszy (service_times), adres (addr:*), kontakt (phone, website), link do Wikipedii (wikipedia), data powstania (start_date), czy zabytek (historic), kolor dachu (roof:colour), wysokość (height), nazwisko architekta (architect)
Krawężnik Wysokość (czy można na niego wjechać samochodem, wózkiem inwalidzkim?)

Alternatywą dla mapy topograficznej są nietypowe mapy tematyczne. Można takie znaleźć na product.itoworld.com/map/main (np. które budynki mają w bazie przypisany adres, ulice z podziałem na ograniczenie prędkości itp.) Poniżej kilka przykładów z jeszcze innych źródeł:


Box Locator: biletomaty, skrzynki pocztowe, bankomaty, parkomaty, telefony, kontenery na śmieci

OpenCycleMap: ścieżki rowerowe

Lichtkarte: Oświetlenie ulic

osmtools.org/gniazda/bocian: Bocianie gniazda w Polsce

Czytaj więcej »

Tags:
Napisany w Bazy danych, datavis, GIS, HTML5, WWW | Brak komentarzy »

Automatyczne wypełnianie formularzy

Autor: Piotr Karpiuk o 29. września 2015

Jedną z głównych przeszkód w e-handlu jest zmuszanie internautów do wypełniania formularzy z danymi karty kredytowej i adresu wysyłki (a nawet zakładania konta) na każdej witrynie na której chcemy coś kupić. Jest to niewygodne i zabiera czas, zwłaszcza na urządzeniach mobilnych.

Opisywany dziś standard wdrożony m.in. przez przeglądarkę Google Chrome działa następująco:

  • Dane użytkownika przechowywane są w przeglądarce (dane karty kredytowej, adresu wysyłki, płeć, imię i nazwisko, awatar itp.),
  • Od twórcy każdej witryny chcącej skorzystać z takiego „portfela” przy automatycznym wypełnianiu formularza wymaga się trzymania pewnych standardów przy konstrukcji formularza, a także zabezpieczenia strony z formularzem aktualnym certyfikatem SSL,
  • Wystarczy że użytkownik jeden raz wypełni formularz tego typu na dowolnej witrynie zgodnej ze standardem (np. tu), aby później można było na innej witrynie wypełnić formularz „jednym kliknięciem”. W praktyce, aby zapobiec nadużyciom, użytkownik musi jeszcze ręcznie podać 3-cyfrowy kod CVC karty kredytowej (patrz rysunek).

Jaki to zatem standard musi być zachowany przy konstrukcji formularza? W HTMLu formularza kluczowy jest tu atrybut autocomplete, który dla każdego rodzaju danych musi przyjąć określoną w standardzie wartość, np. dla pola z numerem karty kredytowej musi to być "cc-number":

Numer karty: <input type="text" autocomplete="cc-number" name="card-num">

Zauważ, że nazwa pola (pole name) ma znaczenie dla serwera WWW przetwarzającego dane formularza, ale nie ma znaczenia dla automatycznego wypełniania formularza. Lista dostępnych wartości atrybutu autocomplete jest dostępna w Internecie.

W odpowiedzi na zdarzenie naciśnięcia przycisku należy wykonać metodę requestAutocomplete() formularza:

      document.getElementById('fill-button').onclick = function( event ) {
        var form = document.getElementById('myform');
        form.requestAutocomplete();
        event.preventDefault();
      }

Przydatne zasoby

Przydatna uwaga: jeśli chcesz się pobawić i sprawdzić działanie formularza na swojej stronie internetowej, a nie masz aktualnego certyfikatu SSL, uruchom przeglądarkę Chrome z opcją --reduce-security-for-testing.

Napisany w HTML5, Nowoczesne przeglądarki WWW, WWW | Brak komentarzy »

MapChat

Autor: Piotr Karpiuk o 25. marca 2015

MapChat to pomysł na wspólny czat dla wszystkich ludzi na świecie. Wypowiedź każdego uczestnika jest pokazywana w dymku na mapie, co pozwala zorientować się o czym mówią ludzie w okolicy. Nie jest potrzebne zakładanie konta, a żeby napisać komunikat trzeba zgodzić się na udostępnienie przeglądarce swojej geolokalizacji.

Napisany w HTML5, WWW | Brak komentarzy »