Dlaczego HTML 5, a nie Flash?

Dlaczego HTML 5, a nie Flash? Jacek Czarnecki Empathy – 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 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 HTML5

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
Kompatybilność
Kodek IE Chrome Firefox Opera Ogg MP3 WAV ACC

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.
WebP
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ść
Problemy
Mnogość formatów
Wydajność
Zabezpieczenie treści
Streaming
Kodek IE Chrome Firefox Opera Theora H.264 WebM

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ów
PhoneGap
Darmowy framework dla aplikacji mobilnych w HTML5
Dostęp do natywnych funkcji telefonu
jQuery Mobile
Wersja alpha
Działa na: iOS, Android, webOS, MeeGo, Windows i S60
Facebook stawia na HTML5
70% użytkowników może korzystać z HTML5

HTML5 W SMARTPHONACH

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ów
Adobe 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/Software
Frameworki

Dostę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%

Podsumowanie

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ę [email_address] www.empathy.pl/facebook

Nasz blog www.empathy.pl www. imagine blog.pl Technologie internetowe bez tajemnic

Dlaczego HTML 5, a nie Flash?

by Filip Dębowski on Jun 07, 2011

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Dlaczego HTML 5, a nie Flash? — Presentation Transcript