Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr Sabin BuragaFacultatea de Informatică UAIC ndash Iași Romacircnia

profsinfouaicro~busaco

hellipicircn 2016

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Ce este Web-ul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

World Wide Web

ldquoa common information space in which we communicate by sharing informationrdquo

Sir Tim Berners-Leea creat Web-ul icircn decembrie 1989

detalii istorice icircn Sabin Buraga 25 de ani de Web (2014) httpwwwslidesharenetbusaco25-de-ani-de-web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

World Wide Web

scopuri principaleindependența de dispozitivindependența de software

scalabilitateaubicuitatea

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

World Wide Web

bazat pe standarde deschise stipulate de Consorțiul Web

wwww3org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

World Wide Web

un serviciu Internetalături de poștă electronică transfer de fișiere etc

WWW Internet

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web-ul e bazat pe modelul clientserver al Internet-ului

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coserver

Webclient Web

cerere

răspuns

Web-ul e bazat pe modelul clientserver al Internet-ului

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉clientul Web (browser player multimedia

aplicație desktopmobilă robot al unui motor de căutarehellip) preiatrimite conținuturi

ndash adică date ndash (de) la server

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

pentru a reprezenta aceste conținuturi

se adoptă diverse formate de date

cel mai popular HTML (HyperText Markup Language)

httpswwww3orghtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

conținut cong ltmarcajeHTML versiune=51 gt + foi de stiluri CSS agrave la mode

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

aceste conținuturi sunt stocate

icircn documente (pagini) Web

mai general resurse Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resursele vor fi identificate printr-o adresă WebURL (Uniform Resource Locator)

exemplu httpwwwslidesharecombusacopresentations

identificator unic

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

paginile Web ndash uzual documente HTML ndashinclud referințe către alte resurse de interes

via adrese (URL-uri)hipertext (hipermedia)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web-ul reprezintă un graf hipermedia

explorat pe baza interacțiunii cu utilizatorul via URL-uri

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

la nivel de server Web resursele (conținuturile) solicitate de client ndash via un URL ndash sunt fie stocate static

(ie create manual) fie generate dinamic ndash pe baza unor programe implementacircnd diverși algoritmi

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

transferul datelor icircntre client și server e stabilit de un protocol de comunicație

HTTP (HyperText Transfer Protocol)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

codificarea datelor

Unicode

nume de domenii

DNS

protocoaleleInternetTCPIP

adrese WebURI = URL + URN

protocoale WebHTTP HTTPShellip

a b c hellip zș б ө Ϟ ঢ়ល ꑸⵙ ⋇ 120092

edu org info rouaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

sit Websistem găzduind o serie de pagini (resurse) Web icircnrudite

ale unei organizații companii sau persoane

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

aplicație Webcolecție interconectată de pagini Web cu conținut generat

dinamic oferind o funcționalitate specifică

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Webbdquodialogulrdquo dintre utilizator(i) și aplicație are loc

via o interfață Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Web

uzual sit Web = aplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coexemple de aplicații Web

Cloud9 Coursera Devdocsio

Dropbox GitHub infouaicro

Instagram JSBin Medium

OpenStreetMap PHPMyAdmin

Reddit Quora SlideShare

TEDcom Tumblr Vimeo

webmin Wikipedia WordPress

hellipși multe multe multe altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

accesul la date poate fi realizat via (micro-)servicii Websoftware oferind o funcționalitate specifică icircn urma căreia se obțin date de interes ndash uzual apelacircnd la

un API (Application Programming Interface)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Care e arhitectura generică

a unei aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

tipic o aplicație Web implică trei strate (3-tier)

client server de aplicații stocare(interface) (application) (persistence)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Sponge Database

Jelly Business Logic

Custard Page Logic

Cream Markup

Fruit Presentation

C Henderson Scalable Web Architectures Web 20 Expo 2007 iamcalcomtalks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 1 cea mai importantă este interfața

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

standarde deschisestructurarea conținutului HTML (HyperText Markup Language)

stiluri de prezentare a datelor CSS (Cascading Style Sheets)transfer asincron Ajax (Asynchronous JavaScript And XML)

ilustrații 2D icircn format vectorial SVG (Scalable Vector Graphics)conținut 3D WebGL

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 2 cel mai important este programul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

server C Go Java JavaScript PHP Python Ruby Scala etcclient JavaScript + API-uri HTML5 implementate de browser

servere de aplicații Web framework-uri biblioteci componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele(ldquocontent is kingrdquo)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

recurgerea la modele diverserelațional ndash interogare via SQL (Structured Query Language)

bazat pe grafuri ndash o fațetă a bdquomișcăriirdquo NoSQLcheie-valoare ndash eg formatul JSON (JavaScript Object Notation)

arborescent ndash XML (Extensible Markup Language)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Ce este Web-ul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

World Wide Web

ldquoa common information space in which we communicate by sharing informationrdquo

Sir Tim Berners-Leea creat Web-ul icircn decembrie 1989

detalii istorice icircn Sabin Buraga 25 de ani de Web (2014) httpwwwslidesharenetbusaco25-de-ani-de-web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

World Wide Web

scopuri principaleindependența de dispozitivindependența de software

scalabilitateaubicuitatea

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

World Wide Web

bazat pe standarde deschise stipulate de Consorțiul Web

wwww3org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

World Wide Web

un serviciu Internetalături de poștă electronică transfer de fișiere etc

WWW Internet

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web-ul e bazat pe modelul clientserver al Internet-ului

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coserver

Webclient Web

cerere

răspuns

Web-ul e bazat pe modelul clientserver al Internet-ului

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉clientul Web (browser player multimedia

aplicație desktopmobilă robot al unui motor de căutarehellip) preiatrimite conținuturi

ndash adică date ndash (de) la server

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

pentru a reprezenta aceste conținuturi

se adoptă diverse formate de date

cel mai popular HTML (HyperText Markup Language)

httpswwww3orghtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

conținut cong ltmarcajeHTML versiune=51 gt + foi de stiluri CSS agrave la mode

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

aceste conținuturi sunt stocate

icircn documente (pagini) Web

mai general resurse Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resursele vor fi identificate printr-o adresă WebURL (Uniform Resource Locator)

exemplu httpwwwslidesharecombusacopresentations

identificator unic

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

paginile Web ndash uzual documente HTML ndashinclud referințe către alte resurse de interes

via adrese (URL-uri)hipertext (hipermedia)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web-ul reprezintă un graf hipermedia

explorat pe baza interacțiunii cu utilizatorul via URL-uri

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

la nivel de server Web resursele (conținuturile) solicitate de client ndash via un URL ndash sunt fie stocate static

(ie create manual) fie generate dinamic ndash pe baza unor programe implementacircnd diverși algoritmi

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

transferul datelor icircntre client și server e stabilit de un protocol de comunicație

HTTP (HyperText Transfer Protocol)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

codificarea datelor

Unicode

nume de domenii

DNS

protocoaleleInternetTCPIP

adrese WebURI = URL + URN

protocoale WebHTTP HTTPShellip

a b c hellip zș б ө Ϟ ঢ়ល ꑸⵙ ⋇ 120092

edu org info rouaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

sit Websistem găzduind o serie de pagini (resurse) Web icircnrudite

ale unei organizații companii sau persoane

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

aplicație Webcolecție interconectată de pagini Web cu conținut generat

dinamic oferind o funcționalitate specifică

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Webbdquodialogulrdquo dintre utilizator(i) și aplicație are loc

via o interfață Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Web

uzual sit Web = aplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coexemple de aplicații Web

Cloud9 Coursera Devdocsio

Dropbox GitHub infouaicro

Instagram JSBin Medium

OpenStreetMap PHPMyAdmin

Reddit Quora SlideShare

TEDcom Tumblr Vimeo

webmin Wikipedia WordPress

hellipși multe multe multe altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

accesul la date poate fi realizat via (micro-)servicii Websoftware oferind o funcționalitate specifică icircn urma căreia se obțin date de interes ndash uzual apelacircnd la

un API (Application Programming Interface)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Care e arhitectura generică

a unei aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

tipic o aplicație Web implică trei strate (3-tier)

client server de aplicații stocare(interface) (application) (persistence)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Sponge Database

Jelly Business Logic

Custard Page Logic

Cream Markup

Fruit Presentation

C Henderson Scalable Web Architectures Web 20 Expo 2007 iamcalcomtalks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 1 cea mai importantă este interfața

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

standarde deschisestructurarea conținutului HTML (HyperText Markup Language)

stiluri de prezentare a datelor CSS (Cascading Style Sheets)transfer asincron Ajax (Asynchronous JavaScript And XML)

ilustrații 2D icircn format vectorial SVG (Scalable Vector Graphics)conținut 3D WebGL

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 2 cel mai important este programul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

server C Go Java JavaScript PHP Python Ruby Scala etcclient JavaScript + API-uri HTML5 implementate de browser

servere de aplicații Web framework-uri biblioteci componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele(ldquocontent is kingrdquo)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

recurgerea la modele diverserelațional ndash interogare via SQL (Structured Query Language)

bazat pe grafuri ndash o fațetă a bdquomișcăriirdquo NoSQLcheie-valoare ndash eg formatul JSON (JavaScript Object Notation)

arborescent ndash XML (Extensible Markup Language)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

World Wide Web

ldquoa common information space in which we communicate by sharing informationrdquo

Sir Tim Berners-Leea creat Web-ul icircn decembrie 1989

detalii istorice icircn Sabin Buraga 25 de ani de Web (2014) httpwwwslidesharenetbusaco25-de-ani-de-web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

World Wide Web

scopuri principaleindependența de dispozitivindependența de software

scalabilitateaubicuitatea

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

World Wide Web

bazat pe standarde deschise stipulate de Consorțiul Web

wwww3org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

World Wide Web

un serviciu Internetalături de poștă electronică transfer de fișiere etc

WWW Internet

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web-ul e bazat pe modelul clientserver al Internet-ului

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coserver

Webclient Web

cerere

răspuns

Web-ul e bazat pe modelul clientserver al Internet-ului

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉clientul Web (browser player multimedia

aplicație desktopmobilă robot al unui motor de căutarehellip) preiatrimite conținuturi

ndash adică date ndash (de) la server

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

pentru a reprezenta aceste conținuturi

se adoptă diverse formate de date

cel mai popular HTML (HyperText Markup Language)

httpswwww3orghtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

conținut cong ltmarcajeHTML versiune=51 gt + foi de stiluri CSS agrave la mode

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

aceste conținuturi sunt stocate

icircn documente (pagini) Web

mai general resurse Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resursele vor fi identificate printr-o adresă WebURL (Uniform Resource Locator)

exemplu httpwwwslidesharecombusacopresentations

identificator unic

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

paginile Web ndash uzual documente HTML ndashinclud referințe către alte resurse de interes

via adrese (URL-uri)hipertext (hipermedia)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web-ul reprezintă un graf hipermedia

explorat pe baza interacțiunii cu utilizatorul via URL-uri

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

la nivel de server Web resursele (conținuturile) solicitate de client ndash via un URL ndash sunt fie stocate static

(ie create manual) fie generate dinamic ndash pe baza unor programe implementacircnd diverși algoritmi

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

transferul datelor icircntre client și server e stabilit de un protocol de comunicație

HTTP (HyperText Transfer Protocol)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

codificarea datelor

Unicode

nume de domenii

DNS

protocoaleleInternetTCPIP

adrese WebURI = URL + URN

protocoale WebHTTP HTTPShellip

a b c hellip zș б ө Ϟ ঢ়ល ꑸⵙ ⋇ 120092

edu org info rouaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

sit Websistem găzduind o serie de pagini (resurse) Web icircnrudite

ale unei organizații companii sau persoane

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

aplicație Webcolecție interconectată de pagini Web cu conținut generat

dinamic oferind o funcționalitate specifică

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Webbdquodialogulrdquo dintre utilizator(i) și aplicație are loc

via o interfață Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Web

uzual sit Web = aplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coexemple de aplicații Web

Cloud9 Coursera Devdocsio

Dropbox GitHub infouaicro

Instagram JSBin Medium

OpenStreetMap PHPMyAdmin

Reddit Quora SlideShare

TEDcom Tumblr Vimeo

webmin Wikipedia WordPress

hellipși multe multe multe altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

accesul la date poate fi realizat via (micro-)servicii Websoftware oferind o funcționalitate specifică icircn urma căreia se obțin date de interes ndash uzual apelacircnd la

un API (Application Programming Interface)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Care e arhitectura generică

a unei aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

tipic o aplicație Web implică trei strate (3-tier)

client server de aplicații stocare(interface) (application) (persistence)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Sponge Database

Jelly Business Logic

Custard Page Logic

Cream Markup

Fruit Presentation

C Henderson Scalable Web Architectures Web 20 Expo 2007 iamcalcomtalks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 1 cea mai importantă este interfața

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

standarde deschisestructurarea conținutului HTML (HyperText Markup Language)

stiluri de prezentare a datelor CSS (Cascading Style Sheets)transfer asincron Ajax (Asynchronous JavaScript And XML)

ilustrații 2D icircn format vectorial SVG (Scalable Vector Graphics)conținut 3D WebGL

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 2 cel mai important este programul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

server C Go Java JavaScript PHP Python Ruby Scala etcclient JavaScript + API-uri HTML5 implementate de browser

servere de aplicații Web framework-uri biblioteci componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele(ldquocontent is kingrdquo)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

recurgerea la modele diverserelațional ndash interogare via SQL (Structured Query Language)

bazat pe grafuri ndash o fațetă a bdquomișcăriirdquo NoSQLcheie-valoare ndash eg formatul JSON (JavaScript Object Notation)

arborescent ndash XML (Extensible Markup Language)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

World Wide Web

scopuri principaleindependența de dispozitivindependența de software

scalabilitateaubicuitatea

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

World Wide Web

bazat pe standarde deschise stipulate de Consorțiul Web

wwww3org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

World Wide Web

un serviciu Internetalături de poștă electronică transfer de fișiere etc

WWW Internet

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web-ul e bazat pe modelul clientserver al Internet-ului

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coserver

Webclient Web

cerere

răspuns

Web-ul e bazat pe modelul clientserver al Internet-ului

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉clientul Web (browser player multimedia

aplicație desktopmobilă robot al unui motor de căutarehellip) preiatrimite conținuturi

ndash adică date ndash (de) la server

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

pentru a reprezenta aceste conținuturi

se adoptă diverse formate de date

cel mai popular HTML (HyperText Markup Language)

httpswwww3orghtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

conținut cong ltmarcajeHTML versiune=51 gt + foi de stiluri CSS agrave la mode

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

aceste conținuturi sunt stocate

icircn documente (pagini) Web

mai general resurse Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resursele vor fi identificate printr-o adresă WebURL (Uniform Resource Locator)

exemplu httpwwwslidesharecombusacopresentations

identificator unic

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

paginile Web ndash uzual documente HTML ndashinclud referințe către alte resurse de interes

via adrese (URL-uri)hipertext (hipermedia)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web-ul reprezintă un graf hipermedia

explorat pe baza interacțiunii cu utilizatorul via URL-uri

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

la nivel de server Web resursele (conținuturile) solicitate de client ndash via un URL ndash sunt fie stocate static

(ie create manual) fie generate dinamic ndash pe baza unor programe implementacircnd diverși algoritmi

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

transferul datelor icircntre client și server e stabilit de un protocol de comunicație

HTTP (HyperText Transfer Protocol)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

codificarea datelor

Unicode

nume de domenii

DNS

protocoaleleInternetTCPIP

adrese WebURI = URL + URN

protocoale WebHTTP HTTPShellip

a b c hellip zș б ө Ϟ ঢ়ល ꑸⵙ ⋇ 120092

edu org info rouaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

sit Websistem găzduind o serie de pagini (resurse) Web icircnrudite

ale unei organizații companii sau persoane

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

aplicație Webcolecție interconectată de pagini Web cu conținut generat

dinamic oferind o funcționalitate specifică

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Webbdquodialogulrdquo dintre utilizator(i) și aplicație are loc

via o interfață Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Web

uzual sit Web = aplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coexemple de aplicații Web

Cloud9 Coursera Devdocsio

Dropbox GitHub infouaicro

Instagram JSBin Medium

OpenStreetMap PHPMyAdmin

Reddit Quora SlideShare

TEDcom Tumblr Vimeo

webmin Wikipedia WordPress

hellipși multe multe multe altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

accesul la date poate fi realizat via (micro-)servicii Websoftware oferind o funcționalitate specifică icircn urma căreia se obțin date de interes ndash uzual apelacircnd la

un API (Application Programming Interface)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Care e arhitectura generică

a unei aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

tipic o aplicație Web implică trei strate (3-tier)

client server de aplicații stocare(interface) (application) (persistence)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Sponge Database

Jelly Business Logic

Custard Page Logic

Cream Markup

Fruit Presentation

C Henderson Scalable Web Architectures Web 20 Expo 2007 iamcalcomtalks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 1 cea mai importantă este interfața

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

standarde deschisestructurarea conținutului HTML (HyperText Markup Language)

stiluri de prezentare a datelor CSS (Cascading Style Sheets)transfer asincron Ajax (Asynchronous JavaScript And XML)

ilustrații 2D icircn format vectorial SVG (Scalable Vector Graphics)conținut 3D WebGL

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 2 cel mai important este programul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

server C Go Java JavaScript PHP Python Ruby Scala etcclient JavaScript + API-uri HTML5 implementate de browser

servere de aplicații Web framework-uri biblioteci componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele(ldquocontent is kingrdquo)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

recurgerea la modele diverserelațional ndash interogare via SQL (Structured Query Language)

bazat pe grafuri ndash o fațetă a bdquomișcăriirdquo NoSQLcheie-valoare ndash eg formatul JSON (JavaScript Object Notation)

arborescent ndash XML (Extensible Markup Language)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

World Wide Web

bazat pe standarde deschise stipulate de Consorțiul Web

wwww3org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

World Wide Web

un serviciu Internetalături de poștă electronică transfer de fișiere etc

WWW Internet

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web-ul e bazat pe modelul clientserver al Internet-ului

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coserver

Webclient Web

cerere

răspuns

Web-ul e bazat pe modelul clientserver al Internet-ului

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉clientul Web (browser player multimedia

aplicație desktopmobilă robot al unui motor de căutarehellip) preiatrimite conținuturi

ndash adică date ndash (de) la server

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

pentru a reprezenta aceste conținuturi

se adoptă diverse formate de date

cel mai popular HTML (HyperText Markup Language)

httpswwww3orghtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

conținut cong ltmarcajeHTML versiune=51 gt + foi de stiluri CSS agrave la mode

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

aceste conținuturi sunt stocate

icircn documente (pagini) Web

mai general resurse Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resursele vor fi identificate printr-o adresă WebURL (Uniform Resource Locator)

exemplu httpwwwslidesharecombusacopresentations

identificator unic

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

paginile Web ndash uzual documente HTML ndashinclud referințe către alte resurse de interes

via adrese (URL-uri)hipertext (hipermedia)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web-ul reprezintă un graf hipermedia

explorat pe baza interacțiunii cu utilizatorul via URL-uri

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

la nivel de server Web resursele (conținuturile) solicitate de client ndash via un URL ndash sunt fie stocate static

(ie create manual) fie generate dinamic ndash pe baza unor programe implementacircnd diverși algoritmi

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

transferul datelor icircntre client și server e stabilit de un protocol de comunicație

HTTP (HyperText Transfer Protocol)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

codificarea datelor

Unicode

nume de domenii

DNS

protocoaleleInternetTCPIP

adrese WebURI = URL + URN

protocoale WebHTTP HTTPShellip

a b c hellip zș б ө Ϟ ঢ়ល ꑸⵙ ⋇ 120092

edu org info rouaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

sit Websistem găzduind o serie de pagini (resurse) Web icircnrudite

ale unei organizații companii sau persoane

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

aplicație Webcolecție interconectată de pagini Web cu conținut generat

dinamic oferind o funcționalitate specifică

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Webbdquodialogulrdquo dintre utilizator(i) și aplicație are loc

via o interfață Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Web

uzual sit Web = aplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coexemple de aplicații Web

Cloud9 Coursera Devdocsio

Dropbox GitHub infouaicro

Instagram JSBin Medium

OpenStreetMap PHPMyAdmin

Reddit Quora SlideShare

TEDcom Tumblr Vimeo

webmin Wikipedia WordPress

hellipși multe multe multe altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

accesul la date poate fi realizat via (micro-)servicii Websoftware oferind o funcționalitate specifică icircn urma căreia se obțin date de interes ndash uzual apelacircnd la

un API (Application Programming Interface)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Care e arhitectura generică

a unei aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

tipic o aplicație Web implică trei strate (3-tier)

client server de aplicații stocare(interface) (application) (persistence)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Sponge Database

Jelly Business Logic

Custard Page Logic

Cream Markup

Fruit Presentation

C Henderson Scalable Web Architectures Web 20 Expo 2007 iamcalcomtalks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 1 cea mai importantă este interfața

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

standarde deschisestructurarea conținutului HTML (HyperText Markup Language)

stiluri de prezentare a datelor CSS (Cascading Style Sheets)transfer asincron Ajax (Asynchronous JavaScript And XML)

ilustrații 2D icircn format vectorial SVG (Scalable Vector Graphics)conținut 3D WebGL

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 2 cel mai important este programul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

server C Go Java JavaScript PHP Python Ruby Scala etcclient JavaScript + API-uri HTML5 implementate de browser

servere de aplicații Web framework-uri biblioteci componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele(ldquocontent is kingrdquo)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

recurgerea la modele diverserelațional ndash interogare via SQL (Structured Query Language)

bazat pe grafuri ndash o fațetă a bdquomișcăriirdquo NoSQLcheie-valoare ndash eg formatul JSON (JavaScript Object Notation)

arborescent ndash XML (Extensible Markup Language)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

World Wide Web

un serviciu Internetalături de poștă electronică transfer de fișiere etc

WWW Internet

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web-ul e bazat pe modelul clientserver al Internet-ului

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coserver

Webclient Web

cerere

răspuns

Web-ul e bazat pe modelul clientserver al Internet-ului

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉clientul Web (browser player multimedia

aplicație desktopmobilă robot al unui motor de căutarehellip) preiatrimite conținuturi

ndash adică date ndash (de) la server

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

pentru a reprezenta aceste conținuturi

se adoptă diverse formate de date

cel mai popular HTML (HyperText Markup Language)

httpswwww3orghtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

conținut cong ltmarcajeHTML versiune=51 gt + foi de stiluri CSS agrave la mode

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

aceste conținuturi sunt stocate

icircn documente (pagini) Web

mai general resurse Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resursele vor fi identificate printr-o adresă WebURL (Uniform Resource Locator)

exemplu httpwwwslidesharecombusacopresentations

identificator unic

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

paginile Web ndash uzual documente HTML ndashinclud referințe către alte resurse de interes

via adrese (URL-uri)hipertext (hipermedia)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web-ul reprezintă un graf hipermedia

explorat pe baza interacțiunii cu utilizatorul via URL-uri

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

la nivel de server Web resursele (conținuturile) solicitate de client ndash via un URL ndash sunt fie stocate static

(ie create manual) fie generate dinamic ndash pe baza unor programe implementacircnd diverși algoritmi

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

transferul datelor icircntre client și server e stabilit de un protocol de comunicație

HTTP (HyperText Transfer Protocol)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

codificarea datelor

Unicode

nume de domenii

DNS

protocoaleleInternetTCPIP

adrese WebURI = URL + URN

protocoale WebHTTP HTTPShellip

a b c hellip zș б ө Ϟ ঢ়ល ꑸⵙ ⋇ 120092

edu org info rouaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

sit Websistem găzduind o serie de pagini (resurse) Web icircnrudite

ale unei organizații companii sau persoane

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

aplicație Webcolecție interconectată de pagini Web cu conținut generat

dinamic oferind o funcționalitate specifică

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Webbdquodialogulrdquo dintre utilizator(i) și aplicație are loc

via o interfață Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Web

uzual sit Web = aplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coexemple de aplicații Web

Cloud9 Coursera Devdocsio

Dropbox GitHub infouaicro

Instagram JSBin Medium

OpenStreetMap PHPMyAdmin

Reddit Quora SlideShare

TEDcom Tumblr Vimeo

webmin Wikipedia WordPress

hellipși multe multe multe altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

accesul la date poate fi realizat via (micro-)servicii Websoftware oferind o funcționalitate specifică icircn urma căreia se obțin date de interes ndash uzual apelacircnd la

un API (Application Programming Interface)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Care e arhitectura generică

a unei aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

tipic o aplicație Web implică trei strate (3-tier)

client server de aplicații stocare(interface) (application) (persistence)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Sponge Database

Jelly Business Logic

Custard Page Logic

Cream Markup

Fruit Presentation

C Henderson Scalable Web Architectures Web 20 Expo 2007 iamcalcomtalks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 1 cea mai importantă este interfața

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

standarde deschisestructurarea conținutului HTML (HyperText Markup Language)

stiluri de prezentare a datelor CSS (Cascading Style Sheets)transfer asincron Ajax (Asynchronous JavaScript And XML)

ilustrații 2D icircn format vectorial SVG (Scalable Vector Graphics)conținut 3D WebGL

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 2 cel mai important este programul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

server C Go Java JavaScript PHP Python Ruby Scala etcclient JavaScript + API-uri HTML5 implementate de browser

servere de aplicații Web framework-uri biblioteci componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele(ldquocontent is kingrdquo)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

recurgerea la modele diverserelațional ndash interogare via SQL (Structured Query Language)

bazat pe grafuri ndash o fațetă a bdquomișcăriirdquo NoSQLcheie-valoare ndash eg formatul JSON (JavaScript Object Notation)

arborescent ndash XML (Extensible Markup Language)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web-ul e bazat pe modelul clientserver al Internet-ului

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coserver

Webclient Web

cerere

răspuns

Web-ul e bazat pe modelul clientserver al Internet-ului

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉clientul Web (browser player multimedia

aplicație desktopmobilă robot al unui motor de căutarehellip) preiatrimite conținuturi

ndash adică date ndash (de) la server

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

pentru a reprezenta aceste conținuturi

se adoptă diverse formate de date

cel mai popular HTML (HyperText Markup Language)

httpswwww3orghtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

conținut cong ltmarcajeHTML versiune=51 gt + foi de stiluri CSS agrave la mode

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

aceste conținuturi sunt stocate

icircn documente (pagini) Web

mai general resurse Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resursele vor fi identificate printr-o adresă WebURL (Uniform Resource Locator)

exemplu httpwwwslidesharecombusacopresentations

identificator unic

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

paginile Web ndash uzual documente HTML ndashinclud referințe către alte resurse de interes

via adrese (URL-uri)hipertext (hipermedia)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web-ul reprezintă un graf hipermedia

explorat pe baza interacțiunii cu utilizatorul via URL-uri

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

la nivel de server Web resursele (conținuturile) solicitate de client ndash via un URL ndash sunt fie stocate static

(ie create manual) fie generate dinamic ndash pe baza unor programe implementacircnd diverși algoritmi

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

transferul datelor icircntre client și server e stabilit de un protocol de comunicație

HTTP (HyperText Transfer Protocol)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

codificarea datelor

Unicode

nume de domenii

DNS

protocoaleleInternetTCPIP

adrese WebURI = URL + URN

protocoale WebHTTP HTTPShellip

a b c hellip zș б ө Ϟ ঢ়ល ꑸⵙ ⋇ 120092

edu org info rouaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

sit Websistem găzduind o serie de pagini (resurse) Web icircnrudite

ale unei organizații companii sau persoane

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

aplicație Webcolecție interconectată de pagini Web cu conținut generat

dinamic oferind o funcționalitate specifică

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Webbdquodialogulrdquo dintre utilizator(i) și aplicație are loc

via o interfață Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Web

uzual sit Web = aplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coexemple de aplicații Web

Cloud9 Coursera Devdocsio

Dropbox GitHub infouaicro

Instagram JSBin Medium

OpenStreetMap PHPMyAdmin

Reddit Quora SlideShare

TEDcom Tumblr Vimeo

webmin Wikipedia WordPress

hellipși multe multe multe altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

accesul la date poate fi realizat via (micro-)servicii Websoftware oferind o funcționalitate specifică icircn urma căreia se obțin date de interes ndash uzual apelacircnd la

un API (Application Programming Interface)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Care e arhitectura generică

a unei aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

tipic o aplicație Web implică trei strate (3-tier)

client server de aplicații stocare(interface) (application) (persistence)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Sponge Database

Jelly Business Logic

Custard Page Logic

Cream Markup

Fruit Presentation

C Henderson Scalable Web Architectures Web 20 Expo 2007 iamcalcomtalks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 1 cea mai importantă este interfața

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

standarde deschisestructurarea conținutului HTML (HyperText Markup Language)

stiluri de prezentare a datelor CSS (Cascading Style Sheets)transfer asincron Ajax (Asynchronous JavaScript And XML)

ilustrații 2D icircn format vectorial SVG (Scalable Vector Graphics)conținut 3D WebGL

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 2 cel mai important este programul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

server C Go Java JavaScript PHP Python Ruby Scala etcclient JavaScript + API-uri HTML5 implementate de browser

servere de aplicații Web framework-uri biblioteci componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele(ldquocontent is kingrdquo)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

recurgerea la modele diverserelațional ndash interogare via SQL (Structured Query Language)

bazat pe grafuri ndash o fațetă a bdquomișcăriirdquo NoSQLcheie-valoare ndash eg formatul JSON (JavaScript Object Notation)

arborescent ndash XML (Extensible Markup Language)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coserver

Webclient Web

cerere

răspuns

Web-ul e bazat pe modelul clientserver al Internet-ului

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉clientul Web (browser player multimedia

aplicație desktopmobilă robot al unui motor de căutarehellip) preiatrimite conținuturi

ndash adică date ndash (de) la server

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

pentru a reprezenta aceste conținuturi

se adoptă diverse formate de date

cel mai popular HTML (HyperText Markup Language)

httpswwww3orghtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

conținut cong ltmarcajeHTML versiune=51 gt + foi de stiluri CSS agrave la mode

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

aceste conținuturi sunt stocate

icircn documente (pagini) Web

mai general resurse Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resursele vor fi identificate printr-o adresă WebURL (Uniform Resource Locator)

exemplu httpwwwslidesharecombusacopresentations

identificator unic

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

paginile Web ndash uzual documente HTML ndashinclud referințe către alte resurse de interes

via adrese (URL-uri)hipertext (hipermedia)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web-ul reprezintă un graf hipermedia

explorat pe baza interacțiunii cu utilizatorul via URL-uri

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

la nivel de server Web resursele (conținuturile) solicitate de client ndash via un URL ndash sunt fie stocate static

(ie create manual) fie generate dinamic ndash pe baza unor programe implementacircnd diverși algoritmi

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

transferul datelor icircntre client și server e stabilit de un protocol de comunicație

HTTP (HyperText Transfer Protocol)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

codificarea datelor

Unicode

nume de domenii

DNS

protocoaleleInternetTCPIP

adrese WebURI = URL + URN

protocoale WebHTTP HTTPShellip

a b c hellip zș б ө Ϟ ঢ়ល ꑸⵙ ⋇ 120092

edu org info rouaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

sit Websistem găzduind o serie de pagini (resurse) Web icircnrudite

ale unei organizații companii sau persoane

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

aplicație Webcolecție interconectată de pagini Web cu conținut generat

dinamic oferind o funcționalitate specifică

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Webbdquodialogulrdquo dintre utilizator(i) și aplicație are loc

via o interfață Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Web

uzual sit Web = aplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coexemple de aplicații Web

Cloud9 Coursera Devdocsio

Dropbox GitHub infouaicro

Instagram JSBin Medium

OpenStreetMap PHPMyAdmin

Reddit Quora SlideShare

TEDcom Tumblr Vimeo

webmin Wikipedia WordPress

hellipși multe multe multe altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

accesul la date poate fi realizat via (micro-)servicii Websoftware oferind o funcționalitate specifică icircn urma căreia se obțin date de interes ndash uzual apelacircnd la

un API (Application Programming Interface)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Care e arhitectura generică

a unei aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

tipic o aplicație Web implică trei strate (3-tier)

client server de aplicații stocare(interface) (application) (persistence)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Sponge Database

Jelly Business Logic

Custard Page Logic

Cream Markup

Fruit Presentation

C Henderson Scalable Web Architectures Web 20 Expo 2007 iamcalcomtalks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 1 cea mai importantă este interfața

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

standarde deschisestructurarea conținutului HTML (HyperText Markup Language)

stiluri de prezentare a datelor CSS (Cascading Style Sheets)transfer asincron Ajax (Asynchronous JavaScript And XML)

ilustrații 2D icircn format vectorial SVG (Scalable Vector Graphics)conținut 3D WebGL

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 2 cel mai important este programul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

server C Go Java JavaScript PHP Python Ruby Scala etcclient JavaScript + API-uri HTML5 implementate de browser

servere de aplicații Web framework-uri biblioteci componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele(ldquocontent is kingrdquo)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

recurgerea la modele diverserelațional ndash interogare via SQL (Structured Query Language)

bazat pe grafuri ndash o fațetă a bdquomișcăriirdquo NoSQLcheie-valoare ndash eg formatul JSON (JavaScript Object Notation)

arborescent ndash XML (Extensible Markup Language)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉clientul Web (browser player multimedia

aplicație desktopmobilă robot al unui motor de căutarehellip) preiatrimite conținuturi

ndash adică date ndash (de) la server

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

pentru a reprezenta aceste conținuturi

se adoptă diverse formate de date

cel mai popular HTML (HyperText Markup Language)

httpswwww3orghtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

conținut cong ltmarcajeHTML versiune=51 gt + foi de stiluri CSS agrave la mode

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

aceste conținuturi sunt stocate

icircn documente (pagini) Web

mai general resurse Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resursele vor fi identificate printr-o adresă WebURL (Uniform Resource Locator)

exemplu httpwwwslidesharecombusacopresentations

identificator unic

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

paginile Web ndash uzual documente HTML ndashinclud referințe către alte resurse de interes

via adrese (URL-uri)hipertext (hipermedia)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web-ul reprezintă un graf hipermedia

explorat pe baza interacțiunii cu utilizatorul via URL-uri

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

la nivel de server Web resursele (conținuturile) solicitate de client ndash via un URL ndash sunt fie stocate static

(ie create manual) fie generate dinamic ndash pe baza unor programe implementacircnd diverși algoritmi

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

transferul datelor icircntre client și server e stabilit de un protocol de comunicație

HTTP (HyperText Transfer Protocol)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

codificarea datelor

Unicode

nume de domenii

DNS

protocoaleleInternetTCPIP

adrese WebURI = URL + URN

protocoale WebHTTP HTTPShellip

a b c hellip zș б ө Ϟ ঢ়ល ꑸⵙ ⋇ 120092

edu org info rouaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

sit Websistem găzduind o serie de pagini (resurse) Web icircnrudite

ale unei organizații companii sau persoane

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

aplicație Webcolecție interconectată de pagini Web cu conținut generat

dinamic oferind o funcționalitate specifică

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Webbdquodialogulrdquo dintre utilizator(i) și aplicație are loc

via o interfață Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Web

uzual sit Web = aplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coexemple de aplicații Web

Cloud9 Coursera Devdocsio

Dropbox GitHub infouaicro

Instagram JSBin Medium

OpenStreetMap PHPMyAdmin

Reddit Quora SlideShare

TEDcom Tumblr Vimeo

webmin Wikipedia WordPress

hellipși multe multe multe altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

accesul la date poate fi realizat via (micro-)servicii Websoftware oferind o funcționalitate specifică icircn urma căreia se obțin date de interes ndash uzual apelacircnd la

un API (Application Programming Interface)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Care e arhitectura generică

a unei aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

tipic o aplicație Web implică trei strate (3-tier)

client server de aplicații stocare(interface) (application) (persistence)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Sponge Database

Jelly Business Logic

Custard Page Logic

Cream Markup

Fruit Presentation

C Henderson Scalable Web Architectures Web 20 Expo 2007 iamcalcomtalks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 1 cea mai importantă este interfața

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

standarde deschisestructurarea conținutului HTML (HyperText Markup Language)

stiluri de prezentare a datelor CSS (Cascading Style Sheets)transfer asincron Ajax (Asynchronous JavaScript And XML)

ilustrații 2D icircn format vectorial SVG (Scalable Vector Graphics)conținut 3D WebGL

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 2 cel mai important este programul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

server C Go Java JavaScript PHP Python Ruby Scala etcclient JavaScript + API-uri HTML5 implementate de browser

servere de aplicații Web framework-uri biblioteci componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele(ldquocontent is kingrdquo)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

recurgerea la modele diverserelațional ndash interogare via SQL (Structured Query Language)

bazat pe grafuri ndash o fațetă a bdquomișcăriirdquo NoSQLcheie-valoare ndash eg formatul JSON (JavaScript Object Notation)

arborescent ndash XML (Extensible Markup Language)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

pentru a reprezenta aceste conținuturi

se adoptă diverse formate de date

cel mai popular HTML (HyperText Markup Language)

httpswwww3orghtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

conținut cong ltmarcajeHTML versiune=51 gt + foi de stiluri CSS agrave la mode

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

aceste conținuturi sunt stocate

icircn documente (pagini) Web

mai general resurse Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resursele vor fi identificate printr-o adresă WebURL (Uniform Resource Locator)

exemplu httpwwwslidesharecombusacopresentations

identificator unic

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

paginile Web ndash uzual documente HTML ndashinclud referințe către alte resurse de interes

via adrese (URL-uri)hipertext (hipermedia)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web-ul reprezintă un graf hipermedia

explorat pe baza interacțiunii cu utilizatorul via URL-uri

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

la nivel de server Web resursele (conținuturile) solicitate de client ndash via un URL ndash sunt fie stocate static

(ie create manual) fie generate dinamic ndash pe baza unor programe implementacircnd diverși algoritmi

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

transferul datelor icircntre client și server e stabilit de un protocol de comunicație

HTTP (HyperText Transfer Protocol)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

codificarea datelor

Unicode

nume de domenii

DNS

protocoaleleInternetTCPIP

adrese WebURI = URL + URN

protocoale WebHTTP HTTPShellip

a b c hellip zș б ө Ϟ ঢ়ល ꑸⵙ ⋇ 120092

edu org info rouaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

sit Websistem găzduind o serie de pagini (resurse) Web icircnrudite

ale unei organizații companii sau persoane

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

aplicație Webcolecție interconectată de pagini Web cu conținut generat

dinamic oferind o funcționalitate specifică

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Webbdquodialogulrdquo dintre utilizator(i) și aplicație are loc

via o interfață Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Web

uzual sit Web = aplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coexemple de aplicații Web

Cloud9 Coursera Devdocsio

Dropbox GitHub infouaicro

Instagram JSBin Medium

OpenStreetMap PHPMyAdmin

Reddit Quora SlideShare

TEDcom Tumblr Vimeo

webmin Wikipedia WordPress

hellipși multe multe multe altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

accesul la date poate fi realizat via (micro-)servicii Websoftware oferind o funcționalitate specifică icircn urma căreia se obțin date de interes ndash uzual apelacircnd la

un API (Application Programming Interface)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Care e arhitectura generică

a unei aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

tipic o aplicație Web implică trei strate (3-tier)

client server de aplicații stocare(interface) (application) (persistence)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Sponge Database

Jelly Business Logic

Custard Page Logic

Cream Markup

Fruit Presentation

C Henderson Scalable Web Architectures Web 20 Expo 2007 iamcalcomtalks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 1 cea mai importantă este interfața

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

standarde deschisestructurarea conținutului HTML (HyperText Markup Language)

stiluri de prezentare a datelor CSS (Cascading Style Sheets)transfer asincron Ajax (Asynchronous JavaScript And XML)

ilustrații 2D icircn format vectorial SVG (Scalable Vector Graphics)conținut 3D WebGL

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 2 cel mai important este programul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

server C Go Java JavaScript PHP Python Ruby Scala etcclient JavaScript + API-uri HTML5 implementate de browser

servere de aplicații Web framework-uri biblioteci componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele(ldquocontent is kingrdquo)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

recurgerea la modele diverserelațional ndash interogare via SQL (Structured Query Language)

bazat pe grafuri ndash o fațetă a bdquomișcăriirdquo NoSQLcheie-valoare ndash eg formatul JSON (JavaScript Object Notation)

arborescent ndash XML (Extensible Markup Language)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

conținut cong ltmarcajeHTML versiune=51 gt + foi de stiluri CSS agrave la mode

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

aceste conținuturi sunt stocate

icircn documente (pagini) Web

mai general resurse Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resursele vor fi identificate printr-o adresă WebURL (Uniform Resource Locator)

exemplu httpwwwslidesharecombusacopresentations

identificator unic

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

paginile Web ndash uzual documente HTML ndashinclud referințe către alte resurse de interes

via adrese (URL-uri)hipertext (hipermedia)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web-ul reprezintă un graf hipermedia

explorat pe baza interacțiunii cu utilizatorul via URL-uri

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

la nivel de server Web resursele (conținuturile) solicitate de client ndash via un URL ndash sunt fie stocate static

(ie create manual) fie generate dinamic ndash pe baza unor programe implementacircnd diverși algoritmi

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

transferul datelor icircntre client și server e stabilit de un protocol de comunicație

HTTP (HyperText Transfer Protocol)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

codificarea datelor

Unicode

nume de domenii

DNS

protocoaleleInternetTCPIP

adrese WebURI = URL + URN

protocoale WebHTTP HTTPShellip

a b c hellip zș б ө Ϟ ঢ়ល ꑸⵙ ⋇ 120092

edu org info rouaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

sit Websistem găzduind o serie de pagini (resurse) Web icircnrudite

ale unei organizații companii sau persoane

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

aplicație Webcolecție interconectată de pagini Web cu conținut generat

dinamic oferind o funcționalitate specifică

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Webbdquodialogulrdquo dintre utilizator(i) și aplicație are loc

via o interfață Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Web

uzual sit Web = aplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coexemple de aplicații Web

Cloud9 Coursera Devdocsio

Dropbox GitHub infouaicro

Instagram JSBin Medium

OpenStreetMap PHPMyAdmin

Reddit Quora SlideShare

TEDcom Tumblr Vimeo

webmin Wikipedia WordPress

hellipși multe multe multe altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

accesul la date poate fi realizat via (micro-)servicii Websoftware oferind o funcționalitate specifică icircn urma căreia se obțin date de interes ndash uzual apelacircnd la

un API (Application Programming Interface)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Care e arhitectura generică

a unei aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

tipic o aplicație Web implică trei strate (3-tier)

client server de aplicații stocare(interface) (application) (persistence)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Sponge Database

Jelly Business Logic

Custard Page Logic

Cream Markup

Fruit Presentation

C Henderson Scalable Web Architectures Web 20 Expo 2007 iamcalcomtalks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 1 cea mai importantă este interfața

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

standarde deschisestructurarea conținutului HTML (HyperText Markup Language)

stiluri de prezentare a datelor CSS (Cascading Style Sheets)transfer asincron Ajax (Asynchronous JavaScript And XML)

ilustrații 2D icircn format vectorial SVG (Scalable Vector Graphics)conținut 3D WebGL

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 2 cel mai important este programul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

server C Go Java JavaScript PHP Python Ruby Scala etcclient JavaScript + API-uri HTML5 implementate de browser

servere de aplicații Web framework-uri biblioteci componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele(ldquocontent is kingrdquo)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

recurgerea la modele diverserelațional ndash interogare via SQL (Structured Query Language)

bazat pe grafuri ndash o fațetă a bdquomișcăriirdquo NoSQLcheie-valoare ndash eg formatul JSON (JavaScript Object Notation)

arborescent ndash XML (Extensible Markup Language)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

aceste conținuturi sunt stocate

icircn documente (pagini) Web

mai general resurse Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resursele vor fi identificate printr-o adresă WebURL (Uniform Resource Locator)

exemplu httpwwwslidesharecombusacopresentations

identificator unic

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

paginile Web ndash uzual documente HTML ndashinclud referințe către alte resurse de interes

via adrese (URL-uri)hipertext (hipermedia)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web-ul reprezintă un graf hipermedia

explorat pe baza interacțiunii cu utilizatorul via URL-uri

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

la nivel de server Web resursele (conținuturile) solicitate de client ndash via un URL ndash sunt fie stocate static

(ie create manual) fie generate dinamic ndash pe baza unor programe implementacircnd diverși algoritmi

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

transferul datelor icircntre client și server e stabilit de un protocol de comunicație

HTTP (HyperText Transfer Protocol)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

codificarea datelor

Unicode

nume de domenii

DNS

protocoaleleInternetTCPIP

adrese WebURI = URL + URN

protocoale WebHTTP HTTPShellip

a b c hellip zș б ө Ϟ ঢ়ល ꑸⵙ ⋇ 120092

edu org info rouaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

sit Websistem găzduind o serie de pagini (resurse) Web icircnrudite

ale unei organizații companii sau persoane

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

aplicație Webcolecție interconectată de pagini Web cu conținut generat

dinamic oferind o funcționalitate specifică

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Webbdquodialogulrdquo dintre utilizator(i) și aplicație are loc

via o interfață Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Web

uzual sit Web = aplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coexemple de aplicații Web

Cloud9 Coursera Devdocsio

Dropbox GitHub infouaicro

Instagram JSBin Medium

OpenStreetMap PHPMyAdmin

Reddit Quora SlideShare

TEDcom Tumblr Vimeo

webmin Wikipedia WordPress

hellipși multe multe multe altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

accesul la date poate fi realizat via (micro-)servicii Websoftware oferind o funcționalitate specifică icircn urma căreia se obțin date de interes ndash uzual apelacircnd la

un API (Application Programming Interface)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Care e arhitectura generică

a unei aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

tipic o aplicație Web implică trei strate (3-tier)

client server de aplicații stocare(interface) (application) (persistence)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Sponge Database

Jelly Business Logic

Custard Page Logic

Cream Markup

Fruit Presentation

C Henderson Scalable Web Architectures Web 20 Expo 2007 iamcalcomtalks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 1 cea mai importantă este interfața

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

standarde deschisestructurarea conținutului HTML (HyperText Markup Language)

stiluri de prezentare a datelor CSS (Cascading Style Sheets)transfer asincron Ajax (Asynchronous JavaScript And XML)

ilustrații 2D icircn format vectorial SVG (Scalable Vector Graphics)conținut 3D WebGL

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 2 cel mai important este programul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

server C Go Java JavaScript PHP Python Ruby Scala etcclient JavaScript + API-uri HTML5 implementate de browser

servere de aplicații Web framework-uri biblioteci componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele(ldquocontent is kingrdquo)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

recurgerea la modele diverserelațional ndash interogare via SQL (Structured Query Language)

bazat pe grafuri ndash o fațetă a bdquomișcăriirdquo NoSQLcheie-valoare ndash eg formatul JSON (JavaScript Object Notation)

arborescent ndash XML (Extensible Markup Language)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resursele vor fi identificate printr-o adresă WebURL (Uniform Resource Locator)

exemplu httpwwwslidesharecombusacopresentations

identificator unic

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

paginile Web ndash uzual documente HTML ndashinclud referințe către alte resurse de interes

via adrese (URL-uri)hipertext (hipermedia)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web-ul reprezintă un graf hipermedia

explorat pe baza interacțiunii cu utilizatorul via URL-uri

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

la nivel de server Web resursele (conținuturile) solicitate de client ndash via un URL ndash sunt fie stocate static

(ie create manual) fie generate dinamic ndash pe baza unor programe implementacircnd diverși algoritmi

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

transferul datelor icircntre client și server e stabilit de un protocol de comunicație

HTTP (HyperText Transfer Protocol)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

codificarea datelor

Unicode

nume de domenii

DNS

protocoaleleInternetTCPIP

adrese WebURI = URL + URN

protocoale WebHTTP HTTPShellip

a b c hellip zș б ө Ϟ ঢ়ល ꑸⵙ ⋇ 120092

edu org info rouaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

sit Websistem găzduind o serie de pagini (resurse) Web icircnrudite

ale unei organizații companii sau persoane

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

aplicație Webcolecție interconectată de pagini Web cu conținut generat

dinamic oferind o funcționalitate specifică

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Webbdquodialogulrdquo dintre utilizator(i) și aplicație are loc

via o interfață Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Web

uzual sit Web = aplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coexemple de aplicații Web

Cloud9 Coursera Devdocsio

Dropbox GitHub infouaicro

Instagram JSBin Medium

OpenStreetMap PHPMyAdmin

Reddit Quora SlideShare

TEDcom Tumblr Vimeo

webmin Wikipedia WordPress

hellipși multe multe multe altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

accesul la date poate fi realizat via (micro-)servicii Websoftware oferind o funcționalitate specifică icircn urma căreia se obțin date de interes ndash uzual apelacircnd la

un API (Application Programming Interface)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Care e arhitectura generică

a unei aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

tipic o aplicație Web implică trei strate (3-tier)

client server de aplicații stocare(interface) (application) (persistence)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Sponge Database

Jelly Business Logic

Custard Page Logic

Cream Markup

Fruit Presentation

C Henderson Scalable Web Architectures Web 20 Expo 2007 iamcalcomtalks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 1 cea mai importantă este interfața

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

standarde deschisestructurarea conținutului HTML (HyperText Markup Language)

stiluri de prezentare a datelor CSS (Cascading Style Sheets)transfer asincron Ajax (Asynchronous JavaScript And XML)

ilustrații 2D icircn format vectorial SVG (Scalable Vector Graphics)conținut 3D WebGL

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 2 cel mai important este programul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

server C Go Java JavaScript PHP Python Ruby Scala etcclient JavaScript + API-uri HTML5 implementate de browser

servere de aplicații Web framework-uri biblioteci componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele(ldquocontent is kingrdquo)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

recurgerea la modele diverserelațional ndash interogare via SQL (Structured Query Language)

bazat pe grafuri ndash o fațetă a bdquomișcăriirdquo NoSQLcheie-valoare ndash eg formatul JSON (JavaScript Object Notation)

arborescent ndash XML (Extensible Markup Language)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

paginile Web ndash uzual documente HTML ndashinclud referințe către alte resurse de interes

via adrese (URL-uri)hipertext (hipermedia)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web-ul reprezintă un graf hipermedia

explorat pe baza interacțiunii cu utilizatorul via URL-uri

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

la nivel de server Web resursele (conținuturile) solicitate de client ndash via un URL ndash sunt fie stocate static

(ie create manual) fie generate dinamic ndash pe baza unor programe implementacircnd diverși algoritmi

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

transferul datelor icircntre client și server e stabilit de un protocol de comunicație

HTTP (HyperText Transfer Protocol)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

codificarea datelor

Unicode

nume de domenii

DNS

protocoaleleInternetTCPIP

adrese WebURI = URL + URN

protocoale WebHTTP HTTPShellip

a b c hellip zș б ө Ϟ ঢ়ល ꑸⵙ ⋇ 120092

edu org info rouaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

sit Websistem găzduind o serie de pagini (resurse) Web icircnrudite

ale unei organizații companii sau persoane

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

aplicație Webcolecție interconectată de pagini Web cu conținut generat

dinamic oferind o funcționalitate specifică

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Webbdquodialogulrdquo dintre utilizator(i) și aplicație are loc

via o interfață Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Web

uzual sit Web = aplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coexemple de aplicații Web

Cloud9 Coursera Devdocsio

Dropbox GitHub infouaicro

Instagram JSBin Medium

OpenStreetMap PHPMyAdmin

Reddit Quora SlideShare

TEDcom Tumblr Vimeo

webmin Wikipedia WordPress

hellipși multe multe multe altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

accesul la date poate fi realizat via (micro-)servicii Websoftware oferind o funcționalitate specifică icircn urma căreia se obțin date de interes ndash uzual apelacircnd la

un API (Application Programming Interface)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Care e arhitectura generică

a unei aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

tipic o aplicație Web implică trei strate (3-tier)

client server de aplicații stocare(interface) (application) (persistence)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Sponge Database

Jelly Business Logic

Custard Page Logic

Cream Markup

Fruit Presentation

C Henderson Scalable Web Architectures Web 20 Expo 2007 iamcalcomtalks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 1 cea mai importantă este interfața

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

standarde deschisestructurarea conținutului HTML (HyperText Markup Language)

stiluri de prezentare a datelor CSS (Cascading Style Sheets)transfer asincron Ajax (Asynchronous JavaScript And XML)

ilustrații 2D icircn format vectorial SVG (Scalable Vector Graphics)conținut 3D WebGL

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 2 cel mai important este programul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

server C Go Java JavaScript PHP Python Ruby Scala etcclient JavaScript + API-uri HTML5 implementate de browser

servere de aplicații Web framework-uri biblioteci componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele(ldquocontent is kingrdquo)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

recurgerea la modele diverserelațional ndash interogare via SQL (Structured Query Language)

bazat pe grafuri ndash o fațetă a bdquomișcăriirdquo NoSQLcheie-valoare ndash eg formatul JSON (JavaScript Object Notation)

arborescent ndash XML (Extensible Markup Language)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web-ul reprezintă un graf hipermedia

explorat pe baza interacțiunii cu utilizatorul via URL-uri

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

la nivel de server Web resursele (conținuturile) solicitate de client ndash via un URL ndash sunt fie stocate static

(ie create manual) fie generate dinamic ndash pe baza unor programe implementacircnd diverși algoritmi

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

transferul datelor icircntre client și server e stabilit de un protocol de comunicație

HTTP (HyperText Transfer Protocol)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

codificarea datelor

Unicode

nume de domenii

DNS

protocoaleleInternetTCPIP

adrese WebURI = URL + URN

protocoale WebHTTP HTTPShellip

a b c hellip zș б ө Ϟ ঢ়ល ꑸⵙ ⋇ 120092

edu org info rouaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

sit Websistem găzduind o serie de pagini (resurse) Web icircnrudite

ale unei organizații companii sau persoane

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

aplicație Webcolecție interconectată de pagini Web cu conținut generat

dinamic oferind o funcționalitate specifică

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Webbdquodialogulrdquo dintre utilizator(i) și aplicație are loc

via o interfață Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Web

uzual sit Web = aplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coexemple de aplicații Web

Cloud9 Coursera Devdocsio

Dropbox GitHub infouaicro

Instagram JSBin Medium

OpenStreetMap PHPMyAdmin

Reddit Quora SlideShare

TEDcom Tumblr Vimeo

webmin Wikipedia WordPress

hellipși multe multe multe altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

accesul la date poate fi realizat via (micro-)servicii Websoftware oferind o funcționalitate specifică icircn urma căreia se obțin date de interes ndash uzual apelacircnd la

un API (Application Programming Interface)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Care e arhitectura generică

a unei aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

tipic o aplicație Web implică trei strate (3-tier)

client server de aplicații stocare(interface) (application) (persistence)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Sponge Database

Jelly Business Logic

Custard Page Logic

Cream Markup

Fruit Presentation

C Henderson Scalable Web Architectures Web 20 Expo 2007 iamcalcomtalks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 1 cea mai importantă este interfața

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

standarde deschisestructurarea conținutului HTML (HyperText Markup Language)

stiluri de prezentare a datelor CSS (Cascading Style Sheets)transfer asincron Ajax (Asynchronous JavaScript And XML)

ilustrații 2D icircn format vectorial SVG (Scalable Vector Graphics)conținut 3D WebGL

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 2 cel mai important este programul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

server C Go Java JavaScript PHP Python Ruby Scala etcclient JavaScript + API-uri HTML5 implementate de browser

servere de aplicații Web framework-uri biblioteci componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele(ldquocontent is kingrdquo)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

recurgerea la modele diverserelațional ndash interogare via SQL (Structured Query Language)

bazat pe grafuri ndash o fațetă a bdquomișcăriirdquo NoSQLcheie-valoare ndash eg formatul JSON (JavaScript Object Notation)

arborescent ndash XML (Extensible Markup Language)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

la nivel de server Web resursele (conținuturile) solicitate de client ndash via un URL ndash sunt fie stocate static

(ie create manual) fie generate dinamic ndash pe baza unor programe implementacircnd diverși algoritmi

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

transferul datelor icircntre client și server e stabilit de un protocol de comunicație

HTTP (HyperText Transfer Protocol)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

codificarea datelor

Unicode

nume de domenii

DNS

protocoaleleInternetTCPIP

adrese WebURI = URL + URN

protocoale WebHTTP HTTPShellip

a b c hellip zș б ө Ϟ ঢ়ល ꑸⵙ ⋇ 120092

edu org info rouaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

sit Websistem găzduind o serie de pagini (resurse) Web icircnrudite

ale unei organizații companii sau persoane

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

aplicație Webcolecție interconectată de pagini Web cu conținut generat

dinamic oferind o funcționalitate specifică

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Webbdquodialogulrdquo dintre utilizator(i) și aplicație are loc

via o interfață Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Web

uzual sit Web = aplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coexemple de aplicații Web

Cloud9 Coursera Devdocsio

Dropbox GitHub infouaicro

Instagram JSBin Medium

OpenStreetMap PHPMyAdmin

Reddit Quora SlideShare

TEDcom Tumblr Vimeo

webmin Wikipedia WordPress

hellipși multe multe multe altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

accesul la date poate fi realizat via (micro-)servicii Websoftware oferind o funcționalitate specifică icircn urma căreia se obțin date de interes ndash uzual apelacircnd la

un API (Application Programming Interface)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Care e arhitectura generică

a unei aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

tipic o aplicație Web implică trei strate (3-tier)

client server de aplicații stocare(interface) (application) (persistence)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Sponge Database

Jelly Business Logic

Custard Page Logic

Cream Markup

Fruit Presentation

C Henderson Scalable Web Architectures Web 20 Expo 2007 iamcalcomtalks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 1 cea mai importantă este interfața

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

standarde deschisestructurarea conținutului HTML (HyperText Markup Language)

stiluri de prezentare a datelor CSS (Cascading Style Sheets)transfer asincron Ajax (Asynchronous JavaScript And XML)

ilustrații 2D icircn format vectorial SVG (Scalable Vector Graphics)conținut 3D WebGL

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 2 cel mai important este programul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

server C Go Java JavaScript PHP Python Ruby Scala etcclient JavaScript + API-uri HTML5 implementate de browser

servere de aplicații Web framework-uri biblioteci componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele(ldquocontent is kingrdquo)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

recurgerea la modele diverserelațional ndash interogare via SQL (Structured Query Language)

bazat pe grafuri ndash o fațetă a bdquomișcăriirdquo NoSQLcheie-valoare ndash eg formatul JSON (JavaScript Object Notation)

arborescent ndash XML (Extensible Markup Language)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

transferul datelor icircntre client și server e stabilit de un protocol de comunicație

HTTP (HyperText Transfer Protocol)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

codificarea datelor

Unicode

nume de domenii

DNS

protocoaleleInternetTCPIP

adrese WebURI = URL + URN

protocoale WebHTTP HTTPShellip

a b c hellip zș б ө Ϟ ঢ়ល ꑸⵙ ⋇ 120092

edu org info rouaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

sit Websistem găzduind o serie de pagini (resurse) Web icircnrudite

ale unei organizații companii sau persoane

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

aplicație Webcolecție interconectată de pagini Web cu conținut generat

dinamic oferind o funcționalitate specifică

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Webbdquodialogulrdquo dintre utilizator(i) și aplicație are loc

via o interfață Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Web

uzual sit Web = aplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coexemple de aplicații Web

Cloud9 Coursera Devdocsio

Dropbox GitHub infouaicro

Instagram JSBin Medium

OpenStreetMap PHPMyAdmin

Reddit Quora SlideShare

TEDcom Tumblr Vimeo

webmin Wikipedia WordPress

hellipși multe multe multe altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

accesul la date poate fi realizat via (micro-)servicii Websoftware oferind o funcționalitate specifică icircn urma căreia se obțin date de interes ndash uzual apelacircnd la

un API (Application Programming Interface)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Care e arhitectura generică

a unei aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

tipic o aplicație Web implică trei strate (3-tier)

client server de aplicații stocare(interface) (application) (persistence)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Sponge Database

Jelly Business Logic

Custard Page Logic

Cream Markup

Fruit Presentation

C Henderson Scalable Web Architectures Web 20 Expo 2007 iamcalcomtalks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 1 cea mai importantă este interfața

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

standarde deschisestructurarea conținutului HTML (HyperText Markup Language)

stiluri de prezentare a datelor CSS (Cascading Style Sheets)transfer asincron Ajax (Asynchronous JavaScript And XML)

ilustrații 2D icircn format vectorial SVG (Scalable Vector Graphics)conținut 3D WebGL

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 2 cel mai important este programul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

server C Go Java JavaScript PHP Python Ruby Scala etcclient JavaScript + API-uri HTML5 implementate de browser

servere de aplicații Web framework-uri biblioteci componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele(ldquocontent is kingrdquo)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

recurgerea la modele diverserelațional ndash interogare via SQL (Structured Query Language)

bazat pe grafuri ndash o fațetă a bdquomișcăriirdquo NoSQLcheie-valoare ndash eg formatul JSON (JavaScript Object Notation)

arborescent ndash XML (Extensible Markup Language)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

codificarea datelor

Unicode

nume de domenii

DNS

protocoaleleInternetTCPIP

adrese WebURI = URL + URN

protocoale WebHTTP HTTPShellip

a b c hellip zș б ө Ϟ ঢ়ល ꑸⵙ ⋇ 120092

edu org info rouaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

sit Websistem găzduind o serie de pagini (resurse) Web icircnrudite

ale unei organizații companii sau persoane

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

aplicație Webcolecție interconectată de pagini Web cu conținut generat

dinamic oferind o funcționalitate specifică

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Webbdquodialogulrdquo dintre utilizator(i) și aplicație are loc

via o interfață Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Web

uzual sit Web = aplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coexemple de aplicații Web

Cloud9 Coursera Devdocsio

Dropbox GitHub infouaicro

Instagram JSBin Medium

OpenStreetMap PHPMyAdmin

Reddit Quora SlideShare

TEDcom Tumblr Vimeo

webmin Wikipedia WordPress

hellipși multe multe multe altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

accesul la date poate fi realizat via (micro-)servicii Websoftware oferind o funcționalitate specifică icircn urma căreia se obțin date de interes ndash uzual apelacircnd la

un API (Application Programming Interface)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Care e arhitectura generică

a unei aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

tipic o aplicație Web implică trei strate (3-tier)

client server de aplicații stocare(interface) (application) (persistence)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Sponge Database

Jelly Business Logic

Custard Page Logic

Cream Markup

Fruit Presentation

C Henderson Scalable Web Architectures Web 20 Expo 2007 iamcalcomtalks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 1 cea mai importantă este interfața

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

standarde deschisestructurarea conținutului HTML (HyperText Markup Language)

stiluri de prezentare a datelor CSS (Cascading Style Sheets)transfer asincron Ajax (Asynchronous JavaScript And XML)

ilustrații 2D icircn format vectorial SVG (Scalable Vector Graphics)conținut 3D WebGL

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 2 cel mai important este programul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

server C Go Java JavaScript PHP Python Ruby Scala etcclient JavaScript + API-uri HTML5 implementate de browser

servere de aplicații Web framework-uri biblioteci componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele(ldquocontent is kingrdquo)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

recurgerea la modele diverserelațional ndash interogare via SQL (Structured Query Language)

bazat pe grafuri ndash o fațetă a bdquomișcăriirdquo NoSQLcheie-valoare ndash eg formatul JSON (JavaScript Object Notation)

arborescent ndash XML (Extensible Markup Language)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

sit Websistem găzduind o serie de pagini (resurse) Web icircnrudite

ale unei organizații companii sau persoane

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

aplicație Webcolecție interconectată de pagini Web cu conținut generat

dinamic oferind o funcționalitate specifică

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Webbdquodialogulrdquo dintre utilizator(i) și aplicație are loc

via o interfață Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Web

uzual sit Web = aplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coexemple de aplicații Web

Cloud9 Coursera Devdocsio

Dropbox GitHub infouaicro

Instagram JSBin Medium

OpenStreetMap PHPMyAdmin

Reddit Quora SlideShare

TEDcom Tumblr Vimeo

webmin Wikipedia WordPress

hellipși multe multe multe altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

accesul la date poate fi realizat via (micro-)servicii Websoftware oferind o funcționalitate specifică icircn urma căreia se obțin date de interes ndash uzual apelacircnd la

un API (Application Programming Interface)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Care e arhitectura generică

a unei aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

tipic o aplicație Web implică trei strate (3-tier)

client server de aplicații stocare(interface) (application) (persistence)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Sponge Database

Jelly Business Logic

Custard Page Logic

Cream Markup

Fruit Presentation

C Henderson Scalable Web Architectures Web 20 Expo 2007 iamcalcomtalks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 1 cea mai importantă este interfața

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

standarde deschisestructurarea conținutului HTML (HyperText Markup Language)

stiluri de prezentare a datelor CSS (Cascading Style Sheets)transfer asincron Ajax (Asynchronous JavaScript And XML)

ilustrații 2D icircn format vectorial SVG (Scalable Vector Graphics)conținut 3D WebGL

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 2 cel mai important este programul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

server C Go Java JavaScript PHP Python Ruby Scala etcclient JavaScript + API-uri HTML5 implementate de browser

servere de aplicații Web framework-uri biblioteci componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele(ldquocontent is kingrdquo)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

recurgerea la modele diverserelațional ndash interogare via SQL (Structured Query Language)

bazat pe grafuri ndash o fațetă a bdquomișcăriirdquo NoSQLcheie-valoare ndash eg formatul JSON (JavaScript Object Notation)

arborescent ndash XML (Extensible Markup Language)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

sit Websistem găzduind o serie de pagini (resurse) Web icircnrudite

ale unei organizații companii sau persoane

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

aplicație Webcolecție interconectată de pagini Web cu conținut generat

dinamic oferind o funcționalitate specifică

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Webbdquodialogulrdquo dintre utilizator(i) și aplicație are loc

via o interfață Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Web

uzual sit Web = aplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coexemple de aplicații Web

Cloud9 Coursera Devdocsio

Dropbox GitHub infouaicro

Instagram JSBin Medium

OpenStreetMap PHPMyAdmin

Reddit Quora SlideShare

TEDcom Tumblr Vimeo

webmin Wikipedia WordPress

hellipși multe multe multe altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

accesul la date poate fi realizat via (micro-)servicii Websoftware oferind o funcționalitate specifică icircn urma căreia se obțin date de interes ndash uzual apelacircnd la

un API (Application Programming Interface)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Care e arhitectura generică

a unei aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

tipic o aplicație Web implică trei strate (3-tier)

client server de aplicații stocare(interface) (application) (persistence)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Sponge Database

Jelly Business Logic

Custard Page Logic

Cream Markup

Fruit Presentation

C Henderson Scalable Web Architectures Web 20 Expo 2007 iamcalcomtalks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 1 cea mai importantă este interfața

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

standarde deschisestructurarea conținutului HTML (HyperText Markup Language)

stiluri de prezentare a datelor CSS (Cascading Style Sheets)transfer asincron Ajax (Asynchronous JavaScript And XML)

ilustrații 2D icircn format vectorial SVG (Scalable Vector Graphics)conținut 3D WebGL

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 2 cel mai important este programul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

server C Go Java JavaScript PHP Python Ruby Scala etcclient JavaScript + API-uri HTML5 implementate de browser

servere de aplicații Web framework-uri biblioteci componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele(ldquocontent is kingrdquo)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

recurgerea la modele diverserelațional ndash interogare via SQL (Structured Query Language)

bazat pe grafuri ndash o fațetă a bdquomișcăriirdquo NoSQLcheie-valoare ndash eg formatul JSON (JavaScript Object Notation)

arborescent ndash XML (Extensible Markup Language)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

sit Websistem găzduind o serie de pagini (resurse) Web icircnrudite

ale unei organizații companii sau persoane

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

aplicație Webcolecție interconectată de pagini Web cu conținut generat

dinamic oferind o funcționalitate specifică

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Webbdquodialogulrdquo dintre utilizator(i) și aplicație are loc

via o interfață Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Web

uzual sit Web = aplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coexemple de aplicații Web

Cloud9 Coursera Devdocsio

Dropbox GitHub infouaicro

Instagram JSBin Medium

OpenStreetMap PHPMyAdmin

Reddit Quora SlideShare

TEDcom Tumblr Vimeo

webmin Wikipedia WordPress

hellipși multe multe multe altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

accesul la date poate fi realizat via (micro-)servicii Websoftware oferind o funcționalitate specifică icircn urma căreia se obțin date de interes ndash uzual apelacircnd la

un API (Application Programming Interface)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Care e arhitectura generică

a unei aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

tipic o aplicație Web implică trei strate (3-tier)

client server de aplicații stocare(interface) (application) (persistence)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Sponge Database

Jelly Business Logic

Custard Page Logic

Cream Markup

Fruit Presentation

C Henderson Scalable Web Architectures Web 20 Expo 2007 iamcalcomtalks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 1 cea mai importantă este interfața

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

standarde deschisestructurarea conținutului HTML (HyperText Markup Language)

stiluri de prezentare a datelor CSS (Cascading Style Sheets)transfer asincron Ajax (Asynchronous JavaScript And XML)

ilustrații 2D icircn format vectorial SVG (Scalable Vector Graphics)conținut 3D WebGL

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 2 cel mai important este programul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

server C Go Java JavaScript PHP Python Ruby Scala etcclient JavaScript + API-uri HTML5 implementate de browser

servere de aplicații Web framework-uri biblioteci componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele(ldquocontent is kingrdquo)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

recurgerea la modele diverserelațional ndash interogare via SQL (Structured Query Language)

bazat pe grafuri ndash o fațetă a bdquomișcăriirdquo NoSQLcheie-valoare ndash eg formatul JSON (JavaScript Object Notation)

arborescent ndash XML (Extensible Markup Language)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

aplicație Webcolecție interconectată de pagini Web cu conținut generat

dinamic oferind o funcționalitate specifică

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Webbdquodialogulrdquo dintre utilizator(i) și aplicație are loc

via o interfață Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Web

uzual sit Web = aplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coexemple de aplicații Web

Cloud9 Coursera Devdocsio

Dropbox GitHub infouaicro

Instagram JSBin Medium

OpenStreetMap PHPMyAdmin

Reddit Quora SlideShare

TEDcom Tumblr Vimeo

webmin Wikipedia WordPress

hellipși multe multe multe altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

accesul la date poate fi realizat via (micro-)servicii Websoftware oferind o funcționalitate specifică icircn urma căreia se obțin date de interes ndash uzual apelacircnd la

un API (Application Programming Interface)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Care e arhitectura generică

a unei aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

tipic o aplicație Web implică trei strate (3-tier)

client server de aplicații stocare(interface) (application) (persistence)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Sponge Database

Jelly Business Logic

Custard Page Logic

Cream Markup

Fruit Presentation

C Henderson Scalable Web Architectures Web 20 Expo 2007 iamcalcomtalks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 1 cea mai importantă este interfața

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

standarde deschisestructurarea conținutului HTML (HyperText Markup Language)

stiluri de prezentare a datelor CSS (Cascading Style Sheets)transfer asincron Ajax (Asynchronous JavaScript And XML)

ilustrații 2D icircn format vectorial SVG (Scalable Vector Graphics)conținut 3D WebGL

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 2 cel mai important este programul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

server C Go Java JavaScript PHP Python Ruby Scala etcclient JavaScript + API-uri HTML5 implementate de browser

servere de aplicații Web framework-uri biblioteci componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele(ldquocontent is kingrdquo)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

recurgerea la modele diverserelațional ndash interogare via SQL (Structured Query Language)

bazat pe grafuri ndash o fațetă a bdquomișcăriirdquo NoSQLcheie-valoare ndash eg formatul JSON (JavaScript Object Notation)

arborescent ndash XML (Extensible Markup Language)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Webbdquodialogulrdquo dintre utilizator(i) și aplicație are loc

via o interfață Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Web

uzual sit Web = aplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coexemple de aplicații Web

Cloud9 Coursera Devdocsio

Dropbox GitHub infouaicro

Instagram JSBin Medium

OpenStreetMap PHPMyAdmin

Reddit Quora SlideShare

TEDcom Tumblr Vimeo

webmin Wikipedia WordPress

hellipși multe multe multe altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

accesul la date poate fi realizat via (micro-)servicii Websoftware oferind o funcționalitate specifică icircn urma căreia se obțin date de interes ndash uzual apelacircnd la

un API (Application Programming Interface)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Care e arhitectura generică

a unei aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

tipic o aplicație Web implică trei strate (3-tier)

client server de aplicații stocare(interface) (application) (persistence)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Sponge Database

Jelly Business Logic

Custard Page Logic

Cream Markup

Fruit Presentation

C Henderson Scalable Web Architectures Web 20 Expo 2007 iamcalcomtalks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 1 cea mai importantă este interfața

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

standarde deschisestructurarea conținutului HTML (HyperText Markup Language)

stiluri de prezentare a datelor CSS (Cascading Style Sheets)transfer asincron Ajax (Asynchronous JavaScript And XML)

ilustrații 2D icircn format vectorial SVG (Scalable Vector Graphics)conținut 3D WebGL

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 2 cel mai important este programul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

server C Go Java JavaScript PHP Python Ruby Scala etcclient JavaScript + API-uri HTML5 implementate de browser

servere de aplicații Web framework-uri biblioteci componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele(ldquocontent is kingrdquo)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

recurgerea la modele diverserelațional ndash interogare via SQL (Structured Query Language)

bazat pe grafuri ndash o fațetă a bdquomișcăriirdquo NoSQLcheie-valoare ndash eg formatul JSON (JavaScript Object Notation)

arborescent ndash XML (Extensible Markup Language)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

interacțiune Web

uzual sit Web = aplicație Web

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coexemple de aplicații Web

Cloud9 Coursera Devdocsio

Dropbox GitHub infouaicro

Instagram JSBin Medium

OpenStreetMap PHPMyAdmin

Reddit Quora SlideShare

TEDcom Tumblr Vimeo

webmin Wikipedia WordPress

hellipși multe multe multe altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

accesul la date poate fi realizat via (micro-)servicii Websoftware oferind o funcționalitate specifică icircn urma căreia se obțin date de interes ndash uzual apelacircnd la

un API (Application Programming Interface)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Care e arhitectura generică

a unei aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

tipic o aplicație Web implică trei strate (3-tier)

client server de aplicații stocare(interface) (application) (persistence)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Sponge Database

Jelly Business Logic

Custard Page Logic

Cream Markup

Fruit Presentation

C Henderson Scalable Web Architectures Web 20 Expo 2007 iamcalcomtalks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 1 cea mai importantă este interfața

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

standarde deschisestructurarea conținutului HTML (HyperText Markup Language)

stiluri de prezentare a datelor CSS (Cascading Style Sheets)transfer asincron Ajax (Asynchronous JavaScript And XML)

ilustrații 2D icircn format vectorial SVG (Scalable Vector Graphics)conținut 3D WebGL

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 2 cel mai important este programul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

server C Go Java JavaScript PHP Python Ruby Scala etcclient JavaScript + API-uri HTML5 implementate de browser

servere de aplicații Web framework-uri biblioteci componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele(ldquocontent is kingrdquo)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

recurgerea la modele diverserelațional ndash interogare via SQL (Structured Query Language)

bazat pe grafuri ndash o fațetă a bdquomișcăriirdquo NoSQLcheie-valoare ndash eg formatul JSON (JavaScript Object Notation)

arborescent ndash XML (Extensible Markup Language)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coexemple de aplicații Web

Cloud9 Coursera Devdocsio

Dropbox GitHub infouaicro

Instagram JSBin Medium

OpenStreetMap PHPMyAdmin

Reddit Quora SlideShare

TEDcom Tumblr Vimeo

webmin Wikipedia WordPress

hellipși multe multe multe altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

accesul la date poate fi realizat via (micro-)servicii Websoftware oferind o funcționalitate specifică icircn urma căreia se obțin date de interes ndash uzual apelacircnd la

un API (Application Programming Interface)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Care e arhitectura generică

a unei aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

tipic o aplicație Web implică trei strate (3-tier)

client server de aplicații stocare(interface) (application) (persistence)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Sponge Database

Jelly Business Logic

Custard Page Logic

Cream Markup

Fruit Presentation

C Henderson Scalable Web Architectures Web 20 Expo 2007 iamcalcomtalks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 1 cea mai importantă este interfața

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

standarde deschisestructurarea conținutului HTML (HyperText Markup Language)

stiluri de prezentare a datelor CSS (Cascading Style Sheets)transfer asincron Ajax (Asynchronous JavaScript And XML)

ilustrații 2D icircn format vectorial SVG (Scalable Vector Graphics)conținut 3D WebGL

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 2 cel mai important este programul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

server C Go Java JavaScript PHP Python Ruby Scala etcclient JavaScript + API-uri HTML5 implementate de browser

servere de aplicații Web framework-uri biblioteci componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele(ldquocontent is kingrdquo)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

recurgerea la modele diverserelațional ndash interogare via SQL (Structured Query Language)

bazat pe grafuri ndash o fațetă a bdquomișcăriirdquo NoSQLcheie-valoare ndash eg formatul JSON (JavaScript Object Notation)

arborescent ndash XML (Extensible Markup Language)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

accesul la date poate fi realizat via (micro-)servicii Websoftware oferind o funcționalitate specifică icircn urma căreia se obțin date de interes ndash uzual apelacircnd la

un API (Application Programming Interface)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Care e arhitectura generică

a unei aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

tipic o aplicație Web implică trei strate (3-tier)

client server de aplicații stocare(interface) (application) (persistence)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Sponge Database

Jelly Business Logic

Custard Page Logic

Cream Markup

Fruit Presentation

C Henderson Scalable Web Architectures Web 20 Expo 2007 iamcalcomtalks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 1 cea mai importantă este interfața

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

standarde deschisestructurarea conținutului HTML (HyperText Markup Language)

stiluri de prezentare a datelor CSS (Cascading Style Sheets)transfer asincron Ajax (Asynchronous JavaScript And XML)

ilustrații 2D icircn format vectorial SVG (Scalable Vector Graphics)conținut 3D WebGL

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 2 cel mai important este programul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

server C Go Java JavaScript PHP Python Ruby Scala etcclient JavaScript + API-uri HTML5 implementate de browser

servere de aplicații Web framework-uri biblioteci componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele(ldquocontent is kingrdquo)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

recurgerea la modele diverserelațional ndash interogare via SQL (Structured Query Language)

bazat pe grafuri ndash o fațetă a bdquomișcăriirdquo NoSQLcheie-valoare ndash eg formatul JSON (JavaScript Object Notation)

arborescent ndash XML (Extensible Markup Language)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Server

sitaplicație Web

Date

stocate

persistent

accesul la date poate fi realizat via (micro-)servicii Websoftware oferind o funcționalitate specifică icircn urma căreia se obțin date de interes ndash uzual apelacircnd la

un API (Application Programming Interface)

Client

interfață cu

utilizatorul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Care e arhitectura generică

a unei aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

tipic o aplicație Web implică trei strate (3-tier)

client server de aplicații stocare(interface) (application) (persistence)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Sponge Database

Jelly Business Logic

Custard Page Logic

Cream Markup

Fruit Presentation

C Henderson Scalable Web Architectures Web 20 Expo 2007 iamcalcomtalks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 1 cea mai importantă este interfața

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

standarde deschisestructurarea conținutului HTML (HyperText Markup Language)

stiluri de prezentare a datelor CSS (Cascading Style Sheets)transfer asincron Ajax (Asynchronous JavaScript And XML)

ilustrații 2D icircn format vectorial SVG (Scalable Vector Graphics)conținut 3D WebGL

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 2 cel mai important este programul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

server C Go Java JavaScript PHP Python Ruby Scala etcclient JavaScript + API-uri HTML5 implementate de browser

servere de aplicații Web framework-uri biblioteci componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele(ldquocontent is kingrdquo)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

recurgerea la modele diverserelațional ndash interogare via SQL (Structured Query Language)

bazat pe grafuri ndash o fațetă a bdquomișcăriirdquo NoSQLcheie-valoare ndash eg formatul JSON (JavaScript Object Notation)

arborescent ndash XML (Extensible Markup Language)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Care e arhitectura generică

a unei aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

tipic o aplicație Web implică trei strate (3-tier)

client server de aplicații stocare(interface) (application) (persistence)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Sponge Database

Jelly Business Logic

Custard Page Logic

Cream Markup

Fruit Presentation

C Henderson Scalable Web Architectures Web 20 Expo 2007 iamcalcomtalks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 1 cea mai importantă este interfața

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

standarde deschisestructurarea conținutului HTML (HyperText Markup Language)

stiluri de prezentare a datelor CSS (Cascading Style Sheets)transfer asincron Ajax (Asynchronous JavaScript And XML)

ilustrații 2D icircn format vectorial SVG (Scalable Vector Graphics)conținut 3D WebGL

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 2 cel mai important este programul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

server C Go Java JavaScript PHP Python Ruby Scala etcclient JavaScript + API-uri HTML5 implementate de browser

servere de aplicații Web framework-uri biblioteci componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele(ldquocontent is kingrdquo)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

recurgerea la modele diverserelațional ndash interogare via SQL (Structured Query Language)

bazat pe grafuri ndash o fațetă a bdquomișcăriirdquo NoSQLcheie-valoare ndash eg formatul JSON (JavaScript Object Notation)

arborescent ndash XML (Extensible Markup Language)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

tipic o aplicație Web implică trei strate (3-tier)

client server de aplicații stocare(interface) (application) (persistence)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Sponge Database

Jelly Business Logic

Custard Page Logic

Cream Markup

Fruit Presentation

C Henderson Scalable Web Architectures Web 20 Expo 2007 iamcalcomtalks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 1 cea mai importantă este interfața

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

standarde deschisestructurarea conținutului HTML (HyperText Markup Language)

stiluri de prezentare a datelor CSS (Cascading Style Sheets)transfer asincron Ajax (Asynchronous JavaScript And XML)

ilustrații 2D icircn format vectorial SVG (Scalable Vector Graphics)conținut 3D WebGL

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 2 cel mai important este programul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

server C Go Java JavaScript PHP Python Ruby Scala etcclient JavaScript + API-uri HTML5 implementate de browser

servere de aplicații Web framework-uri biblioteci componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele(ldquocontent is kingrdquo)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

recurgerea la modele diverserelațional ndash interogare via SQL (Structured Query Language)

bazat pe grafuri ndash o fațetă a bdquomișcăriirdquo NoSQLcheie-valoare ndash eg formatul JSON (JavaScript Object Notation)

arborescent ndash XML (Extensible Markup Language)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Sponge Database

Jelly Business Logic

Custard Page Logic

Cream Markup

Fruit Presentation

C Henderson Scalable Web Architectures Web 20 Expo 2007 iamcalcomtalks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 1 cea mai importantă este interfața

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

standarde deschisestructurarea conținutului HTML (HyperText Markup Language)

stiluri de prezentare a datelor CSS (Cascading Style Sheets)transfer asincron Ajax (Asynchronous JavaScript And XML)

ilustrații 2D icircn format vectorial SVG (Scalable Vector Graphics)conținut 3D WebGL

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 2 cel mai important este programul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

server C Go Java JavaScript PHP Python Ruby Scala etcclient JavaScript + API-uri HTML5 implementate de browser

servere de aplicații Web framework-uri biblioteci componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele(ldquocontent is kingrdquo)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

recurgerea la modele diverserelațional ndash interogare via SQL (Structured Query Language)

bazat pe grafuri ndash o fațetă a bdquomișcăriirdquo NoSQLcheie-valoare ndash eg formatul JSON (JavaScript Object Notation)

arborescent ndash XML (Extensible Markup Language)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 1 cea mai importantă este interfața

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

standarde deschisestructurarea conținutului HTML (HyperText Markup Language)

stiluri de prezentare a datelor CSS (Cascading Style Sheets)transfer asincron Ajax (Asynchronous JavaScript And XML)

ilustrații 2D icircn format vectorial SVG (Scalable Vector Graphics)conținut 3D WebGL

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 2 cel mai important este programul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

server C Go Java JavaScript PHP Python Ruby Scala etcclient JavaScript + API-uri HTML5 implementate de browser

servere de aplicații Web framework-uri biblioteci componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele(ldquocontent is kingrdquo)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

recurgerea la modele diverserelațional ndash interogare via SQL (Structured Query Language)

bazat pe grafuri ndash o fațetă a bdquomișcăriirdquo NoSQLcheie-valoare ndash eg formatul JSON (JavaScript Object Notation)

arborescent ndash XML (Extensible Markup Language)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

standarde deschisestructurarea conținutului HTML (HyperText Markup Language)

stiluri de prezentare a datelor CSS (Cascading Style Sheets)transfer asincron Ajax (Asynchronous JavaScript And XML)

ilustrații 2D icircn format vectorial SVG (Scalable Vector Graphics)conținut 3D WebGL

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 2 cel mai important este programul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

server C Go Java JavaScript PHP Python Ruby Scala etcclient JavaScript + API-uri HTML5 implementate de browser

servere de aplicații Web framework-uri biblioteci componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele(ldquocontent is kingrdquo)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

recurgerea la modele diverserelațional ndash interogare via SQL (Structured Query Language)

bazat pe grafuri ndash o fațetă a bdquomișcăriirdquo NoSQLcheie-valoare ndash eg formatul JSON (JavaScript Object Notation)

arborescent ndash XML (Extensible Markup Language)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 2 cel mai important este programul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

server C Go Java JavaScript PHP Python Ruby Scala etcclient JavaScript + API-uri HTML5 implementate de browser

servere de aplicații Web framework-uri biblioteci componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele(ldquocontent is kingrdquo)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

recurgerea la modele diverserelațional ndash interogare via SQL (Structured Query Language)

bazat pe grafuri ndash o fațetă a bdquomișcăriirdquo NoSQLcheie-valoare ndash eg formatul JSON (JavaScript Object Notation)

arborescent ndash XML (Extensible Markup Language)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

server C Go Java JavaScript PHP Python Ruby Scala etcclient JavaScript + API-uri HTML5 implementate de browser

servere de aplicații Web framework-uri biblioteci componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele(ldquocontent is kingrdquo)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

recurgerea la modele diverserelațional ndash interogare via SQL (Structured Query Language)

bazat pe grafuri ndash o fațetă a bdquomișcăriirdquo NoSQLcheie-valoare ndash eg formatul JSON (JavaScript Object Notation)

arborescent ndash XML (Extensible Markup Language)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele(ldquocontent is kingrdquo)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

recurgerea la modele diverserelațional ndash interogare via SQL (Structured Query Language)

bazat pe grafuri ndash o fațetă a bdquomișcăriirdquo NoSQLcheie-valoare ndash eg formatul JSON (JavaScript Object Notation)

arborescent ndash XML (Extensible Markup Language)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

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

recurgerea la modele diverserelațional ndash interogare via SQL (Structured Query Language)

bazat pe grafuri ndash o fațetă a bdquomișcăriirdquo NoSQLcheie-valoare ndash eg formatul JSON (JavaScript Object Notation)

arborescent ndash XML (Extensible Markup Language)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

mitul 1 cea mai importantă este interfațamitul 2 cel mai important este programulmitul 3 cele mai importante sunt datele

fapt sunt importante toate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

demarcarea responsabilităților(separation of concerns)

modelul de structurare a datelor este separatde maniera de procesare (controlul aplicației) și

de modul de prezentare a acestora (interfața Web)

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coView

(prezentare + interacțiune)

Model(structura datelor)

HTML CSS SVG MathML WebGLhellip

SQL JSON XML (XQuery) RDF (SPARQL)

128161servere de aplicații framework-uri etc

arhitectura generică a unei aplicații Webva consta dintr-un set de resurse referitoare la

model view și controller ndash MVC

Controlleraplicație (server șisau client)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

uzual mediul de dezvoltare ndash la nivel de serverclient ndash(ie framework-ul Web) impune o anumită structură

a fișierelor aplicației ce va fi implementată

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app assets images javascripts stylesheets controllers helpers mailers models views layoutsconfigdbdocliblogpublicscripttest fixtures functional integration performance unittmpvendorplugins

bdquoscheletulrdquo unei aplicații Web create icircn Ruby on Rails

rubyonrailsorg

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

app Config Console Controller Lib Locale Model Behavior Datasource Plugin Test tmp Vendor View Elements Errors Helper Layouts Pages Scaffolds webroot css files img jslibpluginsvendors

structura de directoareicircn cazul unei aplicații Web

folosind CakePHPcakephporg

framework-uri PHP similarewwwphpwactorgphpmvc_frameworks

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

appjs packagejsonbindatanode_modules body-parser cookie-parser debug express lib jade morganpublic images javascripts stylesheets stylecssroutes indexjs usersjsviews

errorjadeindexjadelayoutjade

eșafodajul unei aplicații Web bazate pe Express ndash expressjscom

specificarea interfeței (view-ul)via machete de vizualizare

descrise cu JADE jade-langcom

rute vizacircnd deservirea cererilor pe baza URL-urilor solicitate de client

module Nodejs adiționale

conținut static destinat clientului(foi de stiluri CSS biblioteci JS

procesate de browser imaginihellip)

diverse configurări ale aplicației

specificarea modelelor de date

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

pagini ltWebgt

HTML CSShellip

server bdquograsrdquo (fat)

client bdquoprostuțrdquo (dumb)

arhitectura aplicațiilor Webabordarea MVC tradițională

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browser

modern

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSON XMLCSV și altele

server bdquoslabrdquo (thin)

client bdquoputernicrdquo(HTML5)

aplicație JavaScript(eventual via app store)

arhitectura aplicațiilor Webabordarea JavaScript

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

sistem de

operare

prezen-

tare

proce-

sare

abstrac-

tizare

date

recurgere la API

JSONXMLCSV

hellip

server bdquoslabrdquo (thin)

client bdquoistețrdquo(smart device)

aplicație nativăC Java Obj-C Swifthellip

(uzual via app store)

arhitectura aplicațiilor Webaplicații native (desktop mobile smart TV)

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browserprezen-

tare

proce-

sare

abstrac-

tizare

date

API

JSONet al

server bdquoslabrdquo (thin)

client bdquoputernicrdquoșisau bdquoistețrdquo

arhitectura aplicațiilor Webabordarea hibridă ndash eg book reader chioșc informativ

server de prezentare

pagini

HTML

wwwleaseweblabscom201310api-first-architecture-fat-vs-thin-server-debate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128161

Cacircteva exemplificări de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)firewallproxy

middlewareserver(e) Web

server(e) de aplicațiiframework-uri biblioteci alte componente

server(e) de stocare persistentă ndash eg baze de dateserver(e) de conținut multimedia

server(e) de management al conținutului (CMS)aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloud(s)(găzduire infrastructură scalabilă

procesare paralelă monitorizarehellip)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Aplicație Web

Procesare la nivel de server (backend)

Stocare persistentă

eBay Java Nodejs (JavaScript) Oracle DB

FacebookHack PHP (HHVM) Python C++ Java Erlang D Haskell XHP (extensie PHPHack)

MySQL Apache HBaseApache Cassandra

Google C C++ Go Java Python BigTable MariaDB

Linkedin Java JavaScript Scala Voldemort

Pinterest Django (Python) Erlang MySQL Redis

Twitter C++ Java Scala Rails (Ruby)MySQL CassandraHadoop Vertica

Wikipedia PHP Hack MySQLMariaDB

WordPress PHP Nodejs ndash Calypso MySQL

YouTube C C++ Python Java Go BigTable MariaDB

enwikipediaorgwikiProgramming_languages_used_in_most_popular_websites

httpprofsinfouaicro~busacoteachcourseswebweb-filmhtmlweek3

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Netflix

scop oferire de conținut video la cerere (streaming) + televiziune Web (Web TV)

servicii disponibile pe dispozitiveplatforme multiple

recurge și la tehnologii deschise ndash netflixgithubio

studiu de caz

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procesare backend Java Python Nodejs (JavaScript)

procesare frontend React (JavaScript)

sisteme de stocare MySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 (procesare video)Amazon S3 (stocare)

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub

integrare continuă Jenkins

gestionare servere Apache Mesos

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa

highscalabilitycomblog2015119a-360-degree-view-of-the-entire-netflix-stackhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

browsercontrolproce-sare

client bdquoputernicrdquoșisau bdquoistețrdquo

alternativă arhitecturi fără server (serverless)

aplicația Web depinde semnificativ de componente externe disponibile icircn bdquonorirdquo ndash (micro-)servicii

BaaS

Mike Roberts (2016) ndash httpmartinfowlercomarticlesserverlesshtml

func-

ționa-

litate1

func-

ționa-

litate2

auten-

tificare

BaaS = (Mobile) Backend As A Service FaaS = Functions As A Service

FaaS

căutare

procesarecomenzi

BaaS

comenzi

produse

acces la API

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉ 128161

Aspecte importante vizacircnd

dezvoltarea de aplicații Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉aplicații Web sisteme software complexe

icircn evoluție permanentă

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mijloace multiple de interacțiune Web cu utilizatorul

mobil laptop PC tabletă (smart) TV ecran urban

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

creșterea masei de utilizatoriavacircnd așteptări tot mai mari din partea software-ului

de la conținut (hiper)textual la aplicații Web sociale + interacțiune naturală

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

suportul variat privind dezvoltarea de aplicații(limbaje API-uri SDK-uri biblioteci framework-uri)

oferit de platforma hardwaresoftwarela nivel de server(e) șisau de client(i)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

adaptare după Crumlish amp Malone 2009

scopuripsihologie

comportament

⧉ 128161

facilitățitehnologiialgoritmi

indexarestructuraremeta-date

instrumentemetodologii

stimuli

utilizatori interfață software conținut creatori

interacțiunecontroale

limbi naturale

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coEtape icircn dezvoltarea unei aplicații Web

Cerințe ndash requirementsAnaliză și proiectare ndash software design

Implementare ndash buildTestare ndash testing

Exploatare ndash deploymentMentenanță ndash maintenance

Evoluție ndash evolution

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

aplicație Web (produs software)

funcționalitate +

informații oferite

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Vreau să dezvolt un proiect Webhellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

procesul actual de dezvoltare și exploatare a aplicațiilor Web ndash Development As A Service

de parcurs Sabin Buraga Cu codul icircn bdquonorirdquo (2015)httpwwwslidesharenetbusacocu-codul-n-nori

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cod-sursă stocat(code repositories)

instrumente de dezvoltare (IDE)

mediu de execuție(runtime environment)

dezvoltare

rulare

A I

qb

al M

Hau

nse

nb

las

S D

eck

er (

2012

)

DigitalOcean Google Cloud Platform HerokuJelastic OpenStack Windows Azurehellip

BitBucketGitHub

Web Cloud9 Koding Ideone etcdesktop Eclipse Visual Studio Codehellip

instrumente utile la httpsgithubcomripienaarfree-for-dev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Parametrii unui proiect Web

obiectiv principaldurată

costabordare

tehnologiiproceserezultat

resurse umaneprofilul echipei

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

obiectiv principal

crearea unui produs software utilizabilicircn cacirct mai scurt timp posibil

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

durată

aproximativ 2mdash6 luni

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cost

de ordinul miilor de Euro

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

abordare

prototipizare ndash wireframe mockuphellip

metode agile

asamblare de componente reutilizabile

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

tehnologii

componente (servicii Web API-uri publice framework-uri biblioteci plugin-uri extensii etc)

proiectareprogramare bdquovizualărdquo

multimedia

hellipși altele

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

procese

uzual dezvoltarea aplicațiilor Web se realizează iterativbdquonu te aștepta să-ți iasă din primahelliprdquo

understand

study

designbuild

evaluate

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

rezultat

reutilizabilitate mare a coduluirecurgerea la componentelimbajeplatforme standard

aplicații implementate uzual conform standardelor

designul vizual este de cele mai multe ori unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 persoane

ldquoFor the first version of your app start with only 3 peoplerdquohttpsgettingreal37signalscom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

profilul echipei

specialiști icircn interacțiune ndash uzual designeri Web+

dezvoltatori (programatori) Web ndash la nivel clientserver+

arhitecți de baze de date+

specialiști icircn marketing șisau relații cu publicul

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Care-i echipa de dezvoltare

a unei aplicații Web de anvergură

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

managementsite editor

project manager

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

codezvoltare

(arhitectură)

system architect data (content) architect

component architectsecurity architect

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interacțiune cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare

server-side programmersclient-side programmers

datacomponent integration programmers

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

testare

testing leadclient-side tester(s)server-side tester(s)component tester(s)integration tester(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cooperații tehnice

Webmasterhardwarenetwork technicians

network administrator(s)database administrator(s)

backup operatoruptime monitor

security monitor(s)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

marketing

content producer(s)copywriter(s)

content editor(s)branding amp advertising expert(s)

direct e-marketerpublic relations personnel

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

echipa proiectului Web

management

Web Project Manager

funcționalitate

Software Engineer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

frontend sau backend sau full-stack (frontend amp backend)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebDesigner

standarde Web la nivel de client HTML5 CSS3hellip

cunoștințe vizacircnd navigatoarele Web

experiență icircn design vizual + design responsiv

cunoștințe privind interacțiunea Web (mobilă)

familiaritate cu JavaScript (+framework-uribiblioteci)paradigme de interacțiune naturală

(tactilă bazată pe gesturi realitate virtualăicircmbogățită ndash VRAR)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

cel puțin 1 limbaj obiectual ndash la nivel de serverclient

protocoale și standarde Internet + Web

cunoștințe privind baze de date (inclusiv NoSQL șisau XML)

cunoștințe vizacircnd servicii Web

familiar cu alte paradigme de programare(eg funcțională distribuită)

securitate amp performanță Web

Web Developer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Technician

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Maintainer

actualizează conținutulvia o interfață WYSIWYG (de exemplu recurgacircnd la un sistem de management al conținutului ndash CMS sau wiki)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

voluntar pentru proiecte open source (Web-ul ca hobby) pe cont propriu ndash freelancersolopreneur

companie mică ndash eg agenție (web studio)icircn echipa de dezvoltare Web ndash organizație netehnică

icircn echipa unei organizații din IT (eg Apache GitHub)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Cacircteva inițiative (mai) recente

vizacircnd tehnologiile Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Interacțiuni naturale dintre utilizator(i) și aplicațiile Web

tehnologii implementate de navigatorul Web actual inclusiv la nivelul dispozitivelor mobile

wwww3orgMobilemobile-web-app-state

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Grafică 2D3D raster șisau vectorială + animații

HTML5 ltcanvasgt

SVG (Scalable Vector Graphics)

transformări 3D via foi de stiluri CSS (Cascading Style Sheets)

WebGL

a se studia și resursele disponibile lahttpprofsinfouaicro~busacoteachcoursescliwweb-filmhtml

httpprofsinfouaicro~busacoteachcourseshcihci-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

realitate virtuală amp icircmbogățită icircn browser (mobil) șisau folosind un dispozitiv dedicat

WebVR ndash specificație icircn lucru la Consorțiul Web webvrinfo

aframeio

vizorio

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

far (beacon) = dispozitiv fizic capabil să expună un URL

scannerbrowser = entitate ce scanează recunoaște procesează și prezintă un set de URL-uri

proxy = un serviciu Web (icircn bdquonorirdquo) opțional cu rol de protejare a utilizatorului + icircmbunătățire a performanței

resurse de interesgooglegithubiophysical-web

wwwslidesharenetyiibupresentations

experimenthttpsmediumcomurishexploring-the-physical-web-without-buying-beacons-efae51e36c2e

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Web

beacon

difuzareURL

client Web

analiză + optimizare

proxy

aplicațieserviciu Webprocesare resursă

extragere meta-date①

②

③

④

diverse direcții de interes automatizarea spațiilor de locuit (home automation)

industria auto (smart car)reclame contextuale (smart advertising)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

modelarea resurselor ndash date informații cunoștințe ndashdisponibile pe Web pentru a fi bdquoicircnțeleserdquo de calculatoare

standarde Web RDF (Resource Description Framework)

SKOS (Simple Knowledge Organizational System) OWL (Web Ontology Language)

pentru detalii de studiatSabin Buraga Why 5-Star Data (2016)

httpwwwslidesharenetbusacowhy-5star-dataSabin Buraga Dezvoltarea aplicațiilor Web (curs master FII UAIC)

httpprofsinfouaicro~busacoteachcourseswadeweb-filmhtml

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

interogări asupra DBpedia(varianta procesabilă de către mașină a enciclopediei Wikipedia)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

diverse URL-uridesemnacircnd concepte

(things not strings)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Bunhellip Și eu ce fac

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

fii curios și iscoditor

icircnvață(citește + experimentează + cere ajutor + reutilizează)

creează și arată

(design cod-sursă prototipuri exemple demonstrativehellip)

acumuleazăexperiență bdquoaurărdquo statut social etcreputație

concurează

(hellipatacirct de multe oportunități)

ajutăinstruiește pe ceilalți

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succesimagini medievale furnizate de httpdiscardingimagestumblrcom