Lidhjet janë mënyra e vetme që vizitorët e faqes tuaj arrijnë të
gjejnë informacionet që po kërkojnë. Dështoni në prezantimin e mirë të tyre dhe
do përfundoni me informacion të pagjetshëm. Në këtë guidë do ju mësoj si ti
shfaqni lidhjet në mënyrën më të mirë të mundshme përmes teorisë, kodeve dhe
shembujve konkretë. Shihni shembujt edhe futini në zbatim edhe në faqet tuaja.
Lidhjet (aka Links) janë esenca e një faqeje web, duke qenë se
lidhin informacionet me njëra tjetrën. Krijoni lidhje të shëmtuara dhe do
përfundoni me një faqe që është e vështirë për tu shfletuar e me informacione
që gjenden me vështirësi. Ndiqni këtë guidë me kujdes dhe përfitoni për të
ndërtuar faqe më të përdorshme (aka usability).
Për ata që jetojnë nën një gur dhe nuk kanë klikuar ndonjëherë
në to (pyes veten, pse po lexoni këtë guidë?), lidhjet janë një mënyrë për t’ju
dërguar në një faqe nga një faqe tjetër. Nëse jeni në faqen x.com dhe doni të
lexoni lajmet e fundit të një aktori (hmm Leo di Caprio? lol), atëherë klikoni
në një lidhje. Kaq e thjeshtë. Tani ta mbyllim me shpjegimet elementare sepse
vizitorët me eksperiencë po trashen që tani.
Në gjuhën tonë të dashur HTML, lidhjet krijohen në këtë mënyrë:
|
1
2
|
<a
href="faqja.html">Kjo
lidhje te drejton diku</a>
<a
href="http://www.faqja.com"
target="_blank">Kjo
lidhje te drejton ne nje faqe duke hapur dritare/tab te re</a>
|
Aktivizohet kur vendosim mouse-in sipër një lidhjeje
Aktivizohet për lidhje që janë vizituar të paktën një herë
Aktivizohet kur një lidhje është klikuar
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
a:link{
color:red;
/* tekstet normale te pavizituara kane ngjyre te kuqe */
}
a:visited{
color:blue;
/* tekstet e vizituara kane ngjyre blu */
}
a:hover{
color:yellow;
/* kur vendosim mouse-in siper lidhja merr ngjyre te verdhe */
}
a:active{
color:green;
/* kur e klikojme lidhjen, ajo merr ngjyre jeshile */
}
|
|
1
2
3
4
5
6
7
8
9
|
a:link{
color:red;
text-decoration:none;
/* ja heqim vijen poshte e cila vendoset by default */
}
a:hover{
color:blue;
text-decoration:underline;
/* kur mouse-i vendoset siper, lidhja behet blu dhe shfaq vizen poshte */
}
|
|
1
|
<a
href="faqja.html"
title="Shiko
Lady Gaga nudo" alt="Nuk ja vlen, mos te ngelet
pishman">Klikoni ketu ju lutem</a>
|
|
1
|
<a
href="http://www.google.com/"
target="_blank">Shko
ne Google</a>
|
|
1
2
3
4
|
a[target="_blank"]{
/* i drejtohemi te gjitha lidhjeve qe kane target="_blank" */
background:url(ikona.png)
no-repeat center right; /* vendosim ikonen si background ne cepin e djathte
te lidhjes */
padding-right:15px;
/* i bejme vend ikones */
}
|
Kjo është ikona që kam përdorur në imazhin më sipër:
Tani që mësuat si të bëni një lidhje në HTML (turp! nëse nuk e
dinit), do eksplorojmë mënyrat se si ti bëni ato më të bukura e më të dukshme.
Pseudo Klasat në
CSS
Pseudo klasat në CSS janë disa klasa të paracaktuara që na
lejojnë të “ngjyrosim” (aka style) elementët HTML për veprime të caktuara.
Çfarë na intereson ne janë lidhjet, e pikërisht këto pseudo klasa do ti
përdorim për lidhjet. Më saktësisht, ne na interesojnë këto pseudo klasa:
a:link
a:hover
a:visited
a:active
Imagjinoj që po pyesni veten si përdoren këto pseudo klasa! Spo
ju lë ta vrisni trurin më tej. Kodi më poshtë është një shembull “real” në
përdorimin e pseudo klasave në CSS.
Mos më bëj si i zgjuar sepse nuk jam i verbër! E di që ngjyrat e
mësipërme në një faqe të vërtetë do çudisnin edhe një lopë që shfleton
internetin (nëse ka kuptohet), por është thjeshtë një SHEMBULL!
Lidhjet
duhet të dallohen!
Me këtë 2 pika informacion që keni marrë deri tani duhet tashmë
ta keni vrarë mendjen se si ti përdorim për të krijuar lidhje më të bukura e më
të përdorshme. Gjëja kryesore që duhet të keni parasysh kur ndërtoni një
website (përveç faktit që duhet ta ndërtoni) është që lidhjet të dallohen nga
pjesa tjetër e informacionit. Besoj se nuk doni që vizitorët tuaj të mos dinë
kush klikohet e kush jo? Pra, logjika këtu është që lidhjet të kenë ngjyrë të
dallueshme nga pjesa që nuk klikohet e mundësisht edhe vijë poshtë (aka
underline).
Imazhi më sipër s’ka nevojë për shpjegime. Lidhjet janë të
dallueshme dhe të ftojnë të klikosh. Kjo është më e rëndësishmja dhe pikë.
Shtoni
interaksionin me :hover
Deri tani kemi lidhje që dallohen dhe me këtë jemi në rregull.
JO! Pse mos ti japim përdoruesve më tepër interaktivitet duke ndryshuar ngjyrën
apo diçka tjetër tek lidhjet kur mouse-i vendoset sipër? Sigurisht, kursori
shndërrohet në “dora me gisht tregues të ngritur” kur mouse-i vendoset mbi një
lidhje, por kjo s’është e mjaftueshme. Konsideroni kodin CSS më poshtë, i cili
percakton stile për lidhjet normale dhe ato që i vendoset mouse-i sipër.
Mos e harroni asnjëherë pseudo klasën :hover se mund të jetë
miku jot më i mirë (ose jo, por kush do t’ja di?!). E rëndësishme është ta
përdorni për lidhjet e ti ofroni vizitorëve një eksperiencë më të këndshme.
Po
lidhjet e vizituara?
Kjo është një çështje që varet nga ju dhe nga tipi i faqes.
Faqet e vogla që kanë pak lidhje nuk kanë nevojë për diferencim të të
vizituarave, ndërsa faqet e mëdha me shumë lidhje mund të kenë në mënyrë që
vizitori ta kuptojë çfarë ka parë (apo do të rishohë) e çfarë jo. Për rastin e
dytë do ja u këshilloja, por mos egzagjeroni me diferencimin sepse mund të
prishni dizenjimin. Një ngjyrë më e zbehtë e bën punën. Kini parasysh që
lidhjet e përdorura për navigim (qoftë menuja kryesore apo ajo dytësore) s’kanë
nevojë të diferencohen. Vizitorët e dallojnë lehtësisht (nëse keni bërë punën e
duhur) kush është menuja, prandaj ska nevojë ti diferenconi lidhjet.
Për
një web më të mirë, përdorni Title dhe Alt
Para shumë vitesh asnjeri s’donte t’ja dinte për webin sipas
standarteve (sepse atëherë ishte vetëm IE6) apo për vizitorët me aftësi të
kufizuara në shikim. Sot webi ka ndryshuar shumë e të gjithë duam t’ja dimë për
to (ndoshta ti jo, por NE të tjerët po), prandaj dhe punojmë për ta bërë një
ambjent më të mirë për vizitorët.
Tagu ALT (aka ALTERNATE) lexohet nga motorët e kërkimit apo nga lexuesit
zanorë të ekraneve (që përdoren nga njerëzit me probleme në shikim) për të
kuptuar se çfarë funksioni ka një lidhje dhe ku të drejton. Në fotografi, tagu
ALT shërben gjithashtu si alternativë për shfletuesit që i kanë të çaktivizuara
(nga vetë përdoruesi) imazhet apo nëse foto nuk egizston.
Tagu TITLE shfaqet kur e vendosni
mouse-in sipër një lidhjejë për të dhënë informacione se ku të dërgon lidhja.
Në varësi të kontekstit, një titull mund të mos jetë i nevojshëm nëse lidhja
është e qartë se për çfarë shërben, por në pjesën më të madhe të rasteve është
e nevojshme. Shpesh herë mund të jetë i njëjtë me tagun ALT.
Pra, krijojini lidhjet në HTML si më poshtë:
Përdorni
ikonë për lidhjet e jashtme
Sa herë na ka qëlluar të klikojmë në një lidhje, vetëm të na
hapet një dritare e re? Unë personalisht nuk e duroj dot. Nëse dua ta hap një
lidhje në faqe të re, e hap vetë! Minimumi që mund të bëjmë për mos ti acaruar
vizitorët është ti vendosim një ikonë lidhjeve të jashtme që të tregojnë se
hapen në faqe të re. Kodi CSS më poshtë ju tregon si ta arrini këtë.
Disa këshilla të tjera që në varësi të faqes mund të jenë po aq
të rëndësishme sa ato më sipër janë:
1.
Përdorni lidhje që e
përshkruajnë veten të paktën pjesërisht. Lidhje si “kliko këtu” apo “lexo më
shumë” jo gjithmonë e bëjnë punën.
2.
Për lidhjet në menu
përdorni edhe pseudo klasën :active sepse jep një efekt të këndshëm
3.
Në rastet kur lidhja
drejton në një PDF, dokument Word apo në një site social (aka Facebook)
përdorni ikonat përkatëse krahas lidhjes. Kjo do ti bëjë lidhjet shumë më
interesante.
4.
Nëse s’doni tja dini
për vizitorët që nuk përdorin mouse, shtoni një style: a:focus{
outline:0}. Kjo do heqë atë
konturin e shëmtuar që shfaqet në lidhje kur klikohen.
No comments:
Post a Comment