Principii generale ale proiectrii interfeelor Web

I. Principii generale ale proiectrii interfeelor Web

I.1. Introducere
ASP.NET este un set de tehnologii care ne permit crearea de aplicaii web. Este evoluia de la Microsoft Active Server Pages (ASP), dar beneficiaz de suportul platformei de dezvoltare Microsoft .NET. Una dintre cele mai importante caliti ale ASP.NET este timpul redus necesar dezvoltrii aplicaiilor web. Att tehnologia n sine, ct i uneltele de dezvoltare de aplicaii web de la Microsoft (cum ar fi Visual Web Developer Express - VWD) reduc considerabil timpul de dezvoltare al aplicaiilor web fa de alte tehnologii prin simplitatea unui limbaj de programare managed de genul C# sau Visual Basic .NET, prin colecia bogat de biblioteci de clase i controale .NET care ofer foarte mult funcionalitate out of the box, prin orientarea pe construirea de aplicaii web a mediului de dezvoltare VWD. Chiar dac ASP.NET este gndit pentru a dezvolta aplicaii web foarte complexe prin faptul c se bazeaz pe .NET, prin faptul c se insist pe un model de dezvoltare OOP, respectiv pe separarea interfeei de logica aplicaiei totui, este extrem de simplu ca folosind ASP.NET s dezvoltm aplicaii mici, de genul magazinelor online, al aplicaiilor care sunt pur i simplu un front-end pentru o baz de date, sau al site-urilor personale. ASP.NET cuprinde toate tehnologiile necesare pentru a dezvolta o aplicaie web, scriind cantitatea minim de cod. Limbajele de programare care pot fi utilizate pentru a crea aplicaii ASP.NET sunt cele suportate de platforma .NET cum sunt Visual Basic .NET i C#, iar o alt caracteristica importanta a acestor limbaje (nafara faptului c sunt managed) este ca au fost create avnd n vedere paradigma programrii orientat pe obiecte. Totul din .NET, i evident din ASP.NET, este un obiect. Evident, orice site / aplicaie web trebuie s fie gzduit pe un server pentru a putea fi utilizat. Chiar dac n capitolele viitoare vom discuta mai mult despre instalarea aplicaiilor ASP.NET, aici a dori s prezint pe scurt variantele de gzduire. Pentru o persoan / companie care dorete s beneficieze de o aplicaie ASP.NET, dup ce a fost dezvoltat, trebuie instalat undeva. Presupunnd c ea a fost dezvoltat pentru .NET, aplicaia are nevoie de un server web IIS (internet Informations Services). Exist dou variante de a gzdui aplicaiile ASP.NET: (1) intern, pe serverele proprii sau (2) extern, la o firm care ofer servicii de gzduire (hosting). Decizia trebuie luat innd cont de civa parametri:

Costul de mentenan. Intern cost administrarea serverelor cu tot ce presupune asta: hardware, software, specialiti. Extern cost un abonament fix pe lun/an. Securitatea. Dac vorbim de o aplicaie extrem de important i care manipuleaz informaii sensibile, probabil vom dori s fie sub controlul propriu. Etc. Pentru programatorii care doresc s aib un site dezvoltat din pasiune sau pentru a

nva, dar vor totui s l aib instalat undeva, variantele de mai sus devin: (1) acas, pe Windows XP / Vista cu IIS; (2) la o firm care ofer servicii de hosting gratuit. Da, exist variante de acest gen, unde v putei instala propriul site ASP.NET fr s v coste nimic (cutai pe www.live.com asp.net free hosting). Pe perioada dezvoltrii unei aplicaii web, nu este nevoie ca aceasta s fie gzduit pe un server IIS, ci poate fi rulat din Visual Web Developer folosind serverul web integrat (vezi mai multe n capitolul II).

I.2. Realizarea interfeelor Web utiliznd limbajul de marcare HTML

De ce HTML? este simplu de neles i de utilizat poate fi creat utiliznd orice editor de texte (este un fiier ASCII) ofer structurarea formatrii este independent fa de platform

I.2.1. Ce este HTML ?

HTML 1 reprezint scheletul oricrei pagini Web, el descriind formatul primar n care documentele sunt vizualizate i distribuite pe Internet. HTML nu este un limbaj de programare, deci nu vei lucra aici cu variabile, expresii, tipuri de date, structuri de control. HTML este un limbaj descriptiv, prin care sunt descrise elementele structurale ale paginii Web: titluri, liste, tabele, paragrafe, legturi cu alte pagini, precum i aspectul pe care l are pagina din punct de vedere grafic. Fiind un limbaj de marcare, el utilizeaz etichete (marcaje 2) ce dau indicaii browsere-lor cu privire la ierarhizarea i afiarea informaiilor.

1 2

Hypertext Markup Language n englez tags n englez

Principii generale ale proiectrii interfeelor Web

I.2.2. Structura unui document HTML

Etichetele HTML sunt de dou tipuri: etichete container 3 Etichetele container sunt de forma: <tag> bloc de text </tag> specificnd formatul n care va fi afiat textul coninut ntre eticheta de nceput i cea de final. Majoritatea etichetelor sunt de acest tip. O particularitate a etichetelor container este c, n cazul unora dintre ele, prezena etichetei de nchidere (</tag>) este opional. etichete vide 4 Etichetele vide au forma: <tag>. Acest tip de etichete nu se refer la formatul textelor, ci la introducerea anumitor elemente, ca de exemplu: nceput de paragraf, sfrit de linie, linie orizontal i altele. Astfel ele dau indicaii browserului despre elementul introdus i despre cum s afieze acel element. Un document HTML este structurat astfel: 1. zona head (antet) cu etichetele <head> </head> 2. zona body (corp) cu etichetele <body> </body> sau <frameset> </frameset> Exemplu: codul HTML prezentat n acest exemplu utilizeaz urmtoarele marcaje 5 :
<p>-pentru definirea unui paragraf <hr>-pentru trasarea unei linii orizontale <font>-pentru formatarea fontului <img src=>-pentru inserarea unei imagini <i>-pentru definirea unui stil nclinat <html> <head><title>Exemplu</title></head> <body bgcolor=gray leftmargin="100" topmargin="50"> <body > <p>Linie orizontala de culoare albastra si grosime 2 <hr color=blue size=3> <p><font face="Arial" color="red" size="4"> Textul este scris cu fontul "Arial", culoare rosie si marime 7. <p><i>Am inserat o imagine</i><img src="i7.gif" border=5> </body> </body> </html>

3 4

container tags n englez empty tags n englez 5 aceste elemente au fost studiate la Tehnologia informaiei i comunicaiilor, n clasa a IX-a

I.2.3. Elemente HTML avansate

I.2.3.1 Tabele
Tabelele ne permit s construim o reea dreptunghiular de domenii, fiecare domeniu avnd propriile opiuni de formatare: culoarea fondului, culoarea textului, alinierea textului etc. Prezentarea datelor sub form de tabele ofer importante avantaje: claritate, sistematizare, posibiliti de comparare. Marcarea unui tabel se efectueaz printr-un tag de introducere a tabelului i de definire a atributelor globale. Acesta include i definiiile pentru liniile i celulele tabelului. Sintaxa general pentru declararea unui tabel este:
<table> <caption>...</caption> <TR><TH><TH> ... </TR> <TR><TD><TD> ... </TR> ... <TR><TD><TD> ... </TR> </table>

unde etichetele: <table></table> <tr></tr> <td></td> <th></th> <caption></caption> delimiteaz tabelul delimiteaz o linie a tabelului delimiteaz o celul de date a tabelului delimiteaz o celul a primei linii din tabel (a capului de tabel) delimiteaz titlul tabelului

Atributele etichetelor table i td sunt: Atribut border width height bgcolor background cellspacing cellpadding align valign colspan rowspan Semnificaie stabilete limea bordurii stabilete limea stabilete nlimea stabilete culoarea de fundal stabilete imaginea de fundal stabilete distana dintre celule stabilete distana dintre marginea celulei i coninut aliniaz pe orizontal coninutul (left, right, center) aliniaz pe verticalal coninutul (top, bottom, middle) unete celula cu cea din dreapta ei stabilete limea bordurii table * * * * * * * td * * * * * * * *

Exemplu: pagina urmtoare conine un tabel fr formatri.

<body> <h3 align=left >tabel</h3> <table> <tr><td>HTML</td><td>TABELE</td></tr> <tr><td>FORMULARE</td> <td>CADRE</td></tr> </table> </body>

Principii generale ale proiectrii interfeelor Web

Exemplu: pagina urmtoare conine un tabel cu bordur, avnd culoare stabilit de fundal, cu celule unite.
<body> <h3 align=left >tabel</h3> <table border=2 bgcolor=gray> <tr><td rowspan=3>HTML</td><td>TABELE</td></tr> <tr><td>FORMULARE</td><td bgcolor=red>ASP</td></tr> <tr><td>CADRE</td><td bgcolor=red>Visual Web DevExpress 2008</td> </tr> </table></body></html>

I.2.3.2 Cadre 6
Exemplele prezentate anterior ncrcau o singur pagina HTML n fereastra browserului. Sunt i situaii n care imaginea afiat de browser este format din mai multe pagini HTML numite cadre. Caracteristica acestor pagini este c perechea de etichete <body> </body> este nlocuit de <frameset> </frameset>, iar n interiorul lor cadrele sunt delimitate de <frame> i </frame>. Observaii: Exist browsere care nu suport cadre. Pentru acestea se utilizeaz n interiorul blocului <frameset> eticheta <noframes> </noframes>. Dac browserul poate s interpreteze cadre, va ignora ce se gsete n aceast poriune, iar dac nu, materialul cuprins n zona <noframes> </noframes> va fi singurul care va fi recunoscut i afiat.

Atributele etichetei frameset sunt: Atribut cols Semnificaie mparte pagina n coloane i are valori exprimate n procente din dimensiunea ferestrei sau numr de pixeli sau * 7 (spaiul rmas) rows mparte pagina n rnduri cu aceleai valori ca la cols bordercolor stabilete culoarea tuturor chenarelor conform modelului #rrggbb 8 frameborder permite/inhib afirea chenarelor cu valorile yes sau no

n englez frames dac mai multe elemente din list sunt configurate cu *, atunci spaiu disponibil rmas se va mpri n mod egal ntre ele 8 culorile pot fi precizate prin nume sau prin construcia #rrggbb, unde r(red), g(green) i b(blue) sunt cifre hexazecimale
7

10

Cadrele sunt introduse prin perechea de etichete <frame> </frame>, i suport atributele: Atribut name src bordercolor noresize scrolling frameborder marginheight marginwidth Semnificaie stabilete numele asociat cadrului stabilete fiierul sau adresa fiierului introdus stabilete culoarea chenarului cadrului curent conform dezactiveaz posibilitatea vizitatorului de a redimensiona cadrul permite/inhib adaugarea barelor de defilare cu valorile yes no si auto stabilete dac se afieaz chenarul cadrului (1-implicit) sau nu (0) permite stabilirea distanei n pixeli dintre coninutul unui cadru i marginile verticale ale cadrului permite stabilirea distanei n pixeli dintre coninutul unui cadru i marginile orizontale ale cadrului limea total.

Exemplu: pagin cu dou cadre verticale n proporia 30% i 70% din Cadrul din dreapta este mprit la rndul su n dou cadre orizontale.
<frameset cols="30%,*"> <frame src="f1.html" name="f1"> <frameset rows="40%,*"> <frame src="f2.html" name="f2"> <frame src="f3.html" name="f3"> </frameset > </frameset>

I.2.3.2.1 Cadre interne

Un cadru intern este specificat prin intermediul marcajului <iframe> </iframe>. Acesta

definete o arie rectangular n interiorul documentului, arie n care browserul va afia un alt document HTML complet, inclusiv marginile i barele de derulare. Un cadru intern se insereaz ntr-o pagin Web n mod asemntor cu o imagine, n interiorul blocului <body>. Exemplu: pagin cu trei link-uri; acestea deschid paginile referite de ele n cadrul intern din centrul paginii.
<html> <head><title>Cadre interne</title></head> <body> <a href="t1.html" target="mijloc">link 1</a> <a href="t2.html" target="mijloc">link 2</a> <a href="c1.html" target="mijloc">link 3</a> <center> <iframe width="60%" height="50%" name="mijloc" src="c2.html"> </iframe> </center> </body> </html >

Principii generale ale proiectrii interfeelor Web

11

I.2.3.2.2 Deschiderea documentelor n alte cadre

Dac ntr-unul dintre documentele deschise n cadru exist link-uri, acestea vor deschide paginile referite de ele n cadrul curent. Acest comportament se poate schimba prin plasarea n eticheta <a> a atributului target, care precizeaz numele ferestrei (cadrului) n care se va ncrca pagina nou referit de legtur, conform sintaxei:
<a href="URL" target="nume_cadru"> </a>

Exemplu: pagin cu dou cadre de tip coloan. n cel din stnga se va deschide documentul c5.html, iar n cel din dreapta, documentul c7.html. Cel de-al doilea cadru a fost numit "cadru_dreapta".
<frameset cols="20%, *"> <frame src="c5.html"> <frame src="c7.html" name="cadru_dreapta"> </frame>

c5.html: acest document conine patru link-uri. Prin intermediul atributului target am specificat faptul c toate legturile ncarc paginile referite n cadrul din dreapta. c5.html
<body> <a href="t2.html" target="cadru_dreapta">Tabele</a><br> <a href="t1.html" target="cadru_dreapta">Cadre</a><br> <a href="t3.html" target="cadru_dreapta">Formulare</a><br> <a href="c7.html" target="cadru_dreapta">Home</a><br> </body>

Atributul target al etichetei <frame> accept anumite valori predefinite:

Atribut Semnificaie

_self _blank _parent _top

ncrcarea noii pagini are loc n cadrul curent ncrcarea noii pagini are loc ntr-o fereastr nou, anonim ncrcarea noii pagini are loc n cadrul printe al cadrului curent dac acesta exist, altfel are loc n fereastra curent a browserului ncrcarea noii pagini are loc n fereastra browserului ce conine cadrul curent

Exemplu: pagin cu 3 link-uri n care atributul target ia 3 valori.

<a href="t1.html" target="_blank">Aceasta legatura incarca pagina t1.html in alta fereastra</a><br> <a href="c1.html" target="_self">Aceasta legatura incarca pagina c1.html in fereastra curenta</a><br> <a href="c2.html" target="_parent"> Aceasta legatura incarca pagina c2.html in fereastra parinte</a><br>

12

Observaii: Utilizarea cadrelor prezint o serie de avantaje: uurina n navigare reducerea timpilor de ncrcare i o serie de dezavantaje: indexarea paginii de ctre motoarele de cutare este mai dificil exist browsere care nu suport cadrele; este recomandat s existe pentru fiecare astfel de pagin i o versiune fr cadre, ceea ce implic un efort suplimentar.

I.2.3.3 Layere 9
Layer-ele sunt elemente HTML asemntoare frame-urilor, adic sunt nite containere pentru orice altceva ar putea intra ntr-o pagina HTML, dar spre deosebire de acestea, se pot suprapune (ca i regiunile unei hri). Etichetele <layer></layer> definesc un layer. Atributele etichetei <layer> sunt:
Atribut Semnificaie

name left/ top bgColor width/ height visibility src

stabilete numele asociat layer-ului stabilesc poziia n pagin a layer-ului stabilete culoarea de fundal a layer-ului stabilesc dimensiunile layer-ului permite/inhib vizibilitatea layer-ului prin valorile SHOW-implicit/HIDE stabilete adresa fiierului care conine informaiile ce sunt preluate n layer
<layer left=100 top=100 bgcolor=red> Am definit un layer </layer>

Observaii: Putem avea un layer n alt layer. n acest caz valorile atributelor left i top ale layer-ului din interior vor indica poziia acestuia fa la marginea de sus i marginea din stnga a layer-ului care l cuprinde. Layer-ele sunt acceptate doar de versiunile de la Netscape 4.0 n sus.

I.2.3.4 Formulare
Un formular este un ansamblu de zone active alctuit din casete combinate, cmpuri de editare, butoane radio, butoane de comand etc. Formularele asigur construirea unor pagini Web care permit utilizatorilor s introduc informaii i s le transmit serverului. O sesiune cu o pagin Web ce conine un formular cuprinde dou etape:

straturi

Principii generale ale proiectrii interfeelor Web utilizatorul completeaz formularul i expediere) datele nscrise n formular.

13

trimite serverului (prin apsarea butonului de

o aplicaie dedicat de pe server (un script) analizeaz informaiile transmise i, n funcie de configuraia scriptului, fie stocheaz datele ntr-o baz de date, fie le transmite la o adres de mail indicat de dumneavoastr. Dac este necesar, serverul poate expedia i un mesaj de rspuns utilizatorului.

Un formular este definit ntr-un bloc delimitat de etichetele <form> </form>. n interiorul blocului sunt incluse: elementele formularului, n care vizitatorul urmeaz s introduc informaii, un buton de expediere, la apsarea cruia, datele sunt transmise ctre server, opional, un buton de anulare, prin care utilizatorul poate anula datele nscrise n formular. Cele mai importante atribute ale etichetei <form> sunt:
Atribut Semnificaie

action

comunic browserului unde s trimit datele introduse n formular. n general valoarea atributului action este adresa URL a scriptului aflat pe serverul care primete datele formularului:
<form action="http://www.yahoo.com/cgi-bin/fisier.cgi">

method

precizeaz metoda utilizat de browser pentru expedierea datelor formularului get (valoarea implicit) - datele din formular post - folosit cel mai des. n acest caz datele sunt expediate separat. sunt adugate la adresa URL precizat de Sunt permise cantiti mari de atributul action (nu sunt permise cantiti date. mari de date)

Calea prin care informaiile introduse ntr-un formular pot parveni creatorului paginii este folosirea comenzii mailto:
<a href="mailto:autor@domeniu.com">

Majoritatea elementelor unui formular sunt definite cu ajutorul etichetei <input>. Aceasta este utilizat mpreun cu urmtoarele atribute:
Atribut Valoare Element introdus Semnificaie

text radio type checkbox button

caset de text buton radio csu de validare buton de comand

permite introducerea unui ir de caractere pe un singur rnd permite alegerea, la un moment dat, a unei singure variante din mai multe posibile permite selectarea sau deselectarea unei opiuni permite declanarea unei operaii atunci cnd utilizatorul execut click sau dblclick pe suprafaa

14

acestuia este butonul a crui activare declaneaz operaiunea de trimitere a datelor catre server reset este butonul a crui activare readuce controalele din formular la valorile lor iniiale image permite nlocuirea unui buton submit cu o imagine specificat password caset de este similar controlului text, diferenele text special constnd n faptul c datele introduse de utilizator vor fi afiate printr-un caracter "masc" (ex: "*") pentru a oferi un anumit grad de confidenialitate. Este folosit de obicei la introducerea unor parole. hidden cmp ascuns permite introducerea n formular a unui cmp ascuns file permite expedierea coninutului unui fiier a crui adres URL este submit buton de transmitere buton de resetare imagine transmis prin intermediul atributului value sau poate fi tastat ntrun cmp de editare ce apare odat cu formularul sau poate fi selectat prin intermediul unei casete de tip File Upload sau Choose File care apare la apsarea butonului Browse din formular.
<input type="file" name="file">

name value checked

permite ataarea unui nume fiecrui element al formularului permite atribuirea unei valori iniiale unui element al formularului are rolul de a preseta o anumit opiune, pe care ns utilizatorul o poate schimba, dac dorete size seteaz numrul de caractere al csuei de text afiate maxlength seteaz numrul maxim de caractere al csuei de text afiate Cu ajutorul etichetei <textarea> </texarea> putei insera n pagin o caset de text multilinie care permite vizitatorului s introduc un text mai lung, care se poate ntinde pe mai multe linii.
<textarea name="adresa" rows=2 cols=30></textarea>

Exemplu: pagina urmtoare conine elemente de mai multe tipuri ncadrate ntr-un formular unic. Pentru alinierea elementelor utilizate pentru informaiile personale am utilizat un tabel.

Principii generale ale proiectrii interfeelor Web

15

Etichetele <select> i <option> permit introducerea ntr-un formular a unui meniu derulant. Fiecare opiune care face parte din blocul <select> se introduce prin eticheta <option>. Atributele etichetei <select>:
Atribut Semnificaie

name size multiple

ataeaz listei un nume (utilizat n perechile name=value) expediat serverului precizeaz cte elemente din list sunt vizibile la un moment dat pe ecran, valoarea implicit fiind 1 permite selectarea mai multor valori din cadrul unei liste de selecie

Atributele etichetei <option>:

Atribut Semnificaie

value

primete ca valoare un text care va fi expediat serverului n perechea name=value; dac acest atribut lipsete, atunci ctre server va fi expediat textul ce urmeaz dup <option>:
<option value=1>Exemplu</option> <option value=2 selected>Exemplu</option>

selected

permite selectarea prestabilit a unui element al listei

Exemplu: pagina urmtoare conine o list derulant.

16

I.2.4. Evaluare
1. Care dintre urmtoarele expresii HTML pentru introducerea unui hyperlink, este corect din punct de vedere sintactic?
a) <a url="http://www.microsoft.com/express/download/default.aspx">Visual Studio 2008 Express Editions</a> b) <a name="http://www.microsoft.com/express/download/default.aspx">Visual Studio 2008 Express Editions</a> c) <a href="http://www.microsoft.com/express/download/default.aspx">Visual Studio 2008 Express Editions </a> d) <a>http://www.microsoft.com/express/download/default.aspx </a>

2. n care dintre codurile HTML urmtoare chenarul tabelului nu este afiat?

a) <table border></table> b) <table border="0"></table> <table bgcolor="white"> <tr bgcolor="red"> <td bgcolor="gray">c1 <td>c2 </table> c) <table border="-1"></table> d) <table border=no></table>

3.Urmtorul cod HTML genereaz un tabel cu o linie i dou celule.

Ce culoare vor avea cele dou celule? a) ambele vor fi albe b) ambele vor fi roii