Ylber Veliu

Si ta krijojmë një faqe interneti nga 0 (zerro) deri në produkt final

Kumanovë, 2014

Përmbajtja

Hyrje ..... 3

Çka synojmë ..... 3

Çka përfshihet ..... 4

Definimi i natyrës së faqes ..... 4

Grumbullimi i materialit ..... 5

a. Teksti ..... 5

b. Multimedia (Foto, Video) ..... 5

Skicimi i faqeve ..... 6

Çka kemi përdorur ..... 11

Finalizimi i projektit ..... 12

Çka ka në CD ..... 35

Rreth autorit ..... 36

Referencat ..... 37

1. Hyrje

Të nderuar lexues jemi dëshmitarë se po jetojme kohën në të cilën teknologjia po zhvillohet

vrullshëm, deshtëm apo nuk deshtëm duhet ta pranojmë faktin që teknologjia ka hyrë në jetën

e secilit prej nesh, një numër i madh njerëzish janë bërë edhe të nvarur prej saj.

Interneti i dha shpirtë teknologjisë, rrjetet sociale, portalet, bixhozi online dhe shumë të tjera

janë pjellë e “dashurisë” njeri-kompjuter(Internet).

Web-i (Servuesi) i ofron të gjitha shërbimet klientëve anekënd botës!

Është koha që edhe ne shqiptarët të bëhemi pjesë e botës virtuale.

Në këtë punim do të përpiqemi t’ju njoftojmë me procesin se si krijohet një faqe interneti (Ang.

Web Page) nga zerro deri në krijimin e produktit final.

2. Çka synojmë

Librat për dizajnimin e faqeve të internetit janë shumë vëllimore, e rëndojnë dhe i marrin kohën

studentëve!

Andaj ne synojmë që përmes këtij punimi ti ofrojmë studentëve efektin e njejtë por për kohë

më të shkurtër.

Do të krijojmë një ueb faqe statike dhe të thjeshtë me qëllim që materiali të jetë i kapshëm

edhe për fillestarët. Synimi jonë është që të kuptohet koncepti bazë, hulumtimi dhe

eksperimentimi me përmbajtje komplekse është një punë e thjeshtë pasi ti keni kuptuar

konceptet bazë.

3. Çka përfshihet

Do të krijojmë një faqe interneti që do të përbëhet prej 5 faqeve, në të do të përfshihen të

gjitha komponentat e web-it siç janë: tipografia, linqet, listat, tabelat, multimedia, format, etj.

4. Definimi i natyrës së faqes

Do të krijojmë një faqe interneti që ofron shitje e librave online.

Faqet:

Ballina

Librat

Galeria

Rreth nesh

Kontakti

Për krijimin e faqes na është e nevojshme të kemi njohuri në:

HTML

CSS

Photoshop (Për editimin e fotografive)

Javascript/jQuery.

5. Grumbullimi i materialit

Teksti

Tekstin e faqes do ta gjeni në dokumentin teksti_i_faqes.pdf

Multimedia (Foto, Video)

Foto-t i gjeni në dosjen: foto/

Video-t i gjeni në dosjen: video/

6. Skicimi i faqeve

Skica për faqen: Ballina

Skica për faqen: Librat

Skica për faqen: Galeria

Skica për faqen: Rreth nesh

Skica për faqen: Kontakti

7. Çka kemi përdorur

Për realizimin e këtij proekti kemi përdorur:

a. Sublime Text 3 – Si hapsirë punuese

b. Can I Use – Ueb faqe e cila jep informata mbi kompatibilitetin e elementeve të HTML-it

dhe vetive të CSS-it me shfletuesit (Ang. Browsers)

c. Chrome Developer Tools – mjet i integruar në shfletuas për inspektim të elementeve dhe

verifikim të skriptave (tregon për gabimet që kemi bërë ne Javascript).

8. Finalizimi i projektit

Pasi ti kemi krijuar dosjet dhe skedarët si në figurën e më poshtme vazhdojmë me kodimin e

faqes.

Kodi do të jetë i organizuar sipas kësaj rënditje: Elementet në HTML, stilizimi në CSS dhe

Javascript (nëse kemi ngjarje (Ang. Events) në forma apo elemente tjera të faqes).

Struktura e dosjeve/skedarëve të projektit.

Kod i përbashkët për të gjitha faqet

Pejesa e sipërme (ku është logo dhe një thënje) dhe menyja.

Pjesa e sipërme dhe menyja – HTML kodi.

Stilizimi në CSS për pjesën e sipërme, header.

CSS kodi për pjesën e sipërme.

Stilizimi në CSS për menynë, menu.

CSS kodi për menynë.

Kodi i përbashkët për të gjitha faqet është gjithashtu edhe HTML kodi për pjesën e poshtme –

footer.

HTML kodi për pjesën e poshtme – footer

Stilizimi i pjesës së poshtme – footer

Pjesa e parë

Pjesa e dytë

Pjesa e tretë

Stilizimi i pjesës së poshtme – footer.

Stilzimi i përbashkët gjithashtu është edhe për trupin e faqes (dmth body tagun), div elementi

me klasën wrapper dhe grumbullimi i elementeve: h1-h6, ul tagjeve si në vijim:

Stilizimet e përbashkëta.

Kodi për faqen – “Ballina”

Tek ballina përpos elementeve të përbashkëta (header, menu dhe footer) kemi edhe elementet

që definojnë pjesën ku tregohet teksti që i dëshiron vizituesve mirëseardhje dhe u tregon për

çka është faqja, gjithashtu edhe pjesa ku tregohen librat e fundit, si në vijim.

Pjesa ku i dëshirohet vizitorëve mirëseardhje:

HTML kodi i pjesës ku i dëshirohet mirëseardhje vizitorëve.

Kodi për stilizimin e kësaj pjese duket si në vijim:

Stilizimi në CSS.

Pjesa ku shfaqen librat e rinj:

HTML kodi i pjesës ku shfaqen librat e rinj.

Pjesa e parë:

Pjesa dytë:

CSS stilizimi i pjeses ku shfaqen librat e rinj.

Pasi ta kemi shkruar kodin e mësipërm (për faqen Ballina) do të fitojmë pamjen si në foton e

mëposhtme:

Kodi për faqen – “Librat”

Kodi për faqen librat është i njejt sikurse kodi tek librat më të rinj:

HTML kodi për krijimin pamjes së librave.

Gjithashtu edhe kodi për stilizimin është i njejtë me atë të librave të rinj.

Nuk do ta përsërisim.

Pasi ta kemi shkruar kodin e mësipërm (për faqen Librat) do të fitojmë pamjen si në foton e

mëposhtme:

Kodi për faqen – “Galeria”

Në krijim e kësaj faqe nuk kemi pasur synim të dizajnojmë një galeri të thjeshtë (po deshët ta

krijoni ndiqni hapat e mësipërm, si e krijuam kodin për librat e rinj) po qëllimi ynë ka qenë që

t’ju njoftojmë me meta tagjet, këtu kemi përdorur meta tagun i cili shërben për redirect në faqe

tjetër pas disa sekondave, si në vijim.

Si funksionon meta tagu për redirect:

Në atributin http-equiv kemi specifikuar se çka dëshirojmë të bëjmë, në rastin tonë dëshirojmë

ta bëjmë faqen refresh.

Në atributin content kemi specifikuar pas sa sekondave ku dëshirojmë (në cilën adresë) të na

dërgojë kur të ndodhë freskimi i faqes (dmth refresh).

Kuptimi i meta tagut:

Pas 10 sekondave freskoje faqen dhe dërgona në adresën

www.facebook.com/zlberveliji/photos

Pasi ta kemi shkruar kodin e mësipërm (për faqen Galeria) do të fitojmë pamjen si në foton e

mëposhtme:

Kodi për faqen – “Rreth nesh”

HTML kodi për krijimin e përmbajtjes rreth nesh është si në vijim:

HTML kodi – për div tagun me klasën content, faqja Rreth nesh.

Nga HTML kodi i mësipërm është e udhës që tju japim një hyrje në temën multimedia në web.

Do ta sqarojmë video tagun i cili shërben për vendosjen e videos në web.

HTML kodi për vendosjen e videove në web.

Për çka shërben secili prej tagjeve dhe atributeve:

a. Tagu <video> - shërben për krijimin e video elementit

a. Atributi width – i cakton madhësinë video elementit

b. Atributi controls – ti shfaq apo jo kotrolat (play, stop dhe rregullimi i zërit)

c. Atributi poster – shërben për vendosjen e një fotoje si prapaskenë e videos

b. Tagu <source> - burim, nga vjen video

a. Atributi src – ku saktësishtë gjindet video

b. Atributi type – e çfar formati është video

Pasi ta kemi shkruar kodin e mësipërm (për faqen Rreth nesh) do të fitojmë pamjen si në foton

e mëposhtme:

Kodi për faqen – “Kontakti”

HTML kodi për krijimin e faqes Kontakti është si në vijim:

HTML kodi për krijimin e faqes Kontakt.

Stilizimi i kodit të mësipërm është si në vijim:

CSS kodi i faqes Kontakti.

Pasi ta kemi shkruar kodin e mësipërm (për faqen Kontakti) do të fitojmë pamjen si në foton e

mëposhtme:

Ky ishte kodi i faqes, për çdo paqartësi na kontaktoni.

Ne e pamë të udhës që këtu ta japim edhe hartën e faqes (shpresojmë ti shërben ndokujtë që

është fillestarë në navigimin e skedarëve dhe dosjeve).

Harta e faqes:

Ballina: projekti_final/ballina.html

Librat: projekti_final/librat.html

Galeria: projekti_final/galeria.html

Rreth nesh: projekti_final/reth_nesh.html

Kontakti: projekti_final/kontakti.html

Ju sugjerojmë që mos ta kopjoni kodit po ta shkruani në menyrë që të fitoni shprehi pune.

Suksese.

Çka ka në CD

Në CD janë të përfshira: projekti final, libri dhe skicat.

Nëse ndonjëra nga këto mungon në përmbajtjen e CD-së tuaj na kontaktoni.

9. Rreth autorit

Ylber Veliu I lindur me 30 Prill 1990 në Kumanovë. Shkollimin fillorë dhe të mesëm e kreu në Kumanovë ndërsa studimet univerzitare në Univerzitetin “Shën Qirili dhe Metodi” – Shkup, Fakulteti për elektroteknikë dhe teknologji të informimit. Nga viti 2009 e këtej punon si programer i pavarur dhe është krijues i dhjetra aplikacioneve (desktop dhe të bazuara në web) dhe web faqeve. Autorë i librit elektronik “Bootstrap - Hyrje në dizajnin e adaptueshëm”. Pasion ka laximin, fotografinë dhe basketbollin. Si mund të na kontaktoni: E-Mail: ylber.veliu@yahoo.com Mob. Tel. +389 72 749 855

10. Referencat

Libra:

Dizajnimi dhe zhvillimi i web-it (Konceptet bazë) – Zamir Dika & Artan Luma

HTML, XHTML, CSS and Javascript – Jon Duckett

HTML5 Digital Classroom – Jeremy Osborn

HTML Application development fundamentals – Microsft

Burime nga Interneti:

http://www.w3schools.com/

http://css-tricks.com/

http://caniuse.com/

http://stackoverflow.com/