dlaczego html 5, a nie flash?
DESCRIPTION
Prezentacja Jacka Czarneckiego (Empathy) z KrakSpot Tech #5.TRANSCRIPT
![Page 1: Dlaczego HTML 5, a nie Flash?](https://reader035.vdocuments.site/reader035/viewer/2022062418/555d8dfdd8b42a3a3b8b5549/html5/thumbnails/1.jpg)
Dlaczego HTML 5, a Dlaczego HTML 5, a nie Flash?nie Flash?
Jacek CzarneckiEmpathy – Internet Software
House
![Page 2: Dlaczego HTML 5, a nie Flash?](https://reader035.vdocuments.site/reader035/viewer/2022062418/555d8dfdd8b42a3a3b8b5549/html5/thumbnails/2.jpg)
Wprowadzenie
www.empathy.pl
• Początek HTML5• Multimedia• HTML5 w urządzeniach mobilnych• Co z Adobe Flash?• Dostępność• Podsumowanie
Vs
![Page 3: Dlaczego HTML 5, a nie Flash?](https://reader035.vdocuments.site/reader035/viewer/2022062418/555d8dfdd8b42a3a3b8b5549/html5/thumbnails/3.jpg)
POCZĄTEK HTML5POCZĄTEK HTML5
![Page 4: Dlaczego HTML 5, a nie Flash?](https://reader035.vdocuments.site/reader035/viewer/2022062418/555d8dfdd8b42a3a3b8b5549/html5/thumbnails/4.jpg)
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
![Page 5: Dlaczego HTML 5, a nie Flash?](https://reader035.vdocuments.site/reader035/viewer/2022062418/555d8dfdd8b42a3a3b8b5549/html5/thumbnails/5.jpg)
WHATWG
www.empathy.pl
• Web applications
• Web forms 2• Web controls
…
Web Hypertext Application Technology Working Group
![Page 6: Dlaczego HTML 5, a nie Flash?](https://reader035.vdocuments.site/reader035/viewer/2022062418/555d8dfdd8b42a3a3b8b5549/html5/thumbnails/6.jpg)
HTML5
www.empathy.pl
• Nowe tagi
• Nowe API• Nowe metody DOM
![Page 7: Dlaczego HTML 5, a nie Flash?](https://reader035.vdocuments.site/reader035/viewer/2022062418/555d8dfdd8b42a3a3b8b5549/html5/thumbnails/7.jpg)
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
![Page 8: Dlaczego HTML 5, a nie Flash?](https://reader035.vdocuments.site/reader035/viewer/2022062418/555d8dfdd8b42a3a3b8b5549/html5/thumbnails/8.jpg)
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”>
![Page 9: Dlaczego HTML 5, a nie Flash?](https://reader035.vdocuments.site/reader035/viewer/2022062418/555d8dfdd8b42a3a3b8b5549/html5/thumbnails/9.jpg)
Multimedia w Multimedia w HTML5HTML5
![Page 10: Dlaczego HTML 5, a nie Flash?](https://reader035.vdocuments.site/reader035/viewer/2022062418/555d8dfdd8b42a3a3b8b5549/html5/thumbnails/10.jpg)
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ść
![Page 11: Dlaczego HTML 5, a nie Flash?](https://reader035.vdocuments.site/reader035/viewer/2022062418/555d8dfdd8b42a3a3b8b5549/html5/thumbnails/11.jpg)
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
![Page 12: Dlaczego HTML 5, a nie Flash?](https://reader035.vdocuments.site/reader035/viewer/2022062418/555d8dfdd8b42a3a3b8b5549/html5/thumbnails/12.jpg)
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
![Page 13: Dlaczego HTML 5, a nie Flash?](https://reader035.vdocuments.site/reader035/viewer/2022062418/555d8dfdd8b42a3a3b8b5549/html5/thumbnails/13.jpg)
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
![Page 14: Dlaczego HTML 5, a nie Flash?](https://reader035.vdocuments.site/reader035/viewer/2022062418/555d8dfdd8b42a3a3b8b5549/html5/thumbnails/14.jpg)
Video
www.empathy.pl
Kompatybilność
Kodek IE Chrome Firefox Opera
Theora
H.264
WebM
Problemy• Mnogość formatów• Wydajność• Zabezpieczenie treści• Streaming
![Page 15: Dlaczego HTML 5, a nie Flash?](https://reader035.vdocuments.site/reader035/viewer/2022062418/555d8dfdd8b42a3a3b8b5549/html5/thumbnails/15.jpg)
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
![Page 16: Dlaczego HTML 5, a nie Flash?](https://reader035.vdocuments.site/reader035/viewer/2022062418/555d8dfdd8b42a3a3b8b5549/html5/thumbnails/16.jpg)
HTML5 W HTML5 W SMARTPHONACHSMARTPHONACH
![Page 17: Dlaczego HTML 5, a nie Flash?](https://reader035.vdocuments.site/reader035/viewer/2022062418/555d8dfdd8b42a3a3b8b5549/html5/thumbnails/17.jpg)
Co z Adobe Flash?Co z Adobe Flash?
![Page 18: Dlaczego HTML 5, a nie Flash?](https://reader035.vdocuments.site/reader035/viewer/2022062418/555d8dfdd8b42a3a3b8b5549/html5/thumbnails/18.jpg)
Adobe Flash
www.empathy.pl
Steve Jobs: „Flash to przeszłość”• Otwaty standard• Stabilność• Wydajność• Natywne video• Niepotrzebna warstwa pośrednia• Dotykowy interfejs
![Page 19: Dlaczego HTML 5, a nie Flash?](https://reader035.vdocuments.site/reader035/viewer/2022062418/555d8dfdd8b42a3a3b8b5549/html5/thumbnails/19.jpg)
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
![Page 20: Dlaczego HTML 5, a nie Flash?](https://reader035.vdocuments.site/reader035/viewer/2022062418/555d8dfdd8b42a3a3b8b5549/html5/thumbnails/20.jpg)
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
![Page 21: Dlaczego HTML 5, a nie Flash?](https://reader035.vdocuments.site/reader035/viewer/2022062418/555d8dfdd8b42a3a3b8b5549/html5/thumbnails/21.jpg)
Dostępność HTML5Dostępność HTML5
![Page 22: Dlaczego HTML 5, a nie Flash?](https://reader035.vdocuments.site/reader035/viewer/2022062418/555d8dfdd8b42a3a3b8b5549/html5/thumbnails/22.jpg)
Przeglądarki
www.empathy.pl
ranking.pl
![Page 23: Dlaczego HTML 5, a nie Flash?](https://reader035.vdocuments.site/reader035/viewer/2022062418/555d8dfdd8b42a3a3b8b5549/html5/thumbnails/23.jpg)
Przeglądarki
www.empathy.pl
w3counter.com
![Page 24: Dlaczego HTML 5, a nie Flash?](https://reader035.vdocuments.site/reader035/viewer/2022062418/555d8dfdd8b42a3a3b8b5549/html5/thumbnails/24.jpg)
Przeglądarki
www.empathy.pl
ranking.pl
Popularność przeglądarek w Polsce
![Page 25: Dlaczego HTML 5, a nie Flash?](https://reader035.vdocuments.site/reader035/viewer/2022062418/555d8dfdd8b42a3a3b8b5549/html5/thumbnails/25.jpg)
Systemy operacyjne
www.empathy.pl
![Page 26: Dlaczego HTML 5, a nie Flash?](https://reader035.vdocuments.site/reader035/viewer/2022062418/555d8dfdd8b42a3a3b8b5549/html5/thumbnails/26.jpg)
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%
![Page 27: Dlaczego HTML 5, a nie Flash?](https://reader035.vdocuments.site/reader035/viewer/2022062418/555d8dfdd8b42a3a3b8b5549/html5/thumbnails/27.jpg)
PodsumowaniePodsumowanie
![Page 28: Dlaczego HTML 5, a nie Flash?](https://reader035.vdocuments.site/reader035/viewer/2022062418/555d8dfdd8b42a3a3b8b5549/html5/thumbnails/28.jpg)
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
![Page 30: Dlaczego HTML 5, a nie Flash?](https://reader035.vdocuments.site/reader035/viewer/2022062418/555d8dfdd8b42a3a3b8b5549/html5/thumbnails/30.jpg)
Nasz blog
www.empathy.pl
www.imagineblog.pl
Technologie internetowe bez tajemnic