Lidhjet në një Faqe Web
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).
Çfarë janë lidhjet?
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> |
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
Aktivizohet për lidhjet e pa vizituara
a:hover
Aktivizohet kur vendosim mouse-in sipër një lidhjeje
a:visited
Aktivizohet për lidhje që janë vizituar të paktën një herë
a:active
Aktivizohet kur një lidhje është klikuar
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.
|
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 */ |
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.
|
color:red; text-decoration:none; /* ja heqim vijen poshte e cila vendoset by default */ color:blue; text-decoration:underline; /* kur mouse-i vendoset siper, lidhja behet blu dhe shfaq vizen poshte */ |
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 Standardeve (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ë:
|
<a href="faqja.html" title="Shiko Lady Gaga nudo" alt="Nuk ja vlen, mos te ngelet pishman">Klikoni ketu ju lutem</a> |
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 happen në faqe të re. Kodi CSS më poshtë ju tregon si ta arrini këtë.
|
<a href="http://www.google.com/" target="_blank">Shko ne Google</a> |
|
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:
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ë:
- 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.
- Për lidhjet në menu përdorni edhe pseudo klasën :active sepse jep një efekt të këndshëm
- 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.
- 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.
