Scott Tiger Tech Blog

Blog technologiczny firmy Scott Tiger S.A.

Archiwum: 'HTML5' Kategorie

Software Galaxies

Autor: Piotr Karpiuk o 17. grudnia 2018

Interaktywna wizualizacja pakietów języka Go i powiązań między nimi, przypominająca podróż przez galaktykę. Bardzo dobry przykład jak za pomocą WebGL można osiągnąć w przeglądarce przyzwoitą wydajność. Poruszamy się za pomocą klawiatury (klawisze W,Q,E,S,D,A, strzałki, Shift) – miłośnicy gier na pewno szybko się odnajdą. Zdecydowanie polecam pełny ekran. Dostępne są też wizualizacje repozytoriów pakietów innych języków programowania.

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

Wizualizacja grafów

Autor: Piotr Karpiuk o 30. listopada 2018

Pojawia się coraz więcej bibliotek JavaScriptu do wizualizacji grafów. Moją szczególną uwagę przykuły dwie z nich: 3d-force-graph (patrz interaktywna ilustracja obok, ewentualnie na pełnym ekranie) oraz force-graph renderujące grafy odpowiednio w 3D i 2D. W przypadku 3D wykorzystywane jest wspomaganie sprzętowe (GPU) co wspaniale przekłada się na wydajność i pozytywne wrażenia użytkownika.

Listę innych wartych spojrzenia bibliotek znajdziemy na stronie github.com/anvaka/graph-drawing-libraries. Spodobała mi się też biblioteka viz-js (javascriptowa wersja kultowego GraphViz firmy AT&T Labs), a także WebCola.

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

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 »