WEB 2.0 A WEBOVÉ SLUŽBY. Ondřej Urbánek

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 <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); }

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> <stop offset="0%" stop-color="#60bafc" /> <stop offset="50%" stop-color="#409adc" /> <stop offset="100%" stop-color="#005a9c" /> <path id="curve" d="M18,60 C100,10 180,110 264,60" fill="none"/> Scalable Vector Graphics

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 John Smith <middleName /> 25

<street>21 2nd Street New York <state>NY <postalCode>10021

212 555-1234

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

●



●



●



DTD

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ů

<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: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
XSLT ●

● ●

Extensible Stylesheet Language Transformations Trasformace XML do jiného XML Processory jsou samostatný software (Saxon, Xalan)

XSLT <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:output method="xml" indent="yes"/> <xsl:template match="/persons"> <xsl:apply-templates select="person"/> <xsl:template match="person"> <xsl:value-of select="name" />

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">

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 Eric Miller Dr.

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

• Martin

SPARQL ● ●

●

Protocol and RDF Query Language Jazyk sloužící k dotazování (manipulaci) nad RDF daty Vychází z SQL PREFIX foaf: 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

<span class="given-name">Emily <span class="family-name">Lewis

[email protected]

<span class="locality">Albuquerque NM <span class="postal-code">87106 USA

A Blog Not Limite

NoSQL Databáze