Ce înseamnă să fii dezvoltator Web

Ce înseamnă să fii dezvoltator Web

Dr. Sabin Buragawww.purl.org/net/busaco
Dr. Sabin Buraga
Facultatea de Informatică, UAIC Iași
www.purl.org/net/busaco

Ce este Web-ul?


world wide web

Web
WWW

“pânză de păianjen mondială”

world wide web

Serviciu Internet

WWW  Internet

world wide web

cerere
client
Web server
(browser) Web
răspuns

bazat pe modelul client/server al Internet-ului

…și pe hipertext


world wide web

Funcționează conform reglementărilor
Consorțiului Web

MIT, ERCIM, Keio University
Adobe, HP, IBM, Oracle, Microsoft,…

www.w3.org

world wide web

Scopuri principale:

independența de dispozitiv
independența de software
scalabilitatea
multimedia

world wide web

Scopuri principale:

independența de dispozitiv
independența de software
scalabilitatea
multimedia

caracter deschisopen standards

Care-s ingredientele Web-ului?


arhitectura Web-ului

Resursele sunt identificate prin adresa lor

identificator uniform de resurse
URI – Uniform Resource Identifier

http://slideshare.net/busaco/presentations


Accesul la conținutul – reprezentarea –
resurselor Web
se realizează printr-un protocol

HTTP – HyperText Transfer Protocol


adrese Web protocoale Web
URI = URL + URN HTTP, HTTPS, SPDY

codificarea nume de protocoalele
datelor domenii Internet
Unicode DNS TCP/IP

pagini
Web

resursele – documentele – includ <marcaje />

marcajele conțin la rândul lor URI-urihipertext

Ce tipuri de aplicații Web există?


tipuri de aplicații web

Sit Web

sistem găzduind
o serie de pagini (resurse) Web înrudite

ale unei organizații, companii sau persoane


Aplicație Web

colecție interconectată de pagini Web
cu conținut generat dinamic

oferă o funcționalitate specifică


Interacțiune Web

interacțiunea dintre sit/aplicație și utilizatori
are loc via o interfață Web


Interacțiune Web

interacțiunea dintre sit/aplicație și utilizatori
are loc via o interfață Web

uzual, sit Web = aplicație Web


Diverse exemplificări:

Amazon, Coursera, Dropbox, Expedia, Flickr,
info.uaic.ro, PHPMyAdmin, Reddit, Quora,
SlideShare, Twitter, Vimeo, webmin, WordPress

…și multe, multe altele


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

Centrate pe documente – document centric

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

Interactive

expoziții virtuale
situri de știri
sisteme de facilitare a călătoriilor (e-travel)
chioșcuri informative
…

Tranzacționale

online banking
soluții B2B (business-to-business)
fluxuri de activități (workflow-uri)

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

Web-ul mobil

Web social

mediatizare (syndication)
spații de lucru virtuale
filtrare colaborativă
divertisment social

social (game) computing

Web semantic (Web of Data)

modelarea cunoștințelor
pentru a fi “înțelese” de calculatoare

dateinformațiicunoștințe

Care-i arhitectura aplicațiilor Web?


arhitectura unei aplicații web


Aplicație Web = Interfață + Program + Date

mitul 1: cea mai importantă este interfața


mitul 2: cel mai important este programul
mitul 3: cele mai importante sunt datele

HTML, CSS, Ajax, Flash, SVG, WebGL, widget-uri,…



server: C#, Java, JS, PHP, Ruby,…; client: JavaScript



JSON, XML, relaționale (SQL), grafuri (NoSQL),…



fapt: sunt importante toate!


Uzual, implică trei strate (3-tier application)

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


Majoritatea aplicațiilor Web sunt dezvoltate
pe baza MVC (Model-View-Controller)


View Model
(prezentare+interacțiune) (structura datelor)

Controller
(procesare)


View Model
la nivel de client(i) Web stocare persistentă

Controller
aplicație (server și/sau client)


 
HTML, CSS, SVG, WebGL,… SQL, NoSQL, XML, RDF,…

View Model
la nivel client(i) Web stocare persistentă


servere de aplicații, framework-uri

Controller
aplicație (server și/sau client)


Stilul arhitectural MVC poate fi încurajat/impus
de diverse framework-uri Web

exemplificări:
ASP.NET MVC (limbaje .NET precum C#)
Backbone (JavaScript),
CakePHP (PHP)
Play (Java, Scala)
Rails (Ruby)
…

studiu de caz: Flickr


studiu de caz: flickr

Partajare on-line a conținutului grafic (fotografii)

Aplicație reprezentativă a Web-ului social

Agregare de comunități – imaginea ca obiect social

Suport pentru adnotari via termeni de conținut
(tagging) + comentarii


Interacțiune facilă cu utilizatorul
UX (User Experience)

Interacțiune cu alte aplicații via API-uri deschise

Unicode
internationalization (i18n) & localization (l10n)


Internet
(Web)

Servere de
Servere Web
stocare foto

Servere de baze
de date

studiu de caz: flickr – tehnologii

PHP (procesare – application logic, acces la API,
șabloane de afișare via Smarty, modul de e-mail)
Perl (validarea datelor)
Java (managementul nodurilor de stocare)
MySQL (stocare în format InnoDB)
ImageMagick (prelucrare de imagini)
Ajax (interacțiune asincronă)
Linux (platformă de rulare)


Interfețe de
programare (API-uri)
oferite de Flickr

www.flickr.com/services/api/


Datele privitoare la fotografiile stocate de Flickr
pot fi reutilizate și în alte contexte – via API-uri

aplicații Web hibride (mashup-uri)

www.programmableweb.com

Cum dezvoltăm o aplicație Web?


dezvoltarea aplicațiilor Web

Cerințe (requirements)
Analiză & proiectare (software design)
Implementare (build)
Testare (testing)
Exploatare (deployment)
Mentenanță (maintenance)
Evoluție (evolution)

Soluții “în nori” de editare a codului-sursă

design Web & programare la nivel de client
Mozilla Thimble, JS Bin, jsFiddle
programare Web folosind servere de aplicații
CodeRun, PhpFiddle
experimentarea interogărilor SQL asupra datelor
SQL Fiddle
testarea de API-uri Google invocate asincron via Ajax
Google Code Playground
programare generală (C, C#, Java, Python, Ruby,…)
Compilr

Development as a Service

A. Iqbal, M. Haunsenblas, S. Decker (2012)

Google App Engine, Heroku,
Jelastic, Windows Azure

BitBucket, GitHub, Web: Cloud9 IDE, eXo Cloud,…
SourceForge desktop: Eclipse, <oXygen/>, Visual Studio

aplicații Web: componente tipice

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 tradiționale

Arhitecturi Web stratificate
(N-tier Web applications)

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


durata

aproximativ 2—6 luni


cost

de ordinul miilor de Euro


abordare

metode agile
asamblare de componente
prototipizare – inclusiv wireframes, mock-ups


tehnologii

componente (servicii Web, API-uri publice,
framework-uri, biblioteci, plugin-uri, extensii etc.)
proiectare/programare “vizuală”
multimedia

…și altele


programare (server + client)
creare/adaptare
documen- de conținut
tare testare
arhitectura info
cerințe + navigare mentenanță

public beta lansare

http://sixrevisions.com/web-development/agile/


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 indivizi

strategii: in-house, outsourcing (offshore), near-shore


profilul echipei

specialiști în interacțiune – e.g., designeri Web
+
dezvoltatori (programatori) Web
+
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ă?

personal

Management

site editor
project manager

personal

Dezvoltare (arhitectură)

system architect
creative lead
Web interface designer(s)
graphic artist(s)
HCI engineer
data (content) architect
component architect
security architect

personal

Programare

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

personal

Testare

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

personal


personal

Operații tehnice asupra serverului Web

Webmaster
hardware & network technicians
network administrator(s)
database administrator(s)
backup operator
uptime monitor
security monitor(s)

personal

Marketing

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

personal

Web Designer: mainly a front-end developer

graphics applications, (X)HTML, CSS,
cross-browser compatibility,
experiență în design vizual + responsive design,
cunoștințe privind interacțiunea Web,
JavaScript (+biblioteci, precum jQuery),
familiar cu paradigme de interacțiune naturală
(gestures, touch, augmented reality),…

personal

Web Developer: mainly a back-end developer

cel puțin 1 limbaj obiectual, server-side scripting,
protocoale & standarde Internet/Web,
cunoștințe de baze de date (inclusiv XML și/sau
NoSQL), familiaritate cu sisteme CMS/wiki,
cunoștințe privind servicii Web (în special REST),
familiar cu alte paradigme de programare
(e.g., funcțională, distribuită), cunoștințe referitoare
la securitate & performanță Web,…

personal

Web Technician

asistent (ajutor) al webmaster-ului,
designerului sau dezvoltatorului Web

poate efectua operații tehnice
(e.g., instalare, configurare, monitorizare,…)

personal

Web Maintainer: maintains information

actualizează conținutul disponibil pe Web
via o interfață WYSIWYG, uzual

echipa proiectului Web

management funcționalitate conținut (date)

Web Project Software Domain
Manager Engineer(s) Expert

Multimedia Business
Designer(s) Expert

Ce înseamnă să fii dezvoltator Web

Mult succes!

Ce înseamnă să fii dezvoltator Web

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Ce înseamnă să fii dezvoltator Web

Similar to Ce înseamnă să fii dezvoltator Web (20)

More from Sabin Buraga

More from Sabin Buraga (18)

Ce înseamnă să fii dezvoltator Web