COLEGIUL NATIONAL ELENA GHIBA-BIRTA

LUCRARE DE ATESTAT DISCIPLINA INFORMATIC

CANDIDAT, MIHOTA OVIDIU

COORDOATOR, PROF. CIORAN RAMONA

ECOLOGIA

CUPRINS
Introducere .............................................................

1. 2.

4 4

Structura aplicaiei ..
5

3. Prezentarea limbajului de programare

1.3 HTML .............................................................................. 1.4 CSS.................................................................................. 7

4. 5. 6.

Prezentarea programului de prelucrare a codului Prezentarea algoritmului................................................ 8 Bibliografie..........................................................................12

sursa .......................................................................................................... 7

1. Introducere

Am ales crearea unei pagini web deoarece am considerat ca este cea mai buna modalitate pentru promovarea unui website care are ca o tema ecologica. Cunoaterea limbajelor de programare HTML si CSS mi-a influenat intenia de asemenea,deoarece m-a ajutat sa redactez codul sursa cu o mai mare uurina. Un alt motiv ar fi faptul ca sunt pasionat de web design, ncepnd de la crearea si editarea unor imagini cu programul Adobe Photoshop si pana la crearea unor animaii cu ajutorul programului Adobe Flash. Pentru mine o pagina web reprezint imaginaie, creaie nu doar imagini si linii de cod. 1.1 Necesita i software si hardware Resurse minime : Hardware: - Procesor : 800 MHz + Memorie RAM : 256 MB Rezoluie Monitor : 1024x768 Spaiu liber pe hard-disk : 50 MB O conexiune la internet cu acces la Youtube.com

Software: - Sistem de operare : Windows XP - Browser: Google Chrome (recomandat) , Mozila Firefox 1.2 Programele utilizate in scopul realizrii paginii web sunt: -Adobe Photoshop CS5 pentru editarea si prelucrarea layout-ului -Adobe Dreamweaver CS5 pentru scrierea codului sursa

2. Structura aplica iei

Siteul conine o forma principala (Acas) alctuita din mai multe butoane (linkuri spre alte pagini ale siteului) precum: Categoria Acas ce conine cteva articole despre protecia mediului. Categoria Ecologie conine descrierea termenului ecologie si legtura ei cu biologia. De asemenea ntlnim si o serie de filmulee in strnsa legtura cu ecologia. Categoria Galerie conine mai multe fotografii de la diferite activiti ecologice.

Categoria Autor conine informaii despre autorul programului.

3. Prezentarea limbajului de programare

3.1 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 sa fie tratate asemntor cu documentele Word, dar cu observaia c aceste programe genereaz un cod HTML care este de multe ori de proast calitate. HTML se poate genera direct utiliznd tehnologii de codare din partea serverului cum ar fi PHP, JSP sau ASP. Multe aplicaii ca sistemele de gestionare a coninutului, wikiuri i forumuri web genereaz pagini HTML. HTML este de asemenea utilizat n e-mail. Majoritatea aplicaiilor de e-mail folosesc un editor HTML ncorporat pentru compunerea e-mail-urilor i un motor de prezentare a email-urilor de acest tip. Folosirea e-mail-urilor HTML este un subiect controversat i multe liste de mail le blocheaz intenionat. NOTIUNI DE BAZA HTML este prescurtarea de la Hyper Text Mark-up Language si este codul care sta la baza paginilor web. Paginile HTML sunt formate din etichete sau tag-uri i au extensia .html sau .htm .n marea lor majoritate aceste etichete sunt pereche, una de deschidere <eticheta> i alta de nchidere </eticheta>, mai exist i cazuri n care nu se nchid, atunci se folosete <eticheta /> browserul interpreteaz aceste etichete afind rezultatul pe ecran. HTML-ul nu este un limbaj case sensitiv (nu face deosebirea ntre litere mici i mari). Pagina principala a unui domeniu este fiierul index.html respectiv index.htm Aceast pagin este setat a fi afiat automat la vizitarea unui domeniu. De exemplu la vizitarea domeniului www.nume.ro este afiat pagina www.nume.ro/index.html. Unele etichete permit utilizarea de atribute care pot avea anumite valori: <eticheta atribut="valoare"> ... </eticheta> Toate paginile HTML ncep i se termin cu etichetele <html> i </html>. n interiorul acestor etichete gsim perechile <head>, </head> i <body>, </body>. head conine titlul paginii ntre etichetele <title> i </title>, descrieri de tip <meta>, stiluri pentru formatarea textului, scripturi i linkuri ctre fiiere externe (de exemplu scripturi, fiiere de tip CSS sau favicon). Etichetele de tip meta conin cuvinte cheie, descrierea paginii, date despre autor, informaii utile motoarelor de cutare i au urmtorul format: <META NAME="nume" CONTENT="coninut">

3.2 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.

4. Prezentarea programului de prelucrare a codului surs

Adobe Dreamweaver (cunoscut anterior ca Macromedia Dreamweaver) este o aplicaie de dezvoltare web a companiei americane Adobe Systems, disponibil att pentru MS Windows, ct i pentru Apple Mac OS. Versiunile recente includ suport pentru tehnologii web cum ar fi CSS, JavaScript, PHP, Cold Fusion, ct i cadre ASP. Dreamweaver s-a bucurat de un larg succes nc de la sfritul anilor 1990 i momentan deine aproximativ 80 % din piaa editoarelor HTML. Produsul poate fi rulat pe variate platforme software: Mac OS, Windows, dar suport n acelai timp i platforme UNIX cu ajutorul unor emulatoare software cum ar fi Wine. Ca orice alt editor WYSIWYG, Dreamweaver poate ascunde detaliile de implementare a paginilor HTML, fcnd astfel posibil crearea cu uurin a acestora i de ctre utilizatorii neexperimentai. Unii creatori de pagini web critic aceste tipuri de editoare deoarece produc pagini de dimensiuni mult mai mari dect ar fi necesar, ceea ce conduce la o funcionare neperformant a browserelor web. Aceast afirmaie este n mare parte adevrat deoarece paginile web produse folosesc designul pe baz de tabel. n plus, produsul a mai fost criticat n trecut i pentru producerea de coduri care adesea nu erau conform standardelor W3C, dar acest aspect a fost mult mbuntit n versiunile recente. Cu toate

acestea, compania Macromedia a mbuntit suportul pentru tehnologia CSS precum i alte modaliti de design, fr a fi necesar folosirea designului pe baz de tabel. Dreamweaver permite folosirea majoritii browserelor instalate pe calculatorul utilizatorului, pentru a previzualiza situl web creat. De asemenea conine i cteva utilitare pentru administrarea siturilor, cum ar fi cele pentru a gsi i modifica un paragraf sau o linie de cod, n ntregul sit, pe baza oricror parametri specificai de ctre utilizator. Cu ajutorul panourilor de stare se poate crea cod JavaScript fr a avea cunotine de programare. Odat cu apariia versiunii MX, Macromedia a ncorporat utilitare de generare dinamic a coninutului. De asemenea este oferit suport pentru conectarea la baze de date (cum ar fi cele de tip MySQL i Microsoft Access) pentru a filtra i afia coninutul folosind scripturi de genul PHP, ColdFusion, Active Server Pages (ASP) i ASP.NET, fr a avea nevoie de o prealabil experien n programare. Un aspect foarte ludat al Dreamweaver-ului l reprezint arhitectura sa extensibil. Extensiile sunt mici programe pe care orice dezvoltator le poate scrie (de obicei n HTML i JavaScript) i pe care oricine le poate descrca i instala, acestea aducnd un spor de performan i funcionalitate mbuntit programului. Exist o comunitate de dezvoltatori care produc aceste extensii i le public (att comercial ct i gratuit) pentru probleme de dezvoltare web, de la simple efecte rollover pn la soluii complete de vnzare online, n Internet.

5. Prezentarea algoritmului
Crearea butoanelor meniului: Se realizeaz stabilirea unui background care l inseram prin intermediul codului CSS din imaginea alturata. Urmtorul pas este apelarea setrilor realizate pentru backgroundul butoanelor. Acesta apelare se face cu ajutorul tagului <div>, in cazul nostru <div class="menu">. Dup aceasta cu ajutorul tagului <li> ( liste) realizam butoanele ca in imaginea de mai jos.

Galeria foto: Cu ajutorul limbajului JavaScript a fost realizata animaia imaginilor din galeria foto incarcand din directorul /js al proiectului fiierul FancyZoom.js iar cu ajutorul CSS-ului a fost creata fereastra nou deschisa incarcand fiierul style.css . Galeria foto a fost creata din cod HTML cu Adobe Dreamweaver utiliznd algoritmul specific inserrii imaginii .

Imaginile sunt ncrcate din directorul /articles/images si prin tagul <a> este apelat scriptul java pentru imagini. Crearea legturilor:

Pentru ca prin simplul click pe imaginea introdusa anterior sa se deschid o alta pagina trebuie creat un link. Acesta se face ca in imaginea alturata din meniul Insert/Hyperlink .

In fereastra nou deschisa se tasteaz un text ce se va afia ca link, adresa link-ului in cazul nostru "http://ro.wikipedia.org/wiki/Charles_Darwin", tipul linkului (_target,_blank,_self,_top) in cazul de fata self (deschide pagina in aceeai fereastra).

Adugarea videoclipurilor Filmuleele din paginile articolelor au fost adugate prin intermediul website-ului www.youtube.com . Am preluat codul specific video-ului de pe site ca in imaginea de mai jos.

Dup

obtinerea codului l-am integrat in paginea site-ului meu astfel.

BIBLIOGRAFIE

http://www.green-report.ro/stiri/ http://ro.wikipedia.org/wiki/Pagina_principal%C4%83 http://www.javascriptkit.com/