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

Prezentacja na temat: "Czym są HTML5 i Adobe Flash? Nowe technologie związane ze standardem Charakterystyka rozwiązań Testy wydajności Podsumowanie Bibliografia Wprowadzenie."— Zapis prezentacji:

1

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

3 Czym są HTML5 i Adobe Flash?

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

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

6 Nowe technologie związane ze standardem

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

8 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

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

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

11 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

12 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

13

14 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ń

15

16 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

17

18 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

19

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

21 Charakterystyka rozwiazań rozwiązań

22 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

23 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

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

25 Użytkownicy FLASH FLASHHTML5

26 Obsługa funkcji HTML5 i FLASH FLASHHTML5

27

28 Testy wydajności

29 Chrome 11 Firefox 4.0.1 Opera 11.11 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 ( http://www.youtube.com/watch?v=e-fHh3a2ub4 ) http://www.youtube.com/watch?v=e-fHh3a2ub4

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

31 Podsumowanie

32 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

33 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?

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

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

36 Prezentacja HTML5 autorstwa Marcina Wicharego (http://slides.html5rocks.com)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)http://en.wikipedia.org/wiki/HTML5 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://www.w3.org/TR/html5http://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/ http://features.techworld.com/applications/3225509/flash-vs-html5- seven-reasons-web-designers-remain-loyal-to-flash/ Bibliografia

37