Scott Tiger Tech Blog

Blog technologiczny firmy Scott Tiger S.A.

Archiwum: 'HTML5' Kategorie

Animowana wizualizacja prądów morskich i wiatrów

Autor: Piotr Karpiuk o 28. stycznia 2015

Bardzo sympatyczna, interaktywna demonstracja możliwości SVG: grafiki wektorowej w przeglądarkach. Kliknij w obrazki, aby obejrzeć animacje.

Źródło: windyty.com. Kliknij aby obejrzeć animację. Źródło: earth.nullschool.net. Kliknij aby obejrzeć animację.

 

Napisany w datavis, HTML5, WWW | Brak komentarzy »

The Truth About HTML5 – Recenzja

Autor: Piotr Karpiuk o 2. listopada 2014

Książka The Truth About HTML5 została napisana przez młodego gniewnego projektanta WWW z Australii. Większość książek o HTML5 stawia sobie za cel w sposób przystępny i w miarę szczegółowy opisać nowinki standardu i zachęcić do ich używania, a tutaj mamy dość rzetelne krytyczne spojrzenie na temat. Można autorowi miejscami zarzucić przesadę i złośliwość, ale z pewnością nie dyletanctwo. W tej książce dowiemy się wiele o tym co dzieje się za kulisami, jaki wpływ na HTML5 ma polityka patentowa, i jak poszczególne nowinki zostały przyjęte w świecie webmasterów (z co bardziej smakowitymi cytatami z blogów i grup dyskusyjnych).

Tak więc mamy tu ploteczki o tym, że na obecny kształt specyfikacji HTML5 podejrzanie duży wpływ ma jedna osoba: Ian Hickson, onegdaj pracownik Opery a obecnie Google. O tym, że Adobe wprawdzie już pogodziło się z nieuniknioną śmiercią Flasha, ale jednocześnie aktywnie propaguje SVG. O tym, że najbardziej pragmatyczne osiągnięcia w zakresie semantycznego Internetu oferuje w tej chwili inicjatywa Microsoftu, Google i Yahoo: Schema.org (jednakowoż stosowanie się do tych mikrodanych wpływa raczej na prezentację naszej witryny w wynikach wyszukiwania, a nie pozycję na liście wyników). O tym że wspomagana sprzętowo grafika 3D (WebGL) jest w grafice 2D szybsza niż canvas. O tym że obsługa dźwięku na użytek gier w przeglądarkach jest póki co beznadziejna. O tym że rekomendacja HTML 5.1 ma być gotowa w 2016. O tym że coraz modniejsze są preprocesory CSS takie jak SASS i LESS. No i o tym, że na dobrą sprawę sam HTML jest dziś „ogonem, którym macha JavaScriptowy pies”.

W kwestii najmniejszego wspólnego mianownika jeśli chodzi o przeglądarki do których musimy dziś równać IE6 na szczęście przestał być koszmarem, ale jego rolę przejął IE8 który będzie obecny tak długo, jak długo w Sieci widoczny będzie Windows XP.

Poszczególne nowości w świecie formularzy omówione są z punktu widzenia praktycznego: które warto używać (np. atrybuty autocomplete i autofocus), a których póki co warto unikać (atrybuty required, pattern, pola input typu number, range, date, color) i dlaczego.

Rzetelnie omówiony jest temat canvas i WebGL wraz z zastosowaniami (a może WebGL zostanie pokonany przez silnik 3D Unity?), a także znaczniki audio i video — gdzie sytuacja związana z kodekami i DRM jest wyjątkowo zagmatwana i potencjalnie niebezpieczna dla szeroko rozumianej wolności w Internecie. W praktyce ze względu na różnice między przeglądarkami i różny sposób wsparcia dla możliwości multimedialnych, zaleca się korzystanie z bibliotek JavaScriptu (np. MediaElement, VideoJS) zamiast „gołych” znaczników takich jak video.
Czytaj więcej »

Napisany w HTML5, WWW | 3 Komentarzy »

JavaScript: Obietnice (ang. Promises)

Autor: Piotr Karpiuk o 26. maja 2014

JavaScript jest zasadniczo jednowątkowy, a wszelkie operacje I/O są wykonywane asynchronicznie. W rezultacie nasz kod wymagający kontaktu ze światem zewnętrznym staje się skomplikowany, zwłaszcza gdy uwzględnimy jeszcze obsługę błędów. Zawarty w specyfikacji EcmaScript 6 mechanizm obietnic (zaimplementowany w najnowszej wersji wiodących przeglądarek) pozwala pisać kod asynchroniczny w stylu bardziej synchronicznym.

Obietnica (ang. promise) w postaci obiektu klasy Promise reprezentuje wynik operacji asynchronicznej (wartość zwracaną w przypadku sukcesu lub błąd w razie porażki), który może nie być osiągalny na razie, ale z czasem będzie.

Obietnice możemy składać (ang. chain) ze sobą wykonując zestaw operacji asynchronicznych jedna za drugą (szeregowo) lub równolegle — w tym drugim przypadku będziemy mogli podjąć jakąś aktywność po zakończeniu wszystkich zleconych operacji. W takich łańcuchach obietnic błędy są propagowane, więc możemy na samym końcu łańcucha zdefiniować funkcję przechwytującą wszystkie możliwe błędy.

Wyobraźmy sobie kod wyświetlający powieść, przy czym poszczególne rozdziały ładowane są osobno po kolei, a najpierw pobieramy plik z URLami rozdziałów:

try {
  var story = getJSONSync('story.json');
  addHtmlToPage(story.heading);

  story.chapterUrls.forEach(function(chapterUrl) {
    var chapter = getJSONSync(chapterUrl);
    addHtmlToPage(chapter.html);
  });

  addTextToPage("All done");
}
catch (err) {
  addTextToPage("Argh, broken: " + err.message);
}

document.querySelector('.spinner').style.display = 'none';

Wszystko wygląda tu pięknie z dokładnością do tego, że synchroniczne operacje I/O blokują całą przeglądarkę. Implementacja tego z wykorzystaniem asynchronicznego I/O bardzo by nam ten kod zagmatwała.

Dzięki użyciu obietnic asynchroniczny kod może wyglądać następująco:

getJSON('story.json').then(function(story) {
  addHtmlToPage(story.heading);
  return Promise.all(
    story.chapterUrls.map(getJSON)
  );
}).then(function(chapters) {
  chapters.forEach(function(chapter) {
    addHtmlToPage(chapter.html);
  });
  addTextToPage("All done");
}).catch(function(err) {
  addTextToPage("Argh, broken: " + err.message);
}).then(function() {
  document.querySelector('.spinner').style.display = 'none';
});

Dodatkowym zyskiem widocznym na powyższym listingu (Promise.all()) jest równoczesne wykonywanie się asynchronicznych operacji wejścia/wyjścia pobierania rozdziałów. Gdy wszystkie zostaną załadowane (funkcja then()), możemy je wyświetlić. Błędy są wychwytywane za pomocą funkcji catch().

Przydatne artykuły:

Napisany w HTML5, JavaScript | Brak komentarzy »

Przykłady WebGL

Autor: Piotr Karpiuk o 26. sierpnia 2013

WebGL to technologia trójwymiarowej grafiki we współczesnych przeglądarkach (z wyjątkiem Internet Explorera). Trudno w tej chwili znaleźć zbyt wiele znaczących jej zastosowań w biznesie, ale na pewno warto być świadomym jej potencjału. Dzisiaj chciałbym przedstawić co ciekawsze interaktywne przykłady użycia WebGL dostępne w Internecie. To niesamowite, co można dzisiaj zobaczyć w przeglądarce, bez potrzeby instalowania jakichkolwiek pluginów w rodzaju Flash czy Java. Kliknij obrazki, aby otworzyć odpowiadające im aplikacje na pełnym ekranie.

Quake

Popularna gra komputerowa sprzed paru lat, teraz w Twojej przeglądarce.

Katedra

Katedra. Ruch myszki zmienia kąt kamery, kliknięcie lewego przycisku myszki zmienia oświetlenie, a klawisze strzałek pozwalają na poruszanie się po wnętrzu obiektu.

Wersal

Wycieczka po Wersalu. Poruszaj myszką aby zmienić ustawienie kamery.

Car Visualizer

Można sobie wybrać markę samochodu, kolory poszczególnych części (karoseria, kołpaki) i poobracać furę w przestrzeni.

Jenga

Znana, zręcznościowo-umysłowa gra logiczna. Z drewnianej wieży, gracze kolejno usuwają z budowli dowolny klocek poniżej skończonego poziomu i układają go na górze. Przegrywa osoba, która wyciągając klocek, przewróci wieżę.

WebGL Cars

Tutaj dla odmiany za pomocą klawiszy strzałek sterujesz samochodem w trójwymiarowej przestrzeni.

WebGL Water

Świetna symulacja fizyczna basenu wypełnionego wodą. Klikając myszką wzburzasz wodę i wywołujesz fale.

Tear-able cloth

Realistyczna symulacja fizyczna zwisającej tkaniny, którą za pomocą myszki można poruszać, a nawet porwać i zrzucić.

Hopalong

Abstrakcyjna wizualizacja tunelu (fraktale?).

Pearl Boy

Tutaj możemy sobie powiosłować na morzu, albo ponurkować w poszukiwaniu pereł. Ruch myszką zmienia ustawienie kamery, kółko myszki przybliża i oddala.

Napisany w HTML5, WWW | Brak komentarzy »

Anamorfoza

Autor: Piotr Karpiuk o 30. maja 2013


Rozmieszczenie populacji w państwach członkowskich UE

Anamorfoza (ang. cartogram) w kartografii to mapa tematyczna, w której wartości zmiennej (populacja, produkt krajowy brutto itp.) są wyrażone poprzez proporcjonalną zmianę pola powierzchni lub odległości. Warto zauważyć, że to co innego niż kartogram (który sprowadza się wyłącznie do kodowania wartości kolorem, przy niezdeformowanej mapie – w tłumaczeniu na język angielski kartogram to Choropleth map).
Na stronie WorldMapper można obejrzeć sobie szereg animowanych anamorfoz pokazujących zmianę w czasie na świecie liczby internautów, dziennego dochodu na jednego mieszkańca, czy liczby ludności (w ostatnim przypadku trzeba kliknąć zielony przycisk pod mapą żeby rozpocząć animację).

Produkt Krajowy Brutto

Napisany w datavis, HTML5, WWW | Brak komentarzy »