sobota, 2 czerwca 2012

HTML5 - informacje różne

Ten post nie jest na jeden konkretny temat. Po prostu zebrało mi się trochę dodatkowych informacji związanych z różnymi zagadnieniami związanymi z HTML5, które chciałem sobie zapisać.

Obsługa niewspieranych funkcjonalności w starszych przeglądarkach

(na podstawie Filling the HTML5 Gaps with Polyfills and Shims)

Wykrywanie wspieranych funkcjonalności:

image

Łatanie brakujących funkcjonalności:

image

image

Sposób na wyświetlenie nieobsługiwanych tagów semantycznych z HTML5:

image

Sposób na rysowanie ramek z zaokrąglonymi rogami, jeśli nie są obsługiwane:

image

Multimedia

(na podstawie 5 Things You Need To Know To Start Using <video> and <audio> Today)

Szykuje się standard w HTML5 dla adaptywnego streamingu

image

Tagi multimedialne mogą mieć warunek media (znany z media queries)

image

Wyświetlanie video na <canvas>

image

Efekty stylowania elementu <video>. Jak widać … różne.

image

Fullscreen  - na razie nie ma jeszcze standardu, ale możemy wyświetlać video na powierzchni strony za pomocą JavaScript (istnieją gotowe rozwiązania)

HTML5  a Silverlight

(na podstawie HTML5 for Silverlight Developers)

BTW rok temu oglądałem z brakiem pewnego przekonania, wyszukując i tak różne braki w HTML5.  Teraz obejrzałem to zupełnie z innej perspektywy, znając wszystkie zagadnienia i dostrzegając ich piękno mimo pewnych jeszcze niedopracowań, czy duplikacji … Osobiście więcej bym dał tu jQuery i dałbym sporą część o Knockout, dałbym więcej CSS3 tak by pokazać także animacje i transformacje czy media queries, wspomniałbym o datach data-, o walidacji, o nowych kontrolkach, o drag & drop, o webworkerach …

image

ViewBox w SVG jest odpowiednikiem ViewBox z Silverlight

image

Grafiki wektorowe z XAML można transformować na na SVG.

Stylowanie

  • SVG ‘defs’ & ‘use’
  • style CSS

Odwoływanie się do zdefiniowanych wcześniej obiektów (#Monster) i zasobów (#grad):

image

image

image

Adobe Illustrator potrafi eksportować grafikę (także tą bardziej złożoną z animacjami) do <canvas> w HTML

ECMAScript5

Żywe przykłady udoskonaleń w samym czystym Java Script z ostatniego posta.

image

image

image

image

WebStorage - nie można rozszerzać jego pojemności (w przeciwieństwie do Isolated Storage w Silverlight)

Websockety

(na podstawie Hot from the Labs: HTML5 WebSockets)

image

image

image

image

image

Brak komentarzy: