+ All Categories
Home > Documents > Web 01 ArHitecTura Web

Web 01 ArHitecTura Web

Date post: 21-Nov-2015
Category:
Upload: marius-varaciuc
View: 50 times
Download: 4 times
Share this document with a friend
Description:
Web course
100
Dr. Sabin Buragawww.purl.org/net/busaco Tehnologii Web concepte primare și viziune
Transcript
  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    Tehnologii Web

    concepte primare i viziune

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    De la un anumit punct ncolo,nu mai exist cale de ntoarcere.

    Acela este punctul ce trebuie atins.

    Franz Kafka

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    Ce este Web-ul?

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    world wide web

    Web

    WWW

    pnz de pianjen mondial

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    world wide web

    Serviciu Internet

    WWW Internet

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    world wide web

    Idee (Sir Tim Berners-Lee la CERN 1989)

    integrarea unor sisteme informaionaledisparate ntr-un mod unitar,

    fr diferene ntre sursele de date

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    world wide web

    Idee (Sir Tim Berners-Lee la CERN 1989)

    integrarea unor sisteme informaionaledisparate ntr-un mod unitar,

    fr diferene ntre sursele de date

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    world wide web

    Idee (Sir Tim Berners-Lee la CERN 1989)

    integrarea unor sisteme informaionaledisparate ntr-un mod unitar,

    fr diferene ntre sursele de date

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    world wide web

    Idee (Sir Tim Berners-Lee la CERN 1989)

    integrarea unor sisteme informaionaledisparate ntr-un mod unitar,

    fr diferene ntre sursele de date

    anything can link to anything

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    world wide web

    a common information space in whichwe communicate by sharing information

    Sir Tim Berners-Lee (2013)

    vezi prezentarea 25 de ani de Webhttp://www.slideshare.net/busaco/25-de-ani-de-web

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    world wide web

    Bazat pe modelul client/server

    serverWeb

    client Web

    (browser)

    cerere

    rspuns

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    i pe hipertext

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    world wide web

    Scopuri principale:

    independena de dispozitivindependena de software

    scalabilitateaubicuitatea

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    world wide web

    Scopuri principale:

    independena de dispozitivindependena de software

    scalabilitateaubicuitatea

    caracter deschisopen standards

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    world wide web

    Funcioneaz conform reglementrilorConsoriului Web

    MIT, ERCIM, Keio University etc.Apple, BBC, HP, IBM, Intel, OpenCar, Microsoft, Twitter,

    www.w3.org

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    arhitectura Web-ului

    Resursele sunt identificate prin adresa lor

    identificator uniform de resurseURI Uniform Resource Identifier

    http://slideshare.net/busaco/presentations

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    arhitectura Web-ului

    Accesul la coninutul reprezentarea resurselor Web

    se realizeaz printr-un protocol

    HTTP HyperText Transfer Protocol

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    arhitectura Web-ului

    codificarea datelor

    Unicode

    nume de domenii

    DNS

    protocoaleleInternetTCP/IP

    adrese WebURI = URL + URN

    protocoale WebHTTP, HTTPS, SPDY

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    resursele documentele includ

    pagini Web

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    marcajele conin la rndul lor URI-urihipertext

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    Relaiile dintre o resurs Web, adresa ei (URI) ireprezentarea structurat a resursei

    informaii meteo

    despre Iai

    http://world.info/europe/romania/iasi/weather?today

    Iasi

    city

    reprezentare

    adresabilitate via URI

    resurs Web

    identific

    reprezint

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    Relaiile dintre o resurs Web, adresa ei (URI) ireprezentarea structurat a resursei

    informaii meteo

    despre Iai

    http://world.info/europe/romania/iasi/weather?today

    Iasi

    city

    reprezentare

    adresabilitate via URI

    resurs Web

    identific

    reprezint

    reprezentarea ntr-un format deschis (e.g., HTML, XML, JSON, RDF,) include date propriu-zise + meta-date

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    Ce nseamn hipertextul?

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    hipertext: definire

    Material scris sau grafic interconectatntr-o manier complex care n mod convenional

    nu poate fi reprezentat pe hrtie.

    Ted Nelson, 1965

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    hipertext: definire

    Text non-liniar

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    hipertext: definire

    Text non-liniar

    versus

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    hipertext: definire

    Form de document electronic

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    hipertext: definire

    Form de document electronic

    formate de reprezentare a coninutuluiDocBook

    HTML (HyperText Markup Language)ODF (Open Document Format)

    PDF (Portable Document Format)

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    hipertext: istoric

    Vannevar Bush As We May Think, 1945

    MEMEX (MEMory EXtended)

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    Consider a future device for individual use, which is a sort of mechanized private file and library. [] It affords an immediate step, however, to associative indexing, the basic idea of which is a provision

    whereby any item may be caused at will to select immediately and automatically another. []

    The process of tying two items together is the important thing.

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    hipertext: istoric

    Douglas Engelbart

    Augment (1968)

    mouse, interfee grafice, procesoare de text,

    pot electronic, script-uri, ferestre pe ecran etc.

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    hipertext: istoric

    Ted NelsonXanadu prototip, 1991

    termenul hipertext

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    hipertext: istoric

    Hipermedia = hipertext + multimedia

    Multimedia = medii

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    hipertext: istoric

    Hipermedia = hipertext + multimedia

    Multimedia = medii

    medii de comunicare:continue (audio, video) i/sau discrete (text)

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    hipertext: ingrediente

    Hipertextul ca (di)graf

    noduri = concepte

    legturi = relaii

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    hipertext: ingrediente

    Noduri interconectate prin legturi

    nod surs = referin (ancor)

    nod destinaie = referent (ancor)

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    hipertext: legturi

    refereniale (non-ierarhice)organizaionale (ierarhice, structurale)

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    hipertext: legturi

    refereniale (non-ierarhice)organizaionale (ierarhice, structurale)

    statice versus dinamice

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    hipertext: documente

    Coninuttipuri de medii: text, imagini, sunete, animaii,

    Organizarenoduri + legturi structurale

    Prezentaretextual, grafic, multimedia, 3D, mixt

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    Cum identificm (adresm) resursele Web?

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    URI

    Fiecare resurs Web este desemnat de identificatori uniformi de resurse

    URI Uniform Resource Identifiers

    RFC 2396, 3986

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    URI: definiii

    Resurslucru care posed o identitate

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    URI: definiii

    Resurslucru care posed o identitate

    nsemnare, CV, fotografie, prezentare, melodie, program,persoan, baz de date, concept arbitrar etc.

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    URI: definiii

    Identificatorobiect care poate juca rolul unei resurse

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    URI: definiii

    Identificatorobiect care poate juca rolul unei resurse

    secven de caractere avnd o sintax precis

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    URI: definiii

    Uniformitateresurse eterogene pot fi desemnate

    pe baza acelorai convenii sintactice,fiind interpretate semantic n mod uniform

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    URI = URL + URN

    Uniform Resource Locator

    identific resursele prin intermediul mecanismuluide accesare: adres de reea, domeniu simbolic

    RFC 2717, 2718

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    URI = URL + URN

    Uniform Resource Locator

    http://profs.info.uaic.ro/~busaco/teach/

    mailto:[email protected]

    ftp://ftp.funet.fi/pub/README.txt

    data:image/png;base64,iVBORw0KGgoAAYII=

    tel:+40232201090

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    URI = URL + URN

    Uniform Resource Name

    identific resursele prin nume, n mod persistent, chiar dac resursa este una abstract

    RFC 2141

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    URI = URL + URN

    urn:mimetypes

    urn:ISBN:973-681-988-4

    urn:ietf:rfc:2401

    urn:mozilla:install-manifest

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    URI = URL + URN

    urn:mimetypes

    urn:ISBN:973-681-988-4

    urn:ietf:rfc:2401

    urn:mozilla:install-manifest

    tipuri de date MIME

    carte identificat

    unic prin ISBN

    specificaie(standard)

    componentsoftware

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    schema://authority/path?query

    http://www.pinguin.info/prog/cauta?id=Tux

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    schema://authority/path?query

    http://www.pinguin.info/prog/cauta?id=Tux

    schema reprezint o schem de adresare standardizat(recunoscut de client e.g., browser Web)

    about file geo http https im mailto news sip

    sms tel tv urn ws xmpp etc.

    www.iana.org/assignments/uri-schemes/uri-schemes.xhtml

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    schema://authority/path?query

    http://www.pinguin.info/prog/cauta?id=Tux

    authority poate include informaii de autentificare a utilizatorului (nume:parola specificate n clar!)

    +date privind domeniul/adresa Internet,

    eventual portul de acces

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    schema://authority/path?query

    http://www.pinguin.info/prog/cauta?id=Tux

    path refer o cale (virtual) de directoare spre un nume de resurs interpretabil ca nume de fiier,

    eventual avnd o extensie

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    schema://authority/path?query

    http://www.pinguin.info/prog/cauta?id=Tux

    query specific date de intrareuzual, perechi cheie=valoare delimitate de &

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    URI

    Caractere rezervate; / ? : @ & = + $ ,

    se codific n baza 16, precedate de %

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    URI

    Caractere rezervate; / ? : @ & = + $ ,

    se codific n baza 16, precedate de %

    exemplu: spaiul va deveni %20

    de ce?

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    URI

    URL-uri absolute

    http://www.info.uaic.ro/~busaco/cv.html

    apar obligatoriu componentele schema i authority

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    URI

    URL-uri relative

    ../../web.css

    apar doar construcii referitoare la componenta pathi, eventual, query

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    URI

    Fragmente dintr-un coninutpot fi referite prin URIref

    (referine, fragment identifiers)

    URI#URIref

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    URI

    Fragmente dintr-un coninutpot fi referite prin URIref

    (referine, fragment identifiers)

    URI#URIref

    web-biblio.html#web

    https://drive.google.com/#my-drive

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    URI

    URI-urile trebuie considerate opace

    nu trebuie ghicit tipul coninutuluiinspectnd URI-ul asociat resursei

    avansat

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    URI

    URI-urile trebuie considerate opace

    nu trebuie ghicit tipul coninutuluiinspectnd URI-ul asociat resursei

    tipul unei resurse nu este dat de extensie e.g., .html ,ci de tipul MIME transmis de server

    avansat

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    URI

    URI-urile trebuie considerate opace

    nu trebuie ghicit tipul coninutuluiinspectnd URI-ul asociat resursei

    starea/coninutul resursei poate evolua n timp,dar URI-ul asociat ei nu

    cool URIs dont changewww.w3.org/Provider/Style/URI.html

    avansat

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    IRI

    Internationalized Resource Identifiercomplementar URI-ului (RFC 3987)

    permite folosirea caracterelor Unicode

    a se vedea i IDN (Internationalized Domain Name)

    exemplificri: http://thefreedictionary.com/ros

    http://www.kpabt.eu/motorbat/

    http://www..tw/

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    Ce tipuri de aplicaii Web exist?

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    Sit Web

    sistem pe care ruleaz un server Webgzduind o serie de pagini (resurse) nrudite

    ale unei organizaii, companii sau persoane

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    Aplicaie Web

    colecie interconectat de pagini Webcu coninut generat dinamic, menit a oferi

    utilizatorilor o funcionalitate specific

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    Aplicaie Web

    interaciunea dintre aplicaie i utilizatoriare loc via o interfa Web

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    Aplicaie Web

    interaciunea dintre aplicaie i utilizatoriare loc via o interfa Web

    uzual, sit Web = aplicaie Web

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    Aplicaie Web

    exemple:Amazon, Codepen, Coursera, Dropbox, Expedia, Flickr,

    InfoQ, info.uaic.ro, Koding, PHPMyAdmin, Reddit, Quora, SlideShare, Snapchat, Vimeo, webmin, WordPress

    i multe, multe, multe altele

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    Centrate pe documenteInteractiveTranzacionaleColaborativeOrientate spre portaluriDe tip ubicuuWeb socialWeb semantic

    evoluia n timpa complexitii

    tipuri de aplicaii web

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    Centrate pe documente document centric

    coninut/pagini static(e): situri de companii, personale

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    Interactive

    expoziii virtualesituri de tiri

    sisteme de facilitare a cltoriilor (e-travel)chiocuri informative

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    Tranzacionale

    online bankingsoluii B2B (business-to-business)

    fluxuri de activiti (workflow-uri)

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    Colaborative

    tele-conferine Webaplicaii Web de tip wiki

    servicii e-learningaplicaii Web peer-to-peer

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    Orientate spre portaluri

    localizare unitar a informaiilortehnice, de afaceri, guvernamentale,

    specie: Web-ul cetenesc

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    De tip ubicuu

    servicii mobile bazate pe locaia utilizatorului, disponibile pe mai multe plaforme:

    desktop, dispozitive mobile, tablet,

    Web-ul mobil

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    Web social

    mediatizare (syndication)filtrare colaborativ pe baza tagging-ului

    spaii de lucru virtualedivertisment social

    social (game) computing

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    Obiectde

    interes

    Asocierimentalemultiple

    (concepte)

    tt

    tt

    tagging

    tagging-ul reprezint o modalitate particular de adnotarea resurselor electronice digital content annotation

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    tag = (meta)dat simpl termen arbitrar ales

    asociat extern unui obiect (unei resurse)

    cu scopul de a identifica, sorta, agrega etc. acea resurs

    Obiectde

    interes

    Asocierimentalemultiple

    (concepte)

    tt

    tt

    tagging

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    Web semantic (Web of Data)

    modelarea cunotinelorpentru a fi nelese de calculatoare

    dateinformaiicunotine

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    Care-i arhitectura unei aplicaii Web?

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    Arhitectura generic a unei aplicaii Web

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    Aplicaie Web = Interfa + Coninut (Date) + Program

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    Aplicaie Web = Interfa + Coninut (Date) + Program

    mitul 1: cea mai important este interfaamitul 2: cel mai important este programulmitul 3: cele mai importante sunt datele

    standarde deschise: HTML, CSS, Ajax, SVG, WebGL,

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    Aplicaie Web = Interfa + Coninut (Date) + Program

    mitul 1: cea mai important este interfaamitul 2: cel mai important este programulmitul 3: cele mai importante sunt datele

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

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    Aplicaie Web = Interfa + Coninut (Date) + Program

    mitul 1: cea mai important este interfaamitul 2: cel mai important este programulmitul 3: cele mai importante sunt datele

    relaionale (SQL), grafuri (NoSQL), JSON, XML, RDF

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    Aplicaie Web = Interfa + Coninut (Date) + Program

    mitul 1: cea mai important este interfaamitul 2: cel mai important este programulmitul 3: cele mai importante sunt datele

    fapt: sunt importante toate!

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busacorezumat

    terminologie, modelul client/server, hipertextul,

    URI, sit vs. aplicaie, tipuri de aplicaii Web

  • Dr.

    Sab

    in B

    ura

    ga

    www.purl.org/net/busaco

    episodul viitor: programare Webprotocolul HTTP

    via @girlie_mac


Recommended