WEB 2.0 A WEBOVÉ SLUŽBY Ondřej Urbánek ondrej.urbanek@orchitech.cz
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:em@w3.org"/> <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:emily@ablognotlimited.com"> emily@ablognotlimited.com </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