COLEGIUL TEHNIC GHEORGHE ASACHI ONESTI

LUCRARE PENTRU SUSTINEREA EXAMENULUI DE ATESTARE A COMPETENTELOR PROFESIONALE

Specializare Matematica Informatica intensiv Informatica
-

Mihai Eminescu

Profesor indrumator, Cosma Ionel

Autor, Tanase Andreea Eula

2011-2012

COLEGIUL TEHNIC GHEORGHE ASACHI ONESTI..............................................1 LUCRARE PENTRU SUSTINEREA EXAMENULUI DE ATESTARE A COMPETENTELOR PROFESIONALE..................................................................1 ......................................................................................................................... 5 III. Metode de realizare..................................................5 1.Ce nseamna Internetul!..............................................................................5 2.Ce nseamn Web Design-ul?......................................................................7 3.Softuri folosite.....................................................8 Stilurile interne............................................................................................11 Stilurile externe...........................................................................................11 IV. Bibliografie.................................................................................................13

I. Introducere

Lucrarea de atestat a constituit realizarea un sit web in memoria poetului Mihai Eminescu. Scopul acestui sit este de a promova si de a fi utilizat drept suport pentru cei care vor sa cunoasca mai mult despre acesta. Un al motiv pentru care am ales aceasta tema este pasiunea mea pentru poezie si dorinta de a realiza un web sit, punand in practica cunostiintele dobandite pana in prezent. Fiind la un profil real, si dorind sa diversific cunostiintele din domeniul informaticii, am fost atras de programarea HTML. Astfel am imbinat doua dintre pasiunile mele si am decis sa realizez acest site. Am folosit ca documentatie cursuri online de html si am adunat informatiile necesare de pe sit-urile oficiale cu date despre poet . Originalitatea acestui proiect este dovedita de organizarea informatiilor si de imbinarea design-ului, a cunostiintelor de programare si cunostintelor de prelucrare a imaginilor in Photoshop. Pentru realizarea propriu zisa a paginilor am folosit programul MACROMEDIA DREAMWEAVER si cteva tutoriale. Acest soft funcioneaz att pe baz de cod ct i cu ajutorul design-ului. Combinnd cunotinele de C++ i intuiia am reuit s desluesc cum pot ajunge la un rezultat ca cel de fa.

II. Prezentarea aplicatiei

Acest sit s-a dorit a fi unul usor de navigat, sa nu abunde in informatii inutile, ci sa fie succint si bine organizat. De asemenea designul ales a constituit un pas cheie deoarece ideea de interactiune om-calculator a devenit foarte apreciata in aceste vremuri in care tehnologia o intalnim in orice domeniu. Designul este simplu, cu detalii specifice domeniului, si culori atent alese pentru a scoate in evidenta tema aleasa. Acest sit este format din sase (4) pagini html, care sunt cuprinse in meniul orizontal al sit-ului. Pagina index.html este pagina de start si reprezinta punctul de plecare in navigarea acestui sit. Aceasta pagina cuprinde rezumatul biografiei autorului. In prima pagina Index.html este redactata una dintre cele mai frumoase poezii ale lui Mihai Eminescu. In pagina Biografie.htm este prezenta pe scurt imagine reprezentativa. In pagina Opera.html sunt prezentate Operele poetului pe ani. In paginina Poze.html se gasesc poze reprezentative ale poetului. Toate acestea formeaza sit-ul de prezentare si pe langa informatiile in format text, fotografii, acesta contine si elemente de flash, imagini prelucrate pentru a fi in ton cu cele prezentate, cat si foi de stil ce fac posibila formatarea paginilor, dupa placul programatorului. viata lui Mihai Eminescu. Ca si celelalte pagini, aceasta contine pe langa partea de text si o

III. Metode de realizare 1.Ce nseamna Internetul!

Internetul reprezint o reea internaional de computere care este interconectat cu alte reele de computere. La nceputul anilor 90, Internetul s-a extins foarte rapid, pe msura ce tot mai muli oameni de afaceri, i nu numai ei, au nceput s descopere avantajele transmiterii potei, tirilor, informaiilor, precum i a unor date din domeniul informaticii i a computerelor, oriunde n lume, aproape instantaneu. Tehnologia pe care se bazeaz Internetul a luat natere n anul 1969, sub forma unui proiect de cercetare numit ARPAnet, iniiat de Departamentul American al Aprrii. Scopul acestui proiect era acela de a ncerca s construiasc o reea de computere capabil s reziste unui atac nuclear; dac o bomb ar fi czut pe o parte a reelei, restul acesteia ar fi trebuit s rmn funcional. Aceast filosofie a rmas i astzi valabil pentru proiectarea Internetului. Datele sunt transmise n pachete, folosind tehnici de comunicaie standard numite Protocoale Internet (TCP/IP). Atta timp ct pachetele sunt corect adresate, ele pot fi transmise de la oricare computer de pe Internet, pe orice rut. Dac o parte a reelei cade,

fluxul de date ocolete pur i simplu defeciunea aprut. Aceasta face ca sistemul sa fie foarte robust i este i motivul pentru care se crede c este imposibil impunerea pe Internet a unei cenzuri dorit de unii politicieni. Una dintre cele mai importante pri ale Internetului a fost construit la mijlocul anului 1980, cu sprijinul Fundaiei Naionale de tiin a Statelor Unite (FNS), pentru a permite tuturor cercettorilor universiti din ar s beneficieze de resursele costisitoare a celor cinci centre de calcul regionale, pe care FNS le construia simultan. La vremea aceea, folosirea Internetului era limitat exclusiv la instituiile academice i guvernamentale. Totui, la nceputul anului 1990, conectrile au devenit accesibile nu numai companiilor mici, ci i la nivelul de individ, iar aceast realitate, cumulat cu intenia guvernului Statelor Unite de a construi la nivel naional o infrastructur informaional, a declanat o explozie a numrului persoanelor i calculatoarelor conectate. n 1995, statisticile confirmau conectarea n reea a peste 35 de milioane de oameni din 135 de ri. Internetul este cea mai mare reea de calculatoare din lume, dar nu este singura. Mai sunt multe alte feluri de sisteme online, care se pot accesa prin linii telefonice, folosind un modem (modulator/demulator); aceasta transform datele pe care computerul le poate citi, n zgomote ce pot fi transmise i decodate la cellalt capt. Sistemele online ofer, n general, aceleai servicii ca i Internetul. Acestea include pota electronic, biblioteci de fiiere i de alte informaii, conferine electronice i acces la baze de date cuprinznd informaii despre alte companii sau articole ale unor publicaii periodice. Multe sisteme de acest gen, cunoscute ca bullettin board system (BBS), sunt gratuite; altele, cum ar fi vechiul system online de informaii comerciale CompuServe, trebuie pltite de ctre utilizator, plata fcndu-se

n funcie de timpul efectiv petrecut online si n funcie de serviciul folosit. Deoarece Internetul a fost construit din banii publici i primii lui utilizatori au fost universitile i cercettorii, informaiile de pe Internet erau gratuite.

2.Ce nseamn Web Design-ul?

Pentru a crea pagini Web avem nevoie de un editor simplu de texte n care s scriem pur i simplu ceea ce dorim n formatul HTML. Un singur inconvenient al realizrii paginilor Web cu ajutorul editoarelor de texte este faptul c trebuie cunoscut limbajul HTML. Un alt mod de creare a paginilor Web este folosirea unui program pentru crearea paginilor Web. Aceste programe difer de la unul la altul dar unul dintre cele mai rspndite este FrontPage, un program al firmei Microsoft care aparine, deja, de pachetul de programe Microsoft Office, i este de tipul WYSIWYG - What You See Is What You Get - ceea ce vezi este ceea ce vei obine. Pentru a putea face publice paginile Web este necesar utilizarea unui server de Web care s stocheze pagina utilizatorului. Asemenea servere exista pe Web i pot fi gsite foarte uor. Prin proiectul Web al lui Berns-Lee, au fost stocate documente pe unul sau mai multe calculatoare, numite servere Web. Cercettorii au avut acces la aceste date utiliznd un program special numit browser Web. n aprilie 1993, dup aproape un an i jumtate de la introducerea Web-ului, existau 60 de servere Web. Astzi se estimeaz numrul serverelor la peste un milion.

3.Softuri folosite
Aa cum am menionat pentru realizarea acestui proiect am utilizat softul distribuit de firma Macromedia: DREAMWEAVER. Acest soft se adreseaz att persoanelor cu experien i cunotine n limbajului HTML prin proiectare paginilor cu ajutorul secvenelor de cod, ct i celor nceptori, venind n ajutorul lor cu o interfa de design. Personal, am folosit mai mult partea de design a programului, dar nu numai. Pentru a realiza un design simplu si tot odata elegant, am preferat alegerea lucrului cu tabele. Astfel am mplrit pagina de lucru ntr-un tabel. Am ales acest mod deoarce este foarte uor de poziionat n pagina absolut orice, i tocmai pentru c mi doream un aspect elegant i ordonat. Pagina arat astfel:

Pentru a ascunde marginile tabelului se va seta border=0 Meniul este plasat in partea de sus a paginii, orizontal, gasindu-se in fiecare pagina a sitului. Acest cod reprezinta o linie din tabelul care sta la baza acestei pagini. De altfel toate paginile au ca suport tabele. Aceasta linie reprezinta bara de meniu: <tr> <td height="37" align="right" valign="middle" class="top_menu_bg" style="white-space:pre; font-weight:bold;"><a href="biografie.html" target="_parent" class="menu_link">Biografie </a> | <a href="opere.html" class="menu_link">Opera </a> | <a href="poze.html" class="menu_link">Poze </a></td> Meniul arata astfel in pagina html:

Pentru Image Viewer vom folosi urmatoarea functie a utilitarului Macromedia: Imaginile le vom alege folosind meniul ce ne este pus la dispozitie, printr-un simplu add a pozelor, si eventual setarea optiunii de a se deschide fiecare poza intr-o fereastra separat pentru a putea vizualizate in marime originala.

De altfel setarea formatarilor imaginilor sau textului este data de foaie externa de stil style.css ce se afla in folderul root (in care se afla paginile html). Fisierul CSS (cascading style sheet - foi de stil in cascada) va permite separarea continutului (X)HTML de stilul de afisare in pagina. Ca de obicei, utilizati codul (X)HTML pentru aranjarea continutului in pagina, insa toata prezentarea (fonturi, culori, fundaluri, borduri, etc) se realizeaza din fisierul CSS. In acest moment, putem folosi CSS-urile in doua moduri, si anume interne sau externe.

10

Stilurile interne Mai intai vom aborda metoda stilurilor interne. Aceasa metoda inseamna ca vom plasa codul CSS in interiorul fiecarei pagini html pe care dorim sa folosim stilurile respective, intre tagurile <head> </head> .Acest lucru se face ca in exemplul ce urmeaza:
<head> <title>titlu <style type="text/css">Aici CSS</style> </head> pagina</title> definesc stilurile

se

Folosind aceasta metoda (stilurile interne), fiecare fisier (X)HTML va contine codul CSS folosit la stilizare. Asta inseamna ca atunci cand dorim sa facem o schimbare de stil (marimea fontului, culoare, etc) va trebui sa operam modificarea in toate paginile ce contin acel stil. Metoda descrisa pana acum este buna atunci cand avem de stilizat doua, trei pagini, insa cand avem de a face cu siteuri de zeci sau sute de pagini este destul de neplacut sa modificam toate paginile. Stilurile externe In continuare vom explora metoda stilurilor externe. Un fisier CSS extern poate fi realizat cu orice editor simplu de text (Notepad, Wordpad, etc) sau cu editoare avansate gen Dreamweaver. Fisierul CSS nu contine sub nici o forma cod (X)HTML, ci doar cod CSS. Fisierul trebie salvat cu extensia .css. Inserarea fisierului extern in paginile (X)HTML se face foarte usor, prin plasarea unui link (legatura) in sectiunea <head> </head> a fiecarei pagini pe care dorim sa folosim stilul respectiv. Iata un exemplu de inserare a unui fisier extern .css intr-o pagina (X)HTML:

11

<link rel="stylesheet" type="text/css" href="Calea catre fisierul.css" />

sau putem folosi metoda de import dupa cum urmeaza:

<style type="text/css">@import url( Calea catre fisierul.css )</style>

Oricare dintre metode este buna si se obtine plasand unul dintre codurile de mai sus in sectiunea <head> </head> a paginii, dupa cum exemplificam mai jos:
<head> <title> titlu pagina </title> <link rel="stylesheet" type="text/css" href="stil.css" /> </head>

sau
<head> <title> titlu pagina </title> <style type="text/css"> @import url( Calea catre fisierul.css ) </style> </head>

Folosind metoda fisierelor CSS externe, toate paginile (X)HTML vor folosi acelasi fisier de stil. Asta inseamna ca daca dorim sa facem o schimbare care sa aiba efect in toate paginile, este de ajuns sa modificam un singur fisier, si anume cel de stil (.css), si efectul se va observa pe toate paginile (X)HTML ce folosesc acel fisier. Astfel faceti schimbari in tot siteul, indiferent de cate pagini are, fara efort si mai ales foarte repede. Iata cateva motive pentru care aceasta metoda este mai buna.

Intretinere mai usoara Dimensiuni reduse ale paginilor Economie de banda internet Flexibilitate

12

IV. Bibliografie Claudiu Moisescu Aproape totul despre Internet Macromedia Dreamweaver help Mihai Eminescu-Referat V.Cod
</head> <body> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="center" valign="top"><table width="754" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="left" valign="top"><table width="754" border="0" cellpadding="0" cellspacing="0" class="header_table"> <tr> <td align="left" valign="top"><img src="images/header_top.gif" alt="" width="754" height="5" /></td> </tr> <tr> <td height="57" align="left" valign="middle" bgcolor="#FFFFFF"><a href="index.html"><img src="images/logo.jpg" alt="" width="208" height="39" border="0" class="logo" /></a></td> </tr> <tr> <td align="left" valign="top" class="top_line"><img src="images/line_bg.jpg" alt="" width="1" height="4" /></td> </tr> <tr> <td height="37" align="right" valign="middle" class="top_menu_bg" style="white-space:pre; font-weight:bold;"><a href="biografie.html" target="_parent" class="menu_link">Biografie </a> |

13

<a href="opere.html" class="menu_link">Opera </a> | <a href="poze.html" class="menu_link">Poze </a></td> </tr> </table></td> </tr> <tr> <td align="left" valign="top"><table width="754" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="left" valign="top" class="body_box"><table width="736" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="left" valign="top" class="header_banner">&nbsp;</td> </tr> <tr> <td align="left" valign="top">&nbsp;</td> </tr> <tr> <td align="left" valign="top">&nbsp;</td> </tr> </table> <table width="732" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="60" align="left" valign="top"><img src="images/box_left_top.gif" alt="" width="19" height="32" /></td> <td width="653" align="left" valign="top" class="box_top_bg">&nbsp;</td> <td width="19" align="left" valign="top"><img src="images/box_right_top.gif" alt="" width="19" height="32" /></td> </tr> <tr> <td align="left" valign="top" class="left_line">&nbsp;</td> <td style="text-align:justify;" align="left" valign="top"><p align="left"></p> <h1 align="center"> <span class="style9">&quot;Dorinta&quot;</span>-<span class="style9">Mihai Eminescu </span></h1> <div align="right" class="style2"></div>
14

<p align="left"><em> &nbsp;&nbsp;</em></p> <p align="center">&quot;Vino-n codru la izvorul<br /> Care tremura pe prund, <br /> Unde prispa cea de brazde<br /> Crengi plecate o ascund. </p> <p align="center">Si &icirc;n bratele-mi intinse<br /> S&atilde; alergi, pe piept s&atilde;-mi cazi, <br /> S&atilde;-ti desprind din crestet valul, <br /> S&atilde;-l ridic de pe obraz. </p> <p align="center">Pe genunchii mei sedea-vei, <br /> Vom fi singuri-singurei, <br /> Iar &icirc;n par infiorate<br /> Or s&atilde;-ti cada flori de tei. </p> <p align="center">Fruntea alba-n parul galben<br /> Pe-al meu brat &icirc;ncet s-o culci, <br /> Lasind prada gurii mele<br /> Ale tale buze dulci... </p> <p align="center">Vom visa un vis ferice, <br /> Ingina-ne-vor c-un c&acirc;nt<br /> Singuratice izvoare, <br /> Blinda batere de vint; </p> <p align="center">Adormind de armonia<br /> Codrului batut de ginduri, <br /> Flori de tei deasupra noastra<br /> Or s&atilde; cada rinduri-rinduri.&quot;</p> <p align="center">&nbsp;</p> <p align="center"><br /> <br /> </p></td> <td align="left" valign="top" class="right_line">&nbsp;</td> </tr> <tr> <td align="left" valign="top"><img src="images/box_bottom_left.gif" alt="" width="19" height="8" /></td> <td align="left" valign="top" class="bottom_line"><img src="images/spacer.gif" alt="" width="1" height="1" /></td> <td align="left" valign="top"><img src="images/box_bottom_right.gif" alt="" width="19" height="8" /></td> </tr> </table></td>
15

</tr> </table></td> </tr> <tr> <td align="left" valign="top"><table width="754" border="0" cellpadding="0" cellspacing="0" class="footer_table"> <tr> <td align="left" valign="bottom" class="footer_bg"><p>&nbsp;</p> <p><span class="style8">Realizat de: Tanasa EulaAndreea</span><br /> </p> <td width="136" align="left" valign="top"><img src="images/webdesigner.gif" alt="Freelance web designer" width="136" height="25" border="0" /></a></td> </tr> </table></td> </tr> </table></td> </tr> </table> </body> </html>

16