CURS DEZVOLTARE

APLICATII WEB

LECTIA 1

Curs realizat si predat de Burcovschi David

Page 1 of 15
Cuprins

1) Introducere: ce este web-ul?

1.1) Topologia unei retele client-server
1.2) Servicii de retea. Porturi. IP-uri
1.3) Serverul Web. Apache2
2) Limbajul XML. Limbajul HTML
2.1) Inceputurile standardizarii XML
2.2) Aparitia limbajului HTML
2.3) Standardizarea HTML5. CSS3. Javascript
3) Structura unei pagini web
3.1) Elementele unei pagini WEB
3.2) Elementele unei pagini WEB responsive. Bootstrap.
3.3) Constructia unei pagini WEB folosind HTML5 si CSS3 si Bootstrap
4) Proiect

Page 2 of 15
Capitolul 1 - Ce este web-ul?

Topologia unei retele client-server

Conceptul de client server vine din perioada cand retelele de calculatoare erau formate
din statii de lucru, cu resurse putine numite terminale de acces si un calculator mare
centralizat cu resurse multe pe care fiecare utilizator putea sa acceseze anumite servicii.
Ulterior conceptul s-a dezvoltat implicand o arie mai bogata a serviciilor si a modurilor de
intrebuintare.

Serverul este componenta activa de retea ce furnizeaza intr-un mod centralizat anumite
servicii: web, ftp, etc.

Clientul este tot o componenta activa din cadrul unei retele dar care acceseaza serviciile
unui server.

In acest capitol vom defini urmatoarea retea formata din 3 statii de lucru, un switch, un
router si un server conform diagramei din figura 1.1.

Page 3 of 15
 Figura 1.1

Page 4 of 15
 Switchul are rol de a lega intre ele elementele de retea si a inainta pachetel in mod
corect catre destinatia corecta din retea (exemplu: cand cer ceva de la server are grija sa
inainteze cererea mea catre server).

Serverul ruleaza pe el servicii precum SSH, MySQL, Apache(web). Aceste servicii

insa nu pot rula fara sa aiba un identificator unic la nivel de gazda, acel identificator se
numeste port. Spre exemplu: portul implicit pentru serverul web Apache2 este 80. Asadar
cand vom accesa acest serviciu vom scrie in browser: 192.168.1.200:80 (browserele insa
stiu ca implicit e 80 pentru web si nu e nevoie sa scriem mereu, dar daca ar fi rulat pe alt
port cum ar fi 8000 atunci ar fi trebuit sa scriem 192.168.1.200:8000).
Folosind porturile putem sa avem mai multe servicii pe un server fizic si astfel sa le
diferentiem.
IP-ul are rol de identificare unica la nivel de retea. Numim retea legatura intre 2 sau
mai multe calculatoare nemijlocita de un router.
Routerul este echipamentul ce leaga mai multe retele intre ele.

Noi o sa vorbim despre serverul web Apache2. Acesta il vom folosi pe tot parcursul
cursului nostru.

Apache2 este un server web foarte vechi dar mai actual ca niciodata. Este folosit
inca din anii 90 pe majoritatea serviciilor de gazduire web, are o mare compatibilitate cu
multe limbaje terte: Python, PHP, Java etc.

Apache este capabil nu doar sa serveasca documente statice ci si generate de

anumite limbaje de programare ce comunica cu el prin niste intermediari numite drivere
CGI-BIN. Spre exemplu, PHP are drivere ce poate sa prelucreze documentul servit de
Apache inainte ca acesta sa fie servit clientului.

Etapele ar fi cam asa:

1) Clientul face o cerere catre server ca vrea sa ii serveasca /exemple.php

2) Serverul primeste aceasta cerere unde stie ce sa caute, unde sa caute (ex daca root
path-ul serverului web este /var/www/html el va cauta exemple.php in /var/www/html/
exemple.php
3) Vede ca e script php deci il tirmite la interpretor care va rula scriptul
4) Interpretorul prin intermediul la driver scoate rezultatul rularii si interpretarii si il trimite
catre Apache
5) Apache va servi clientului continutul servit de intepretorul PHP
Page 5 of 15
Capitolul 2 - Despre XML

XML-ul este un limbaj de marcare standardizat din necesitatea unui format

standard de a stoca/marca anumite date sau formate de documente. A aparut o data cu
primele procesoatare de text formatat (Rich Text).
XML-ul foloseste structura etichetelor pentru a marca anumite date. Spre exemplu:

<items>
<item id=1 />
<item id=2 />
</item>

HTML-ul este un substandard de XML-ului care este standardizat la nivel de

browsere pentru a randa corect elementele. Spre exemplu daca nu ar fi un standard cand
scriem <table></table> in loc sa afiseze un tabel ne-ar afisa fiecare browser altceva.
Asadar HTML-ul este un standard de XML ce vine de la HyperText Markup Language.

Prin hipertext se întelege un document (evident în sensul utilizat în

informatica: fisier creat printr-un editor, procesor etc) care contine, pe lânga text
(continutul clasic al unui document), graficã, imagini, animatie, înregistrãri audio,
legãturi cãtre alte documente. Un hipertext poate fi gândit într-un spatiu cu mai
multe dimensiuni, fiecare axã reprezentând un alt mijloc de comunicare: text, audio,
video etc.

Conceptul de hypertext a apãrut în iulie 1945 când Vannevar Bush a imaginat, în

articolul As we may think, scris pentru Atlantic Monthly, o masina care putea opera cu
texte si grafice on-line.

În 1960, Th.H. Nelson (Computer Lib/Dream Machines) a unit termenul de hipertext

cu cel de hipermedia, lucrarea lui influentând introducerea Web. În anii 1970, Nelson a
initiat proiectul XANADU, orientat cãtre biblioteci digitale si sisteme hipertext, proiect
nefinalizat însã.

Dupã anii 1980, aparitia sistemelor de help în produsele Apple si Microsoft,

sisteme care permit utilizatorilor sã navigheze prin selectãri de butoane sau termeni, au
fãcut ca notiunea de hipertext sã devinã una obisnuitã, desi hipertextele respective nu
aveau o complexitate foarte mare.

Hipertextul permite pãrãsirea modului traditional de citire a unui document: linie

dupã linie, paginã dupã paginã etc. Legãturile activate produc o desfãsurare a

Page 6 of 15
documentului dupã nevoile utilizatorului plus posibilitatea de pãstrare a atentiei cititorului
prin utilizarea legãturilor grafice, audio etc.

World Wide Web

World Wide Web, sau WWW, sau Web a apãrut la sfârsitul anilor '80 când
cercetãtorii de la CERN, Laboratorul European pentru fizica particulelor, au dezvoltat o
retea pentru a avea acces mai usor la documentele produse de diversele laboratoare. În
1990, ei au introdus un browser doar pentru texte si au dezvoltat HTML. În 1991 au
implementat Web la CERN.

În 1992 cercetãtorii de la CERN au introdus Web în comunitatea Internet si aceasta

a început revolutia (S.E. Eddy - HTML in plain English).

Ceea ce diferentiazã WWW de celealte componente ale Internet-ului este tocmai

hipertextul, care si-a gãsit în Web calea idealã de exprimare. Toate documentele
accesibile în Web sunt legate între ele indiferent de serverul pe care sunt memorate si
indiferent de locul geografic unde sunt.

Trecerea de la un document la altul, de la un subiect la altul, de la un loc la altul etc

produce o impresie puternicã asupra utilizatorului, îi dã acestuia certitudinea cã totul este
potrivit intereselor lui, potrivit ritmului propriu de întelegere.

HTML

HTML, sau HyperText Markup Language, a fost proiectat sã poatã opera cu

functionalitãtile multimedia ale WWW.
Limbajul de marcare permite transformarea oricãrui text într-un hipertext prin introducerea
unor marcaje, care vor indica modul cum se efectueaza legãturile documentului, cum vor
apãrea paginile documentului etc. Un document HTML poate fi fãcut public dacã este pe
un calculator care are acces la Internet. Un document fãcut public poate fi vãzut din orice
punct al Internet-ului. Desi nu este optiunea cea mai fericitã, vom utiliza
cuvantul tag pentru marcaj.

SGML, Standard Generalized Markup Language, pãrintele HTML-ului, a devenit, în

1986, standard ISO. Fiecare document SGML are asociat o definire a tipului de document
(DTD) care defineste regulile pentru continutul documentului. Fiecare versiune de HTML a
fost definitã într-un DTD.

HTML 1.0 si HTML+ au apãrut în 1990, respectiv 1993.

HTML 2.0, apãrut în 1994, a fost prima versiune standardizatã. Ea contine 49 de taguri.
HTML 3.0 a apãrut în 1995. Versiunea cuprindea extensii importante, cum ar fi marcaje
pentru notatii matematice, bannere etc. În prezent nu mai este utilizat.
HTML 3.2, introdus în 1996, este considerat ca succesorul versiunii 2.0, incorporând o
serie de taguri din HTML 3.0 ca si extensii Netscape.

Pe lânga versiunea standardizatã, o serie de firme producãtoare de browsere

(programele care permit vizualizarea documentelor) au creat propriile extensii. Sunt
cunoscute extensiile Netscape si Microsoft, cele doua mari firme care-si disputã piata,

Page 7 of 15
extensii dintre care se vor alege cu sigurantã extensiile pentru versiunile ulterioare de
HTML.

Standardizarea HTML5. CSS3. Javascript

O data cu modernizarea web-ului, a aparut necesitatea de a face lucrurile mai complexe:

animatii, design mai elaborat, atunci au aparut aceste standarde: HTML5 pentru HTML,
CSS3 pentru limbajul CSS si Javascriptul.

HTML5 aduce ca noutati:

-Tag-uri mai elaborate pentru parti ale unei pagini web: footer, header etc
-Standardizare si sintaxa mai curata
-Animatii native (nu e nevoie de css sau de javascript pentru anumite animatii)
CSS3 aduce ca noutati:
-Posibilitatea de a seta dimensiuni dinamice
-Folosirea de pseudovariabile
-Aparitia pseudoelementelor
-Animatii complexe inclusiv 3d
-Folosirea acceleratiei grafice native a browserului

Javascript: este un limbaj de programare pe front-end cu care putem manipula dinamic

elementele unei pagini web (le vom denumi DOM - Dinamic Objects Mapping).

Page 8 of 15
Capitolul 3 - Structura paginii web

Structura simpla a unei pagini este formata din:

Header
Zona de continut
Meniu
Sidebar-uri
Footer

figura 1.3

Page 9 of 15
 Acesta este codul de baza atunci cand incepem o pagina web in standard de
HTML5:

<!DOCTYPE html>
<html>
<head>
<title>Your web page title</title>
</head>

<body>
<p>The content you want to display to
users. </p>
</body>
</html>

Design responsive
Design-ul responsive se refera la modul in care paginile web sunt afisate pe mobil astfel
incat experienta utilizatorului sa fie una placuta si fluida.

Cand vorbim de design responsive vorbim implicit despre gridlines care sunt masurile la
care pagina noastra se imparte astfel incat sa se scaleze eficient. Aceste gridlines sunt
ilustrate in imaginea de mai jos:

Figura 1.4 - Stabilirea initiala a gridline-urilor

Page 10 of 15
 Figura 1.5 - Simularea afisarii elementelor in
functie de gridlines

Viewporturile sunt dimensiunile la care aplicatia noastra se scaleaza diferit. Spre

exemplu:
pe mobil viewporturile cele mai uzuale sunt intre 320px si 790px, pe tableta intre 790px si
1024px si pentru Desktop sunt peste 1024px.

Page 11 of 15
Bootstrap
Bootstrap este o librarie online de responsive design. O sa o folosim pe tot
parcursul cursului in a crea pagini web dinamice si responsive. Pentru a il instala vom
proceda astfel:

1) Deschidem un document nou .html in folderul nostru unde lucram proiectul.

2) Vom initializa o structura simpla de HTML5 asa cum am descris mai sus la
sectiunea cu codul initial de HTML5.
3) Apoi vom include CSS-ul si JS-ul de Bootstrap la noi in pagina de pe CDN asa, in
head la pagina:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/
bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/
K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/
bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity="sha384-
rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl
/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/
js/bootstrap.min.js" integrity="sha384-
Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7
Txa" crossorigin="anonymous"></script>

Acum putem sa folosim elementele de bootstrap in a crea pagina noastra web.

O sa pornim de la un template basic, va rugam sa il descarcati de aici:

https://startbootstrap.com/templates/bare/

Acesta este template-ul pe care o sa lucram. O sa creeam o pagina de blog de

prezentare (prima pagina).

Vom crea ceva asemanator cu aceasta pagina ca si structura:

Page 12 of 15
Figura 1.6 - Pagina demo pe care o vom lucra

Page 13 of 15
 Ce vom face similar ca aici: structura meniului si a postarilor, zona de cautare.
Asadar vom incepe prin a crea zona de postari cu un col-md-9 iar sidebarul cu cu un col-
md-3.
Aceste col-uri sunt definite pentru a ne ajuta in a folosi grid-systemul pe pagina.
Adica ne va defini zone delimitate geometric proportionale cu procentele: 75% pentru
col-md-9 si respectiv 25% pentru col-md-3. Astfel pe mobil aceste div-uri vor avea o
dimensiune de 100% pe Desktop de 75% si 25%. Mai jos am reprezentat grafic ce
inseamna col-urile in Bootstrap.

Figura 1.7 - Exemplu de utilizare a col-urilor grid

Urmatorul pas ar fi sa definim postarile ca si carduri. In Bootstrap cardurile sunt definite in

felul urmator:

Sunt elemente ce grupeaza continut similar celor de la postari. Vom folosi cardurile
atat in sidebar cat si in partea de continut principala.

Pentru mai multe detalii legate de Bootstrap va rog sa consultati urmatorul URL:
https://www.w3schools.com/bootstrap4/default.asp

Page 14 of 15
Proiect
Continuati pagina web conform urmatoarelor indicatii:

1) Adaugati o sectiune de articole promovate folosind elementul Carousel (consultati

documentatia Bootstrap pentru asta) unde veti pune imagini cu poze din diverse zone
turistice.
2) Creati o sectiune de review-uri unde sa apara unele sub altele review-urile de la
utilizatori
3) Faceti o zona de testimoniale asemanatoare cu cea de review-uri

Page 15 of 15