APLICAIE WEB PENTRU PROMOVAREA SERVICIILOR FOLOSIND [606621]

Licență

APLICAIE WEB PENTRU PROMOVAREA SERVICIILOR FOLOSIND [606621]

Byadmin ianuarie 1, 2024

Universitatea din București
Facultatea de Matematică și Informatică
Departamentul de Informatică
Domeniul de licență Calculatoare si Tehnologia Informației
Specializarea Tehnologia Informației

LICEN܉Ă

Profesor Coordonator:
Lector Dr. Mihail Cherciu Absolvent: [anonimizat]
2017

Universitatea din București
Facultatea de Matematică și Informatică
Departamentul de Informatică
Domeniul de licență Calculatoare si Tehnologia Informației
Specializarea Tehnologia Informației

APLICA܉IE WEB PENTRU PROMOVAREA SERVICIILOR FOLOSIND
HTML/CSS/PHP/MySQL/JAVASCRIPT

Profesor Coordonator:
Lector Dr. Mihail Cherciu Ab solvent:
Andrei Ciulpan

Bucuresti
2017

Cuprins
1. Introducere …………………………………………………………………………………………………………………. 1
1.1 Scurt istoric……………………………………………………………………………………1
1.2 Despre website-ur i………………………………………………………………………….…2
1.3 Tema proiectului ………………………………………………………………………………8
2. Limbaje utilizate …………………………………………………………………………………………………………. 9
2.1 Limbajul HTML ……………………………………………………………………………… 9
2.2 Limbajul CSS ………………………………………………………………………………..19
2.3 Limbajul JAVASCRIPT ……………………………………………………………………..22
2.4 Limbajul PHP ……………………………………………………………………………….23
2.5 Limbajul MySQL …………………………………………………………………………….26
2.6 Optimizare SEO ……………………………………………………………………………..27
3. Descrierea aplica܊ie i …………………………………………………………………………………………………… 32
3.1 HTML – ………………………………………………………………………………………32
3.2 PHP – ………………………………………………………………………………………… 39
3.3 Baza de date – MySQL………………………………………………………………………45
3.4 CSS – …………………………………………………………………………………………48
3.5 JAVASCRIPT – ……………………………………………………………………………..60
4. Concluzii……………………………………………………………………………………… 61
5. Bibliografie……………………………………………………………………………………63

1

1. Introducere
1.1 Scurt istoric. WWW. Hipertext.
Internetul este o re ܊ea globala de calculatoare interconectate, din întreaga lume , care permite
comunicarea între milioane de utilizatori. Internetul î܈i are originea în re܊eaua numită ARPAnet
(Advanced Research Projects Agency), ini܊iată în 1968 de Departamentul Apărării al S.U.A.
Ulterior, multe colegii, universită܊i, centre de cercetare ܈i companii private s -au conectat la
Internet.
În anul 1980, mai multe universități au fost conectate la Internet. Acest lucru a permis
universităților schimbul de date cu usurin܊ă . După o vreme Internetul s -a extin s și în scopuri
comerciale, ajungând la multe alte moduri de utilizare a informațiilor transmise pr in intermediul
acestei rețele.
Standardul impus pentru Internet este protocolul TCP/IP. Spus în termeni simpli, TCP/IP este
numele unei familii de protocoale de rețea. În esențǎ, un protocol es te un set scris de directive
care definește felul în care douǎ aplicații sau mașini pot comunica între ele, fiecare
conformându- se cu aceleași standarde. TCP/IP nu este restricționat doar la Internet. Este
protocolul de rețea cel mai larg folosit în lume, folosit pentru rețele mari, cât si pentru rețele
mici. TCP/IP vine de la Protocolul de Control al Transmisiei/Internet Protocol, care sunt de fapt
douǎ protocoale separate. Contrar a ce gândesc unii oameni, termenul TCP/IP se referǎ la o
întreagǎ familie de protocoale înrudite, toate proiectate pentru a transfera informații prin
intermediul rețelei. TCP/IP este proiectat pentru a fi componenta software a unei rețele. Toate
pǎrțile protocolului TCP/IP au anumite sarcini, cum ar fi trimiterea de scrisori elec ronice,
transferal de fișiere, livrarea de servicii de logare la distanțǎ, dirijarea de mesaje, sau
manipularea cǎderilor de rețea.
WWW numit World Wide Web reprezintă unul din numeroasele servicii disponibile pe web.
O multitudine de documente sunt stoc ate pe calculatoare speciale, numite servere, care permite
utilizatorului accesul nu numai la informa܊ii de tip text, ci ܈i la informa܊ii audio, video, etc.

2

Documentul de bază al WWW este pagina web care se elaborează cu ajutorul unui limbaj
specific, numit Hypertext Markup Language (HTML).
Serviciile oferite de Internet sunt bazate pe modelul Client/Server, model care utilizează un
protocol de tip cerere- răspuns. Calculatoarele client efectuează cereri către server ܈i utilizează
serviciile oferite de server. Server- ul prime܈te cererile de la client, le execută ܈i transmite
rezultatul.

Un site Web poate fi caracterizat ca fiind o colecție de informații red ate sub forma unor
pagini w eb care con܊in fișiere multimedia, documente și de alte tipuri, ex istând legături între
acestea.
1.2 Despre website-uri
Denumirea de website sau pur și simplu site, ori „ site web ” reprezintă o grupare de pagini
web conținând texte, imagini fixe, imagini mișcătoare și chiar sunete, accesibile în Internet și
care sunt con ectate între ele prin așanumite le hyperlinkuri. Aceste website-uri pot reprezenta o
companie, un proiect, o rețea de utilizatori, o persoană particulară, o administrație publică sau
multe altele.

3

Uniform Resource Locator sau URL specifică adresa unei res urse existentă pe
Internet. Fiecare resursă care există pe Internet are propria ei adresă de identificare unică,
denumită URL, ce specifică serverului unde anume se găseaste adresa respectivă.
Oricare URL este format din două păr܊i :
– Numele protocolului – http, ftp, etc.
– Numele domeniului

Un protocol este un sistem de reguli ܈i proceduri ce guvernează comunica܊ia dintre două
dispozitive. Atât timp cât două sau mai multe dispozitive folosesc acela܈i protocol, ele pot
comunica între ele prin schimb de date. Există a numite protocoale care afectează transmisiile de
date inclusiv parametrii ܈i semnalele folos ite în transmisiile asincrone. Pe scurt, protocoalele
reprezintă de fapt o modalitiate prin intermediul căreia diferite dispozitive pot comunica între
ele.
Tipuri de protocoale :
 Protocoale de aplicații – oferă schimbul de date între aplica܊iile existente într -o
re܊ea, ca de exemplu File Transfer Protocole (FTP) sau Simple Mail
Transfer Protocol (SMTP)

File Transfer Protocol sau FTP este un protocol ce permite schimbul de fi܈iere între
două sau mai multe calculatoare.
Simple Mail Transfer Protocol sau SMTP este un protocol folosit la transmiterea
mesajelor electronice (E-mail).
 Transmission Control Protocol sau TCP – Protocol de transport ce
controlează modul de transmitere a datelor ܈i asigură transmiterea corectă a
acestora între utilizatori
 Internet Protocol sau IP – Protocol de rețea folosit la comunicarea între
două sau mai multe calculatoare asigurând transmiterea informa܊iilor sub for ma
unor pachete. U n pachet este o informa܊ie logică ce con܊ine informa܊ii atât
despre localizarea datelor cât ܈i despre datele utilizatorului .

4

Transmission Control Protocol/Internet Protocol sau TCP/IP este protocolul standard
folosit de calculatoare pentru a comunica prin Internet.
Hypertext Transfer Protocol sau HTTP este un protocol prin care paginile WWW sunt
transferate prin re܊ea. Acesta descrie cererile recep܊ionate de la clien܊i ܈i răspunsurile primite de
la servere.
Hyperlink (folosit mai des sub numele de link) este o adresă cu ajutorul căreia se pot
face legături spre alte pagini web. Accesarea se realizează printr -un simplu click pe acesta.
Pozi܊ionând cursorul mouse -ului pe legătura respectivă, aceasta se transformă din săgeată într -o
mânu܊ă. De asemenea, ܈i unele imagini dintr- o pagină web pot con܊ine hyperlink -uri. Dacă
cursorul mouse- ului, plasat pe imagine, î܈i schimbă forma într-o mână, acest lucru înseamnă că
imaginea respectivă contine o legătura către altă pagină web.
Portul este un num ăr unic ce se adaugă în component a pachetelor transmise și este
specific pentru fiecare aplicație. Majoritatea aplicațiilor de rețea folosesc porturi pentru a
comunica. Pe orice dispozitiv pote avea mai multe aplicații de rețea, fiecare dintre acestea
folosind un port diferi t.
Internet Service Provider sau ISP este firma care oferă servicii de acces la Internet.
Structura unei adrese Web
Orice dispozitiv aflat în re܊ea are o adresă numită adresă IP ce permite să fie identific at
în mod unic.
Adresa IP este formată din adresa de re܊ea ܈i adresa dispozitivului care prime܈te mesajul.
Aceasta este reprezentat ă pe 32 de bi܊i. Structura acestei adrese este formată din trei păr܊i: o parte
care indică tipul adresei, o parte care identifică re܊eaua la care este conectat sistemul ܈i o alta care
identifică conexiunea prin care sistemul se leagă la re܊ea.
Adresa IP este formata din clasă.rețea.gazdă.
Clasa adresei – în func܊ie de clasa căreia îi apar܊ine adresa, numărul de bi܊i rezerva܊i pentru
celelalte câmpuri va fi diferit. Există patru clase de adrese: clasa A, clasa B, clasa C ܈i clasa D.

5

În momentul în care Inte rnetul a început să se ext indă, devenea din ce în ce mai dificil de
înregistrat o eviden܊ă pentru numele server elor gazdă, motiv pentru care era abs olut necesar ă
utilizarea alt ei forme de adresare ܈i denumire. A܈a a luat na܈ tere DNS (Domain Name System),
un sistem care structurează pe domenii ܈ i subdomenii totalitatea numelor din Internet. Domeniul
este reprezentat de un ܈ir scurt de caractere specific unei tări, organiza܊ii sau institu܊ii. În cadrul
re܊elei de Internet, un nume de calculator este format din mai multe domenii separate de punct.
Re܊eaua Web se împarte în domenii de nivel superior numite TLD (Top Level Domain),
iar fiecare domeniu se împarte în subdomenii. Numărul total de domenii nu este cunoscut
dinainte, ci depinde de sistemul de organizare adoptat.
Cele mai folosite domenii sunt :
– Generice – care reprezintă un domeniu organiza܊ional
– De țară – reprezintă un cod cu ajutorul căruia se identifică ܊ara de apartenen܊ă a
domeniului.
Dintre cele mai cunoscute domenii generice sunt :
 .com – Organiza܊ii ܈i societă܊i comerciale
 .edu – Institu܊ii educa܊ionale
 .gov – Organiza܊ii guvernamentale
 .int – Organiza܊ii interna܊ionale
 .mil – Organiza܊ii militare
 .net – Centre de administrare a re܊elelor mari
 .org – Organiza܊ii non -profit

Domeniile de ܊ară în general sunt formate din două litere :
 Ro – România
 Uk – Marea Britanie
 Au – Australia
 It – Italia
 Ca – Canada
 Ru – Rusia
 Fr – Fran܊a
 Ch – Elve܊ia

6

 De – Germania
 Pl – Polonia

WEB BROWSER reprezintă o apl ica܊ie cu ajutorul căreia se pot realiza schimburi de
date cu diferite calculatoare din re܊ea , cu ajutorul unor pagin i afi܈ate pe monitor. In momentul in
care este realizată o cerere oarecare, aplica܊ia va verifica dacă acea cerere ajunge acolo unde
trebuie , urmând ca mai apoi să se deschidă pagina respectivă.
Motorul de căutare reprezintă un program prin intermediul căruia se pot căuta diverse
pagini cu informa܊ii referitoare la un subiect anume. Realizarea acestei că utari se face foarte
simplu si usor, folosindu-se un cuvânt sau un ansamblu de cuvinte, astfel încat putem ob܊ ine ca
rezultat afi܈area adreselor paginilor ce con܊in cuvântul -cheie.
Cookie este informa܊ia pe care un site web o păstrează pe ha rd disk-ul clientului, astfel
încât să-܈i poată aminti identitatea ܈i preferin܊ele acestuia pentru vizitările ulterioare ale site -ului
respectiv. De asemenea, atunci când acela܈i utilizator va accesa aceea܈i pagină web, aceasta va fi
încărcată mai repede.

Cache este locul unde se păstrează temporar informa܊ii, ca de exemplu pagina de start a
browser-ului, ultimele pagini vizitate, etc. În momentul accesării unui site, calculatorul nu mai
acceseaz ă legătura la internet, ci ia informa܊iile din memoria cache a hard disk-ului.

Metadatele sunt informa܊ii folosite la descrierea ܈i organizarea datelor sau stocarea altor
date. Acestea au apărut din cauza necesită܊ii de a diferen܊ia datele stocat e din tr-o bază de date ܈i
datele ce definesc câmpuril e înregistrării bazei de date. Baza de date este formată din înregistrări.
O înregistrare con܊ine cămpuri.

7

8

1.3 Tema proiectului

Atât companiile cât ܈i structuri le administrative au observat că prezența online că este foarte
importantă ܈i oferă benefică din toate punctele de vedere . Din acest motiv ace܈tia tratează cu
seriozitate fiecare element din mediul online.
Internetul are un rol important pentru fiecare dintre noi deoarece ne oferă informa܊ii u܈or de
accesat prin intermediul textului, imaginilor, sunetelor sau videoclipurilor, dar ܈i diverse ap licatii
precum po܈ta electronica numită e-mail, transferul de informa܊ii ܈i fi܈iere de date, chat,audio,
video, telefonie ܈i telefonie cu imagine, radio, televiziune, remote control la distan܊ă,
e-comm erce ܈i multe altele, acestea având ca scop u܈urarea muncii de zi cu zi ܈i nu numai.
Această aplica܊ ie web are ca scop prezenta rea ܈i promovarea anumitor servicii. În prezent,
este foart e bine ܈tiut că un rol destul de important în dezvoltarea unei afaceri este prezen܊a pe
web. Site-ul web este un instrument al afacerii , cu ajutorul căruia se poate lucra ܈i de câ܈tiga în
acela܈i timp. Dacă o companie nu de܊ine un site web al său, majoritatea clien܊ilor vor privi fără
prea mare încredere în serviciile sau produsele companiei respective. Site- ul web al orică rei
companii automat devine un instrument de publicitate, deoare ce este prezentată toată informa܊ ia
despre activitatea companiei. Iar i nforma܊ia nu este prezentată pur ܈ i simplu, ci e foarte bine
structurată ܈i aranjată, astfel încat să atragă aten܊ ia utilizatorilor din orice col ܊ al lumii.

9

2. Limbaje utilizate
2.1 Despre HTML
HTML este prescurtarea de la HyperText Markup Language, ceea ce reprezint ă de
fapt limbajul pe care browserele de internet îl în܊eleg si cu ajutorul lui pot fi afisate paginile web.
Scopul HTML este mai degrabă prezentarea informa܊iilor decât descrierea semanticii
documentului. Specifica܊iile HTML sunt declarate de World Wide Web Consortium (W3C).
Tag- urile nu sunt altceva decât ni܈te marcaje sau etichete pe care limbajul HTML le
folose܈te alături de texte pentru a ajuta browser -ul de int ernet să afi܈eze corect con܊inutul
paginilor web.
Aceste tag- uri (etichete) pot fi de două feluri:
• Tag- uri pereche (un tag de început ܈i unul de sfâr܈it).
Exemple:
<html> ܈i </html>; <title> ܈i </title>; <head> ܈i </head>
• Tag-uri singular (nu au un tag de sfâr܈it)
Exemple:
<hr>, <br>

Structura unei pagini web
<!DOCTYPE HTML …… >
<html>

10

<head>
<title> Titlu </title>
</head>
<body>
………….
</body>
</html>
• Elementul <html> … </html> indică browserului faptul că este vorba de un document HTML
sau XHTML.

• Blocul <head> … </head> con܊ine informa܊ii despre documentul HTML: titlu, limbajul de
script folosit, defini܊ii destil, etc. Acestea sunt introduce prin marcaje precum: <title>, <script>,
<style> etc., incluse în blocul <head> … </head>.

• Antetul poate conține titlul paginii, cuprins între marcajele <title> și </title> . Titlul apare pe
bara de titlu a ferestrei afișate în browser.

• Blocul <body> … </body> include toate elementele, atributele ܈i informa܊iile care vor fi
afi܈ate în fereastra browserului.

• Comentariile sunt scrise între marcajele <!– și –>.

Atributele tagurilor

11

Atributele pot fi definite ca ni܈te proprietă܊i ale tagurilor. Atributele se pun numai în tagul
de început. Dacă un tag nu are niciun atribut, atunci browser -ul va lua în considerare valorile
implicate ale tagului resprectiv.
Atributul bgcolor, se folose܈te asociat cu tagul <body>, precizează ce culoare va avea
fondul paginii web (background color). Fondul unei pagini web are în mod implicit culoarea
alba, dar dacă dorim ca fondul paginii create să fie galben, atunci declara܊ia tagului va fi:
<body bgcolor= ”#00ff00 ”> sau <body bgcolor= ”lime”>
Tagul singular <br> este folosit pentru a se trece pe r ândul următor.
Dacă vrem să trasăm o linie orizontală, folosim tagul singular <hr> care provine de la
”horizontal rule ”. Pentru tagul <hr> se pot folosi proprietă܊iile: align – pentru alinierea liniei,
color – pentru culoarea liniei, size – pentru grosimea liniei ܈i widt h – pentru lungimea liniei.

Referințe (link -uri) în pagina web
O caracteristică principală a hipertextelor o constituie legăturile (link -urile).
Un link e o legătură către altă adresă Web, adresă care poate fi accesată din fereastra
browser-ului printr-un singur click.
Link-urile pot fi de două tipuri: interne ܈i externe.
Marcajul principal atât pentru referin܊e interne cât ܈i pentru cele externe este:
<a> … </a> (anchor – ancor ă), acesta trebuie să con܊ină parametrul href=valoare, fără de care nu
are niciun efect.
Exemplu: < link rel=”stylesheet ” type= ”text/css ” href= ”css.css ”>

12

Referințe interne
Referintele interne sunt folosite într-o pagina web atunci când volumul informa܊iei este
mare, iar în acest caz sunt foarte importante salturile pentru a permite utilizatorului să se
deplaseze u܈or într-un anumit loc al paginii web. Locurile în care se face deplasarea se numesc
țintele salturilor interne sau ancore cu nume. Aceste ancore cu nume sunt specificate în
documentul HTML, prin utilizarea parametrului name al marcajului <a> … </a>:
Exemplu: <a name= ”despre ”>Despre HTML</a>
Adăugarea legăturilor către ținte din cadrul paginii Web
Corespondentul unei ancore cu nume care define܈te saltul către această ܊intă este:
<a href=#Nume Ancor ăCuNume >Nume</a>
Exemplu: <a href= ”#despre ”>Despre HTML</a>

Referințe externe
Sunt referin܊ele făcut de la o pagina web la alta.
Exemplu: <a href= http://www.yahoo.com >Yahoo! </a>

13

Specificarea culorilor în HTML
Anumite elemente din HTML permit utilizarea de culoare. Acestea sunt prezentate în
două moduri:
• prin numele culorii. Sunt 216 de culori recunoscute de diferite browsere.

Anumite culori, au și nuan܊e de închis (dark ) sau deschis (light). Exemplu: darkblue sau
lightred.
• prin constanta RGB :
Baza redării electronice a imaginii în culori se produce prin combin area în proporții
diferite ale culorilor Roșu, Verde și Albastru. A܈a se poate realiza culoarea dorită . În cazul
culorilor pe care le poate reda un browser HTML, fiecare dintre aceste componente de culoare
poate avea 256 de stări posibile: de la 0, care înseamnă că respectiva culoare lipsește cu
desăvârșire, până la 255, care înseamnă că respectiva culoare este folosită la intensitatea maximă.
În acest fe l, prin amestecuri diferite, putem obține 2563, deci aproximativ 16 milioane de nuanțe
diferite.
Componentele de culoare în HTML se specifică folosind numere hexazecimale. Astfel,
fiecare dintre numerele dintre 0 și 255 se codifică în hexazecimal printr -un număr între 00 și FF.
Compone nta HTML pentru specificarea unei culori are forma generală #RRGGBB, în care RR,
GG respectiv BB reprezintă câte un număr hexazecimal cuprins între 00 și FF.
Câteva exemple de culori obținute folosind constante:

14

Paragrafe și preformatarea textului
• <p> … </p> Începe o nouă linie cu textul dintre taguri
– admite atributul align
• <br> – trecerea la o linie nouă
• <p> (fără tagul de sfâr܈it) – inserează o linie liberă
• <pre> … </pre> – afi܈ează textul cu spa܊ierea ܈i alinierea din documentul sursă HTML.

Liste
1. Liste neordonate
• Blocul este delimitat de etichetele <ul> … </ul>
• Fiecare element al listei este introdus prin eticheta <li> … </li> (</li> este
op܊ional)
Utilizarea atributului type la liste ordonate:
• Valorile atributului type:
 circle (cerc)
 disc (disc plin) – valoare implicită
 square (pătrat)

Forme particulare de liste neordonate:
 Listă de directoare – <dir > … </dir>
 Listă de meniuri – <menu>

2. Liste ordonate
• Blocul este delimitat de etichetele <ol> … </ol>

Tabele
1. Crearea unui tabel
 inserare tabel <table> … </table>
 inserare o linie în tabel (op܊ional) <tr> … </tr>
 inserare o celulă de date (op܊ional) <td> … </td>
 Atributul border la eticheta <table> realizeaz ă chenar la tabel.
 background = culoarea fundalului unui tabel (adresa URL a imaginii fundalului).

15

 <caption> Titlul tabelului
 align – alinierea tabelului, care poate fi:
bottom , top , left , right

2. Alinierea tabelului
 Se folose܈te atributul align al etichetei <table>
 left (valoare prestabilit ă) – tabelul este plasat în partea stângă a paginii
 center – tabelul este plasat în partea central ă a paginii
 right – tabelul este plasat în partea dreaptă a paginii

3. Dimensionarea tabelului
 Se foloseste atributele etichetei <table> :
 width ܈i height
 Valorile pot fi :
 întreg i pozitive (număr de pixeli)
 întregi între 1 ܈i 100 urmate de % (procent) din lungimea/lă܊imea paginii
 Pozi܊ionarea textului într- o anumită zonă a paginii prin folosirea unui tabel fără
chenar se realizează prin border= ”0”.

4. Spațierea celulelor d in tabel
 Atributul cellspacing = distan܊a dintre două celule vecine.
 Are valoarea prestabilită de 2 pixeli
 Atributul cellpadding = distan܊a dintre marginea unei celule ܈i con܊inutul ei .
 Are valoarea prestabilită de 1 pixeli

5. Dimensionarea celulelor din tabel
 width ܈i height atribute pentru etichetele <td> ܈i <th>
 <th> = descrie capul de tabel

6. Alinierea con ținutului d in celule
 Pentru ordonarea pe orizontală se folose܈te atributul align , care poate avea valorile:
 right
 center (implicit)
 left
 Pentru ordona rea pe verticală se folose܈te atributul valign, care poate avea valorile:
 bottom – jos

16

 middle – la mijloc (implicit)
 top – sus

7. Celule fără conținut
 După etichetă se adaugă: <br>
 După etichetă se adaugă: &nbsp

Formulare
Tipuri de elemente: butoane, casete de selec ܊ie, câmpuri de editare, etc.
1. Crearea unui formular

<form> ….. </form>
Atributele tag-ului <form>:
 action – reprezint ă unde se livrează datele introduse în formular, adresa URL a scriptului
aflat pe server.
Exemplu:
<form action = ”http://www.yahoo.com/cgi-bin/prelucrare.cgi ”>
 method – reprezint ă metoda folosi tă de browser pentru livrarea datelor din formular.
method are două valori:
 post – datele furnizate scriptului ca date de intrare standard.
 get – (impli cit) datele sunt adăugate la adresa URL precizată de atributul action .
Între adres a URL ܈i date se inserează un ?.
Exemplu:
<form action = ”http://www.yahoo.com/cgi-bin/prelucrare.cgi?
nume1=val1&nume2=val2 ”>

Pentru primirea datelor introduse în formulare, pe e-mail, se folose܈te comanda mailto:
<form action = mailto:ciulpan_andrei@yahoo.com method= ”post”>

Pentru caracterizarea datelor din formular se folosesc tagurile:
<input> <select> <option> <textarea>

17

Tagul <input>
Se pot introduce în formular:
 Casete de validare
 Câmpuri de tip password
 Câmpuri de editare (casete de text)
 Butoane de expediere ܈i anulare
 Butoane radio

Atribute le tag-ului <input>: type , name , value
Atributul type are următoarele valori:
 password – caracterele introduse sunt înlocuite cu asteriscuri (*)
 text – câmp de editare pe o singură linie
 check – inserează un ܈ir de casete de validare – se pot alege ܈i mai multe variante
 radio – inserează un ܈ir de butoan e radio (elemente care se folosesc pentru a selecta
dintr- o listă de op܊iuni una ܈i numai una dintre ele)
 reset – se introduce un buton de anulare a informa܊iilor din formular
 submit – se introduce un buton de expediere
 hidden – introduce în fromular un câmp ascuns
 button – introduce în fromular un buton obi܈nuit

Butoane radio : se poate selecta numai o op܊iune.
Casete de validare : se pote valid a una sau mai multe op܊iuni.
Butoane declarate de utilizator – altele decât submit ܈i reset :
<input type= ”button ” mane= ”buton nou ” value= ”text”>
Câmpuri ascunse (hidden fields) – informa܊iile introduse în acest câmp nu pot fi schimbate de
browser sau de utilizator:
Exemplu:
<input type= ”hidden ” mane= ”sscuns ” value= ”modifică” >

18

Imagini
1. Inserarea unei imagini, alinierea imaginii și a textului
Se folosesc atributele: alt, border, width, height, hspace, vspace
vspace= ”15” Distan܊a pe verticală dintre imagine ܈i text este de 15 pixeli
hspace= ”10” Distan܊a pe orizontală dintre imagine ܈i text este de 10 pix eli

2. Imagini folosite ca fond (background) al paginii
Exemplu: <body background= ”…/Imagini/imagine.jpg ”>

3. Imagini folosite ca legături
Exemplu:
<a href= ”index.html ”>
<img src= ”…/Imagini/imagine.jpg ” width= ”100” height= ”80” alt=”culori ”>
</a>

Între etichetele <a > ܈i </ a> s- a inclus o imagine care înlocuie܈te textul explicative pe care
vizitatorul urmează să facă click cu mouse -ul. Imaginea serve܈te ca legătură către o altă
pagină.

Multimedia
 MIME (Multipart Internet Mail Extension)
Multimedia implementează mai multe formate diferite, poate fi aproape tot ce se poate auzi sau
vedea: poze, muzică, sunet, video, înregistrări, filme, anima܊ii.
Atunci când un browser identifică extensia Htm sau Html , se va trata fi܈ierul ca un fi܈ier
HTML. Extindere a Xml indică un fi܈ier XML ܈i extensia Css indică un fi܈ier foaie de stil.
Imaginile sunt recunoscute prin extensii cum ar fi: Gif, Png sau Jpg.
Fi܈ierele multimedia au, de asemenea, propriile lor formate cu diferite extensii, cum ar fi: SWF,
WAV, MP3, MP4, etc.
 Programe de completare
Sunt mici aplica܊ii care ajută browserele să afi܈eze corect fi܈ierele de date în
interiorul ferestrei browserului.
 Legături la fișiere multimedia externe

19

Înglobarea fi܈ierelor cu <embed> … </embed> sau <object> … </object> .
 Înglobarea miniaplicațiilor cu parametrii: applet ܈i object

2.2 Despre CSS
CSS (Cascading Style Sheets – Foi de stil in cascasă ) este un limbaj stilizare pentru
elementele unui document HTML. Acesta poate fi utilizat ܈i pentru formatarea elementelor
XML, XHTML ܈i SVGL.
O foaie de stil este un set de reguli. CSS a fost creat odată cu HTML 4, pentru a oferi o
metodă mai eficient ă de a crea elemente de stil pentru HTML.
Aceste stiluri pot fi ata܈ate elementelor HTML , astfel:
 Intern – prin elementul <style> în sec܊iunea <head>
 Inline – prin atributul style în declararea elementelor HTML
 Extern – prin utilizarea unui fi܈ ier extern CSS

Modul preferat de a adăuga CSS la HTML, este de a pune sintaxa CSS într -un fisier
separat de tip CSS.
Voi prezenta descrierile CSS folosind atributul style.
Foaie de stil internă
Declararea unui stil intern se utilizează în cazul în care un singur document are un stil
unic. Aceast a se define܈te în sec܊iunea <head> a paginii HTML, folosind tag-ul <style>.
Foaie de stil inline
Declararea unui stil inline se utilizează în ca zul în care un stil unic se folose܈te la o
singură apari܊ie a unui element. Datorită utilizării stilurilor inline, se aplică style în tag-ul în
cauză. Elementul style poate con܊ine orice proprietate din CSS.
Proprietatea background-color define܈te culoarea de fundal pentru un element. Această
proprietate anulează ” vechiul ” atribut bgcolor.

20

Proprietă܊ile font-family, color ܈i font-size definesc fontul, culoarea ܈i dimensiunea
textului într-un element.

Foai e de stil externă
Declararea unui stil extern este ideal atunci când stilul este folosit la mai multe pagini.
Datorită foii de stil externe, exist ă posibilitatea să se schimbe întregul aspect al site-ului prin
modificarea unui singur fi܈ ier. Toate paginile trebuie să facă trimitere la foaia de stil prin
intermediul tag-ului <link>. Tag-ul <link> trebuie să se afle în interiorul sec܊iunii <head>.
Exemplu:
<head>
<link rel= ”stylesheet ” type= ”text/css ” href= ”mystyle.css ”>
</head>
Tag- uri HTML Style
<style> – define܈te informa܊ii de stil pentru un document.
<link> – define܈te rela܊ia dintre document ܈i resursa externă.
Tag-uri și attribute
În HTML 4, mai multe etichete ܈i atribute au fost folosite pentru documentele de stil.
Aceste tag-uri nu sunt acceptate în versiunile mai noi ale HTML. Se va evita folosirea
elementelor : <font>, <center> ܈i <strike>, precum ܈i atributele: color ܈i bgcolor.
Modul prectic de lucru
 Pentru a definii un set de reguliu, este nevoie de un selector ܈i de o declarație.
O declara܊ie are sintaxa:
nume_proprietate:valoare_proprietate
nume_proprietate este un cuvânt rezervat, care define܈te o proprietate.

21

valoare_proprietate este o valoare validă pentru respective proprietate.

 Un bloc de declara܊ii este o listă de declara܊ii separate cu semnul ”punct ܈i virgulă” ,
inclusă într -un bloc {…}.

 Pentru a defini o regul ă, se utilizează un selector urmat de un bloc de declarații.

Exemplu:
p{font-size : 12pt; font-style : italic;}
S-a definit o regula pentru afi܈area tuturor elementelor <p> cu un tip de literă italic, de 12
puncte.

Cu ajutorul CSS-ului putem crea pagini web simple dar si complexe folosind efecte
diverse. Cu CSS putem stabili culoarea, marimea si fontul textului, deasemenea putem crea
un layout (un suoport pentru elementele HTML) personalizat adaugand margine culoare sau
imagine de fond si multe altele. In concluzie CSS te poate scapa de multe batai de cap,
ajutandute in a mentine codul html cat mai simplu si mai ordonat.
CSS3 reprezintă un upgrade ce aduce c âteva atribute noi și îmbunătățește
dezvoltarea noilor concepte în webdesign.
Mai jos, î n listă , sunt prezentate cele mai importante modulele adăugate in CSS3:
 2D/3D Transformations
 Model
 Text Effects
 Animations
 Backgrounds and Borders
 User Interface
 Selectors
 Image Values and Replaced Content
 Multiple Column Layout

22

De܈i au existat unele incompatibilită܊i î ntre browsere, majoritatea acestora au fost remediate,
iar proprietă܊il e CSS3 au fost implementate cu succes în variantele browserelor noi.

2.3 Despre JAVASCRIPT
JavaScript sau JS este limbajul de programare orientat pe obiecte, fiind creat de
Netscape. Cu ajutorul acestuia se pot realiza pagini web interactive ܈i poate fi folosit pentru
introducerea func܊ionalită܊i lor. Acest limbaj este cunoscut pentru utilizarea sa în crearea
paginilor web, dar este utilizat ܈i pentru acesul la diferite obiecte încorporate (embedded objects)
în diferit e aplica܊ii .
JavaScript este un limbaj de programare de tip scripting, folosit pe parte de client, care
este acceptat browser. Utilizând limbajul JavaScript se poate ob܊ine : realizarea de meniuri de tip
drop-down, realizarea controalelor de navigare, animarea imaginilor și a textului, validarea de
formulare, efectuarea procesărilor de bază asupra textelor sau numerice și multe altele.
Aceste scripturi pot fi introduse cu succes în codul HTML sau pot fi salvate în fișiere
externe, iar apoi va trebui realizarea legăturii în interiorul codului HTML.
Browserele păstrează în memorie o reprezentare a paginii web, precum forma unui arbore
de obiecte ܈i pot fi puse la dispozi܊ ie aceste obiecte script-urilor, acestea putând fi citi e ܈i
manipulate. Acest a rbore de obiecte poartă numele de DOM sau Document Object Model. Există
standardul W3C pentru Document Object Model, pe care îl pune la dispozi܊ie un browser,
oferind scrierea script-uri lor portabile, func܊ionând pe toate browserele existente.
JavaScript poate recunoa܈te ܈i raspunde la evenimentele utilizatorului cum ar fi
efectuarea unui click cu mouse-ul, introducerea datelor întru- un fromular de navigare in pagină.
De exemplu, se pot scrie func܊ii care să verifice dacă datele introduse într -un formular sunt
valide.
Instruc܊iunile JavaScript se află în documentul HTML, fie în antet, fie în corpul acestuia,
în interiorul marcajului <SCRIPT> … </SCRIPT> .

23

<HTML>
<body>
<SCRIPT language= ”JavaScript ”>
///cod JavaScript
</SCRIPT>
</body>
</HTML>

2.4 Despre PHP
PHP este abrevierea de la Hypertext Preprocessor. PHP este un limbaj de programare de
tip scripting cu cod- sursă open source sau deschis , folosit pentru crearea site-urilor web dinamice
܈i interactive. Din punct de vedere tehnic PHP este un limbaj de tip ”script ”, ”cross platform ”,
”HTML embedded ” ܈i ”server side ”.
Cross-platform – poate rula pe diferite sisteme de operare, în majoritatea cazurilor
nefiind nevoie de modificări.
HTML embedded – reprezintă o amestecătură de instruc܊iuni PHP ܈i cod HTML.
Server slide – aplica܊iile scrise în PHP se vor executa pe un server (spre exemplu, un
server precum Apache, IIS, etc…).
Scrierea aplicații lor PHP

24

Aplica܊iile PHP sunt o amestecătueră de trei elemente: cod HTML, text ܈i script. Pentru
ca aplica܊iile ce con܊in cod PHP să poată fi executate de server este necesar ca acestea să aibă
extensia .php.
Exemplu:
 Se salvează fisierul în directorul rădăcină al paginilor web (localhost), sub numele de
program.php
 Se va deschide http://localhost/program.php
Cum este interpretat codul PHP?
Fi܈ierul program.php este transmis modului de php încărcat în server . Modul proces ează
doar ce se află între tagurile <?php ܈i ?> ܈i împreună cu restul codului HTML este transmis către
serverul . Serverul de web trimite mai departe către client (browser) pentru interpretare.
Precum și alte limbaje de programare de tip scripting, limbajul PHP furnizează conținut
dinamic, adică acesta se schimb ă automat . Acesta este un element necesar î n susținerea traficului
unui w ebsite. S iteurile Web frecvent actualizate pot atrage mult trafic constant. Interpretorul
PHP ac܊ ionea ză ca o componentă adi܊ională , o extensie a s erverului web care este semnalată ori
cate ori o pagina PHP e ste accesata. Aceasta componentă procesează codul -sursă din pagină ܈ i
apoi transmite rezultatul înapoi la web-server, ajungând în final în browserele utilizatorilor.
Acest proces este prezentat in imaginea de mai jos.

25

Din imaginea de mai sus, se observă că atunci câ nd nu exist ă un interpretor PHP, paginile
sunt transmise direct către utilizatori a܈ a cum sunt salvate pe disc, fara modifică ri. Pentru a
actualiza continutul ac estora, este nevoie de interven܊ie directă asupra lor ܈i salvarea
modifică rilor pe server. Aceste pagini sunt numite "pagini statice" .
PHP poate genera con܊inut HTML pe baza unor fi܈ iere existente sau pornind de la zero,
poate să afi܈eze o imagine sau orice alt con܊inut accesibil prin web, sau să redirec܊ ioneze
utilizatorul c ătre alte pagini. Î n cadrul acestui proces, PHP poate consulta baze de date, fi܈ iere
externe sau alte resurse, poate trimite email-uri sau executa comenzi ale sistemului de operare.
Întrucât procesarea se realizează la nivelul serverului web, înainte ca paginile web să ajungă î n
browser, PHP este considerat un limbaj de programare server-side .
Folosind o secven܊ă de cod PHP am putea prelua lista de membri dintr-o baza de date,
eliminând problema actualizării – nu va mai fi nevoie să se modifice pagina odata cu fiecare
membru nou, scriptul PHP va afi܈a în mod automat noile persoane adăugate î n baza de date. Este
rezolvată ܈ i problema linkurilor personalizate, sau a designului – toate elementele specifice unei
persoane pot fi generate în mod automat.

26

Spre deosebire de alte limbaje de scripting, PHP rulează pe s erver, nu în web browser .
Datorită acestui lucru , PHP poate avea accesul la fișiere, baze de date și alte resurse . Toate
acestea rezultă surse de conținut activ, c e va atrage vizitatori vechi si noi.

2.5 Despre MySQL
SQL – Structured Query Language sau Limbaj Structurat de Interogare este un limbaj de
programare destinat lucrului cu bazele de date , apărut în anul 1970 , devenind un standard, fiind
܈i limbajul de programare utilizat pentru creearea, manipularea, modificarea ܈i regăsirea datelor
de către (SGBD) Sistemele de Gestiune a Bazelor de Date relaționale.

Caracteristici :
 SQL sau Structured Query Language cuprinde atât elemente de definire a datelor , cât și
component a folosită la manipularea datelor ;
 Interogarea datelor ;
 Limbaj neprocedural : instrucțiuni sau comenzi, fiecare fiind transmise către SGBD, care
se interpreteaz ă, iar apoi returnează un rezultat.
Prezentarea standardului SQL3
Standardul SQL3 reprezintă modelul obiect- relațional de baze de date.
Limbajul este compus din comenzi sau instrucțiuni . Comanda din SQL este o s ecvență de
elemente componente. Acestea pot fi: cuvinte cheie, caractere speciale, identificatori și
constante.
Caracteristicile MySQL
Caracteristicile de bază ale limbajului MySQL sunt:
– Dispune de API pentru C, C++, Java, PHP, Pyton, Eiffel, Perl , Ruby și Tcl
– Funcționează pe diferite platforme .
– Un sistem de alocare a memoriei foarte rapid și bazat pe thread -uri.
– Complet multi-threaded folosind thread-uri de kernel. Acest lucru înseamnă că poate lucra cu
ușuință pe mai multe procesoare dacă sunt disponibile .

27

– Funcțiile SQL sunt implementate folosind o bibliotecă de clase optimizată și sunt foarte
rapide. De obicei, nu are loc alocare a memoriei după inițializarea interogărilor.
– Folosește tabele temporare stocate în memorie .
– Oferă motoare tranzacționale și non -tranzacționale de stocare a datelor .
– Serverul este disponibil ca program separat ce poate fi folosit într- un mediu de rețea de tip
client/server. De asemenea, est e disponibil și ca bibliotecă ce poate fi inclusă în aplicații
statice.

2.6 Despre Optimizare SEO
Majoritatea căutătorilor pe internet nu trec de primele două pagini pe Google ܈i nu dau
click pe linkurile sponsorizate, a܈a că faptul de a fi în topul rezultatelor de căutare vă poate
transforma literalmente afacerea. A avea site- ul in topul primelor zece rezultate de căutare es te
echivalent cu a avea un magazin la intrarea în cel mai mare mall din istorie, in timp ce a vă situa
în afara topului primelor 20 de rezultate înseamnă că ve܊i trăi frustrarea pe care v -o poate
provoca un magazin gol, cu pu܊ini clien܊i ܈i cu cifre de vânzare scăzute.
SEO (Search Engine Optimization) este definit ca fiind un mijloc d e perfec܊ionare a
vizibilită܊ii website-urilor, în cadrul organiz ării rezultat elor afi܈ate, în urma căutării , din lista
realiz ată de motorul de căutare. Op timizarea pentru motoarele de că utare sau SEO face parte
dintr-o subcategorie a marketingului online SEM, care se defineste prin ansamblul de tehnici prin
care un site web este ridicat mai sus în lista de rezultate, ce este redată de către un motor de
căutare. Astfel, traf icul website-ului se măreste atât calitativ, cât ܈ i cantitativ. Tot acest proces
necesită o echipă de promovare , care să crească pozi܊ia î n lista de rezultate a unui site web,
pentru diferite cuvinte sau expresii uzuale ܈i relevante afacerilor în curs.

Istoria SEO

Încă de la mijlocul ani lor 1990, webmasterii au început optimizarea site-urilor privind
motoarele de căutare. La început, orice webmaster doar adauga pagina web la diverse motoare de

28

căutare, acestea urmând să trimit ă un „ spider ” pentru analizarea website-ului, mai exact se
extră geau legăturile către alte pagini, returnâ nd datele de pe pagină pentru indexarea acestora.
Acest proces este, de fapt, copierea ܈i stocarea paginii de către „ paianjeni ” pe propriile servere,
unde un alt program, denumit „indexer ”, extrage date diverse despre pagina web, cum ar fi
cuvintele din pagină ܈i asezarea acestora , precum ܈i legăturile către alte pagini.
Înainte de a fi introdus Google SSL, care are capacitatea de a cripta cuvintele căutate,
webmasterii aveau acces la cuvintele-cheie prin intermediul unui program de statistici web. Insa
accesul la date a fost oprit de catre Google, iar webmasterii sunt nevoiti sa isi aloce timp pentru
studierea cuvintelor-cheie. Administratorii de site-uri încep să constientize ze valoarea clasificării
super ioare ܈i a vizibilită܊ii, favorizand noi oportunitati pentru practican܊ii SEO "white hat"
(pălărie albă) ܈i "black hat" (pălărie neagră).

La ce ajută SEO

Optimizarea corectă a website- urilor realizează o prezen܊ă mai favorab ilă în motoarele de
căutare , privind căutări le realizate de către utilizatorii interesati de informa܊ii, servicii sau
produse promovate prin intermediul website- ului, ceea ce determină un numă r mai mare
vizitatori ܈i, implicit, vânzări mai mari.
Cum se face SEO?
Sunt două direc܊ii care trebuie tratate în paralel pentru o bună indexare a site -ului în
motoarele de căutare: On -Page ܈i Off -Page.
On-Page SEO
SEO On-Page înseamnă toate tehnicile pe care le pute܊i utiliza pe site -ul dumneavoastră, spre
deosebire de SEO off- page, care desemnează tehnicile prin care -i pute܊i determina pe al܊i
proprietari de site- uri să le utilizeze, astfel încât să ajute la o clasificare bună a site -ului dvs.
Tehnicile acestea se aplică la întregul con܊inut al serverelor dvs. web, incluzând paginile ܈i alte
active (documente WORD, fi܈iere PDF, video etc.).

29

Elementele on-page includ titlurile paginilor, meta-datele paginilor, anteturile, corpul de text,
linkurile interne, linkurile off- page ܈i tagurile alt pentru imagini, ca ܈i mult e alte active.
Off-Page SEO
In ceea ce prive܈te SEO Off -Page constituie inima ܈i sufletul unei compani de optimizare de
succes ܈i con܊ine toate instrumentele ܈i tehnicile de care ave܊i nevoie pentru a determina al܊i
proprietari de site- uri să vă clasifice site- ul. Laolaltă, toate acestea oferă o cantitate mare de
linkuri de calitate excelentă spre site -ul dvs. din partea unor surse importante, serioase ܈i
relevante.
Cu Ce Obiective Începem Optimizarea SEO
Primul pas în planificarea ܈i pregătirea SEO se referă la găsirea expresiilor -cheie, urmată
de amplasarea acestora în site. Când un utilizator vizitează un motor de căutare, el scrie cuvinte
în caseta de căutare pentru a găsi ceea ce -l interesează. Termenii de căutare pe care -i scrie sunt
numi܊i cuvinte-cheie ܈i combina܊iile de cuvinte-cheie sunt expresii-cheie. În mod ideal, ar trebui
să efectua܊i cercetarea cuvintelor -cheie cu mult înainte de a alege un nume de domeniu, de a vă
structura site- ul ܈i a vă construi con܊ inutul.
 Atractivitatea cuvintelor- cheie se referă la echilibrarea dintre cererea pentru
cuvintele-cheie pe care le- a܊i ales ܈i numărul de site -uri concurente ce oferă rezultate
relevante. Expresiile-cheie atractive sunt cele relativ sub-exploatate – ele sunt
expresiile viabile.
 Competitivitatea cuvintelor- cheie este extrasă din numărul de rezultate întoarse de o
căutare Google pe termenii de căutare respectivi.
 Indexul de eficien܊ă a cuvintelor -cheie este o modalitate de combinare a popularită܊ii
cuvântului- cheie cu competitivitatea primară a cuvântului-cheie, pentru a oferi un
punctaj compus. Acesta este folosit în mod frecvent pentru clasificarea eficien܊ei
diverselor combina܊ii de cuvinte -cheie.
 Motoarele de căutare încearcă să determine care sunt cuvintele cele mai importante de
pe o pagin ă, dintr -un tag sau dintr- un link. În absen܊a oricăror indica܊ii din codul
HTML, primul ܈i cel mai important parametru utilizat este al proeminen܊ei (altfel

30

spus, cu cât un cuvânt se află mai aproape de începutul zonei de text analizate, cu atât
este mai r elevant sau mai important). Proeminen܊a presupune că un cuvânt utilizat la
începutul unui link sau al unei bucă܊i de text este mai important decât restul
cuvintelor.
 Următorul factor utilizat de motoarele de căutare pentru a determina importan܊a (sau
relevan܊a) cuvintelor -cheie este proximitatrea. Aceasta se referă la cât de apropiate
sunt intre ele cuvintele- cheie ce vă alcătuiesc expresia -cheie.
 Factorul final în plasarea cuvintelor- cheie utilizat de motoarele de căutare pentru a
determina importan܊a cu vintelor- cheie este densitatea. Aceasta poate fi definită ca
frecven܊a relativă cu care un cuvânt sau o expresie -cheie este găsit sau găsită în zona
de text a paginii care este examinată (indiferent dacă este titlu, antet, text ancora link
sau text pagină) .
Unelte care pot fi folosite, cu rată mare de succes :
1. Google Suggest – una din uneltele foarte bune pentru descoperirea de cuvinte-
cheie relevante ni܈ei. Se porne܈te de la cuvintele -cheie considerate relevante,
iar prin folosirea aceastei unelte se va ob܊ine o lista mai mare de cuvinte –
cheie.
2. Google Keyword Planner – aceasta fiind următoarea uneltă foarte utilă,
deoarece cu ajutorul acesteia se realizează liste mai mari de cuvinte -cheie ܈i
descoperirea volumelor de căutare ale cuvintelor -cheie pe ܊ări, global sau
diverse limbi.
3. Google Analytics – func܊ionalitatea sa include urmărirea vizitatorilor (noi ܈i
repeta܊i), sursele de trafic (motorul de căutare ܈i referen܊i site -ului), adresele
vizitatorilor, comportamentul vizitatorilor, tendin܊ele vizitatorilor ܈i multe
altele.
4. Google Webmaster Tool – această uneltă permite accesul la diverse cuvinte –
cheie/interoga܊ii
A܈a cum a܊i observat, optimizarea pentru motoare de căutare este o activitate complexă.
Nimic din ceea ce face܊i nu va fi inutil, de aceea ext indeti- vă efortul la un domeniu larg de tactici
SEO etice, valide. Nu deveni܊i obseda܊i de o singura metodă ܈i face܊i întotdeuna totul cu

31

modera܊ie. Mai presus de orice, SEO este doar un aspect al marketingului, care la rândul său este
doar un aspect al de rulării unei afaceri bune. Optimizarea pentru motoare de căutare este un
mijloc pentru atingerea unui scop, nu un scop in sine!

32

3. Descrierea aplicație i
3.1 HTML
 Index.html

Aceasta este pagina de în ceput a aplica܊iei web. Este folosit limbajul HTML ܈i
anumite elemente SEO(Search Engine Optimization) pentru a spori traficul. Elementele
SEO se vor găsi in sec܊iunea <head>…</head> ܈i sunt incluse in majoritatea paginilor
web.

<!DOCTYPE html>
<html>
<head>//elemente SEO
<title>VideoUHD – Filmari aeriene cu drone profesionale 4K</title>
<meta name="description" content="Filmari aeriene cu drone profesionale 4K">
<meta property="article:publisher" content="https://www.facebook.com/videouhd" />
<meta name="google-site-verification" content="google707a00c539c0c35f" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

33

<div class="mobile-bg"><img src="img/bg.jpg"/></div>//backgreound static pentru
mobile

<nav> //meniul aplica܊iei de tip mobile

34

<div class="drop">MENIU <span>></span></div>
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="servicii.html">SERVICII</a></li>
<li><a href="despre.html">DESPRE NOI</a></li>
<li><a href="galerie.html">GALERIE</a></li>
<li><a href="contact.php">CONTACT</a></li>
</ul>
</nav>

<div class="home">FILMARI AERIENE CU DRONE PROFESIONALE 4K
</div>

<footer class="home-footer">
© VideoUHD 2017
</footer>

</body>
</html>

 Servicii.html

Această pagină prezintă serviciile oferite. Acestea sunt modelate prin intermediul
limbajului CSS, cu ac܊iune asupra cursorului (apari܊ia textului când cursorul se află în
zona de ac܊iune) .

35

<!DOCTYPE html>
<html>
<head>
<title>VideoUHD – SERVICII Filmari aeriene</title>
<meta name="description" content="SERVICII Filmari aeriene">// elemente SEO
///…..anumite elemente SEO care se repeta nu au mai fost scrise, acestea fiind eviden܊iate
cu culoarea ro܈ie din pagina index.html

36

<video autoplay loop id="bgvid" >//background video
</video>
<div class="mobile-bg"><img src="img/bg.jpg"/>//background video pentru mobi le
</div>
<div class="drona">
<img src="img/drona.png"></div>
<nav> <div class="drop">MENIU <span>></span></div>//meniu mobile

<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="servicii.html">SERVICII</a></li>
<li><a href="despre.html">DESPRE NOI</a></li>
<li><a href="galerie.html">GALERIE</a></li>
<li><a href="contact.php">CONTACT</a></li>
</ul>
</nav>

<div class="container">
<p><h1><center>SERVICII</center></h1></p>

<div class="cutie"> <img src="img/events.jpg" width=400 height=300>
<div class="overcutie ">
<div class="title overtext" > EVENIMENTE </div>
<div class="tagline overtext"> La evenimente private cum sunt nuntiile, botezurile,
aniversarile, sau concursuri sportive, team buildinguri ai alte evenimente corporate, in aer
liber, pot fi luate cadre speciale printr-o filmare sau fotografiere aeriana. </div>
</div>

37

</div>
<div class="cutie"> <img src="img/pub.jpg" width=400 height=300>
<div class="overcutie ">
<div class="title overtext"> MARKETING SI PUBLICITATE </div>
<div class="tagline overtext"> Este estential un continut video de calitate pentru orice
strategie de succes, acesta ajutand la cresterea considerabila a numarului de clienti.
</div>
</div>
</div>
<div class="cutie"> <img src="img/peisaj.jpg" width=400 height=300>

<div class="overcutie ">
<div class="title overtext"> PEISAGISTICA </div>
<div class="tagline overtext"> Realizam prezentari ale operatorilor din turism,
agrement si alimentatie publica pentru a scoate in evidenta atat potentialul turistic al
zonei cat si facilitatiile pe care le ofera. </div>
</div>
</div>
<div class="cutie"> <img src="img/turism.jpg" width=400 height=300>
<div class="overcutie ">
<div class="title overtext"> LOCATII TURISTICE </div>
<div class="tagline overtext"> In functie de cerinte va putem oferi servicii care sa
cuprinda filmari si fotografieri ale imprejurarilor, cu diverse atractii turistice din zona sau
panorame, astfel incat sa beneficiati de posibilitatea cresterii numarului de clienti </div>
</div>
</div>
<div class="cutie"> <img src="img/imobiliare.jpg" width=400 height=300>
<div class="overcutie ">
<div class="title overtext"> IMOBILIARE </div>
<div class="tagline overtext"> Agentiile imobiliare pot beneficia de servicii de
fotografiere si filmare aeriana, astfel incat potentialii clienti sa aibe o vedere asupra
imobilului, dar si a imprejurarilor. </div>
</div>

38

</div>
<div class="cutie"> <img src="img/proprietate.jpg" width=400 height=300>
<div class="overcutie ">
<div class="title overtext"> PROPRIETATI PRIVATE </div>
<div class="tagline overtext"> Fie ca detineti o pensiune, un hotel, o afacere mica sau
una foarte mare, nu vor fi complete fara o filmare aeriana fie ca doriti sa vindeti
proprietatea sau sa promovati afacerea. </div>
</div>
</div>
<div class="cutie"> <img src="img/primarie.jpg" width=400 height=300>
<div class="overcutie ">
<div class="title overtext"> INSTITUTII PUBLICE SI PRIMARII </div>
<div class="tagline overtext"> </div>
</div>
</div>
<div class="cutie"> <img src="img/sedinta-foto.jpg" width=400 height=300>
<div class="overcutie ">
<div class="title overtext"> SEDINTE FOTO/VIDEO </div>
<div class="tagline overtext"> </div>
</div>
</div>
<footer>
© VideoUHD 2017
</footer>
</div>
</body>
</html>

39

3.2 PHP
 Contact.php

Această pagină este destinată exclusiv pentru contact. Vizitatorul poate afla
informa܊ii suplimentare completând corect câmpurile prezente. Acestea dacă nu sunt
corect completate, se va genera un mesaj de eroare. După completarea corectă a
câmpurilor (input- uri), la apăsarea butonului TRIMITE, se va genera un e- mail către
office@videouhd.ro cu informa܊ia din câmpuri .

40

<!–
<?php
if (isset($_POST['E-MAIL'])) {

//Email information: admin_email este e-mail- ul unde se va trimite informa܊ia

$admin_email = "office@videouhd.ro";
$today = date("m.d.y");
$email = $_POST['E-MAIL'];
$phone = $_POST['TELEFON'];
$er=0;
$justNums=0;
$justNums = preg_replace("/[^0-9+]/", '', $phone);
if(strlen($justNums)!=strlen($phone) || strlen($phone) <9){
$er=1;
}

if($er==0){
if (strlen($justNums) > 9) $isPhoneNum = true;
$subject = "Video UHD: E-mail de la ".$_POST['NUME'];
$comment =
"Nume:".$_POST['NUME']."\nTelefon:".$_POST['TELEFON']."\nMesaj:".$_POST['ME
SAJ'] ;

41

$headers = 'From: '.$email . "\r\n" .
'Reply-To: '.$email . "\r\n";
try
{
mail($admin_email, $subject, $comment, $headers);
echo("<script>alert('Mesajul dumneavoastra a fost trimis. Va multumim pentru
interesul acordat..');</script>");
} catch (Exception $e) {
echo("<script>alert('There has been a problem with processing your
request.'.$e);</script>");
}

include "connect.php"; // se include legatura la baza de date, de unde se extrage informa܊ia
if($_POST['NUME']){
try{
$records=$databaseConnection->prepare("INSERT INTO contact
(nume,email,telefon,mesaj,date) VALUES (:nume,:email,:telefon,:mesaj,:date)");
$records->execute(array(
':nume'=> $_POST['NUME'],
':date'=> $today,
':email'=> $_POST['E-MAIL'],
':telefon'=> $_POST['TELEFON'],
':mesaj'=> $_POST['MESAJ']
));
} catch(PDOException $e) {
echo 'ERROR: ' . $e->getMessage();
}
}
}else if($er==1){
echo("<script>alert('Va rugam folositi un numar de telefon
corect".$justNums."');</script>");
}
}

42

?>
–>

<!DOCTYPE html>
<html>
<head>
<title>VideoUHD – CONTACT – Filmari aeriene cu drone profesionale 4K</title>
<meta name="description" content="CONTACT Filmari aeriene cu drone profesionale
4K">

///…..anumite elemente SEO care se repeta nu au mai fost scris e, acestea fiind eviden܊iate
cu culoarea ro܈ie din pagina index.html

</head>
<body>

43

<nav> <div class="drop">MENIU <span>></span></div>

<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="servicii.html">SERVICII</a></li>
<li><a href="despre.html">DESPRE NOI</a></li>
<li><a href="galerie.html">GALERIE</a></li>
<li><a href="contact.php">CONTACT</a></li>
</ul>
</nav>

<div class="container" style="padding:30px">
<p><h1>CONTACT</h1></p>
 
<img src="img/phone.png" width=30px height=30px><b><font size="4"
face="Andalus"><a href="tel:0766670519" style="text-
decoration:none;color:black">0766670519</a><br class="show-mob">
 
<img src="img/mail.png" width=30px height=30px><a
href="mailto:office@videouhd.ro" style="text-
decoration:none;color:black">office@videoUHD.ro</a><br class="show-mob">
 
<a href=http://www.facebook.com/videouhd style="text-
decoration:none;color:black"><img src="img/facebook.png" width=30px
height=30px>VideoUHD</a></font></b><br class="show-mob">
 

<p><h1>Cere oferta</h1></p>
<form method="post">
<div class="from-input">
<input type="text" name="NUME" placeholder="NUME">
</div>
<div class="form-input">

44

</body>
</html>

 Connect.php
Legatura dintre server si baza de date

<?
define('_HOST_NAME_', '188.214.21.200');// server
define('_USER_NAME_', 'videouhd_user');// nume user
define('_DB_PASSWORD_', '1234cinci');// parola bazei de date
define('_DATABASE_NAME_', 'videouhd_db');//numele bazei de date

45

//PDO Database Connection
try {
$databaseConnection = new
PDO('mysql:host='._HOST_NAME_.';dbname='._DATABASE_NAME_, _USER_NAME_,
_DB_PASSWORD_);
$databaseConnection->setAttribute(PDO::ATTR_ERRMODE,
PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
echo 'ERROR: ' . $e->getMessage();
}
?>

3.3 Baza de date – MySQL

Structura bazei de date : Avem tabelul contact , numele bazei de date videouhd_db ܈i
serverul 188.214.21.200:3306. În tabelul contact se află cele 6 entita܊i :
 id (cheie primara, unde se vor incrementa toate înregistrările)
 date (se va înregistra data înregistrării)
 nume (se va înregistra numele înregistrării)
 email (se va înregistra email- ul înregistrării)
 telefon (se va înregistra telefonul înregistrării)
 mesaj (se va înregistra mesajul înregistrării)

46

47

Exemplu înregistrare în baza de date

Codul SQL

48

Privilegiile bazei de date

3.4 CSS
 Style.css

nav {
width:100%;
height:50px;
top:10px;

49

position: fixed;
background: transparent;

}
nav .drop{
display: none;
}
nav ul {
line-height:1.7;
margin-right:5%;
}
nav li {
display:block;
float:left;
list-style:none;
margin-right: 30px;
}
nav li a {
font-family:Tahoma;
font-size:28px;
font-weight:600;

color:black;
text-decoration:none;
opacity: 0.4;
transition: all 0.4s;
}
nav li a:hover {
opacity: 1;
transition: all 0.4s;
}

.container {

50

padding: 30px;
width: 850px;
margin: 0 auto;
background: rgba(52,73,94,0.4);
font-family: Sans-serif;
margin-top: 150px;
margin-left: 10px;
position: absolute;
}

.container h1:first- of-type{
text-align:center;
}

.container input{
height:45px;
width:500px;
font-size:18px;
margin-bottom:10px;
margin-top:10px;
margin-left:10px;
text-align:center;
position:relative;

}

.drona {
float: right;
position:relative;
}
.drona img{
width:250px;
height:131px;

51

}

footer{
text-align: center;
font-weight: bold;
color: white;
font-family: sans-serif;
font-size: 14px;
text-shadow: 0px 0px 10px black, 0px 0px 10px black;
}
.home{
background:transparent;
margin-top: 150px;
margin-left: 100px;
min-height:500px;
font-family: "Andalus";
font-size:3em;
text-align: center;
}

.cutie {
cursor: pointer;
height: 300px;
margin-bottom:10px;
margin-right:15px;
margin-left:10px;
position: relative;
overflow: hidden;
width: 400px;
float:left;
}

@(min-width:768px){

52

.cutie{
background-size:cover!important;
background-position:center!important;
}
}
.cutie img {
position: absolute;
left: 0;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}

.cutie .overcutie {
background-color: #304562;
position: absolute;
top: 0;
left: 0;

color: #fff;
z-index: 100;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
width: 360px;
height: 240px;
padding: 20px 20px;
padding-bottom: 100px;

53

}
.mobile-bg{
display:none;
}
.cutie:hover .overcutie { opacity: 1; }

.cutie .overtext {
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
transform: translateY(40px);
-webkit-transform: translateY(40px);

}

.cutie .title {
font-size: 2.5em;
text-transform: uppercase;

opacity: 0;
transition-delay: 0.1s;
transition-duration: 0.2s;
}

.cutie:hover .title,
.cutie:focus .title {
opacity: 1;

transform: translateY(0px);
-webkit-transform: translateY(0px);
}

54

.cutie .tagline {

font-size: 1.0em;
opacity: 0;
transition-delay: 0.2s;
transition-duration: 0.2s;
}

.cutie:hover .tagline,
.cutie:focus .tagline {

opacity: 1;
transform: translateX(0px);
-webkit-transform: translateX(0px);
}
.show-mob{
display: none;
}
@media(max-device-width:1024px){
body{
/* background:url("../img/bg.jpg");*/
background-size: cover;
-webkit-background-size: cover;
background-position: center;
background-attachment: fixed;
margin:0;
padding:0;
}
{
margin:0;
padding:0;
cutie-sizing: border-cutie;

55

}
.drona{
position:absolute;
right:30px;
top:40px;
z-index: -1;
}
.drona img{
width: 140px;
height: 73px;
}
video#bgvid,

.container {
background: none;
padding: 10px 20px;
margin: 0;
width: 100%;
cutie-sizing: border-cutie;
position: relative;
text-shadow: 0px 0px 10px white;
}
nav{
position:static;
height:70px;
background: rgba(119, 190, 254, 0.85);
transition:0.4s ease a ll;
margin-bottom: 100px;
}
nav>ul>li{
float:none;
margin: 0;
text-align: center;

56

}

nav>ul>li>a{
display: block;
}
nav>ul>li:hover{
background: rgba(119, 190, 254, 1);
}
nav .drop{
font-size: 30px;
font-family: sans-serif;
font-weight: bold;
text-align: center;
line-height: 70px;
display: block;
}
nav .drop span{
transition:0.4s ease all;
display: inline-block;
width:40px;
}
nav ul{
background: rgba(119, 190, 254, 0.85);
opacity:0;
transition: 0.4s ease all;
margin:auto;
}
nav.active{
height:auto;
}
nav.active ul{
opacity:1;

57

}
nav.active .drop span{
transform:rotate(90deg);
}
.home{
margin:0;
font-size: 2em;
margin-top:50px;
margin-bottom:50px;
padding:20px;
min-height: 300px;
}

.cutie{
margin:10px 2%;
width:45%;
min-height:175px;
cutie-shadow: 0px 0px 20px rgba(0,0,0,0.5);
background-size:cover!important;
-webkit-background-size: cover!important;
background-position: center!important;
}
.cutie img{
width:100%;
}
.cutie .overcutie{
position:absolute;
height: auto;
width:100%;
bottom:0;
}

.cutie .overcutie div{

58

width: auto;
}
.cutie .overcutie .title{
font-size:2em;
}
.container input{
width: calc(100% + 20px);
margin: 5px -10px;

}
.container p{
font-size:16px;
}
.show-mob{
display: block;
}
.mobile-bg{
position: fixed;
z-index: -1;
bottom: 0;
top: 0;
left: 0;
right: 0;
display:block;
}
.mobile-bg img
{ width: 100%;
height:100%;
position: absolute;
z-index: -1;
bottom: 0;
top: 0;
left: 0;

59

right: 0;
}
}
@media(max-device-width: 768px){
.container .cutie{
margin:10px 0;
width:100%;
min-height:250px;
}
nav {
height: 30px;
}
nav .drop{
line-height:30px;
}
}

 Bg.css

video#bgvid {
position: fixed;
top: 50%;
left: 50%;
min-width:100%;
min-height:100%;
width: auto;
height:auto;
z-index: -1;
– ms-transform:translateX(-50%) translateY(-50%);
-moz-transform:translateX(-50%) translateY(-50%);
-webkit-transform:translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}

60

3.5 JAVASCRIPT
 Script.js

$(document).ready(function () {
var bgv = '<source src="img/video.webm" type="video/webm" controls="">';
console.log($(window).width());
if ($(window).width() > 768) {
$("#bgvid").html(bgv);
}
$(".").each(function () {
img = $(this).find("img");
$(this).css({
"background": "url(" + img.attr("src") + ")",
"background-position":"center",
"background-size:":"cover"
});
img.remove();
});
$("nav .drop").click(function(){
$("nav").toggleClass("active");
}) })

61

4. Concluzii

Importanța Internetului în prezent este foarte bine cunoscută , iar exploatarea tuturor
oportunitaților oferite de acesta trebuie să fie o prioritate pentru o firmă modern ă, mai ales dacă
concurența are deja prezență online. Un website rămâne permanent activ, 24 din 24 de ore, în
atenția vizitatorilor din orice zonă a lumii. Conținutul unui web site poate fi oricând actualizat sau
modificat după bunul plac.
La baza aplicației stă l imbajele de programare HTML ܈i CSS, deoarece prin intermediul
acestora au fost create paginile web si designul acestora.
Limbajul de programare PHP, fiind un limbaj de programare foarte puternic și foarte des
utiliza t, a fost al es pentru implementarea aplicației, deoarece în acest fel am oferit poten܊ialilor
clien܊ilor posibilitatea de a cere o ofertă prin completarea ܈i trimiterea formularului căt re adresa
oficială . În zilele noastre, cele mai multe aplicații distribuite sunt scrise în PHP, care este o
soluție convenabilă pentru proiectare a unei aplicații web de promovare a unor servicii. Consider
că PHP ocupă un loc foarte important în această lu me a tehnologiilor web și are un rol deosebit
în dezvoltarea noilor tehnologii.
JavaScript este limbajul de programare orientat pe obiect, cu ajutorul acestuia au fost
realiz ate pagini web interactive ܈i folosit pentru introducerea unor func܊ionalită܊i cum ar fi
meniul drop- down sau afi܈area website -ului în modul ”mobile ”, adică acesta a fost adaptat pentru
a putea fi citit cu u܈uri܊ă de către dispozitivele mobile, precum smartphone sau tabletă.
MySQL este limbajul de programare folosit pentru a lucra cu bazele de date ܈i a stoca pe
server datele clien܊ilor interesa܊i de serviciile oferite, pentru o mai bună comunicare cu ace܈tia.
Optimizarea corectă a website-urilor realiz ează o prezen܊ă mai favorabilă în motoarele de
căutare , privind căutări le realizate de către utilizatorii interesati de informa܊iile sau serviciile
promovate prin intermediul website-ului , ceea ce determină un numă r mai mare vizitatori ܈i,
implicit, vânzăr i mai mari, de aceea au fost folosite elemente de optimizare SEO.
Lumea se află într -o continuă schimbare, chiar de la o zi la alta, tehnologiile avans ează,
și apar noi aplicații software, care ne vor conduce în tr-o lume interconectată digitală ܈i u܈or
accesibilă .

62

Aplicația este doar o mică parte din această lume a tehnologiilor web, dar o parte
semni ficativă, deoarece utilizarea aceste ia simplific ă munca multor oameni cu vârste diferite.

63

5. Bibliografie

1. Tudor Sorin și Vlad Huțanu, Crearea și programarea paginilor WEB , București, L&S
Infomat, 2004;
2. Petre Ion, Web Design ; Editura Sitech, Craiova, 2013;
3. David Viney, CUM SA AJUNGI ÎN TOP PE GOOGLE, Bucure܈ti , Meteor Press, 2009;
4. Bogdan Pătruț, Internet pentru începători , București, Teora, 1998;
5. Traian Anghel, Programarea în PHP. Ghid practic , Iași, Polirom, 2005;

https://ro.wikipedia.org/wiki/HyperText_Markup_Language
https://ro.wikipedia.org/wiki/JavaScript
https://ro.wikipedia.org/wiki/PHP
http://docslide.net/documents/html-document.html
https://ro.wikipedia.org/wiki/Cascading_Style_Sheets
https://ro.wikipedia.org/wiki/Optimizare_pentru_motoare_de_c%C4%83utare

Copyright Notice

© Licențiada.org respectă drepturile de proprietate intelectuală și așteaptă ca toți utilizatorii să facă același lucru. Dacă consideri că un conținut de pe site încalcă drepturile tale de autor, te rugăm să trimiți o notificare DMCA.

Acest articol: APLICAIE WEB PENTRU PROMOVAREA SERVICIILOR FOLOSIND [606621] (ID: 606621)

Dacă considerați că acest conținut vă încalcă drepturile de autor, vă rugăm să depuneți o cerere pe pagina noastră Copyright Takedown.

APLICAIE WEB PENTRU PROMOVAREA SERVICIILOR FOLOSIND [606621]

Copyright Notice

ANALELE SOCIET ØÚ II ROMÂNE PENTRU PROMOVAREA ÖTIIN ÚEI , EDUCA ÚIEI ÖI CULTURII – VOL . I NR. 12010 12 [600643]

Departametul de Jurnalism, Relații Publice, Sociologie și Psihologie [306869]

Notiuni generale de termodinamica [308491]

Al3xuk90@yahoo.com 241 Cereri Grade Text

An Assessment Algorithm for Evaluating [627079]

1 Universitatea de Medicină și Farmacie “Gr. T. Popa” Iași Facultatea de BalneoțFizioțKinetoțTerapie BFKT și Recuperare în bolile… [621774]

Copyright Notice

Similar Posts