Ce înseamnă a fi dezvoltator Web (varianta 2014)

Dr. Sabin-Corneliu Buraga – www.purl.org/net/busaco
Dr. Sabin Buraga
Facultatea de Informatică, Universitatea „A. I. Cuza” – Iași, România
www.purl.org/net/busaco  @busaco4web


Ce este Web-ul?


World Wide Web
“a common information space
in which we communicate by sharing information”
Sir Tim Berners-Lee – a creat Web-ul în decembrie 1989


World Wide Web
scopuri principale:
independența de dispozitiv
independența de software
scalabilitatea
ubicuitatea


World Wide Web
bazat pe standarde deschise stipulate de Consorțiul Web
www.w3.org


World Wide Web
un serviciu Internet
alături de poștă electronică, transfer de fișiere etc.
WWW  Internet

client
(realizează cereri)

server
(oferă răspunsuri)
client

client
protocol
(reguli de transfer de date)
server
(oferă răspunsuri)

cerere
client Web server Web
răspuns
Web-ul e bazat pe modelul client/server al Internet-ului

web
primul client Web

web primul server Web


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


pentru a reprezenta aceste conținuturi,
se adoptă diverse formate de date
cel mai popular: HTML (HyperText Markup Language)

conținut ≅ <marcajeHTML versiune=5/> +
{ foi de stiluri: CSS3 } la modă


aceste conținuturi sunt stocate
în documente (pagini) Web
mai general, resurse Web

identificator unic
resursele vor fi identificate printr-o adresă Web
URL (Uniform Resource Locator)
http://profs.info.uaic.ro/~busaco/teach/

paginile Web – la rândul lor – includ referințe
către alte resurse de interes via adrese (URL-uri)
hipertext (hipermedia)

Web-ul reprezintă un graf hipermedia
explorat pe baza interacțiunii cu utilizatorul via URL-uri

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

transferul datelor între client și server e stabilit
de un protocol de comunicație
pentru Web: HTTP (HyperText Transfer Protocol)

codificarea
datelor Unicode
nume de domenii
DNS
protocoalele
Internet
TCP/IP
adrese Web
URI = URL + URN
protocoale Web
HTTP, HTTPS, SPDY

Internet
(Web)
Client
interfață cu
utilizatorul

Internet
(Web)
Client
interfață cu
utilizatorul
Server
sit/aplicație Web

Internet
(Web)
Client
interfață cu
utilizatorul
Server
sit/aplicație Web
sit Web
sistem găzduind o serie de pagini (resurse) Web înrudite
ale unei organizații, companii sau persoane

Internet
(Web)
Client
interfață cu
utilizatorul
Server
sit/aplicație Web
aplicație Web
colecție interconectată de pagini Web
cu conținut generat dinamic, oferind o funcționalitate specifică

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

Internet
(Web)
Client
interfață cu
utilizatorul
Server
sit/aplicație Web
interacțiune Web
uzual, sit Web = aplicație Web

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

Internet
(Web)
Client
interfață cu
utilizatorul
Server
sit/aplicație Web
Date
stocate
persistent

Internet
(Web)
Client
interfață cu
utilizatorul
Server
sit/aplicație Web
Date
stocate
persistent
accesul la date poate fi realizat via servicii Web
software oferind o funcționalitate specifică
în urma căreia se obțin date de interes


Care sunt tipurile de aplicații Web?

Centrate pe documente
Interactive
Tranzacționale
Colaborative
Orientate spre portaluri
De tip ubicuu
Web social
Web semantic
evoluția în timp
a complexității

Centrate pe documente
conținut/pagini static(e):
situri de companii, personale

Interactive
expoziții virtuale
situri de știri
sisteme de facilitare a călătoriilor
chioșcuri informative
…

Tranzacționale
comerț electronic
soluții B2B (business-to-business)
fluxuri de activități

Colaborative
tele-conferințe Web
aplicații Web de tip wiki
servicii e-learning
aplicații Web peer-to-peer

Orientate spre portaluri
localizare unitară a informațiilor
tehnice, de afaceri, guvernamentale,…
specie: Web-ul cetățenesc

De tip ubicuu
servicii mobile bazate pe locația utilizatorului,
disponibile pe mai multe plaforme:
desktop, dispozitive mobile, tabletă, ceas,…
Web-ul mobil

proiecte dezvoltate de studenții Facultății de Informatică
http://profs.info.uaic.ro/~stefan.negru/studentprojects/

Web social
mediatizare
filtrare colaborativă pe baza tagging-ului
spații de lucru virtuale
divertisment social
social (game) computing

cele mai populare tag-uri folosite
de utilizatorii aplicației Instagram
(octombrie 2014)
#iphonesia #photooftheday #jj
#iphoneography #instagood
#instagram #instagramhub
#iphoneonly #igers #instamood
#sky #gang_family
#bestoftheday #webstagram #ig
#iphone #all_shots

Web semantic (Web-ul datelor interconectate)
modelarea cunoștințelor
pentru a fi „înțelese” de calculatoare
dateinformațiicunoștințe

open participation
open data
open software
open app development
open web
open cloud
open (computing) hardware








Care e arhitectura generică
a unei aplicații Web?

uzual, o aplicație Web implică trei strate (3-tier)
Internet
(Web)
client server de aplicații stocare
(interface) (application) (persistence)

Fruit / Presentation
Cream / Markup
Custard / Page Logic
Jelly / Business Logic
Sponge / Database
C. Henderson, “Scalable Web Architectures”, 2007

Aplicație Web = Interfață + Program + Conținut (Date)
Internet
(Web)

mitul 1: cea mai importantă este interfața

Internet
(Web)
standarde deschise: HTML, CSS, Ajax, SVG, WebGL,…

mitul 2: cel mai important este programul

Internet
(Web)
server: C#, Go, Java, JavaScript, PHP, Ruby, Scala și multe altele
client: JavaScript
servere de aplicații Web, framework-uri, biblioteci, componente,…

mitul 3: cele mai importante sunt datele

Internet
(Web)
utilizarea diverselor modele:
relațional – interogare via SQL
bazat pe grafuri (NoSQL)
cheie-valoare – formatul JSON
arborescent – XML

Internet
(Web)
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!


Câteva exemplificări de aplicații Web?

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

studiu de caz: Flickr

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

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

arhitectura inițială – conform (Cal Henderson, 2007)

interfețe de programare (API-uri)
oferite de Flickr
facilitează accesul la serviciile Web
în cadrul aplicațiilor
eventual, rulând pe alte platforme
www.flickr.com/services/api/

studiu de caz: Lanyrd

Lanyrd
scop: descoperire & management de evenimente
(de exemplu, conferințe cu caracter tehnologic)
agregare de comunități – evenimentul ca obiect social
suport pentru vorbitori & audiență, slide-uri,…
+ calendare și locații geografice

Creat aproape complet în Python (folosind Django)
și întreținut de 6 persoane
2½ backend developers
1¾ frontend developers
½ mobile developers
1½ designers
¾ system administrators
¾ business operations
http://www.infoq.com/presentations/lanyrd-architecture


Aspecte importante vizând
dezvoltarea de aplicații Web?


aplicații Web  sisteme software complexe,
în evoluție permanentă

mijloace multiple de interacțiune Web cu utilizatorul
mobil laptop PC tabletă (smart) TV ecran urban

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ă

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)

neadaptarea la cerințele economice (de tip business)
development vs. marketing vs. management

scopuri
interacțiune
facilități
indexare
psihologie
controale
tehnologii
structurare
comportament
limbi naturale
algoritmi
meta-date
    
adaptare după Crumlish & Malone, 2009
instrumente
metodologii
stimuli
utilizatori interfață software conținut creatori

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

Jesse Garrett, The Elements of User Experience (2nd Edition), New Riders, 2011

programare (server + client)
creare/adaptare
de conținut
testare
documen-tare
arhitectura info
cerințe + navigare
public beta lansare
mentenanță
http://sixrevisions.com/web-development/agile/


Vreau să dezvolt un proiect Web…

runtime environment
dezvoltare
code repositories
instrumente de
dezvoltare (IDE)
rulare
A. Iqbal, M. Haunsenblas, S. Decker (2012)
procesul actual de dezvoltare și exploatare
a aplicațiilor Web

Google App Engine, Heroku,
Jelastic, Windows Azure
runtime environment
dezvoltare
code repositories
instrumente de
dezvoltare (IDE)
rulare
A. Iqbal, M. Haunsenblas, S. Decker (2012)
Web: Cloud9, Koding, eXo Cloud, Ideone
desktop: Eclipse, Visual Studio
BitBucket
GitHub, Unfuddle

Parametrii unui proiect Web
obiectiv principal
durată
cost
abordare
tehnologii
procese
rezultat
resurse umane
profilul echipei

✓
obiectiv principal
crearea unui produs software utilizabil
în cât mai scurt timp posibil

⌚
durată
aproximativ 2—6 luni

♨
cost
de ordinul miilor de Euro

✒
abordare
prototipizare – wireframe, mockup,…
metode agile
asamblare de componente reutilizabile

♻
tehnologii
componente (servicii Web, API-uri publice,
framework-uri, biblioteci, plugin-uri, extensii etc.)
proiectare/programare „vizuală”
multimedia
…și altele

procese
uzual, dezvoltarea aplicațiilor Web se realizează iterativ
„nu te aștepta să-ți iasă din prima…”
understand
study
evaluate
build design

⎚
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

♚♞♟
resurse umane
uzual, 3—9 persoane
“For the first version of your app, start with only 3 people.”
Getting Real – https://gettingreal.37signals.com/


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


Care-i echipa de dezvoltare
a unei aplicații Web de anvergură?

management
site editor
project manager

dezvoltare (arhitectură)
system architect
data (content) architect
component architect
security architect

interacțiune cu utilizatorul
creative lead
Web interface designer(s)
graphic artist(s)
HCI engineer

programare
server-side programmers
client-side programmers
data/component integration programmers

testare
testing lead
client-side tester(s)
server-side tester(s)
component tester(s)
integration tester(s)

operații tehnice
Webmaster
hardware & network technicians
network administrator(s)
database administrator(s)
backup operator
uptime monitor
security monitor(s)

marketing
content producer(s)
copywriter(s)
content editor(s)
branding & advertising expert(s)
direct e-marketer
public relations personnel

echipa proiectului Web
management
Web Project
Manager
funcționalitate
Software
Engineer(s)
Multimedia
Designer(s)
conținut (date)
Domain
Expert
Business
Expert

Web Designer
aplicații grafice raster/vectoriale, HTML (de dorit, HTML5), CSS,
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 (+biblioteci, precum jQuery),
familiar cu paradigme de interacțiune naturală
(tactilă, bazată pe gesturi, realitate virtuală/îmbogățită),…

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,…

Web Technician
asistent (ajutor) al webmaster-ului,
designerului sau dezvoltatorului Web
poate efectua operații tehnice:
instalare, configurare, monitorizare,…

Web Maintainer
actualizează conținutul
uzual, via o interfață WYSIWYG
(de exemplu, recurgând la un sistem
de management al conținutului – CMS)

☺
Bun… Și eu ce fac?

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

Mult succes!
imagini de epocă furnizate de vintag.es

Ce înseamnă a fi dezvoltator Web (varianta 2014)

More Related Content

What's hot (20)

Similar to Ce înseamnă a fi dezvoltator Web (varianta 2014) (20)

More from Sabin Buraga (20)

Ce înseamnă a fi dezvoltator Web (varianta 2014)