Dlaczego HTML 5, a nie Flash?

Dlaczego HTML 5, a Dlaczego HTML 5, a nie Flash?nie Flash?

Jacek CzarneckiEmpathy – Internet Software

House

Wprowadzenie

www.empathy.pl

• Początek HTML5• Multimedia• HTML5 w urządzeniach mobilnych• Co z Adobe Flash?• Dostępność• Podsumowanie

Vs

POCZĄTEK HTML5POCZĄTEK HTML5

W3C

www.empathy.pl

• 1995 – HTML 3.0

• 1997 – HTML 3.2 (styczeń)• 1997 – HTML 4.0 (grudzień)• 1999 – HTML 4.01• 2000 – XHTML 1.0• 2001 – XHTML 1.1• 2005 – XHTML 2.0 (7 szkic)• 2009 – XHTML 2.0 (8 szkic) …

World Wide Web Consortium

WHATWG

www.empathy.pl

• Web applications

• Web forms 2• Web controls

…

Web Hypertext Application Technology Working Group

HTML5

www.empathy.pl

• Nowe tagi

• Nowe API• Nowe metody DOM

Nowości w HTML5

www.empathy.pl

Inne nowości HTML5

Obsługa multimediów• Audio• Video• SVG• Canvas• WebGL

• JS API (nowe selektory)• Web Storage• Web SQL Database• Application Cache API• Web Workers• Drag and drop• Geolokalizacja• Mikrodata• Nowe formularze

Sieć semantyczna

www.empathy.pl

Semantyczne znaczniki HTML

<header>

<headergroup><nav><section><article>…

Nowe relacje linków

<a rel=‘archives’><a rel=‘external’>

ARIA attributes

<ul role=„tree”><li role=„group”><li role=„treeitem”>

Multimedia w Multimedia w HTML5HTML5

Audio

www.empathy.pl

Tag audio<audio controls autoplay loop>

<source src="audio.ogg"><source src="audo.mp3"><source src="audio.wav">

</audio>

Atrybuty• Src• Preload• Controls

Atrybuty DOM• currentTime• startTime• duration

Eventy DOM• progress• startTime• duration

Kodek IE Chrome Firefox Opera

Ogg

MP3

WAV

ACC

Kompatybilność

Video

www.empathy.pl

Tag video<video controls="controls">

<source src="video.webm" type="video/webm"><source src="video.ogv" type="video/ogg">Twoja przeglądarka nie obsługuje tagu wideo.

</video>Obsługiwane formaty

Ogg Theora H.264 WebM

Grafika

www.empathy.pl

SVG• Format wektorowy• Statyczny i animowany• Dozwolony CSS, JS, oraz XML• Brak obsługi multimediów• Licencja open source.Web

P• Natywnie obsługiwany przez Chrome i Operę• Format udostępniony za darmo• Alternatywa dla JPG• Słaba jakość obrazu

WebGL

www.empathy.pl

WebGL• Zaawansowane animacje 3D bez wtyczek• Pierwsza implementacja – Mozilla, 2006• Specyfikacja – 3 marca 2011• Wspólny standard Apple, Google, Mozilli i Opery

• Oparty na OpenGL ES 2.0• Programowany za pomocą JS (Processing.js, Three.js)• Akceleracja sprzętowa • Podatność na ataki

Video

www.empathy.pl

Kompatybilność

Kodek IE Chrome Firefox Opera

Theora

H.264

WebM

Problemy• Mnogość formatów• Wydajność• Zabezpieczenie treści• Streaming

Mobilny HTML5

www.empathy.pl

Sencha Touch• Oparty na bibliotece Ext JS• Dostępne dla: Android, BB6, iOS• Wykorzystuje HTML + CSS3 + JS•Obsługa gestówPhoneGap• Darmowy framework dla aplikacji mobilnych w HTML5• Dostęp do natywnych funkcji telefonujQuery Mobile• Wersja alpha• Działa na: iOS, Android, webOS, MeeGo, Windows i S60Facebook stawia na

HTML5• 70% użytkowników może korzystać z HTML5

HTML5 W HTML5 W SMARTPHONACHSMARTPHONACH

Co z Adobe Flash?Co z Adobe Flash?

Adobe Flash

www.empathy.pl

Steve Jobs: „Flash to przeszłość”• Otwaty standard• Stabilność• Wydajność• Natywne video• Niepotrzebna warstwa pośrednia• Dotykowy interfejs

Adobe Flash

www.empathy.pl

Adobe Flash Player 10.2• Sprzętowa akceleracja• Mniejsze użycie procesora przy video (85%)• Video na wielu ekranach

Adobe Flash Player 10.3• Local Storage Objects –

zarządzanie „ciastkami”• Ulepszenie streamingu audio• Pomiar statystyk oglądalności mediówAdobe Flash Player 11• 3D API - Molehill

Molehill

www.empathy.pl

Flash 3D API - Molehill• Sprzętowa akceleracja GPU• Definiowanie shaderów i świateł na niskim poziomie• Interfejs wyższego poziomu poprzez frameworki• Zwiększona wydajność• Użycie DX9/OpenGL/OpenGL ES/SoftwareFrameworki

Dostępność HTML5Dostępność HTML5

Przeglądarki

www.empathy.pl

ranking.pl

Przeglądarki

www.empathy.pl

w3counter.com

Przeglądarki

www.empathy.pl

ranking.pl

Popularność przeglądarek w Polsce

Systemy operacyjne

www.empathy.pl

HTML5 a Flash

www.empathy.pl

Łączny udział nowoczesnych przeglądarek w Polsce:

44,02%

Adobe Flash Player :

~99%

Łączny udział nowoczesnych przeglądarek na świecie:

~40%

PodsumowaniePodsumowanie

Podsumowanie

www.empathy.pl

• HTML 5 oficjalnie dopiero w 2014• Słaba kompatybilność• Słaba wydajność• Rozwiązania zastępcze• Google Chrome Frame• Mały zasięg

DziękujęDziękuję

j.czarnecki@empathy.plj.czarnecki@empathy.plwww.empathy.pl/facebookwww.empathy.pl/facebook

Nasz blog

www.empathy.pl

www.imagineblog.pl

Technologie internetowe bez tajemnic