dlaczego html 5, a nie flash?
DESCRIPTION
Prezentacja Jacka Czarneckiego (Empathy) z KrakSpot Tech #5.TRANSCRIPT
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
Nasz blog
www.empathy.pl
www.imagineblog.pl
Technologie internetowe bez tajemnic