lënda: gjuha e web-it - gokosova.comgokosova.com/webdesign/web ii.pdf · departamenti i shkencave...

Lënda: Gjuha e WEB-it

Dizajnimi i UEB-it dhe HTML

WEB Design

Labinot Hasani

Departamenti i Shkencave Kompjuterike

Universiteti ILIRIA

18 Mars 2014, Prishtinë

Analizat, kërkimet dhe raportet

• Kuptimi i mirëfilltë i kërkesave, nevojave dhe dëshirave të shfrytëzuesve të ndërmarrjes është qendra e suksesit në dizajnimin e ueb faqeve apo ueb aplikacioneve.

• Dizajnimi i ueb faqeve/app. zakonisht fillon me hulumtimin e kërkesave, duke përfshirë edhe takimet rreth intervistave dhe mbikëqyrjen nga ndërmarrja gjatë zhvillimit të ueb faqes/app. me qëllim që të kuptojmë sa më mirë se si ueb faqeja/app. mund t’i zgjedh problemet apo si do të përdoret nga ana e shfrytëzuesve.

• Është e natyrshme që dizajnerët gjatë fazës së zhvillimit të testojnë secilën fazë të procesit me qëllim që dizajnimi dhe ndërtimi i ueb faqes/app. të jetë sa më e përdorshme për shfrytëzuesit.

• Nëse shfrytëzueset e kanë të vështirë të gjenden lehtë në përmbajtjen e faqeve të ueb-it dhe të kalojnë në hapin tjetër të procesit, atëherë duhet të ri-dizajnojmë nga fillimi ueb faqen/app.

2 ©2014 Labinot Hasani

Diagrami i kornizës (wireframe diagrams)

• Diagrami i kornizës (wireframe diagram) paraqet strukturën e faqeve të

ueb-it duke përdor planin apo skicën për secilën pjesë të ueb faqes,

sikurse në fig. 1 në vijim.

• Qëllimi i diagramit të kornizës është që të ndaj pjesët e ueb faqes dhe t’i

paraqes fushat e ueb faqes se si janë të ndara.

• Diagrami i kornizës po ashtu paraqet organizimin e navigimit, fushat e

kërkimit, elementet e formës, etj. të cilat janë të paraqitura thjeshtë pa

ndonjë dekorim apo dizajn grafik, por vetëm në vija të trasha sikurse në

fig.1 në vijim.

3 ©2014 Labinot Hasani

Diagrami i kornizës (wireframe diagrams)

Fig. 1. Diagrami i kornizës (wireframe diagrams).

4 ©2014 Labinot Hasani

Diagrami i faqes

• Diagrami i faqes paraqet strukturën e faqes në tërësi dhe lidhjen e ndërsjellët për secilën faqe. Më poshtë fig. 2. paraqet diagramin e një ueb faqe të thjeshtë.

Fig.2. Diagrami i një web faqeje të thjeshtë.

5 ©2014 Labinot Hasani

Dizajni grafik (vizual)

• Dizajni grafik ka të bëjë me ueb faqet të cilat kërkojnë vëmendje në

prezantim dhe dizajn të saj.

• Detyra e dizajnerit grafik është të ndërtoj pamjen dhe ndjenjën e ueb

faqes, siç janë; logo, grafika, tipet, ngjyrat, etj. me qellim që në hapjen e

parë të ueb faqes të len mbresa tek shfrytëzuesit, të jetë tërheqëse dhe të

jetë konsistentë në prezantimin e markës dhe mesazheve të organizatës.

• Ndërsa, dizajnerët vizual dizajnojnë skemën se si ueb faqja do të duket.

• Gjithashtu, dizajnerët vizual kanë përgjegjësi për prodhimin e skedarëve

(fajlëve) të cilët duhet të jen të optimizuar dhe sa më të lehtë për dërgim

nëpër trafikun e ueb-it.

6 ©2014 Labinot Hasani

Zhvillimi (Development)

• Zhvilluesit e ueb-it nuk merren me dizajnimin e strukturës apo me

pamjen e ueb faqes, por ata duhet të komunikojnë për së afërmi me

dizajnerët e ueb-it me qëllim që të kuptojnë në tërësi qëllimin e ueb faqes

për të ndërtuar sa më mirë funksionalitetin dhe të gjejnë zgjidhje sa më të

përshtatshme.

• Disiplina që ka të bëjë me zhvillimin e ueb faqeve/app. ka të bëjë me

autorin e faqes (HTML), stilimin (CSS) dhe skriptimin (JavaScript) apo

programimin (PHP, ASP.NET, Python, Ruby) e ueb faqes.

7 ©2014 Labinot Hasani

Frontend VS Backend

• Ueb dizajnerët dhe zhvilluesit shpesh prezantohen që janë të specializuar

në pjesën e frontend-it apo backend-it për ndërtimin e ueb faqeve/app.

• Frontend dizajni ka te bëjë me pjesën e klientit apo drejtpërsëdrejti me

browser-ët.

• Detyrat e frontend dizajnit janë:

- Dizajnimi grafik dhe prodhimi i imazheve

- Dizajnimi i interface-ve (ndërfaqeve)

- Dizajnimin e përmbajtjes dhe të informacioneve

- Dizajnimin e HTML dhe CSS

- Dizajnimi i JavaScript

8 ©2014 Labinot Hasani

Frontend VS Backend

• Backend dizajni ka të bëjë me pjesën e serverit me qëllim që të bëjë ueb faqen/app. dinamik dhe interaktiv me shfrytëzuesit.

• Në përgjithësi, pjesa e backend bie tek programerët me eksperience për shkak të përgjegjësisë, por preferohet që edhe dizajnerët e frontend-it të kanë njohuri mbi backend.

• Detyrat e backend dizajnit janë:

- Dizajnimin e informatave, se si ato organizohen në pjesën e serverit

- Procesimin e formave

- Programimin e bazës së të dhënave

- CMS - Sistemi për menaxhimin e përmbajtjes

- Po ashtu, ana e serverit përmban gjuhët programuese siç janë:

PHP, JSP, ASP.NET, Ruby, Java, etj.

9 ©2014 Labinot Hasani

Multimedia

• Gjë interesante është multimedia e cila ka të bëjë me vendosjen e

elementeve të ndryshme në faqe, siç janë;

audio (zërimi), video, animacionet, etj.

• Kompanit e mëdha të zhvillimit të ueb faqeve/app. zakonisht kërkojnë

specialist të standardeve të veglave multimediale dhe që kanë ndjeshmëri

dhe saktësi të mirë dhe instinkt për dizajnimin kreativ të multimedias.

10 ©2014 Labinot Hasani

Teknologjitë e ueb-it

• Teknologjitë e ueb-it janë:

- HTML

- CSS

- JavaScript

- PHP (programimi i pjesës së serverit) dhe

- MySQL (menaxhimi i bazës së të dhënave)

• Web dizajnerët profesional duhet të posedojnë harduer me performancë të mira dhe softuerë të kohës.

• Harduerë: Desktop/Laptop me performacë të mira, memorie shtesë (ekstra), monitor të gjerë, skaner dhe kamerë digjitale, kompjuter të tjetër me sisteme operative të tjera, dhe një pajisje celulari të mençur me qasje në internet, etj.

• Autori i ueb faqes/app. mund të përdorë aplikacionet siç janë: Adobe Dreamweaver, Microsoft Expression Web dhe NVU. HTML editorët, Adobe Photoshop, Adobe Photoshop Elements, Adobe Illustrator, Adobe Fireworks, Corel Paint Shop Pro Photo, GIMP “GNU Image Manipulation Program”, etj.

11 ©2014 Labinot Hasani

Teknologjitë e ueb-it

• Veglat (tools) për internet:

Internet Explorer, Google Chrome, Mozilla Firefox, Safari, Opera.

• Veglat (tools) për internet për pajisje mobile: Mobile Safari (iOS), Android Browser (Android), BlackBerry Browser (RIM), Nokia Series 40 dhe Nokia Browser për Symbian, Opera Mobile dhe Mini, Internet Explorer Mobile, Silk.

• FTP (File Transfer Protocol): WS_FTP, CuteFTP, AceFTP, Filezilla.

• Termi Internet i takon rrjetës (network), ku të gjithë kompjuterët janë të lidhur njëri me tjetrin.

• Termi WEB është shkurtesë e World Wide Web apo www dhe është mënyrë e paraqitjes së informatave të shpërndara në internet.

• Më 3 Shkurt 2011, agjensioni IANA merr vendim të zgjeroj përdorimin e IP adresave të versionit IPv4 apo IP adresat të formës ###.###.###.###, dhe ndoshta do të duhen dekada për t’i eliminuar në tërësi IPv4. Ndërsa, tash e tutje do të përdoret gjenerata e re e IP adresave, IPv6 e cila na mundëson shumë më shumë kombinime sesa IPv4.

12 ©2014 Labinot Hasani

Faleminderit

Tani vazhdojmë me HTML…

13 ©2014 Labinot Hasani

HTML – Hypertext Markup Language

• Termi HTML qëndron pas Hypertext Markup Language.

• HTML është gjuhe për shkrimin e dokumenteve të cilat përdoren ne ueb.

• HTML është sistem i standardizuar qe mundëson futjen e tekstit te

skedarëve nëpër tagje siç janë: fontet, ngjyrat, grafikët, linçet, etj. për të

marr formën e duhur ne ueb.

• Kur shkruajmë HTML, përdorim tagje për te strukturuar dhe organizuar

sa me mire ueb faqen.

14 ©2014 Labinot Hasani

HTML

• Në HTML, deklarimi DOCTYPE definon tipin e dokumentit, p.sh.:

<!DOCTYPE html>

• Teksti ndërmjet <html> dhe </html> përshkruan ueb faqen

• Teksti ndërmjet <body> dhe </body> është përmbajtja e cila paraqitet ne

ueb faqe

• Teksti ndërmjet <h1> dhe </h1> paraqet madhësinë e fjalëve apo heading

• Teksti ndërmjet <p> dhe </p> paraqet paragrafin

15 ©2014 Labinot Hasani

HTML DOCTYPE deklarimi

• Ka shumë dokumente në ueb, ashtu që ueb brouseret (p.sh. Firefox) mund të paraqesin ueb faqen 100% korrekt vetëm nëse e njohin tipin e HTML dhe versionin e deklaruar, siç janë versionet:

• Versioni: HTML 5

<!DOCTYPE html>

• Versioni: HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.uiliria.org">

• Versioni: XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www. uiliria.org ">

16 ©2014 Labinot Hasani

HTML DOCTYPE deklarimi

• Ka shumë dokumente në ueb, ashtu që ueb brouseret (p.sh. Firefox) mund të paraqesin ueb faqen 100% korrekt vetëm nëse e njohin tipin e HTML dhe versionin e deklaruar, siç janë versionet:

• Versioni: HTML 5

<!DOCTYPE html>

• Versioni: HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.uiliria.org">

• Versioni: XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www. uiliria.org ">

17 ©2014 Labinot Hasani

HTML tag

• HTML tagjet (tag) janë fjalë apo komanda (emra me tagje) emra që futen

brenda kllapave, sikurse <html>

• HTML tagjet zakonisht paraqiten në qift, sikurse <p> dhe </p>, ku fjalët

apo komandat brenda tagut pason me mbyllje.

• Tagu i parë fillon, kurse tagu i dytë e mbyll apo e përfundon një funksion.

• <p> quhet tagu i hapur

• </p> quhet tagu i mbyllur

18 ©2014 Labinot Hasani

HTML elelemtet

• Një HTML element përmban gjithçka brenda tagut nga fillimi i një tagu deri në fund të tagut tjetër, si në vijim:

• Zakonisht tagu fillestar quhet tag i hapur, ndërsa tagu i fundit quhet tag mbyllës.

• HTML elementet mund të përmbajnë atribute

• HTML elemente, gjithashtu mund të përmbajnë elemente të tjera.

19 ©2014 Labinot Hasani

Tagu fillestar Përmbajtja e elementit Tagu i fundit

<p> Një paragraf </p>

<a href=“uiliria.html"> Një link </a>

<br> Kryerresht

Atributet e HTML

• HTML elementet mund të përmbajnë atribute.

• Atributet ofrojnë informata shtesë në lidhje me një element.

• Atributet gjithnjë specifikohen brenda tag-ut.

• Atributet përmbajnë emër/vlerë, p.sh.: name =“value”

• Atributet shënohen me shkronjë të vogël.

• Shembull:

<font face="arial" color="#CC0000">

20 ©2014 Labinot Hasani

Disa nga HTML atributet

21 ©2014 Labinot Hasani

Atributi Opcioni Funksioni

align djathët, majtë, qendër rreshton tag-et në mënyrë horizontale për një element

valign lartë, mes, poshtë rreshton tag-et në mënyrë vertikale për një element

bgcolor vlera numerike, RGB

apo heksadecimale vendos një ngjyrë prapavije prapa një elementi

background URL vendos një imazh prapavije prapa një elementi

id përcaktuar nga

përdoruesi emërton një element për përdorim me CSS

class përcaktuar nga

përdoruesi klasifikon një element për përdorim të CSS

width vlerë numerike specifikon gjatësin e imazhit, fushës dhe tabelës

height vlerë numerike specifikon gjerësin e imazhit, fushës dhe tabelës

title përcaktuar nga

përdoruesi “pop-up" apo paraqet titullin për element

HTML shembuj me tagje

• <p>Departamenti i Shkencave Kompjuterike, lenda WEB DESIGN!</p>

• <p>Sot eshte dite me diell,<br> por ne mbremje behet ftoht.<br> Ndersa,

te reshura nuk ka.</p>

• <p>Ne WEB Design ne studiojm<b>Hyper Text Markup Language,</b>

kete na mundeson lenda<i> WEB Design.</i></p>

• <p>_{Ne kete semester}ne kemi gjithesejt<small> pese

lende</small> ne Shkenca Kompjuterike.</p>

22 ©2014 Labinot Hasani

HTML shembuj me llojet e madhësive të fonteve

• <h1>Lloji i fontit H1</h1>

• <h2>Lloji i fontit H2</h2>

• <h3>Lloji i fontit H3</h3>

• <h4>Lloji i fontit H4</h4>

• <h5>Lloji i fontit H5</h5>

• <h6>Lloji i fontit H6</h6>

23 ©2014 Labinot Hasani

Numërimi dhe pikëzimi në HTML

• Numërimi rendor:

1. Kati I

2. Kati II

3. Kati III

• Numërimi me pikëzim:

• Kati I

• Kati II

• Kati III

24 ©2014 Labinot Hasani

<p>Numerimi rendor:</p> <ol> <li>Kati I</li> <li>Kati II</li> <li>Kati III</li> </ol> <p>Numerimi me pikezim:</p> <ul> <li>Kati I</li> <li>Kati II</li> <li>Kati III</li> </ul>

HTML

Ligjëratën e radhës

vazhdojmë me HTML…

25 ©2014 Labinot Hasani