HTML 5. w tworzeniu aplikacji internetowych. czwartek, 5 kwietnia 12

HTML
DOWNLOAD

Wielkość: px

Rozpocząć pokaz od strony:

Download "HTML 5. w tworzeniu aplikacji internetowych. czwartek, 5 kwietnia 12"

Sabina Wróblewska
10 lat temu
Przeglądów:

1 HTML 5 w tworzeniu aplikacji internetowych

2 Agenda HTML 5 w porównaniu do Fleksa HTML 5 w porównaniu do HTML 4 Nowe możliwości HTML 5 jquery Mobile Sencha Touch Komunikacja klient-serwer

3 HTML 5 vs. Flex Sam HTML 5 nie jest wystarczający do stworzenia aplikacji mobilnej Technologia HTML 5 Technologia Flex Zawartość HTML 5 MXML Wygląd CSS 3 CSS Działanie JavaScript ActionScript

4 Dlaczego HTML 5 jest lepszy od Fleksa? HTML 5 to otwarty standard, wspierany przez różne przeglądarki, niezależny od kaprysów jednej firmy Aplikacja w HTML 5 działa praktycznie wszędzie - na komputerach, tabletach i smartfonach Proste aplikacje w HTML 5 są bez porównania mniej zasobożerne niż ich odpowiedniki we Flashu Aplikacje HTML 5 można bezproblemowo pisać bez płatnych narzędzi developerskich

Aplikacja w HTML 5 działa praktycznie wszędzie - na komputerach, tabletach i smartfonach Proste

5 Dlaczego HTML 5 jest gorszy od Fleksa? Flex jest dużo bardziej rozbudowany od HTML 5 Przy dużych, skomplikowanych projektach kompilowany Flash ma lepszą wydajność Flash zawsze wygląda tak samo, HTML na różnych przeglądarkach może wyglądać różnie (choć jest dużo lepiej niż było z HTML 4) Flex ma znakomite narzędzia do tworzenia i debugowania aplikacji (Flash Builder, Flash Catalyst)

kompilowany Flash ma lepszą wydajność Flash zawsze wygląda tak samo, HTML na różnych

6 Dlaczego HTML5 jest gorszy od Fleksa? (c.d.) Pobieranie danych z serwera jest znacznie prostsze w implementacji we Fleksie (Flash Builder 4) W przypadku aplikacji desktopowych offline Flex/AIR po prostu miażdży swoimi możliwościami HTML5

7 Czym się różni HTML 5 od HTML 4? Uproszczony (usunięcie tagów, argumentów, prosty nagłówek) Zawiera tagi strukturalne (header, footer, nav, section,...) Zawiera nowe typy pól formularza (date, , number, color,...) Wsparcie dla rysowania 2D, audio i video (canvas, audio, video) Określenie postępowania w razie błędów kodu Atrybuty data-*

8 Usunięte/przestarzałe tagi i atrybuty Tagi formatujące tekst (big, center, font, tt, strike) Ramki (frame, frameset, noframes) Atrybuty formatujące (align, background, bgcolor, border, cellpadding, cellspacing, height, width, hspace, vspace,...)

noframes) Atrybuty formatujące (align, background, bgcolor,

9 Nowe API Audio / Video Strumień zdarzeń Rysowanie 2D Dwukierunkowa komunikacja z serwerem Geolokalizacja Uruchamianie skryptów w tle Aplikacje offline Lokalna baza danych Drag & Drop Komunikacja między dokumentami Drukowanie Timery Alerty

Uruchamianie skryptów w tle Aplikacje offline Lokalna baza

10 Nowe elementy strukturalne section (sekcja dokumentu) figure (niezależny przypis - obrazek, etc.) article (główna część) audio/video/canvas aside (tekst poboczny) embed (oficjalnie) hgroup (nagłówek sekcji) datagrid header (nagłówek) progress (pasek postępu) footer (stopka) meter (wskaźnik użycia) nav (nawigacja) output (analogicznie do input)

) article (główna część) audio/video/canvas aside (tekst poboczny) embed (oficjalnie)

11 Nowe pola formularza tel week search time url datetime-local number datetime range date color month required

12 Nowości w CSS 3 Cieniowanie tekstu Zaokrąglanie narożników Cieniowanie elementów Dołączanie czcionek (format OTF) Modele barw HSL(A) i RGBA Animacje i przejścia Gradienty Transformacje (przesunięcia, obroty) Przezroczystość Odbicia Kontrola styku ramki i tła Kolumny Wieloelementowe tło Flex Boxes

Animacje i przejścia Gradienty Transformacje (przesunięcia, obroty)

13 Szkielet pliku HTML 5 <!doctype html> <html lang="pl"> <head> <meta charset="utf-8"> <title>mój pierwszy dokument HTML</title> <link rel="stylesheet" href="style.css"> </head> <body> <script src="skrypt.js"></script> </body> </html> <!doctype html> <html lang="pl"> <head> <meta charset="utf-8"> <title>mój drugi dokument HTML</title> <link rel="stylesheet" href="style.css"> </head> <body> <script src="skrypt.js"></script> <header> </header> <nav> </nav> <article> <section> </section> </article> <footer> </footer> </body> </html>

href="style.css"> </head> <body> <script src="skrypt.js"></script> </body> </html> <!

14 Kompatybilność Najlepsza dla przeglądarek WebKit (Safari/Chrome/iOS/Android) Bardzo dobra dla Firefoksa i Opery Dobra dla IE 9

15 Czy potrzebny jest framework? Istnieje wiele frameworków do tworzenia aplikacji HTML 5 Ułatwiają one nieco pisanie aplikacji Rozwiązują problem kompatybilności różnych przeglądarek Zaburzają logikę kodu Użyteczne do zadań specjalnych (np. wykresy, formularze) Bardzo użyteczne przy pisaniu aplikacji na urządzenia mobilne

pisanie aplikacji Rozwiązują problem kompatybilności różnych przeglądarek

16 Aplikacja HTML 5 w App Store / Google Play Jeżeli chcemy naszą aplikację w HTML5/JS/CSS umieścić w sklepie z aplikacjami, wystarczy użyć frameworku PhoneGap Udostępnia dodatkowe możliwości, które dostępne są wyłącznie dla aplikacji natywnych Aplikację trzeba i tak napisać niezależnie Wada: wymaga instalacji

PhoneGap Udostępnia dodatkowe możliwości, które dostępne są wyłącznie dla

17 Frameworki mobilne dla HTML 5 jquery Touch tylko smartfony, ciągle w fazie beta, ograniczone możliwości, elegancki kod, bardzo prosty w użyciu, darmowy jquery Mobile smartfony i tablety, ograniczone możliwości, elegancki kod, bardzo prosty w użyciu, darmowy, dodatkowo płatne narzędzia Sencha Touch smartfony i tablety, wygląda jak aplikacje natywne, nieciekawy kod, niezbyt łatwy, darmowy, dodatkowe narzędzia płatne

możliwości, elegancki kod, bardzo prosty w użyciu, darmowy, dodatkowo płatne narzędzia Sencha Touch

18 jquery Mobile Darmowy projekt Wspiera smartfony i tablety (ios, Android, BlackBerry, Bada, Windows Phone, Symbian, MeeGo,...) Szybko się rozwija Niezbyt dużo możliwości Znakomite narzędzie do projektowania interfejsów (w podstawowej wersji darmowe!) Bardzo elegancki kod

..) Szybko się rozwija Niezbyt dużo możliwości Znakomite narzędzie

19 jquery Mobile - demo

20 Codiqua Tylko wersja on-line Wersja darmowa nie umożliwia zapisu, jedynie pobranie gotowego kodu HTML (czyli nie ma możliwości późniejszej edycji) Wersja Solo - zapis, do 5 projektów, $10 / miesiąc Wersja Unlimited - zapis dowolnej liczby projektów, $30 / miesiąc Roczny Unlimited to wyższy koszt niż zakup Flash Buildera!

Solo - zapis, do 5 projektów, $10 / miesiąc Wersja Unlimited - zapis dowolnej

21 jquery Mobile - - jak to działa? Inkluzja stylów CSS <link rel="stylesheet" href=" mobile/1.0.1/jquery.mobile min.css" /> Inkluzja skryptów JS <script src=" jquery/1.6.4/jquery.min.js"></script> <script src=" jquery.mobile min.js"></script>

22 jquery Mobile - - jak to działa? Piszemy normalny kod HTML z atrybutami data-* <div data-role="page" id="page1"> <div data-theme="a" data-role="header"> <div data-role="content"> <div class="ui-grid-a"> <a data-role="button" data-transition="fade" href="#page3" data-icon="arrow-l" dataiconpos="left"> Kod JavaScript modyfikuje kod HTML na potrzeby uzyskania odpowiedniego wyglądu i działania

23 Sencha Touch - zalety Aplikacja wygląda jak natywna (wygląd przycisków, list, etc.) Wsparcie dla typowo natywnych elementów (ikony, splashscreeny) Wsparcie dla wzorca projektowego MVC Wbudowana komunikacja klient-serwer Dużo przydatnych komponentów

24 Sencha Touch - komponenty Przyciski Wybieracze dat Formularze Animacje Paski narzędzi Mapy Karuzele Audio Zakładki Wideo Wyskakujące okna AJAX Dymki JSON/XMLHttpRequest

25 Sencha Touch - licencje Dostępne licencje: komercyjna, open-source (darmowe), embedded i OEM (płatne) Sencha Touch Charts - płatne ($99 bez supportu) Sencha Designer - narzędzie płatne Moim zdaniem nie jest warte nawet jednego dolara z $399

26 Sencha Touch - wady Definiowanie wyglądu w JavaScript, a nie w HTML Brak dobrego designera interfejsu Skomplikowana struktura kodu (wersja 2.0) Konieczność używania narzędzi SDK (wersja 2.0) Kierunek rozwoju (1.1» 2.0) Zajętość miejsca na serwerze (> 80MB na aplikację!)

27 Sencha Touch przykładowa aplikacja Instalujemy SDK i SDK Tools Dodajemy SDK Tools do ścieżki sencha app create SenchaTest /Library/WebServer/Documents/ senchatest Edytujemy plik app/view/main.js

28 Ext.define("SenchaTest.view.Main", { extend: 'Ext.Container', config: { fullscreen: true, layout: 'vbox', items: [ // PASEK TYTUŁOWY { xtype: 'toolbar', docked: 'top', title: 'HTML5', items: [ { xtype: 'button', ui: 'back', text: 'Wstecz' }, { xtype: 'spacer' }, { xtype: 'button', ui: 'forward', text: 'Dalej' } ] }, // VBOX góra - dół ); } } ] { // HBOX - lewo - prawo xtype: 'container', layout: { type: 'hbox', align: 'stretch' }, flex: 1, items: [ { xtype: 'button', text: '1', flex: 1 }, { xtype: 'button', text: '2', flex: 1 } ] }, { xtype: 'button', flex: 1, text: '3' },

29 Komunikacja klient-serwer EventSource - z serwera do klienta, bardzo prosta WebSocket - dwukierunkowa, bardziej skomplikowana AJAX - z klienta do serwera (+ odpowiedzi w drugą stronę), prosta, bardzo funkcjonalna, ale mniej wydajna AMF - wkrótce w Sencha Touch (Q2 2012)

30 EventSource Cały czas otwarte połączenie z serwerem Serwer w miarę potrzeby wysyła komunikaty Komunikaty są odbierane przez klienta Każdy typ komunikatu ma osobnego listenera

31 EventSource - klient function gotmessage(e) { document.getelementbyid( output ).innerhtml = e.data; } function goterror(e) { alert(e.data); } var stream = EventSource( stream.php ); stream.addeventlistener( message, gotmessage); stream.addeventlistener( error, goterror);

32 EventSource - serwer <?php header( Content-type: text/event-stream ); header( Cache-control: no-cache ); function sendmessage($timestamp, $msg) { echo id: $timestamp. PHP_EOL; echo data: $msg. PHP_EOL; echo PHP_EOL; ob_flush(); flush(); } $ts = time(); sendmessage($ts, Gratulacje! );?>

33 WebSocket WebSocket wymaga po stronie serwera kompletnej implementacji gniazda Do komunikacji służy zwykły tekst Parsowanie komunikatów trzeba także oprogramować Po stronie JavaScript trzeba dodać listenery

34 WebSockets - JavaScript var host = ws:// :8888/server.php ; try { socket = new WebSocket(host); socket.addeventlistener( onopen, onopen); socket.addeventlistener( onmessage, onmessage); socket.addeventlistener( onclose, onclose); } catch(e) { }; function onmessage(msg) { alert(msg.data); } function send(msg) { try { socket.send(msg); } catch(e) { }; }

35 AJAX Można programować ręcznie Można skorzystać z gotowej biblioteki (np. XAJAX) W połączeniu z EventSource ma da takie same możliwości jak WebSocket, a jest dużo prostsze w implementacji

36 Pytania?

Podobne dokumenty

rk HTML 4 a 5 różnice

rk HTML 4 a 5 różnice kompatybilność Pierwszym dużym plusem języka HTML 5 jest to, że jest zdefiniowany w sposób umożliwiający kompatybilność wstecz. Składnia Przykład dokumentu podporządkowującego się