Dezvoltarea de Aplicaţii Web PDF

Dr. Sabin Buragawww.purl.
org/net/busaco
Dezvoltarea aplicatiilor Web
concepte primare & viziune

Dr. Sabin Buragawww.purl.org/net/busaco
“A defini inseamna a ucide,
a sugera inseamna a crea.”
Stéphane Mallarmé
Prolog:
Ce este Web-ul?

world wide web

Web, WWW, “panza de paianjen mondiala”
Serviciu Internet
WWW  Internet
world wide web

Idee (Sir Tim Berners-Lee la CERN – 1989)
integrarea unor sisteme informaționale

disparate într-un mod unitar,
fără diferențe între sursele de date
world wide web


world wide web


world wide web


anything can link to anything

world wide web

“a common information space in which
we communicate by sharing information”
Sir Tim Berners-Lee (2013)
“Information Management: A Proposal”

www.w3.org/History/1989/proposal.html
world wide web

Bazat pe modelul client/server
cerere
client
Web server
(browser) Web
raspuns
…si pe hipertext (hipermedia)

world wide web

Scopuri principale:
independenta de dispozitiv
independenta de software
scalabilitatea
ubicuitatea
world wide web

Scopuri principale:
independenta de dispozitiv
independenta de software
scalabilitatea
ubicuitatea
caracter deschisopen standards

world wide web

Functioneaza conform reglementarilor
Consortiului Web
MIT, ERCIM, Keio University

Adobe, HP, IBM, Oracle, Microsoft,…
www.w3.org
arhitectura Web-ului

Resursele sunt identificate prin adresa lor
identificator uniform de resurse

URI – Uniform Resource Identifier
http://slideshare.net/busaco/presentations

Accesul la conţinutul – reprezentarea –
resurselor Web
se realizează printr-un protocol
HTTP – HyperText Transfer Protocol


adrese Web protocoale Web
URI = URL + URN HTTP, HTTPS, SPDY
codificarea nume de protocoalele

datelor domenii Internet
Unicode DNS TCP/IP
pagini Web
resursele – documentele – includ <marcaje />

marcajele conțin la rândul lor URI-urihipertext
Relatiile dintre o resursa Web, adresa ei (URI) si
reprezentarea structurata a resursei
adresabilitate via URI

http://world.info/europe/romania/iasi/#weather?today
reprezentare
<weather>
identifica <point lat=… long=…>
<name lang= "ro">
informatii Iasi
reprezinta </name>
meteo <type>city</type>
despre Iasi …
</point>
resursa Web <temperature when=…>
<value>…</value>
</temperature>
</weather>
Relatiile dintre o resursa Web, adresa ei (URI) si
reprezentarea structurata a resursei
adresabilitate via URI

http://world.info/europe/romania/iasi/#weather?today
reprezentare
<weather>
identifica <point lat=… long=…>
<name lang= "ro">
informatii Iasi
reprezinta </name>
meteo <type>city</type>
despre Iasi …
</point>
resursa Web <temperature when=…>
<value>…</value>
</temperature>
</weather>
reprezentarea – intr-un format deschis (e.g., HTML, XML,
JSON, RDF,…) – include date propriu-zise + meta-date
Web 1.0
Primul act:

Sit Web
sistem pe care rulează un server Web

găzduind o serie de pagini (resurse) înrudite
ale unei organizaţii, companii sau persoane

Aplicaţie Web
colecţie interconectată de pagini Web

cu conţinut generat dinamic, menită a oferi
utilizatorilor o funcţionalitate specifică
Aplicaţie Web
interacţiunea dintre aplicaţie şi utilizatori

are loc via o interfaţă Web
Aplicaţie Web
interacţiunea dintre aplicaţie şi utilizatori

are loc via o interfaţă Web
uzual, sit Web = aplicaţie Web

Aplicaţie Web
exemple:
Amazon, Coursera, Dropbox, Expedia, Flickr,
info.uaic.ro, PHPMyAdmin, Reddit, Quora,
SlideShare, Twitter, Vimeo, webmin, WordPress
…și multe, multe altele

Caracterizare

Arhitectura unei aplicaţii Web
Aplicaţie Web = Interfaţă + Conţinut (Date) + Program
mitul 1: cea mai importantă este interfaţa

mitul 2: cel mai important este programul
mitul 3: cele mai importante sunt datele
HTML, CSS, Ajax, Flash, Silverlight, SVG, WebGL,…


server: C#, Java, JavaScript, PHP, Ruby,…; client: JavaScript


relationale (SQL), XML, grafuri, modelare semantica (RDF)


fapt: sunt importante toate!

Web-ul social
Actul al doilea:

Web-ul prezent

WWW  platforma în care utilizatorul
îşi controlează propriile date
aşa-numitul Web 2.0, conform Tim O’Reilly, 2005

Web-ul social: Caracteristici

Participare
read/write Web
colaborare, comunităţi,
conectivitate inter-personală & între aplicaţii

Partajare de artefacte informationale
documente, fotografii, multimedia, cod-sursă etc.


Inteligenţa colectivă
editare & management colaborativ al conţinutului
aplicaţii de tip wiki


Servicii şi nu pachete software
aplicaţiile masive („mamut”) sunt substituite
de cele constituite din servicii specifice,
disponibile pe Web, uşor de înlocuit
SaaS – Software as a Service


Software rulat oriunde
ubicuitatea aplicaţiilor Web
bookmark-uri salvate local (pentru fiecare browser)

vs. bookmark-uri disponibile pe Web, uşor de accesat
şi de partajat cu alţii

Mediatizare (syndication) Web
date privitoare la un sit Web sunt expuse liber
via un flux (feed)
în format RSS (Really Simple Syndication)
sau Atom
XML

Podcasting = pod (iPod) + broadcast
flux audio/video automat expediat utilizatorului

pentru a fi redat de un player multimedia – e.g., iTunes
accesibil oricând via un podcast feed

Transformare/refolosire a datelor
datele sunt – sau ar trebui sa fie – disponibile

în formate deschise, universale, facil de procesat

Transformare/refolosire a datelor
datele sunt – sau ar trebui sa fie – disponibile

în formate deschise, universale, facil de procesat
vezi succesul JSON (JavaScript Object Notation)


Încredere radicală
autentificare si/sau autorizare descentralizată
OpenID
OAuth

Interactiune bogata cu utilizatorul
RIA – Rich Internet Applications
aplicarea modalitatilor de interactiune traditionala

(la nivel de desktop) in contextul aplicatiilor Web

avantajele Web-ului (ubicuitate, date distribuite

via hipertext, posibilitati de cautare etc.) +
interactiune sofisticata + utilizabilitate

avantajele Web-ului (ubicuitate, date distribuite

via hipertext, posibilitati de cautare etc.) +
interactiune sofisticata + utilizabilitate
suita de tehnologii HTML5

(inclusiv la nivelul dispozitivelor mobile)

Valori de bază
deschidere, transparenţă, respect


Valori de bază
deschidere, transparenţă, respect
iniţiativa Creative Commons

reasonable, flexible copyright

http://creativecommons.org/about/licenses/

Valori de bază
partajarea pe Web a datelor deschise (open data)


Valori de bază
partajarea pe Web a datelor deschise (open data)
exemplificari:
Data Hub – thedatahub.org
Open Data Commons – opendatacommons.org
Wikimedia Commons – commons.wikimedia.org
Intermezzo

remarci

Constituirea unor “pânze” (web-uri) – grupări,
rețele – de informații disponibile liber, evoluând
conform intereselor unei comunităţi
(e.g., utilizatori, organizație, industrie,…)
Cum pot fi descrise la nivelul masinii
aceste web-uri?
Actul al treilea:
Web-ul datelor

necesităţi

o manieră de a atașa meta-date
date privitoare la date

„mai mult decât datele”
necesităţi

o manieră de a ataşa meta-date
vocabulare de termeni descriind „ceva”

(proprietăți, domenii, persoane, lumi,...)
necesităţi

un mod de specificare de relații între resurse
structuri de organizare a datelor

în cadrul unui sau mai multor web-uri
necesităţi

modelarea & procesarea cunoștințelor
despre „lucruri” (knowledge about things)
Mike Bergman, The Rationale for Semantic Technologies (2012)

http://www.mkbergman.com/1015/the-rationale-for-semantic-technologies/
necesităţi

realizate sistematic, formalizat
ontologii
descrise riguros
necesităţi

create ad-hoc, manual, de către utilizatorii obişnuiţi
folksonomii
necesităţi

create ad-hoc, manual, de către utilizatorii obişnuiţi
folksonomii
uzual, tagging
necesităţi

Modelarea datelor trebuie să facă implicitul explicit
„java”  limbajul, insula ori sortimentul de cafea?

necesităţi

„Java este un limbaj de programare.”
„XWiki este o aplicație Web scrisă în limbajul Java.”
„Programarea Java poate fi mai ușoară decât cea în C++.”
necesităţi

ușor de înțeles de
(unii) oameni
necesităţi

ușor de înțeles de
(unii) oameni
… dar pot fi oare înțelese de către calculatoare?

rdf

RDF (Resource Description Framework)
folosit la asocierea de meta-date resurselor Web

și la specificarea relațiilor dintre resurse
engleză

Titlu: Remember That Night
Artist: David Gilmour
Anul apariției: 2007
Format: Blu-ray
Audio: Dolby True-HD
Video: VC-1 (1080i)
Tip: concert
Subtitrare: N/A
Detalii: www.davidgilmour.com
http://www.blu-ray.com/movies/David-Gilmour-Remember-That-Night-Blu-ray/493/
clasa persoanelor

deține
Alina
relația www.flickr.com/bogdan areTag

knows
proprie-
tatea concert
areNume
photo
Bogdan
rdf

Interogarea datelor RDF
se poate realiza via limbajul SPARQL
rdf

Interogarea datelor RDF
se poate realiza via limbajul SPARQL
serviciile SPARQL pot fi descrise și invocate

via tehnologiile serviciilor Web clasice – e.g., REST
exemple:
http://dbpedia.org/sparql/
http://graph.facebook.com/
rdf: utilizări

vocabulare de meta-date privind resursele
set standardizat de meta-date asociate documentelor

DCMI (Dublin Core Metadata Initiative)
documente multimedia partajabile

Adobe XMP (Extensible Metadata Platform)
rdf: utilizări
http://purl.org/vocab/

rdf: utilizări

relații între resurse
rețele sociale
FOAF (Friend Of A Friend)
proiecte software
DOAP (Description Of A Project)
comunități online
SIOC (Semantically Interconnected Online Communities)
rdf: utilizări

modelarea cunoștințelor
în termeni „înțeleși” de software
RDF Schema
SKOS (Simple Knowledge Organizational System)
OWL (Web Ontology Language)

AAA – Anyone can say Anything about Any topic
Cum se asigura interoperabilitatea,
consistența și refolosirea web-urilor?
linked data

Inițiativă privind publicarea și reutilizarea
datelor structurate disponibile liber pe Web
interconectare a resurselor descrise la nivel de Web
http://linkeddata.org/
linked data

Inițiativă privind publicarea și reutilizarea
datelor structurate disponibile liber pe Web
inclusiv folosind formatul de date JSON – JSON-LD
http://json-ld.org/
http://lod-cloud.net/

Câteva exemplificări concrete?

augmentarea cautarii resurselor Web pe baza
microformatelor, schemelor de microdate HTML5 si RDFa
studiu de caz: Google Knowledge Graph

http://www.google.com/insidesearch/features/search/knowledge.html
definirea unui graf social privind persoanele & relatiile acestora cu
diverse resurse de interes (fotografii, produse, locatii geografice,…)
Facebook Open Graph – developers.facebook.com/docs/opengraph/
curl -H 'Accept: text/turtle' http://graph.facebook.com/fii.uaic
@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
@prefix api: <tag:graph.facebook.com,2011:/> . in prezent,
@prefix og: <http://ogp.me/ns#> . cu autorizare

via OAuth
@prefix fb: <http://ogp.me/ns/fb#> .
@prefix : <http://graph.facebook.com/schema/~/> .
@prefix page: <http://graph.facebook.com/schema/page#> .
</215764508465252#>
page:id "215764508465252" ;
page:name "Facultatea de Informatica, UAIC, Iasi (FII)" ;
page:link <http://www.facebook.com/fii.uaic> ;
page:likes 284 ;
page:category "University" ;
page:website <http://www.infoiasi.ro/> ; meta-date
page:username "fii.uaic" ; asociate
page:location [
:street "General Berthelot, 16" ;
unei pagini
:city "Iasi" ; Facebook
:country "Romania" ;
:zip 700483 ] ;
page:general_info "…" ;
Cine este Linus Torvalds?

PREFIX rdf:
<http://www.w3.org/1999/02/22-rdf-syntax-ns#>
SELECT DISTINCT *
WHERE {
<http://dbpedia.org/resource/Linus_Torvalds>
rdf:type ?val
}
LIMIT 20
interogari asupra DBpedia

(varianta procesabila de catre masina a enciclopediei Wikipedia)
http://dbpedia.org/isparql/
Cine este Linus Torvalds?

diverse URI-uri
desemnand concepte
(definite in cadrul
unor web-uri)
interogari asupra DBpedia

(varianta procesabila de catre masina a enciclopediei Wikipedia)
http://dbpedia.org/isparql/
modelarea
cunostintelor

cu aplicabilitate
in mass-media
exemplu: BBC
www.w3.org/2001/sw/sweo/public/
UseCases/BBC/
“Epilog”:
următorii (zeci de) ani…

“concluzii”

constituirea unui Web of Data
„Web 3.0”? „semantic

Web”?
“concluzii”

acces pe baza protocolului HTTP

“concluzii”

descriere de resurse și a relațiilor dintre ele via RDF

“concluzii”

datele pot fi „mixate” pe baza vocabularelor multiple

“concluzii”

datele pot fi „mixate” pe baza vocabularelor multiple
numeroase vocabulare sunt deja standardizate
inclusiv in vederea regasirii de resurse Web via motoare

de cautare – e.g., microdate HTML5: schema.org
“concluzii”

structurarea avansată via modele conceptuale:

taxonomii, tezaure, ontologii – folosind OWL et al.
“concluzii”

structurarea avansată via modele conceptuale:

taxonomii, tezaure, ontologii – folosind OWL et al.

managementul cunostintelor (knowledge management)
+
inginerie ontologica (ontology engineering)
Punct de vedere

Web attitude (Tim Berners-Lee)
Anyone can say anything about anything

Punct de vedere

No one knows everything about anything

Punct de vedere

My system is most valuable

because of its interconnection to its peers
rezumat

De la Web-ul clasic, la cel social
și la viitorul datelor procesabile de către computer
episodul viitor: servicii Web & API-uri deschise

Limbă

Dezvoltarea de Aplicaţii Web PDF

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Dezvoltarea de Aplicaţii Web PDF

Titlu original:

Încărcat de

Drepturi de autor:

Formate disponibile

Titluri conexe

Dr. Sabin Buragawww.purl.

concepte primare & viziune

Dr. Sabin Buragawww.purl.org/net/busaco

Dr. Sabin Buragawww.purl.org/net/busaco

Dr. Sabin Buragawww.purl.org/net/busaco

integrarea unor sisteme informaționale

Dr. Sabin Buragawww.purl.org/net/busaco

integrarea unor sisteme informaționale

Dr. Sabin Buragawww.purl.org/net/busaco

integrarea unor sisteme informaționale

Dr. Sabin Buragawww.purl.org/net/busaco

integrarea unor sisteme informaționale

anything can link to anything

Dr. Sabin Buragawww.purl.org/net/busaco

Sir Tim Berners-Lee (2013)

“Information Management: A Proposal”

Dr. Sabin Buragawww.purl.org/net/busaco

Dr. Sabin Buragawww.purl.org/net/busaco

Dr. Sabin Buragawww.purl.org/net/busaco

Dr. Sabin Buragawww.purl.org/net/busaco

caracter deschisopen standards

Dr. Sabin Buragawww.purl.org/net/busaco

MIT, ERCIM, Keio University

Dr. Sabin Buragawww.purl.org/net/busaco

identificator uniform de resurse

Dr. Sabin Buragawww.purl.org/net/busaco

HTTP – HyperText Transfer Protocol

Dr. Sabin Buragawww.purl.org/net/busaco

codificarea nume de protocoalele

resursele – documentele – includ <marcaje />

Dr. Sabin Buragawww.purl.org/net/busaco

Dr. Sabin Buragawww.purl.org/net/busaco

Dr. Sabin Buragawww.purl.org/net/busaco

sistem pe care rulează un server Web

ale unei organizaţii, companii sau persoane

colecţie interconectată de pagini Web

interacţiunea dintre aplicaţie şi utilizatori

interacţiunea dintre aplicaţie şi utilizatori

uzual, sit Web = aplicaţie Web

…și multe, multe altele

Dr. Sabin Buragawww.purl.org/net/busaco

mitul 1: cea mai importantă este interfaţa

HTML, CSS, Ajax, Flash, Silverlight, SVG, WebGL,…

mitul 1: cea mai importantă este interfaţa

server: C#, Java, JavaScript, PHP, Ruby,…; client: JavaScript

mitul 1: cea mai importantă este interfaţa

relationale (SQL), XML, grafuri, modelare semantica (RDF)

mitul 1: cea mai importantă este interfaţa

fapt: sunt importante toate!

Dr. Sabin Buragawww.purl.org/net/busaco

Dr. Sabin Buragawww.purl.org/net/busaco

aşa-numitul Web 2.0, conform Tim O’Reilly, 2005

Dr. Sabin Buragawww.purl.org/net/busaco

Dr. Sabin Buragawww.purl.org/net/busaco

documente, fotografii, multimedia, cod-sursă etc.

Dr. Sabin Buragawww.purl.org/net/busaco

editare & management colaborativ al conţinutului

aplicaţii de tip wiki

Dr. Sabin Buragawww.purl.org/net/busaco

SaaS – Software as a Service