WADe 2017-2018 (1/12) Web Application Development: Concepts & Vision

Dr.SabinBuragaprofs.info.uaic.ro/~busaco
Dezvoltarea aplicațiilor Web
☸
concepte primare și viziune

„A defini înseamnă a ucide,
a sugera înseamnă a crea.”
Stéphane Mallarmé

Prolog:
Ce este Web-ul?

world wide web
Web, WWW, „pânza de păianjen mondială”
serviciu Internet
WWW  Internet

world wide web
Spațiu informațional comun în care comunicăm
prin interconectarea și partajarea unor elemente
de interes denumite resurse
inventat de Sir Tim Berners-Lee în decembrie 1989
detalii istorice în Sabin Buraga, 25 de ani de Web (2014)
www.slideshare.net/busaco/25-de-ani-de-web

Sir Tim Berners-Lee – lauriat al premiului Turing
cea mai importantă distincție în domeniul informaticii

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
anything can link to anything

world wide web
Bazat pe modelul client/server
server
Web
client
Web
(browser)
cerere
răspuns

…și pe hipertext (hipermedia)

world wide web
Scopuri principale:
independența de dispozitiv
independența de software
scalabilitatea
ubicuitatea

world wide web
Bazat pe principii și standarde deschise
stipulate de Consorțiul Web
Web for all & on everything
Web for rich interaction
Web of data & services
Web of trust
www.w3.org

arhitectura Web-ului
Resursele sunt identificate prin adresa lor
identificator uniform de resurse
URI – Uniform Resource Identifier
https://slideshare.net/busaco/presentations

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

codificarea
datelor
Unicode
nume de
domenii
DNS
protocoalele
Internet
TCP/IP
adrese Web
URI = URL + URN
protocoale Web
HTTP, HTTPS

resursele – documentele – includ <marcaje />
pagini Web

Anca
Bogdan
knows
owns
hasName
album
photo
twitter.com/pinkfloyd
tag
follows
owns
sameComposer
marcajele conțin la rândul lor
URI-urihipertext (hipermedia)

Relațiile dintre o resursă Web, adresa ei (URI) și
reprezentarea structurată a resursei
informații
meteo
despre Iași
<section id="meteo">
<div class="weather">
<p lang="ro">Iași</p>
<span>city</span>
<p lang="en">Temp.
<span id="today">
is <strong>…</strong>
°C</span>
</p>
</div>
</section>
reprezentare
adresabilitate via URI
resursă Web
identifică
reprezintă
formatul HTML5
(utilizatori umani, uzual)
http://world.info/europe/romania/iasi/weather?today

informații
meteo
despre Iași
<weather>
<point lat="..." long="…">
<name lang="ro">
Iași
</name>
<type>city</type>
…
</point>
<temperature when="…">
<value>…</value>
</temperature>
</weather>
reprezentare
resursă Web
identifică
reprezintă
formatul XML
(procesat de software)

informații
meteo
despre Iași
{
"point" : {
"geo" : { "lat" : "…",
"long" : "…" },
"name" : "Iași",
"type" : "city"
},
"temperature" : {
"when" : "…",
"value" : "…"
}
}
reprezentare
resursă Web
identifică
reprezintă
formatul JSON
(procesat de software)

informații
meteo
despre Iași
resursă Web
identifică
reprezintă
{
"point" : {
"geo" : {
"lat" :…, "long" :…
}
}
reprezentarea – într-un format deschis (e.g., HTML, XML,
JSON, RDF,…) – include date propriu-zise + meta-date
<section id="meteo">
<div class="weather">
<p lang="ro">Iași</p>
<span>(city)</span>
<p lang="en">Temp.
<span class="today">
is <strong>…</strong>
°C</span>
</p>
</div>
</section>
reprezentare
{
…
"temperature" : {
"when" : "…",
"value" : "…"
}
…
}
reprezentare

Primul act:
Web 1.0

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ă
de studiat S. Buraga, „Dezvoltator Web?!” (2017)
www.slideshare.net/busaco/dezvoltator-web-n-2017

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
exemplificări:
Amazon, DevDocs, eMAG, Flickr, fiddles.io, GitHub, InfoQ,
info.uaic.ro, Last.fm, Koding, Medium, OverLeaf, Reddit,
Quora, SlideShare, Vimeo, UXPin, webmin, WordPress
…și multe, multe, multe altele

client Web server Web
conținut
static
conținut
dinamic
conținut
static
conținut
dinamic
date
locale
JavaScript server de aplic., framework
HTTP
transfer
asincron
via o interfață Web, utilizatorul interacționează cu clientul
(front-end) și inițiază acțiuni – e.g., cereri HTTP (a)sincrone
– ce vor fi executate pe diverse componente implementate
la nivel de server (back-end), pentru a obține date
☁date externe
(serviciu Web)
front-end back-end

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
standarde deschise: HTML, CSS, Ajax, SVG, WebGL,…

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

relaționale (SQL), grafuri (NoSQL), JSON, XML, RDF

fapt: sunt importante toate!

Internet
(Web)
⚙
⚙
Client
interfață cu
utilizatorul
Server
sit/aplicație Web
Date
stocate
persistent

Actul al doilea:
Web-ul social

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ă și între aplicații

Partajare de artefacte informaționale
documente, fotografii, multimedia, cod-sursă etc.

Inteligența colectivă
editare și 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)
versus
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
suplimentar, podcast-uri
XML

Transformare/refolosire a datelor
datele sunt – sau ar trebui să fie – disponibile
în formate deschise, universale, facil de procesat

Transformare/refolosire a datelor
datele sunt – sau ar trebui să fie – disponibile
în formate deschise, universale, facil de procesat
vezi succesul JSON (JavaScript Object Notation)
json.org

Încredere radicală
autentificare și/sau autorizare descentralizată
OpenID
OAuth

Interacțiune bogată cu utilizatorul
RIA – Rich Internet Applications
aplicarea modalităților de interacțiune tradițională
(la nivel de desktop) în contextul aplicațiilor Web
(re)vezi materia Human-Computer Interaction
profs.info.uaic.ro/~busaco/teach/courses/hci/

Valori de bază
deschidere, transparență, respect

Valori de bază
deschidere, transparență, respect
inițiativa Creative Commons
reasonable, flexible copyright
creativecommons.org/about/licenses/

detalii despre licențele de utilizare
a software-ului/datelor la tldrlegal.com

Valori de bază
partajarea pe Web a datelor deschise (open data)
detalii în prezentarea S. Buraga, Why 5-Star Data? (2016)
www.slideshare.net/busaco/why-5star-data

Acces la seturi de date deschise
exemplificări:
Academic Torrents – academictorrents.com
Awesome Public Datasets – tinyurl.com/aweseomedata
Common Crawl – commoncrawl.org
Data Hub – thedatahub.org
JSON Datasets – github.com/jdorfman/awesome-json-datasets
MIT Saliency Benchmark – saliency.mit.edu/datasets.html
Open Data Commons – opendatacommons.org
Wikimedia Commons – commons.wikimedia.org
YouTube-8M Dataset – research.google.com/youtube8m/

🛍
comerț
electronic
🗺
turism
🎛
monitorizare
🔮 📈
prognoze
(finanțe,
transport,…)
📰 👥 💬
știri
comunic.
interpersonală
🎬 🎪
amuzament
software
platformă
⚡ ⚡ ⚡
putere
de calcul
🗄🗄
stocare
📡
rețea
👾
identitate

baze
de date
🛠⚙
execuție
software
⬅️✉️⬅️
procesare
cozi de mesaje
🔐
securitate
infrastructură
Web – ingredient cheie al tehnologiilor în „nori”
cloud computing
📺 🏡💻
🖨
📱🎮
🚕🚁🌃

Intermezzo

remarci
Constituirea unor „pânze” (web-uri)
– grupări, rețele, grafuri –
de date/informații/cunoștințe disponibile liber,
evoluând conform intereselor unei comunităţi
(e.g., utilizatori, organizație, industrie,…)

Cum pot fi descrise la nivelul mașinii
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, produse, 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
(i.e. grafuri de cunoștințe – knowledge graphs)

necesități
modelarea și procesarea cunoștințelor
despre „lucruri”
(knowledge about things)
Mike Bergman, The Rationale for Semantic Technologies (2012)
www.mkbergman.com/1015/the-rationale-for-semantic-technologies/

necesități
modelarea & procesarea cunoștințelor
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, bicicleta, insula ori sortimentul de cafea?
java

necesități
„Java este un limbaj de programare.”
„Apache Jena este un framework 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

Titlu: Live in Pompeii
Artist: David Gilmour
Anul apariției: 2017
Formate: [ CD, Blu-ray, Vinil, download ]
Audio: [ LPCM 2.0, LPCM 5.1,
DTS-HD Master Audio 5.1 ]
Tip: album (LP)
Înregistrare: în direct (live)
Subtitrare: N/A
Detalii: www.davidgilmour.com
engleză
www.blu-ray.com/movies/David-Gilmour-Live-at-Pompeii-Blu-ray/184227/

Titlu: Live in Pompeii
Artist: David Gilmour
Anul apariției: 2017
Formate: [ CD, Blu-ray, Vinil, download ]
Audio: [ LPCM 2.0, LPCM 5.1,
DTS-HD Master Audio 5.1 ]
Tip: album (LP)
Înregistrare: în direct (live)
Subtitrare: N/A
Detalii: www.davidgilmour.com
www.blu-ray.com/movies/David-Gilmour-Live-at-Pompeii-Blu-ray/184227/
subiect
obiect
predicat

Anca
Bogdan
relația
owns
album
concert
twitter.com/pinkfloyd
tag
follows
owns
relația
sameComposer
constituirea unui web privitor la
resurse multimedia & persoane
clasa persoanelor
relația
knows
proprie-
tatea
givenName
clasa
albumelor
muzicale

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:
DBpedia – dbpedia.org/isparql/
EU Open Data Portal – data.europa.eu/euodp/en/linked-data
Global Change – data.globalchange.gov/sparql

rdf: utilizări
vocabulare de meta-date privind resursele
set standardizat de meta-date asociate documentelor
DCMI (Dublin Core Metadata Initiative)
descrierea cataloagelor de date
DCAT (Data Catalog Vocabulary)
interconectarea vocabularelor
LOV (Linked Open Vocabularies)
descrierea fluxurilor de date interconectate
VoIS (Vocabulary of Interlinked Datastreams)

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)

foaf:Person a owl:Class .
db:MusicalArtist rdfs:subClassOf foaf:Person .
plays a owl:ObjectProperty ;
rdfs:domain db:MusicalArtist ;
rdfs:range mo:Song .
RogerWaters plays PictureThat , ThreeWishes .
DavidGilmour plays Beauty , HighHopes , Today .
modelare conceptuală – via diverse specificații –
despre resursele muzicale:
clasa muzicienilor provine din cea a persoanelor
relația plays între clasa muzicienilor și clasa cântecelor
+
fapte privitoare la acestea
e.g., Roger Waters interpretează piesa „Picture That”

foaf:Person a owl:Class .
db:MusicalArtist rdfs:subClassOf foaf:Person .
plays a owl:ObjectProperty ;
rdfs:domain db:MusicalArtist ;
rdfs:range mo:Song .
RogerWaters plays PictureThat , ThreeWishes .
DavidGilmour plays Beauty , HighHopes , Today .
se oferă premisele efectuării de raționamente automate
(deducții logice exprimate formal), pe baza unui reasoner
trebuie să aparțină
clasei muzicienilor
clasei cântecelor
clasei persoanelor
a se studia și prezentarea S. Buraga, „Semantic Social Web” (2009)
www.slideshare.net/busaco/semantic-social-web

AAA – Anyone can say Anything about Any topic

Cum se asigură 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
linkeddata.org

linked data
Inițiativă privind publicarea și reutilizarea
datelor structurate disponibile liber pe Web
inclusiv folosind formatul de date JSON – JSON-LD
json-ld.org

lod-cloud.net
martie 2009

sept. 2011

august 2014
Linking Open Data cloud diagram 2014
(M. Schmachtenberg, C. Bizer, A. Jentzsch, R. Cyganiak)

Linking Open Data cloud diagram 2017
(A. Abele, J. P. McCrae, P. Buitelaar, A. Jentzsch, R. Cyganiak)
august 2017

Câteva exemplificări concrete?

augmentarea căutării (via microdate HTML5 și RDFa)
Google Structured Data – developers.google.com/structured-data/
vezi și Google Knowledge Vault
www.cs.ubc.ca/~murphyk/Papers/kv-kdd14.pdf

adnotări explicite ale codului HTML5 bazate pe concepte
specificate de schema.org – aici, WebPage și Person
testare cu Structured Data Testing Tool
developers.google.com/structured-data/testing-tool/

interogări asupra DBpedia
(varianta procesabilă de către mașină a enciclopediei Wikipedia)
PersonWithOccupation
ComputerPioneers
FinnishComputerProgrammers
FreeSoftwareProgrammers
LinuxKernelHackers
LivingPeople
PeopleInInformationTechnology
Golfer
diverse URL-uri
desemnând concepte
(things, not strings)
Cine este Linus Torvalds?

Wikidata
vizualizarea datelor
interogate cu SPARQL
query.wikidata.org

exemplu: midi2rdf (MIDI ↔ RDF)
A. Meroño-Peñuela, R. Hoekstra, “The Song Remains the Same:
Lossless Conversion and Streaming of MIDI to RDF and Back”,
ESWC 2016 – www.albertmeronyo.org/publications/
de la model conceptual la fluxuri de activități
acces la date RDF procesabile de către software

modelarea
cunoștințelor
cu aplicabilitate
în mass-media
exemplu: BBC
www.bbc.co.uk/ontologies

utilizarea tehnologiilor Web-ului semantic pentru
monitorizarea poluării – e.g., proiectul OpenSense2
J.-P. Calbimonte et al., „Toward Self-monitoring Smart Cities:
the OpenSense2 Approach”, 2017 – jeanpi.org/wp/publications/

tehnologiile Web semantic
în contextul Internet of Things
P. Patel et al., SWoTSuite: A Toolkit for Prototyping
End-to-End Semantic Web of Things Applications,
WWW 2017 Companion

realizări autohtone recente: FII, UAIC
Andrei Panu, Automation Technology for Software Maintenance
and System Administration, PhD Thesis, 2017
profs.info.uaic.ro/~andrei.panu/phd_thesis/
Ștefan Negru, Knowledge Engineering in the Context of Human-
Computer Interaction, PhD Thesis, 2013 – blankdots.com/open/
Elena Creangă, A Conceptual Model of User Based Motion Tracking,
MSc Thesis, 2017
Daniel Amariei, Database Management Systems Ontology,
MSc Thesis, 2017 – github.com/danielamariei/databases-ontology/

„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 în vederea regăsirii de resurse Web via motoare
de căutare – e.g., microdate HTML5: schema.org

„concluzii”
structurarea avansată via modele conceptuale:
taxonomii, lexicoane, ontologii – folosind OWL et al.

„concluzii”
structurarea avansată via modele conceptuale:
taxonomii, lexicoane, ontologii – folosind OWL et al.

managementul cunoștințelor (knowledge management)
+
inginerie ontologică (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 orientat spre cunoștințe

episodul viitor: servicii Web prin REST

WADe 2017-2018 (1/12) Web Application Development: Concepts & Vision

More Related Content

What's hot (20)

Similar to WADe 2017-2018 (1/12) Web Application Development: Concepts & Vision (20)

More from Sabin Buraga (17)

WADe 2017-2018 (1/12) Web Application Development: Concepts & Vision