środa, 30 maja 2012

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.

image

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

image

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:

image

image

Nawet jest odpowiednik kursora -:)

image

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.

image

image

image

image

image

image

image

image

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.

image

image

Koala też przeszedł do HTML5 –Puszczam oczko

image

image

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:

image

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

image

image

image

Podobnie może być realizowane nagrywanie video:

image

image

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

image

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

image

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

image

image

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).

image

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 ?

image

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

canvas_1

Kompozycje

image

image

image

image

image

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

image

Saving & restoring

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

image

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.

image

Coś ponadto:

Geolokalizacja - micro format

image

image

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

knockout_mvc

mvc3_k2

mvc3_k1

wtorek, 29 maja 2012

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.

svg_pdc10_02

svg_14

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

svg_pdc10_04

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

image

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

image

  • 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

svg_15

svg_16

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

svg_17

svg_18svg_19

Animowany zegar napędzany skryptem

svg_21

svg_22

svg_23

svg_24

svg_25

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)

              svg_26

                   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)

svg_27