ppt - Universitatea Tehnică Gheorghe Asachi
Download
Report
Transcript ppt - Universitatea Tehnică Gheorghe Asachi
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
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