Тема 1 . Aplica ții WEB și tehnologii [603753]

Тема 1 . Aplica ții WEB și tehnologii
WEB
1.Aplicații WEB
2.Tehnologii WEB ( avantajele , dezavantajele )
3.Proiectarea aplicațiilor WEB

1. Aplicații WEB

Site Web
•Termenii "pagina Web " și "document HTML" sunt
sinonime.
• O pagină web este un document creat cu ajutorul
unui limbaj de programare cum ar fi HTML PHP,
ASP ș.a.
•Paginile stocate pe un calculator -server si oferite
publicului larg sunt grupate sub denumirea generica
de site.

•Un site (denumit si website) este o colectie de
pagini web, interconectate , stocate pe un server
web .
•Pagini WEB pot fi:
Pagini statice
Pagini dinamice

•Pagini statice
Conțin doar elemente HTML
Codul sursa vizualizat in browser este identic cu cel al
fișierului stocat pe disc
Nu oferă interactivitate

•Pagini dinamice (care reacționează la acțiunile utilizatorilor)
Conținutul lor este creat dinamic
La baza – tehnologia client -side scripting
Oferă interactivitate

Programarea WEB nevine necesară în special în cazul
paginilor Web generate dinamic

Un tip particular de server, este server -ul web .
Un server web este un sistem care gazduieste si
ofera pagini web prin intermediul unei retele.
De cele mai multe ori, termenul de server web
desemneaza a aplicatie, un program care ruleaza pe
calculatorul -server si care este responsabil cu primirea
cerintelor de la utilizatori si transferarea paginilor web
catre ei.

Browser
Prin browser se înțelege un program de "navigare"
în web.

Navigatoarele web (browserele) sunt capabile sa
interpreteze codul HTML si sa afiseze informatiile
intr-un mod usor de citit.

Cele mai cunoscute browsere web sunt:

Paginile returnate de un server web sunt de obicei
in format HTML.

•Aplicațiile WEB de astăzi – sisteme software complexe care oferă servicii interactive
și personalizabile accesibile prin intermediul diferitelor dispozitive

• O aplica ție WEB reprezintă o colecție interconectată de pagini WEB cu conținut
dinamic menită a oferi o funcționalitate specifică utilizatorilor.

•Aplicatiile WEB au grade variate de complexitate. Acestea pot fi pur informationale
sau aplicatii de comert electronic complexe care functioneaza 24 de ore pe zi / 7 zile
pe saptamâna.

•Aplicatiile WEB oferă posibilitatea realizării tranzacțiilor între utilizatori și de obicei
stochează datele într -o bază de date.

•Diferenta dintre o aplicatie desktop si o aplicatie web este ca utilizatorii pot
accesa aplicatia web prin intermediul browserului pe cand cea clasica are propria
interfata si trebuie instalata in propriu calculator .
Aplicațiile WEB

O aplicație web poate fi definită astfel:

O aplicație WEB este un sistem software
bazat pe tehnologiile și standardele
consorțiului World Wide Web (W3C), care
oferă resurse web specifice (conținut și
servicii ) prin intermediul unei interfețe
utilizator numită browser web.

Aplicatiile web sunt programe web-based,
executate intr-un browser web si implementate
folosind tehnologii precum : PHP, ASP, MYSQL,
PYTHON,HTML , CSS, JAV ASCRIPT, etc. .

Avantaje

•Sunt independente de sistemul de operare . Pot fi rulate aproape
de pe orice sistem de operare prin intermediul unui browser
web Nu necesita instalare , fiind necesara doar existenta unui
browser web
•Programarea aplicatiilor web este simplificata de existenta
software -ului Open Souce precum : Symfony , CodeIgniter , Zend
Framework, etc
•Pot fi folosite si de pe tableta si smartphone intrucat acestea au
browser incorporat .

SCHEMA DE PRINCIPIU A UNEI
APLICATII WEB

Cronologia dezvoltării a aplicațiilor WEB

Siturile web axate pe documente (statice)
Paginile web sunt stocate pe un server web ca documente HTML statice și sunt
trimise clientului web ca răspuns la o cerere. Aceste pagini web sunt de obicei
actualizate manual folosind utilitare corespunzătoare.

•Odată cu apariția standardului
Common Gateway Interface
(http://hoohoo.ncsa.uiuc.edu/cgi/int
erface.html ) și formularelor HTML,
s-au dezvoltat și aplicațiile web
interactive , oferind o primă formă
de interactivitate prin intermediul
formularelor, butoanelor radio și
meniurilor de selecție.
•Paginile web și legăturile către
alte pagini sunt generate în mod
dinamic în funcție de datele
introduse de utilizator .
• Exemple de astfel de categorii
sunt expozițiile virtuale, site-urile
de știri sau de planificare a
călătoriilor .

•Aplicațiile web tranzacționale oferă mai multă interactivitate,
utilizatorul având posibilitatea de a interacționa cu aplicația în
modul citire dar și de a realiza actualizări ale conținutului de bază.
Băncile on -line, magazinele on -line și sistemele de rezervare on –
line pentru hoteluri aparțin acestei categorii.

Aplicatiile web colaborative
•Sunt folosite îndeosebi în scopul cooperarii pentru
operatiile nestructurate (groupware). Exista o nevoie
sporita pentru comunicatie între utilizatorii care
coopereaza. Aplicatiile web colaborative suporta
distribuirea informatiei si spatiile de lucru (de exemplu
WikiWiki – http://c2.com/cgi/wiki – sau BSCW –
http://bscw.gmd.de/ -) pentru a genera, edita si
administra informatiile distribuite.

2. Tehnologii WEB ( avantajele ,
dezavantajele )

Web1.0
Web 1.0 este prima fază de dezvoltare a
Internetului
•Pagini statice
•canal -ul unidirectional de comunicare și
publicul nu avea mecanisme prin care să
genereze feedback
•Interactivitatea (forum, Guestbook)

web 2.0.
•Web 2.0 a fost supranumit “internetul utilizatorilor ”. Toata ideea din
jurul web 2.0 este schimbul de informatii – dezvoltarea de website –
uri centrate pe utilizatori , care au posibilitatea sa interactioneze , sa
creeze comunitati , sa initieze dialoguri si sa genereze continut .
•Web 2.0 este web -ul social, în care contează foarte mult relațiile
dintre indivizi.
•O altă caracteristică esențială a Web 2.0 este “accesbilitatea”; oricine
a putut participa la partajarea de informație și conținut, nu numai
specialiștii IT sau web -designerii, așa cum se întâmpla în cazul Web
1.0.
•comunicare bidirecțională
Site-urile din perioada Web 2.0 YouTube, LinkedIn, Twitter,
Facebook, Wikipedia sau Flickr

•Acces mobil la internet
•Dispozitive mobile
•Web 3.0 inseamna ca Internetul va oferi produse personalizate pentru
fiecare persoana in parte (Internet Intelegent)
•Va exista un sistem de monitorizare a feed -back -ului pe toate canalele
pentru fiecare utilizator in parte. Toată activitatea utlizatorului Internet va
fi monitorizată
•În Web 3.0 fiecare va primi asistență personalizată pe baza așteptărilor
sale.
Ex.
Urmărirea utilizatorilor de către platforme durează mult timp, dar abia în ultimul an,
Facebook a introdus un anunț, prin care te întreabă dacă ești de acord să -ți verse
cookies în calculator – dacă nu ești de acord, nu poți să -ți deschizi un cont .
Dacă setezi browserul să nu mai accepte cookies, Google îți oferă 30% din serviciile
sale, deci nu -l mai poți folosi. La fel și celelalte platforme care folosesc cookies.
Deci ești obligat să le accepți.
Cuvintele de bază în Web 3.0 vor fi: spune -mi
ce faci pe net, ca să -ți spun cine ești.

Tehnologii Front -End și Back -End
Front-end – acea parte a site -ului sau a
aplicației web, pe care o putem vedea și cu care
interacționează vizitatorii .
Front -End-ul are două părți: design -ul (partea
creativă) și dezvoltarea interfeței (partea de cod
sau implementare HTML CSS, JavaScript ).
Back -End-ul de obicei constă în trei părți: un server, o aplicație de
interfață și o bază de date. Rolul principal al acestuia este cel de
management de conținut .

Tehnologiile de Back -End de obicei constau în limbaje precum
PHP, Ruby , Python , etc. Pentru a le face și mai ușor de folosit, sunt
îmbunătățite cu framework -uri precum Ruby on Rails, Cake PHP
sau Code Igniter, care ajută la dezvoltarea mai rapidă.

Tehnologii Folosite in Dezvoltarea Aplicatiilor Web

•Tehnologii WEB Client
•Tehnologii WEB Server

Tehnologii WEB Client

• JavaScript
JavaScript este un limbaj de script, adică un limbaj
de programare simplificat . (pagini web dinamice –
validarea datelor din formular)

•VBScript
VBScript funcționează numai cu browserul Internet
Explorer

•Appleturi Java

Tehnologii WEB Server

• CGI (Common Gateway Interface) este un
mecanism prin care clienții (browserele) pot
trimite informații înapoi la server, și serverul
poate trimite e -mail clientului cu datele cerute. De
obicei, CGI se folosește pentru procesarea datelor
dintr-un formular trimis de browser, și se
specifică în atributul „action” al unui formular.
•PHP ,ASP
•MySql

3. Proiectarea aplicațiilor WEB

•Caracteristici esentiale ale proiectelor web de succes
•interfata grafica atractiva , cu design personalizat , menit
sa ofere vizitatorilor experiente unice de navigare ;

•structura intuitiva , usor navigabila , prezentand toate
informatiile necesare intr-un mod consistent, estetic si
coerent , pentru a transmite vizitatorilor mesajul si
informatiile dorite ;

•functionalitati variate, adaptate nevoilor utilizatorului

Un site web bine conceput și realizat, cu un web design de
calitate demonstrează seriozitatea firmei

Un site calitativ și bine construit oferă încredere clienților în
compania .

•Principiile de baza ale proiectarii web pot fi descrise în
mod similar cu cele ale proiectarii software:
– obiective si cerinte clar definite;
– dezvoltarea sistematica, în faze, a aplicatiilor web;
– o planificare foarte atenta a acestor faze;
– auditul continuu a întregului proces de dezvoltare .

•Proiectarea web nu este un eveniment imediat; este un
proces realizat pe tot parcursul ciclului de viata a
aplicatiei web.

•Realizarea unui website de calitate este un
proces complex ce se deruleaza in cateva etape
•Multi dintre "proiectantii web", din lipsa de
experienta , sar peste aceste etape , rezultatul
final fiind in general unul "pe masura ".

Etapele proiectării
ETAPA 1: Colectarea informatiilor (Analiza )
Se vor identifica :

SCOPUL
In ce scop va fi creat site-ul ? Va oferi vizitatorilor informatii ? Va promova un
serviciu , va vinde un produs ? …

OBIECTIVELE
Ce spera sa realizeze clientul prin construirea website -ului ? Cele mai frecvente
obiective ar fi de a face bani sau de a schimba informatii .

PUBLICUL TINTA
Exista un grup de oameni caruia i se adreseaza website -ul (si care vor ajuta la
atingerea obiectivelor ) ? Este foarte utila creionarea profilului vizitatorului pentru
a determina cel mai bun design pentru site. Se vor lua in considerare varsta , sexul ,
interesele , etc.

CONTINUT
Ce fel de informatii doreste sa gaseasca pe site publicul tinta ? Cauta informatii
specifice unui anumit domeniu , cauta un serviciu , cauta un produs …

Proiectarea cerintelor aplicatiilor web
•Proiectarea cerintelor acopera activitati care
sunt critice pentru proiectarea web. Cerinte
incomplete sau incorecte pot conduce la
dificultati în dezvoltare sau chiar cauza
anularea proiectului .

•Cerintele joaca un rol cheie în dezvoltarea
aplicatiilor web

Obiectivele si asteptarile clienților sunt de obicei
diverse.
Ex.
• aplicatia web trebuie sa fie disponibila online
pâna la 1 septembrie 2015 (constrângerea
clientului);
• aplicatia web trebuie sa suporte minim 2500
utilizatori concurenti (obiectiv de calitate a
clientului);
• PHP trebuie folosit ca platforma de dezvoltare
(perspectiva tehnologica a dezvoltatorilor);
• toate datele clientilor trebuie trimise securizat
(obiectiv de calitate al utilizatorului );

Ex.(continuare)

•cautarea produsul dorit în mai putin de trei minute
(obiectiv privind caracterul utilizabil pentru client);
• utilizatorul trebuie sa aiba posibilitatea sa selecteze o
iconita care sa afiseze articolele incluse în card -ul de
cumparaturi în orice moment (obiectiv privind
capacitatea utilizatorului).

•Cerintele sunt clasificate deseori în :
1.cerinte functionale,
2.cerinte non-functionale
3.si constrângeri

•Cerintele functionale definesc capacitatea
sistemelor si serviciilor,
•cerintele non-functionale descriu nivelul de
calitate dorit

ETAPA2 : Planificare
•Planificarea este etapa în care se iau decizii care vor
influența designul , implementarea și promovarea
site-ului.

•Folosind informatiile colectate in etapa 1 se va realiza
un plan al site -ului: harta site, tema principala , subteme ,
etc. Aici se vor stabili si tehnologiile ce vor fi folosite
pentru implementare .

Întrebari preliminare.
•Cat timp preconizam ca va dura realizarea
sitului? Realizam un grafic cu esalonarea în timp
a etapelor pe care trebuie sa le parcurgem pentru
realizarea sitului .
•Cat de des dorim sa -l actualizam -zilnic,
saptamînal, bilunar sau lunar?
•Ce materiale si informatii sunt necesare pentru
a crea situl?

Scopul unui site web:

•Pentru a studia HTML
•Pentru a -și promova produsele sau serviciile
•Pentru a stabili o comunicare cu eventualii clienți
•Pentru a crea un site web personal
• Pentru a putea întra în legatura cu alte persoane
avănd acelea și preocup ări și interese
• Pentru a începe o afacere on-line și a castiga bani
•Pentru a extinde o afacere clasic ă, desfăsurat ă off-
line
• Pentru a face publicitate prin intermediul Internet –
ului

Accesibilitatea
Accesibilitatea reprezinta una dintre cerintele de
baza atunci cînd se proiecteaza o pagina web.
Aceasta înseamna ca orice utilizator trebuie si
poate sa aiba acces la site, indiferent de
• browserul pe care-l foloseste ,
•rezolutia sau dimensiunile ecranului ,
•setarile calculatorului sau
• eventualele disfunctii ale vederii .

Continut
•Diferenta dintre un sit atractiv si unul
plictisitor si neinteresant este data de valoarea
continutului.

•trebuie acordata o atentie maxima continutului,
deoarece pe baza acestuia vor fi dezvoltate
structura sitului si machetarea paginii.

ETAPA 3: Machetarea ( Design )
•Prin machetarea unei pagini web se întelege
modul cum sunt aranjate elementele
constitutive ale unei pagini : continut , grafica ,
legaturi , sistem de navigare , elemente
multimedia, etc.
•În cadrul aceluiasi proces de machetare se va
analiza structura paginii .

ETAPA 4: Implementare
Este etapa efectiva de realizare a website -ului
folosind toate tehnologiile stabilite anterior (in
cadrul etapei 2).
•Back -End
•Front -End

ETAPA 5: Testare si livrare
•La aceasta etapa se vor testa functionalitatea
formularelor , scripturilor , compatibilitatea cu
diverse browsere (stiind ca exista diferente de
afisare de la browser la browser), viteza de
incarcare , correctitudinea codului , etc… Daca
totul este in regula site-ul poate fi livrat clientului .

•Validarea codului sursă se poate efectua on -line,
folosind utilitarul W3C disponibil la adresa
http://validator.w3.org .

Promovarea site-ului
Promovarea unui site se face in mai multe directii :
•comunicarea cu vizitatorii prin sistemul de comentarii oferit de site
– raspunde intotdeauna pozitiv comentariilor chiar daca sunt si unele
negative
•comunicarea si fidelizarea utilizatorilor prin campanii de email
marketing – trimite regulat newslettere relevante celor care te
urmaresc . Nu ii stresa prin frecventa ridicata .
•optimizarea paginilor site-ului pentru motoarele de cautare –
adica prin SEO
•construirea de link -uri externe prin comentarea pe forumuri si
bloguri , guest posting
•crearea unui canal pe Youtube – in care se pot pune video -uri,
chiar de tip slideshow, cu continut relevant despre subiectul tratat de
site
•crearea conturilor in retelele de socializare cu trimitere catre site