Web dizajni – konceptet

themeloreTahir Hoxha

www.akademiavirtuale.com

Kodimi në HTML

Një Web faqe nuk është asgjë më tepër se një fajll tekstual, me dallimin që nuk i ruajmë me ekstensionon .txt por me .html ose .htm

Për sistemin operativ, edhe kur i ruajmë fajllat me ekstension .html, ata vazhdojnë të jenë fajlla të rëndomtë tekstual.

Dallimin do ta bëjnë shfletuesit (browser), të cilat janë në gjendje ta lexojnë një Web faqe dhe të dallojnë dy gjëra kryesore në të:

Tekstin që duhet t’u shfaqet vizitorëve të Web sajtit

Etiketat (tags) të cilat kanë kuptim të veçantë për shfletuesit

Kodimi në HTML

Kodimi në HTML nënkupton vendosjen e tekstit të Web faqes ndërmjet etiketave (tags).

Këto etiketa përcaktojnë se:

Cila pjesë e tekstit do të formatohet,

Si do të organizohet faqja,

Si do të duket faqja: fontet, madhësia e shkronjave, ngjyrat,...

Ku do të vendosen fotografitë, etj.

Çdo shfletues është në gjendje t’i hapë fajllat tekstualë, kështu që një Web faqe parimisht mund të mos përmbajë etiketa, por në këtë rast, teksti do të jetë i njëtrajtshëm, pa formatime me bold, italic, underline, etj.

Editorët

Mësimi i HTML nënkupton mësimin e etiketave dhe mënyrën e përdorimit të tyre gjatë ndërtimit të faqes.

Një Web faqe mund të editohet në dy mënyra:

Duke përdorur cilindo tekst editor

Notepad

Notepad++, etj.

Duke përdorur programe speciale për editimin e HTML dokumenteve

Adobe Dreamweaver

Komodo

Sublime Text

Microsoft Expression Web

Microsoft WebMatrix

KompoZer, etj.

Editorët

Editorët specialë për HTML janë më të përshtatshëm për punë sepse ndihmojnë në shkrimin korrekt të kodit, jo vetëm të atij HTML, por edhe gjuhëve të tjera përcjellëse: CSS, JavaScript, etj.

Këto programe po ashtu kanë të integruara edhe mundësi të tjera: FTP (File Transfer Protocol), që shërben për transferimin e fajllave në server

Ndërtimi dhe aplikimi i shablloneve të faqeve (Templates),

WYSIWYG mode i cili regjim mundëson që gjatë ndërtimit të faqes ta shohim pamjen e faqes ashtu si do të duket në browser,

Përdorimi i elementeve grafikë për ta përpiluar kodin më lehtë dhe më shpejt (GUI - Graphical User Interface)

Detektimi i gabimeve në kod dhe ofrimi i zgjidhjeve

Automatizimi i disa punëve, siç janë psh linkimi i fajllave, vendosja e fotografive, ndërtimi i hiperlidhjeve, etj.

Shfletuesit

Pa marrë parasysh se në cilin editor është punuar Web faqja, ajo faqe duhet të testohet në shfletues të ndryshëm.

Për nga pjesëmarrja në Web, shfletuesit më kryesorë janë:

Google Chrome

Mozilla Firefox

Internet Explorer

Safari

Opera

Testimi në shfletues të ndryshëm bëhet për të parë nëse Web faqja duket njëjtë tek të gjithë.

Shfletuesit

Pa marrë parasysh se ekziston një standard për HTML, implementimi i tij dallohet ndërmjet shfletuesve.

Ky dallim nuk është vetëm në mënyrën e interpretimit të HTML, por ka dallime edhe në mënyrën e interpretimit të CSS dhe JavaScript.

Prandaj, testimi është i domosdoshëm nëse dëshirojmë që Web faqja të jetë e aksesueshme nga vizitorë që futen me shfletues të ndryshëm.

Responsive Web

Viteve të fundit është shtuar numri i mjeteve mobile, siç janë telefonat e mençur dhe tabletët.

Kjo parashtron nevojën që Web faqet, jo vetëm të jenë të aksesueshëm nga shfletues të ndryshëm, por edhe nga mjete të ndryshme.

Një Web faqe, për të qenë në gjendje për t’u shfaqur në mjete të ndryshme që kanë ekrane të dimensioneve të ndryshme në pikselë, duhet të bazohen në parimet e Responsive Web.

Responsive Web mundëson që një Web faqe ta ndryshojë automatikisht organizimin e tërësive të veta, varësisht prej asaj prej dimensioneve në pikselë të ekranit të mjetit ku është hapur.

Responsive Web

Karakteristikat e Web faqes

Sfida e një Web dizajnuesi është që të ndërtojë Web faqe me këto karakteristika:

Të duket bukur, të ketë organizim të qartë dhe të logjikshëm, si dhe navigacion të lehtë.

Të duken njëjtë dhe të kenë funksionalitet të njëjtë në të gjithë shfletuesit (cross-browser compatibility)

Automatikisht t’i organizojnë tërësitë e faqes për t’iu përshtatur ekraneve të dimensioneve të ndryshme, pa sakrifikuar lexueshmërinë e faqes, apo integritetin e saj (responsive Web).

Të ketë kod valid, pra t’i respektojë standardet sipas W3C.

Të ketë kod të optimizuar, në mënyrë që të hapet shpejt në një shfletues.

Të ketë imazhe me madhësi dhe cilësi optimale.

Etj.

Komponentet e një Web faqeje

Një Web faqe, respektivisht një HTML dokument, përbëhet nga 3 komponente kryesore:

Struktura dhe përmbajtja (Structure & Content)

Prezentacioni (Presentation), dhe

Sjellja (Behaviour)

Struktura dhe përmbajtja (Structure & Content)

Strukturimin e një Web faqeje e realizojmë me HTML.

Me strukturim nënkuptojmë organizimin e tërësive të një Web faqeje:

Kryet e faqes (header)

Navigacioni (navigation)

Zona kryesore e tekstit (article)

Teksti anësor (sidebar)

Fundi i faqes (footer), etj.

Me HTML po ashtu e vendosim edhe përmbajtjen (content) të faqes, pra vetë tekstin, fotografitë, tabelat, formularët, videot, etj.

Pra, HTML përfshin strukturën dhe përmbajtjen njëkohësisht.

Struktura dhe përmbajtja (Structure & Content)

Ndërtojmë strukturë kur e shënojmë një etiketë, si psh.

<div><p></p></div>

Në këtë rast, kemi ndërtuar 2 elemente (div dhe p), si dhe kemi caktuar hierarkinë: që p është pasardhës i div, respektivisht që p është brenda div-it.

Ndërsa përmbajtja është teksti, fotografia apo ndonjë fajll multimedial që vendoset brenda atij elementi struktural, psh:

Ky është një paragraf.

E tash bashkarisht, struktura dhe përmbajtja:

<div><p>Ky është një paragraf.</p></div>

Prezentacioni

Me prezentacion nënkuptohet mënyra e stilizimit gjegjësisht të formatimit të elementeve strukturalë.

Mes tjerash, këtu përfshihen:

Fonti i tekstit

Madhësia e tekstit

Ngjyra e tekstit

Pozita e ndërsjelltë e seksioneve të ndryshme të faqes

Kornizat rreth elementeve strukturalë

Ngjyra e prapavijës së elementeve strukturalë

Etj.

Prezentacioni

Me HTML5 inkurajohet ndarja strikte e strukturës prej prezentacionit, gjegjësisht të veprimeve që bëjmë me HTML prej asaj që bëjmë në CSS.

Në versionet e mëhershme, ka qenë e mundur që HTML të ketë edhe etiketa për formatim.

Shembull:

<font color="red">Teksti im.</font>

Në HTML5, janë larguar të gjitha etiketat apo atributet që definojnë ndonjë aspekt të prezentacionit, siç është në shembullin e mësipërm font/color. Gjithë çka ka të bëjë me prezentacion, realizohet ekskluzivisht në CSS.

<span style=“color:red”>Teksti im.</span>

Sjellja (Behaviour)

Me sjellje nënkuptojmë aspektin dinamik, gjegjësisht interaktiv të Web faqes.

Për shembull:

Hapja e një dritareje kur klikojmë në një link.

Llogaritja e ndonjë vlere duke u bazuar në vlerat e shënuara në një formular.

Lëvizja e një imazhi nëpër ekran.

Largimi e një elementi nga faqja.

Vendosja e një elementi të ri në faqe.

Ndryshimi i karakteristikave të elementit ekzistues.

Etj.

Sjellja (Behaviour)

E tërë kjo realizohet me përdorimin e JavaScript.

JavaScript është gjuhë programore, veçanërisht e zhvilluar për përdorim nëpër shfletues, gjegjësisht nëpër Web faqe.

Me anë të JavaScript, ne mund t’i shtojmë Web faqes logjikë dhe interaktivitet.

JavaScript u përngjan gjuhëve të tjera programore siç janë C, Java, PHP, etj.

Mund të kryhen këto veprime: Leximi i vlerave (nga formulari, nga URL, nga JSON, etj.)

Krahasimi i vlerave dhe degëzimi i rrjedhës së ekzekutimit të rreshtave programorë

Llogaritje të ndryshme (aritmetikore, trigonometrike, etj.)

Përsëritje të operacioneve (ciklet)

Shtimi, ndryshimi dhe largimi i elementeve të Web faqes, apo si quhet ndryshe: manipulimet me DOM (Document Object Model)

Veprimet e HTML, CSS dhe JavaScript janë të ndërlidhur mes vete

HTML

CSS

JavaScript

body

div

p ul

li li

p

div

p p