	Biologie	Chimie	Didactica	Fizica	Geografie	Informatica
	Istorie	Literatura	Matematica	Psihologie

Html

Index » educatie » » informatica » Html
» INFORMATICA - WEB - CAPITALE DUNARENE

INFORMATICA - WEB - CAPITALE DUNARENE

Introducere

Prin intermediul tehnologiilor web devenite din ce in ce mai populare in zilele noastre, site-ul educational Capitale Dunarene ofera informații interesante din domenii științifice precum geografia sau istoria referitoare la cele patru capitale situate pe cursul celui de-al doilea fluviu din Europa ca lungime, unei clase vaste si diversificate de utilizatori. Interfața moderna și funcționalitațile avansate date de instrumentele de navigare si paginatie intalnite de-a lungul articolelor prezentate ofera o experiența web unica placuta care contribuie la design-ul inovativ al site-ului și atmosfera pe care acesta incearca sa o creeze pentru vizitatorii sai.

Rolul acestui proiect este de a demonstra abilitațile design de interfețe web, realizare de elemente grafice si de concepere si ansamblare a codului in diferite limbaje de programare web (XHTML, CSS, jQuery). Prin urmare, acest proiect va pune accent pe modul de realizare a unei interfețe web, realizarea si implementarea elementelor grafice, crearea unei legaturi intre elementele html native si stiluri css, elaborarea si implementarea unui sistem de navigare, folosirea de hyperlink-uri, inserarea de imagini, creare de tabele, liste, elemente de navigare, crearea și apelarea de funcții JS (JavaScript), definirea proprietaților, selectorilor și metodelor CSS (Cascading Style Sheets), etc.

2.Tehnologii Web

HTML/XHTML

HyperText Markup Language (HTML) este un limbaj de marcare utilizat pentru crearea paginilor web ce pot fi afisate intr-un browser (sau navigator). Scopul HTML este mai degraba prezentarea informatiilor - paragrafe, fonturi, tabele s.a.m.d. - decat descrierea semanticii documentului.

HTML este o forma de marcare orientata catre prezentarea documentelor text pe o singura pagina, utilizand un software de redare specializat, numit agent utilizator HTML, cel mai bun exemplu de astfel de software fiind browserul web. HTML furnizeaza mijloacele prin care continutul unui document poate fi adnotat cu diverse tipuri de metadate si indicatii de redare. Indicatiile de redare pot varia de la decoratiuni minore ale textului, cum ar fi specificarea faptului ca un anumit cuvant trebuie subliniat sau ca o imagine trebuie introdusa, pana la scripturi sofisticate, harti de imagini si formulare.

eXtensible HyperText Markup Language, sau XHTML, este un limbaj de marcare ce are aceleasi capabilitati expresive ca si HTML, dar cu o sintaxa mai stricta. XHTML poate fi considerat ca incrucisarea dintre HTML si XML in multe privinte, fiind o reformulare a HTML in XML. XHTML 1.0 a devenit o recomandare World Wide Web Consortium (W3C) pe data de 26 ianuarie 2000.

CSS

CSS (Cascading Style Sheets) este un standard pentru formatarea elementelor unui document HTML. Stilurile se pot atasa elementelor HTML prin intermediul unor fisiere externe sau in cadrul documentului, prin elementul <style> si/sau atributul style. CSS se poate utiliza si pentru formatarea elementelor XHTML, XML si SVGL.

Fisierele CSS permit separarea continutului (X)HTML de stilul de afisare in pagina. Ca de obicei, se utilizeaza codul (X)HTML pentru aranjarea conținutului in pagina, insa toata prezentarea (fonturi, culori, fundaluri, borduri, etc) se realizeaza din fisierul CSS. La ora actuala, codurile CSS se pot folosi in mod intern sau extern (fișiere css).

JavaScript

JavaScript este un limbaj de programare orientat obiect bazat pe conceptul prototipurilor. Este folosit mai ales pentru introducerea unor functionalitati in paginile web, codul Javascript din aceste pagini fiind rulat de catre browser. Limbajul este binecunoscut pentru folosirea sa in construirea siturilor web, dar este folosit si pentru acesul la obiecte incastrate (embedded objects) in alte aplicatii. A fost dezvoltat initial de catre Brendan Eich de la Netscape Communications Corporation sub numele de Mocha, apoi LiveScript, si denumit in final JavaScript.

jQuery

jQuery este o platforma de dezvoltare JavaScript, conceputa pentru a usura si imbunatati procese precum traversarea arborelui DOM in HTML, managementul inter-browser al evenimentelor, animatii si cereri tip AJAX. jQuery a fost gandit sa fie cat mai mic posibil, disponibil in toate versiunile de browsere importante existente, si sa respecte filosofia 'Unobtrusive JavaScript'. Libraria a fost lansata in 2006 de catre John Resig. jQuery se poate folosi pentru a rezolva urmatoarele probleme specifice programarii web:

selectii de elemente in arborele DOM folosind propriul motor de selectii open source Sizzle, un proiect nascut din jQuery

parcurgere si modificarea arborelui DOM (incluzand suport pentru selectori CSS 3 si XPath simpli)

inregistrarea si modificarea evenimentelor din browser

manipularea elementelor CSS

efecte si animatii

cereri tip AJAX

extensii ( vezi mai jos )

utilitati - versiunea browser-ului, functia each.

Plugin-urile sau extensiile sunt unele dintre cele mai interesante aspecte ale jQuery. Arhitectura sa permite programatorilor sa dezvolte subaplicatii bazate in libraria principala care extind functiile de baza jQuery cu functii specifice plugin-ului. În acest fel libraria principala poate ocupa foarte putin spatiu, iar extensiile necesare in anumite pagini web pot fi incarcate la cerere, doar cand este nevoie de ele. Exista un set de extensii principal numit jQuery UI( jQuery User Interface). jQuery UI ofera un set de extensii pentru interactivitate de baza, efecte mai complexe decat cele din libraria de baza si teme de culori. Avantajul jQuery UI fata de alte extensii este ca dezvoltarea si testarea acestor componente se face in paralel cu dezvoltarea librariei principale, minimizand riscul de incomptibilitate.

3.Grafica

O interfața grafica moderna, usor de folosit și placuta, implementata intr-un site accesibil bazat pe un template preponderent orientat spre grafica, ofera vizitatorilor sai o mini-enciclopedie a celor patru capitale traversate de Dunare, cu informații legate de așezarea lor geografica, istoria orașelor, clima intalnita, economia și politica țarii, dezvoltarea turismului, etc sub forma unei structuri compacte de 16 articole și o galerie foto interactiva.

Imaginea intregului site se bazeaza pe doua clase de culori principale ce "poseda" diferitele variații colorative, tente, opalescente: albastru (#357eb7) si o serie de nuanțe de gri spre alb (#ccc - #fff) care impreuna cu fonturile prezente ale caror culoare alterneaza intre alb și gri inchis creeaza contraste ce asigura o lizibilitate sporita, mai ales pentru utilizatorii cu probleme de vedere.

Formate grafice pentru web

Exista o mulțime de formate grafice digitale: PNG, GIF, TIFF, EPS, BMP, PCX, JPEG și multe altele. Pentru ca WWW este un sistem compatibil cu toate platformele (sistemele de operare: Macintosh, Windows, Linux etc.) este necesar ca grafica utilizata pe web sa fie independenta de platforma. Formatul HTML in sine este independent de platforma pentru ca este un format simplu text. Formatele grafice care sunt independente de platforma și cele mai utilizate pe web sunt formatele GIF, JPG si PNG.

Format	Descriere
GIF	Formatul GIF (Graphics Interchange Format) comprima informația (reduce dimensiunea fișierului) și o traduce in cod binar pentru Internet. Compresia GIF este foarte buna pentru fisiere cu zone adiacente de aceeași culoare (in special pe orizontala).
JPG	Al doilea format grafic mult utilizat este JPG sau JPEG (Joint Photographic Engineering Group). Compresia JPG este foarte buna pentru imagini fotografice. Compresia poate fi extrem de mare dar scazand dimesiunea fișierului prin compresie se pierde din calitatea imaginii. Problema principala legata de grafica pe Internet este raportul dimensiune fisier - calitate imagine.
PNG	Folosit in special in paginile web, formatul PNG a devenit popular datorita dimensiunii mici a documentelor și a calitații superioare. Ar putea fi considerat versiunea finala a formatului GIF. Numarul de culori nu se pierde (24-bit) și in plus documentul conține informație pentru alpha channel (canalul de transparența), care permite o transparența mult mai fina.

Unde și cand trebuie utilizata grafica

Utilizarea unui numar mare de imgini, poate sa arate excelent pe un calculator de ultima generație cu o conexiune web de mare viteza, dar poate fi frustranta pentru utilizatorii cu resurse sarace. În funcție de conținut, de numarul de pagini și de complexitatea acestora, dimensiunea totala a fișierelor grafice ar trebui sa se limiteze la aproximativ 500kb, evident facand excepție site-urile cu caracter media și continut bogat in elemente grafice sau audio/video.

Instrumentele de analiza a traficului web și statisticile avansate ne ofera informații despre tendintele, comportamentul și resursele utilizatorilor web. Ca atare se cunoaște ca inca exista in general un numar ridicat de vizitatori care utilizeaza ecrane cu rezoluții de 1024x768 pixeli sau chiar mai putin. Este recomandat ca dimensiunile imaginilor sa fie medii pentru a preveni un display incorect, insa cu ajutorul tehnologiei CSS aceasta nu mai este o problema.

Includerea graficii in web

O imagine inline este o imagine care apare legata de text. Pentru introducerea unei astfel de imagini se utilizeaza tagul:

-unde filename.gif sau filename.jpg reprezinta numele și extensia fișierului care va fi afișat in text. Daca fișierul nu se gasește in același director cu fișierul HTML, este necesar sa fie data și calea catre fișier.

Se poate utiliza și tagul de aliniere fața de text cu urmatoarele efecte:

Aliniere in partea de sus

Aliniere la mijloc

Aliniere in partea de jos care este și default (implicita).

Unii utilizatori folosesc browsere text-only. Pentru ei este important ca tagul img sa cuprinda și atributul alt completat ca in exemplul de mai jos.

Folosind o imagine, drept fundal al layout-ului site-ului, s-au folosit unelte de adaugare și modificare a elementelor grafice in diferite alte documente grafice. S-au adaugat diferite imagini pentru compoziția finala a template-ului și text de diferite dimensiuni realizat de altfel tot in Photoshop CS4. Elementele cheie ale acestuia au fost cele 11 imagini din partea stanga a meniului vizual, titlul (header) și fundalurile pentru hyperlinkuri și cele 3 stari posibile definite de evenimentele active, hover, selected. În cazul celor din urma s-au folosit multiple layere in Photoshop pentru a usura calibrarea pozițiilor gradientelor. Layerele pot fi considerate un fel de straturi de adancime a imaginii, care desemneaza defapt ordinea de display a obiectelor de catre utilizator.

Acestea ajuta foarte mult un grafician deoarece ușureaza realizarea ideii artistice, un obiect putand fi mutat din loc, modificat, șters, amestecat, copiat, recolorat, alungit, ingustat, tot cu ajutorul efectelor și uneltelor oferite de firmele realizatoare a programelor de grafica bidimensionala.

Conținutul propriu-zis a fost adaugat ulterior intr-un alt element div (wrapper), fabricat ierarhic in interiorul wrapper-ului #content-wrapper.

Editorul de imagini este un program care permite design-ul documentelor grafice, salvarea acestora intr-un fișier, exportul in diferite formate, modificarea și tiparirea lui. Aceste programe opereaza in grafica de pixeli (bitmapped graphics) sau in grafica vectoriala (vector graphics).

Grafica bitmap

Programul Paint al sistemului Windows este o aplicație grafica simpla cu care se pot crea de la desene libere la diagrame matematice exacte, iar acestea pot fi utilizate in alte aplicații Windows, ca WordPad sau Office Word pentru Windows. Deoarece acesta este o aplicație grafica care se bazeaza pe pixeli (bitmap), formele create sunt desenate pe ecran intr-un singur strat. Nu se poate modifica forma unei casete și nu se poate muta un obiect in spatele altuia, dar se poate decupa o caseta și muta in alta parte sau se poate decupa desenul unei casete pentru ca apoi sa fie inclinat sau rasturnat, sau pentru a se schimba culorile desenului, aspecte care evidentiaza gradul de limitare a funcționalitații acestui program.

Efectele grafice posibile obținute cu aplicația Paint inclusa in orice pachet Microsoft Windows sunt:

Linii cu mai multe grosimi, umbre și culori

Trasaturi de penson intr-o varietate de stiluri, grosimi, umbre și culori

Forme goale sau umplute cu umbre sau culori

Text de mai multe dimensiuni, stiluri si culori

Efecte speciale precum rotirea, inclinarea și inversarea

Adobe Photoshop este unul din cele mai importante pachete de software pentru design, editare, manipulare, etc. El permite crearea unor ilustrații impresionante de o calitate profesionala. Din multe puncte de vedere este asemanator cu programele de proiectare asistata pe calculator (AutoCad) sau cu aplicația PhotoPaint de la Corel, care se aseamana cu programele de pictura (acestea folosesc grafica realizata prin puncte și dau iluzia picturii pe panza sau a lucrului cu pensonul). Pentru un artist, din punct de vedere al mediului de tiparire, programele bazate pe vectorizare, cum este CorelDRAW sunt de preferat celor ce realizeaza grafica prin puncte. Avantajele graficii vectorizate sunt precizia și flexibilitatea (lucrandu-se cu ecuații matematice se elimina dependența de dispozitivul de ieșire și de rezoluție).

Prin acest procedeu imaginea se realizeaza din puncte (pixeli), care de fapt sunt niște dreptunghiuri foarte mici. Pentru fiecare pixel al desenului se memoreaza informația binara a culorii și coordonatele aferente.

Un avantaj al acestei grafici este ca imaginea creata din puncte poate sa conțina foarte multe detalii, insa cand dimensiunea desenului se modifica el pierde din calitate. Marind foarte mult conturul desenului acesta apare in trepte (efectul "jagged edge" sau "pixelized"), iar daca se micșoreaza foarte mult punctele ajung sa se suprapuna.

Un alt dezavantaj al acestui tip de grafica este dimensiunea foarte mare a fișierului in care se memoreaza desenul. Cu cat desenul este mai mare cu atat el conține mai multe puncte pentru care trebuie sa se memoreze toate informațiile, iar cu cat se folosesc mai multe culori in realizarea desenului, cu atat sunt necesari mai mulți biți pentru memorarea culorii pentru fiecare pixel.

Exemplu: Daca se folosește o paleta de 16 (24) culori, pentru fiecare pixel din desen sunt necesari patru biți pentru culoare, iar daca se folosesțe o paleta de 256 (28) de culori sunt necesari opt biți de culoare. În al doilea exemplu, din cauza maririi numarului de culori, necesarul de suport pentru memorarea desenului se dubleaza.

Programul Paint, introdus in pachetul sistemului de operare Windows, incepand cu versiunile incipiente (3.1, 95, 98, etc) și pana in cadrul versiunilor de actualitate (XP, Vista, 7) opereaza pe grafica bitmap, cu ajutorul caruia se pot realiza urmatoarele operații:

Stabilirea dimensiunii desenului

Alegera culorii fondului și a culorii desenului

Construirea unei palete de culori

Alegerea și folosirea unor instrumente de desen :pensula, rola, etc..

Stabilirea caracteristicilor instrumentului folosit

Alegerea fontului, stilului și dimensiunii textelor inserate in desen

Efectuarea corecturilor in desen și a unor corecturi foarte fine, la nivel de pixel

Decuparea unor zone de desen și crearea unor efecte speciale cu aceste zone: rotire, aplecare, inversarea culorilor, redimensioanare, multiplicare

Copierea și mutarea zonei de desen decupate

Schimbul de informații cu alte aplicații prin intermediul memoriei Clipboard

Previzualizarea desenului

Tiparirea desenului sau a unei porțiuni de desen

Grafica vectoriala

În grafica computerizata, grafica vectoriala este un procedeu prin care imaginile sunt construite cu ajutorul descrierilor matematice prin care se determina pozitia, lungimea si directia liniilor folosite in desen. Imaginile vectoriale sunt complementare imaginilor bitmap, din grafica raster, in care imaginile sunt reprezentate ca un tablou de pixeli.

Una din aplicatiile populare de grafica vectoriala este Corel Photo-Paint. Aceasta este o aplicație care creaza și vizualizeaza imagini vectoriale conform tehnologiei aferente, permițand utilizatorului sa aplice efecte speciale imaginilor.

Prima etapa in utilizarea acestui program este stabilirea unei metode de captare a imaginii (prin scanner, prin Photo-CD).

Cu ajutorul meniului "Effects" putem conferi imaginilor efecte speciale (Artistic Pointilism - confera imaginii aspectul pointilist prin adaugarea de puncte, comanda Edge Emphasis accentueaza marginile desenului in diferite culori și forme, comanda Emboss scoate in relief, da o nuanța de relief imaginii, facand-o sa para tridimensionala, comanda Motion Blur - estompare prin mișcare, estompeaza imginea intr-o directie astfel incat pare ca imaginea se mișca in acea direcție, etc.

Deci folosind diversele instrumente din acest program putem modifica afișarea pe ecran, putem desena linii, curbe, poligoane, dreptunghiuri, elipse, putem adauga umpleri și retușuri de culoare, putem obține efecte spectaculoase pentru aceste imagini.

4.Realizarea Proiectului

Realizarea template-ului

În vederea realizarii template-ului au fost luate in considerare cele doua elemente fundamentale care il compun: partea de programare și partea grafica. Ambele au avut in aceeași masura un rol important care va fi descris in ansamblu in cele ce urmeaza.

Imaginea de mai sus reprezinta interfața site-ului obținuta prin eliminarea legaturilor catre fișierele externe (css și js) și are rolul de a evidenția impactul major adus de combinarea mai multor tehnologii pentru a oferi acel plus de dinamicitate si interactivitate atat de necesar standardelor web actuale iar secvența de cod responsabila pentru crearea legaturilor externe din antetul paginii este urmatoarea:

$(document).ready(function() );

</script>

Imaginea de mai sus reprezinta aceeasi pagina (index.html) careia insa i-a fost adaugata referinta catre fisierul de stiluri, template.css.

În continuare s-a mers pe ideea ca amplasarea centrala a conținutului ar impune o alura egocentrista care ar concentra atenția punand in evidența conținutul web, motiv pentru care chiar insași imaginea din fundal se intinde pe toata lungimea ecranului incadrand ambient conținutul și oferind un aspect estetic placut.

Folosind tehnologiile web de actualitate a fost posibila realizarea unui template care sa ofere mai multa flexibilitate in ceea ce privește funcționalitațile site-ului fața de cunoscutele designe-uri clasice bazate pe frame-uri și alte elemente html depașite, limitate prin imposibilitatea alterarii proprietaților native din exterior.

Pentru obținerea unui layout funcțional și placut din punct de vedere estetic s-a lucrat in paralel atat la partea grafica, cat și la cea de programare (xhtml/css/js). Primul pas a constat in crearea structurii de blocuri DIV care sa conțina diferitele elemente ale site-ului.

Se poate observa deja un aspect al acestei tehnici diferite, care consta in modularizarea conținutului, prin incapsularea lui in blocuri multiple ale caror poziții și dimensiuni se pasteraza in unul sau mai multe fișiere css asupra carora se poate interveni ulterior cu modificari. Avantajul principal este dat chiar de structura centralizata a codului care permite efectuarea de modificari intr-un singur loc și afectarea automata a mai multor elemente.

Referintele catre diferitele elemente html se pot face prin selectori css, fie nativi (body, div, p, span, ul, etc) fie prin clase sau id-uri (#main-block-id, .cell-head, etc), cu posibilitatea imbricarii și ierarhizarii lor in scopul folosirii proprietații de moștenire a atributelor css.

Pe acest concept se bazeaza referințele de genul: #main-block span, sau #main-block .cell-head p:first care permit afectarea mai multor elemente in același timp prin setarea unor atribute locale sau globale.

În cazul de fața, s-au folosit patru zone principale de conținut: titlul impreuna cu meniul din partea superioara (#top-menu), o zona de conținut grafic static (#mid-area), zona de conținut dinamic (#content) și subsolul paginii (#footer). Fiecare dintre aceste elemente div, sunt incapsulate in cate un bloc de timp container sau wrapper (.container in cazul de fața) care proprietați de baza cum ar fi dimensiunea, poziția și fontul folosit, proprietați care sunt moștenite implicit de elementele inferioare, cu excepția celor care au oricare din aceste proprietați definite local, metoda cunoscuta sub numele de override.

Pana acum avem un bloc centrat pe orizontala pentru a menține aspectul independent de rezoluția folosita. În interiorul sau se vor afla alte blocuri care vor constitui la final o structura solida in care se poate introduce conținutul.

Blocul #top-menu ocupa 50px pe verticala din spațiul paginii și se afla la 101px dedesubtul marginii superioare a acesteia. Astfel am obținut practic o zona de 151px rezervata pentru meniu in orice situație in partea de sus.

În continuarea acestuia, blocul #mid-area are o inalțime de 150px și ca fundal i-a fost atribuita o imagine de 1300px in lungime (bg-mid.png) pentru a asigura o incadrare completa. În cadrul acestui element a mai fost inserata o imagine (text-mid.png) care reprezinta textul din acest bloc. Urmatorul div, #content este cel mai important deoarece acesta va fi folosit pentru incarcarea dinamica a conținutului in funcție de linkurile accesate. Cu o inalțime variabila (auto), acesta se va redimensiona pe verticala in mod automat in funcție de cantitatea de conținut. Prima pagina conține de altfel un numar de patru blocuri care reprezinta secțiunile principale ale site-ului, motiv pentru care au fost declarate și cateva clase pentru controlul aspectului lor (.box, .box .tab, .box .tab-content).

Ultimul bloc declarat, #footer, va fi chiar subsolul paginii, și va contine date despre autor și proiect, cat și un meniu simplu text-based ca unealta auxiliara de navigare care conține totalitatea subsecțiunilor și un preview al secțiunilor Galerie foto și Linkuri. În acest punct structura template-ului este finalizata și mai necesita doar insistența asupra detaliilor estetice (ajustarea marginilor, bordurilor, adaugarea de fundaluri, setarea culorilor pentru text și alte elemente html care urmeaza sa fie adaugate) și adaugarea propriu-zisa a conținului. Pentru acestea a fost declarat blocul .container care conține atributele necesare setarii familiei de fonturi și dimensiunea globala de 900px a conținului care trebuie centrat.

Îmainte de elaborarea sistemului de navigare au fost adaugate cateva elemente esentiale in blocul #top-menu dar și in #footer care sa poata permite navigarea, și anume elemente ancora (anchor) sau hyperlinkuri. Acestea insa sunt folosite diferit fața de cele tradiționale, fapt evidențiat și de valoarea # a parametrului href care practic anuleaza efectul linkului sau in anumite cazuri are ca efect derularea paginii in partea superioara.

Elaborarea sistemului de navigare

În momentul de fața structura css este pregatita și exista cateva hyperlinkuri intr-unul din blocurile create. Noutatea acestui sistem consta in preincarcarea conținutului inainte de incarcarea DOM-ului (Document Object Model) folosind cateva funcții js (JavaScript) din cadrul platformei jQuery.

Se observa ca blocul #content este practic gol, exceptand container-ul destinat centrarii conținutului. Elementul cheie al sistemului consta in asignarea de clase și id-uri elementelor ancora și atribuirea de evenimente js pe baza lor.

$('.home, .viena, .bratislava, .budapesta, .belgrad, .galerie, .linkuri').click(function()

function showNewContent() loadContent();

Secvența de cod prezentata reprezinta una din funcțiile js din cadrul sistemului. Spre exemplu, in cazul de fața, clasele linkurilor sunt identice cu numele fișierelor html care le corespund și prin accesarea lor se apeleaza o funcție care preincarca acele fișiere și le afiseaza in div-ul #content dupa o animație cu durata stabilita la 100ms, timp suficient pentru o incarcare rapida și o navigare fluenta.

Așadar, printre avantajele acestui sistem se numara viteza sporita de incarcare, structurarea optima a codului sursa și automatizarea navigarii, dinamicitatea sporita data de animațiile de tranziție intre linkuri și modularizarea acestora.

Adaugarea conținutului

Pe baza descrierii precedente a sistemului de navigare se mai poate mentiona doar ca au fost create documentele html aferente linkurilor al caror nume sa coincida cu clasele sau id-urle linkurilor și ca acestea nu necesita in mod obligatoriu o structura de cod xhtml valida deoarece conținutul lor este practic inglobat in blocul de incarcare dinamica și acela face parte dintr-un document complet.

Singura excepție a facut-o pagina secțiunii Galerie foto in care imaginile inserate trebuiau sa reactioneze la evenimentul onClick prin plugin-ul Lightbox al platformei jQuery. Din acest motiv, documentul html conține constructorul lightbox in antet, caz pentru care a trebuit definit intregul header xhtml dupa standardele valide.

Ultimele ajustari și testarea

Pagina a fost conceputa atat in coordonate absolute cat și relative pentru a diminua probabilitatea alterarii display-ului in cazul folosirii unor rezoluții a monitorului diferite de cea recomandata și datorita faptului ca elementele grafice nu au aceleași proprietați care sa asigure stuctura compacta in orice situație.

Prin urmare dezvoltarea template-ului s-a realizat dupa tehnica descrisa anterior care consta in structurarea conținutului pe un sistem de elemente div imbricate (wrapper sau container) ale caror proprietați se moștenesc ierarhic, și definirea acestora prin operatori și selectori css atașați documentului html ca referința.

Datorita multitudinii de browsere existente și stadiile aferente de compatibilitate cu standardele internaționale W3, au fost necesare cateva modificari in cadrul fișierului principal css pentru evitarea unui display eronat și garantarea unui aspect cat se poate de apropiat de cel original, independent de browser-ul folosit și de rezoluția monitorului. În aceasta etapa, site-ul a fost testat pe rezoluții cuprinse intre 1024x768px și 1600x1200px, pe platformele Internet Explorer 7, 8, Opera 10, Mozilla Firefix 3.6, Google Chrome, Safari oferind rezultate mai mult decat satisfacatoare.

5.Aplicatii Software

Adobe Photoshop CS4

Adobe Photoshop este un software folosit pentru editarea imaginilor digitale pe calculator, program produs și distribuit de compania americana Adobe Systems si care se adreseaza in special profesionistilor domeniului.

Adobe Photoshop, asa cum este cunoscut astazi, este varful de lance al gamei de produse software pentru editare de imagini digitale, fotografii, grafica pentru tipar, video si Web de pe piata. Photoshop este un program cu o interfata intuitiva si care permite o multitudine extraordinara de modificari necesare in mod curent profesionistilor si nu numai: editari de luminozitate si contrast, culoare, focalizare, aplicare de efecte pe imagine sau pe zone (selectii), retusare de imagini degradate, numar arbitrar de canale de culoare, suport de canale de culoare pe 8, 16 sau 32 biti, efecte third-party etc. Exista situatii specifice pentru un profesionist in domeniu cand alte pachete duc la rezultate mai rapide, insa pentru prelucrari generale de imagine, intrucat furnizeaza instrumente solide, la standard industrial, Photoshop este efectiv indispensabil.

Alaturi de aplicatia Photoshop (ajuns la versiunea CS4), este inclusa si aplicatia ImageReady, cu un impresionant set de instrumente Web pentru optimizarea si previzualizarea imaginilor (dinamice sau statice), prelucrarea pachetelor de imagini cu ajutorul sistemului droplets-uri (mini-programe de tip drag and drop) si realizarea imaginilor rollover (imagini ce isi schimba aspectul la trecerea cu mouse-ul peste), precum si pentru realizarea de GIF-uri animate.

Principalele elemente prin care Photshop se diferentiaza de aplicatiile concurente si prin care stabileste noi standarde in industria prelucrarii de imagini digitale sunt:

Selectiile

Straturile (Layers)

Mastile (Masks)

Canalele (Channels)

Retusarea

Optimizarea imaginilor pentru Web

Photoshop poate citi majoritatea fisierelor raster si vector. De asemenea, are o serie de formate proprii:

PSD (abreviere pentru Photoshop Document). Acest format contine o imagine ca un set de straturi (Layers), incluzand text, masti (mask), informatii despre opacitate, moduri de combinare (blend mode), canale de culoare, canale alfa (alpha), cai de taiere (clipping path), setari duotone precum si alte elemente specifice Photoshop. Acesta este un format popular si des raspandit in randul profesionistilor, astfel ca este compatibil si cu unele aplicatii concurente Photoshop.

PSB (denumit Large Document Format) este o versiune mai noua a formatului PSD, conceput special pentru fisiere mai mari (2GB) sau cu o informatie prezenta pe o suprafata definita de laturi mai mari de 30.000 de pixeli (suporta pana la 300.000x300.000 pixeli).

PDD este un format mai putin intalnit, fiind asociat initial aplicatiei Adobe PhotoDeluxe, astazi (dupa 2002) compatibil doar cu aplicatiile Adobe Photoshop sau Adobe Photoshop Elements.

Adobe Dreamweaver CS4

Adobe Dreamweaver este o unealta destinata creatorilor de pagini web. Dreamweaver a fost creat de Macromedia (acum Adobe Systems) si momentan a ajuns la versiunea 10. Primele versiuni ale produsului serveau doar ca simple editoare HTML de tipul WYSIWYG dar in versiunile recente au fost implementate functii de editare avansate si support pentru alte tehnologii web cum ar fi CSS, JavaScript etc.

Dreamweaver s-a bucurat de un larg succes inca de la sfarsitul anilor '90 si momentan detine aproximativ 80% din piata editoarelor HTML. Produsul poate fi rulat pe variate platforme software: Mac, Windows, dar suporta in acelasi timp si 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, facand astfel posibila crearea cu usurinta a paginilor web de catre utilizatorii neexperimentati.

Unii creatori de pagini web critica aceste tipuri de editoare deoarece produc pagini de dimensiuni mult mai mari decat ar fi necesar, ceea ce conduce la o functionare neperformanta a browserelor web. Aceasta afirmatie este in mare parte adevarata deoarece paginile web produse folosesc design-ul pe baza de tabel. În plus, produsul a mai fost criticat in trecut si pentru producerea de coduri care adesea nu erau conform standardelor W3C, dar acest aspect a fost mult imbunatatit in versiunile recente. Cu toate acestea, Macromedia a crescut suportul pentru tehnologia CSS precum si alte modalitati de design fara a fi necesara folosirea design-ului pe baza de tabel.

Dreamweaver permite folosirea majoritatii browserelor instalate pe calculatorul utilizatorului, pentru a previzualiza website-ul creat. De asemenea contine si cateva utilitare pentru administrarea site-urilor, cum ar fi cele pentru a gasi si modifica un paragraf sau o linie de cod, in intregul web site, pe baza oricaror parametri specificati de catre utilizator. Cu ajutorul panourilor de stare se poate crea cod JavaScript fara a avea cunostiinte de programare.

Odata cu aparitia versiunii MX, Macromedia a incorporat utilitare de generare dinamica a continutului. De asemenea este oferit suport pentru conectarea la baze de date (cum ar fi MySQL si Microsoft Access) pentru a filtra si afisa continutul folosind script-uri de genul PHP, ColdFusion, Active Server Pages (ASP) si ASP.NET, fara a avea nevoie de o prealabila experienta in programare.

Un aspect foarte laudat al Dreamweaver-ului il reprezinta arhitectura sa extensibila. Extensiile, asa cum sunt ele cunoscute, sunt mici programe, pe care orice dezvoltator le poate scrie (de obicei in HTML si JavaScript) si pe care oricine le poate descarca si instala, acestea aducand un spor de performanta si functionalitate imbunatatita programului. Exista o comunitate de dezvoltatori care produc aceste extensii si le publica (atat comercial cat si gratuit) pentru probleme de dezvoltare web, de la simple efecte rollover pana la solutii complete de vanzare online.

6.Anexe

Coduri sursa - Secventa

index.html

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>

<head>

<title>Capitale Dunarene - Milioane de oameni depinzand de o apa</title>

$(document).ready(function() );

</script>

</head>

<body>

</div>

<a href='#' class='viena'>Viena</a>

<a href='#' class='bratislava'>Bratislava</a>

<a href='#' class='budapesta'>Budapesta</a>

<a href='#' class='belgrad'>Belgrad</a>

<a href='#' class='galerie'>Galerie foto</a>

<a href='#' class='linkuri'>Linkuri</a>

</div>

</div>

</div>

<tr>

<table>

Liceul Teoretic 'Mihai Eminescu' Petrosani</td></tr></table>

<tr>

<h3>Viena</h3>

<ul>

<li class='viena'>Geografie</li>

<li class='viena'>Localizare</li>

<li class='viena'>Peisaj</li>

<li class='viena'>Clima</li>

</ul>

</td>

<h3>Bratislava</h3>

<ul>

<li class='bratislava'>Geografie</li>

<li class='bratislava'>Clima</li>

<li class='bratislava'>Istorie</li>

</ul>

</td>

<h3>Budapesta</h3>

<ul>

<li class='budapesta'>Geografie</li>

<li class='budapesta'>Clima</li>

<li class='budapesta'>Istorie</li>

<li class='budapesta'>Stema</li>

</ul>

</td>

<h3>Belgrad</h3>

<ul>

<li class='belgrad'>Geografie</li>

<li class='belgrad'>Demografie</li>

<li class='belgrad'>Sport</li>

<li class='belgrad'>Turism</li>

</ul>

</td>

</tr></table>

</td>

<h3>Galerie foto</h3>

</tr>

</table>

<h3>Linkuri</h3>

<ul>

<li class='linkuri'><a href='#'>https://visit.bratislava.sk/en/</a></li>

<li class='linkuri'><a href='#'>https://www.bratislavaguide.com/</a></li>

<li class='linkuri'><a href='#'>https://www.bratislava.mae.ro/</a></li>

<li class='linkuri'><a href='#'>https://www.slovakia.org/</a></li>

</ul>

</td></tr></table>

</div>

</body>

</html>

template.css

@charset 'utf-8';

/* #357eb7 : PRIMARY blue */

body

h1,h2,h3,h4

#top-menu

#mid-area

#content

#footer

#content .box

#content .box .tab

#content .box .tab-content

#content .box .tab-content:hover

#content .box .tab-content img

#content .box .tab-content p

#content .box .tab-content a

#content .box .tab-content a:hover

#viena

#bratislava

#budapesta

#belgrad

.container

#top-menu .container a

#top-menu .container a:hover, #top-menu .container .selected

.column-table

.column-table td

.internal, .gallery-table

.internal td

.gallery-table tr

#footer h3

#footer ul, #footer p, #footer ul a

#footer li

#footer li:hover

.inline-tb

.tb-active

.tb-active:hover

.gallery-table-footer .tb-active

.gallery-table-footer .tb-active:hover

.gallery-row

.gallery-row h3

.gallery-row h3 img

navigation.js

$(document).ready(function()

function showNewContent() loadContent();

$('.home, .viena, .bratislava, .budapesta, .belgrad, .galerie, .linkuri').click(function()

function showNewContent() loadContent();

});

galerie.html

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>

<head>

</head>

<body>

$(document).ready(function() );

</script>

<tr>

<td width='80%' class='gallery-row'><h3>Viena <img src='images/right-arrow.png' /></h3></td>

</tr>

<tr>

<td width='80%' class='gallery-row'><h3>Bratislava <img src='images/right-arrow.png' /></h3></td>

</tr><tr>

<td width='80%' class='gallery-row'><h3>Budapesta <img src='images/right-arrow.png' /></h3></td>

</tr><tr>

<td width='80%' class='gallery-row'><h3>Belgrad <img src='images/right-arrow.png' /></h3></td>

</tr></table>

</body>

</html>+

home.html

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>

<head>

</head>

<body>

$(document).ready(function()

function showNewContent() loadContent();

});

</script>

<h2>Viena</h2><h3>Austria</h3>

<p>

Situata pe Dunare, la poalele masivului muntos Padurea Vieneza (Wienerwald), capitala Austriei are o suprafata de 414 km² si o populatie de 1.580.600 locuitori.

<a href='#' class='viena'>mai multe »</a>

</p>

</div></div>

<h2>Bratislava</h2><h3>Slovacia</h3>

<p>Bratislava este cel mai mare oras al Slovaciei. Traversata de Dunare, capitala este un activ port fluvial si, in acelasi timp, cel mai industrializat oras slovac. <a href='#' class='bratislava'>mai multe »</a></p>

</div></div>

<h2>Budapesta</h2><h3>Ungaria</h3>

<p>Nici un alt oras maghiar nu este atat de vechi, de frumos sau de interesant ca Budapesta. Orasul este situat in partea de nord a tarii, pe ambele maluri ale Dunarii. <a href='#' class='budapesta'>mai multe »</a></p>

</div></div>

<h2>Belgrad</h2><h3>Serbia-Muntenegru</h3>

<p>Belgrad sau 'Orasul Alb', a fost distrus si refacut de 30 de ori de-a lungul istoriei. Este cel mai mare oras industrial si port fluvial al Serbiei-Muntenegru. <a href='#' class='belgrad'>mai multe »</a></p>

</div></div>

<tr>

<td style='width:430px'><h2>Capitale dunarene</h2><h3>Milioane de oameni depinzand de o apa</h3>

<p>Dunarea reprezinta o componenta geografica si geopolitica importanta a Europei. Izvoraste din Muntii Padurea Neagra (Germania) si strabate Europa Centrala aproximativ pe directia vest-est, varsandu-se in Marea Neagra prin trei brate intre care s-a format cea mai interesanta delta de pe continent.</p>

<p>De-a lungul cursului (2 862 km), Dunarea strabate 10 tari (Germania, Austria, Slovacia, Ungaria, Croatia, Iugoslavia, Romania, Bulgaria, Moldova si Ucraina) si patru capitale (Viena, Bratislava, Budapesta si Belgrad), fiind cel mai important fluviu international din Europa. Este al doilea fluviu din Europa si al 25-lea din lume. Primeste numerosi afluenti, cei mai importanti fiind: Inn, Sava, Tisa, Siret. Cantitatea mare de aluviuni transportata de fluviu face ca delta sa inainteze in mare, in medie, cu 30 mm anual. Din cauza climatului temperat continental, debitul Dunarii variaza, fiind mai mare primavara si mai mic toamna.</p>

</td>

<td>

<p>Apele Dunarii sunt folosite pentru irigatii si pentru obtinerea energiei electrice. Cele mai mari hidrocentrale sunt la Portile de Fier (construita de Romania in colaborare cu Iugoslavia) si la Gabcikovo (Slovacia). Poluarea din ce in ce mai mare pune in pericol calitatea apelor Dunarii si poate duce la disparitia unor specii de plante si animale.</p>

<p>Pe teritoriul tarii noastre se desfasoara cursul inferior al fluviului (1 075 km, reprezentand 38% din lungimea totala), intre Bazias si varsarea in Marea Neagra. In spatiul romanesc, Dunarea cuprinde o succesiune de patru sectoare distincte: sectorul Bazias - Portile de Fier (Defileul Dunarii); sectorul Portile de Fier-Calarasi; sectorul Calarasi - Braila si Braila - Marea Neagra (Dunarea maritima).</p>

<p>Intre Calarasi si confluenta cu Prutul, Dunarea curge numai pe teritoriul Romaniei. Prin intermediul Dunarii, tara noastra are posibilitatea efectuarii de contacte economice cu statele din centrul si vestul Europei prin Canalul Dunare-Main-Rin realizandu-se legatura intre Marea Neagra si Marea Nordului. Pentru scurtarea cu aproape 400 de km a navigatiei pe fluviu s-a construit Canalul Dunare- Marea Neagra (64,2 km) intre Cernavoda si Constanta Sud-Agigea, cu o ramificatie intre Poarta Alba si Midia Navodari.</p>

</td>

</tr>

</table>

</body>

</html>

Screenshots

7.Concluzii:

Tema aleasa vizeaza in special oanenii pasionati de turism dar in acelasi timp poate fi vorba si despre oamenii care traiesc in orasele strabatute de acest fluviu. Dunarea este unul dintre cele mai importante fluvii ale Europei care curge prin 10 tari si patru capitale de stat: Viena Bratislava Budapesta si Belgrad

Mi-am ales aceasta tema (,,Capitale dunarene" ) deoarece sunt milioane de oameni care depind de acest fluviu si profita de beneficiile pe care acesta le aduce locuitorilor din orasele pe care le strabate.

Resursele Dunarii sunt:

- potentialul hidroenergetic;

- apa industriala;

- apa pentru irigatii;

- fauna piscicola;

- unele resurse secundare (nisip, lemn de esente moi, stuf etc.);

- posibilitatile de navigatie;

- potentialul turistic;

Pe ansamblu, Dunarea are o importanta deosebita pentru tarile prin care trece, fiind axa de legatura intre cele patru capitale si tarile pe care le strabate.

CAPITALE DUNARENE

Milioane de oameni depinzand de o apa

8.Bibliografie:

https://www.preferatele.com/c_capitale_europene_dunarene_113ef.html

https://chisinau.ch/load/software/revista_arborele_lumii_900_pagini/6-1-0-6985

https://terramagazin.ro/

https://ro.wikipedia.org/wiki/Dreamweaver

https://www.adobe.com/products/flashplayer/

https://ro.wikipedia.org/wiki/Macromedia

Politica de confidentialitate