Adobe Flash vs Hyper Text Markup Language 5

Prezentacja na temat: "Adobe Flash vs Hyper Text Markup Language 5"— Zapis prezentacji:

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

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

3 Czym są HTML5 i Adobe Flash?

4 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

5 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.

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

7 Nowe technologie związane ze standardem

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

9 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

10 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

11 Multimedia Quake II: http://crystalin.dyndns.org:8080/GwtQuake.html
Civilization: Wolfenstein 3d:

12 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.

13 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.

14 Gromadzenie informacji

15 Łą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.

16 Łączność i realizacja zadań

17 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.

18 Obsługa formularzy i stron

19 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

20 Semantyka stron

21 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.

22 Charakterystyka rozwiązań rozwiązań

23 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

24 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

25 Dostępność technologii w przeglądarkach internetowych

26 Użytkownicy FLASH FLASH HTML5

27 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ść (%)

28

29 Testy wydajności

30 Testy wydajności YouTube – odtwarzanie filmów WebM 720p ( 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%

31 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%

32 Podsumowanie

33 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

34 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.

35 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.

36 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

37 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ń.

38 Bibliografia Prezentacja HTML5 autorstwa Marcina Wicharego ( Wersja anglojęzyczna Wikipedii ( i Materiały referencyjne World Wide Web Consortium ( i Web Hypertext Application Technology Working Group (

39 Dziękujemy za uwagę