2013 - 2014
Programarea Clientului Web
s.l. dr. ing. Simona Caraiman
mailto: sarustei@cs.tuiasi.ro
Universitatea Tehnica “Gheorghe Asachi” din Iasi
Facultatea de Automatica si Calculatoare
ORGANIZARE
http://users.cs.tuiasi.ro/~sarustei/PCW/
- cursuri, laboratoare, alte resurse …
PCW - C1.Introducere
ORGANIZARE
Structura disciplinei
PCW – curs (2h) + lab (1h)
– Examen – 4k
PCW – proiect (1h) – Colocviu – 1k
PCW - C1.Introducere
ORGANIZARE
Titulari
Curs:
s.l. dr. ing. Simona Caraiman
Aplicatii:
ing. Tiberiu Dumitriu
PCW - C1.Introducere
ORGANIZARE
Evaluare
PCW
 examen – 50 %
 test curs – 25 %
 laborator – 25 %
(nota min. 5)
(nota min. 5)
PCW – proiect
 colocviu – 70 %
(nota min. 5)
 activitate proiect – 30 % (nota min. 5)
PCW - C1.Introducere
ORGANIZARE
Calendar

PCW Curs



S8 (20.11.2013) – test grila!!
S14 – colocviu
PCW Proiect
- alegere teme proiect: S3
- predare proiect: L13-L14
PCW - C1.Introducere
ORGANIZARE
Bonusuri
1. Prezentare tema casa la curs
2. Participare ACTIVA la curs
PCW - C1.Introducere
Programarea clientului Web
PCW - C1.Introducere
Programarea clientului Web
 World Wide WEB



Internet vs. Web
definitie, caracterizare
arhitectura:


 CLIENT
adresarea resurselor
protocoale



aplicatii client-server
tipuri de aplicatii client
client Web


context: Web 2.0
Rich Internet Applications (RIA)
 Programarea aplicatiilor client Web
PCW - C1.Introducere
World Wide Web
“Panza de paianjen mondiala”
Sistem global de distributie a informatiilor hipermedia*
Serviciu Internet, deci
*hipermedia = multimedia + hiperlegaturi
PCW - C1.Introducere
Web ≠ Internet
Internet vs WWW
Internet – servicii:
-
World Wide Web
-
Communication
-
Data transfer
-
e-mail
VoIP, Mobile VoIP
IPTV
Internet fax
Instant messaging
file sharing, file transfer (FTP)
streaming media
PCW - C1.Introducere
World Wide Web
 Bazat pe modelul client-server si pe hipertext
 Ideea: 1989 - Sir Tim Berners-Lee (CERN)
http://www.w3.org/History/1989/proposal.html
 Reglementari:
 Consortiul Web www.w3.org – HTML, XHTML, CSS,
DOM
 Internet Engineering Task Force (IETF) – URI, HTTP
 ECMA International – ECMAScript (JavaScript)
PCW - C1.Introducere
WWW – arhitectura*
 identificarea resurselor prin adresa (URI –
Uniform Resource Identifier)
 protocol de acces la continutul resurselor: HTTP HiperText Transfer Protocol
 resursele (documente sau pagini Web) contin
marcaje (adnotari)
 marcajele contin la randul lor URI-uri =>
hipertext/hipermedia
*http://www.w3.org/TR/webarch/
PCW - C1.Introducere
CLIENT
Arhitectura client-server
browser web
client e-mail
client chat online
robot web
…
server web
server ftp
server aplicatii
server baze de date
server de mail
server de fisiere
print server
…
PCW - C1.Introducere
Aplicatii client

fat/rich/thick client

procesarea are loc local
necesita, totusi, conexiuni periodice la server
av: servere mai putin performante (ieftine), lucru offline, performante
multimedia mai bune, flexibilitate.
ex: video gaming



procesarea are loc pe server
av:costuri reduse, utilizare usoara, securitate mai buna
ex: remote desktop apps



procesare locala, stocare date pe server
suport multimedia, performante mari
flexibilitate, utilizare usoara





thin client
hybrid client
PCW - C1.Introducere
Client Web
http://public.web.cern.ch/public/en/About/WebWork-en.html
PCW - C1.Introducere
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 - C1.Introducere
Programarea clientului web
CONTEXT:
WEB 2.0*
WEB-ul prezent = WEB Social
WEB Semantic
*http://conferences.oreillynet.com/web2con/,
PCW - C1.Introducere
Tim O’Reilly, “What Is Web 2.0”, O’Reilly Media, (2005)
Web 1.0 (primii ani ai Web-ului)
Scopuri principale:
 independenta de dispozitive
 independenta software
 scalabilitate
 caracter multimedia al continuturilor siturilor Web
Caracteristici:
 Web = spatiu de aprovizionare cu date
 utilizatorul = consumator pasiv de continut multimedia
 curentul “e-”: e-bussiness, e-learning, e-government, etc.
 interactiunea cu vizitatorul, captarea opiniilor: e-mail, guestbooks,
forum-uri etc
 cautarea de documente: bazata pe cuvinte cheie sau cataloage de
termeni (taxonomii sau directories)
 redarea continutului – dependenta de browser, nealiniata standardelor
=> “razboiul” navigatoarelor Web
PCW - C1.Introducere
WEB 2.0 - Caracteristici
 SOA (Service Oriented Architecture)
 participare nu doar publicarea datelor

colaborare, comunitati, conectivitate – read/write Web
 adnotare, blogging, mediatizare continut Web, partajare,
mashups, spatii virtuale 3D (SecondLife)





descentralizare radicala
independenta de platforma
ubicuitate
incredere radicala
interactiunea bogata cu utilizatorul (RIA)
PCW - C1.Introducere
WEB 2.0 - Caracteristici
SOA (Service Oriented Architecture)
 servicii – nu pachete software
 substituirea aplicatiilor masive (“mamut”) cu cele
constituite din servicii specifice, disponibile pe Web, usor
de inlocuit
suita Office → Google Docs
 API‐uri gratuite pentru acces la servicii Web publice
PCW - C1.Introducere
WEB 2.0 - Caracteristici
Participare nu doar publicarea datelor (read/write
Web)
Adnotari (tag-uri) definite de utilizator
 clasificari ad-hoc realizate de oameni
 partajate in cadrul unei comunitati
 Tag (termen de continut)
 data/metadata simpla asociata extern unei resurse
 util la cautare, sortare, agregare, identificare etc.
 Exemple:
 del.icio.us, CiteULike, Flickr, Panoramio, Steve.museum
PCW - C1.Introducere
WEB 2.0 - Caracteristici
Participare nu doar publicarea datelor (read/write
Web)
Fenomenul blogging → blogosfera





Platforme: Blogger, MovableType, WordPress etc.
Tehnologia RSS/Atom pentru mediatizarea continutului
Relatii intre blog‐uri via permalinks
Suport pentru tagging & comentarii
Microblogging – e.g., Twitter
PCW - C1.Introducere
WEB 2.0 - Caracteristici
Participare nu doar publicarea datelor (read/write
Web)
Social network in stilul peer-to-peer (P2P)
 Generatia I:
 LinkedIn (afaceri), Friendster, Hi5 (rel. sociale),…
 Generatia II – partajarea unui “obiect” social:
 Flickr (foto), YouTube (video), Newsvine (stiri), H20
(idei), BookMooch (carti vechi), PatientsLikeMe
(afectiuni) etc.
PCW - C1.Introducere
WEB 2.0 - Caracteristici
Participare nu doar publicarea datelor (read/write
Web)
Fenomenul remixarii – e.g., mashup
 Utilizatorii pot adauga valoare resurselor Web
 Combinarea – la nivel de client și/sau server a
conținutului ce provine din surse (situri) multiple,
oferind o funcționalitate/experiență nouă
 SaaS (Software as a Service)
 EMML (Enterprise Mashup Markup Language)
 Yahoo! Pipes
PCW - C1.Introducere
WEB 2.0 - Caracteristici
Descentralizare radicala
Fenomenul BitTorrent
 un serviciu devine automat mai bun cu cat mai multi
oameni il utilizeaza → fenomenul long tail
PCW - C1.Introducere
WEB 2.0 - Caracteristici
Ubicuitate - software-ul poate fi rulat oriunde
 standarde Web, formate de prezentare a continutului
(XHTML, SVG, X3D…)
 datele pot fi transformate si refolosite dupa necesitati,
independent de platforma (s.o., lbj. programare, protocol,
etc.)
PCW - C1.Introducere
WEB 2.0 - Caracteristici
Incredere radicala

Fenomenul wiki



management colaborativ al continutului - Wikipedia
continutul generat de comunitati de utilizatori are credibilitate mai mare
Autentificare descentralizata de tip SSO (Single Sign On)





via OpenID, CardSpace
OpenID permite unui utilizator sa demonstreze ca detine un URL specific
menit a-l reprezenta online
http://openid.net , www.openidenabled.com
OpenID functioneaza pe baza unui identity provider ales de utilizator
Maniera de identificare a utilizatorului poate fi oricare (uzual, nume de cont
+ parola)
PCW - C1.Introducere
WEB 2.0 - Caracteristici
Interactiunea bogata cu utilizatorul



interactivitate Web similara interactiunii conventionale (la nivel de
desktop) cu utilizatorul
RIA – Rich Internet Applications

interactiune si feedback in timp real





(X)HTML, HTML dinamic, Flash
applet-uri Java, aplicatii Java Web Start
componente ActiveX
PDF (Portable Document Format)
limbajele prezentationale – uzual, declarative (SVG – Scalable Vector
Graphics, XForms, XUL - Extensible User-Interface Language, XAML Extensible Application Mark-up Language), MXML – Flex & Air, Flash Lite 3,
JavaFX, Silverlight
suita de technologii AJAX (Asynchronous Javascript and XML)
Adobe Flash / JavaFX / Microsoft Silverlight vs. HTML5/JavaScript
Solutii:


PCW - C1.Introducere
WEB 2.0 by example*
Web 1.0
DoubleClick
Ofoto
Akamai
mp3.com
Britannica online
personal websites
domain name speculation
page views
screen scraping
content managing systems
directories (taxonomy)
stickiness
…
Web 2.0
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
-->
*http://oreilly.com/web2/archive/what-is-web-20.html
PCW - C1.Introducere
Google AdSense
Flickr
bitTorrent
Napster
Wikipedia
blogging
search engine optimization
cost per click
Web services
wikis
tagging (“folksonomy”)
syndication
…
WEB Semantic
 Web of data
 “… that can be processed directly and indirectly by machines” (T.
Berners-Lee)
 componenta a Web 3.0
 sisteme de recomandare, mediatizare, management de
cunostinte
 formate comune pt. integrarea si combinarea datelor
provenind din surse diverse
 RDF - Resource Description Framework
 OWL - Web Ontology Language
 XML - Extensible Markup Language
PCW - C1.Introducere
WEB Semantic
 Exemplu – DBpedia
 publicarea datelor structurate extrase din
Wikipedia
 complex queries (Faceted Wikipedia Search):
 Rivers that flow into the Rhine and are longer than
50 kilometers
 French scientists who were born in the 19th century
PCW - C1.Introducere
Aplicatii Web
PCW - C1.Introducere
PCW - C1.Introducere
Proiect PCW
 Dezvoltati o aplicatie
 care se incadreaza in contextul Web-ului actual
 este/extinde un client web
 utilizeaza concepte/tehnologii actuale
PCW - C1.Introducere
Notiuni necesare pt. PCW

Adresare resurse:

Accesare resurse:

Prezentare resurse:

URI, URL, URN, IRI

HTTP

limbaje de marcare ((X)HTML, XML, DOM, SAX, CSS, XSL, RSS, Atom,
VRML, X3D…)
scripting (JavaScript, JQuery, Prototype, Script.aculo.us, …)
AJAX









programare browser Web
mashups
dezvoltare RIA
Web semantic
tehnologii Web 3D
Web mobil
securitate Web
PCW - C1.Introducere
Recapitulare

Adresare resurse:

Accesare resurse:

Prezentare resurse:

URI, URL, URN, IRI

HTTP

limbaje de marcare ((X)HTML, XML, DOM, SAX, CSS, XSL, RSS, Atom,
VRML, X3D…)
scripting (JavaScript, JQuery, Prototype, Script.aculo.us, …)
AJAX









programare browser Web
mashups
dezvoltare RIA
Web semantic
tehnologii Web 3D
Web mobile
securitate Web
PCW - C1.Introducere