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

Czym są HTML5 i Adobe Flash?

1994 HTML CSS 1 + JavaScript 1997 HTML 3.2 i CSS CSS XHTML 1 i HTML AJAX 2008 HTML 5 Czym jest HTML5? 2007 Google Gears O3D

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. Czym jest Adobe Flash?

Nowe technologie związane ze standardem

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

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: Civilization: Wolfenstein 3d:

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. Multimedia we Flash

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 Gromadzenie informacji

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 Łączność i realizacja zadań

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 Obsługa formularzy i 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

Strony we Flash mają dużo gorszą semantykę i są bardzo opornie czytane przez większość botów wyszukiwarek internetowych. Semantyka stron Flash

Charakterystyka rozwiazań rozwiązań

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 Wady HTML5

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 Popularność Adobe Flash

Dostępność technologii w przeglądarkach internetowych

Użytkownicy FLASH FLASHHTML5

Obsługa funkcji HTML5 i FLASH FLASHHTML5

Testy wydajności

Chrome 11 Firefox Opera Internet Explorer 9 Safari 5 HTML525%10%30%14%15% Adobe Flash15%20%15%16%13% Testy wydajności YouTube – odtwarzanie filmów WebM 720p ( )

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

Podsumowanie

Co, kiedy wybrać? Wybierz HTML5Wybierz 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ń finansowychGdy 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 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

1.Wygodniejszy dla developerów. Adobe udostępnia środowiska programistyczne i narzędzia do programowania aplikacji Flash, 2.Flash pozwala zagnieżdżać niestandardowe czcionki. HTML5 posiada już takie mechanizmy, ale ciągle są w fazie początkowej (WOFF, MsWEFT). 3.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. 4.Użytkownicy Adobe Creative Suite posiadają możliwość używania dodatkowych wtyczek, które umożliwiają stosowanie w animacjach Flash dodatkowych efektów. 5.Animacje stworzone przy pomocy AJAX mają całkowicie otwarty kod. 6.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. Dlaczego 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. Co dalej z Adobe Flash?

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 Czy Adobe jest wrogiem HTML5?

Prezentacja HTML5 autorstwa Marcina Wicharego ( Wersja anglojęzyczna Wikipedii ( i Materiały referencyjne World Wide Web Consortium ( i Web Hypertext Application Technology Working Group ( apps/current-work/multipage) apps/current-work/multipage seven-reasons-web-designers-remain-loyal-to-flash/ seven-reasons-web-designers-remain-loyal-to-flash/ Bibliografia