lënda: gjuha e web-it - gokosova.comgokosova.com/webdesign/web ii.pdf · departamenti i shkencave...
TRANSCRIPT
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><sub>Ne kete semester</sub>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