COLEGIUL NAIONAL

GRIGORE MOISIL BRAOV

PROIECT DE ATESTAT
AUTOTURISME

ELEV: BARABOI CLAUDIA

CLASA: A XII-A B
PROFESOR: COMARNIC LILIANA
ANUL COLAR: 2013 - 2014
0

INTRODUCERE
Autoturisme este un sait web static, destinat utilizatorilor desktop. Acesta are ca scop
prezentarea unor idei de baz i a unor mrci de autoturisme prezente n acest moment pe
pia.
Dezvoltarea sa are la baz urmtoarele limbaje de marcare, dar i de scripting:
HTML, CSS, JavaScript, dar i librria jQuery.
HTML (HyperText Markup Language) este o form de marcare orientat ctre
prezentarea documentelor text pe o singura pagin, utiliznd un software de redare
specializat, numit agent utilizator HTML, cel mai bun exemplu de astfel de software
fiind browserul web. HTML furnizeaz mijloacele prin care coninutul unui document poate
fi adnotat cu diverse tipuri de metadate i indicaii de redare. Indicaiile de redare pot varia de
la decoraiuni minore ale textului, cum ar fi specificarea faptului c un anumit cuvnt trebuie
subliniat sau c o imagine trebuie introdus, pn la scripturi sofisticate, hri de imagini i
formulare. Metadatele pot include informaii despre titlul i autorul documentului, informaii
structurale despre cum este mprit documentul n diferite segmente, paragrafe, liste, titluri
etc. i informaii cruciale care permit ca documentul s poat fi legat de alte documente
pentru a forma astfel hiperlink-uri (sau web-ul).
CSS (Cascading Style Sheets) este un standard pentru formatarea elementelor unui
document HTML. Stilurile se pot ataa elementelor HTML prin intermediul unor fiiere
externe sau n cadrul documentului, prin elementul <style> i/sau atributul style. CSS se
poate utiliza i pentru formatarea elementelor XHTML, XML i SVGL.
De asemenea sunt prezente i cteva elemente de CSS3 n structura saitului web
discutat.
JavaScript
este
un limbaj
de
programare orientat
obiect bazat
pe
conceptul prototipurilor. Este folosit mai ales pentru introducerea unor funcionaliti n
paginile web, codul Javascript din aceste pagini fiind rulat de ctre browser. Limbajul este
binecunoscut pentru folosirea sa n construirea siturilor web, dar este folosit i pentru acesul
la obiecte ncastrate (embedded objects) n alte aplicaii. A fost dezvoltat iniial de ctre
Brendan Eich de la Netscape Communications Corporation sub numele de Mocha, apoi
LiveScript, i denumit n final JavaScript.
n ciuda numelui i a unor similariti n sintax, ntre JavaScript i limbajul Java nu
exist nicio legtur. Ca i Java, JavaScript are o sintax apropiat de cea a limbajului C, dar
are mai multe n comun cu limbajul Self dect cu Java.
jQuery este o platform de dezvoltare JavaScript, conceput pentru a uura i
mbunti procese precum traversarea arborelui DOM n HTML, managementul interbrowser al evenimentelor, animaii i cereri tip AJAX. jQuery a fost gndit s fie ct mai mic
posibil, disponibil n toate versiunile de browsere importante existente, i s respecte filosofia
"Unobtrusive JavaScript". Biblioteca a fost lansat in 2006 de ctre John Resig.

DESCRIEREA PROIECTULUI
Saitul web Autoturisme este un sait web destinat tuturor categoriilor de utilizatori
desktop. Acesta conine concepte i idei vizavi de producia autoturismelor, dar i o istorie a
fabricaie acestora.
n partea dreapt de sus este prezent meniul principal, destinat navigrii prin paginile
web ale saitului (din acest motiv, el se regsete n absolut toate paginile). Acesta marcheaz
de asemenea pagina curent printr-un efect de variaie de culoare (gradient CSS3). La
realizarea meniului s-a folosit o list neordonat, iar elementele listei au ca atribut
display: inline-block;, pentru ca acestea s fie niruite orizontal.
Pe pagina principal (index.html) se regsete un formular de cutare. Acesta este util
celor ce vor s caute o main second-hand dup marc, tip de combustibil i bugetul maxim.
Cutarea se realizeaz cu ajutorul unui sait bine cunoscut n Romnia (autovit.ro) cu ajutorul
unui script JavaScript, trimind valorile cmpurilor formularului ca i parametrii de tip GET.
Tot pe pagina principal, sub formularul de cutare, sunt prezente 4 imagini cu
maini. Acestea au setate implicit opacitatea la 60%, iar dac mouse-ul este dus peste una
dintre ele, respectiva va primi opacitate 100%, urmnd s revin la opacitatea implicit dac
mouse-ul va prsi perimetrul acesteia.
Pe paginile Acas i Istoria mainilor este prezent cte-o imagine n funcie de
pagina selectat, imagine ce are rol de fundal i este fcut n aa fel cu ajutorul CSS-ului,
nct s ocupe integral pe lime (indiferent de rezoluia display-ului utilizatorului).
De asemenea i pe pagina Istoria mainilor sunt afiate 4 imagini cu opacitate
redus, ca i pe prima pagin.
n cazul paginilor Mrci i Piese, datele i imaginile sunt prezentate ntr-un stil
nou, specific saiturilor web de ultim generaie. Efectul de derulare este denumit Parallax
(n lb. romn: paralax; prin paralax se nelege variaia direciei spre un obiect la o
deplasare a observatorului, deplasare pe direcie perpendicular pe direcia spre obiectul
observat). Acest efect este prezent n paginile menionate mai sus cu ajutorul librriei jQuery,
i a unui script de calcule i derulare prezent la finalul acestor 2 pagini.

UTILITATEA PROIECTULUI
Saitul web realizat are ca scop oferirea de informaii i prezentarea mrcilor de
autoturisme i a bazelor acestora. Acesta a fost proiectat s fie vizualizat cu orice browser
web modern (Google Chrome, Mozilla Firefox, Internet Explorer 8+), indiferent de mrimea
i rezoluia display-ului utilizatorului, ncercnd s se adreseze unui public ct mai larg.

Fig. 1: Formularul de cutare prezent pe pagina principal

SCREENSHOTS

Fig. 3: Poz de tip fundal, prezent pe pagina Istoria mainilor

Fig. 2: Efectul de opacitate al imaginilor (a se observa
imaginea 2, cursor-ul aflndu-se n perimetrul acesteia)