HTML 5 - Blogi

Transkrypt

HTML 5 - Blogi

HTML 5
w tworzeniu aplikacji internetowych
czwartek, 5 kwietnia 12
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
•
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)
Przy dużych, skomplikowanych projektach kompilowany Flash ma
lepszą wydajność
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
Rysowanie 2D
Geolokalizacja
Aplikacje offline
Drag & Drop
Drukowanie
Alerty
•
•
Strumień zdarzeń
•
•
•
•
Uruchamianie skryptów w tle
Dwukierunkowa komunikacja z
serwerem
Lokalna baza danych
Komunikacja między dokumentami
Timery
•
•
•
•
•
•
•
Nowe elementy
strukturalne
section (sekcja dokumentu)
article (główna część)
aside (tekst poboczny)
hgroup (nagłówek sekcji)
header (nagłówek)
footer (stopka)
nav (nawigacja)
•
•
•
•
•
•
•
figure (niezależny przypis - obrazek, etc.)
audio/video/canvas
embed (oficjalnie)
datagrid
progress (pasek postępu)
meter (wskaźnik użycia)
output (analogicznie do input)
Nowe pola formularza
•
•
•
•
•
•
•
tel
search
url
email
datetime
date
month
•
•
•
•
•
•
•
week
time
datetime-local
number
range
color
required
Nowości w CSS 3
•
•
•
•
•
•
•
Cieniowanie tekstu
Cieniowanie elementów
Modele barw HSL(A) i RGBA
Gradienty
Przezroczystość
Kontrola styku ramki i tła
Wieloelementowe tło
•
•
•
•
•
•
•
Zaokrąglanie narożników
Dołączanie czcionek (format OTF)
Animacje i przejścia
Transformacje (przesunięcia, obroty)
Odbicia
Kolumny
Flex Boxes
Szkielet pliku
HTML 5
<!doctype html>
<html lang="pl">
<head>
<!doctype html>
<html lang="pl">
<head>
</html>
</head>
<body>
<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>
</body>
<meta charset="utf-8">
<title>Mój drugi dokument HTML</title>
<link rel="stylesheet" href="style.css">
<script src="skrypt.js"></script>
<header>
</header>
<nav>
</nav>
<article>
<section>
</section>
</article>
<footer>
</footer>
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
•
•
•
Szybko się rozwija
•
Bardzo elegancki kod
Wspiera smartfony i tablety (iOS, Android, BlackBerry, Bada,
Windows Phone, Symbian, MeeGo, ...)
Niezbyt dużo możliwości
Znakomite narzędzie do projektowania interfejsów (w podstawowej
wersji darmowe!)
jQuery Mobile - demo
www.codiqa.com
Codiqua
•
•
Tylko wersja on-line
•
•
•
Wersja Solo - zapis, do 5 projektów, $10 / miesiąc
Wersja darmowa nie umożliwia zapisu, jedynie pobranie gotowego
kodu HTML (czyli nie ma możliwości późniejszej edycji)
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
•
Inkluzja skryptów JS
<link rel="stylesheet" href="http://code.jquery.com/
mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<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-*
•
Kod JavaScript modyfikuje kod HTML na potrzeby uzyskania
odpowiedniego wyglądu i działania
<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">
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
Formularze
Paski narzędzi
Karuzele
Zakładki
Wyskakujące okna
Dymki
•
•
•
•
•
•
•
Wybieracze dat
Animacje
Mapy
Audio
Wideo
AJAX
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
•
Edytujemy plik app/view/Main.js
Dodajemy SDK Tools do ścieżki
sencha app create SenchaTest /Library/WebServer/Documents/
senchatest
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

HTML 5 - Blogi

Transkrypt

Podobne dokumenty

Pobierz gazetkę "Z życia szkoły" numer 5