Colegiul Naional de Informatic Grigore Moisil Braov

Lucrare pentru obinerea atestatului

profesional
-profil informatica-

Autori: Profesori coordonatori:

Clasa:

Mai 2017

Brasov
 Colegiul Naional de Informatic Grigore Moisil Braov

TITLU

Autori Profesori coordonatori:

Clasa:

Mai 2017

Brasov

2
Cuprins
1.Introducere............................................ 4
2. Motivatia .............................................. 6
3. Descrierea aplicatiei............................. 7
4.Detalii tehnnice de implementare
4.1. Softuri utilizate..............................8
4.2. Secvente de program..................8
5. Cerinte hard si soft..............................13
6. Posibilitati de dezvoltare.....................14
7 Concluzii.................................................
8.Bibliografie...........................................15

3
Introducere:

HTML

HTML 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). HTML este un format text proiectat
pentru a putea fi citit i editat de oameni utiliznd un editor de text simplu. Totui scrierea i
modificarea paginilor n acest fel solicit cunotine solide de HTML i este consumatoare de timp.
Editoarele grafice (de tip WYSIWYG) cum ar fi Macromedia Dreamweaver, Adobe GoLive sau
Microsoft FrontPage permit ca paginile web s fie tratate asemntor cu documetele Word, dar cu
observaia c aceste programe genereaz un cod HTML care este de multe ori de proast calitate.

CSS

CSS este un acronim provenind din Cascading Style Sheets, care inseamna foi de stil in
cascada (cea mai apropiata traducere). In documentele W3C, CSS nu e definit ca un nou limbaj, ci
ca un mecanism care permite formatarea documentului HTML.
CSS-ul nu exclude HTML-ul din pagina web. Nu se poate realiza o pagina web folosind numai
CSS, care a fost proiectat astfel incat sa conlucreze cu HTML-ul. Folosind CSS, se ajunge la:
1. un control mai fin asupra paginii web;

4
2. scaderea dimensiunii in KB a paginii web, atunci cand codul CSS e continut intr-un fisier extern;
3. o mai mare comoditate: modificand fisierul CSS extern, modificati simultan toate paginile web in
care acesta e inclus;
4. efecte mai sofisticate decat cele produse de codul HTML: suprapunerea unei imagini peste alta
imagine, a unui text peste alt text, impresia de relief, efectul hover, afisarea unor fonturi mai mari
decat h1 si multe altele;
Dezavantaj: Pagina continand cod CSS poate arata diferit in navigatoare diferite, deoarece nu toate
browserele interpreteaza codul CSS.
Daca mai adaugi si cod JavaScript, vei obtine efecte si mai sofisticate, chiar de animatie. CSS +
JavaScript = DHTML ( Dynamic HTML ).

5
 Motivatia:

n ziua de astzi toat lumea are un telefon mobil. Dar rspndirea telefoanelor mobile este
direct proporional cu nemulumirile legate de aceste aparate. Muli oameni, dup achiziionarea
unui telefon constat fie c device-ul nu corespunde cerinelor acestora, fie c anumite caracteristici
ale aparatului sunt net inferioare celor prezentate n cartea tehnic (printre exemple ar putea fi
autonomia bateriei, calitatea imaginii, calitatea camerei foto si altele). Avand in vedere pasiunea
comuna pentru telefoane mobile, ne-am simtit obligati sa punem concetenilor la dispoziie o lista
cu telefoane care sunt intr-adevar performante si care au o interfata placuta pentru utilizator si
practica. Aceast list am ncorporat-o unui site de internet deoarece care lucru este mai la ndemn
omului pentru a cuta ceva dect prietenul su google? Acest site cuprinde informaii minuioase
despre o serie de telefoane de nota 10(zece).

6
Descrierea aplicaiei

n realizarea acestui site am folosit urmtoarele tehnici de programare: HTML ( HyperText

Markup Language ) , CSS ( Cascading Style Sheet ), JAVASCRIPT si PHP(Personal Home
Page- pentru a utiliza baze de date).
Pagina de start a site-ului(HOMEPAGE-UL sau INDEX-UL) cuprinde:
n stanga sus o imagine cu telefonul anului 2011 ,Samsung Galaxy S II.
Sus n centru se afl un banner cu Telefoan mobile performante.
n dreapta sus se afl un ceas practic.
Apoi, in stanga centru se afla meniul site-ului cu legaturi spre fiecare telefon
prezentat.
n partea central apare iniial un scurt istoric al telefoanelor mobile, urmnd ca apoi
s se deruleze acolo toate paginile apelate din cuprins.
n partea central din stnga se afl un icon care arat vremea n Bucureti, i mai jos
nite nouti care se updateaz zilnic din domeniul IT.
Intrnd pe pagina unui telefon vizitatorul va vedea poze cu aparatul respectiv,
caracteristicile despre acesta i va putea de asemenea s i exprime prerea n
legtur cu telefonul prezentat pe care e posibil s l fi deinut ntr-un anumit timp.
Simplu, practic, eficient!

Softuri utilizate

7
 Winows xp

wamp server

internet

explorer

Secvente de program

Pentru realizarea lucrrii au fost utilizate urmtoarele tehnici de

programare: HTML(HyperText Markup Language), CSS(Cascading Style Sheet ) ,
JAVASCRIPT (JavaScript) si PHP(Personal Home Page- pentru a utiliza baze de
date).
Limbajul de baz folosit n cadrul lucrrii este HTML. Acesta a fost
utilizat la editarea tuturor paginilor care formeaz site-ul Telefoane mobile
performante. Am folosit elemente de baz pentru HTML ca tagurile
<html><head>...</head><body>...</body></html>. Pagina index.html a fost
organizat cu ajutorul frame-urilor cum se poate vedea n codul de mai jos:
<frameset rows="20%,80%" frame border="0">
<frameset cols="16%,72%,12%", frame border="0">
<frame src="poza.html">
<frame src="banerm.html">
<frame src="ceas.html">
</frameset>

<frameset cols="17%,65%,18%", frame border="0">

<frame src="cuprins.html">

8
 <frame src="link.html" name=continut>

<frame src="rec.html">
</frameset>
</frameset>

Efectul codului se poate vedea n poz:

De asemenea am mai folosit i taguri pentru paragrafe(<p>) sau pentru

modificarea dimensiunii scrisului (<h1>,<h2>). Am creat tabele cu funcia <table>
<tr><td>...</td></tr></table>. Am realizat numeroase legturi ntre pagini cu
ajutorul tagului<a href> ca de exemplu :
<a href="link.html" target="continut">Acasa</a>
<a href="e51.html" target="continut">Nokia E 51</a>
<a href="s312.html" target="continut">Sony Ericsson S312</a>
<a href="s2.html" target="continut">Samsung Galaxy S II</a>

Am inserat imagini cu <img src=ceva.jpg>, iar unele le-am

redimensionat cu ajutorul comezilor height, width.

9
 Ca i elemente de CSS am utilizat coduri de schimbare a fontului ca:
<html>
<head>
<STYLE>
p{
font-family:"Comic Sans MS";

font-size:10.5pt; }

</STYLE>
</head>

<p>
Un telefon mobil sau telefon celular (ntlnit si sub formele substantivizate un celular, un
mobil) este un dispozitiv electronic portabil care functioneaza fara fir (prin radio) pe baza ....... din
cadrul companiei Motorola.Primul apel de pe un telefon mobil a fost facut de Cooper la 3 aprilie
1973. Abia n 1983 Motorola a prezentat primul telefon mobil comercial din lume, Dyna TAC
8000X.<br>

n ziua de azi telefonia celulara sau mobila se bazeaza pe standardul de comunicaii si reseaua
GSM.<br>
</p>
Pentru formularul de exprimare a opiniei am folosit BAZE DE DATE.
Opinia utilizatorului impreuna cu pseudonimul sau si cu numele telefonului
comentat va fi salvat intr-o baza de date pe care noi, moderatorii site-ului, o vom
consulta spre a publica pe site comentariile potrivite la diferitele telefoane. Codul
care trimite informatiile inscrise de vizitator bazei de date este afiat mai jos:

<?php
$c = mysql_connect("localhost", "root", "");
$d = "vizitatori";
mysql_select_db($d, $c);
if ($_POST['numele'] != "" && $_POST['parerea'] != "" && $_POST['telefon'] != "") {

10
 // preia datele din formular
$nume = $_POST['numele'];
$parere = $_POST['parerea'];
$tele = $_POST['telefon'];

// formeaza si executa query-ul de inserare in baza de date

$query = "INSERT INTO `viz` (`pseudonim`,`comentariu`,`telefon`) VALUES ('".$nume."','".
$parere."','".$tele."')";
$result = mysql_query($query) or die ( "Error : ". mysql_error() );

// afiseaza un mesaj de succes

if ($result) {
echo "Inregistrarea a fost efectuata. Comentariul tau va fi analizat, si poate postat!";
}
}
?>
Uitai o poz care prezint baza de date aferent acestui site:

Din Javascript am preluat coduri precum cel pentru evidenta vizitatorilor:

<script type="text/javascript">
<!--
today = new Date;
sec = today.getTime();
document.write('<scr'+'ipt type="text/javascript"

11
src="http://countus1.editeurjavascript.com/countus.php3?pseudo=f_054656&timer

=')
document.write(sec)
document.write('&present=1&texte=vizitator%28i%29 pierdut%28i%29 pe acet

site&color=%23FFFF99"><\/scr'+'ipt>')
//-->
</script>
sau pentru realizarea prezentarii pozelor la fiecare telefon:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="photoslider.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var ids = new Array(0,1,2,3);
FOTO.Slider.importBucketFromIds('default',ids);
FOTO.Slider.reload('default');
FOTO.Slider.preloadImages('default');
FOTO.Slider.enableSlideshow('default');
});
</script>

12
 Cerinte hard si soft
Rularea acestui site implic puine resurse hard i soft necesare. Att pentru cei care fac hostul sau
cei care utilizeaz site-ul, calculatorul i componentele sale reprezint resursele hard principale. n
serverul unde se hosteaz trebuie s fie instalat unul dintre aceste programe: WAMP sau XAMPP.
Utilizatorii pot folosi orice browser existent pe pia.

Este recomandat unul dintre aceste browsere, unde site-ul a fost testat i era funcionabil complet:
-Internet Explorer v7
-Google Chrome v11
-Mozila Firefox v3
-Opera v11

13
 Posibilitati de dezvoltare
Acest site ar putea fi tradus si in limba engleza pentru a putea avea la el acces oameni din
lumea larga.
M-am gndit ca n viitor sa incarc pe site softuri pentru Android, programe pentru orice fel
de telefon precum Google Maps, Navigation, Messenger, Winamp, Facebook, Fm Radio, Voice
Recorder, Youtube si multe altele. Vreau sa fac un tabel n baza de date, n care fiecare vizitator s-i
poat face un cont pentru pentru a avea acces in totalitate la serviciile site-ului.
De asemenea in viitor as putea sa realizez o varianta a site-ului special pentru userii de
smartphone-uri care sa le confere acestora facilitati speciale in a-l utiliza.

14
 Concluzii
Acest site, publicat pe internet ar avea un real succes, deoarece in ziua de astazi toti
cauta telefoane performante, iar site-ul cuprinde si cele mai amanuntite detalii despre
performanta oricarui telefon. Site-ul este un beneficiu pentru orice comapnie de telefoane,
pentru ca beneficiaza de reclama, dar si pentru doritor pentru ca i se expun toate datele necesare
pentru telefonul in cauza.

15
Bibliografie:

www.htmldrive.net
http://www.abbeyworkshop.com/howto/lamp/my_createdb/index.html\
http://www.w3schools.com/html/default.asp
http://jquery.com/
http://etutoriale.ro/articles/103/1/Tutorial-complet-CSS/
www.gsmarena.com

16