Adobe Flash vs Hyper Text Markup Language 5 Autorzy: Piotr Kwiatek i Paweł Głębocki Grupa: I9H1S4

Wprowadzenie Czym są HTML5 i Adobe Flash? Nowe technologie związane ze standardem Charakterystyka rozwiązań Testy wydajności Podsumowanie Bibliografia

Czym są HTML5 i Adobe Flash?

Czym jest HTML5? 1994 HTML 2 1996 CSS 1 + JavaScript 1997 HTML 3.2 i 4 2000 XHTML 1 i HTML 4.01 2005 AJAX 2008 HTML 5 2007 Google Gears O3D

Czym jest Adobe Flash? 1995 – firma FutureWave Software wydaje aplikację FutureSplash Animator, 1996 – przejęcie FutureSplash przez Macromedia, 1996 – wydanie Macromedia Flash 1.0, 2002 – wydanie Macromedia Flash MX, 2003 – wydanie Macromedia MX 2004, 2005 – przejęcie Macromedia przez Adobe, 2007 – wydanie Adobe Flash CS3 Professional, 2008 – wydanie Adobe Flash CS4 Professional, 2010 – wydanie Adobe Flash CS5 Professional.

Adobe Flash i programowanie Wbudowany język programowania AS (ActionScript) – możliwość interakcji z użytkownikiem, obsługa zdarzeń, zaawansowane animacje,

Nowe technologie związane ze standardem

Nowe technologie związane ze standardem Multimedia Gromadzenie informacji Łączność i wykonywanie zadań Obsługa formularzy i stron Semantyka strony Dysk sieciowy: \\adresIP\Demonstracje

Multimedia Audio, Video – możliwość zagnieżdżenie odtwarzacza w przeglądarce Możliwość modyfikowania treści audio spod poziomu przeglądarki Canvas – pozwala na dynamiczne, skryptowe renderowanie kształtów i obrazów bitmapowych WebGL – rozszerzenie Canvas o obsługę grafiki 3D SVG – uniwersalny format dwuwymiarowej grafiki wektorowej (statycznej i animowanej) Zagnieżdżanie czcionek w strukturze strony Device – umożliwia obsługę urządzeń takich jak: kamera internetowa, mikrofon i nośniki danych USB

Multimedia Kodowanie w Video: WebM VP8/Vorbis: Firefox, Chrome, Opera, IE, Safari MP4 H.264/AAC: IE, Safari, Chrome Ogg Theora/Vorbis: Firefox, Chrome, Opera

Multimedia Quake II: http://crystalin.dyndns.org:8080/GwtQuake.html Civilization: http://games.freeciv.net/wireframe.jsp?do=login Wolfenstein 3d: http://www.nihilogic.dk/labs/wolf/

Multimedia we Flash Flash pozwala na punktowe definiowanie grubości linii, kiedy HTML5 wymaga definiowania w pikselach. Flash używa zaawansowanych technik anti-aliasingu i mieszania barw. Nawet na ekranach, które nie posiadają takich możliwości obrazy wydają się bardzo precyzyjne i Flash wygląda lepiej. Sytuacja zmienia się wraz z wprowadzaniem SVG w HTML5, Flash jest lepszy od Canvas. Zauważa się duże rozbieżności w wydajności Canvas w różnych przeglądarkach. Co więcej kod Canvas czasami po prostu nie działa, ponieważ nie każda przeglądarka implementuje funkcje Canvas w ten sam sposób. Flash używa kodeka x264. Przewagą Flash jest to, że aplikacja Flash jest w stanie kontrolować bufor. Udostępnia przyciski nawigacyjne i inne bardziej zaawansowane opcje. Istnieje również możliwość zwrotnego powiadomienia serwera o przepustowości łącza, dzięki czemu może on dostosować jakoś (stopień kompresji) odtwarzanego filmu.

Gromadzenie informacji WebStorage – gromadzenie informacji w lokalnej pamięci Web SQL Database – gromadzenie informacji w lokalnej bazie danych Indexed Database API – gromadzenie informacji w indeksowanej bazie danych Application Cache – przechowywanie zawartości całej strony w pamięci off-line API plikowe: FileSystem, File, FileWriter – obsługa plików i katalogów Flash nie gromadzi danych w przeglądarce, a jedynie zapisuje ulotne informacje w ramach sesji wtyczki Flash, które są tracone po zamknięciu dokumentu. Brak bazy danych SQL po stronie przeglądarki. Moduły do komunikacji z zewnętrznymi bazami danych. Przechowywanie pliku SWF w Cache przeglądarki. API plikowe dostępne.

Gromadzenie informacji

Łączność i realizacja zadań WebSocket – komunikacja bazująca na zasadzie gniazd Cross-Document messaging – komunikacja miedzy otwartymi dokumentami Serwer-Sent Events – mozliwosć zgłaszania komunikatów ze strony serwera Geolocation – lokalizowanie użytkownika Notifications – informowanie użytkownika o zdarzeniach WebWorkers – obsługa wielowątkowa We Flash także dostępne Nie. Zazwyczaj wspomagane przez HTML5.

Łączność i realizacja zadań

Obsługa formularzy i stron Nowe elementy formularzy, takie jak paski postępu, suwaki, autouzupełnianie, kontrolki od wprowadzania liczb, dat, adresów… Obsługa walidacji zawartości znaczników – na podstawie typu elementu lub wyrażenia regularnego Speech Input API – możliwość wprowadzania danych przy użyciu głosu Zarządzanie historią odwiedzanych stron spod poziomu skryptów Zaimplementowane już komponenty. Renderowane przez wtyczkę FLASH, a nie tak jak w HTML5 przez system lub przeglądarkę. Obsługiwane przez ActionScript. Brak (?) Brak. Potrzebny HTML5.

Obsługa formularzy i stron

Semantyka stron Podział dokumentu na nagłówki, stopki, artykuły, sekcje umożliwiający łatwiejsze indeksowanie zawartości i wykrywanie tytułów Oznaczanie znaczenia poszczególnych fragmentów tekstu przy użyciu mikrodanych i mikroformatów, umożliwiające zrozumienie ich znaczenia, np. adres, imię i nazwisko, nazwa zespołu, firmy… Dodanie informacji nawigacyjnych zarówno na poziomie strony jak i poszczególnych odnośników

Semantyka stron

Semantyka stron Flash Strony we Flash mają dużo gorszą semantykę i są bardzo opornie czytane przez większość botów wyszukiwarek internetowych. Google jednak stara się indeksować strony we Flash, ale tylko wtedy kiedy aplikacja Flash pobiera dane z zewnętrznych plików XML lub tym podobnych.

Charakterystyka rozwiązań rozwiązań

Wady HTML5 Problemy z kodekami Video – WebM vs h.264 Brak pełnej implementacji Standard ciągle rozwijany – następują w nim zmiany Ponad 40% wykorzystywanych przeglądarek go nie wspiera (wg. danych StatCounter) Różne przeglądarki implementują różne moduły standardu – mała część wspólna

Popularność Adobe Flash 1.2 miliarda telefonów komórkowych potrafi obsługiwać Flash 70% gier online wykorzystuje Flash 98% użytkowników Internetu z niego korzysta 85% ze 100 najpopularniejszych stron wykorzystuje Flash Wiele ważnych stron wykorzystuje Flash 2-3 miliony członków społeczności deweloperów technologii Flash 90% twórców posiada zainstalowaną obsługę Flash

Dostępność technologii w przeglądarkach internetowych

Użytkownicy FLASH FLASH HTML5

Obsługa funkcji HTML5 i FLASH FLASH HTML5 Rysowanie 2D Native 3D SVG VIDEO AUDIO Efekty (filtry) Dostęp do plików (API) Socket Connections Rozpoznawalność (%)

Testy wydajności

Testy wydajności YouTube – odtwarzanie filmów WebM 720p (http://www.youtube.com/watch?v=e-fHh3a2ub4) Chrome 11 Firefox 4.0.1 Opera 11.11 Internet Explorer 9 Safari 5 HTML5 25% 10% 30% 14% 15% Adobe Flash 20% 16% 13%

Testy wydajności YouTube – wyniki testów z Wikipedii Chrome (Mac) Firefox (Mac) Safari Chrome (Win) Firefox (Win) Internet Explorer 8 Safari (Win) HTML5 49.89% - 12.39% 25.66% Adobe Flash 10 50.39% 40.25% 37.41% 19.55% 22% 22.41% 23.22% Adobe Flash 10.1 49.79% 42.07% 32.07% 10.73% 6% 14.62% 7.43%

Podsumowanie

Co, kiedy wybrać? Kierunki rozwoju: Wypieranie XHTML i HTML 4.01 przez HTML5 Integracja obu standardów w zawartość stron Prognoza – brak dominującego standardu w najbliższym okresie Wybierz HTML5 Wybierz Adobe Flash W przypadku systemów o niskiej wydajności Jeśli musisz obsługiwać wiele różnych, w tym starszych, przeglądarek W przypadku ograniczeń finansowych Gdy chcesz przetwarzać strumienie multimedialne wysokiej jakości Jeśli chcesz być wspierany na produktach firmy Apple (iPad, iPhone, …) W przypadku gdy chcesz chronić zawartość publikowaną w sieci przed nieautoryzowanym wykorzystaniem Jeśli chcesz pracować w otwartym środowisku Jeśli chcesz publikować reklamy zawierające wideo Jeśli zdecydujesz się na natywną obsługę – bez wtyczek W przypadku integracji komunikacji dwustronnej wykorzystującej strumienie multimedialne, np. rozmowy wideo Jeśli chcesz, by Twoja strona była poprawnie indeksowana

Dlaczego Adobe Flash? Wygodniejszy dla developerów. Adobe udostępnia środowiska programistyczne i narzędzia do programowania aplikacji Flash, Flash pozwala zagnieżdżać niestandardowe czcionki. HTML5 posiada już takie mechanizmy, ale ciągle są w fazie początkowej (WOFF, MsWEFT). Jedna aplikacja Flash działa wszędzie. Zdarza się kilka wyjątków, jednak firma Adobe ciągle dąży do takiego efektu w imię idei „pixel perfect fidelity across browsers and systems”. Użytkownicy Adobe Creative Suite posiadają możliwość używania dodatkowych wtyczek, które umożliwiają stosowanie w animacjach Flash dodatkowych efektów. Animacje stworzone przy pomocy AJAX mają całkowicie otwarty kod. Adobe Flash posiada dużo lepiej przygotowany silnik do tworzenia gier (renderowanie obiektów, przestrzeni, integracja z Facebook, Twitter), gdzie HTML5 posiada jedynie enigmatyczne Javascript-owe biblioteki.

Co dalej z Adobe Flash? W wersji 10.2 wprowadzono Stage Video API, które umożliwia akcelerację sprzętową, Nowe API wykorzystuje procesor na każdym etapie renderowania, Obsługa 2 monitorów w trybie Fullscreen, Wprowadzenie podpikselowego renderowania czcionek, dzięki czemu napisy wyglądają ładniej we Flash.

Czy Adobe jest wrogiem HTML5? Adobe jest aktywnym członkiem grup zajmującym się tworzeniem i rozwijaniem standardu HTML5 W marcu 2011r. Adobe opublikowało wersję testową programu Wallaby – aplikacji pozwalającej na prostą i szybką konwersję plików źródłowych Action Script (Flash) do języka HTML5

Grube ryby o HTML5 i Flash Apple nie wspiera Flash, Microsoft uczestniczy w rozwijaniu HTML5, Google wspiera i wykorzystuje ostrożnie HTML5 (np. w Youtube), jednak faworyzuje Flasha, Adobe o dziwo rozwija HTML5 jednak blokuje wiele potencjalnych rozwiązań.

Bibliografia Prezentacja HTML5 autorstwa Marcina Wicharego (http://slides.html5rocks.com) Wersja anglojęzyczna Wikipedii (http://en.wikipedia.org/wiki/HTML5 i http://en.wikipedia.org/wiki/Comparison_of_HTML5_and_Flash) Materiały referencyjne World Wide Web Consortium (http://www.w3.org/TR/html5) i Web Hypertext Application Technology Working Group (http://www.whatwg.org/specs/web-apps/current-work/multipage) http://features.techworld.com/applications/3225509/flash-vs-html5-seven-reasons-web-designers-remain-loyal-to-flash/

Dziękujemy za uwagę