Dezvoltator Web?! (varianta 2015)
-
Upload
sabin-buraga -
Category
Technology
-
view
694 -
download
1
Transcript of Dezvoltator Web?! (varianta 2015)
![Page 1: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/1.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
Dr. Sabin BuragaFacultatea de Informatică, Universitatea „A. I. Cuza” – Iași, România
www.purl.org/net/busaco
![Page 2: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/2.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
Ce este Web-ul?
![Page 3: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/3.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
coWorld Wide Web
“a common information space
in which we communicate by sharing information”
Sir Tim Berners-Lee – a creat Web-ul în decembrie 1989
![Page 4: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/4.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
coWorld Wide Web
scopuri principale:
independența de dispozitiv
independența de software
scalabilitatea
ubicuitatea
![Page 5: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/5.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
coWorld Wide Web
bazat pe standarde deschise stipulate de Consorțiul Web
www.w3.org
![Page 6: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/6.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
coWorld Wide Web
un serviciu Internet
alături de poștă electronică, transfer de fișiere etc.
WWW Internet
![Page 7: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/7.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
Web-ul e bazat pe modelul client/server al Internet-ului
server Webclient Web
cerere
răspuns
![Page 8: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/8.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
clientul Web (browser, player multimedia,
aplicație desktop/mobilă, robot al unui motor de căutare,…)
procesează conținuturi – adică date – primite de la server
![Page 9: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/9.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
pentru a reprezenta aceste conținuturi,
se adoptă diverse formate de date
cel mai popular: HTML (HyperText Markup Language)
![Page 10: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/10.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
conținut ≅ <marcajeHTML versiune=5/> +
{ foi de stiluri: CSS3 } la modă
![Page 11: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/11.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
aceste conținuturi sunt stocate
în documente (pagini) Web
mai general, resurse Web
![Page 12: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/12.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
resursele vor fi identificate printr-o adresă Web
URL (Uniform Resource Locator)
exemplu: http://www.slideshare.com/busaco/presentations/
identificator unic
![Page 13: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/13.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
paginile Web – la rândul lor – includ referințe
către alte resurse de interes via adrese (URL-uri)
hipertext (hipermedia)
![Page 14: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/14.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
Web-ul reprezintă un graf hipermedia
explorat pe baza interacțiunii cu utilizatorul via URL-uri
![Page 15: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/15.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
la nivel de server Web, resursele (conținuturile)
solicitate de client – via un URL – sunt
fie stocate static (i.e. create manual), fie generate dinamic
– pe baza unor programe implementând diverși algoritmi
![Page 16: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/16.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
transferul datelor între client și server e stabilit
de un protocol de comunicație
pentru Web: HTTP (HyperText Transfer Protocol)
![Page 17: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/17.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
codificarea
datelor Unicode
nume de domenii
DNS
protocoalele
Internet
TCP/IP
adrese Web
URI = URL + URN
protocoale Web
HTTP, HTTPS,…
![Page 18: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/18.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
Internet
(Web)
Client
interfață cu
utilizatorul
![Page 19: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/19.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
Internet
(Web)
Client
interfață cu
utilizatorul
Server
sit/aplicație Web
![Page 20: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/20.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
Internet
(Web)
Client
interfață cu
utilizatorul
Server
sit/aplicație Web
sit Websistem găzduind o serie de pagini (resurse) Web înrudite
ale unei organizații, companii sau persoane
![Page 21: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/21.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
Internet
(Web)
Client
interfață cu
utilizatorul
Server
sit/aplicație Web
aplicație Webcolecție interconectată de pagini Web
cu conținut generat dinamic, oferind o funcționalitate specifică
![Page 22: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/22.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
Internet
(Web)
Client
interfață cu
utilizatorul
Server
sit/aplicație Web
interacțiune Web„dialogul” dintre utilizator(i) și aplicație are loc via o interfață Web
![Page 23: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/23.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
Internet
(Web)
Client
interfață cu
utilizatorul
Server
sit/aplicație Web
interacțiune Web
uzual, sit Web = aplicație Web
![Page 24: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/24.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
exemple de aplicații Web:
Amazon, Coursera, Facebook, Dropbox, Flickr, GitHub, info.uaic.ro,
Instagram, Medium, PHPMyAdmin, Reddit, Quora, SlideShare,
TED.com, Tumblr, Twitter, Vimeo, webmin, Wikipedia, WordPress
…și multe, multe, multe altele
![Page 25: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/25.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
Internet
(Web)
Client
interfață cu
utilizatorul
Server
sit/aplicație Web
Date
stocate
persistent
![Page 26: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/26.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
Internet
(Web)
Client
interfață cu
utilizatorul
Server
sit/aplicație Web
Date
stocate
persistent
accesul la date poate fi realizat via servicii Websoftware oferind o funcționalitate specifică
în urma căreia se obțin date de interes
uzual, apelând la un API (Application Programming Interface)
![Page 27: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/27.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
💡
Care e arhitectura generică
a unei aplicații Web?
![Page 28: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/28.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
Internet
(Web)
uzual, o aplicație Web implică trei strate (3-tier)
client server de aplicații stocare
(interface) (application) (persistence)
![Page 29: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/29.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
Sponge / Database
Jelly / Business Logic
Custard / Page Logic
Cream / Markup
Fruit / Presentation
C. Henderson, “Scalable Web Architectures”, 2007
![Page 30: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/30.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
Sponge / Database
Jelly / Business Logic
Custard / Page Logic
Cream / Markup
Fruit / Presentation
C. Henderson, “Scalable Web Architectures”, 2007
![Page 31: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/31.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
mitul 1: cea mai importantă este interfața
![Page 32: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/32.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
Internet
(Web)
Aplicație Web = Interfață + Program + Conținut (Date)
standarde deschise:
HTML, CSS, Ajax, SVG, WebGL,…
![Page 33: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/33.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
mitul 2: cel mai important este programul
![Page 34: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/34.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
Internet
(Web)
Aplicație Web = Interfață + Program + Conținut (Date)
server: C#, Go, Java, JavaScript, PHP, Python, Ruby, Scala etc. etc.
client: JavaScript
servere de aplicații Web, framework-uri, biblioteci, componente,…
![Page 35: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/35.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
mitul 3: cele mai importante sunt datele (“content is king”)
![Page 36: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/36.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
Internet
(Web)
Aplicație Web = Interfață + Program + Conținut (Date)
utilizarea diverselor modele:
relațional – interogare via SQL
bazat pe grafuri (NoSQL)
cheie-valoare – formatul JSON
arborescent – XML
![Page 37: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/37.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
Aplicație Web = Interfață + Program + Conținut (Date)
mitul 1: cea mai importantă este interfața
mitul 2: cel mai important este programul
mitul 3: cele mai importante sunt datele
fapt: sunt importante toate!
![Page 38: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/38.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
View(prezentare + interacțiune)
Model(structura datelor)
Controller(procesare)
modelul de structurare a datelor este separat
de maniera de procesare (controlul aplicației) și
de modul de prezentare a acestora (interfața Web)
![Page 39: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/39.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
Viewla nivel client(i) – e.g., Web
Modelstocare persistentă
Controlleraplicație (server și/sau client)
HTML, CSS, SVG, MathML, WebGL,…
SQL, JSON, XML (XQuery), RDF (SPARQL)
💡servere de aplicații, framework-uri etc.
arhitectura generică a unei aplicații Web
va consta dintr-un set de resurse referitoare la
controller, model și view
![Page 40: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/40.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
browserprezen-
tare
proce-
sare
abstrac-
tizare
date
pagini <Web/>
HTML, CSS,…
server „gras”
(fat)
client „prostuț”
(dumb)
arhitectura aplicațiilor Web: abordarea MVC tradițională
www.leaseweblabs.com/2013/10/api-first-architecture-fat-vs-thin-server-debate/
frontend backend
![Page 41: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/41.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
browser
modern
prezen-
tare
proce-
sare
abstrac-
tizare
date
recurgere la API
JSON, XML, CSV,…
server „slab”
(thin)
client „puternic”
(HTML5)
aplicație JavaScript
(eventual, via app store)
arhitectura aplicațiilor Web: abordarea JavaScript
www.leaseweblabs.com/2013/10/api-first-architecture-fat-vs-thin-server-debate/
![Page 42: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/42.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
sistem de
operare
prezen-
tare
proce-
sare
abstrac-
tizare
date
recurgere la API
JSON, XML, CSV,…
server „slab”
(thin)
client „isteț”
(smart device)
aplicație nativă
Java, Obj-C, Swift,…
(uzual, via app store)
arhitectura aplicațiilor Web: aplicații mobile
www.leaseweblabs.com/2013/10/api-first-architecture-fat-vs-thin-server-debate/
![Page 43: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/43.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
browserprezen-
tare
proce-
sare
abstrac-
tizare
date
API
JSON et al.
server „slab”
(thin)
client „puternic”
și/sau „isteț”
arhitectura aplicațiilor Web: abordarea hibridă
server de
prezentare
pagini
HTML
www.leaseweblabs.com/2013/10/api-first-architecture-fat-vs-thin-server-debate/
![Page 44: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/44.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
💡Câteva exemplificări de aplicații Web?
![Page 45: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/45.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
client(i)
firewall
proxy
middleware
server(e) Web
server(e) de aplicații
framework-uri, biblioteci, alte componente
server(e) de stocare persistentă – e.g., baze de date
server(e) de conținut multimedia
server(e) de management al conținutului (CMS)
aplicații/sisteme tradiționale
![Page 46: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/46.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
studiu de caz: Flickr
![Page 47: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/47.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
Flickr
scop: partajare a conținutului grafic (fotografii)
aplicație reprezentativă a Web-ului social
agregare de comunități – imaginea ca obiect social
adnotări via termeni de conținut (tagging) + comentarii
![Page 48: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/48.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
PHP (procesare – application logic, acces la API,
prezentare de conținut via Smarty, modul de e-mail)
Perl (validarea datelor)
Java (managementul nodurilor de stocare)
MySQL (stocare de date)
ImageMagick (bibliotecă C de prelucrare de imagini)
Ajax (interacțiune asincronă)
Linux (platformă de rulare)
alte detalii la http://highscalability.com/flickr-architecture
![Page 49: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/49.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
arhitectura inițială – conform (Cal Henderson, 2007)
![Page 50: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/50.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
studiu de caz: SmartFetcher
![Page 51: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/51.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
SmartFetcher
scop: recomandare în timp-real de știri de interes
(ziare, blog-uri,…), pe baza profilului utilizatorului
și a interacțiunii sale cu sistemul
recurge la tehnici de învățare automată, în funcție și de
sentimentul manifestat față de un articol dat
![Page 52: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/52.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
la nivel de server (backend): Node.js (framework-ul Sails)
API REST – eventual, folosit via WebSocket-uri
pentru comunicarea în timp-real cu clienții
pe partea client (frontend): Angular și Bootstrap
![Page 53: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/53.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
proiect de licență al absolvenților Raluca Jalaboi & Bogdan Spiridon
(Facultatea de Informatică, UAIC Iași, 2015)
![Page 54: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/54.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
💡Aspecte importante vizând
dezvoltarea de aplicații Web?
![Page 55: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/55.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
aplicații Web sisteme software complexe,
în evoluție permanentă
![Page 56: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/56.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
mijloace multiple de interacțiune Web cu utilizatorul
mobil laptop PC tabletă (smart) TV ecran urban
![Page 57: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/57.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
creșterea masei de utilizatori,
având așteptări tot mai mari din partea software-ului
de la conținut (hiper)textual
la aplicații Web sociale + interacțiune naturală
![Page 58: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/58.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
suportul variat privind dezvoltarea de aplicații
(limbaje, API-uri, SDK-uri, biblioteci, framework-uri,...)
oferit de platforma hardware/software
la nivel de server(e) și/sau de client(i)
![Page 59: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/59.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
neadaptarea la cerințele economice (de tip business)
development vs. marketing vs. management
![Page 60: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/60.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
adaptare după Crumlish & Malone, 2009
scopuri
psihologie
comportament
💡
interacțiune
controale
limbi naturale
facilități
tehnologii
algoritmi
indexare
structurare
meta-date
instrumente
metodologii
stimuli
utilizatori interfață software conținut creatori
![Page 61: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/61.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
Etape în dezvoltarea unei aplicații Web
Cerințe – requirements
Analiză și proiectare – software design
Implementare – build
Testare – testing
Exploatare – deployment
Mentenanță – maintenance
Evoluție – evolution
![Page 62: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/62.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
Jesse Garrett, The Elements of User Experience (2nd Edition), New Riders, 2011
aplicație Web (produs software)
funcționalitate
+
informații oferite
![Page 63: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/63.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
programare (server + client)
creare/adaptarede conținuttestare
documen-tare
arhitectura info+ navigarecerințe
public beta lansare
mentenanță
http://sixrevisions.com/web-development/agile/
actualmente, sunt preferate metodologii agile
http://www.infoq.com/process-practices/
![Page 64: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/64.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
Vreau să dezvolt un proiect Web…
![Page 65: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/65.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
code repositoriesinstrumente de
dezvoltare (IDE)
runtime environment
dezvoltare
rulare
A. Iq
bal
, M
. H
aunse
nbla
s, S
. D
ecke
r (2
012
)
procesul actual de dezvoltare și exploatare
a aplicațiilor Web – Development As A Service
![Page 66: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/66.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
code repositoriesinstrumente de
dezvoltare (IDE)
runtime environment
dezvoltare
rulare
A. Iq
bal
, M
. H
aunse
nbla
s, S
. D
ecke
r (2
012
)
Web: Cloud9, Koding, eXo Cloud, Ideone
desktop: Eclipse, Visual Studio
BitBucket
GitHub, Unfuddle
Google App Engine, Heroku,
Jelastic, Windows Azure
![Page 67: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/67.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
Parametrii unui proiect Web
obiectiv principal
durată
cost
abordare
tehnologii
procese
rezultat
resurse umane
profilul echipei
![Page 68: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/68.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
✓obiectiv principal
crearea unui produs software utilizabil
în cât mai scurt timp posibil
![Page 69: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/69.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
⌚durată
aproximativ 2—6 luni
![Page 70: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/70.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
♨cost
de ordinul miilor de Euro
![Page 71: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/71.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
✒abordare
prototipizare – wireframe, mockup,…
metode agile
asamblare de componente reutilizabile
![Page 72: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/72.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co♻tehnologii
componente (servicii Web, API-uri publice,
framework-uri, biblioteci, plugin-uri, extensii etc.)
proiectare/programare „vizuală”
multimedia
…și altele
![Page 73: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/73.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
procese
uzual, dezvoltarea aplicațiilor Web se realizează iterativ
„nu te aștepta să-ți iasă din prima…”
understand
study
designbuild
evaluate
![Page 74: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/74.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co⎚rezultat
reutilizabilitate mare a codului,
recurgerea la componente/limbaje/platforme standard
aplicații implementate uzual conform standardelor
designul vizual este, de cele mai multe ori, unicat
![Page 75: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/75.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
♚♞♟resurse umane
uzual, 3—9 persoane
“For the first version of your app, start with only 3 people.”
Getting Real – https://gettingreal.37signals.com/
![Page 76: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/76.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
profilul echipei
specialiști în interacțiune – uzual: designeri Web
+
dezvoltatori (programatori) Web – la nivel client/server
+
arhitecți de baze de date
+
specialiști în marketing și/sau relații cu publicul
![Page 77: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/77.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
Care-i echipa de dezvoltare
a unei aplicații Web de anvergură?
![Page 78: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/78.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
managementsite editor
project manager
![Page 79: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/79.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
dezvoltare
(arhitectură)
system architect
data (content) architect
component architect
security architect
![Page 80: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/80.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
![Page 81: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/81.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
![Page 82: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/82.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
interacțiune cu utilizatorul
creative lead
Web interface designer(s)
graphic artist(s)
HCI engineer
![Page 83: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/83.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
![Page 84: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/84.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
programare
server-side programmers
client-side programmers
data/component integration programmers
![Page 85: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/85.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
![Page 86: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/86.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
![Page 87: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/87.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
cotestare
testing lead
client-side tester(s)
server-side tester(s)
component tester(s)
integration tester(s)
![Page 88: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/88.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
![Page 89: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/89.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
operații tehnice
Webmaster
hardware/network technicians
network administrator(s)
database administrator(s)
backup operator
uptime monitor
security monitor(s)
![Page 90: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/90.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
marketing
content producer(s)
copywriter(s)
content editor(s)
branding & advertising expert(s)
direct e-marketer
public relations personnel
![Page 91: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/91.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
echipa proiectului Web
management
Web Project Manager
funcționalitate
Software Engineer(s)
Multimedia Designer(s)
conținut (date)
Domain Expert
Business Expert
![Page 92: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/92.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
Web Designer
aplicații grafice raster/vectoriale, HTML5, CSS3,
cunoștințe despre compatibilitate cu/între diverse navigatoare Web,
experiență în design vizual + design responsiv,
cunoștințe privind interacțiunea Web – inclusiv la nivel mobil,
JavaScript (+framework-uri/biblioteci aflate „pe val”),
familiar cu paradigme de interacțiune naturală
(tactilă, bazată pe gesturi, realitate virtuală/îmbogățită),…
![Page 93: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/93.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
Web Developer
cel puțin 1 limbaj obiectual – la nivel de server/client,
protocoale și standarde Internet + Web,
cunoștințe privind baze de date (inclusiv NoSQL și/sau XML),
familiaritate cu sisteme CMS/wiki, cunoștințe vizând servicii Web,
familiar cu alte paradigme de programare (e.g., funcțională,
distribuită), securitate & performanță Web,…
![Page 94: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/94.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
![Page 95: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/95.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
Web Technician
asistent (ajutor) al webmaster-ului,
designerului sau dezvoltatorului Web
poate efectua operații tehnice: instalare, configurare, monitorizare,…
![Page 96: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/96.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
Web Maintainer
actualizează conținutul
uzual, via o interfață WYSIWYG
(de exemplu, recurgând la un sistem
de management al conținutului – CMS)
![Page 97: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/97.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
![Page 98: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/98.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
☺Bun… Și eu ce fac?
![Page 99: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/99.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
fii curios & iscoditor
învață(citește + experimentează + cere ajutor + reutilizează)
creează și arată
(design, cod-sursă, prototipuri, exemple demonstrative,…)
acumuleazăexperiență, „aură”, statut social etc.reputație
concurează
(…atât de multe oportunități)
ajută/instruiește pe ceilalți
![Page 100: Dezvoltator Web?! (varianta 2015)](https://reader030.fdocuments.us/reader030/viewer/2022032513/55d0bf89bb61ebbc5c8b4712/html5/thumbnails/100.jpg)
Dr. S
abin
-Cor
nel
iuBura
ga–
ww
w.p
url.o
rg/n
et/b
usa
co
Mult succes la InfoEducație 2015!
imagini medievale furnizate de http://discardingimages.tumblr.com/