Web design - konceptet themelore

1. Web dizajni
– konceptet themelore
Tahir Hoxha
www.akademiavirtuale.com

2. 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

3. 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.

4. 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.

5. 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.

6. 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ë.

7. 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.

8. 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.

9. Responsive Web

10. 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.

11. 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)

12. 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.

13. 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>

14. 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.

15. 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>

16. 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.

17. 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)

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

19. body
div
p ul
li li
p
div
p p