I PROIECTAREA PAGINILOR WEB PROIECTAREA PAGINILOR WEB

Instrumente de lucru pentru crearea site-urilor Web: editoare de texte i de calcul tabelar care salveaz documentele ca pagini Web, editoare de HTML, editoare de imagini.

Instrumente de lucru pentru crearea site-urilor Web: Crearea unei paginii web cu ajutorul aplicatiei Notepad Paginile HTML se fac intr-un editor de scris, cum ar fi Notepad si se creeaza astfel: - Se deschide Notepad - Dupa ce se lucreaza in el se da File -> Save - Se intituleaza nume.html si se alege la Save as Type All Files si se apasa butonul SAVE. Modificare Ca sa modifici pagina facuta de tine: - se deschide pagina .html - se da click dreapta pe fundalul paginii - si View Source - dupa modificare se da File -> Save Word si paginile web ( vezi si site3.pps Realizarea paginilor web in Microsoft Word) Word ofera doua moduri de a crea pagini Web: prin transformarea documentelor existente n pagini Web (salvare n formatul fisier nativ HTML - Fisier-Salvare ca; Fisier de tip-Pagina Web sau salvare direct ca pagina Web Fisier-Salvare ca pagina Web) sau utiliznd expertul Web Page pentru a crea o pagina de la zero. Excel si paginile web Excel ofera posibilitatea de a crea pagini Web: prin transformarea documentelor existente n pagini Web (salvare n formatul fisier nativ HTML - Fisier-Salvare ca; Fisier de tipPagina Web sau salvare direct ca pagina Web Fisier-Salvare ca pagina Web) Power Point si paginile web ( vezi si site2.pdf vizualizarea si publicarea unei prezentri pe web) Save as Web Page Prezentarile pot fi salvate selectand File/Save din bara meniurilor. Daca doriti sa plasati prezentarea pe Internet va trebui sa salvati prezentarea ca si web page pentru ca vizitatorii site-ului sa poata vizualiza prezentarea chiar daca nu au Power Point instalat in computer. Selectati File/Save As Web Page din bara meniurilor. Alegeti directorul paginii web din Look in: si numiti fisierul in casuta File name. Click Save pentru a salva prezentarea. Adobe Photoshop Este un software folosit pentru editarea imaginilor digitale pe calculator.

I PROIECTAREA PAGINILOR WEB Principalele elemente prin care Photshop se difereniaz de aplicaiile concurente i prin care stabilete noi standarde n industria prelucrrii de imagini digitale sunt: Seleciile Straturile (Layers) Mtile (Masks) Canalele (Channels) Retuarea Optimizarea imaginilor pentru Web MySQL Este un sistem de gestiune a bazelor de date relaional. Este cel mai popular SGBD opensource la ora actual. Dei este folosit foarte des mpreun cu limbajul de programare PHP, cu MySQL se pot construi aplicaii n orice limbaj major. Pentru a administra bazele de date MySQL se poate folosi modul linie de comand sau, prin descrcare de pe internet, o interfa grafic: MySQL Administrator i MySQL Query Browser. Un alt instrument de management al acestor baze de date este aplicaia gratuit, scris n PHP, phpMyAdmin. Macromedia Dreamweaver Este o unealt destinat creatorilor de pagini web. Un aspect foarte ludat al Dreamweaver-ului l reprezint arhitectura sa extensibil. Extensiile, aa cum sunt ele cunoscute, sunt mici programe, pe care orice dezvoltator le poate scrie (de obicei n HTML i JavaScript) i pe care oricine le poate descarca i instala, acestea aducnd un spor de performan i funcionalitate mbuntit programului. ETAPELE DE REALIZARE A UNUI SITE (vezi si site1.pdf Realizarea unui site web + site7.pdf Etapele de realizare a unui site + barealizareaunuiwebsite.doc) Pentru crearea unui site performant sunt necesar de parcurs urmatoarele etape : - Etapa 1 - Proiectare (Design) - Etapa 2 -; Promovare (Marketing) - Etapa 3 -; Gazduirea (Hosting) - Etapa 4 -; Administrare. 1. Etapa 1-a Proiectare (Design) Proiectarea, nu inseamna numai partea de conceptie grafica a paginilor Web, ci si crearea oricaror programe necesare (de exemplu, pentru legarea la o baza de date) sau de formulare folosite pentru colectarea de informatii de la utilizatorii (vizitatorii) site-ului. Crearea paginilor Web se poate realiza in doua moduri, si anume: A. Manual, scriind efectiv tagurile HTML. B. Asistat, cu ajutorul unor programe speciale A.Modul manual Crearea manuala a paginilor Web se poate realiza numai de catre specialisti, ce cunosc limbajul HTML. Realizarea manuala presupune existenta urmatoarelor trei instrumente : a) Browserul Web este necesar pentru testarea a ceea ce se obtine, in fiecare moment si de scriere a tagurilor HTML. b) Cu ajutorul programelor de grafica, se creaza/editeaza, imaginile de fundal, figurile, butoanele, desenele etc. Exemple de programe ce pot fi utilizate : - Paint Shop Pro - Adobe Photo-Shop

I PROIECTAREA PAGINILOR WEB c) Programul de editare text este utilizat pentru scrierea efectiva a tagurilor HTML. Exemplu de programe ce pot fi utilizate pentru scrierea tagurilor HTML: - Note Pad - Word Pad Plus. Principalul avantaj al metodei manuale consta in faptul, ca pagina HTML este exact asa cum s-a dorit. Dezavantajul metodei consta in principal, in faptul ca proiectantul trebuie sa cunoasca bine limbajul HTML. B. Modul Asistat Proiectantul poate utiliza pentru realizarea site-ului unul din editoarele WYSIWYG, ce dispune de un ansamblu de instrumente de care avem nevoie pentru a construi un site profesional In modul asistat sunt necesare urmatoarele categorii de programe : a) Browsere de Web (Identic cu metoda manuala) b) Programe de editare vizuala a paginilor HTML c) Programe ce asigura facilitati de programare d) Programe de grafica (Identic cu metoda manuala) Programe de editare vizuala : - Microsoft FrontPage 2000 - Adobe PageMil 3.0 - Macromedia Dream Weaver 2 - HomePage 3.0 - HotMetal PRo 5.0 - NetObjects Fusian 4.0 - VisualPage 2.0 2. Etapa a 2-a Promovarea site-ului (Marketink) Promovarea site-ului prin bannere publicitare si posta electronica, constituie o metoda eficienta in cresterea traficului de acces la site-ul respectiv. Un prim pas in promovarea unui site este inregistrarea lui pe cele mai importante motoare de cautare : Yahoo, Altavista, Excite, Infoseek, Lycos, WebCrawler, HotBot si Magellan, acestea fiind in general primele locuri catre care se indreapta utilizatorii ca nd cauta ceva pe Internet. O tactica promotionala actuala este schimbul de bannere, adica afisarea reclamei site-ului dumneavoastra pe un alt site, in schimbul includerii unui banner de reclama pe propriul site. 3. Etapa 3-a Gazduirea site-ului (vezi si site5.pdf Publicarea unui site web) Pentru gasirea unei gazde (host) a site-ului dvs. trebuie in primul rand sa raspundeti la doua intrebari : - Cat de complex este site-ul? - Care este traficul extimat? Serviciul de hosting va va taxa in functie de raspunsul la cele doua intrebari de mai sus. Raspunsul la cele doua intrebari are ca scop determinarea marimii spatiului necesar pe hard disc si volumul transferului de date. La adresa: http://members.tripad.com/Ijpsp1/sites.html se poate lista un numar de site-uri care ofera spatiu gratuit sau ieftin pentru paginile Web. 4. Etapa 4-a Administrare site-uri Tipul de site ales, impune o anumita frecventa si anumite metode pentru actualizarile specifice.

I PROIECTAREA PAGINILOR WEB

barealizareaunuiwebsite.doc
Realizarea unui website Site-ul este o colecie de documente i resurse, care au un obiectiv comun, cu subiecte legate ntre ele. Realizarea unui website este o activitate care se desfoar pe o perioad de timp i care presupune parcurgerea urmtoarelor etape: etapa 1. Planificarea site-ului; etapa 2. Scrierea codului surs a fiecrei pagini care intr in componena site-ului; etapa 3. Verificarea site-ului; etapa 4. ncrcarea paginilor web pe un server; etapa 5. Promovarea site-ului; etapa 6. Administrarea site-ului. 1. Planificarea site-ului n etapa de planificare a site-ului vom defini motivele i vom stabili tematica siteului, grupul int, modul de organizare a informaiei. a. Stabilirea tematicii site-ului n momentul n care ne-am hotrt s realizm un site, este necesar s stabilim ce subiect vom trata n cadrul su. Este de dorit s evitm tratarea unor teme diferite n cadrul aceluiai site. n cazul n care, de exemplu, dorim s realizm site-ul liceului la care studiem, vom posta pe site doar informaii legate de liceu, cum ar fi: localizarea instituiei, dotarea colar, cadrele didactice care predau la liceul respectiv, activitile colare i extracolare desfurate de ctre elevii liceului, cercurile existente n liceu, situaia colar la sfritul fiecrui an colar, .a.m.d., evitnd afiarea pe site a informaiilor legate de propria noastr persoan, de cercul nostru de prieteni, etc. b. Stabilirea grupului int Avnd clar stabilit subiectul site-ului, putem s stabilim i cui i este adresat acesta. n prima pagin a site-ului vom meniona eventual genul de vizitator cruia i este adresat. Stabilim astfel categoria de vrst (copii, adolesceni, btrni), nivelul de studiu (liceu, facultate, doctorat), tipul de browser pe care-l pot folosi vizitatorii (Internet Explorer, Opera, FireFox, etc), rezoluia monitorului acestora, viteza conexiunii folosite de vizitatori. Exist diferite firme care ne ofer astfel de statistici i contorizri. Chiar i de la server-ul unde am pus site-ul putem obine aceste informaii. De exemplu yahoo.geocities.com ofer statistici bune. n prima pagina a site-ului putem scrie i motivaiile accesrii site-ului (de exemplu, n cazul realizarii site-ului liceului la care nvm, o accesare a acestuia ar duce la o bun informare a elevilor din ciclul gimnazial, pentru viitoarea lor orientare colar).

I PROIECTAREA PAGINILOR WEB c. Stabilirea modului de organizare a informaiei n aceast etap vom stabili: logo-ul site-ului, culoarea fundalului, culoarea i dimensiunea fonturilor, culoarea legturilor (link-urilor) vizitate/nevizitate, modul de navigare al vizitatorilor, organizarea coninutului, numrul de nivele al site-ului. Logo-ul este o imagine de dimensiuni mici, reprezentativ pentru site. El va fi realizat cu un editor de imagini i va fi utilizat pe toate paginile site-ului. Este bine s nu facem exces de culori i s le folosim ntr-o combinaie plcut. Informaiile importante putem s le evideniem prin poziie, efecte cromatice. Pentru o localizare facil a informaiilor de ctre vizitator, este bine ca informaia s fie mprit n uniti informaionale logice de mici dimensiuni. Modul de organizare a informaiei dintr-un site determin de cele mai multe ori modul de organizare a instrumentelor de navigare puse la dispoziia utilizatorului. Un element important n arhitectura unui site este meniul. El ghideaz vizitatorul prin paginile site-ului. Exist patru modaliti de amplasare a meniului n pagin: o amplasarea meniului n partea de sus a ecranului; corespunde modului natural de citire de la stnga la dreapta; este foarte rspndit; o amplasarea meniului n partea de jos a ecranului; i acesta corespunde modului natural de citire de la stnga la dreapt; este rar utilizat; exist pericolul ca pe ecranele cu rezoluie mic s nu fie vizibil; o amplasarea meniului n partea stng a ecranului; este foarte rspndit; o amplasarea meniului n partea dreapt a ecranului; este rar utilizat; exist pericolul ca pe ecranele cu rezoluie mic s nu fie vizibil. Pentru navigare, putem folosi fie o tabl de materii, fie cadrele. Este indicat ca fiierele s aib o dimensiune mic, sub 20 KB. Aceasta duce la ncrcarea paginii ntr-un timp mai scurt. Fiierele grafice este bine s nu abunde, deoarece acestea au dimensiuni mari. Este indicat ca numrul de nivele al site-ului s nu fie mare. De exemplu, dac avem fiierul index.html i un folder cu celelalte fiiere htlm, spunem c site-ul are dou nivele. 2. Scrierea codului surs a fiecrei pagini care intr n componena site-ului Cnd scriem codul surs al fiecrei pagini, este bine s evitm etichetele de nchidere care nu sunt obligatorii (de exemplu: </li>, </br>, etc). Pentru o dimensiune redus a paginilor site-ului, vom pune codurile CSS, JavaScript n fiiere externe. n cazul n care, ntr-o pagin web avem un tabel inclus n alt tabel, browser-ul poate ntmpina o dificultate de interpretare, ceea ce va prelungi durata interpretrii. De aceea este util s folosim mai multe tabele independente, dac acest lucru este posibil. Astfel, browser-ul le va interpreta pe rnd i tot astfel le va i afia. La tabele este bine s utilizm atributele height i width, pentru a micora timpul interpretrii. Imaginile este indicat a fi utilizate cu moderaie, pentru a evita suprancrcarea paginii web care le conine. 3. Verificarea site-ului Site-ul nainte de a fi ncrcat, trebuie verificat, trebuie testat. Vom realiza testarea sa cu diferite navigatoare, tiut fiind faptul c nu toate accept unele etichete

I PROIECTAREA PAGINILOR WEB HTML, sau scripturile CSS, JavaScript. O alt testare a site-ului se realizeaz la diferite rezoluii ale ecranului. Dup ncrcare site-ului, vom face din nou verificarea acestuia. O testare gratuit o putem realiza la www.netmechanic.com . Aici putem afla dimensiunea real a paginilor noastre, erorile din cadrul fiierelor ce compun site-ul nostru. 4. ncrcarea paginilor web pe un server Operaia de ncrcare a fiierelor de pe calculatorul nostru pe un server, se numete upload. Dup efectuarea acestei operaii, fiierele vor fi vizibile pentru cei care viziteaz respectivul site. Pentru realizarea upload-ului, vom utiliza clientul FTP pus de server la dispoziia noastr, sau putem utiliza un alt client FTP. Cu ajutorul clienilor FTP, vom realiza i actualizarea site-ului. FTP Commander este gratuit, are o interfa prietenoas, putndu-l folosi cu succes. Putem gsi i ali clieni FTP, cutnd pe google find FTP client download. n cazul site-ului geocities.yahoo.com putem realiza ncrcare fiierelor i prin clientul FTP pus la dispoziie, dar i prin intermediul unui alt client FTP. 5. Promovarea site-ului Pentru ca internauii s fie informai de existena site-ului nostru, e necesar s ne promovm site-ul. Pentru a mbunti poziionarea n cadrul listei furnizate de motorul de cutare trebuiesc cunoscute criteriile folosite pentru a determina gradul de relevan iar in funcie de rezultatele obinute, acolo unde este nevoie, se vor face schimbri n paginile respective. Cel mai important factor n determinarea relevanei unui site este titlul paginii. Alte elemente sunt elementele meta, frecvena cuvintelor cheie, i nu n ultimul rnd coninutul site-ului. Prin intemediul elementelor <meta> aflate la nceputul fiecrei pagini web, programele robot ne vor vizita paginile, dup care le vor indexa. Pentru generarea automat de meta-tag-uri, putem folosi un generator on-line, cum ar fi: submitcorner.com, grafstat.ro, etc.

I PROIECTAREA PAGINILOR WEB

http://www.submitcorner.com/cgi-bin/tools/metagen.cgi n urma apsrii butonului Generate My META Tags este generat automat urmtorul cod: <META NAME="keywords" CONTENT="PHP, HTML, site"> <META NAME="description" CONTENT="Programare Web"> <META HTTP-EQUIV="Content-Language" CONTENT="EN"> <META NAME="author" CONTENT="BA"> <META NAME="copyright" CONTENT="ALB"> <META NAME="robots" CONTENT="FOLLOW,INDEX"> Pentru a promova un site, putem s participm la un schimb de banner-e publicitare. Banner-ul este important s aibe o dimensiune ct mai mic, s fie reprezentativ pentru site-ul nostru. O alt modalitate de promovare a site-ului este nscrierea manual n google (www.google.ro/addurl.html), de exemplu, sau nscrierea prin intermediul unei firme, cum ar fi website-submission.com , register-it.com, webpage-register.com. Promovarea site-ului se poate realiza i prin nscrierea pe listele de discuii corespunztoare site-ului. Webmasterii mai au la dispoziie i alte mijloace necostisitoare , cum ar fi : autoresponder-ul (email automat sau email la cerere), signature file (fiierul semntura). Autoresponderul funcioneaz ca o adres e-mail special care este programat s furnizeze instantaneu un rspuns email preformatat, de fiecare dat cand primete un mesaj la adresa respectiv. Fiierul semntur reprezint un text aezat la sfritul mesajelor e-mail. El conine numele i prenumele persoanei care transmite mesajul, adresa de e-mail, adresa site-ului, precum i o scurt desriere a site-ului. O promovare eficient se poate realiza utiliznd marketing-ul prin email difereniat (ziare electronice, anunuri sau reclame publicitare, liste de discuii). Prin

I PROIECTAREA PAGINILOR WEB intermediul listelor de discuii, putem crete traficul ctre site-ul propriu, prin utilizarea fiierului semntur, la sfritul fiecrui mesaj pe care l postm pe list. O alt modalitate de promovare a site-lui este schimbul de legturi. Aceasta nseamn c noi vom plasa n site-ul nostru o legtur ctre un alt site, iar realizatorul acestuia va plasa i el pe site-ul su o legtur ctre site-ul nostru. 6. Administrarea site-ului Dup realizarea site-ului, munca nu s-a ncheiat. Urmeaz ultima etap i anume aceea de ntreinere i de administrare a site-ului. Acesta trebuie s conin informaii corecte i permanent actualizate. Administrarea i ntreinerea site-ului presupune efectuarea urmtoarelor operaii: - actualizarea / modificarea paginilor web; - modificarea designului site-ului n funcie de noile necesiti; - administrarea bazelor de date; - verificarea periodic a funcionrii site-ului; - verificarea periodic a funionrii link-urilor i a formularelor din cadrul site-ului, etc.

VEZI SI SITE4.EXE (NU POATE FI POSTAT PE SITE) PROIECTAREA PAGINILOR WEB, DAN PAUNESCU)

Structura unui site Web: - Tipuri de site-uri Web: statice (de informare), dinamice/ interactive (e-commerce, e-learning, e-banking etc.) - Structura unei pagini din cadrul unui site Web. Elemente specifice publicrii i regsirii site-ului n cadrul motoarelor de cutare. - Elemente de coninut ale paginilor Web: text, liste, tabele, imagini, hri de imagini, sunete, animaie, cadre, filme, butoane, casete de dialog, casete combinate, ferestre. Recapitulare semestrial

I PROIECTAREA PAGINILOR WEB - Ierarhia paginilor n cadrul site-ului Web. Sistemul de link-uri, pagina de start. - Criterii considerate la realizarea documentelor Web: viteza de ncrcare, raport text/imagine, configurare i administrare, rapoarte, formulare, cutare i regsire a informaiei - Cerine de prezentare a informaiilor prezentate n documentele Web: de coninut, acuratee, lizibilitate, de design, conformitate cu cerinele proiectului. 1. Tipuri de site-uri Web Practic, exista patru tipuri de site-uri Web: a) Site-uri cu pagini statice b) - Site-uri cu pagini dinamice c) Site-uri dezvoltate pe baze de date d) Magazine virtuale a) Site-urile cu pagini statice se folosesc in special drept panouri publicitare. b) Site-uri cu pagini dinamice.Aceste site-uri necesita o actualizare periodica (zilnica sau saptamnala) a elementelor specifice. c) Site-uri dezvoltate pe baze de date (Oracle, de exemplu), care poate fi actualizata in mod regulat prin intermediul unui program prioritar. Se pot utiliza si bazele de date Access sau File Maker. Acest tip de site se recomanda pentru activitati cu volum important de informatii ce trebuie actualizat la intervale regulate de timp. d) Magazinul virtual se bazeaza pe date stocate in baze de date si permite clientilor sa aleaga si apoi sa achizitioneze in siguranta produse sau servicii on line, cu ajutorul cartilor de credit sau a banilor virtuali (electronic cash).

2 Structura unei pagini din cadrul unui site web (unui document HTML). Elemente specifice publicarii si regasirii site-ului in cadrul motoarelor de cautare Tag-urile nu sunt altceva decat niste marcaje sau etichete pe care limbajul HTML le foloseste alaturi de texte pentru a ajuta browser-ul de internet sa afiseze corect continutul paginii web. Aceste tag-uri (etichete) pot fi de doua feluri: - tag-uri pereche (un tag de inceput si unul de incheiere). Exemple: <HTML> si </HTML>; <TITLE> si </TITLE>; <HEAD> si </HEAD>; - tag-uri singulare (nu au un tag de incheiere) Exemple: <HR>, <BR>. Tag-urile (etichetele) pot fi scrise atat cu litere mari cat si cu litere mici. Etichete (tag-uri) de baza pe care trebuie sa le contina un document HTML: <HTML> - cu acest tag incepe orice document HTML <HEAD> - intre aceste tag-uri sunt trecute, pe langa titlul paginii, diverse informatii folositoare pentru browser-ul de internet </HEAD> - acesta este tag-ul de incheiere al tag-ului <HEAD> <TITLE> - cu ajutorul acestei perechi de tag-uri vei putea da un titlu documentului </TITLE> - este tag-ul de ncheiere al tag-ului <TITLE>. <BODY> - odata cu acest tag incepe continutul paginii web. Tot ce vei scrie intre tagurile <BODY> si </BODY> va fi afisat, de catre browser, pe ecranul monitorului </BODY> - ii spui browser-ului ca ai terminat de scris continutul paginii

I PROIECTAREA PAGINILOR WEB </HTML> - este tag-ul de ncheiere al tag-ului <HTML>. Codul oricarui document se termina cu acest tag. Tag-urile (etichetele) pot fi scrise atat cu litere mari cat si cu litere mici. Exemplu de pagina web 01.html <HTML> <HEAD> <TITLE>Prima mea pagina web</TITLE> </HEAD> <BODY> Bine ai venit!<BR> Vom invata impreuna limbajul HTML. Aceasta este prima mea pagina web!<BR> </BODY> </HTML> Meta-tagul nu este un tag cerut atunci cand scrii pagini web in HTML. Meta tagurile sunt folosite de motoarele de cautare si ofera o mai buna indexare a paginei web. Dupa inregistrarea url-ului paginei tale in motoarele de cautare, programele "spider" vor indexa pagina care se gaseste la url-ul dat. Fiecare motor de cautare face aceasta indexare in mod diferit, ex: Altavista arata primele 250 de caractere din pagina in descrierea lor. Este recomandat ca primele fraze ale paginei sa contina o scurta prezentare a paginii. Bineinteles nu toate motoarele de cautare indexeaza in acelasi mod; introducerea meta tagurilor va exclude cateva din problemele listarii in motoarele de cautare. Meta tagurile trebuiesc scrise imediat dupa tagul <title>, acestea arata de forma: <meta name="xxxxx" content="XXXXX"> Cateva Meta-taguri folositoare: <meta name="title" content="titlu pagina"> <meta name="author" content="autor pagina"> <meta name="owner" content="proprietar pagina"> <meta name="subject" content="subiect pagina"> <meta name="rating" content="rating pagina"> <meta name="description" content="descriere pagina"> <meta name="abstract" content="descriere pagina"> <meta name="keywords" content="cuvinte cheie pagina"> <meta name="revisit-after" content="n days">(reindexarea paginii in n zile) <meta name="language" content="limba pagina"> <meta name="copyright" content="drepturi de autor"> <meta name="robots" content="all"> http://www.emgos.autosite.ro/meta-tag.html 3. Elemenete de continut ale paginilor web O pagina web poate contine urmatoarele elemente:

10

I - PROIECTAREA PAGINILOR WEB texte tabele liste imagini harti de imagini sunete animatie cadre filme butoane casete de dialog casete combinate ferestre texte

VEZI HTML1.PDF+HTML2.DOC este capitolul de HTML de la lucrarea de gradul I contine toata teoria pentru HTML
4. Ierarhia paginilor in cadrul site-ului web. Sistemul de link-uri, pagina de start Navigarea in cadrul site-urilor este posibila cu ajutorul link-urilor (legaturilor). Pentru a folosi legaturi in paginile web pe care le vei face, trebuie sa folosesti perechea de tag-uri <A> si </A>. Numele acestor tag-uri vine de la cuvantul anchor care se traduce ancora. Tag-ul <A> va trebui folosit impreuna cu atributul HREF. <A HREF=numelepaginii.html>Textul legaturii</A> Daca pagina respectiva se afla in acelasi folder cu pagina pe care se afla legatura atunci nu sunt necesare ghilimelele. Exemple: <HTML><HEAD><TITLE>Legaturi</TITLE></HEAD><BODY> <CENTER><B>Leg&#259tur&#259 c&#259tre o alt&#259 pagin&#259 </B> <BR><BR> <A HREF=imagini.html>Imagine bebe</A> </CENTER></BODY></HTML> Vom vedea cum putem adauga o legatura catre un site particular. <A HREF="adresa site-ului">Textul legaturii</A> Exemplu: <HTML><HEAD><TITLE>Legaturi catre site-uri particulare</TITLE></HEAD> <BODY><CENTER><B>Leg&#259turi c&#259tre site-urile unor ziare din Rom&#226nia </B> </CENTER> <BR><A HREF="http://www.evz.ro">Evenimentul Zilei</A> <BR><A HREF="http://www.jurnalul.ro">Jurnalul Na&#355;ional</A> <BR><A HREF="http://www.capital.ro">Capital</A> <BR><A HREF="http://www.prosport.ro">Prosport</A> <BR><A HREF="http://www.gsp.ro">Gazeta sporturilor</A>

11

I - PROIECTAREA PAGINILOR WEB <BR><A HREF="http://www.libertatea.ro">Libertatea</A> <BR></BODY></HTML> Atunci cand avem de-a face cu pagini mai lungi, putem imparti aceste pagini in mai multe sectiuni catre care sa adaugam cate o legatura la inceputul paginii pentru ca utilizatorii sa ajunga mai repede la sectiunea care ii intereseaza. Fiecare titlu al sectiunii trebuie definit ca ancora: <A NAME="#ancora1">Titlul primei sectiuni</A> <A NAME="#ancora2">Titlul sectiunii a doua</A> <A NAME="#ancora3">Titlul sectiunii a treia</A> Legaturile catre ancorele din cadrul aceleiasi pagini HTML vor avea urmatoarea forma: <A NAME="#ancora1">Legatura catre prima sectiune</A> <A NAME="#ancora2">Legatura catre a doua sectiune</A> <A NAME="#ancora3">Legatura catre a treia sectiune</A> Legaturile catre ancore din cadrul altei pagini HTML vor avea urmatoarea forma: <A NAME="numelepaginii.html#ancora1">Legatura catre prima sectiune</A> <A NAME="numelepaginii.html#ancora2">Legatura catre a doua sectiune</A> <A NAME="numelepaginii.html#ancora3">Legatura catre a treia sectiune</A> Exemplu <HTML> <HEAD> <TITLE>Legatura catre o sectiune de pagina</TITLE> </HEAD> <BODY> <BR><BR><BR><BR><BR><BR> <CENTER><B>&#206ntreb&#259ri frecvente</B></CENTER> <BR><BR><BR><BR><BR><BR> <A HREF="#intrebarea1">1. Ce pot g&#259si pe site-ul ecursuri.ro?</A><BR><BR><BR> <A HREF="#intrebarea2">2. Ce este un curs online?</A><BR><BR><BR> <A HREF="#intrebarea3">3. De ce s&#259 &#238nv&#259&#355; online?</A><BR><BR><BR><BR> <HR><BR><BR><BR><BR><BR> <FONT COLOR="#FF9900" SIZE="3" FONT="Arial, Times New Roman"> <A NAME="#intrebarea1">1. Ce pot g&#259si pe site-ul ecursuri.ro?</A></FONT><BR> <BR> &nbsp; &nbsp; &nbsp;Site-ul ecursuri.ro &#238&#351;i propune s&#259 ofere vizitatorilor s&#259i c&#226t mai multe resurse pentru a &#238nv&#259&#355;a online. &#206n aces moment, pe site, sunt disponibile peste 20 de cursuri online, din diverse domenii, dar cu ajutorul vostru sper&#259m ca num&#259rul acestora s&#259 creasc&#259.<BR> &nbsp; &nbsp; &nbsp; Pe l&#226ng&#259 cursurile online vei g&#259si, &#238n cadrul site-ului nostru, mai mult de 1000 de referate &#351;i peste 100 de jocuri online. <BR><BR><BR><BR><BR><BR><BR><BR> <BR><BR> <BR><BR> <BR><BR> <FONT COLOR="#FF9900" SIZE="3" FONT="Arial, Times New Roman"> <A NAME="#intrebarea2">2. Ce este un curs online?</A></FONT><BR><BR>

12

I - PROIECTAREA PAGINILOR WEB &nbsp; &nbsp; &nbsp;Un curs online presupune ca toate materialele necesare, s&#259 fie disponibile pe internet. A&#351;adar, viitorii cursan&#355;i vor avea la dispozi&#355;ie toate resursele necesare pentru &#238nv&#259&#355;at, la fel ca &#351;i &#238n cazul unui curs tradi&#355;ional, singura deosebire fiind c&#259 totul se petrece online. <BR><BR><BR><BR><BR> <BR><BR><BR> <BR><BR><BR><BR><BR> <BR> <FONT COLOR="#FF9900" SIZE="3" FONT="Arial, Times New Roman"> <A NAME="#intrebarea3">3. De ce s&#259 &#238nv&#259&#355; online?</A> </FONT><BR> <BR> &nbsp; &nbsp; &nbsp;Cursurile online prezint&#259, indiscutabil, foarte multe avantaje fa&#355;&#259 de alte tipuri de cursuri. &#206n primul r&#226nd cursurile online pot fi consultate oric&#226nd, ele fiind disponibile non stop pe internet. Un lucru extrem de important &#238n alegerea unui curs online este &#351;i pre&#355;ul sc&#259zut al unui astfel de curs comparativ cu pre&#355;urile cursurilor tradi&#355;ionale. &#206n cazul cursurilor prezente pe site-ul ecursuri.ro, acestea sunt 100% GRATUITE. <BR><BR><BR><BR><BR><BR> <BR><BR><BR> <BR> <BR><BR><BR><BR><BR><BR> <BR><BR><BR> <BR> </BODY> </HTML> Daca vrei ca utilizatorii paginii tale web sa iti poata scrie parerile lor despre site, de exemplu, atunci trebuie ca in cadrul paginii sa existe o legatura catre o adresa de e-mail. Cum faci asta? Foarte simplu. Forma generala a unei legaturi catre o adresa de e-mail este urmatoarea: <A HREF="mailto:adresa de e-mail">Trimite-mi un e-mail</A> Pentru a folosi o imagine ca legatura intre tag-urile <A> si </A>, va trebui scrisa adresa imaginii: <A HREF=numepagina.html><IMG SRC="adresaimaginii"</A> Exemplu <HTML> <HEAD> <TITLE>Folosirea unei imagini ca legatura</TITLE> </HEAD> <BODY> <CENTER><H1>Imagini ca leg&#259turi</H1> <BR><BR> <A HREF=intrebari.html><IMG SRC="../Poze/intreb.jpg"></A> </CENTER> </BODY> </HTML> Fiecare legatura din cadrul unei pagini web are trei culori: o culoare pentru legaturile nevizitate (nu a fost efectuat nici un click pe ele) o culoare pentru legaturile vizitate (s-a efectuat cel putin un click pe ele) o culoare pentru legaturile active (atunci cand cursorul mouse-ului se afla deasupra lor) Pentru fiecare culoare, din cele trei de mai sus, exista cate un atribut al tag-ului </BODY> cu ajutorul caruia putem schimba culoarea implicita:

13

I - PROIECTAREA PAGINILOR WEB LINK pentru legaturile nevizitate VLINK pentru legaturile vizitate ALINK pentru legaturile active Fiecarui atribut i se va atribui un nume de culoare sau codul unei culori. Spre exemplu daca vrei ca in cadrul paginii tale web, legaturile sa fie de culoare rosie atunci cand nu au fost vizitate, de culoare neagra cele vizitate si de culoare portocalie atunci cand se trece cu mouse-ul pe deasupra lor, trebuie sa folosesti urmatoarea linie de cod: <BODY LINK=#FF0000 VLINK=#000000 ALINK=FF9600> Pagina de Start (Home Page) Reprezinta pagina afisata la accesarea unui domeniu

5. Criterii considerate la realizarea documentelor Web Criteriile considerate la realizarea documentelor Web sunt: - viteza de ncrcare, - raportul text/imagine, - configurare i administrare, - rapoartele, - formularele, - cutarea i regsirea a informaiei. Formularele reprezinta o metoda de interactivitate cu utilizatorii paginii tale web. Prin intermediul unui formular poti obtine date importante de la vizitatorii paginii tale. Dupa ce formularul a fost completat, utilizatorul apasa un buton de trimitere, iar tu primesti datele introduse in formular sub forma unui e-mail sau datele vor fi procesate cu ajutorul unui limbaj de programare si adaugate intr-o baza de date. Cum poi s creti viteza de ncrcare a site-urilor? Ca s creti viteza de ncrcare a site-urilor n Internet Explorer trebuie s urmezi paii: 1. Salvezi fisierul ie.reg (descarca acest fiier)(click dreapta, Save target as) 2. Dai dublu click el pentru a face import n regitrii 3. Restartezi sistemul. Aceast metod mrete numrul de conexiuni simultane care i sunt permise lui Internet Explorer de la 2 (sau 4) la 16. Test viteza de incarcare website Cu acest test poti verifica timpul de incarcare a siteului tau . Poti afla usor daca trebuie sau nu sa iti mai optimizezi pagina . (http://www.tusiromania.ro/pages/utile/unelte-seo/test-viteza-de-incarcare-a-siteului-website-speed-test.php ) Poi s scazi viteza de ncrcare a sitului tu folosind imagini care au mai aprut i n alte pagini ale sitului, deoarece acestea aprnd o dat pe o pagin anterioar vor fi ncrcate din cache sau chiar din server. Aceast tactic de web design este folosit n special pentru casetele de titluri care pot fi sparte n imagini separate. Cnd o pagin nou se ncarc, elementele din pagina veche sunt ncrcate din cache, lsnd doar noile elemente s se ncarce. Desi aplicatiile create cu Macromedia Flash sunt spectaculoase si se pot realiza efecte speciale deosebit de atractive, un astfel de fisier poate ajunge cu usurinta la dimensiuni care depasesc 1 megabyte, ceea ce incetineste considerabil viteza de incarcare a paginii. In plus, pentru vizualizarea corecta a acestora, vizitatorul trebuie sa descarce plug-in-ul

14

I - PROIECTAREA PAGINILOR WEB Shockwave in cazul cand nu il are deja instalat pe computerul propriu. Este foarte neplacut pentru vizitator sa efectueze toate aceste operatii doar pentru a constata ca informatiile prezentate in aceasta forma puteau fi tot atat de bine prezentate ca text sau imagini obisnuite. 6 Cerine de prezentare a informaiilor prezentate n documentele Web (vezi si blregulidewebdesign.doc) Cerinele de prezentare a informaiilor prezentate n documentele Web sunt: - de coninut, - acurateea, - lizibilitatea, - design-ul, - conformitate cu cerinele proiectului. Lizibilitate care poate fi citit (cu uurin); cite (DEX). Lizibilitatea este definita ca usurinta cu care un document poate fi citit.Cea mai buna combinatie de lizibilitate pentru site este text negru pe fundal alb, dar exista si alte combinatii de asemenea, excelente. In afara de alb, alte culori eficiente pentru fundal, sunt culorile albastru inchis, gri si negru. Evitati culori light, pentru lizibilitate. Anumite informatii pe care trebuie sa fie aduse in atentia vizitatorilor poate fi evidentiat prin culoare, acest lucru imbunatateste si poate ajuta la reducerea de oboseala vizuala.Un factor important in dezvoltarea unui site web este utilizarea de diferite culori pentru hyperlink-uri, in scopul de a ajuta utilizatorii sa distinga intre paginile pe care le-au vizitat deja si pagini nevizualizate inca. 10 porunci ale web designerilor 1. Sa nu ma faci sa astept daca trebuie sa astept mai mult de 10 secunde pana ti se incarca pagina, poti foarte bine s-o inlocuiesti cu un mesaj dragut de bun-ramas. 2. Sa nu ma pui la treaba daca dureaza mai mult de 5 minute pana-ti gasesc informatiile de contact (sau mai rau, pana inteleg ce vinzi de fapt) EU PLEC. Oamenilor le place sa fie informati rapid, iar marele public este in general lenes si nerabdator. Nu-l pune la treaba. 3. Sa nu ma omori cu continut exagerat in flash flash este o unealta minunata. Poate adauga elemente atractive site-ului tau si poate arata ca esti la curent cu cea mai noua tehnologie. Astea fiind zise n-am chef sa ascult la infinit aceeasi melodie tehno pana cand navighez pe site-ul tau sau sa fac o migrena enervanta de la show-ul laser de pe fiecare pagina. Un mesaj scurt si concis in flash da impresie de profesionalism si in acelasi timp, te impiedica sa incalci porunca nr. 10. 4. Sa nu ma bombardezi cu informatii vechi si inutile probabil ca asta e cea mai rapida metoda de a scapa de vizitatori. Un continut bogat si tinut la zi este calea sigura catre inima vizitatorilor. 5. Sa nu uiti sa-mi faci cadouri imi place sa primesc lucruri. Nu conteaza ce este, atata timp cat este pe gratis. Ofera ceva util vizitatorilor tai. Daca pagina ta web promoveaza un serviciu oarecare, ofera o carte electronica gratuita sau un newsletter cu informatii relevante despre serviciul oferit. Scopul este de fapt construirea unei liste cu abonati despre care stii deja ca sunt interesati de ce ai tu de oferit. 6. Sa nu ma chinui cu navigatie neclara asta merge mana in mana cu sa nu ma pui la treaba dar e atat de important ca merita o porunca proprie. Navigarea ar trebui sa fie consistenta. Nu ma fa sa pierd timp cautand la nesfarsit o modalitate de a trece de la o

15

I - PROIECTAREA PAGINILOR WEB pagina la alta. Alege un meniu orizontal sau vertical pentru link-urile principale si pastreaza-l in tot site-ul. 7. Sa nu pari un amator Link-uri care nu duc nicaieri, combinatii de culori tipatoare, fonturi ciudate de marimi diferite te vor face automat sa pari un amator. 8. Sa nu-ti inchipui ca e suficient sa-ti construiesti o pagina web iar vizitatorii vor navali si vor incepe sa cumpere ca in oricare afacere e nevoie si aici de timp, efort si (ceva) bani. Planifica o strategie de marketing care te diferentiaza de concurenta. 9. Sa nu uiti sa-ti faci planuri de viitor odata ce ti-ai construit pagina web si ai inceput s-o promovezi, lucrurile se vor schimba. Planifica-ti telurile. 10. SA NU-TI INCHIPUI CA SUNT UN IDIOT nu folosi mesaje ca garantez ca vei face milioane, nu va mai trebui sa lucrezi niciodata ... nu functioneaza! Poarta-te ca un profesionist si castiga increderea vizitatorilor tai. Ofera-le informatii utile pe care se pot baza. Clientii pe care-i vrei sunt cei care se intorc. Demonstreaza-le ca merita sa-si piarda vremea pe pagina ta si nu le subestima inteligenta. (http://forum.softpedia.com/index.php?showtopic=199357 ) Cinci reguli importante in web design Cand este vorba de site-ul tau trebuie sa acorzi o atentie sporita oricarui detaliu pentru a te asigura ca se comporta optim in deservirea scopului pentru care a fost creat. Iata 5 reguli importante de web design care trebuiesc respectate la realizarea unui site web. 1. Nu folosi pagini de intampinare Paginile de intampinare sunt primele pagini pe care le vede cineva atunci cand iti viziteaza website-ul. In mod normal au un design deosebit si contin cuvinte de genul "bine ati venit" sau "click aici pentru a intra in site". De fapt aceste pagini nu au nici o valoare reala. Nu da vizitatorilor site-ului motive de a folosi butonul "back". Afiseaza-le direct in fata informatia de care au nevoie, punandu-ti astfel in valoare website-ul. 2. Nu folosi in mod excesiv bannerele publicitare Cei care navigheaza pe site-uri s-au obisnuit sa ignore avertismentele de tip banner deci vei irosi spatiu important in website cu acestea. In schimb insereaza in website mai mult continut valoros, creeaza link-uri relevante pentru continut si lasa vizitarorul sa simta ca doreste sa cumpere in loc sa-l impingi sa cumpere. 3. Implementeaza un sistem de navigare foarte simplu Website-ul trebuie sa aiba un sistem de navigare foarte simplu astfel incat sa-l poata folosi chiar si un copil. Fereste-te de complicatele meniuri flash sau de meniurile "multi-level". Daca vizitatorii nu stiu cum sa navigheze ei vor parasi website-ul. 4. In orice moment vizitatorul trebuie sa cunoasca locul in care se afla Cand vizitatorii sunt profund preocupati de navigarea prin website-ul tau va trebui sa te asiguri ca acestia stiu unde se afla in orice moment.Fiecare vizitator trebuie sa poata accesa foarte usor orice informatie importanta a site-ului sau sa poata naviga foarte usor in orice sectiune a acestuia. 5. Evita utilizarea in website a secventelor audio Daca vizitatorul va sta mai mult timp pe website-ul tau, citind continutul acestuia, trebuie sa te asiguri ca nu va fi contrariat de

16

I - PROIECTAREA PAGINILOR WEB repetarea secventelor audio pe care le contine site-ul tau web. Daca insisti totusi pentru adaugarea secventelor audio asigura-te ca vizitatorul are controlul asupra acestora - prin controlul volumului sau printr-un buton "mute". (http://www.webdesigngalati.ro/index.php?pag=8&id_articol=1&pag_title=Cinci%20reguli%20importante%20i n%20web%20design ) Acuratete Grij deosebit, atenie mare, exactitate n executarea unui lucru. (DEX) Acurateea informaiilor pe care le prezini ntr-un text e sfnt. Interpretarea i subiectivitatea sunt moduri de a manipula o informaie (mai mult sau mai puin cinstit n funcie de cine i cum o face), dar informaia aia ar trebui s fie corect orice greeal de nume, de titlu, de timp ciobete integritatea i credibilitatea ntregului text. blregulidewebdesign.doc Reguli de webdesign Prin webdesign se nelege nu doar realizarea interfeei website-ului, ci i realizarea propriu-zis a acestuia, care const n introducerea textului, imaginilor, fiierelor audio, video, etc. Respectarea anumitor regului de webdesign duce la realizarea unui site eficient i la evitarea erorilor. Aceste reguli se refer la: text, mod de navigare, mod de organizare, download-are, aspectul paginilor web, liste, imagini, multimedia, coninutul paginilor, etc. S-a constatat c studierea unui site sau ignorarea sa sunt decise de cele mai multe ori n primele 30 de secunde ale vizitrii sale. De aceea, prima impresie este decisiv. Elementele remorcate vor fi: structura informaiei, viteza de ncrcare, calitatea grafic. n momentul n care concepem design-ul site-ului, principalul nostru obiectiv este s realizm un aspect ct mai atractiv. n etapa de design, stabilim cte imagini vom include n pagina web, ct text va conine aceasta, care vor fi textele i imaginile care vor fi utilizate drept legturi. 1. Organizarea site-ului Organizarea site-ului este o etap deosebit de important, succesul site-ului fiind strns legat de aceasta. Din punct de vedere al structurii, exist mai multe tipuri de site-uri: - site-uri liniare alctuite dintr-o singur pagin sunt utilizate cnd informaiile sunt sub form de text, care se poate mpri firesc n seciuni mai mici; de obicei la nceputul paginii exist o list de legturi interne (ancore), care conduc vizitatorul la seciunea care l intereseaz; - site-uri liniare formate din mai multe pagini sunt utilizate cnd informaiile prezentate urmeaz ntr-o ordine secvenial, de la nceput la sfrit; fiecare pagin trebuie s conin legturi cu pagina anterioar, cu pagina urmtoare, cu prima pagin a site-ului; prima pagin a site-ului este indicat s conin cuprinsul pentru a asigura saltul direct la o anumit pagin; pentru o navigare comod, este indicat ca paginile s nu depeasc un ecran; - site-uri cu structur ierarhic n acest caz, exist prima pagin a site-ului (home), de nivel zero; ea conine legturi ctre alte pagini, de nivel unu; acestea la rndul lor pot avea legturi ctre alte pagini, de nivel doi, .a.m.d.; n cazul acestui tip de site-uri, este 17

I - PROIECTAREA PAGINILOR WEB indicat s fim ateni la organizarea logic i fluent a site-ului; fiecare pagin trebuie s aib o legtur ctre pagina principal; - site-uri cu structur de tip reea sunt site-uri care au o structur liber; acestea sunt alctuite din mai multe pagini, fiecare pagin poate avea legtur cu orice alt pagin; este recomandat un astfel de site pentru subiectele care nu au o structur logic intern; este important ca fiecare pagin s aibe, pe lng legturile ctre alte pagini, i o legtur ctre prima pagin a site-ului. 2. Schia site-ului Dup ce ne-am hotrt cum va fi organizat site-ul, vom realiza o schi a acestuia. n acest caz, ntr-un fiier Word sau pe o hrtie, vom scrie toate aspectele pe care dorim s le tratm n prima pagin a site-ului. Apoi, vom stabili elementele care vor aprea n aceast pagin, precum i poziionarea lor. Aceste elemente pot fi: imagini, fiiere multimedia, formulare, etc. Dup aceea, stabilim care vor fi paginile de nivel unu, ce informaii vor trata, paginile subordonate paginilor de nivel unu. La fel vom proceda cu fiecare pagin n parte. Cnd vom face analiza fiecrei pagini a site-ului, este bine s ne rspundem clar, la urmtoarele ntrebri: 1. Ce dorim s afle vizitatorul din pagina respectiv? 2. Ce dorim s fac vizitatorul n momentul respectiv? 3. Ce dorim s simt vizitatorul parcurgnd pagina respectiv? 4. Unde dorim s mearg mai departarte vizitatorul? 3. Pagina de start (home page) n general, prima pagin a site-ului (pagina home) stabilete cui aparine site-ul, descrie scopul site-ului, descrie structura acestuia (are i funcia de cuprins al site-ului), furnizeaz informaii de contact, stabilete relaiile ntre paginile de nivel unu i cele subordonate lor (cu ajutorul barelor de navigare, butoanelor, listelor de legtur sau a hrilor de imagine). Este foarte important ca n prima pagin a site-ului s accentum ceea ce site-ul nostru ofer de valoare utilizatorilor i cum difer serviciile noastre de cele ale principalilor concureni. Acest pagin va avea un aspect diferit fa de celelalte pagini din site i nu va depi dimensiunile unui ecran. Elementele care trebuie s atrag atenia vor fi plasate n partea de sus a acestei pagini. Pe pagina de nceput vom prezenta toate opiunile importante, astfel nct vizitatorii s nu fie nevoii s ajung pe paginile de pe nivelul unu i doi pentru a gsi toate opiunile site-ului. Accesul la pagina de start va fi asigurat din orice pagin a site-ului, prin intermediul logo-ului i/sau printr-un link separat numit Home. Este o regul care spune c niciodat nu trebuie s legm un punct de el nsui, deoarece dac utilizatorul nu este atent unde este, el va fi confuz unde a ajuns, i n plus va fi o pierdere de timp pentru el s ajung n acelai loc. Acest lucru este valabil i pentru pagina home. Pe prima pagin este necesar ntotdeauna s promovm ultimele articole scrise sau ultimele produse oferite, facilitnd accesul ctre nou pe homepage. 4. Paginile din interior

18

I - PROIECTAREA PAGINILOR WEB n cazul n care, subiectul tratat n cadrul site-ului este vast, paginile de nivelul unu este bine s nu fie ncrcate, detalierea urmnd a o realiza n cadrul paginilor de nivel doi. Paginile de nivel unu este bine s conin descrierea subiectului tratat, precum i legturile ctre paginile de pe nivelul doi, pagini care vor detalia subiectul respectiv. O tehnic des utilizat, este plasarea n paginile de pe nivelul trei a unor informaii suplimentare. Prin utilizarea acestei tehnici, paginile de pe nivelul doi nu vor fi ncrcate. Vom realiza templat-uri care s conin acelai tip de elemente pentru toate paginile. Ele vor fi folosite drept tipare n momentul scrierii coduluiHTML pentru paginile respective. 5. Navigarea Este important ca n cadrul site-ului s avem opiuni clare de navigare. n cazul n care site-ul este de dimensiuni mari, este indicat s creem o hart a site-ului. Ea va conine legturi ctre toate paginile, ele fiind grupate conform modului n care site-ul este organizat. Tot n acest caz, este bine ca n partea de sus, a fiecrei pagini s fie o bar de navigare, prin intermediul creia vizitatorii s fie informai clar asupra localizrii lor n site (de exemplu: home / pagin_nivel_1 / pagin_nivel_2 / pagina_curent). Principalele meniuri de navigare vor fi plasate n panoul din stnga. Vom folosi aceleai elemente grafice de navigare, pentru a mri astfel eficiena browser-ului, deoarece acestea vor fi ncrcate n memoria cache la deschiderea primei pagini, astfel ncrcarea lor la fiecare pagin nu va mai fi necesar. 6. Legarea paginilor (link-uri) Un alt aspect pe care trebuie s-l avem n vedere atunci cnd concepem un site, este modul n care realizm legturile dintre paginile site-ului. Acesta depinde de structura pe care o are site-ul. n cazul n care site-ul are o structur ierarhic, legturile vor fi adaptate acestei structuri. Utilizatorul va urma o cale prestabilit pentru a ajunge la o anumit informaie. Putem ns s legm fiecare pagin la toate paginile, n acest caz structura fiind neierarhic. Aceast structur ns este indicat pentru site-urile de dimensiuni reduse. Este important ca etichetele de legturi s fie explicite, pentru cel care realizeaz site-ul, dar i pentru vizitatorii site-ului. Este indicat ca s potrivim numele legturii cu paginile destinaie. Pentru vizitatori este util s tie ce legturi a accesat, de aceea este bine s marcm legturile accesate. Lungimea textului legturilor este bine s fie de lungime potrivit. Este folositor pentru vizitatori s introducem legturi ctre informaii ajuttoare. 7. Fragmentarea informaiilor Un alt aspect important n realizarea unui site, este fragmentarea corect a informaiilor. Este indicat ca o pagin web s conin o cantitate de informaie nu foarte mare, pentru ca vizitatorul s nu se simt compleit i totodat pentru a se asigura o ncrcare rapid a paginii. Trebuie evitat ns i fragmentarea excesiv, care poate obosi vizitatorul. Este util s afim doar informaiile utile n paginile site-ului. Pentru a grupa elementele asemntoare vom folosi culori asemntoare. 8. Prezentarea textului Putem formula urmtoarele reguli legate de prezentare a textului n pagin:

19

I - PROIECTAREA PAGINILOR WEB 1. Elementele importante dintr-o pagina web vor fi evideniate, fie prin scrierea cu majuscule, fie prin scrierea cu un font de dimensiune mai mare, fie prin ngroare, fie prin nclinare, fie prin subliniere. Excesul de texte scrise ngroat sau colorat, fac ca pagina s fie ncrcat i greoaie. 2. Dimensiunea minim a fonturilor va fi de minim 12 puncte. 3. Vom utiliza fonturi familiare, pentru a evita micorarea vitezei de citit. Cele mai apreciate sunt: Verdana i Arial, deoarece sunt foarte uor de citit i sunt i elegante. 4. Vom utiliza armonios culorile textului i fundalului. De exemplu putem folosi textul negru pe un fundal simplu, cu un contrast mare. 5. Nu vom aranja textul n pagin pe coloane, deoarece citirea sa s-ar realiza dificil, n sensul c vizitatorul va trebui s revin la partea de sus, pentru a citi textul din urmtoarea coloan. 6. Vom folosi maxim dou-trei tipuri de scris. Fiecare tip de scris va fi ales pentru un anumit scop. n cazul n care utilizm mai multe tipuri de scris, citirea de ctre vizitator ar putea obositoare. 7. Elementele de baz le vom formata n acelai fel. De exemplu, formatul orei putem sl stabilim astfel HH:MM:SS. 8. Vom folosi cuvinte simple. 9. Vom evita folosirea jargonului. 10. n cazul n care, avem n pagina web un tabel, este bine ca acestea s aibe un antet clar, explicit. 11. Prima fraz a unei pagini web trebuie s fie ca un fel de titlu. 9. Grafic, imagini, multimedia Putem prezenta cteva sugestii legate de grafic, imagini i imagini: 1. Este bine s limitm folosirea acestora n paginile site-ului. 2. Grafica nu trebuie s arate ca bannerele publicitare. 3. Imaginile pe care vom folosit n site, trebuie s exprime clar mesajul dorit i s nu le utilizm doar pentru c d bine. 4. Vom folosi imaginile pentru a facilita nvarea. 5. Putem folosi imagini simple pentru background. 6. Este indicat s folosim logo-uri. 7. Este bine dac introducem n site i animaii, dar este bine s evitm excesul lor i s aibe legtur cu coninutul. 8. n cazul n care vom folosi n site fiiere de sunet, vom lsa vizitatorului posibilitatea de a deschide sau nu acele fiiere. 9. n cazul fiierelor video, vom proceda la fel ca i n cazul fiierelor de sunet. 10. Greeli de webdesign Aceste greeli apar tocmai datorit nerespectrii regulilor de webdesign prezentate n acest capitol. Printre aceste greeli de webdesign putem enumera: - excesul de elemente multimedia; - paginile dezorganizate; - paginile de dimensiuni mari; - paginile fr instrumente de navigare; - paginile n care grafica arat ca bannerele publicitare; - paginile cu aspect ncrcat;

20

I - PROIECTAREA PAGINILOR WEB - lipsa opiunilor de tiprie; vizitatorii s-ar putea s aib nevoie de informaiile respective n format printabil; - paginile care necesit un timp mare de ncrcare; s-a observat c dup 20 de secunde vizitatorii prsesc site-ul; ar fi indicat ca s avertizm vizitatorii printr-un mesaj despre acest lucru; - listele din cadrul paginilor web care depesc cinci opiuni; s-a observat c vizitatorii vor ignora restul de opiuni din lista respectiv; - utilizarea frazelor lungi; acestea pot distruge esena. 11. Concluzii Observm deci c nu este suficient s cunoatem limbajul HTML pentru a construi un site. Trebuie de asemenea s cunoatem i s aplicm regulile de webdesign. Site-ul trebuie s fie orientat ctre satifacerea nevoilor de informaie ale utilizatorilor. Nerespectarea regulilor de webdesign duce la ndeprtarea vizitatorilor de site-ul nostru, ceea ce nu este de dorit. n cazul n care nu avem idee despre aceste reguli, putem analiza alte site-uri care trateaz acelai subiect ca i site-ul nostru, orientndu-ne n conceperea sa.

21