Site-uri dinamice DHTML

Site-uri dinamice DHTML

Dynamic HTML, JavaScript si Java sunt tehnologii avansate pe care autorii de pagini Web le pot folosi pentru a furniza capacitati dinamice informatiilor pe Internet. Din punctul de vedere al utilizatorului, aceste tehnologii sunt transparente, construite in sistemul de serveri Internet, in aplicatii si in continut. Fiecare dintre aceste tehnologii ofera capacitati de conectivitate ce le permit sa comunice si sa interactioneze unele cu altele. Ele sunt construite sau pot fi adaugate (cum ar fi plug-inurile) in mediul client de navigare.

Fata de HTML, aceste tehnologii au avantajul de a raspunde mai repede si mai eficient la evenimentele declansate de utilizator si pot genera animatie si interactivitate.

Dynamic HTML este un set de tehnologii ce furnizeaza utilizatorului pagini multimedia mai bogate, mai rapide si mai interactive, ce se pot schimba dinamic si determina efecte vizuale sau sonore. De asemenea, aceste tehnologii ofera autorilor de pagini Web un control mai precis asupra stilurilor, pozitiilor si actiunilor obiectelor HTML ce construiesc pagina.

DHTML (Dynamic HTML) este considerat ca o tehnologie si ca un limbaj, dar si ca o colectie de caracteristici browser. DHTML este din punctul de vedere al conceperii sale o combinatie intre HTML si JavaScript sau un alt limbaj de programare Web. El se prezinta ca o combinatie de caracteristici incluse unui browser ce permite ca paginile Web sa fie redate in mod dinamic. Prin dynamic este definita abilitatea unui browser de a altera aspectul si stilul unei pagini Web dupa ce aceasta a fost incarcata.

O pagina HTML este construita dintr-o serie de obiecte denumite elemente ca: titluri, paragrafe de text si imagini sau componente mai complicate, cum ar fi: campuri formular, tabele cu randuri si celule. In HTML nu se pot accesa proprietatile si evenimentele de pe obiecte si numai anumite elemente pot fi programate. Cu Dynamic HTML se poate accesa si manevra orice element de pe pagina Web, ea fiind tratata mai mult ca un formular, adica se poate scrie cod sau script ce executa actiuni cu orice obiect.

O problema este aceea ca tehnologia DHTML este diferit implementata de la un browser la altul, de la o versiune la alta a unui browser. In prezent, scrierea unui cod unic DHTML pentru ambele browsere, Internet Explorer si Netscape Navigator, nu este posibila. Mai mult, cele doua browsere principale au niveluri diferite de dezvoltare a DHTML. DHTML Netscape    este legat de notiunea de layer, cunoscuta si ca Cascading Style Sheet Positioning (CSSP). La Internet Explorer se furnizeaza utilizatorilor un suport DHTML complex, unde mai multe obiecte pe pagina sunt manevrabile, precum si suport pentru pozitionare CSSP.

In viziunea DHTML, orice element al paginii HTML se trateaza ca un element de formular pentru care se poate scrie un script, se pot executa actiuni si declansa evenimente. De asemenea, in DHTML, pagina este gandita din blocuri de continut definite intre etichetele <DIV> si </DIV> pentru Internet Explorer sau <LAYER> si </LAYER> pentru Netscape Navigator. Blocurile de continut sunt caracterizate de proprietati de afisare, date printr-o foaie de stil si descrise de atributele STYLE, modificabile in orice moment printr-un script.

Dynamic HTML este o extensie HTML ce permite crearea de pagini Web care isi actualizeaza dinamic continutul si care interactioneaza cu utilizatorul fara a se baza pe script-uri sau pe procese executate la server.

Caracteristicile tehnologiei Dynamic HTML sunt implementate in paginile Web prin:

- Prezentarea elementelor si modificari de stil, adica alterarea on-the-fly a esteticii continutului paginii. Elementele paginii actioneaza ca blocuri de continut.

Pozitionarea dinamica, mai precis plasarea blocurilor de continut pe pagina si, la dorinta utilizatorului, mutarea acestora.

- Construirea si manevrarea evenimentelor, adica legarea evenimentelor utilizator de modificarile de pozitionare sau de stil.

1 Stilurile dinamice (Dynamic Styles

Initial, HTML-ul a fost creat pentru a separa structura si continutul unei pagini Web de prezentarea sa. De aceea, codul HTML ce defineste continutul si structura paginii nu defineste si aparitia fizica a elementelor pe pagina. Modalitatea in care utilizatorii pot controla formatarea paginii este printr-o serie de etichete separate ca <B> sau <I> si printr-o varietate de atribute ce controleaza stilul si dimensiunea fontului.

Cu Dynamic HTML, formatarea elementelor paginii HTML se face prin cascading style sheets (CSS). Codul ce controleaza aparitia si aspectul elementelor paginii este stocat intr-o foaie de stil (style sheet) care este tinuta separat de codul HTML. Foaia de stil se defineste ca o colectie de proprietati ce controleaza aparitia elementelor pe o pagina Web. Ea poate aplica un stil la un grup de elemente sau numai la unul singur ori se pot aplica stiluri multiple fiecarui element din pagina.

Avantajul folosirii foii de stil este acela ca se pot face usor modificari la o aparitie a paginii, fara a scrie cod. Astfel, se poate modifica o singura caracteristica in foaia de stil (cum ar fi cresterea dimensiunii unui font), iar aceasta modificare se va reflecta in mai multe locatii din pagina sau din mai multe pagini. Pentru aceasta, este preferabil sa se stocheze si sa se foloseasca informatii de stil dintr-o foaie de stil globala sau legata.

2 Folosirea foii de stil CSS in Dreamweaver

Un stil este definit ca un grup de atribute de formatare ce controleaza aparitia unui element intr-un singur document. O foaie de stil CSS (Cascading Style Sheet) poate fi folosita pentru a controla mai multe documente deodata si include toate stilurile dintr-un document. Avantajul folosirii foii de stil CSS peste un stil HTML este acela ca poate fi utilizata in mai multe documente deodata, iar cand un stil CSS este actualizat sau modificat, se vor actualiza sau modifica automat toate documentele in care este intrebuintat. Tehnica de lucru cu foaia de stil este foarte eficienta in cazul site-urilor mari, cu multe pagini, fonturi si titluri, care se vor modifica rapid si complet. In plus, stilurile CSS permit controlul a mai multor proprietati deodata, imposibil de realizat doar cu HTML.

Stilurile CSS sunt legate de capacitatile browserelor. Aceasta caracteristica DHTML este acceptata incepand cu generatia a 4-a de browsere.

Stilurile CSS sunt identificate de nume care se pune si in etichetele HTML. Modificarea unui atribut al unui stil determina modificarea instantanee in toate locurile unde se aplica stilul. Pentru texte, stilurile CSS din documentele HTML pot controla atribute comune de formatare a textului cum ar fi: fontul, corpul si aliniamentul, dar si atribute unice ca: pozitionarea, efectele speciale sau mouse rollovers.

Foile de stil CSS se regasesc in zona head a documentului si pot defini atribute de formatare pentru etichete HTML, pentru domenii de text identificate printr-un atribut class si pentru texte ce se supun unui anumit criteriu, conform specificatiei CSS.

Foaia de stil compusa din stiluri diferite se poate crea, edita, lega, duplica sau sterge. Pentru a putea fi vazute de browser, stilurile CSS trebuie convertite la etichete HTML insa nu toate stilurile se pot converti. De aceea, foaia de stil CSS se poate folosi si pentru a seta formatul sau stilul etichetelor HTML.

Eticheta <style> este un element container ce descrie regulile foii de stil si se foloseste numai in cadrul etichetelor <head> si </head>. Se pot introduce mai multe elemente STYLE intr-un element <head>. Elementul STYLE creeaza regulile foii de stil, conform sintaxei:

<style type = "text/css" >

<

>

</style>

Atributul type arata browserului ce sintaxa style sheet sa foloseasca pentru a interpreta regulile foii de stil. Stilurile descrise in etichetele <style> si </style> sunt apelate intre etichetele span, div sau p

Specificatia CSS1 (Cascading Style Sheets), controlata de World Wide Web Consortium, defineste proprietatile stil CSS (ca de exemplu, font, culoare, margine, spatiere) pentru a controla aparitia elementelor paginii Web. Folosind Internet Explorer de generatie 4.0 sau mai mare si un limbaj script ca JavaScript sau VBScript se pot modifica pozitionarea si proprietatile stil CSS ale elementelor paginii, dupa ce aceasta a fost incarcata. In Netscape Navigator 4.0 sau versiune mai mare nu se pot modifica proprietatile stil CSS dupa ce pagina a fost incarcata, dar se pot modifica proprietatile de pozitionare.

O foaie de stil externa CSS este un fisier text ce contine stiluri si specificatii de formatare, salvate intr-un fisier de extensie .CSS (CLASS). Cand se editeaza o foaie de stil externa, toate documentele legate la aceasta foaie de stil sunt actualizate pentru a reflecta aceste modificari. Stilurile CSS gasite intr-un document se pot exporta pentru a crea o noua foaie de stil. Foaia de stil externa poate fi atasata sau legata pentru a aplica stilurile gasite aici. In Dreamweaver, se foloseste o foaie de stil externa, legata, denumita help.css, ce poate fi citita intr-un editor de text.

Editarea unei foi de stil CSS ce controleaza text dintr-un document, va reformata automat toate textele controlate de ea, inclusiv alte documente legate la foaia de stil.

Crearea unei foi de stil se face pentru a formata automat etichete HTML sau un domeniu de text identificat de atributul class. Setarile de stil se pot face asupra tipului, background-ului, blocului de text, conturului, listei, pozitionarii textului. Cand se creeaza un stil obisnuit (class), el va apare in panoul stilurilor CSS. Stilurile etichetelor HTML si stilurile selector CSS nu apar in panoul de stiluri deoarece ele nu pot fi aplicate. Ele sunt reflectate automat in fereastra document de cate ori se produc etichetele sau conditiile de selectie.

Anumite caractersitici ale DHTML permit controlul detaliat asupra pozitiei si comportamentului elementelor dintr-o pagina Web. Astfel, se poate controla pozitia obiectului, se poate lucra cu efecte speciale, cum ar fi: animatia, tranzitiile si filtrele si se poate face redimensionarea automata a acestuia. Browserii introduc caracteristici importante DHTML pentru redarea paginilor Web.

Tranzitiile sunt efecte speciale care pot fi aplicate cand se modifica afisarea unui element; de exemplu, trecerea de la o imagine la alta. Sunt suportate atat tranzitiile dintre pagini, cat si tranzitiile anumitor elemente intr-o pagina, cum ar fi filtrul Alpha pentru opacizarea imaginii, filtrul blur pentru incetosarea partiala, filtrul basicImage pentru realizarea unui negativ sau convertirea in tonuri de gri, filtrele Wave, DropShadow, Glow, chroma, Light. Filtrele pentru texte privesc efectele de tranzitie sau de animatie. Aceste efecte se gasesc intr-un numar foarte mare in biblioteci free la adrese de pe Web.

3 Layer-ul

DHTML implementeaza pentru pozitionarea continutului pe paginile Web notiunea de layere. Un layer este un container ce contine elemente HTML, creat pentru a permite generarea paginii Web in mod asemanator cu pagina imprimabila. Prin intermediul lui se asigura control si flexibilitate in pagina dinamica. Layer-ele se pot suprapune, se pot ascunde in vizualizare sau se pot deplasa pe ecran de-a lungul unei axe timeline. Aceste containere nu pot fi vizualizate in browsere de generatie mai mica de 4.0 si uneori chiar si acestia le prezinta dezavantajos. De aceea, in pozitionarea elementelor se folosesc layere in combinatie cu tabele, adica se proiecteaza pagina folosind layere si apoi, acestea se convertesc in tabele.

La inserarea layer-elor in pagina HTML sunt aplicate patru categorii de etichete: <div> <span> <layer> si <ilayer>. Etichetele <div> si <span> sunt cele mai folosite si recomandate prin posibilitatile de a afisa layere atat in Internet Explorer 4.0, cat si in Netscape Navigator 4.0. Numai versiunile mai mari de Netscape Navigator 4.0 suporta layere create cu etichetele <layer> si <ilayer> Versiunile precedente ale acestor browsere afiseaza continutul layer-ului, dar nu si pozitionarea sa.

Etichetele <layer> se fixeaza in cadrul subdiviziunii <body>, chiar de la inceputul paginii. Iata cateva exemple de layere simple create in Dreamweaver prin eticheta <div>:

<div id='Layer1' style=' visibility:inherit;
width:200px; height:115px; z-index:1'>
</div>

In cadrul paginii HTML, layer-ele pot fi selectate, redimensionate, activate pentru a plasa continut in ele si apoi deplasate, pozitionate sau suprapuse. In redimensionarea layer-ului se va modifica latimea si inaltimea sa, dar nu se va specifica cat de mult din continutul sau va fi vizualizat. Activarea layer-ului tine de atasarea unui continut.

Pentru a facilita pozitionarea dinamica a layer-ului in pagina si a elementelor in cadrul lui se folosesc proprietati redate ca atribute ale etichetelor <div>, <span> sau <layer>, (fig. 12):

Fig. 12 Proprietatile unui layer afisate din Dreamweaver

ID - permite specificarea unui nume de identificare pentru layer, necesar in scripting si la gestionarea de layere. Numele nu poate contine caractere speciale ca: spatiu, liniuta, / si trebuie sa fie unic.

Left si Top specifica pozitia layer-ului relativ la coltul stanga sus al paginii sau al layer-ului de baza, daca acesta este inclus.

Width si Height - specifica latimea si inaltimea layer-ului. Ele se vor suprascrie daca continutul depaseste dimensiunea specificata. Pentru etichetele <div> si <span>, locatia si dimensiunea este data in pixeli, dar se pot specifica si in puncte, inch, mm, cm, procente (%).

Overflow controleaza modul in care layer-ele reactioneaza cand continutul depaseste dimensiunea sa.

Z-Index - determina ordinea in suprapunerea layer-elor. Numarul mai mare apare deasupra layer-elor de nivel mai mic. Valorile pot fi pozitive sau negative. Ordinea in suprapunere poate fi modificata. Layer-ele Netscape, create cu etichetele <layer> si <ilayer> pot fi, de asemenea, suprapuse relativ la alte layere din pagina. Pentru acestea, apare suplimentar proprietatea A/B care controleaza pozitia in suprapunerea a doua layer-e.

Visibility - determina afisarea sau nu a layer-ului pe ecran. Cu un script ca JavaScript se poate controla proprietatea de vizibilitate si afisarea dinamica a continutului layer-elor.

Background Image - proprietate ce permite unei imagini sa devina background pentru layer.

Background Color - specifica o culoare de background pentru un layer. El poate fi si transparent.

Clip - defineste zona vizibila a unui layer si este folosit pentru a decupa continutul de la marginile layer-ului.

Left, Top si PageX, PageY - combinatie de proprietati ce apar numai la etichetele <layer> si <ilayer> pentru a pozitiona un layer in relatie cu layer-ul de baza. Left si Top pozitioneaza layer-ul fata de coltul stanga sus al layer-ului de baza, iar PageX, PageY, fata de coltul stanga sus al ecranului.

Src - este o proprietate care tine tot de etichetele <layer> si <ilayer> si permite afisarea unui alt document HTML in cadrul unui layer.

A/B - proprietate valabila doar pentru etichetele <layer> si <ilayer> ce specifica ordinea de suprapunere a layer-elor:    A - nivelul de deasupra, B - nivelul de dedesubt. Un layer suprapus este un layer creat in interiorul altui layer. Tehnica suprapunerii este folosita pentru a grupa mai multe layere deodata. Layer-ul inclus se va misca in acelasi timp cu cel care il cuprinde si poate fi setat sa mosteneasca proprietatea visibility de la layer-ul de baza.

Fig. 13 Trasarea layer-elor intr-o pagina Web

Eticheta <layer> introducere Dynamic HTML in Netscape Navigator, adica "nivele dinamice", si poate fi pozitionata oriunde intr-o pagina Web fara legatura cu continutul. Datorita ei continutul paginii poate fi actualizat on demand.

Sintaxa de baza pentru definirea unui layer cu aceasta eticheta este, spre exemplu:

<layer id="mylayer" width=px heigh=70px bgColor="culoare" left=" "

top=" " src=" "> textul textul textul </layer>.

Eticheta <layer> este o eticheta de continut ca si un tabel creat prin eticheta <table>.

Generarea Dynamic HTML in Internet Explorer, dar si in Netscape Navigator se bazeaza pe etichetele <span> si <div>. Ca si in <layer>, aceste etichete pot fi asignate cu un atribut identificator, id, ce este apoi specificat in procesul de scripting. Obiectele stil sunt definite si apoi accesate in cadrul unor script-uri care stabilesc modul de functionare a unui element. Definirea obiectului stil prin eticheta <div> sau <span> se face astfel:

<div id = "nume"> </div>,    <span id = "nume"> </span>.

Obiectul stil detine numeroase proprietati care pot fi manevrate in crearea unui aspect dinamic pentru orice element HTML.

Exemple DHTML

Modificari on demand - Mouse over

Un text isi modifica culoarea la cerere (on demand) cand mouse-ul se deplaseaza pe el (mouse moves over). Codul sursa este urmatorul:

<span id = "text"

onMouseover = "text.style.color = 'red' "

on Mouseout = "text.style.color = 'black' "> Muta mouseul aici </span>.

Modificare de dimensiune on-demand

O imagine isi schimba dimensiunea la cerere (on demand) la trecerea cursorului mouse-ului peste ea, fara a fi nevoie sa se reincarce documentul. Imaginea revine la dimensiunea initiala daca mouse-ul paraseste suprafata sa.

<img id = "imagine" src = "fisier.gif"

onMouseover = "enlarge()"

onMouseout = "revertback()">

<script language="JavaScript">

function enlarge()

function revertback()

</script>

Tema:

Realizati pagini Web in care sunt folosite scripturi JavaScript si caracteristici DHTML. Scripturile si caracteristicile DHTML le luati prin copiere din bibliotecile oferite free de site-urile Web specializate.