Scott Tiger Tech Blog

Blog technologiczny firmy Scott Tiger S.A.

Archiwum: 'HTML5' Kategorie

Reveal.js – pokaz slajdów w przeglądarce WWW

Autor: Piotr Karpiuk o 25. maja 2017


Prezentacja Reveal.js – kliknij strzałkę w prawym dolnym rogu. Pełny ekran

PowerPoint wciąż rządzi w świecie prezentacji, ale od dawna już istnieje szereg narzędzi do prezentowania slajdów w przeglądarce.

Mają one sporo zalet:

  • przeglądarka WWW jest popularniejsza niż Windowsy z PowerPointem, co bardzo poszerza grono potencjalnych widzów,
  • można podać URL do konkretnego slajdu,
  • dzięki najnowszym możliwościom przeglądarek (HTML5, CSS3) nie jesteśmy zmuszani do instalowania pluginów takich jak Flash/Java; ponadto dostajemy przyjemne dla oka efekty przewijania slajdów, nawet 3D (patrz Impress.js demo),
  • osoby z uzdolnieniami plastycznymi i webmasterzy mogą popisać się swoimi umiejętnościami aby uczynić pokaz wyjątkowym, pozostali mogą uzyskać zadowalające efekty niskim kosztem,
  • na slajdach można zagnieździć działające aplikacje webowe,
  • pokaz slajdów może na ogół działać na przeglądarkach mobilnych, obsługując przewijanie slajdów dotykiem.

Wbrew pozorom, funkcjonalność oferowana przez tego typu narzędzia jest w stanie całkiem sensownie zaspokoić potrzeby przeciętnego prelegenta. Dzisiaj chciałbym krótko zaagitować na rzecz narzędzia Reveal.js, które zwróciło moją uwagę. Dobrym punktem wyjścia jest przykładowa prezentacja, ukazująca możliwości narzędzia (patrz też obok).

Slajdy można przewijać klawiaturą (strzałki, spacja), klawisz ESC otwiera podgląd slajdów (można wybrać myszką ten do którego chcemy przejść).

Czytaj więcej »

Napisany w HTML5, WWW | Brak komentarzy »

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 »