Proiect informatica - Calatorie in timp - Celtii

MINISTERUL EDUCATIEI SI CERCETARII

COLEGIUL NATIONAL "IULIA HASDEU"

Calatorie in timp - Celtii

Cuprinsul dosarului:

Cerinte de sistem:

Cerinte hard;

Cerinte soft .

Programe utilizate:

Appserv 2 . 5 . 9 ;

Jasc Paint Shop Pro 9 ;

Macromedia Dreamweaver MX ;

Windows Movie Maker ;

DAZ Productions: DAZ Studio ;

Flash Banner Maker;

Edit Plus 2 / Notepad .

Prezentare in ansamblu:

Cuprinsul site-ului;

Prezentarea temei;

Concept vizual .

Prezentare detaliata:

Baza site-ului - coduri sursa HTML;

Inserare baza de date - Sectiunea de Arme;

Actualizare baza de date prin interfata web - Formularul de abonare la buletinul de stiri;

CSS-uri complexe si straturi - realizarea meniului;

Alte CSS-uri din site;

Zoom pe harti - Localizarea triburilor celte;

Harta imagine;

Sistemul de legaturi al site-ului - comunicare usoara intre pagini;

Asezare in pagina pe baza de tabele;

Bibliografie

Bibliografie continut;

Bibliografie tehnica .

Cerinte de sistem:

Cerinte hard:

1,61 GHz;

512 MB RAM;

Cerinte soft:

Windows XP SP2;

Opera ;

Appserv ;

Flash Player ;

Java .

Programe utilizate :

Appserv 2 . 5 . 9 :

Appserv 2 . 5 . 9 . este un pachet format din :

Apache 2 . 2 . 4 ;

PHP 5 . 2 . 3 ;

MySQL 5 . 0 . 45 ;

phpMyAdmin-2 . 10 . 2 .

Appserv a fost folosit pentru editarea bazelor de date si ca server pentru integrarea lor in site .

Jasc Paint Shop Pro 9 :

Jasc Paintshop Pro a fost utilizat pentru crearea gif-urilor cu fundal transparent si editarea tuturor imaginilor din site . De asemenea a fost folosit si pentru editarea unora dintre texturile folosite in DAZ Studio si pentru realizarea pozelor din acest dosar .

Macromedia Dreamweaver MX :

Dreamweaver a fost folosit pentru editare rapida si perfectionarea asezarii in pagina .

Windows Movie Maker

Movie Maker a fost folosit pentru realizarea filmuletului introductiv .

Daz Productions - DAZ Studio

DAZ Studio este un program de generare 3D care functioneaza pe principiul unui studio fotografic virtual . A fost folosit pentru realizarea "paginii coperta" si a artei originale de la sectiunea "De ce celtii?" .

Flash Banner Maker - versiunea demo:

Flash Banner Maker a fost utilizat pentru crearea banner-ului animat .

Edit Plus 2 / Notepad:

Edit Plus 2 si Notepad au fost folosite pentru editarea propriu-zisa a codurilor sursa HTML si PHP .

Prezentare in ansamblu:

Cuprinsul site-ului:

Introducere :

Film introductiv;

In loc de prefata .

Cine sunt celtii? :

Date generale;

Teritorii;

Triburi:

Triburile din zona Arhipelagului Britanic;

Triburile din zona Frantei;

Triburile din zona Europei Centrale;

Triburile din zona Peninsulei Iberice;

Triburile din zona Peninsulei Italice .

Cultura :

Muzica;

Limba;

Alfabet;

Arta;

Societatea :

Vedere de ansamblu ;

Traditie si lege ;

Fortul ;

Locuinta ;

Aspect si imbracaminte ;

Sarbatori ;

Religia :

Panteonul;

Druizii;

Traditii funerare .

Razboiul :

Arta razboiului;

Arme:

Arme de impungere;

Arme de taiere;

Arme de zdrobire;

Lansatoare de proiectile;

Echipament de protectie .

Tactici de lupta .

O mostenire :

Celtii in prezent .

Despre site :

De ce celtii?

Pagina autorului ;

Buletin de stiri .

Prezentarea temei:

Site-ul "Calatorie in timp - Celtii" isi propune sa fie o culegere de date generale, utile despre civilizatia celta . Sunt incluse in special date despre perioada de apogeu si interactiunea dintre celti si Imperiul Roman .

Conceptul vizual:

Asa cum este sugerat si in titlu, site-ul a fost gandit ca o "calatorie in timp" . De aceea interfata este realizata ca o serie de documente vechi pornind de la pagina de start - o carte antica uitata pe un raft si "decorata" cu panze de paianjen - si ajungand la imaginea de fundal a tuturor paginilor wed - o foaie cu margini arse . Pentru a inveseli site-ul si a evita monotonia banner-ul si meniul sunt decorate cu auriu .

Prezentare detaliata:

Baza site-ului - coduri sursa HTML:

Toate paginile site-ului, indiferent daca au incorporate si structuri mai complexe sau nu, au fost realizate prin redactarea unui cod sursa HTML .

Un exemplu de astfel de cod este :

Rezultatul codului in momentul accesarii lui prin intermediul unui browser web este acesta :

Pagina contine :

O foaie de stil in antet care formateaza link-urile si include in pagina web imaginea de fundal;

Un tabel cu marginile invizibile, cu latimea de 86% si centrat, care asigura asezarea in pagina, introdus prin tag-urile <table> <tr> <td> . . </td> </tr> <table>;

O serie de paragrafe incadrate in tabel, in care este organizat continutul de text formatat astfel : font -" Centaur" , marimea 3 (prin tag-ul <font> ), stil bold (prin tag-ul <strong> ), aliniere tip "justify" prin tag-ul <div> cu atributul align="justify" ;

Un imagine tip gif cu fundal transparent incadrata centrat intr-o celula a tabelului prin tag-ul <img>;

O lista neordonata incadrata in tabel, introdusa prin tag-urile <ul></ul>;

Link-uri catre pagini din alt site introduse prin tag-urile <a href="adresa_pagina . html" > . </a> si care se deschid intr-o fereastra noua gratie atributului "target" (<a href="adresa_pagina . html" target ="_blank" >) si care sunt incluse ca elemente ale listei mentionate mai sus ( <li> link </li>);

Inserare baza de date - Sectiunea de Arme:

Baza de date realizata in interfata Phpmyadmin din pachetul Appserv este introdusa in site prin scripturi PHP . Baza de date "razboi" este suportul mai multor pagini web: pe ea se sprijina pagina de index a sectiunii arme si paginile de index pentru fiecare tip de arme .

Baza de date "razboi" are o tabela ("arme") care cuprinde campurile :

nr_crt - cheia bazei si contorul inregistrarilor;

nume - denumirea individuala a armei;

tip - ia una din valorile "taiere", "zdrobire", "impungere", "lansator proiectile" si "protectie" , este esential pentru interogarile prin care se realizeaza paginile de index pentru tipurile de arme;

pozalink - este un camp text care contine link-ul catre o imagine care va aparea in dreptul fiecarei arme;

descriere - camp text care cuprinde o scurta descriere a armei respective;

adresa - camp text care cuprinde sintaxa HTML pentru o ancora intr-o pagina de detalii corespunzatoare fiecarei arme .

Prin inserarea scriptului PHP prezentat in continuare baza de date :

este afisata in site in forma urmatoare:

Codul sursa este:

Pentru realizarea paginilor de index speciale pentru fiecare tip de arma se inlocuieste linia

cu una dintre liniile :

care selecteaza din tabela doar campurile corespunzatoare cu tipul dorit .

Actualizare baza de date prin interfata web - Formularul de abonare la buletinul de stiri :

Pentru realizarea unui formular prin care navigatorul sa se poata abona la un ipotetic buletin de stiri am recurs la actualizarea prin interfata browser-ului a unei baze de date care sa contina numele abonatului si adresa de e-mail la care buletinul de stiri sa fie trimis .

Astfel prin codul sursa :

la care se adauga scriptul:

se face apel la alte doua scripturi php: cel care "inscrie" abonatul si cel care "reziliaza" abonamentul, adica cel care adauga sau sterge inregistrari din baza de date .

Cod sursa pentru adaugarea unei inregistrari:

Cod sursa pentru stergerea unei inregistrari:

Este de remarcat faptul ca indiferent cate inregistrari sunt inserate si apoi sterse contorul nu "uita" inregistrarile care au fost eliminate:

Exemplu de inscriere:

CSS-uri complexe si straturi - realizarea meniului:

Meniul site-ului este un meniu dinamic stil dropdown realizat prin atasarea unei foi de stil CSS externe unei pagini in HTML in care sunt inserate liste .

Cod de inserare foaie stil "menu3 . css":

Va fi nevoie ca meniului sa ii fie atribuita clasa "menu" .

Sursa CSS:

<style>

body, html

body

#menu //caracterele generale ale clasei menu

#menu ul //caracterele primei liste

#menu a, #menu h2 // caracterele clasei menu pentru linkuri si titluri h2

#menu h2 //caracterele clasei menu pentru titluri stil h2

#menu a // caracterele clasei menu pentru link-uri

#menu a:hover // optional , schimbarea culorii scrisului si fundalului atunci cand cursorul este peste link

#menu li

#menu ul ul // caracterele stratului al doilea, corespunde unei liste imbricate

div#menu ul ul,

div#menu ul li:hover ul

// straturile sunt invizibile daca nu sunt selectate

div#menu ul li:hover ul,

div#menu ul ul li:hover ul

//straturile devin vizibile cand cursorul este deasupra lor

</style>

Rezultatul codului sursa este urmatorul:

In prima imagine este meniul in starea lui "normala", fara nimic selectat, se vad doar titlurile de capitole .

In a doua imagine meniul are submeniul "Cultura" activat, cursorul nu selecteaza nici o pagina .

In a treia imagine cursorul selecteaza pagina "Alfabet", culorile scrisului si fundalului s-au inversat .

Imaginile din meniu sunt jpg-uri intercalate scrisului ca elemente in lista principala .

Alte CSS-uri din site:

In cadrul site-ului s-au folosit si alte CSS-uri pentru:

Inserarea imaginii de fundal:

Formatarea link-urilor - stilul standard este scris albastru, subliniat, in site link-urile sunt maro roscat, nesubliniate .

Zoom pe harti - Localizarea triburilor celte:

Tot la capitolul CSS-uri se incadreaza si hartile "animate" de la sectiunea despre triburi . Din motive de economie de spatiu pagina despre triburi arata asa:

Harta cu localizarea aproximativa a tribului este mica si greu de descifrat . Pentru rezolvarea acestei probleme am introdus in sectiunea de "head" a codului HTML urmatorul stil:

Prin acest stil link-urile cu clasa "zoom" sunt aduse la marimea de 393x292 pixeli, dimensiunea hartii nemarite fiind de 208x155 pixeli .

Pozelor li se atribuie un link (in realitate nefunctional ca legatura) cu clasa "zoom" prin codul:

Rezultatul este marirea imaginii la cerere, cu rearanjarea automata a textului datorita aranjarii in pagina prin tabele:

Harta este mult mai vizibila si poate fi consultata in detaliu fara ca sa se suprapuna scrisului si sa ingreuneze vizualizarea datelor .

Harta imagine :

Pentru o navigare mai usoara intre sectiunile de "Teritorii" si "Triburi pe regiuni" harta cu intinderea culturii celte in Europa a fost transformata intr-o "harta imagine" .

Harta a fost obtinuta prin aplicarea urmatorului cod sursa editat in Dreamweaver pentru precizie:

La acest cod s-a adaugat specificatia : usemap='#Map' printre atributele tag-ului de imagine .

Sistemul de legaturi al site-ului - comunicare usoara intre pagini:

Pentru o navigare mai usoara s-a conceput un sistem de legaturi in concordanta cu structura site-ului .

Navigarea intre capitole se realizeaza prin meniu;

Navigarea intre pagini ale aceluiasi capitol se poate realiza atat prin meniu cat si prin link-uri speciale asezate la sfarsitul fiecarei pagini;

In cadrul paginilor cu multe informatii s-au inclus ancore;

De asemenea s-au inclus ancore si pentru navigarea de la paginile tip cuprins direct la paragraful de interes pentru navigator din alta pagina;

Se adauga si link-uri catre adrese din afara site-ului propriu-zis (exemplu: pagina "Celtii in prezent") .

Asezare in pagina pe baza de tabele:

Toate paginile din site sunt realizate pe baza de tabele cu margini invizibile . Datorita acestui stil de asezare in pagina scrisul se rearanjeaza automat atunci cand fereastra este redimensionata sau intervin modificari in dimensiunile elementelor din imagine ( de exemplu hartile care se maresc) .

Bibliografie:

Bibliografie continut:

Druizii si lumea lor enigmatica - Dan Grigorescu, Editura Saeculum;

The Book of Druidry- Ross Nichols;

Celtic Art - O . B . Duane;

Noveau Petit Larousse Illustré - editia din 1927;

Istoria Europei de Serge Berstein si Pierre Milza;

Colectia Arborele Lumii;

www . wikipedia . com - versiunile in engleza, spaniola si romana .

Bibliografie tehnica:

Chip Special februarie -martie 2008;

Manual informatica intensiv, clasa a 12-a Tudor Sorin;

Manual de informatica clasa a 12-a Alin Burta;

www . w3schools . com .