Scott Tiger Tech Blog

Blog technologiczny firmy Scott Tiger S.A.

Archiwum: 'Nowoczesne przeglądarki WWW' Kategorie

Amazon Sumerian

Autor: Piotr Karpiuk o 14. stycznia 2019

Amazon Sumerian to usługa chmury AWS pozwalająca tworzyć wirtualne światy 3D (w tym VR: Oculus Go, Oculus Rift, HTC Vive, HTC Vive Pro, Google Daydream, and Lenovo Mirage) w przeglądarce i na urządzenia mobilne. Oprócz własnoręcznie zaprojektowanych przedmiotów można w wygenerowanym świecie umieścić wirtualny awatar człowieka (tzw. host, kilkanaście do wyboru spośród kobiet i mężczyzn, białych, czarnoskórych itp.) i programować jego zachowanie oraz wypowiedzi.

Przykład takiej aplikacji mamy po prawej stronie. Otworzy się ona w nowoczesnej przeglądarce Chrome lub Firefox, przy czym tylko Firefox na Windows obsługuje WebVR, w pozostałych przeglądarkach dostaniemy ostrzeżenie „Your browser is not fully compatible with Amazon Sumerian” które można zignorować jeśli nie korzystamy z VR.

Kobieta czyta odpowiednio otagowany gestami tekst:

<speak>I can gesture while I speak. Some of my available gestures are:
<mark name="gesture:generic_a"/>generic a<break time="1500ms"/>,
<mark name="gesture:generic_b"/>generic b<break time="1500ms"/>,
<mark name="gesture:generic_c"/>generic c<break time="1500ms"/>,
<mark name="gesture:defense"/>defense<break time="2500ms"/>,
<mark name="gesture:wave"/>wave<break time="1500ms"/>,
<mark name="gesture:you"/>you<break time="2500ms"/>,
<mark name="gesture:many"/>many<break time="2500ms"/>,
<mark name="gesture:aggressive"/>aggressive<break time="1500ms"/>,
<mark name="gesture:in"/>in<break time="2500ms"/>,
<mark name="gesture:big"/>big<break time="4000ms"/>,
<mark name="gesture:one"/>one<break time="2500ms"/>,
<mark name="gesture:movement"/>movement<break time="3500ms"/>,
<mark name="gesture:heart"/>heart<break time="2000ms"/>, and
<mark name="gesture:self"/>self.<break time="1500ms"/></speak>

Host zawsze patrzy na rozmówcę, scenę można obracać (wciśnięty prawy klawisz myszki podczas ruszania, albo lewy i SHIFT).



Kolejna aplikacja (proszę kliknąć zdjęcie niżej) to przykład chatbota do zamawiania hotelu lub wypożyczania samochodu. Trzeba zgodzić się na udostępnienie swojego mikrofonu. Żeby mówić przyciskamy SPACJĘ i zwalniamy klawisz gdy skończymy mówić.

Rozmowę zaczynamy tak:

Zamawianie hotelu:

  "Book a hotel"
  "I want to make hotel reservations"
  "Book a {Nights} stay in {Location}"

Zamawianie samochodu:

  "Book a car"
  "Reserve a car"
  "Make a car reservation"

Bot jest realizowany przez usługę AWS Amazon Lex. Z kolei zamiana tekstu na mowę to usługa Amazon Polly.

Tags: , , ,
Napisany w AWS, Cloud computing, HTML5, Nowoczesne przeglądarki WWW, Wizualizacja, WWW | Brak komentarzy »

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 »

Narzędzia dewelopera w Google Chrome

Autor: Piotr Karpiuk o 5. lipca 2016

Dzisiejszy artykuł będzie narzędziach, jakie przeglądarka Google Chrome udostępnia programistom do debugowania i monitorowania aplikacji webowych, pod przyciskiem F12. Dla tych co mają dużo czasu, pełny opis możliwości jest dostępny na stronach Google’a: https://developers.google.com/web/tools/chrome-devtools/. Tutaj zakładam że Czytelnik ma już jakieś pojęcie o tych narzędziach, zapewne już z nich korzysta w jakimś zakresie i chciałby możliwie szybko poszerzyć swoją wiedzę o różne przydatne i ciekawe triki, które pojawiły się ostatnimi czasy, lub były od dawna ale nie są oczywiste.

Task Manager

Kombinacja klawiszy Shift+ESC otwiera managera zadań, w którym możemy zobaczyć zużycie zasobów komputera z rozbiciem na poszczególne zakładki przeglądarki:

Edycja drzewa DOM

Czytaj więcej »

Napisany w Google Chrome, JavaScript, Nowoczesne przeglądarki WWW, 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 »