Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

profsinfouaicro~busaco

hellipicircn 2017

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

coWorld Wide Web

spațiu informațional comun icircn care comunicăm prin interconectarea și partajarea unor elemente

de interes denumite resurse

inventat de Sir Tim Berners-Lee icircn decembrie 1989

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Sir Tim Berners-Lee ndash lauriat al premiului Turingcea mai importantă distincție icircn domeniul informaticii

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 principii amp standarde deschise stipulate de Consorțiul Web

Web for all amp on everythingWeb for rich interactionWeb of data amp services

Web of trust

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

coclient

(realizează cereri)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coclient

(realizează cereri)

server(oferă răspunsuri)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coclient

(realizează cereri)

server(oferă răspunsuri)

protocol(reguli de transfer de date)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

serverWeb

client 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

web

primul client Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

webprimul server Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉clientul Web (navigator ndash browser

player multimedia aplicație nativă rulacircnd pe un calculator bdquoclasicrdquo (desktop) sau pe o platformă

mobilă robot al unui motor de căutarehellip)preiatrimite conținuturi ndash adică date ndash

(de) la un server Web

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

limbajul de marcare a hipertextuluiHTML (HyperText Markup Language)

wwww3orghtml

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

Anca

Bogdan

cunoaște peknows

dețineowns

are numehasName

album

photo

twittercompinkfloyd

tag

urmăreștefollows

owns

același compozitor

sameComposer

Web graf hipermediaexplorat 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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

identificator uniform de resursă

protocol HTTP bdquosecurizatrdquo

TCP = control al transmiterii datelor (Transmission Control Protocol)IP = protocol de interconectare a rețelelor (Internet Protocol)

DNS = adresă IPharrdomeniu simbolic ndash eg 85122231harrthorinfouaicro

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

situl disciplinei Tehnologii Web

tinyu

rlcom

teh

nol

ogii-

web

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

aplicație de editare 3D disponibilă icircn browser

web

glst

udio

org

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

co

exemple de aplicații WebCloud9 Coursera Devdocsio Dropbox GitHub infouaicro

Instagram JSBin Medium OpenStreetMap PHPMyAdmin Reddit

Quora SlideShare TEDcom Tumblr Vimeo 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 o interfață de programare a aplicațiilor

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

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

coWorld Wide Web

spațiu informațional comun icircn care comunicăm prin interconectarea și partajarea unor elemente

de interes denumite resurse

inventat de Sir Tim Berners-Lee icircn decembrie 1989

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Sir Tim Berners-Lee ndash lauriat al premiului Turingcea mai importantă distincție icircn domeniul informaticii

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 principii amp standarde deschise stipulate de Consorțiul Web

Web for all amp on everythingWeb for rich interactionWeb of data amp services

Web of trust

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

coclient

(realizează cereri)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coclient

(realizează cereri)

server(oferă răspunsuri)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coclient

(realizează cereri)

server(oferă răspunsuri)

protocol(reguli de transfer de date)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

serverWeb

client 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

web

primul client Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

webprimul server Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉clientul Web (navigator ndash browser

player multimedia aplicație nativă rulacircnd pe un calculator bdquoclasicrdquo (desktop) sau pe o platformă

mobilă robot al unui motor de căutarehellip)preiatrimite conținuturi ndash adică date ndash

(de) la un server Web

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

limbajul de marcare a hipertextuluiHTML (HyperText Markup Language)

wwww3orghtml

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

Anca

Bogdan

cunoaște peknows

dețineowns

are numehasName

album

photo

twittercompinkfloyd

tag

urmăreștefollows

owns

același compozitor

sameComposer

Web graf hipermediaexplorat 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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

identificator uniform de resursă

protocol HTTP bdquosecurizatrdquo

TCP = control al transmiterii datelor (Transmission Control Protocol)IP = protocol de interconectare a rețelelor (Internet Protocol)

DNS = adresă IPharrdomeniu simbolic ndash eg 85122231harrthorinfouaicro

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

situl disciplinei Tehnologii Web

tinyu

rlcom

teh

nol

ogii-

web

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

aplicație de editare 3D disponibilă icircn browser

web

glst

udio

org

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

co

exemple de aplicații WebCloud9 Coursera Devdocsio Dropbox GitHub infouaicro

Instagram JSBin Medium OpenStreetMap PHPMyAdmin Reddit

Quora SlideShare TEDcom Tumblr Vimeo 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 o interfață de programare a aplicațiilor

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

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coWorld Wide Web

spațiu informațional comun icircn care comunicăm prin interconectarea și partajarea unor elemente

de interes denumite resurse

inventat de Sir Tim Berners-Lee icircn decembrie 1989

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Sir Tim Berners-Lee ndash lauriat al premiului Turingcea mai importantă distincție icircn domeniul informaticii

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 principii amp standarde deschise stipulate de Consorțiul Web

Web for all amp on everythingWeb for rich interactionWeb of data amp services

Web of trust

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

coclient

(realizează cereri)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coclient

(realizează cereri)

server(oferă răspunsuri)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coclient

(realizează cereri)

server(oferă răspunsuri)

protocol(reguli de transfer de date)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

serverWeb

client 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

web

primul client Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

webprimul server Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉clientul Web (navigator ndash browser

player multimedia aplicație nativă rulacircnd pe un calculator bdquoclasicrdquo (desktop) sau pe o platformă

mobilă robot al unui motor de căutarehellip)preiatrimite conținuturi ndash adică date ndash

(de) la un server Web

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

limbajul de marcare a hipertextuluiHTML (HyperText Markup Language)

wwww3orghtml

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

Anca

Bogdan

cunoaște peknows

dețineowns

are numehasName

album

photo

twittercompinkfloyd

tag

urmăreștefollows

owns

același compozitor

sameComposer

Web graf hipermediaexplorat 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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

identificator uniform de resursă

protocol HTTP bdquosecurizatrdquo

TCP = control al transmiterii datelor (Transmission Control Protocol)IP = protocol de interconectare a rețelelor (Internet Protocol)

DNS = adresă IPharrdomeniu simbolic ndash eg 85122231harrthorinfouaicro

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

situl disciplinei Tehnologii Web

tinyu

rlcom

teh

nol

ogii-

web

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

aplicație de editare 3D disponibilă icircn browser

web

glst

udio

org

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

co

exemple de aplicații WebCloud9 Coursera Devdocsio Dropbox GitHub infouaicro

Instagram JSBin Medium OpenStreetMap PHPMyAdmin Reddit

Quora SlideShare TEDcom Tumblr Vimeo 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 o interfață de programare a aplicațiilor

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

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Sir Tim Berners-Lee ndash lauriat al premiului Turingcea mai importantă distincție icircn domeniul informaticii

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 principii amp standarde deschise stipulate de Consorțiul Web

Web for all amp on everythingWeb for rich interactionWeb of data amp services

Web of trust

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

coclient

(realizează cereri)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coclient

(realizează cereri)

server(oferă răspunsuri)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coclient

(realizează cereri)

server(oferă răspunsuri)

protocol(reguli de transfer de date)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

serverWeb

client 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

web

primul client Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

webprimul server Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉clientul Web (navigator ndash browser

player multimedia aplicație nativă rulacircnd pe un calculator bdquoclasicrdquo (desktop) sau pe o platformă

mobilă robot al unui motor de căutarehellip)preiatrimite conținuturi ndash adică date ndash

(de) la un server Web

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

limbajul de marcare a hipertextuluiHTML (HyperText Markup Language)

wwww3orghtml

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

Anca

Bogdan

cunoaște peknows

dețineowns

are numehasName

album

photo

twittercompinkfloyd

tag

urmăreștefollows

owns

același compozitor

sameComposer

Web graf hipermediaexplorat 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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

identificator uniform de resursă

protocol HTTP bdquosecurizatrdquo

TCP = control al transmiterii datelor (Transmission Control Protocol)IP = protocol de interconectare a rețelelor (Internet Protocol)

DNS = adresă IPharrdomeniu simbolic ndash eg 85122231harrthorinfouaicro

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

situl disciplinei Tehnologii Web

tinyu

rlcom

teh

nol

ogii-

web

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

aplicație de editare 3D disponibilă icircn browser

web

glst

udio

org

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

co

exemple de aplicații WebCloud9 Coursera Devdocsio Dropbox GitHub infouaicro

Instagram JSBin Medium OpenStreetMap PHPMyAdmin Reddit

Quora SlideShare TEDcom Tumblr Vimeo 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 o interfață de programare a aplicațiilor

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

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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 principii amp standarde deschise stipulate de Consorțiul Web

Web for all amp on everythingWeb for rich interactionWeb of data amp services

Web of trust

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

coclient

(realizează cereri)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coclient

(realizează cereri)

server(oferă răspunsuri)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coclient

(realizează cereri)

server(oferă răspunsuri)

protocol(reguli de transfer de date)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

serverWeb

client 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

web

primul client Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

webprimul server Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉clientul Web (navigator ndash browser

player multimedia aplicație nativă rulacircnd pe un calculator bdquoclasicrdquo (desktop) sau pe o platformă

mobilă robot al unui motor de căutarehellip)preiatrimite conținuturi ndash adică date ndash

(de) la un server Web

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

limbajul de marcare a hipertextuluiHTML (HyperText Markup Language)

wwww3orghtml

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

Anca

Bogdan

cunoaște peknows

dețineowns

are numehasName

album

photo

twittercompinkfloyd

tag

urmăreștefollows

owns

același compozitor

sameComposer

Web graf hipermediaexplorat 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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

identificator uniform de resursă

protocol HTTP bdquosecurizatrdquo

TCP = control al transmiterii datelor (Transmission Control Protocol)IP = protocol de interconectare a rețelelor (Internet Protocol)

DNS = adresă IPharrdomeniu simbolic ndash eg 85122231harrthorinfouaicro

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

situl disciplinei Tehnologii Web

tinyu

rlcom

teh

nol

ogii-

web

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

aplicație de editare 3D disponibilă icircn browser

web

glst

udio

org

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

co

exemple de aplicații WebCloud9 Coursera Devdocsio Dropbox GitHub infouaicro

Instagram JSBin Medium OpenStreetMap PHPMyAdmin Reddit

Quora SlideShare TEDcom Tumblr Vimeo 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 o interfață de programare a aplicațiilor

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

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

World Wide Web

bazat pe principii amp standarde deschise stipulate de Consorțiul Web

Web for all amp on everythingWeb for rich interactionWeb of data amp services

Web of trust

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

coclient

(realizează cereri)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coclient

(realizează cereri)

server(oferă răspunsuri)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coclient

(realizează cereri)

server(oferă răspunsuri)

protocol(reguli de transfer de date)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

serverWeb

client 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

web

primul client Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

webprimul server Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉clientul Web (navigator ndash browser

player multimedia aplicație nativă rulacircnd pe un calculator bdquoclasicrdquo (desktop) sau pe o platformă

mobilă robot al unui motor de căutarehellip)preiatrimite conținuturi ndash adică date ndash

(de) la un server Web

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

limbajul de marcare a hipertextuluiHTML (HyperText Markup Language)

wwww3orghtml

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

Anca

Bogdan

cunoaște peknows

dețineowns

are numehasName

album

photo

twittercompinkfloyd

tag

urmăreștefollows

owns

același compozitor

sameComposer

Web graf hipermediaexplorat 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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

identificator uniform de resursă

protocol HTTP bdquosecurizatrdquo

TCP = control al transmiterii datelor (Transmission Control Protocol)IP = protocol de interconectare a rețelelor (Internet Protocol)

DNS = adresă IPharrdomeniu simbolic ndash eg 85122231harrthorinfouaicro

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

situl disciplinei Tehnologii Web

tinyu

rlcom

teh

nol

ogii-

web

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

aplicație de editare 3D disponibilă icircn browser

web

glst

udio

org

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

co

exemple de aplicații WebCloud9 Coursera Devdocsio Dropbox GitHub infouaicro

Instagram JSBin Medium OpenStreetMap PHPMyAdmin Reddit

Quora SlideShare TEDcom Tumblr Vimeo 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 o interfață de programare a aplicațiilor

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

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

coclient

(realizează cereri)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coclient

(realizează cereri)

server(oferă răspunsuri)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coclient

(realizează cereri)

server(oferă răspunsuri)

protocol(reguli de transfer de date)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

serverWeb

client 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

web

primul client Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

webprimul server Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉clientul Web (navigator ndash browser

player multimedia aplicație nativă rulacircnd pe un calculator bdquoclasicrdquo (desktop) sau pe o platformă

mobilă robot al unui motor de căutarehellip)preiatrimite conținuturi ndash adică date ndash

(de) la un server Web

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

limbajul de marcare a hipertextuluiHTML (HyperText Markup Language)

wwww3orghtml

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

Anca

Bogdan

cunoaște peknows

dețineowns

are numehasName

album

photo

twittercompinkfloyd

tag

urmăreștefollows

owns

același compozitor

sameComposer

Web graf hipermediaexplorat 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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

identificator uniform de resursă

protocol HTTP bdquosecurizatrdquo

TCP = control al transmiterii datelor (Transmission Control Protocol)IP = protocol de interconectare a rețelelor (Internet Protocol)

DNS = adresă IPharrdomeniu simbolic ndash eg 85122231harrthorinfouaicro

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

situl disciplinei Tehnologii Web

tinyu

rlcom

teh

nol

ogii-

web

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

aplicație de editare 3D disponibilă icircn browser

web

glst

udio

org

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

co

exemple de aplicații WebCloud9 Coursera Devdocsio Dropbox GitHub infouaicro

Instagram JSBin Medium OpenStreetMap PHPMyAdmin Reddit

Quora SlideShare TEDcom Tumblr Vimeo 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 o interfață de programare a aplicațiilor

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

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coclient

(realizează cereri)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coclient

(realizează cereri)

server(oferă răspunsuri)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coclient

(realizează cereri)

server(oferă răspunsuri)

protocol(reguli de transfer de date)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

serverWeb

client 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

web

primul client Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

webprimul server Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉clientul Web (navigator ndash browser

player multimedia aplicație nativă rulacircnd pe un calculator bdquoclasicrdquo (desktop) sau pe o platformă

mobilă robot al unui motor de căutarehellip)preiatrimite conținuturi ndash adică date ndash

(de) la un server Web

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

limbajul de marcare a hipertextuluiHTML (HyperText Markup Language)

wwww3orghtml

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

Anca

Bogdan

cunoaște peknows

dețineowns

are numehasName

album

photo

twittercompinkfloyd

tag

urmăreștefollows

owns

același compozitor

sameComposer

Web graf hipermediaexplorat 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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

identificator uniform de resursă

protocol HTTP bdquosecurizatrdquo

TCP = control al transmiterii datelor (Transmission Control Protocol)IP = protocol de interconectare a rețelelor (Internet Protocol)

DNS = adresă IPharrdomeniu simbolic ndash eg 85122231harrthorinfouaicro

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

situl disciplinei Tehnologii Web

tinyu

rlcom

teh

nol

ogii-

web

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

aplicație de editare 3D disponibilă icircn browser

web

glst

udio

org

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

co

exemple de aplicații WebCloud9 Coursera Devdocsio Dropbox GitHub infouaicro

Instagram JSBin Medium OpenStreetMap PHPMyAdmin Reddit

Quora SlideShare TEDcom Tumblr Vimeo 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 o interfață de programare a aplicațiilor

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

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coclient

(realizează cereri)

server(oferă răspunsuri)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coclient

(realizează cereri)

server(oferă răspunsuri)

protocol(reguli de transfer de date)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

serverWeb

client 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

web

primul client Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

webprimul server Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉clientul Web (navigator ndash browser

player multimedia aplicație nativă rulacircnd pe un calculator bdquoclasicrdquo (desktop) sau pe o platformă

mobilă robot al unui motor de căutarehellip)preiatrimite conținuturi ndash adică date ndash

(de) la un server Web

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

limbajul de marcare a hipertextuluiHTML (HyperText Markup Language)

wwww3orghtml

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

Anca

Bogdan

cunoaște peknows

dețineowns

are numehasName

album

photo

twittercompinkfloyd

tag

urmăreștefollows

owns

același compozitor

sameComposer

Web graf hipermediaexplorat 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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

identificator uniform de resursă

protocol HTTP bdquosecurizatrdquo

TCP = control al transmiterii datelor (Transmission Control Protocol)IP = protocol de interconectare a rețelelor (Internet Protocol)

DNS = adresă IPharrdomeniu simbolic ndash eg 85122231harrthorinfouaicro

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

situl disciplinei Tehnologii Web

tinyu

rlcom

teh

nol

ogii-

web

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

aplicație de editare 3D disponibilă icircn browser

web

glst

udio

org

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

co

exemple de aplicații WebCloud9 Coursera Devdocsio Dropbox GitHub infouaicro

Instagram JSBin Medium OpenStreetMap PHPMyAdmin Reddit

Quora SlideShare TEDcom Tumblr Vimeo 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 o interfață de programare a aplicațiilor

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

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coclient

(realizează cereri)

server(oferă răspunsuri)

protocol(reguli de transfer de date)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

serverWeb

client 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

web

primul client Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

webprimul server Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉clientul Web (navigator ndash browser

player multimedia aplicație nativă rulacircnd pe un calculator bdquoclasicrdquo (desktop) sau pe o platformă

mobilă robot al unui motor de căutarehellip)preiatrimite conținuturi ndash adică date ndash

(de) la un server Web

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

limbajul de marcare a hipertextuluiHTML (HyperText Markup Language)

wwww3orghtml

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

Anca

Bogdan

cunoaște peknows

dețineowns

are numehasName

album

photo

twittercompinkfloyd

tag

urmăreștefollows

owns

același compozitor

sameComposer

Web graf hipermediaexplorat 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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

identificator uniform de resursă

protocol HTTP bdquosecurizatrdquo

TCP = control al transmiterii datelor (Transmission Control Protocol)IP = protocol de interconectare a rețelelor (Internet Protocol)

DNS = adresă IPharrdomeniu simbolic ndash eg 85122231harrthorinfouaicro

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

situl disciplinei Tehnologii Web

tinyu

rlcom

teh

nol

ogii-

web

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

aplicație de editare 3D disponibilă icircn browser

web

glst

udio

org

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

co

exemple de aplicații WebCloud9 Coursera Devdocsio Dropbox GitHub infouaicro

Instagram JSBin Medium OpenStreetMap PHPMyAdmin Reddit

Quora SlideShare TEDcom Tumblr Vimeo 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 o interfață de programare a aplicațiilor

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

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

serverWeb

client 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

web

primul client Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

webprimul server Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉clientul Web (navigator ndash browser

player multimedia aplicație nativă rulacircnd pe un calculator bdquoclasicrdquo (desktop) sau pe o platformă

mobilă robot al unui motor de căutarehellip)preiatrimite conținuturi ndash adică date ndash

(de) la un server Web

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

limbajul de marcare a hipertextuluiHTML (HyperText Markup Language)

wwww3orghtml

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

Anca

Bogdan

cunoaște peknows

dețineowns

are numehasName

album

photo

twittercompinkfloyd

tag

urmăreștefollows

owns

același compozitor

sameComposer

Web graf hipermediaexplorat 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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

identificator uniform de resursă

protocol HTTP bdquosecurizatrdquo

TCP = control al transmiterii datelor (Transmission Control Protocol)IP = protocol de interconectare a rețelelor (Internet Protocol)

DNS = adresă IPharrdomeniu simbolic ndash eg 85122231harrthorinfouaicro

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

situl disciplinei Tehnologii Web

tinyu

rlcom

teh

nol

ogii-

web

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

aplicație de editare 3D disponibilă icircn browser

web

glst

udio

org

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

co

exemple de aplicații WebCloud9 Coursera Devdocsio Dropbox GitHub infouaicro

Instagram JSBin Medium OpenStreetMap PHPMyAdmin Reddit

Quora SlideShare TEDcom Tumblr Vimeo 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 o interfață de programare a aplicațiilor

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

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

web

primul client Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

webprimul server Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉clientul Web (navigator ndash browser

player multimedia aplicație nativă rulacircnd pe un calculator bdquoclasicrdquo (desktop) sau pe o platformă

mobilă robot al unui motor de căutarehellip)preiatrimite conținuturi ndash adică date ndash

(de) la un server Web

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

limbajul de marcare a hipertextuluiHTML (HyperText Markup Language)

wwww3orghtml

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

Anca

Bogdan

cunoaște peknows

dețineowns

are numehasName

album

photo

twittercompinkfloyd

tag

urmăreștefollows

owns

același compozitor

sameComposer

Web graf hipermediaexplorat 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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

identificator uniform de resursă

protocol HTTP bdquosecurizatrdquo

TCP = control al transmiterii datelor (Transmission Control Protocol)IP = protocol de interconectare a rețelelor (Internet Protocol)

DNS = adresă IPharrdomeniu simbolic ndash eg 85122231harrthorinfouaicro

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

situl disciplinei Tehnologii Web

tinyu

rlcom

teh

nol

ogii-

web

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

aplicație de editare 3D disponibilă icircn browser

web

glst

udio

org

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

co

exemple de aplicații WebCloud9 Coursera Devdocsio Dropbox GitHub infouaicro

Instagram JSBin Medium OpenStreetMap PHPMyAdmin Reddit

Quora SlideShare TEDcom Tumblr Vimeo 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 o interfață de programare a aplicațiilor

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

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

webprimul server Web

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉clientul Web (navigator ndash browser

player multimedia aplicație nativă rulacircnd pe un calculator bdquoclasicrdquo (desktop) sau pe o platformă

mobilă robot al unui motor de căutarehellip)preiatrimite conținuturi ndash adică date ndash

(de) la un server Web

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

limbajul de marcare a hipertextuluiHTML (HyperText Markup Language)

wwww3orghtml

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

Anca

Bogdan

cunoaște peknows

dețineowns

are numehasName

album

photo

twittercompinkfloyd

tag

urmăreștefollows

owns

același compozitor

sameComposer

Web graf hipermediaexplorat 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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

identificator uniform de resursă

protocol HTTP bdquosecurizatrdquo

TCP = control al transmiterii datelor (Transmission Control Protocol)IP = protocol de interconectare a rețelelor (Internet Protocol)

DNS = adresă IPharrdomeniu simbolic ndash eg 85122231harrthorinfouaicro

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

situl disciplinei Tehnologii Web

tinyu

rlcom

teh

nol

ogii-

web

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

aplicație de editare 3D disponibilă icircn browser

web

glst

udio

org

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

co

exemple de aplicații WebCloud9 Coursera Devdocsio Dropbox GitHub infouaicro

Instagram JSBin Medium OpenStreetMap PHPMyAdmin Reddit

Quora SlideShare TEDcom Tumblr Vimeo 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 o interfață de programare a aplicațiilor

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

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

⧉clientul Web (navigator ndash browser

player multimedia aplicație nativă rulacircnd pe un calculator bdquoclasicrdquo (desktop) sau pe o platformă

mobilă robot al unui motor de căutarehellip)preiatrimite conținuturi ndash adică date ndash

(de) la un server Web

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

limbajul de marcare a hipertextuluiHTML (HyperText Markup Language)

wwww3orghtml

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

Anca

Bogdan

cunoaște peknows

dețineowns

are numehasName

album

photo

twittercompinkfloyd

tag

urmăreștefollows

owns

același compozitor

sameComposer

Web graf hipermediaexplorat 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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

identificator uniform de resursă

protocol HTTP bdquosecurizatrdquo

TCP = control al transmiterii datelor (Transmission Control Protocol)IP = protocol de interconectare a rețelelor (Internet Protocol)

DNS = adresă IPharrdomeniu simbolic ndash eg 85122231harrthorinfouaicro

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

situl disciplinei Tehnologii Web

tinyu

rlcom

teh

nol

ogii-

web

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

aplicație de editare 3D disponibilă icircn browser

web

glst

udio

org

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

co

exemple de aplicații WebCloud9 Coursera Devdocsio Dropbox GitHub infouaicro

Instagram JSBin Medium OpenStreetMap PHPMyAdmin Reddit

Quora SlideShare TEDcom Tumblr Vimeo 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 o interfață de programare a aplicațiilor

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

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

limbajul de marcare a hipertextuluiHTML (HyperText Markup Language)

wwww3orghtml

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

Anca

Bogdan

cunoaște peknows

dețineowns

are numehasName

album

photo

twittercompinkfloyd

tag

urmăreștefollows

owns

același compozitor

sameComposer

Web graf hipermediaexplorat 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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

identificator uniform de resursă

protocol HTTP bdquosecurizatrdquo

TCP = control al transmiterii datelor (Transmission Control Protocol)IP = protocol de interconectare a rețelelor (Internet Protocol)

DNS = adresă IPharrdomeniu simbolic ndash eg 85122231harrthorinfouaicro

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

situl disciplinei Tehnologii Web

tinyu

rlcom

teh

nol

ogii-

web

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

aplicație de editare 3D disponibilă icircn browser

web

glst

udio

org

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

co

exemple de aplicații WebCloud9 Coursera Devdocsio Dropbox GitHub infouaicro

Instagram JSBin Medium OpenStreetMap PHPMyAdmin Reddit

Quora SlideShare TEDcom Tumblr Vimeo 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 o interfață de programare a aplicațiilor

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

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

Anca

Bogdan

cunoaște peknows

dețineowns

are numehasName

album

photo

twittercompinkfloyd

tag

urmăreștefollows

owns

același compozitor

sameComposer

Web graf hipermediaexplorat 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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

identificator uniform de resursă

protocol HTTP bdquosecurizatrdquo

TCP = control al transmiterii datelor (Transmission Control Protocol)IP = protocol de interconectare a rețelelor (Internet Protocol)

DNS = adresă IPharrdomeniu simbolic ndash eg 85122231harrthorinfouaicro

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

situl disciplinei Tehnologii Web

tinyu

rlcom

teh

nol

ogii-

web

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

aplicație de editare 3D disponibilă icircn browser

web

glst

udio

org

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

co

exemple de aplicații WebCloud9 Coursera Devdocsio Dropbox GitHub infouaicro

Instagram JSBin Medium OpenStreetMap PHPMyAdmin Reddit

Quora SlideShare TEDcom Tumblr Vimeo 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 o interfață de programare a aplicațiilor

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

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

Anca

Bogdan

cunoaște peknows

dețineowns

are numehasName

album

photo

twittercompinkfloyd

tag

urmăreștefollows

owns

același compozitor

sameComposer

Web graf hipermediaexplorat 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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

identificator uniform de resursă

protocol HTTP bdquosecurizatrdquo

TCP = control al transmiterii datelor (Transmission Control Protocol)IP = protocol de interconectare a rețelelor (Internet Protocol)

DNS = adresă IPharrdomeniu simbolic ndash eg 85122231harrthorinfouaicro

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

situl disciplinei Tehnologii Web

tinyu

rlcom

teh

nol

ogii-

web

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

aplicație de editare 3D disponibilă icircn browser

web

glst

udio

org

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

co

exemple de aplicații WebCloud9 Coursera Devdocsio Dropbox GitHub infouaicro

Instagram JSBin Medium OpenStreetMap PHPMyAdmin Reddit

Quora SlideShare TEDcom Tumblr Vimeo 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 o interfață de programare a aplicațiilor

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

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

Anca

Bogdan

cunoaște peknows

dețineowns

are numehasName

album

photo

twittercompinkfloyd

tag

urmăreștefollows

owns

același compozitor

sameComposer

Web graf hipermediaexplorat 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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

identificator uniform de resursă

protocol HTTP bdquosecurizatrdquo

TCP = control al transmiterii datelor (Transmission Control Protocol)IP = protocol de interconectare a rețelelor (Internet Protocol)

DNS = adresă IPharrdomeniu simbolic ndash eg 85122231harrthorinfouaicro

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

situl disciplinei Tehnologii Web

tinyu

rlcom

teh

nol

ogii-

web

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

aplicație de editare 3D disponibilă icircn browser

web

glst

udio

org

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

co

exemple de aplicații WebCloud9 Coursera Devdocsio Dropbox GitHub infouaicro

Instagram JSBin Medium OpenStreetMap PHPMyAdmin Reddit

Quora SlideShare TEDcom Tumblr Vimeo 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 o interfață de programare a aplicațiilor

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

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

Anca

Bogdan

cunoaște peknows

dețineowns

are numehasName

album

photo

twittercompinkfloyd

tag

urmăreștefollows

owns

același compozitor

sameComposer

Web graf hipermediaexplorat 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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

identificator uniform de resursă

protocol HTTP bdquosecurizatrdquo

TCP = control al transmiterii datelor (Transmission Control Protocol)IP = protocol de interconectare a rețelelor (Internet Protocol)

DNS = adresă IPharrdomeniu simbolic ndash eg 85122231harrthorinfouaicro

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

situl disciplinei Tehnologii Web

tinyu

rlcom

teh

nol

ogii-

web

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

aplicație de editare 3D disponibilă icircn browser

web

glst

udio

org

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

co

exemple de aplicații WebCloud9 Coursera Devdocsio Dropbox GitHub infouaicro

Instagram JSBin Medium OpenStreetMap PHPMyAdmin Reddit

Quora SlideShare TEDcom Tumblr Vimeo 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 o interfață de programare a aplicațiilor

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

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Anca

Bogdan

cunoaște peknows

dețineowns

are numehasName

album

photo

twittercompinkfloyd

tag

urmăreștefollows

owns

același compozitor

sameComposer

Web graf hipermediaexplorat 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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

identificator uniform de resursă

protocol HTTP bdquosecurizatrdquo

TCP = control al transmiterii datelor (Transmission Control Protocol)IP = protocol de interconectare a rețelelor (Internet Protocol)

DNS = adresă IPharrdomeniu simbolic ndash eg 85122231harrthorinfouaicro

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

situl disciplinei Tehnologii Web

tinyu

rlcom

teh

nol

ogii-

web

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

aplicație de editare 3D disponibilă icircn browser

web

glst

udio

org

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

co

exemple de aplicații WebCloud9 Coursera Devdocsio Dropbox GitHub infouaicro

Instagram JSBin Medium OpenStreetMap PHPMyAdmin Reddit

Quora SlideShare TEDcom Tumblr Vimeo 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 o interfață de programare a aplicațiilor

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

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

identificator uniform de resursă

protocol HTTP bdquosecurizatrdquo

TCP = control al transmiterii datelor (Transmission Control Protocol)IP = protocol de interconectare a rețelelor (Internet Protocol)

DNS = adresă IPharrdomeniu simbolic ndash eg 85122231harrthorinfouaicro

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

situl disciplinei Tehnologii Web

tinyu

rlcom

teh

nol

ogii-

web

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

aplicație de editare 3D disponibilă icircn browser

web

glst

udio

org

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

co

exemple de aplicații WebCloud9 Coursera Devdocsio Dropbox GitHub infouaicro

Instagram JSBin Medium OpenStreetMap PHPMyAdmin Reddit

Quora SlideShare TEDcom Tumblr Vimeo 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 o interfață de programare a aplicațiilor

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

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

identificator uniform de resursă

protocol HTTP bdquosecurizatrdquo

TCP = control al transmiterii datelor (Transmission Control Protocol)IP = protocol de interconectare a rețelelor (Internet Protocol)

DNS = adresă IPharrdomeniu simbolic ndash eg 85122231harrthorinfouaicro

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

situl disciplinei Tehnologii Web

tinyu

rlcom

teh

nol

ogii-

web

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

aplicație de editare 3D disponibilă icircn browser

web

glst

udio

org

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

co

exemple de aplicații WebCloud9 Coursera Devdocsio Dropbox GitHub infouaicro

Instagram JSBin Medium OpenStreetMap PHPMyAdmin Reddit

Quora SlideShare TEDcom Tumblr Vimeo 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 o interfață de programare a aplicațiilor

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

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

identificator uniform de resursă

protocol HTTP bdquosecurizatrdquo

TCP = control al transmiterii datelor (Transmission Control Protocol)IP = protocol de interconectare a rețelelor (Internet Protocol)

DNS = adresă IPharrdomeniu simbolic ndash eg 85122231harrthorinfouaicro

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

situl disciplinei Tehnologii Web

tinyu

rlcom

teh

nol

ogii-

web

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

aplicație de editare 3D disponibilă icircn browser

web

glst

udio

org

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

co

exemple de aplicații WebCloud9 Coursera Devdocsio Dropbox GitHub infouaicro

Instagram JSBin Medium OpenStreetMap PHPMyAdmin Reddit

Quora SlideShare TEDcom Tumblr Vimeo 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 o interfață de programare a aplicațiilor

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

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

com org io ro

uaicro

infouaicro

TCP UDPIP ICMPhellip

acces la mediu

identificator uniform de resursă

protocol HTTP bdquosecurizatrdquo

TCP = control al transmiterii datelor (Transmission Control Protocol)IP = protocol de interconectare a rețelelor (Internet Protocol)

DNS = adresă IPharrdomeniu simbolic ndash eg 85122231harrthorinfouaicro

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

situl disciplinei Tehnologii Web

tinyu

rlcom

teh

nol

ogii-

web

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

aplicație de editare 3D disponibilă icircn browser

web

glst

udio

org

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

co

exemple de aplicații WebCloud9 Coursera Devdocsio Dropbox GitHub infouaicro

Instagram JSBin Medium OpenStreetMap PHPMyAdmin Reddit

Quora SlideShare TEDcom Tumblr Vimeo 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 o interfață de programare a aplicațiilor

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

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

situl disciplinei Tehnologii Web

tinyu

rlcom

teh

nol

ogii-

web

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

aplicație de editare 3D disponibilă icircn browser

web

glst

udio

org

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

co

exemple de aplicații WebCloud9 Coursera Devdocsio Dropbox GitHub infouaicro

Instagram JSBin Medium OpenStreetMap PHPMyAdmin Reddit

Quora SlideShare TEDcom Tumblr Vimeo 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 o interfață de programare a aplicațiilor

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

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

situl disciplinei Tehnologii Web

tinyu

rlcom

teh

nol

ogii-

web

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

aplicație de editare 3D disponibilă icircn browser

web

glst

udio

org

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

co

exemple de aplicații WebCloud9 Coursera Devdocsio Dropbox GitHub infouaicro

Instagram JSBin Medium OpenStreetMap PHPMyAdmin Reddit

Quora SlideShare TEDcom Tumblr Vimeo 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 o interfață de programare a aplicațiilor

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

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

situl disciplinei Tehnologii Web

tinyu

rlcom

teh

nol

ogii-

web

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

aplicație de editare 3D disponibilă icircn browser

web

glst

udio

org

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

co

exemple de aplicații WebCloud9 Coursera Devdocsio Dropbox GitHub infouaicro

Instagram JSBin Medium OpenStreetMap PHPMyAdmin Reddit

Quora SlideShare TEDcom Tumblr Vimeo 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 o interfață de programare a aplicațiilor

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

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

situl disciplinei Tehnologii Web

tinyu

rlcom

teh

nol

ogii-

web

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

aplicație de editare 3D disponibilă icircn browser

web

glst

udio

org

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

co

exemple de aplicații WebCloud9 Coursera Devdocsio Dropbox GitHub infouaicro

Instagram JSBin Medium OpenStreetMap PHPMyAdmin Reddit

Quora SlideShare TEDcom Tumblr Vimeo 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 o interfață de programare a aplicațiilor

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

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

aplicație de editare 3D disponibilă icircn browser

web

glst

udio

org

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

co

exemple de aplicații WebCloud9 Coursera Devdocsio Dropbox GitHub infouaicro

Instagram JSBin Medium OpenStreetMap PHPMyAdmin Reddit

Quora SlideShare TEDcom Tumblr Vimeo 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 o interfață de programare a aplicațiilor

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

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

aplicație de editare 3D disponibilă icircn browser

web

glst

udio

org

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

co

exemple de aplicații WebCloud9 Coursera Devdocsio Dropbox GitHub infouaicro

Instagram JSBin Medium OpenStreetMap PHPMyAdmin Reddit

Quora SlideShare TEDcom Tumblr Vimeo 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 o interfață de programare a aplicațiilor

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

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

co

exemple de aplicații WebCloud9 Coursera Devdocsio Dropbox GitHub infouaicro

Instagram JSBin Medium OpenStreetMap PHPMyAdmin Reddit

Quora SlideShare TEDcom Tumblr Vimeo 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 o interfață de programare a aplicațiilor

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

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

co

exemple de aplicații WebCloud9 Coursera Devdocsio Dropbox GitHub infouaicro

Instagram JSBin Medium OpenStreetMap PHPMyAdmin Reddit

Quora SlideShare TEDcom Tumblr Vimeo 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 o interfață de programare a aplicațiilor

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

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

exemple de aplicații WebCloud9 Coursera Devdocsio Dropbox GitHub infouaicro

Instagram JSBin Medium OpenStreetMap PHPMyAdmin Reddit

Quora SlideShare TEDcom Tumblr Vimeo 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 o interfață de programare a aplicațiilor

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

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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 o interfață de programare a aplicațiilor

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

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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 o interfață de programare a aplicațiilor

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

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

coclient Web server Web

conținut

static

conținut

dinamic

conținut

static

conținut

dinamic

date

locale

JavaScript server de aplic framework

HTTP

transfer

asincron

via o interfață Web utilizatorul interacționează cu clientul(frontend) și inițiază acțiuni ndash eg cereri HTTP (a)sincrone ndash

executate de diverse componente implementatela nivel de server (backend) pentru a obține date

date externe

(serviciu Web)

frontend backend

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Internet

(Web)

Uzual 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

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Blat Baza de date

Jeleu Funcționalitate

Cremă Rol specific

Frișcă Marcaje

Fructe Prezentare

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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 cadre de lucru (framework-uri) biblioteci de cod componentehellip

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

mitul 3 cele mai importante sunt datele

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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 de date 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 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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

altele CodeIgniter FuelPHP Laravel Symfony Yii Zend Framework

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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 JavaScriptuneori via un magazin de aplicații ndash 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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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 TVhellip)

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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)

clientWeb

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

client(i)mandatar (proxy)

zid de protecție (firewall)intermediar(i) (middleware)

server(e) Webserver(e) de aplicații

cadre de lucru biblioteci alte componenteserver(e) de stocare persistentă ndash eg baze de date

server(e) de conținut multimediaserver(e) de management al conținutului (CMS)

aplicațiisisteme tradiționale (legacy)

eventual recurgacircnd la servicii icircn bdquonorirdquo ndash cloudpartajarea la cerere a resurselor de calcul și a datelor

cu alte calculatoaredispozitive pe baza tehnologiilor Internet

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

profsinfouaicro~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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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 stocareMySQL Apache Cassandra Apache Hadoop Apache Hive Oracle DB

servicii icircn bdquonorirdquoAmazon EC2 ndash procesare videoAmazon S3 ndash stocare

servicii SQL Amazon RDS

servicii NoSQL Amazon DynamoDB

management de cod GitHub (implementat icircn Ruby)

integrare continuă Jenkins (implementare Java)

gestionare servere Apache Mesos (implementare C++)

distribuire de conținut(content distribution network)

Open Connect CDN (FreeBSD Nginx) Akamai Level 3 Limelight

monitorizare Apache Chukwa (scris icircn Java)

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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 martinfowlercomarticlesserverlesshtml

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

plus noii veniți 127918 game console smart watch128095128085 smart clothing

128268smart appliances127969 smart home128663128641 smart transportation

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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 128279la aplicații Web sociale128101 + interacțiune naturală128079128066

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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 biblioteci de cod instrumente)

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)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

neadaptarea la cerințele economice (de tip business)128736 dezvoltare vs 128221marketing vs 128084management

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

programare (server + client)

creareadaptarede conținuttestare

documen-tare

arhitectura info+ navigarecerințe

public beta lansare

mentenanță

wwwwebpagefxcomblogweb-designagile

actualmente sunt preferate metodologii agilede dezvoltare a sistemelor Web

wwwinfoqcomprocess-practices

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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 și Sabin Buraga Cu codul icircn bdquonorirdquo (2015)wwwslidesharenetbusacocu-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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

127919abordare

prototipizare a interfeței cu utilizatorul

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

icircnțelege

documen-tează-te

proiec-tează

imple-mentează

evaluează

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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 perceptual (vizual sonor tactilhellip)este ndash deseori ndash unicat

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

resurse umane

3mdash9 indivizi

bdquoPrima versiune a aplicației demareaz-o doar cu 3 persoanerdquogettingreal37signalscom

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128565128101128126128123

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

dezvoltare (arhitectură)

system architect data (content) architect

component architectsecurity architect

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

cointeracțiune

cu utilizatorul

creative leadWeb interface designer(s)

graphic artist(s) HCI engineer

Sabin Buraga Interacțiune om-calculator (curs master FII UAIC)

profsinfouaicro~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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

programare

server-side programmersclient-side programmers

datacomponent integration programmers

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

co

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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 Developer(s)

Multimedia Designer(s)

conținut (date)

Domain Expert

Business Expert

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

a se studia și Spellbook of Modern Web Dev (iulie 2017) githubcomdexteryyspellbook-of-modern-webdev

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web Designer

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

familiaritate 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

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

asistent (ajutor) al webmaster-uluidesignerului sau dezvoltatorului Web

poate efectua operații tehnice instalare configurare monitorizarehellip

Web Technician

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128717comerț

electronic

128506turism

127899monitorizare

128302128200prognoze(finanțe

transporthellip)

128240128101128172știri

comunicinterpersonală

127916127914amuzament

software

platformă

putere

de calcul

128452128452stocare

128225rețea

128126identitate

baze

de date

128736execuțiesoftware

procesare

cozi de mesaje

128272securitate

infrastructură

Web ndash ingredient cheie al tehnologiilor icircn bdquonorirdquocloud computing

128250127969128187

128424

128241127918

128661128641127747

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

o parte dintre tehnologii implementate icircn cadrul navigatorului Web ndash platformhtml5org

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

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

HTML5 ltcanvasgtwwwhtml5canvastutorialscom

SVG (Scalable Vector Graphics)developermozillaorgdocsWebSVG

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

profsinfouaicro~busacoteachlabscss

WebGLwebglfundamentalsorg

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

WebGLde la interacțiuni 3D

la artă generativă

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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 webvrinfoexemple A-Frame PlayCanvas Sketchfab Vizor

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web ubicuu la nivel fizic ndash physical Webcontext IoT (Internet of Things)

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

googlegithubiophysical-web wwwslidesharenetyiibupresentations

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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) orașe bdquointeligenterdquo (smart city)reclame contextuale (smart advertising)

128444

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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)

OWL (Web Ontology Language)

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

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

profsinfouaicro~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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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)

diverse URL-uridesemnacircnd concepte

(things not strings)

Cine este Linus Torvalds

PersonWithOccupation

ComputerPioneers

FinnishComputerProgrammers

FreeSoftwareProgrammers

LinuxKernelHackers

LivingPeople

PeopleInInformationTechnology

Golfer

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriprocesarea limbajului natural

entități conversaționale (conversational user interfaces)

thereisabotforthatcom botpressio

apps as chats

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Web bdquointeligentrdquo ndash semantic Web Web of Data

icircn conjuncție cu alte abordăriicircnvățare automată (machine learning)

software capabil să icircnvețe șisau să realizeze predicțiifără a fi explicit programat

githubcomjosephmisitiawesome-machine-learning deeplearninggallerycom

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

128525

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 succes

imagini de epocă furnizate de vintages

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 succes

imagini de epocă furnizate de vintages

Dr S

abin

-Cor

nel

iuBura

gandash

htt

p

pro

fsin

fou

aicro

~busa

co

Mult succes

imagini de epocă furnizate de vintages