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

Transkrypt

1

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 CSS 1 + JavaScript 1997 HTML 3.2 i CSS CSS XHTML 1 i HTML AJAX 2008 HTML 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: 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 Opera Internet Explorer 9 Safari 5 HTML5 25% 10% 30% 14% 15% Adobe Flash 15% 20% 15% 16% 13% 35% 30% 25% 20% 15% 10% HTML5 Adobe Flash 5% 0% Chrome 11 Firefox Opera Internet Explorer 9 Safari 5

31 Testy wydajności YouTube wyniki testów z Wikipedii Chrome (Mac) Firefox (Mac) Safari (Mac) Chrome (Win) Firefox (Win) Internet Explorer 8 HTML % % 25.66% Adobe Flash 10 Adobe Flash 10.1 Safari (Win) 50.39% 40.25% 37.41% 19.55% 22% 22.41% 23.22% 49.79% 42.07% 32.07% 10.73% 6% 14.62% 7.43% 60,00% 50,00% 40,00% 30,00% 20,00% 10,00% HTML5 Adobe Flash 10 Adobe Flash ,00% Chrome (Mac) Firefox (Mac) Safari (Mac) Chrome (Win) Firefox (Win) Internet Explorer 8 Safari (Win)

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 W przypadku ograniczeń finansowych Jeśli chcesz być wspierany na produktach firmy Apple (ipad, iphone, ) Jeśli chcesz pracować w otwartym środowisku Jeśli zdecydujesz się na natywną obsługę bez wtyczek Jeśli chcesz, by Twoja strona była poprawnie indeksowana Jeśli musisz obsługiwać wiele różnych, w tym starszych, przeglądarek Gdy chcesz przetwarzać strumienie multimedialne wysokiej jakości W przypadku gdy chcesz chronić zawartość publikowaną w sieci przed nieautoryzowanym wykorzystaniem Jeśli chcesz publikować reklamy zawierające wideo W przypadku integracji komunikacji dwustronnej wykorzystującej strumienie multimedialne, np. rozmowy wideo

34 Dlaczego Adobe Flash? 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.

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 ( seven-reasons-web-designers-remain-loyal-to-flash/

39