Embed Size (px)
DESCRIPTION
A presentation explaining to (high-school) students what Web development is, including career information. O prezentare pentru elevi și studenți oferind informații despre ceea ce înseamnă dezvoltarea de apllicații Web.
Citation preview
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
Ce înseamnă să fii dezvoltator Web
Dr. Sabin Buraga
Facultatea de Informatică, UAIC Iași
www.purl.org/net/busaco
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
Ce este Web-ul?
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co world wide web
Web WWW
“pânză de păianjen mondială”
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co world wide web
Serviciu Internet
WWW Internet
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co world wide web
bazat pe modelul client/server al Internet-ului
serverWeb
client Web
(browser)
cerere
răspuns
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
…și pe hipertext
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co world wide web
Funcționează conform reglementărilor Consorțiului Web
MIT, ERCIM, Keio University
Adobe, HP, IBM, Oracle, Microsoft,…
www.w3.org
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co world wide web
Scopuri principale:
independența de dispozitiv independența de software
scalabilitatea multimedia
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co world wide web
Scopuri principale:
independența de dispozitiv independența de software
scalabilitatea multimedia
caracter deschisopen standards
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
Care-s ingredientele Web-ului?
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co arhitectura Web-ului
Resursele sunt identificate prin adresa lor
identificator uniform de resurse URI – Uniform Resource Identifier
http://slideshare.net/busaco/presentations
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co arhitectura Web-ului
Accesul la conținutul – reprezentarea – resurselor Web
se realizează printr-un protocol
HTTP – HyperText Transfer Protocol
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co arhitectura Web-ului
codificarea datelor
Unicode
nume de domenii
DNS
protocoalele Internet TCP/IP
adrese Web URI = URL + URN
protocoale Web HTTP, HTTPS, SPDY
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
resursele – documentele – includ <marcaje />
pagini Web
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
marcajele conțin la rândul lor URI-urihipertext
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
Ce tipuri de aplicații Web există?
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co tipuri de aplicații web
Sit Web
sistem găzduind o serie de pagini (resurse) Web înrudite
ale unei organizații, companii sau persoane
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co tipuri de aplicații web
Aplicație Web
colecție interconectată de pagini Web cu conținut generat dinamic
oferă o funcționalitate specifică
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co tipuri de aplicații web
Interacțiune Web
interacțiunea dintre sit/aplicație și utilizatori are loc via o interfață Web
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co tipuri de aplicații web
Interacțiune Web
interacțiunea dintre sit/aplicație și utilizatori are loc via o interfață Web
uzual, sit Web = aplicație Web
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co tipuri de aplicații web
Diverse exemplificări:
Amazon, Coursera, Dropbox, Expedia, Flickr, info.uaic.ro, PHPMyAdmin, Reddit, Quora,
SlideShare, Twitter, Vimeo, webmin, WordPress
…și multe, multe altele
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
Centrate pe documente Interactive Tranzacționale Colaborative Orientate spre portaluri De tip ubicuu Web social Web semantic
evoluția în timp a complexității
tipuri de aplicații web
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
Centrate pe documente – document centric
conținut/pagini static(e): situri de companii, personale
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
Interactive
expoziții virtuale situri de știri
sisteme de facilitare a călătoriilor (e-travel) chioșcuri informative
…
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
Tranzacționale
online banking soluții B2B (business-to-business) fluxuri de activități (workflow-uri)
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
Colaborative
tele-conferințe Web aplicații Web de tip wiki
servicii e-learning aplicații Web peer-to-peer
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
Orientate spre portaluri
localizare unitară a informațiilor tehnice, de afaceri, guvernamentale,…
specie: Web-ul cetățenesc
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
De tip ubicuu
servicii mobile bazate pe locația utilizatorului, disponibile pe mai multe plaforme:
desktop, dispozitive mobile, tabletă,…
Web-ul mobil
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
Web social
mediatizare (syndication) spații de lucru virtuale
filtrare colaborativă divertisment social
social (game) computing
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
Web semantic (Web of Data)
modelarea cunoștințelor pentru a fi “înțelese” de calculatoare
dateinformațiicunoștințe
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
Care-i arhitectura aplicațiilor Web?
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co arhitectura unei aplicații web
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
Aplicație Web = Interfață + Program + Date
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
mitul 1: cea mai importantă este interfața
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
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,…
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
mitul 2: cel mai important este programul
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
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
server: C#, Java, JS, PHP, Ruby,…; client: JavaScript
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
mitul 3: cele mai importante sunt datele
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
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
JSON, XML, relaționale (SQL), grafuri (NoSQL),…
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
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
fapt: sunt importante toate!
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
Uzual, implică trei strate (3-tier application)
Internet (Web)
Client Server de aplicații Stocare (interface) (application) (persistence)
arhitectura unei aplicații web
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
Sponge / Database
Jelly / Business Logic
Custard / Page Logic
Cream / Markup
Fruit / Presentation
C. Henderson, “Scalable Web Architectures”, 2007
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
Sponge / Database
Jelly / Business Logic
Custard / Page Logic
Cream / Markup
Fruit / Presentation
C. Henderson, “Scalable Web Architectures”, 2007
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co arhitectura unei aplicații web
Majoritatea aplicațiilor Web sunt dezvoltate pe baza MVC (Model-View-Controller)
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co arhitectura unei aplicații web
View (prezentare+interacțiune)
Model (structura datelor)
Controller (procesare)
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co arhitectura unei aplicații web
View la nivel de client(i) Web
Model stocare persistentă
Controller aplicație (server și/sau client)
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co arhitectura unei aplicații web
View la nivel client(i) Web
Model stocare persistentă
HTML, CSS, SVG, WebGL,…
servere de aplicații, framework-uri
SQL, NoSQL, XML, RDF,…
Controller aplicație (server și/sau client)
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co arhitectura unei aplicații web
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) …
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
studiu de caz: Flickr
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co 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
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co studiu de caz: flickr
Interacțiune facilă cu utilizatorul UX (User Experience)
Interacțiune cu alte aplicații via API-uri deschise
Unicode
internationalization (i18n) & localization (l10n)
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co studiu de caz: flickr
Servere de baze de date
Servere Web Servere de
stocare foto
Internet (Web)
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co 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)
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co studiu de caz: flickr
Interfețe de programare (API-uri)
oferite de Flickr
www.flickr.com/services/api/
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co studiu de caz: flickr
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
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
Cum dezvoltăm o aplicație Web?
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co dezvoltarea aplicațiilor Web
Cerințe (requirements) Analiză & proiectare (software design)
Implementare (build) Testare (testing)
Exploatare (deployment) Mentenanță (maintenance)
Evoluție (evolution)
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co 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
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
Development as a Service
A. Iq
ba
l, M
. H
au
nse
nb
las,
S.
De
cke
r (2
01
2)
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
Web: Cloud9 IDE, eXo Cloud,… desktop: Eclipse, <oXygen/>, Visual Studio
Google App Engine, Heroku, Jelastic, Windows Azure
BitBucket, GitHub, SourceForge
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co 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
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
Arhitecturi Web stratificate (N-tier Web applications)
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co parametrii unui proiect web
obiectiv principal durată
cost abordare tehnologii procese rezultat
resurse umane profilul echipei
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co parametrii unui proiect web
obiectiv principal
crearea unui produs software utilizabil în cât mai scurt timp posibil
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co parametrii unui proiect web
durata
aproximativ 2—6 luni
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co parametrii unui proiect web
cost
de ordinul miilor de Euro
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co parametrii unui proiect web
abordare
metode agile asamblare de componente
prototipizare – inclusiv wireframes, mock-ups
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co parametrii unui proiect web
tehnologii
componente (servicii Web, API-uri publice, framework-uri, biblioteci, plugin-uri, extensii etc.)
proiectare/programare “vizuală” multimedia
…și altele
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co parametrii unui proiect web
programare (server + client)
creare/adaptare de conținut
mentenanță
testare
documen-tare
arhitectura info
+ navigare cerințe
public beta lansare
http://sixrevisions.com/web-development/agile/
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co parametrii unui proiect web
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
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co parametrii unui proiect web
resurse umane
uzual, 3—9 indivizi
strategii: in-house, outsourcing (offshore), near-shore
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co parametrii unui proiect web
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
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
Care-i echipa de dezvoltare a unei aplicații Web de anvergură?
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co personal
Management
site editor project manager
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co personal
Dezvoltare (arhitectură)
system architect creative lead
Web interface designer(s) graphic artist(s)
HCI engineer data (content) architect
component architect security architect
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co personal
Programare
server-side programmers client-side programmers
data/component integration programmers
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co personal
Testare
testing lead client-side tester(s) server-side tester(s) component tester(s)
application integration tester(s)
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co personal
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co personal
Operații tehnice asupra serverului Web
Webmaster hardware & network technicians
network administrator(s) database administrator(s)
backup operator uptime monitor
security monitor(s)
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co personal
Marketing
content producer(s) & copywriter(s) content editor(s)
branding & advertising expert(s) direct e-marketer
public relations personnel
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co 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),…
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co 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,…
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co personal
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co personal
Web Technician
asistent (ajutor) al webmaster-ului, designerului sau dezvoltatorului Web
poate efectua operații tehnice
(e.g., instalare, configurare, monitorizare,…)
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co personal
Web Maintainer: maintains information
actualizează conținutul disponibil pe Web via o interfață WYSIWYG, uzual
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/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
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
Dr.
Sa
bin
Bu
rag
a
ww
w.p
url
.org
/ne
t/b
usa
co
Mult succes!
Ce înseamnă să fii dezvoltator Web
