HTML5 - IndexedDB, File API, Media Capture API i dalsza przyszłość

Za co cenisz swój dotychczasowy ulubiony język, technologię czy bazę danych? Że możesz za ich pomocą stosunkowo prosto przechowywać dane, przeszukiwać, operować na nich. Że możesz łatwo operować na plikach czy multimediach, nie tylko je odtwarzać ale i tworzyć przez nagrywanie. Przykłady można mnożyć. Za co nie lubiłeś HTML i Java Script na stronach webowych? Że nie umożliwiły dokonania w prosty sposób bardziej wyrafinowanych operacji, że w różnych przypadkach potrzebny były wtyczki albo strona serwerowa. A jeśli porzucimy stereotypy, przyjmiemy że wszystko jest pewną umową i od tej pory HTML i JavaScript potrafią wszystko to, co inne języki? Przecież każda funkcja w danym środowisku programistycznym i tak jest przełożeniem na funkcję z API konkretnego systemu operacyjnego. Skoro udawało się to z innymi językami, czemu miałoby się to nie udać z HTML i JS?  Na razie mówi się zasadniczo o przeglądarkach, ale są widoki, że przyjdzie dzień, że nie będzie niczego obecnie powszechnie używanego i wszystkie aplikacje na smartfonach, tabletach, komputerach będzie można pisać w technologiach wywodzących się z dzisiejszych stron web. 

Skąd taka przedmowa? W taki nastrój może wprowadzić prezentacja The Future of HTML5, z której pozwoliłem zrobić sobie trochę notatek. Oczywiście nie jest to już dzisiaj żadne odkrycie. Już znacznie wcześniej zaczęły się pojawiać biblioteki JS opakowujące API systemowe na telefony, powstał jakiś czas temu PhoneGap, wreszcie Microsoft na Windows 8 udowodnił, że tworzenie aplikacji natywnych Metro w HTML5 i JS może być bardzo proste i wysokopoziomowe, na takim samym poziomie abstrakcji jak w przypadku aplikacji XAML. Aczkolwiek to jest jeszcze konkretna platforma, a dzisiejszy wstęp dotyczył tego tematu w aspekcie ogólnym, międzyplatformowym.

Zacznijmy od lokalnej bazy danych. Aplikacje natywne mogą przechowywać dane w tzw. lokalnych bazach. A co ze stronami web?  Owszem mamy w HTML5 WebStorage, ale ma ograniczoną pojemność (taki odpowiednik Isolated Storage znanego z Silverlight i .NET). Tradycyjne bazy jednak nie wszyscy lubią, język SQL ma swoją specyfikę. Otóż jest dobra wiadomość, w HTML5 do obsługi lokalnej bazy danych nie trzeba będzie w ogóle znać SQL, wystarczy znajomość Java Script.

Jak MS w swoim “labie” obsłużył testowo fallback dla IndexedDB:

Jednak docelowego programistę w HTML5 nie będzie interesował sposób implementacji dostępu do lokalnej bazy danych przez producenta przeglądarki. Wystarczy jedynie operować na wysokopoziomowym API w JavaScript:

Nawet jest odpowiednik kursora -:)

Co, jeśli chcielibyśmy odczytać informacje z wybranych plików wskazanych przez użytkownika wyłącznie po stronie klienta napisanego w JavaScript?  Wyrzekając się stereotypów i myśląc kategoriami czysto abstrakcyjnymi nie znajdujemy tutaj ograniczeń. Niech od tej pory w JavaScript, daje się tak samo operować na plikach jak w Silverlight czy .NET.

Jak wyświetlić obrazek z wczytanego pliku? Specyfikacja proponuje coś takiego jak Blob, który może być źródłem obrazka i uzyskuje go się bezpośrednio z obiektu pliku. Hola? Czy ja już gdzieś tego pomysłu nie widziałem?  Tak, taki patent występuje też w API dla aplikacji Metro HTML5 w Windows 8.

Koala też przeszedł do HTML5 –

Gdy chcemy dzisiaj nagrać głos czy wideo z kamerki internetowej, nie kojarzymy z tym czystego HTML. Zaraz myślimy o wtyczkach. Czy słusznie? Skoro API systemowe dało się opakować w Silverlight czy Flash, to równie dobrze to samo API może opakować producent przeglądarki i udostępnić je po prostu jako zestaw metod w Java Script:

Nagrywanie głosu do pliku możliwe byłoby w następujący sposób:

Podobnie może być realizowane nagrywanie video:

Rok temu trwały nad tym prace i np. nie było jeszcze implementacji po stronie MS do preview obrazu –

Idźmy dalej. Skoro mamy audio i video, to czemu nie obsługiwać mowy?

Inne jeszcze, spośród bardzo wielu specyfikacji:

A skoro ukończone zostaną obecne specyfikacje, to co dalej z rozwojem HTML5? Oczywiście dalsza integracja składających się na niego technologii oraz implementacja dalszych specyfikacji, pokrywających coraz to bardziej wyrafinowane obszary (są dyskusje nad DRM, pełnoekranowym video, większym wsparciem dla urządzeń… czyli to, w czym dzisiaj wtyczki i obecnie używane technologie są jeszcze lepsze).

Przewiduje się, że z czasem HTML5 wyjdzie z przeglądarek i będzie w nim możliwe także tworzenie aplikacji poza przeglądarkami …(już dziś są takie rozwiązania np. aplikacje Metro w Windows 8, ale nie są przenośne). Ale zaraz skąd ja to znam? Czy takiej drogi nie przeszedł właśnie Flash i Silverlight? I ten kontekst pozwala spojrzeć na HTML5, jako na rodzący się w pewnych bólach (zwłaszcza na początku), ustandaryzowany przez różne porozumienia ponad podziałami “Silverlight następnej generacji” na wszystkie platformy i urządzenia (tak jak kiedyś były binarne protokoły sieciowe niekompatybilne ze sobą, a potem przyszły webserwisy oparte oparte na wspólnych standardach). BTW Java też miała być kiedyś wszędzie, jednak aplety nie są już dziś powszechne. Może to co nie udało się samemu Sunowi czy samemu Microsoftowi, uda się teraz wspólnym standardom, które nie są związane z konkretnym producentem ?

HTML5 - jeszcze o Canvas i coś ponadto

Dziś trochę notatek uzupełniających o Canvas w HTML5 (z Deep Dive Into HTML5 <canvas>) oraz trochę innych ciekawych informacji.

Canvas

Kompozycje

Różnice w sposobie rysowania pomiędzy niektórymi przeglądarkami

Saving & restoring

• The current transformation matrix.
• The current clipping region.
• The current values of the following attributes: strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline.

Security model

• Canvas also allows drawing cross-domain images/videos
• However, it has built-in security protection against third-parties saving cross-domain pixels
• Canvas protects against Information Leakage attacks
• Canvas has a concept of origin-clean flag
• origin-clean is set false if a cross-domain IMG or VIDEO is used
• A SECURITY_ERR exception is raised, if one tries to save the Canvas pixels if the Canvas origin-clean is false:
• toDataURL()
• getImageData()

Accessability

• Fallback Content Focus (spec stable)
• When the Canvas has embedded content, it can be keyboard-focusable via accessibility tools.
• Focus Management (spec unstable)
• A focus ring can be drawn on the Canvas corresponding to embedded content in the Canvas fallback.
• Fallback Content Focus
• Access to the DOM tree within <canvas></canvas> tags
• Recall, elements within the <canvas></canvas> tags are considered Fallback content and are only displayed on screen when Canvas is not supported.
• This same Fallback area can be used for Accessibility description of what is on the Canvas

Najlepsze praktyki

• Detekcja

       var canvas = document.createElement(“canvas”);

            if (canvas && canvas.getContext && canvas.getContext(“2d”))

            {

                 // Code requiring canvas support

             } else {

                // Canvas isn’t available.

                // Put non-canvas fallback here

            }

• Zawsze dodawać !DOCTYPE. Dla HTML5 oznacza to <!DOCTYPE html>
• Make Fewer Calls to Video Memory
• Reading and writing to video memory is slow.
• DON’T: Repeatedly call getImageData() or putImageData() for small amounts of data.
• DO: Request larger area of data with fewer calls.
• Cache Pixel Array Data
• Accessing ImageData.data[i] requires DOM access to fetch and index the object
• DON’T: Repeatedly access ImageData.data[i] for data.
• DO: Cache the ImageData.data in a Javascript object.
• Canvas objects as D3D textures
• Canvas objects and patterns are implemented as D3D textures.
• DON’T: Create new Canvas objects/patterns every frame.
• DO: Re-use existing Canvas objects/patterns.
• DON’T: Clear Canvas by setting dimensions every frame.
• DO: Call clearRect() to clear the Canvas.
• Drawing the Canvas to itself
• Re-using a Canvas object is faster than creating an intermediate texture.
• DON’T: drawImage() a Canvas to itself, as this requires creating intermediate texture.
• DO: Use multiple Canvas objects instead.
• Avoid clearRect() with Transforms
• AVOID: Setting a geometric clip, rotation or skew transform when calling clearRect() - it will be much slower.
• AVOID: Using clearRect() when clearing paths on non-whole pixel boundaries.
• Avoid changing attribute settings
• Avoid setting attributes unnecessarily
• While costs are usually small, avoiding all unnecessary DOM calls will help in high performance applications.
• Some attributes are slower to set than others.
• Memory Management
• DON’T: Hold references to objects that cannot be garbage collected
• Will cause associated resources to be held in memory
• DON’T: Unintentionally Cache graphics objects in globals or expandos
• Objects such as canvas, pattern, image data, and gradients
• SetTimeOut() and SetInterval()
• Monitors typically display at 60Hz or 16.7ms periods.
• For graphics timers, no point in using a higher resolution
• DO: Use a 17ms interval for setTimeOut() and SetInterval(). They take integer values – round up 16.7ms.
• DON’T: Use a 1ms interval for timers
• Using a smaller interval than 17ms has no benefit: it results in choppy animation and reduced battery life

Zastosowanie

• Canvas can draw SVG, images, videos and other Canvases on Canvas.
• You can use Canvas and SVG in the same application complimenting each other.

Coś ponadto:

Geolokalizacja - micro format

Współdziałanie Knockout z ASP.NET MVC (który automatycznie obsługuje serializację JSON <-> obiektów .NET)

SVG - odc 1

Tym razem więcej notatek o SVG. Ich źródłem w przeważającej większości jest prezentacja Modernizing Your Website: SVG Meets HTML5. Bardzo dobra, solidna prezentacja, jedna z najlepszych jakie widziałem. Ale nawet najlepsza prezentacja nie byłaby interesująca bez interesującej technologii, jaką jest SVG. Jestem pod wrażeniem, porównywalnym z Knockout czy CSS3. Znowu funkcjonalności znane z aplikacji XAML, nie chodzi mi tu o banalne porównanie do markupu czy kształtów ale o bardziej wyrafinowane zagadnienia. Weźmy patterny czy zaawansowane możliwości tekstu, który może mieć dowolne wypełnienie oraz być rysowanym po krzywej (jak ktoś pamięta PathListBox - jedno z ważniejszych features Blend 4 dla Silverlight i WPF). Ale to nie wszystko. Prawdziwą bombą jest połączenie SVG z CSS (oprócz dość oczywistego stylowania elementów SVG w CSS, w CSS możemy odnosić się do definicji z SVG!), mniejszą sterowanie z poziomu Java Script (wydaje się dość oczywiste –:)). Dobrym pomysłem jest zipowanie. Co jest słabsze?  Np. dublowanie gradientów, transformacji, animacji z CSS (czy odwrotnie?), dwa DOM (mimo zgrabnego skomponowania z resztą HTML za pomocą <svg> mamy dwa DOM - Core i SVG co jest pewną pozostałością z przeszłości, gdzie HTML i SVG były tworzone obok). Aczkolwiek pamiętajmy że wszystkie standardy są ciągle rozwijane, może z czasem dojdzie do jeszcze większej unifikacji i integracji ...

Tak samo jak w HTML mamy dostęp do DOM z poziomu JS oraz możemy stylować jego elementy za pomocą CSS.

Porównanie wydajności Canvas i SVG w zależności od rozmiaru ekranu i liczby elementów

Sposoby zawierania SVG w stronach webowych

Standalone

• <object data="logo.svg" type="image/svg+xml" width="100" height="100"></object>
• <img src="logo.svg" width="100" height="100"/>  (no scripting)
• { background-image: url('background.svg'); }
• <iframe src="logo.svg" width="100" height="100"/>
• <embed src="logo.svg" width="100" height="100"/>

Inline

• HTML5
• XHTML

Zastosowanie

• Dokumenty o dużym stopniu wierności (mapy, plany, techniczne diagramy, wykresy …)
• Wektorowe obrazki (loga, diagramy)
• Interfejs użytkownika (mniej banalne kształty, stylowanie CSS, interaktywność)
• Ozdobne teksty

Używanie

Atrybut viewbox

<svg viewBox="0 0 100 100">  (współrzędne x i y punktu najbardziej na lewo, szerokość, wysokość)

Stylowanie i hit detection

• Stylowanie - aktualizacje obrazka po stronie klienta
• Hit detection - obrazki png, GIF, JPEG są ograniczone pod względem kształtu

Ozdobne teksty

Więcej możliwości niż w samym HTML i CSS

• gradienty i patterny
• tekst po krzywej

Definicje (gradient, pattern, path), użytkowanie definicji (path)

Animowany zegar napędzany skryptem

Tips

• Zawsze <! DOCTYPE html>
• Overflow w HTML5 domyślnie widzialny.  Z przycięciem:  <svg overflow=”hidden”> lub w CSS
• Wysokość pierwszej linii tekstu: <text> (domyślnie poza obszarem!),  <text y=”30”>
• Dostępność
• Definiować tagi <title> i <desc>
• Używać atrybutu focusable dla tabulacji  <rect focusable="true" onfocus="doStuff();" width="100" height="100"/>
• Przestrzenie nazw w plikach .svg
• Zawsze zawierać xmlns="http://www.w3.org/2000/svg"
• Przy korzystaniu z xlink:href dodatkowo zawsze zawierać xmlns:xlink="http://www.w3.org/1999/xlink"
• Wykorzystywać SVG DOM. Możemy korzystać z dwóch DOM
• Core DOM
• np. myCircle.setAttribute(“r”, “42”);
• Znany, spójny
• Często wolniejszy
• SVG DOM
• np. myCircle.r.baseVal.value = 42;
• Często szybszy

SVG DOM

• Większość obiektów SVG DOM zawiera podstawowy komponent i animowany komponent
• Ignorować animowany
• Zawsze używać podstawowego
• Typy
• Atrybuty prezentacyjne np. myCircle.style.fill
• Wartości np. myCircle.r.baseVal.value
• Obiekty np. mySVG.viewBox.baseVal.x
• Listy np. myRect.transform.baseVal.getItem(0)

             

                   Używać SVG DOM chyba że zmieniamy dużo obiektów DOM w liście

• Kompresja
• Kompresowane Gzip pliki .svgz
• Przy korzystaniu z .svgz zawrzeć response header:  Content-Encoding: gzip
• Typ MIME
• image/svg+xml
• IIS7 i niższe wymagają konfiguracji
• Narzędzia do wytwarzania SVG
• Statyczne
• Inkscape
• Adobe Illustrator
• Microsoft Visio

        Fallback behavior

         try {

               if(document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Structure", "1.1")) {

                    //SVG support! :)

               }

              else {

                   //no SVG support :(

              }

        }

        catch (Exception e) {

              // no  SVG support :(

        }

        Wbudowany fallback dla statycznego obrazka

        <object type="image/svg+xml" data="logo.svg">

                <img src="logo.png">

        </object>

        Biblioteki do fallback

• VML fallback support
• RaphaelJS
• Dojo toolkit
• Flash fallback
• SVGWeb library (no CSS support)