Transcript Slide 1

2013 - 2014
Programarea Clientului Web
s.l. dr. ing. Simona Caraiman
mailto: [email protected]
Universitatea Tehnica “Gheorghe Asachi” din Iasi
Facultatea de Automatica si Calculatoare
Prezentari curs











HTTP 1.1 vs. HTTP 2.0 vs. SPDY (S?)
Biblioteci Javascript (JQuery/UI, YahooUI,
Prototype/script.aculo.us, Dojo) (S5)
HTML 5 (S6/7)
Browser plug-ins (S8)
Web mobile (protocoale comunicatii, principii dezvoltare, aplicatii
cross-platform) (S10)
Web semantic (S11)
Web 3D (WebGL) (S6/S10)
Cloud Computing (S?)
Testarea aplicatiilor Web
Web Security (S12)
propune o tema…
PCW - C3.Recapitulare
Client Web
Program ce permite accesarea
resurselor in World Wide Web
Deci,
 identifica resursele prin URI-uri
 acceseaza resurse printr-un protocol web
(“vorbeste” HTTP)
 prezinta documentele web utilizatorului
(“cunoaste” limbaje de marcare)
PCW - C3.Recapitulare
Browser Web – arhitectura de referinta
PCW - C3.Recapitulare
Client Web
Program ce permite accesarea
resurselor in World Wide Web
Deci,
 identifica resursele prin URI-uri
 acceseaza resurse printr-un protocol web
(“vorbeste” HTTP)
 prezinta documentele web utilizatorului
(“cunoaste” limbaje de marcare)
PCW - C3.Recapitulare
Adresarea resurselor Web
URI – Uniform Resource Identifier
(RFC 3986)
secventa compacta de caractere ce identifica o
resursa abstracta sau fizica
Ex.:
ftp://ftp.is.co.za/rfc/rfc1808.txt
http://eureka.cs.tuiasi.ro/~sarustei/PCW/
mailto:[email protected]
tel:+1-816-555-1212
telnet://192.0.2.16:80/
PCW - C3.Recapitulare
URI, URL si URN
URI – locator, nume, amandoua
URL – Uniform Resource Locator
-
localizeaza resursa prin descrierea mecanismului de acces
http://users.cs.tuiasi.ro/~sarustei/PCW/
ftp://ftp.is.co.za/rfc/rfc1808.txt
URN – Uniform Resource Name
-
-
identifica resursele prin nume, intr-o forma persistenta, chiar daca
resursa a disparut (“urn:”<NID>”:”<NSS>)
-
NID – Namespace ID, NSS – Namespace Specific String
registered NID: ietf, pin, issn, oid, newsml, oasis, xmlorg, publicid
urn:isbn:0451450523
urn:issn:0167-6423
urn:ietf:rfc:2648
URL vs URN <=> “unde” vs “ce”
PCW - C3.Recapitulare
URN – Uniform Resource Name
 nume simbolice asignate resurselor de catre organizatii cu
rol de autoritate (IANA)
 nu contin informatii despre locatia/locatiile fizice ale
resursei

pot mapa url-uri multiple



decizia de a utiliza un anume url poate fi amanata pana in momentul
accesului efectiv la resursa
daca un url nu este disponibil, poate fi utilizat un altul fara necesitatea
interventiei utilizatorului
pot fi obtinute informatii despre resursa fara a fi necesara accesarea
efectiva a acesteia
 Rezolvarea urn-urilor

NU este standardizata


poate fi implementata folosind HTTP, DNS
Implementari la nivel corporativ

Dependente de necesitatile organizatiei/corporatiei respective
PCW - C3.Recapitulare
URL – Uniform Resource Locator
 Absolut
absolute-URL = scheme ":" hier-part [ "?" query ][“#” fragment]
 http://example.org/absolute/URI/with/absolute/path/to/resou
rce.txt
 ftp://example.org/resource.txt
 Relativ




../../../resource.txt
./resource.txt#frag01
#frag01
Transformare URL relativ in URL absolut: RFC 3986
PCW - C3.Recapitulare
URL – Uniform Resource Locator
Sintaxa generica
- secventa ierarhica de componente:
scheme, authority, path, query,
fragment.
URL = scheme ":" hier-part [ "?" query ] [ "#" fragment ]
PCW - C3.Recapitulare
URL - Sintaxa
Schema
-
Consta dintr-o secventa de caractere care incepe cu o litera
urmata de orice combinatie de litere, cifre, plus ("+"), punct
("."), sau minus ("-").
case-insensitive
oficiale (IANA – Internet Assigned Number Authority):
-
file, ftp, http, https, ldap, mailto, telnet, etc.
neoficiale:
-
fish, skype, callto, view-source, ymsgr, etc.
Ex:
ymsgr:sendIM?<screenname>
view-source:http://en.wikipedia.org/wiki/URI_scheme
http://eureka.cs.tuiasi.ro/~sarustei/PCW/
PCW - C3.Recapitulare
URL - Sintaxa
Authority
authority = [ userinfo "@" ] host [ ":" port ]
-
precedata de //
-
se termina la primul caracter “/”,”?” sau “#”
intalnit, sau la sfarsitul URL-ului
foo://example.com:8042/over/there?name=ferret#nose
PCW - C3.Recapitulare
URL - Sintaxa
Path
- contine date (organizate ierarhic), care, impreuna cu
componenta query, servesc la identificarea resursei in
contextul schemei si a autoritatii specificate
-
se termina la primul caracter “?”sau “#” sau la
sfarsitul URL
-
daca un URL contine componenta autoritate, atunci
componenta path trebuie sa fie precedata de “/”
foo://example.com:8042/over/there?name=ferret#nose
PCW - C3.Recapitulare
URL - Sintaxa
Query
- Contine date non-ierarhice, care impreuna
cu componenta path, servesc la
identificarea resursei in contextul schemei
si autoritatii specificate
- este indicata prin intermediul “?” si se
termina la primul caracter “#” sau la
sfarsitul URL-ului
foo://example.com:8042/over/there?name=ferret#nose
PCW - C3.Recapitulare
URL - Sintaxa
Fragment
- permite identificarea indirecta a unei resurse secundare
prin referinta la o resursa primara si informatii aditionale
de identificare
-
componenta fragment este indicata de prezenta
caracterului “#” si se termina la sfarsitul URL
-
evaluat client-side
-
cererea trimisa de client serverului nu contine identificatorul de
fragment
foo://example.com:8042/over/there?name=ferret#nose
PCW - C3.Recapitulare
URI
 utilizeaza caractere dintr-un subset al setului ASCII:
ALPHA
DIGIT
-
.
_
~
 caractere rezervate



pt. delimitarea componentelor generice ale unui URI:
:
/ ? # [ ] @
pt. delimitarea sub-componentelor:
! $ & ‘ ( ) * + , ; =
pot fi codificate folosind %HH-escaping


& - %26
OBS: codarea caracterului spatiu

%20 vs + (in query strings)
PCW - C3.Recapitulare
IRI
IRI = Internationalized Resource Identifier
(RFC 3987)
- complementar URI-ului
- secventa de caractere din Universal Character
Set (Unicode/ ISO 10646)
IRI (utf8/%HH)
URI (us-ascii/%HH)
March
March
March
März
März
M%C3%A4rz
http://wine.org/rosé
http://wine.org/rosé
http://wine.org/ros%E9
PCW - C3.Recapitulare
Client Web
program ce permite accesarea
resurselor in World Wide Web
Deci,
 identifica resursele prin URI-uri
 acceseaza resurse printr-un protocol web
(“vorbeste” HTTP)
 prezinta documentele web utilizatorului
(cunoaste limbaje de marcare)
PCW - C3.Recapitulare
HTTP
HyperText Transfer Protocol
 protocol client/server orientat pe tranzactii
 client = web browser, web crawler, robot ..
 server = web server




bazat pe TCP
HTTP /0.9/1.0/1.1 – RFC 2616
port standard de acces 80
protocol flexibil in legatura cu formatele
manipulate
PCW - C3.Recapitulare
HTTP - scenarii
 End-to-end
 Sisteme intermediare
 proxy
 gateway
 tunnel
PCW - C3.Recapitulare
HTTP - scenarii
End-to-end
1. clientul initiaza conexiunea TCP end-to-end
cu serverul
2. clientul transmite cererea
3. serverul incearca sa execute operatia ceruta
4. serverul returneaza raspunsul
5. se inchide conexiunea TCP
PCW - C3.Recapitulare
HTTP - scenarii
Cererea
End-to-end
 o comanda specifica (metoda HTTP)
 un URL
 mesaj de tip MIME (Multipurpose Internet Mail
Extension) – contine parametrii cererii
 informatii despre client
 informatii aditionale
Raspunsul
 informatii despre status (cod succes/eroare)
 mesaj de tip MIME – contine informatii despre
server, despre raspuns, continut (body content)
PCW - C3.Recapitulare
HTTP - scenarii
Sisteme intermediare
3 forme definite in specificatiile HTTP:
1. proxy
2. gateway
3. tunnel
PCW - C3.Recapitulare
HTTP - scenarii
Sisteme intermediare - proxy
Agent de forwarding:
-
primeste cererea pt. un obiect URL, modifica cererea, inainteaza cererea catre
server
Utilizare:
1. Intermediar de securitate (firewall)
- clientul si serverul separati de firewall
- serverul trebuie sa se autentifice firewall-ului pentru a crea o conexiune cu proxy
2. Versiuni diferite de HTTP
- proxy implementeaza ambele versiuni
PCW - C3.Recapitulare
HTTP - scenarii
Sisteme intermediare - Gateway
-
server ce apare clientului ca fiind serverul original
actioneaza in numele altor servere ce nu pot comunica
direct cu un client
Utilizare:
1. Intermediar de securitate (firewall)
2. Servere non-HTTP (ex. FTP, Gopher)
PCW - C3.Recapitulare
HTTP - scenarii
Sisteme intermediare - Tunnel
-
nu face nicio operatie asupra cererii/raspunsului HTTP
relay
Utilizare
- cand trebuie sa existe un intermediar intre client si server,
dar nu este necesar ca acesta sa inteleaga continutul
mesajelor
PCW - C3.Recapitulare
HTTP - scenarii
Cache
-
poate stoca cereri/raspunsuri
daca exista stocata o cerere identica cu una noua,
aceasta din urma este rezolvata cu raspunsul
stocat
poate opera pe client, server sau sistem
intermediar (nu tunel!)
limita de timp pentru stocare
PCW - C3.Recapitulare
HTTP - conexiuni
conexiuni multiple,
cereri secventiale
conexiune persistenta,
cereri secventiale
conexiune persistenta,
cereri ‘pipelined’
Mesaje HTTP
Mesaj HTTP = Simple-Request | Simple-Response |
Full-Request | Full-Response
 HTTP/0.9 - Simple Req/Resp – GET+URI / continut URI

nu permitea negocierea continutului
 HTTP/1.0 – Full Req/Resp
Full Request
Full Response
PCW - C3.Recapitulare
Mesaje HTTP
– Full Request/Response
Request
Response
Request Line
Response Line
identifica tipul mesajului si
resursa ceruta
informatii despre statusul
acestui raspuns
General Header
campuri aplicabile atat cererii cat si raspunsului, dar nu
si entitatii transferate
Request Header
informatii despre cerere si
despre client
Response Header
informatii despre raspuns
Entity Header
informatii despre resursa identificata de cerere si despre
entity body
Entity Body
corpul mesajului
PCW - C3.Recapitulare
Mesaje HTTP - Cerere
Request Line
Request-Line =
Method <SP> Request-URI <SP> HTTP-Version<CR><LF>
-
Method – metoda HTTP
Request-URI – URI-ul resursei cerute
HTTP-Version – versiunea HTTP utilizata de sender
PCW - C3.Recapitulare
Mesaje HTTP - Cerere
Request Line
Metode HTTP:
 GET – cerere de acces la reprezentarea unei resurse
 HEAD – similara cu GET, dar in mod uzual se doresc doar
meta-informatii (ex. tipul)
 POST – utilizata pentru trimiterea unor entitati (date,
actiuni) spre server (ex. datele dintr-un formular)
 PUT – plaseaza reprezentarea unei resurse pe server
 OPTIONS – furnizeaza optiunile dialogului intre client si
server (ex. negocierea reprezentarii)
 DELETE – sterge o resursa (reprezentarea ei) de pe
server
 TRACE – echo la cerere (debugging)
 CONNECT – conectare printr-un proxy
PCW - C3.Recapitulare
Mesaje HTTP - Cerere
Metode HTTP:
 Safe: nu modifica resursa
 Idempotente: efectele a N>0 cereri sunt aceleasi ca in
cazul unei singure cereri
Metode HTTP
Safe
Idempotente
OPTIONS
✔
✔
GET
✔
✔
HEAD
✔
✔
POST
PUT
✔
DELETE
✔
TRACE
✔
CONNECT
PCW - C3.Recapitulare
Mesaje HTTP - Cerere
Metode HTTP: PUT vs POST
POST
 se cere ca serverul sa accepte entitatea inclusa in cerere ca o noua
subordonata a resursei identificate prin Request-URI
 maniera uniforma de a oferi urmatoarele functionalitati:




adnotarea resurselor existente;
postarea unui mesaj intr-un newsgroup, mailing list, bulletin board;
furnizarea unui bloc de date unui proces de manipulare a datelor
(ex. rezultatul trimiterii unui formular);
extinderea unei baze de date printr-o operatie de tip append.
PUT
 se cere ca entitatea inclusa in cerere sa fie stocata la adresa data de
Request-URI
PCW - C3.Recapitulare
Mesaje HTTP - Cerere
Metode HTTP: PUT vs POST





ambele sunt unsafe
ambele pot actualiza o resursa
ambele pot crea noi resurse
diferenta fundamentala: semnificatia Request-URI
functia efectiva a metodei POST



determinata de server
depinde de Request-URI
in urma POST poate sa nu rezulte o resursa identificabila
printr-un URI
 PUT este idempotenta!

Ex.: trimiterea unei cereri pt. actualizarea unei resurse
rezultatul fiind timeout

cu POST nu este safe sa se incerce din nou actualizarea fara a
efectua o verificare
PCW - C3.Recapitulare
Mesaje HTTP - Raspuns
Status Line
Status-Line =
HTTP-Version <SP> Status-Code <SP>
Reason-Phrase <CR><LF>
-
HTTP-Version – versiunea HTTP utilizata de
sender
Status-Code – numar din 3 cifre ce indica
raspunsul la o cerere primita
Reason-Phrase – scurta explicare a status-code
PCW - C3.Recapitulare
Mesaje HTTP - Raspuns
Status Codes
 Coduri de informare (1xx)
100 continue, 101 Switching Protocols
 Coduri de succes (2xx)
200 Ok, 201 Created, 202 Accepted
 Coduri de redirectare (3xx)
300 Multiple Choices, 302 Moved Temporarily
 Coduri de eroare client (4xx)
400 Bad Request, 403 Forbidden, 404 Not Found
 Coduri de eroare server (5xx)
501 Not Implemented, 503 Service unavailable
 Coduri de avertisment (0..99)
PCW - C3.Recapitulare
Mesaje HTTP – General Header

Connection – contine o lista de cuvinte cheie si nume de campuri
header ce se aplica doar conexiunii TCP curente intre sender si cel
mai apropiat recipient non-tunel

Date – data si momentul la care a fost initiat mesajul

Forwarded – utilizat de gateways si proxy-uri pentru a indica
pasii intermediari de-alungul unui lant cerere-raspuns. Fiecare
gateway sau proxy ce manipuleaza mesajul poate atasa un camp
Forwarded ce indica URI-ul propriu
PCW - C3.Recapitulare
Mesaje HTTP – General Header

Keep-alive – poate fi prezent daca in campul Connection apare
cuvantul cheie Keep-Alive. Poate indica timpul maxim in care
sender-ul va mentine conexiunea in asteptarea urmatoarei cereri
sau nr. maxim de cereri aditionale ce vor fi permise in cadrul
acestei conexiuni persistente

MIME-Version – indica versiunea MIME respectata de mesaj

Pragma – contine directive specifice implementarii, ce ar putea fi
aplicate unui recipient de-a lungul lantului cerere-raspuns

Upgrade – utilizat intr-o cerere pt a specifica protocoale aditionale
suportate de client; intr-un raspuns este utilizat pentru a indica ce
protocol va fi folosit
PCW - C3.Recapitulare
Mesaje HTTP
–
Caching
Scop:
 eliminarea necesitatii trimiterii unor cereri
 reduce nr. de round-trips
 se foloseste un mecansim de expirare
 eliminarea necesitatii trimiterii unor
raspunsuri complete
 reduce bandwidth-ul necesar
 se foloseste un mecanism de validare
PCW - C3.Recapitulare
HTTP caching – principii de baza
1.
2.
3.
Daca header-ul raspunsului o interzice, acesta nu va fi stocat in
cache
Daca resursa este autentificata sau securizata (i.e. HTTPS), nu va
fi stocata in cache
O reprezentare stocata in cache este considerata fresh (poate fi
trimisa la client fara a face verificari la server) daca:

4.
Daca reprezentarea este veche, se cere validarea ei de catre
server


5.
are setat un timp de expirare sau un header de control al vechimii
si se afla inca in perioada fresh
Daca este validata, reprezentarea din cache este trimisa clientului
Daca nu este validata, se cere o noua reprezentare de la server
In anumite conditii (ex. lipsa conexiune) un cache poate servi o
reprezentare veche fara a o valida
PCW - C3.Recapitulare
HTTP caching
HEAD /~sarustei/index.html HTTP/1.1
host: users.cs.tuiasi.ro
HTTP/1.1 200 OK
Date: Tue, 15 Oct 2013 19:57:56 GMT
Server: Apache/2.2.3 (CentOS)
Cache-Control: max-age=3600, must-revalidate
Expires: Fri, 25 Oct 2013 18:39:57 GMT
Last-Modified: Tue, 26 Mar 2013 18:39:57 GMT
ETag: "157aae6-282-4d8d83f841940"
Accept-Ranges: bytes
Content-Length: 642
Content-Type: text/html; charset=UTF-8
PCW - C3.Recapitulare
Mesaje HTTP
–
General Header
Cache-Control = "Cache-Control" ":" l#cache-directive
cache-directive = cache-request-directive | cache-response-directive
cache-request-directive
cache-response-directive
“no-cache”
| “no-store”
| “max-age” “=“ delta-seconds
| “max-stale” [“=“ delta-seconds]
| “min-fresh” “=“ delta-seconds
| “no-transform”
| “only-if-cached”
| “cache-extension”
“public”
| “private”
| “no-cache”
| “no-store”
| “no-transform”
| “must-revalidate”
| “proxy-revalidate”
| “max-age” “=“ delta-seconds
| “s-max-age” “=“ delta-seconds
| “cache-extension”
PCW - C3.Recapitulare
Mesaje HTTP
–
General Header
Cache-Control = "Cache-Control" ":" l#cache-directive
cache-directive = cache-request-directive | cache-response-directive
-
-
max-age
in mesaje cerere (raspunsul din cache poate fi folosit doar daca nu
este mai vechi decat delta-seconds)
in mesaje raspuns (raspunsul poate fi stocat pentru cereri care vin in
intervalul specificat )
private – in mesaje raspuns (mesajul nu poate fi stocat in cache-uri
publice fiind destinat unui singur utilizator)
no-cache
in mesaje cerere (forteaza trimiterea cererii la serverul original)
in mesaje raspuns (nu permite stocarea mesajului)
PCW - C3.Recapitulare
HTTP caching – mecanismul de expirare
 Expirare specificata de server
 specificarea explicita a timpului de expirare:


headerul Expires
Cache-control : max age
 fortarea validarii fiecarei cereri:

Cache-control : must-revalidate
 Expirare calculata euristic
 cand nu este furnizat un timp de expirare explicit
 asignarea unui timp de expirare plauzibil pe baza
altor headere (ex. Last-Modified)
PCW - C3.Recapitulare
HTTP caching – mecanismul de validare
 Validarea inregistrarii cache
 cand cache-ul detine o inregistrare veche ce doreste
sa o furnizeze ca raspuns la o cerere
 trebuie sa consulte serverul (sau un cache
intermediar) daca inregistrarea este inca utilizabila
 permite evitarea
 overhead-ului de retransmitere a unui full response
daca inregistrarea cache este valida
 overhead-ului unui round-trip daca inregistrarea nu este
valida
PCW - C3.Recapitulare
HTTP caching – mecanismul de validare
 Validarea inregistrarii cache
 prin metode conditionale si “cache validators”
 la generarea unui raspuns serverul ataseaza un cache
validator
 cand un client (user agent sau proxy cache) face o
cerere conditionala pt o resursa din cache se trimite la
server si validatorul asociat
 Daca validatorul din cache=validatorul de pe server,
atunci 304 (Not Modified)
PCW - C3.Recapitulare
HTTP caching – mecanismul de validare
 Validarea inregistrarii cache
 “cache validators”:
 Momentul ultimei modificari a resursei
 Setat cu headerul Last-Modified
 Cache-ul trimite o cerere conditionala cu header-ul
If-Modified-Since
 Identificatori unici: headerul Etag



Sunt generati de server si se modifica de fiecare data
cand se modifica resursa
Cache-ul trimite o cerere conditionala cu header-ul IfNone-Match
majoritatea serverelor web moderne genereaza automat
headerele Last-Modified si ETag
PCW - C3.Recapitulare
HTTP caching – mecanismul de validare
 Cache-aware scripts
 Implicit majoritatea scripturilor nu returneaza un
validator sau informatii de expirare
 Scripturi cacheable:
 Daca produc un rezultat ce poate fi reprodus ulterior cu
o cerere identica
 Daca continutul se modifica numai in functie de
continutul URL-ului
 Scripturi non-cacheable:
 Daca rezultatul depinde de un cookie, informatii de
autentificare sau alte criterii externe
PCW - C3.Recapitulare
// $image_blob is the contents of a JPEG.
// $image_date is the timestamp the image was last changed.
// If the browser supplied an If-Modified-Since header that is not
HTTP
caching – mecanismul de validare
// later than the modified date, issue a 304 header.
if (
 isset($_SERVER['HTTP_IF_MODIFIED_SINCE'])
Cache-aware scripts
&&

Implicit
majoritatea
scripturilor nu returneaza un
$image_date
<=
strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE'])
validator sau informatii de expirare
)
{  Scripturi cacheable:
header('HTTP/1.1 304 Not Modified');
 Daca produc un
rezultat ce poate fi reprodus ulterior cu
header('Content-Length:
0');
o cerere identica
exit;
}
 Daca continutul se modifica numai in functie de
continutul URL-ului
// Otherwise, send the image and appropriate headers.
else Scripturi non-cacheable:
{
 Daca rezultatul depinde de un cookie, informatii de
header('Content-Type:
autentificareimage/jpeg');
sau alte criterii externe
header('Content-Length: ' . strlen($image_blob));
header('Last-Modified: ' . gmdate('D, d M Y H:i:s', $image_date) . ' GMT');
header('Pragma: public');
print $image_blob;
exit;
PCW - C3.Recapitulare
}
HTTP caching – implementare
 Servere Web

Apache HTTP Server


modulele expires_module si headers-module
fisierul .htaccess
### activate mod_expires
ExpiresActive On
### Expire .gif's 1 month from when they're accessed
ExpiresByType image/gif A2592000
### Expire everything else 1 day from when it's last modified
### (this uses the Alternative syntax)
ExpiresDefault "modification plus 1 day"
### Apply a Cache-Control header to index.html
<Files index.html>
Header append Cache-Control "public, must-revalidate"
</Files>

Microsoft IIS

Headerele HTTP pot fi configurate din interfata
PCW - C3.Recapitulare
HTTP caching – implementare
 Servere Web

Apache HTTP Server


modulele expires_module si headers-module
fisierul .htaccess
### activate mod_expires
ExpiresActive On
### Expire .gif's 1 month from when they're accessed
ExpiresByType image/gif A2592000
### Expire everything else 1 day from when it's last modified
### (this uses the Alternative syntax)
ExpiresDefault "modification plus 1 day"
### Apply a Cache-Control header to index.html
<Files index.html>
Header append Cache-Control "public, must-revalidate"
</Files>

Microsoft IIS

Headerele HTTP pot fi configurate din interfata
PCW - C3.Recapitulare
Mesaje HTTP
– Full Request/Response
Request
Response
Request Line
Response Line
identifica tipul mesajului si
resursa ceruta
informatii despre statusul
acestui raspuns
General Header
campuri aplicabile atat cererii cat si raspunsului, dar nu
si entitatii transferate
Request Header
informatii despre cerere si
despre client
Response Header
informatii despre raspuns
Entity Header
informatii despre resursa identificata de cerere si despre
entity body
Entity Body
corpul mesajului
PCW - C3.Recapitulare
Mesaje HTTP - Cerere
Request Header













Accept
Accept-charset
Accept-encoding
Accept-language
Authorization
From
Host
If-modified-since
Proxy-authorization
Range
Referer
Unless
User-agent
PCW - C3.Recapitulare
Mesaje HTTP - Cerere
Request Header













Accept
Accept-charsetO lista de tipuri media acceptabile ca
Accept-encoding
raspuns la acest mesaj
Accept-language
Authorization
From
Host
If-modified-since
Proxy-authorization
Range
Referer
Unless
User-agent
PCW - C3.Recapitulare
Mesaje HTTP - Cerere
Request Header













Accept
Accept-charset
Accept-encoding
Accept-language
Credentials – utilizate de client pt a se
Authorization
autentifica in fata serverului
From
Host
If-modified-since
Proxy-authorization
Range
Referer
Unless
User-agent
PCW - C3.Recapitulare
Mesaje HTTP - Cerere
Request Header













Accept
Accept-charset
Accept-encoding
Accept-language
Authorization
From
Permite clientului sa se autentifice in fata
Host
unui proxy care necesita autentificare
If-modified-since
Proxy-authorization
Range
Referer
Unless
User-agent
PCW - C3.Recapitulare
Mesaje HTTP - Raspuns
Response Header
 Location – defineste locatia exacta a resursei
 Proxy-authenticate – impreuna cu status code 407
(Proxy Authentication Required)
 Public – enumera metodele non-standard suportate de
server
 Retry-after – impreuna cu status code 503 (Service
Unavailable)
 Server – identifica produsul software utilizat de server
pentru tratarea cererei
 WWW-authenticate – impreuna cu status code 401
(Unauthorized)
PCW - C3.Recapitulare
Mesaje HTTP - Raspuns
Entitati = entity header + entity body
Entity header:








Allow
Content-encoding
Content-length
Content-MD5
Content-type
Expires
Title
Transfer-encoding
PCW - C3.Recapitulare
Mesaje HTTP - Raspuns
Entitati – Entity Body
-
-
secventa arbitrara de octeti (text, date binare, imagini,
audio, video)
Interpretarea este determinata de campurile din Entity
Header: Content-Encoding, Content-Type si TransferEncoding
entity-body := Transfer-Encoding( Content-Encoding(
Content-Type ( data )))
data = continutul resursei
Content-Type – determina modul in care sunt interpretate
datele (MIME type)
Content-Encoding – datele pot fi codate si aceasta codare
stocata la acel URI in locul datelor (ex. compresie zip)
Transfer-Encoding – poate fi aplicata la transfer pentru a
forma corpul mesajului (ex. chunked)
PCW - C3.Recapitulare
MIME
Multipurpose Internet Mail Extensions


-
-
Content-Type: tip/subtip
Tipuri MIME principale:
text defineste formatele text (text/plain, text/html,
text/xml, text/css)
image specifica formatele grafice (image/png, image/jpeg,
image/gif)
application defineste aplicatiile client
(application/executable, application/javascript,
application/pdf)
audio specifica formatele audio (audio/basic, audio/x-wav,
audio/x-midi)
video specifica formatele video (video/mpeg,
video/quicktime)
multipart utilizat pentru transmiterea datelor compuse
PCW - C3.Recapitulare
Client request (no authentication)
Client
request
GET /private/index.html HTTP/1.0
(Host:
user name "Aladdin", password "open sesame")
localhost
HTTP – autentificare acces
(codificare credentials: Base64(Aladdin:open sesame))
GET /private/index.html HTTP/1.0
Host:
localhost
 autentificare
Server
response de tip “challenge-response”
HTTP/1.0
401 Authorization
Required
Authorization:
Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==
 2 tipuri:
client-server
si client-proxy
Server: HTTPd/1.0
 Challenge
(trimis
de server/proxy):
Date:
Sat,
27 Nov
2004 10:18:15
GMT
Server
response
challenge
auth-scheme
realm *( "," auth-param
)
WWW-Authenticate:
Basic 1*SP
realm="Secure
Area"
HTTP/1.0
200= OK
Content-Type:
text/html
auth-scheme
= token
Server:
HTTPd/1.0
Content-Length:
311
auth-param
token
"=" quoted-string
Date:
Sat, 27 =Nov
2004
10:19:07 GMT
realm = "realm"
"=" realm-value
Content-Type:
text/html
<!DOCTYPE
HTML= PUBLIC
"-//W3C//DTD HTML 4.01
realm-value
quoted-string
Content-Length:
10476
Transitional//EN" "http://www.w3.org/TR/1999/REC Raspuns (trimis de client):
html401-19991224/loose.dtd">
<HTML> <HEAD>
…
<TITLE>Error</TITLE>
<META HTTP-EQUIV="Content-Type"
credentials = basic-credentials
| auth-scheme *("," auth-param )
CONTENT="text/html; charset=ISO-8859-1"> </HEAD>
<BODY><H1>401 Unauthorized.</H1></BODY> </HTML>
PCW - C3.Recapitulare
HTTP 1.0 vs 1.1

Caching



Cache entry: fresh/stale – revalidare inregistrari vechi
If-Modified-Since – erori de sincronizare, rezolutie
HTTP 1.1:








entity tag (ETag)
If-None-Match, If-Unmodified-Since, If-Match
Cache-Control (max-age, private, no-store,…)
Bandwith optimization



Range requests
New status code: 100 Continue
Negocierea compresiei


conexiuni persistente – implicit
pipelining

Chunked transfer-coding (Transfer-Encoding: chunked )


Basic authentication -> Digest authentication (criptare username si parola)
Proxy authentication
Managementul conexiunii
Transmiterea mesajelor
Securitate si autentificare
…. http://www2.research.att.com/~bala/papers/h0vh1.html
PCW - C3.Recapitulare
HTTP 2.0
 Goals:
 asynchronous connection multiplexing
 header compression,
 request-response pipelining
 SPDY (speedy) – Google, IETF draft
 protocol pt. transportul continutului web
 Chromium, Mozilla, Opera
 reduce latenta incarcarii paginilor web
 compresie, multiplexare, prioritizare
PCW - C3.Recapitulare
Client Web
Program ce permite accesarea
resurselor in World Wide Web
Deci,
 identifica resursele prin URI-uri
 acceseaza resurse printr-un protocol web
(“vorbeste” HTTP)
 prezinta documentele web utilizatorului
(cunoaste limbaje de marcare)
PCW - C3.Recapitulare
Limbaje de marcare
- (X)HTML -
PCW - C3.Recapitulare
Limbaje de marcare
 set de coduri ce dau instructiuni referitoare
la structura unui text si la modul de afisare
a acestuia
 1967 – GenCode – adnotarea manuscriselor
 1970-1980 – TeX – carti de matematica
 Scribe, GML, SGML
 HTML, XML, XHTML
 text + instructiuni de marcare (tag-uri)
 prezentarea altor tipuri de informatii
(imagini vectoriale, playlist-uri, servicii
web, etc)
PCW - C3.Recapitulare
Limbaje de marcare
Limbaje de marcare XML:
• Extensible Stylesheet Language
• MathML
• MusiXML
• MXML
• RSS
• Scalable Vector Graphics
• Synchronized Multimedia Integration Language
• Web Services Description Language
• X3D
• XAML
• XHTML
• XPath
• …
PCW - C3.Recapitulare
Limbaje de marcare
Limbaje de marcare de uz general:
•
GML – predecesor al SGML
•
SGML – predecesor al XML
•
XML
•
…
Limbaje de marcare a documentelor:
•
HTML
•
XHTML
•
MathML
•
TeX, LaTeX
•
…
Limbaje de marcare pentru mediatizarea continutului:
•
Atom
•
RSS
•
SyncML
•
…
PCW - C3.Recapitulare
Hypertext Markup Language (HTML)
 limbaj universal pentru publicarea hypertext-ului pe
World Wide Web
 descrie continutul si structura informatiilor intr-o
pagina web
 format neproprietar bazat pe SGML
 unelte de creare si redare:
- editor text
- unelte WYSIWYG (Dreamweaver, etc.)
 text + indicatii de redare (tag)
 numele fiecarui tag = element
 sintaxa: <element> continut </element>
 ex: <p>Acesta este un paragraf</p>
PCW - C3.Recapitulare
Structura unei pagini HTML
<html>
<head>
informatii despre pagina
</head>
<body>
continutul paginii
</body>
</html>
• header – descrie pagina
• body – continutul paginii
• fisier extensie .html, .htm
PCW - C3.Recapitulare
HTML - Versiuni











GML (IBM – Charles Goldfarb, ‘60) –
Generalized Markup Language
SGML (ISO 8879:1986) –
Standard Generalized Markup Language
HTML Tags – Tim Berners-Lee, 1991
IETF – 1993: "Hypertext Markup Language (HTML)" Internet-Draft,T.
Berners-Lee, D. Connolly
Dave Raggett, 1993: “HTML+ (Hypertext Markup Format)”
HTML 2.0 – IETF HTML WG, 1995 (RFC 1866)
HTML 3.2 – Ian 1997 (W3C)
HTML 4.0 –Dec 1997
HTML 4.01 – Dec 1999
XHTML 1.0 - 2000
HTML 5


2004: Web Hypertext Application Technology Working Group (WHATWG)
12 Mai 2012, W3C Working Draft
PCW - C3.Recapitulare
HTML vs XHTML
XHTML – eXtensible HyperText Markup Language
- reformulare a HTML/4.01 in XML
- mai extensibil (namespaces – includerea de fragmente din
alte limbaje bazate pe XML)
- interoperabilitate cu alte formate de date (bazate pe XML)
- divizare HTML in componente reutilizabile (XHTML
Modularization)
XHTML 1.0 (2000)
-
procesare si mentenanta mai usoara
elemente si atribute din HTML 4
3 “flavours”:
-
XHTML 1.0 Strict – HTML 4.01
XHTML 1.0 Transitional
-
-
browsere mai vechi (nu suporta style sheets)
include elemente prezentationale( ex. body + bgcolor, center, font, etc.)
XHTML 1.0 Frameset
PCW - C3.Recapitulare
HTML vs XHTML
XHTML Modularization
-
nu specifica un limbaj de marcare
-
modularizare abstracta a XHTML
-
implementare a abstractizarii folosind XML DTD
(Document Type Definition) si XML Schemas
-
descompunere a XHTML 1.0 in module abstracte
care furnizeaza tipuri specifice de functionalitati
PCW - C3.Recapitulare
HTML vs XHTML
XHTML Modularization
Avantaje:
 alegerea elementelor suportate de un dispozitiv
 simplificarea XHTML pentru dispozitive mici
 extinderea XHTML pentru aplicatii complexe prin
adaugarea de noi functionalitati XML (ex. MathML, SVG,
Voice, Multimedia)
 definirea de profile XHTML precum XHTML Basic (pt.
dispozitive mobile)
PCW - C3.Recapitulare
HTML vs XHTML
XHTML Modularization
Avantaje:
 alegerea elementelor suportate de un dispozitiv
 simplificarea XHTML pentru dispozitive mici
 extinderea XHTML pentru aplicatii complexe prin
adaugarea de noi functionalitati XML (ex. MathML, SVG,
Voice, Multimedia)
 definirea de profile XHTML precum XHTML Basic (un
subset al XHTML pt dispozitive mobile)
PCW - C3.Recapitulare
De ce XHTML?
 99% din paginile HTML de pe Web au
macar o eroare!
 browsere care “iarta”
 W3C: manipularea “draconica” a erorilor
=> XHTML
 MIME type: application/xhtml+xml
 XHTML 1.0: application/html
 WHAT WG (Mozilla, Opera):
 alta viziune asupra Web-ului
 backward compatibility => HTML 5
 http://diveintohtml5.org/past.html
PCW - C3.Recapitulare
De ce XHTML?
 limbaj mai rigid si mai structurat
 interoperabilitate peste diferite browsere
web
 mai probabil ca paginile web construite cu
XHTML sa fie afisate corect in viitor
 poate fi usor interschimbat cu alte date
XML: SVG, MathML, MusicML, etc.
PCW - C3.Recapitulare
HTML vs XHTML
Diferente:
 elementele XHTML trebuie sa fie corect
imbricate
 elementele XHTML trebuie intotdeauna
inchise
 elementele XHTML trebuie scrise cu litere
mici
 documentele XHTML trebuie sa contina un
element root
PCW - C3.Recapitulare
HTML vs XHTML
Diferente:
 elementele XHTML trebuie sa fie corect
imbricate
Gresit:
 elementele
XHTML trebuie intotdeauna
<b><i>This text is bold and italic</b></i>
inchise
 elementele
XHTML trebuie scrise cu litere
Corect:
mici
<b><i>This text is bold and italic</i></b>
 documentele XHTML trebuie sa contina un
element root
PCW - C3.Recapitulare
HTML vs XHTML
Diferente:
 elementele XHTML trebuie sa fie corect
imbricate
<ul>
 elementele
XHTML trebuie intotdeauna
<li>Cafea</li>
<li>Ceai
inchise
<ul>
<li>Ceai
negru</li>
 elementele XHTML
trebuie
scrise cu litere
<li>Ceai verde</li>
mici
</ul>
<li>Lapte</li>
 documentele
XHTML trebuie sa contina un
</ul>
element root
PCW - C3.Recapitulare
HTML vs XHTML
Diferente:
 elementele XHTML trebuie sa fie corect
imbricate
<ul>
 elementele
XHTML trebuie intotdeauna
<li>Cafea</li>
<li>Ceai
inchise
<ul>
<li>Ceai
negru</li>
 elementele XHTML
trebuie
scrise cu litere
<li>Ceai verde</li>
mici
</ul>
</li>
 documentele
XHTML trebuie sa contina un
<li>Lapte</li>
</ul>
element
root
PCW - C3.Recapitulare
HTML vs XHTML
Diferente:

<p>Un paragraf
<p>Alt paragraf
elementele
XHTML
trebuie sa fie corect
imbricate
 elementele XHTML trebuie intotdeauna
inchise
 elementele XHTML trebuie scrise cu litere
mici
 documentele XHTML trebuie sa contina un
element root
PCW - C3.Recapitulare
HTML vs XHTML
Diferente:

<p>Un paragraf</p>
<p>Alt paragraf</p>
elementele
XHTML trebuie
sa fie corect
imbricate
 elementele XHTML trebuie intotdeauna
inchise
 elementele XHTML trebuie scrise cu litere
mici
 documentele XHTML trebuie sa contina un
element root
PCW - C3.Recapitulare
HTML vs XHTML
Diferente:
A break: <br>
A horizontal rule: <hr>
 elementele XHTML trebuie sa fie corect
An image: <img src="happy.gif" alt="Happy face">
imbricate
 elementele XHTML trebuie intotdeauna
inchise
 elementele XHTML trebuie scrise cu litere
mici
 documentele XHTML trebuie sa contina un
element root
PCW - C3.Recapitulare
HTML vs XHTML
Diferente:
A break: <br />
A horizontal rule: <hr />
 elementele XHTML trebuie sa fie corect
An image: <img src="happy.gif" alt="Happy face“
imbricate
 elementele XHTML trebuie intotdeauna
inchise
 elementele XHTML trebuie scrise cu litere
mici
 documentele XHTML trebuie sa contina un
element root
PCW - C3.Recapitulare
/>
HTML vs XHTML
Gresit:
<BODY>
Diferente:
<P>This is a paragraph</P>
</BODY>
 elementele XHTML trebuie sa fie corect
Corect:
imbricate
<body>
 elementele
XHTML
trebuie intotdeauna
<p>This is
a paragraph</p>
</body>
inchise
 elementele XHTML trebuie scrise cu litere
mici
 documentele XHTML trebuie sa contina un
element root
PCW - C3.Recapitulare
HTML vs XHTML
Diferente:
 elementele XHTML trebuie sa fie corect
imbricate
<html>
 elementele
XHTML
<head>
... trebuie
</head> intotdeauna
inchise <body> ... </body>
</html>
 elementele
XHTML trebuie scrise cu litere
mici
 documentele XHTML trebuie sa contina un
element root
PCW - C3.Recapitulare
HTML vs XHTML
Alte reguli de sintaxa XHTML:
 Numele atributelor trebuie sa fie scrise cu
litere mici
 Valorile atributelor trebuie sa fie scrise intre
ghilimele
 Minimizarea atributelor este interzisa
 Atributul id inlocuieste atributul name
 XHTML DTD defineste elemente obligatorii
PCW - C3.Recapitulare
HTML vs XHTML
Alte reguli de sintaxa XHTML:
 Numele atributelor trebuie sa fie scrise cu
litere mici
 Valorile atributelor trebuie sa fie scrise intre
Gresit:
ghilimele
<table WIDTH="100%">
 Minimizarea
Corect: atributelor este interzisa
<table
width="100%">atributul name
 Atributul
id inlocuieste
 XHTML DTD defineste elemente obligatorii
PCW - C3.Recapitulare
HTML vs XHTML
Alte reguli de sintaxa XHTML:
 Numele atributelor trebuie sa fie scrise cu
litere mici
 Valorile atributelor trebuie sa fie scrise intre
ghilimele
 Minimizarea
Gresit: atributelor este interzisa
<table width=100%>
 Atributul
id inlocuieste atributul name
Corect:
 XHTML<table
DTD defineste
elemente obligatorii
width="100%">
PCW - C3.Recapitulare
HTML vs XHTML
Alte reguli de sintaxa XHTML:
Gresit:
<input checked>
<input
readonly>
Corect:

Numele
atributelor
trebuie sa fie scrise cu
<input disabled>
<input checked=“checked”/>
litere
mici
<input readonly=“readonly”/>
<option
selected>
<input disabled=“disabled”/>
 Valorile atributelor
trebuie
sa fie scrise intre
<option
selected=“selected”/>
ghilimele
 Minimizarea atributelor este interzisa
 Atributul id inlocuieste atributul name
 XHTML DTD defineste elemente obligatorii
PCW - C3.Recapitulare
HTML vs XHTML
Alte reguli de sintaxa XHTML:
Gresit:
<input checked>
<input
readonly>
Corect:

Numele
atributelor
trebuie sa fie scrise cu
<input disabled>
<input checked=“checked”/>
litere
mici
<input readonly=“readonly”/>
<option
selected>
<input disabled=“disabled”/>
 Valorile atributelor
trebuie
sa fie scrise
<option
selected=“selected”/>
intre ghilimele
 Minimizarea atributelor este interzisa
 Atributul id inlocuieste atributul name
 XHTML DTD defineste elemente obligatorii
PCW - C3.Recapitulare
HTML vs XHTML
Alte reguli de sintaxa XHTML:
Gresit:
<img
src="picture.gif“
name="picture1"
/> scrise cu

Numele
atributelor
trebuie
sa
fie
Corect:
mici
<img litere
src="picture.gif“
id="picture1" />
<img
src="picture.gif“
id="picture1
 Valorile
atributelor
trebuie sa“name="picture1"
fie scrise intre/>
ghilimele
 Minimizarea atributelor este interzisa
 Atributul id inlocuieste atributul name
 XHTML DTD defineste elemente obligatorii
PCW - C3.Recapitulare
HTML vs XHTML
Alte reguli de sintaxa XHTML:
 Numele atributelor trebuie sa fie scrise cu
litere mici
 Valorile atributelor trebuie sa fie scrise intre
ghilimele
DOCTYPE,
Minimizarea
atributelor
este interzisa
head, title,
body
 Atributul id inlocuieste atributul name
 XHTML DTD defineste elemente obligatorii
PCW - C3.Recapitulare
Structura unui document XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Titlul paginii</title>
</head>
<body>
</body>
</html>
XHTML DTD (Document Type Definition)
obligatorie (prima linie dintr-un document XHTML)
nu este element XHTML
descrie sintaxa permisa pentru marcajele XHTML (Strict, Transitional, Frameset)
PCW - C3.Recapitulare
Validare pagini XHTML
 trebuie adaugata
definitia DTD ca prima
linie a documentului
 W3C XHTML Validator,
Tidy
PCW - C3.Recapitulare
Elemente XHTML/HTML5
 http://dev.w3.org/html5/spec/Overview.html
 http://www.w3schools.com/html5/html5_reference.
asp
 http://diveintohtml5.org/
 http://html5demos.com/
Nota: HTML 5 nu este inca o recomandare W3C!
PCW - C3.Recapitulare
DOM/HTML
PCW - C3.Recapitulare
Document Object Model (DOM)
 o reprezentare a documentelor
(X)HTML/XML sub forma unui set
de obiecte
 cross-platform
 language independent
 permite accesarea si modificarea
dinamica a continutului,
structurii si stilului unui
document
PCW - C3.Recapitulare
Document Object Model (DOM)

Standardizare (W3C) – 3 parti:







Core DOM – model standard pt. orice document structurat
XML DOM – model standard pt. documente XML
HTML DOM - model standard pt. documente HTML
DOM Level 1 (1998)

core elements




getElementById
event model
suport pt. spatii de nume XML
suport pt. CSS



suport pt. Xpath
tratare evenimente tastatura
interfata pt. serializarea documentelor in format XML
DOM Level 2 (2000)
DOM Level 3 (2004)
DOM Level 4 (2012 – Draft v6)
PCW - C3.Recapitulare
DOM/HTML
PCW - C3.Recapitulare
Obiecte DOM globale
 window : fereastra browser-ului
 navigator : info despre browser-ul
folosit
 screen : info despre zona de pe ecran
ocupata de browser
 history : lista a paginilor vizitate de
utilizator
 document : pagina HTML curenta
PCW - C3.Recapitulare
Tratarea evenimentelor
<h2 onclick="myFunction();">Click me!</h2>
 elementele HTML au atribute speciale
denumite evenimente
 functiile Javascript pot fi utilizate pentru
tratarea evenimentelor
 functia se va executa la interactiunea cu
elementul respectiv
 attribute HTML de tip eveniment :
onabort, onblur, onchange, onclick, ondblclick,
onerror, onfocus, onkeydown, onkeypress, onkeyup,
onload
PCW - C3.Recapitulare
document object si getElementById
<h2 onclick="makeRed();">Sell</h2>
<p id="announce">Get it while it's hot!</p>
function makeRed() {
var para = document.getElementById("announce");
para.style.color = "red";
}


metoda getElementById a obiectului document returneaza
un obiect reprezentand un element HTML cu atributul id
furnizat (null daca nu este gasit)
obiectele DOM pentru toate elementele HTML contin
urmatoarele proprietati:
className, id, style, title
PCW - C3.Recapitulare
DOM/HTML
 Proprietati
<html>
 x.innerHTML
- the text value of x
<body>
 x.nodeName - the name of x
 x.nodeValue
- the value ofWorld!</p>
x
<p id="intro">Hello
 x.parentNode - the parent node of x
 x.childNodes
- the child nodes of x
<script type="text/javascript">
document.getElementById("intro").childNodes[0].nodeValue;
 x.attributes
- the attributes nodes of x
txt=document.getElementById("intro").innerHTML;
document.write("<p>The text from the intro
 Metode
paragraph: " + txt + "</p>");
 x.getElementById(id)
- get the element with a specified id
</script>
 x.getElementsByTagName(name) - get all elements with a
specified
tag name
</body>
 x.appendChild(node)
- insert a child node to x
</html>
 x.removeChild(node) - remove a child node from x
PCW - C3.Recapitulare