Transcript Structura unui site Web

Structura unui site Web
1. Tipuri de site-uri Web
• Paginile statice sunt formate din text, imagini şi tag-uri
HTML pentru formatare. Aceste pagini sunt create şi
întreţinute manual, astfel că dacă informaţiile se modifică şi
pagina trebuie modificată. Aceasta implică încărcarea
paginii într-un editor, realizarea modificărilor, reformatarea
textului dacă este necesar şi apoi salvarea fişierului. Aceste
operaţii necesită foarte mult timp dacă numărul paginilor
care trebuie actualizate este mare.
• Paginile dinamice conţin foarte puţin text. În schimb extrag
informaţiile necesare din alte aplicaţii. Paginile dinamice
pot comunica cu bazele de date, foi de calcul tabelar,
sisteme de gestiune a bazelor de date client-server şi multe
alte aplicaţii.
Crearea paginilor Web dinamice permite crearea de aplicaţii puternice,
care pot include caracteristici precum următoarele:
• interogarea aplicaţiilor de baze de date existente pentru obţinerea
datelor
• crearea de interogări dinamice care facilitează obţinerea în mod flexibil a
datelor
• execuţia procedurilor stocate
• execuţia codului condiţional on-the-fly pentru a personaliza răspunsurile
în funcţie de situaţiile specifice
• sporirea capabilităţilor formularelor HTML standard prin folosirea unor
funcţii de validare
• popularea în mod dinamic a elementelor din formulare
• personalizarea modului de afişare a informaţiilor legate de dată, timp şi
monedă folosind funcţii de formatare
• uşurarea creării aplicaţiilor de introducere a datelor prin wizards
• generarea automată de email
• site-uri comerciale şi coşuri electronice de cumpărături
• E-learning-este un tip de învățământ care se înfăptuiește prin intermediul
Internetului. Web-siteurile care pot fi sub forma de: web-manuale(cărți
electronice), web-cursuri(cursuri virtuale), web-teste s.a.
• Prin comerț electronic (e-comert) se subânțelege orice formă de înțelegeri
cu privire la afaceri, la care conlucrarea între părți are loc în mod
electronic în loc de schimb sau contact fizic între părți și în urma căreia
dreptul de utilizare sau proprietate a mărfii sau serviciului este transmis
de la o persoana la alta.
• E-banking presupune: plăţi în lei şi valută, plăţi planificate (la termen sau
recurente) sau schimb valutar, deschidere de conturi sau de carduri,
administrarea portofoliului de credite, plăţi cu telefoane inteligente etc.
2 . Structura unei pagini din cadrul unui site web (unui document
HTML). Elemente specifice publicării si regăsirii site-ului în cadrul
motoarelor de căutare
• Conţinutul unui site este foarte important pentru motoarele de căutare,
fiind definitoriu în obţinerea unei clasări cât mai bune. De aceea trebuie
să-i acordaţi acestuia o atenţie sporită, ţinând cont de următoarele
aspecte:
• Fiecare pagină web trebuie să aibă titlu descriptiv şi nu „pagina1”,
„unknown”, „new” etc.
• Nu trebuie să existe pagini web care să nu aibă text. Dacă sunt prezentate
imagini, trebuie să existe măcar denumirile imaginilor. Ar fi binevenită o
descriere a imaginilor, cu ajutorul atributului ALT.
• Nu folosiţi text de diferite mărimi şi prea multe culori.
• Conținutul trebuie să fie original! Nu copiaţi informații de pe alte site-uri,
deoarece materialul duplicat va fi penalizat.
• Asiguraţi-vă că stăpâniţi gramatica. Evitaţi scrierea neglijentă pe site, cu
greşeli de ortografie şi mai ales folosirea limbajului de Messenger, gen „k”,
„nashpa”, „dc” etc.
• Folosiţi pe cât posibil tastatura în limba română şi diacriticele (ă, î, â, ş, ţ).
• Motoarele de căutare au învățat să afișeze rezultatele căutării chiar dacă
căutarea se face după cuvinte fără diacritice.
3. Elemente de conţinut ale paginilor
web
• O pagina web poate conţine următoarele
elemente: texte, tabele, liste, imagini, hărţi de
imagini, sunete, animaţie, cadre, filme,
butoane, casete de dialog, casete combinate,
ferestre, texte.
•
•
•
•
•
•
•
•
•
•
Meniul de navigare
Meniul este o reprezentare grafica sau de tip text a continutului si este adesea încorporat în tema
generala a sitului. Meniul principal trebuie sa furnizeze trimiteri rapide si directe la sectiunile si
informatiile disponibile dintr-un site web. El va fi realizat într-o forma practica si atractiva.
Locul obisnuit pentru plasarea meniului principal este în partea stânga a ecranului dar el mai poate
fi plasat si în partea dreapta sau în partea superioara a paginii web. Sectiunile meniului vor fi
denumite astfel încât sa ofere o descriere concisa si sugestiva a paginilor web care vor fi accesate.
Cîteva dintre schemele de navigare cele mai des întîlnite sunt urmatoarele :
legaturi text
harti grafice ( imagemaps )
butoane de navigare
meniuri tip lista derulanta ( generate cu Javascript , CGI )
pagini generate dinamic
harta sitului ( site map )
De multe ori, începatorii si chiar netsurferii mai versati se pot încurca atunci cînd folosesc un sistem
de navigare mai complicat.
Din aceasta cauza, se recomanda de realizat si o pagina web continînd o harta a sitului. Pentru ca
harta sa poata fi gasita usor e de dorit de pus o legatura directa catre aceasta în fiecare meniu de
navigare.
Aceasta harta este utila si atunci cînd se doreste cautarea rapida a unei informatii sau a unui
subiect, fara a fi nevoie sa se navigheze prin tot situl. Ea trebuie sa fie clara si logica si în acelasi
timp sa afiseze corect structura sitului. Mai poate fi realizata sub forma de tabel, arbore de
legaturi,etc.
Cheia pentru o navigare usoara este o buna organizare. Cu cît situl va fi mai mare si mai complex, cu
atît va fi mai dificila sarcina organizarii acestuia si realizarii unui sistem de navigare consistent.
• Cadre
• Cadrele ne permit sa afisam doua sau mai multe pagini
web, în acelasi timp, prin împartirea ecranului în mai multe
sectiuni independente. Initial, cadrele au fost o inovatie a
firmei Netscape dar pe parcurs ele au fost folosite din ce în
ce mai mult si tot mai multe browsere le-au acceptat.
Ele reprezinta o metoda controversata de machetare a unei
pagini web. În rîndul web-designerilor exista sustinatori si
adversari ai folosirii cadrelor ca o solutie eficienta de
aranjare în pagina. De aceea, înainte de a ne hotarî asupra
folosirii cadrelor în situl nostru, analizam modul cum dorim
sa organizam si sa structuram paginile web. Folosirea
cadrelor prezinta atît avantaje cît si dezavantaje.
•
•
Tabele
Tabelele sunt folosite atît pentru o machetare eficienta cît si pentru a face mai
atractive diversele elemente componente ale unei pagini web. Ele permit o
împartire a paginii în sectiuni si o pozitionare precisa a textului sau imaginilor în
interiorul paginii.
Putem crea margini sau borduri de diferite dimensiuni si culori. De asemenea, se
poate încapsula continutul în celulele tabelului pentru a permite alinierea textului si
a limita lungimea liniilor. De oarece, bordura tabelelor nu este totdeauna necesara si
uneori poate avea un aspect neplacut, se poate renunta la ea prin folosirea
atributului "BORDER = 0". Atunci cînd folosim tabele, putem sa setam o latime fixa,
în pixeli, sau o latime relativa la dimensiunea ecranului, în procente.
De exemplu, daca folosim atributul WIDTH=80%, continutul va fi afisat pe 80% din
latimea ecranului. În acest caz, afisarea continutului se adapteaza mai usor la
diferitele tipuri de monitoare sau rezolutii ale acestora. Setarea latimii în procente
se face mai ales la paginile unde exista mult text si unde nu este necesara o
formatare precisa. Pe de alta parte, tabelele definite cu o latime fixa în pixeli vor
ramîne neschimbate. În acest caz, daca se foloseste o rezolutie marita va apare un
spatiu alb, în afara tabelului care va da uneori o imagine neplacuta. În schimb,
setarea unei latimi fixe va permite un control ridicat al printarii, realizînd o tiparire
fara întreruperi laterale ale paginii web respective.
4. Ierarhia paginilor în cadrul site-ului web.
Sistemul de link-uri, pagina de start
•
•
•
•
•
•
Din punct de vedere al structurii, există mai multe tipuri de site-uri:
site-uri liniare alcătuite dintr-o singură pagină – sunt utilizate când informaţiile sunt sub formă de
text, care se poate împărţi firesc în secţiuni mai mici; de obicei la începutul paginii există o listă de
legături interne (ancore), care conduc vizitatorul la secţiunea care îl interesează;
site-uri liniare formate din mai multe pagini – sunt utilizate când informaţiile prezentate urmează
într-o ordine secvenţială, de la început la sfârşit; fiecare pagină trebuie să conţină legături cu pagina
anterioară, cu pagina următoare, cu prima pagină a site-ului; prima pagină a site-ului este indicat să
conţină cuprinsul pentru a asigura saltul direct la o anumită pagină; pentru o navigare comodă, este
indicat ca paginile să nu depăşească un ecran;
site-uri cu structură ierarhică – în acest caz, există prima pagină a site-ului (home), de nivel zero; ea
conţine legături către alte pagini, de nivel unu; acestea la rândul lor pot avea legături către alte
pagini, de nivel doi, ş.a.m.d.; în cazul acestui tip de site-uri, este
indicat să fim atenţi la organizarea logică şi fluentă a site-ului; fiecare pagină trebuie să aibă o
legătură către pagina principală;
site-uri cu structură de tip reţea – sunt site-uri care au o structură liberă; acestea sunt alcătuite din
mai multe pagini, fiecare pagină poate avea legătură 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ă
aibă, pe lângă legăturile către alte pagini, şi o legătură către prima pagină a site-ului.
•
•
•
•
•
•
•
•
•
Pagina de start (home page)
În general, prima pagină a site-ului (pagina home) stabileşte cui aparţine site-ul,
descrie scopul site-ului, descrie structura acestuia (are şi funcţia de cuprins al siteului), furnizează informaţii de contact, stabileşte relaţiile între paginile de nivel unu
şi cele subordonate lor (cu ajutorul barelor de navigare, butoanelor, listelor de
legătură sau a hărţilor de imagine).
Este foarte important ca în prima pagină a site-ului să accentuăm ceea ce site-ul
nostru oferă de valoare utilizatorilor şi cum diferă serviciile noastre de cele ale
principalilor concurenţi.
Această pagină va avea un aspect diferit faţă de celelalte pagini din site şi nu va
depăşi dimensiunile unui ecran.
Elementele care trebuie să atragă atenţia vor fi plasate în partea de sus a acestei
pagini.
Pe pagina de început vom prezenta toate opţiunile importante, astfel încât
vizitatorii să nu fie nevoiţi să ajungă pe paginile de pe nivelul unu şi doi pentru a
găsi toate opţiunile 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ă legăm un punct de el însuşi,
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 acelaşi loc. Acest lucru este
valabil şi pentru pagina home.
Pe prima pagină este necesar întotdeauna să promovăm ultimele articole scrise
sau ultimele produse oferite, facilitând accesul către „nou” pe homepage.
• Paginile din interior
• În cazul în care, subiectul tratat în cadrul site-ului este vast, paginile
de nivelul unu este bine să nu fie încărcate, detalierea urmând a o
realiza în cadrul paginilor de nivel doi. Paginile de nivel unu este bine
să conţină descrierea subiectului tratat, precum şi legăturile către
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 informaţii suplimentare. Prin utilizarea acestei tehnici, paginile
de pe nivelul doi nu vor fi încărcate.
• Vom realiza templat-uri care să conţină acelaşi tip de elemente
pentru toate paginile. Ele vor fi folosite drept tipare în momentul
scrierii codului HTML pentru paginile respective.
• Navigarea în cadrul site-urilor este posibilă cu ajutorul
link-urilor (legăturilor). Pentru a folosi legături în
paginile web pe care le vei face, trebuie să foloseşti
perechea de tag-uri <A> si </A>. Numele acestor taguri vine de la cuvântul anchor care se traduce ancora.
• Tag-ul <A> va trebui folosit împreună cu atributul HREF.
<A HREF=numelepaginii.html>Textul legăturii</A>
Dacă pagina respectivă se află în acelaşi folder cu
pagina pe care se afla legătura atunci nu sunt necesare
ghilimelele
• Exemplu:
•
•
•
•
•
•
•
•
<HTML>
<HEAD><TITLE>Legături</TITLE></HEAD>
<BODY>
<CENTER><B>Legatura catre o alta pagina </B>
<BR><BR>
<A HREF=imagini.html>Imagine bebe</A>
</CENTER>
</BODY>
</HTML>
• Formă generală a unei legături către o adresă de e-mail
este următoarea: <A HREF="mail to:adresă de email">Trimite-mi un e-mail</A>
Pentru a folosi o imagine că legătura între tag-urile <A> si
</A>, va trebui scrisă adresă imaginii: <A HREF=nume
pagina.html><IMG SRC="adresă imaginii"</A>
• Fiecare legătura din cadrul unei pagini web are trei culori:
• o culoare pentru legăturile nevizitate (nu a fost efectuat
nici un click pe ele)
• o culoare pentru legăturile vizitate (s-a efectuat cel putin
un click pe ele)
• o culoare pentru legăturile active (atunci când cursorul
mouse-ului se află deasupra lor)
5. Criterii considerate la realizarea documentelor
Web: viteza de încărcare, raport text/imagine.
•
•
•
Viteza de incarcare a site-ului este foarte importanta din punct de vedere al
procesului de optimizare site, pentru ca in functie de durata de incarcare un
numar mai mare sau mai mic de vizitatori acceseaza paginile web. Iar numarul
vizitatorilor sporeste rezultatele campaniilor Search Engine Optimization (SEO) si
motoarele de cautare pozitioneaza site-ul, printre altele, si dupa numarul de
accesari.
Statisticile arata ca majoritatea vizitatorilor parasesc un site dupa 6-15 secunde de
la accesare, in conditiile in care acesta intazie sa se incarce. Pentru a reduce cat
mai mult posibil confruntarea cu astfel de situatii trebuie sa verifici periodic timpul
de incarcare al fiecarui element al site-ului si sa previi posibilele probleme sau
elementele care ar putea ingreuna incarcarea paginilor web. De regula fisierele
care contin clipuri sau fotografii, imagini in format mare atrag dupa sine probleme
la viteza la incarcare. Mare grija cand le utilizezi pe acestea! Este de preferat sa nu
te complici cu utilizarea lor pentru a nu diminua viteza de incarcare a paginilor
web.
De asemenea, este important sa optimizezi fiecare fisier si pagina in parte folosind
diferite unelte pe care vastul domeniu online ti le pune la dispozitie atat in
sistemul cu plata, cat si gratuit.
6.Cerinţe de prezentare a informaţiilor prezentate în
documentele Web: de conţinut, acurateţe, lizibilitate,
de design, conformitate cu cerinţele proiectului.
Conţinutul trebuie sa fie
•
Pertinent
•
Diversificat
•
Actualizat
•
Dinamic
•
Interactiv.
•
Lizibilitate 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.
Putem prezenta câteva sugestii legate de grafică şi imagini:
•
Este bine să limităm folosirea acestora în paginile site-ului.
•
Grafica nu trebuie să arate ca bannerele publicitare.
•
Imaginile pe care vom folosit în site, trebuie să exprime clar mesajul dorit şi să nu le utilizăm doar pentru că “dă
bine”.
•
Vom folosi imaginile pentru a facilita învăţarea.
•
Putem folosi imagini simple pentru background.
•
Este indicat să folosim logo-uri.
•
Site ul trebuie sa fie o dozare a necesarului de vizual, continut si accesibilitate!