HTML 5 w tworzeniu aplikacji internetowych
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
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
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
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)
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
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, email, number, color,...) Wsparcie dla rysowania 2D, audio i video (canvas, audio, video) Określenie postępowania w razie błędów kodu Atrybuty data-*
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,...)
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
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)
Nowe pola formularza tel week search time url datetime-local email number datetime range date color month required
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
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>
Kompatybilność Najlepsza dla przeglądarek WebKit (Safari/Chrome/iOS/Android) Bardzo dobra dla Firefoksa i Opery Dobra dla IE 9 http://www.findmebyip.com/litmus/
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
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
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
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
jquery Mobile - demo www.codiqa.com
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!
jquery Mobile - - jak to działa? Inkluzja stylów CSS <link rel="stylesheet" href="http://code.jquery.com/ mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> Inkluzja skryptów JS <script src="http://ajax.googleapis.com/ajax/libs/ jquery/1.6.4/jquery.min.js"></script> <script src="http://code.jquery.com/mobile/1.0.1/ jquery.mobile-1.0.1.min.js"></script>
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
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
Sencha Touch - komponenty Przyciski Wybieracze dat Formularze Animacje Paski narzędzi Mapy Karuzele Audio Zakładki Wideo Wyskakujące okna AJAX Dymki JSON/XMLHttpRequest
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
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ę!)
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
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' },
Komunikacja klient-serwer EventSource - z serwera do klienta, bardzo prosta http://www.html5rocks.com/en/tutorials/eventsource/basics/ WebSocket - dwukierunkowa, bardziej skomplikowana http://jwebsocket.org/ AJAX - z klienta do serwera (+ odpowiedzi w drugą stronę), prosta, bardzo funkcjonalna, ale mniej wydajna http://xajaxproject.org/ AMF - wkrótce w Sencha Touch (Q2 2012)
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
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);
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! );?>
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
WebSockets - JavaScript var host = ws://127.0.0.1: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) { }; }
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
Pytania?