2. přednáška

WEB 2.0 A WEBOVÉ SLUŽBY
Ondřej Urbánek
[email protected]
Obsah
●
Web 2.0 obecně
●
Standardy a technologie
●
AJAX a asynchronní komunikace
●
Sémantický web a jeho standardy
●
Principy a architektura webových služeb
●
●
SOAP, WSDL, REST
Webové služby a frameworky v Javě
Termíny
●
18.10.
8:00 – 12:45
●
15.11.
13:00 – 17:45
●
29.11.
13:00 – 17:45
●
13.12.
13:00 – 17:45
WEB 1.0
●
Webové stránky obsahující statické informace
●
Obsah vytvářen správci pro uživatele
●
Žádná interakce mezi uživateli
Web 2.0
●
Neexistuje přesná definice
●
Chápáno jako etapa vývoje webu
●
1999 – Darcy DiNucci
●
–
První zmíňka
–
Fragmented future
2004 – Tim O'Railly
–
první Web 2.0 konference
Darcy DiNucci
The Web we know now, which loads into a browser window in essentially static screenfuls, is
only an embryo of the Web to come. The first glimmerings of Web 2.0 are beginning to
appear, and we are just starting to see how that embryo might develop. The Web will be
understood not as screenfuls of text and graphics but as a transport mechanism, the ether
through which interactivity happens. It will [...] appear on your computer screen, [...] on your
TV set [...] your car dashboard [...] your cell phone [...] hand-held game machines [...] maybe
even your microwave oven.
Web, jak ho známe teď, který se jako statický text načte do okna prohlížeče, je jen zárodek
webu, který přijde. První záblesky Webu 2.0 se již začínají objevovat a my sledujeme, jak se
toto embryo začíná vyvíjet. Web bude chápán ne jako obrazovky plné textu a grafiky, ale jako
prostředí, jako éter, jehož prostřednictvím dochází k interaktivitě. Objeví se na obrazovce
počítače, na televizním přijímači, na palubní desce, na mobilním telefonu, na herní konzoli, a
možná, že i na vaší mikrovlnné troubě.
WEB 2.0
●
Uživatelé se aktivně podílejí na tvorbě obsahu
●
Vlastník jen v roli moderátora
●
Interakce a spolupráce uživatelů
●
Sdílení a znovupoužití informací
●
Kategorizace obsahu uživateli (folksonomy)
●
Long tail (dlouhý chvost)
●
User-centered, User-generated, User-controled
WEB 2.0
Příklady
●
Wiki
●
Sociální sítě
●
Blogy
●
Sdílení videa a fotografií
●
Internetové bankovnictví
●
Webové aplikace (SaaS) a desktopy
●
E-Shopy (Hodnocení, Komentáře,...)
Mashups
●
●
●
●
●
Web application hybrid
Využití, kombinace, agregace, vizualizace dat
nebo funkcionality z jednoho nebo více zdrojů
Využití API dostupných webových kanálů a
služeb
Často jednoduché rozhraní aby jej mohli
používat koncoví uživatelé
Google news, Netvibes, Twittervision
Technologie
●
HTML5, CSS3
●
Javascript, DOM
●
AJAX
●
JSON
●
XML
●
SVG
●
Flex, Flash, Silverlight
HTML5
●
Specifikace ve stádiu vývoje
●
Očekáva finální verze koncem roku 2014
●
HTML + CSS + JS
HTML5
●
Nové elementy a atributy
●
Prvky pro vkládání multimedií
●
Lokální uložiště, Lokální databáze
●
Inline SVG, MathML
●
Drag&drop, Web workers, Geolocation
●
http://www.w3.org/TR/html5-diff
CSS 3
●
●
Specifikace se skládá z mnoha modulů
Nové selektory, Media queries, zaoblené rohy,
obrázkové hrany, stíny, sloupce, transformace,
přechody, animace, vlastní fonty, atd.
●
http://www.w3.org/Style/CSS/current-work
●
http://www.w3.org/Style/CSS/specs
Javascript
●
●
●
●
Lehký, objektově orientovaný a multiplatformní
skriptovací jazyk
Standard ECMAskriptu (ECMA-262, 1997, 5.1)
Nejznámější použití jako skriptovací jazyk na
straně klienta
Dnes rozšířené i serverové použití (NodeJS,
Rhino)
Javascript
●
Dynamické typování
●
Objekty jsou asociativní pole
●
First-class functions
●
Anonymní funkce a uzávěry
●
Prototypy, Prototypová dědičnost
DOM
●
●
●
●
●
W3C DOM standard implementovaný ve většině
moderních prohlížečů.
Platformě a jazykově nezávislé rozhraní pro
dynamický přístup k dokumentům
Umožňuje programový přístup a manipulaci s
HTML a XML dokumentem
''Spojnice mezi stránkami a programy nebo
skripty”
Objeková reprezentace HTML stránky
JS API proDOM
●
document.getElementById(id)
●
element.getElementsByTagName(name)
●
document.createElement(name)
●
parentNode.appendChild(node)
●
element.innerHTML
●
element.style.left
●
element.setAttribute
●
element.getAttribute
●
element.addEventListener
Příklad
<html>
<head>
<script>
// run this function when the document is loaded
window.onload = function() {
// create a couple of elements
// in an otherwise empty HTML page
heading = document.createElement("h1");
heading_text = document.createTextNode("Big Head!");
heading.appendChild(heading_text);
document.body.appendChild(heading);
}
</script>
</head>
<body>
</body>
</html>
SVG
●
Scalable Vektor Graphics
●
Jazyk založený na XML pro definici grafiky
●
●
Navržen aby fungoval s ostatními W3C
standardy (CSS, DOM, Javascipt)
Umožňuje dynamickou manipulaci
Příklad
<svg width="540" height="200" viewBox="0 0 270 100" style="margin:-2em 0em -3em 0em">
<defs>
<radialGradient id="radial" cx="50%" cy="50%" fx="25%" fy="25%">
<stop offset="0%" stop-color="#60bafc" />
<stop offset="50%" stop-color="#409adc" />
<stop offset="100%" stop-color="#005a9c" />
</radialGradient>
<path id="curve" d="M18,60 C100,10 180,110 264,60" fill="none"/>
</defs>
<circle cx="138" cy="50" r="38" fill="url(#radial)" stroke="#005a9c" />
<text font-family="Verdana" font-size="20" fill="#ff9900">
<textPath xlink:href="#curve" method="stretch" style="visibility: visible;">
Scalable <tspan fill="white">Vector</tspan> Graphics
</textPath>
</text>
</svg>
Příklad
DEMO
●
http://slides.html5rocks.com/
●
http://www.htmlfivewow.com/
●
http://soulwire.co.uk/hello
●
http://www.chromeexperiments.com/
Responzivní design
●
Relativní velikost
●
Media queries
●
Meta tag viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
http://www.splio.com/responsive/
http://mediaqueri.es/
Media Queries
●
●
Podmíněné použití CSS stylů podle
zobrazovacího zařízení
@media tv and (min-width: 700px) and
(orientation: landscape) { ... }
http://www.w3.org/TR/css3-mediaqueries/
https://developer.mozilla.org/en-US/docs/Web/
Guide/CSS/Media_queries
Přizpůsobivost prostředí
●
Gracefull degradation
●
Progressive enhancement
http://www.w3.org/wiki/Graceful_degredation_v
ersus_progressive_enhancement
WCAG
●
Web Content Accessibility Guidelines
●
http://www.w3.org/TR/WCAG20/
Flash
●
Proprietální technologie Adobe
●
Vyžaduje plugin
●
Interaktivní aplikace, animace, hry, bannery …
●
Action Script
Flex
●
Sada technologií pro vývoj platformě
nezávisých Rich Interner Applications
●
Aplikace se spouští v Adobe flash player
●
SDK - Adobe Flex Builder (Eclipse)
●
Jazyk MXML
●
Musí se kompilovat
Silverlight
●
Aplikační platforma fy Microsoft
●
Bussiness a multimediální RIA aplikace
●
Vyžaduje plugin
●
Multimedia, grafika, animace, stramované video
a zvuk
●
UI delkarováno pomocí XAML
●
Programovací jazyky z rodiny .NET
JSON
●
●
●
Javascript Object Notation (RFC 4627)
”Lehký” textový jazykově nezávislý formát pro
výměnu dat ve formě čitelné člověkem
Odvozený z JavaScriptu (Podmnožina zápisu
objektů)
●
Mime type application/json
●
Unicode
JSON – Datové Typy
●
Number (1,23)
●
String (”String”)
●
Boolean (true, false)
●
null
●
Array ([1,2,3,4])
●
Object ({name: vlasta})
JSON – Příklad
{
"firstName": "John",
"lastName": "Smith",
"age": 25,
"address": {
"streetAddress": "21 2nd Street",
"city": "New York",
"state": "NY",
"postalCode": "10021"
},
"phoneNumber": [
{
"type": "home",
"number": "212 555-1234"
}
]
}
JSON - Javascript
●
eval();
●
JSON.parse(jsonString);
●
JSON.stringify(jsObject);
XML
●
eXtensible Markup Language (W3C XML1.1)
●
Odvozený ze staršího SGML
●
Flexibilní textový formát čitelný člověkem
●
Výměna uchovávání různých druhů dat
●
Není určený k prezentaci dat
●
Tagy nejsou předdefinovány
●
Unicode
Struktura
●
Tagy
●
Elementy
●
Atributy
●
Obsah
●
CDATA
Příklad
<?xml version="1.0" encoding="UTF-8" ?>
<person>
<!-- Osoba -->
<firstName>John</firstName>
<lastName>Smith<lastName>
<middleName />
<age>25</age>
<address>
<street>21 2nd Street</street>
<city>New York</city>
<state>NY</state>
<postalCode>10021</postalCode>
</address>
<phones>
<number type=”home”>212 555-1234</number>
</phones>
</person>
Well-Formed XML
●
●
●
●
Jeden kořenový (root) element
Elementy musí být ohraničeny startovací a
ukončovací značkou
Všechny hodnoty atributů musí být uzavřeny v
uvozovkách
Elementy mohou být vnořeny, ale nemohou se
překrývat
DTD
●
Document Type Definition
●
Popis struktury XML dokumentu
●
Deklaruje elementy, atributy, entity a notace,
jejich strukturu a atributy
●
<!DOCTYPE root_element SYSTEM "URL">
●
<!DOCTYPE root_element PUBLIC "identifikátor" "URL">
●
<!DOCTYPE root_element [ ... DTD … ]>
DTD
<!ELEMENT person (firstName, lastName, middleName?, age, address, phones)>
<!ELEMENT firstName (#PCDATA)>
<!ELEMENT lastName (#PCDATA)>
<!ELEMENT middleName (#PCDATA)>
<!ELEMENT age (#PCDATA)>
<!ELEMENT address (street, city, state?, postalCode)>
<!ELEMENT phones (number*)>
<!ELEMENT street (#PCDATA)>
<!ELEMENT city (#PCDATA)>
<!ELEMENT state (#PCDATA)>
<!ELEMENT postalCode (#PCDATA)>
<!ELEMENT number (number*)>
<!ATTLIST number type CDATA #REQUIRED>
XML Schema
●
Novější alternativa k DTD
●
Samo o sobě je XML
●
definuje místa v dokumentu, na kterých se mohou vyskytovat různé elementy
●
definuje atributy
●
definuje, které elementy jsou potomky jiných elementů
●
definuje pořadí elementů
●
definuje počty elementů
●
definuje, zda element může být prázdný, nebo zda musí obsahovat text
●
definuje datové typy elementů a jejich atributů
●
definuje standardní hodnoty elementů a atributů
<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">
<xs:element name="person">
<xs:complexType>
<xs:sequence>
<xs:element name="firstName" type="xs:string" />
<xs:element name="lastName" type="xs:string" />
<xs:element name="middleName" type="xs:string" />
<xs:element name="age" type="xs:integer" />
<xs:element name="address" type="address" />
<xs:element name="phones">
<xs:complexType>
<xs:sequence>
<xs:element name="phone" type="xs:string">
<xs:attribute name="type" type="xs:string" />
</xs:element>
</xs:sequence>
</xs:element>
</xs:complexType>
</xs:element>
<xs:complexType name="address">
XML Namespaces
●
Jmenné prostory
●
Unikátní identifikátory elementů a atributů
●
●
XML často obsahuje několik specifikací
současně, slouží pro odlišení shodně
pojmenovaných elementů
XML Namespaces
<a:a1 xmlns:a = "http://patrny.com/a">
</a:a1>
<b:b1 xmlns:b = "http://patrny.com/b">
</b:b1>
<root xmlns:a="http://patrny.com/a" xmlns:b="http://patrny.com/b">
<a:a1>
<a:a2/>
</a:a1>
<b:b1>
<a:a2/>
</b:b1>
</root>
<a:root
xmlns:a="http://patrny.com/a"
xsi:schemaLocation="http://patrny.com/schema.xsd"
XSLT
●
●
●
Extensible Stylesheet Language
Transformations
Trasformace XML do jiného XML
Processory jsou samostatný software (Saxon,
Xalan)
XSLT
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="xml" indent="yes"/>
<xsl:template match="/persons">
<root>
<xsl:apply-templates select="person"/>
</root>
</xsl:template>
<xsl:template match="person">
<name username="{@username}">
<xsl:value-of select="name" />
</name>
</xsl:template>
</xsl:stylesheet>
Parsování XML
●
●
DOM Parser
–
Pracuje s dokumentem jako s celkem
–
Objektová struktura celého dokumentu
SAX Parser
–
Simple API for XML
–
Sekvenční čtení XML dokumentu
–
Založeno na událostech
xPath
●
Jazyk k adresaci částí XML dokumentů
●
Axis(Osa), Node test (test), Predicate (Pradikát)
●
Zápis: /root//element/[attribute::attr=”val”]
●
Příklady
–
/*
–
group[@name="main"]/@edits
–
//text()
AJAX
●
Asynchronous Javascript and XML
●
Nový přístup k využití stávajících technologií
●
HTML, XHTML, CSS, JavaScript, DOM, XML,...
●
●
Umožňuje dělat requesty na server bez
obovení stránky
Asynchronní komunikace
AJAX
AJAX
●
ActiveX – XMLHTTP (lte IE8)
●
XMLHttpRequest
AJAX Example
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
try {
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
XmlHttpRequest
XMLHttpRequest(JSObject objParameters);
void abort();
DOMString getAllResponseHeaders();
DOMString? getResponseHeader(DOMString header);
void open(DOMString method, DOMString url, optional boolean async,
optional DOMString? user, optional DOMString? password);
void overrideMimeType(DOMString mime);
void send();
void setRequestHeader(DOMString header, DOMString value);
XmlHttpRequest
Onreadystatechange
readyState
response
responseText
responseType
responseXML
status
statusText
timeout
upload
withCredentials
Function
unsigned short
varies
DOMString
XMLHttpRequestResponseType
Document
unsigned short
DOMString
unsigned long
XMLHttpRequestUpload
boolean
AJAX Request
httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
if ( httpRequest.readyState === 4) {
if (httpRequest.status === 200) {
alert(httpRequest.responseText);
} else {
alert('Nastala chyba');
}
}
};
httpRequest.open('GET', 'http://www.example.org', true);
httpRequest.send(null);
Cross-Site Requesty
●
Requesty vedoucí na jinou doménu
●
Podléhají Same Origin Policy
●
–
Dokument z jedné domény nesmí číst a
přistupovat na properties dokumentu z jiné d.
–
Protokol, port a host musí být stejný
–
Týká se requestů spouštěných skripty
(XmlHttpRequest)
Bezpečnost
Same Origin Policy a domény třetího řádu
●
subdomain.example.org
●
document.domain = ”example.org”
●
●
Cross-Origin Resource Sharing
Doporučení W3C pro bezpečný ”Cross Site”
přenos dat
●
Umožňuje řízení přístupu na základě domén
●
Preflighted requests
–
Access-Control-Request-Method: POST
–
Access-Control-Request-Headers: X-PINGOTHER
–
Access-Control-Allow-Origin: http://foo.example
–
Access-Control-Allow-Methods: POST, GET, OPTIONS
–
Access-Control-Allow-Headers: X-PINGOTHER
–
Access-Control-Max-Age: 1728000
Cross-Origin Resource Sharing
GET /resources/resource/1/ HTTP/1.1
Host: bar.other
Referer: http://foo.example/examples/test.html
Origin: http://foo.example
....
HTTP/1.1 200 OK
...
Access-Control-Allow-Origin: *
...
[Data]
Cross Document Messaging
●
●
Umožňuje komunikaci mezi framy, iFramy,
okny otevřenými skriptem,...
Musíme mít refrenci na objekt window příjemce
otherWindow.postMessage(message, targetOrigin);
window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
if (event.origin !== "http://example.org:8080") {
return;
}
}
JsonP
●
Json with Padding
●
Způsob jak obejít Same Origin Policy
●
Vkládáním skriptu do stránky
<script type="text/javascript"
src="http://example.com/resource/1234?callback=myCallback">
</script>
JsonP
myCallback(data) {
// Něco udělej...
}
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://example.org/resource/12?callback=myCallback';
document.head.appendChild(script);
myCallback({
”message”: ”Helo world!”
})
POST?
●
Cross Document Messaging
●
window.name
Bezpečnost
●
XSRF
●
XSS
●
JS Highjacking
Semantický Web
●
●
Rozšíření současného webu
Informace formulované tak aby byly
srozumitelné pro lidi i pro stroje
●
Usnadňuje vyhledávání a zpracování informací
●
Umožňuje vytvořit ”Síť dat” podobně jak DB
●
Popisuje data a vztahy mezi nimi v strojově
čitelné formě
RDF
●
●
Resource Description Framework
Jazyk pro reprezentaci informací o objektech
na webu
●
Model popisu vztahů mezi objekty
●
Podmět – Přísudek – Objekt
●
●
Tvoří orientovaný graf kde objekt podmět a
objekt jsou uzly a přísudek pojmenované hrany
Identifikuje objekty pomocí URI
RDF Slovníky
●
Rdf popisuje vztahy mezi identifikátory
●
Význam identifikátorům dávají slovníly
●
RDF-VOVABULARY
RDF
RDF/XML
<?xml version="1.0"?>
<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:contact="http://www.w3.org/2000/10/swap/pim/contact#">
<contact:Person rdf:about="http://www.w3.org/People/EM/contact#me">
<contact:fullName>Eric Miller</contact:fullName>
<contact:mailbox rdf:resource="mailto:[email protected]"/>
<contact:personalTitle>Dr.</contact:personalTitle>
</contact:Person>
</rdf:RDF>
RDFa
●
RDF in Attributes
●
Způsob jak zapsat RDF informace do XHTML
●
Zapisují se jako atributy jednotlivých elementů
●
Použité slovníky se definují jako namespace
●
Rozšiřuje způsoby použití atributů (X)HTML
–
●
např. rel nebo href
zavádí nové atributy
–
např. content
RDFa
<div xmlns:foaf="http://xmlns.com/foaf/0.1/">
<ul>
<li typeof="foaf:Person">
<a property="foaf:name" rel="foaf:homepage"
href=“http://martinuvweb.cz/“>Martin</a>
</li>
</ul>
</div>
SPARQL
●
●
●
Protocol and RDF Query Language
Jazyk sloužící k dotazování (manipulaci) nad
RDF daty
Vychází z SQL
PREFIX foaf: <http://xmlns.com/foaf/0.1/>
SELECT ?name ?email
WHERE {
?person a foaf:Person.
?person foaf:name ?name.
?person foaf:mbox ?email.
}
OWL
●
Onthology Web Language
●
Jazyk pro reprezentaci znalostí
●
●
Tvoří ontologii – slovník pro uchovávání a
předávání znalostí o určité problematice
Mocnější než RDF Schema
–
Kardinalita, transitivita, příslušnost ke třídě, ...
Mikroformáty
●
●
Způsob uložení strojově čitelných informací do
stávajícího (X)HTML
Semantické identifikátory se vkládají do atributů
–
rel
–
classs
–
rev
hCard
<div class="vcard">
<p class="fn n">
<span class="given-name">Emily</span>
<span class="family-name">Lewis</span>
</p>
<a class="email" href="mailto:[email protected]">
[email protected]
</a>
<p class="adr">
<span class="locality">Albuquerque</span>
<abbr class="region" title="New Mexico">NM</abbr>
<span class="postal-code">87106</span>
<acronym class="country-name" title="United States of America">USA</acronym>
</p>
<p class="nonVisual">
<a href="http://www.ablognotlimited.com" rel="home me" class="url">A Blog Not Limite
</p>
</div>
NoSQL Databáze