Programimi në Ueb nga Ana e Klientit - Përmbledhje e Ligjëratave

Kartela studimi për lëndën 'Programimi në ueb nga ana e klientit' (FIEK, Universiteti i Prishtinës), që mbulojnë ekosistemin e uebit, protokollet e komunikimit, HTML5 semantik dhe bazat e kaskadës e selektorëve në CSS.

Cilat janë tri nivelet e përshkruara në metaforën e ndërtesës 3-katëshe të Uebit (Connolly & Hoar)?

Kati 1: Infrastructure & Protocols (Internet, TCP/IP, HTTP/HTTPS, DNS, Routers, Submarine Cables); Kati 2: Web Programming & Content (HTML5, CSS3, JavaScript, PHP, React, MySQL, Web APIs); Kati 3: User Services & Analytics (Search, Security, Social Media, Cloud Services, Big Data).

Cilat janë ngjarjet kryesore historike në zhvillimin e Internetit në periudhat 1960–1980, 1983–1989 dhe 1990 e tutje?

1960–1980: ARPANET (1969), Packet Switching, kalimi nga Circuit Switching dhe zhvillimi i rrjeteve të para; 1983–1989: Standardizimi i TCP/IP (1983), zhvillimi i Internetit modern dhe propozimi i WWW nga Tim Berners-Lee (1989); 1990 e tutje: WWW bëhet i përdorshëm publikisht, zgjerimi i shfletuesve dhe kalimi nga faqe statike në aplikacione interaktive.

Cilat janë dallimet kryesore midis aplikacioneve Ueb (Web Apps) dhe atyre Desktop?

Web Apps nuk kërkojnë instalim lokal (aksesohen me shfletues përmes URL-së), përditësohen në mënyrë qendrore në server, janë cross-platform dhe ruajnë të dhënat në Cloud/Server. Aplikacionet Desktop kërkojnë shkarkim dhe instalim lokal në hard disk, përditësime manuale për çdo përdorues dhe janë të lidhura me një sistem operativ specifik.

Cili është dallimi thelbësor midis Uebit Statik dhe Uebit Dinamik?

Në Uebin Statik (HTML/CSS), përmbajtja ruhet si skedarë fiks në server dhe dërgohet te klienti pa modifikim, duke ofruar shpërndarje të shpejtë dhe sipërfaqe të vogël sulmi. Në Uebin Dinamik (PHP/Node.js/DB), përmbajtja gjenerohet në kohë reale sipas kërkesës nga ekzekutimi i kodit dhe komunikimi me bazën e të dhënave.

Cilët janë 5 përbërësit bazë të një sistemi komunikimi?

1. Mesazhi (informacioni/të dhënat); 2. Dërguesi (pajisja dërguese); 3. Marrësi (pajisja pranuese); 4. Mediumi (rruga fizike si kabllo, fibër optike, radio valë); 5. Protokolli (rregullat që rregullojnë komunikimin).

Cilat janë tri elementet kryesore të një protokolli komunikimi?

1. Sintaksa (struktura ose formati i të dhënave); 2. Semantika (kuptimi dhe interpretimi i seksioneve të bitëve); 3. Koha (kur dhe sa shpejt dërgohen të dhënat / Flow Control).

Cilat janë rolet e organizatave ndërkombëtare ISO, IETF dhe W3C?

ISO krijoi modelin referues OSI; IETF zhvillon dhe mirëmban specifikimet për TCP/IP; W3C zhvillon standardet e uebit si HTML, CSS, DOM dhe WCAG.

Si krahasohen shtresat e modelit OSI me ato të modelit TCP/IP?

Shtresat 7 (Application), 6 (Presentation) dhe 5 (Session) të OSI korrespondojnë me shtresën Application të TCP/IP; shtresa 4 (Transport) me Transport; shtresa 3 (Network) me Internet (IP, ICMP); shtresat 2 (Data Link) dhe 1 (Physical) korrespondojnë me Network Access (Link Layer).

Cilat janë karakteristikat dalluese midis adresimit IPv4 dhe IPv6?

IPv4 përdor adresa $32\text{-bit}$ të formatuara në 4 oktete decimale (p.sh. 192.0.2.1) me rreth $4.3\text{ miliardë}$ adresa ($\sim 2^{32}$) dhe mbështetet në NAT për shkak të shterimit. IPv6 përdor adresa $128\text{-bit}$ të formatuara në 8 grupe heksadecimale (p.sh. 2001:db8::1) me rreth $3.4 \times 10^{38}$ adresa ($\sim 2^{128}$), me siguri native IPsec dhe auto-konfigurim.

Cili është dallimi thelbësor midis protokolleve të transportit TCP dhe UDP?

TCP është i orientuar ndaj lidhjes (connection-oriented), garanton mbërritjen e paketave pa humbje dhe me renditje të saktë, si dhe përfshin Flow Control dhe Congestion Control. UDP është pa lidhje paraprake (connectionless), nuk garanton dërgimin e paketave apo renditjen e tyre, por ofron latencë minimale dhe shpejtësi maksimale.

Cila është sekuenca e hapave në rezolucionin e një emri domeni përmes DNS?

1. Browser Request -> 2. Local DNS Resolver -> 3. Root DNS Server (.) -> 4. TLD Server (.com) -> 5. Authoritative DNS Server -> 6. Kthimi i adresës IP te klienti.

Cilat janë komponentët e një URL-je sipas anatomisë së saj?

Protocol (p.sh. https://), Subdomain (p.sh. www.), Domain Name (p.sh. uni-pr), TLD (p.sh. .edu), Port (p.sh. :443), Path (p.sh. /lended/web), dhe Query Params (p.sh. ?id=102).

Pse HTTP cilësohet si protokoll 'Stateless' dhe si menaxhohet gjendja e sesionit?

Cilësohet stateless sepse serveri nuk ruan automatikisht informacion për kërkesat e kaluara dhe çdo kërkesë trajtohet si krejtësisht e pavarur. Menaxhimi i gjendjes realizohet përmes Cookies, Sessions dhe Tokens për të mbajtur përdoruesin të identifikuar.

Çfarë kuptimi kanë grupet kryesore të kodeve të statusit HTTP (2xx, 3xx, 4xx, 5xx)?

2xx tregon sukses (p.sh. 200 OK, 201 Created); 3xx tregon ridrejtim (p.sh. 301 Moved Permanently, 304 Not Modified); 4xx tregon gabim nga klienti (p.sh. 401 Unauthorized, 403 Forbidden, 404 Not Found); 5xx tregon gabim nga serveri (p.sh. 500 Internal Server Error, 503 Service Unavailable).

Si dallohen arkitekturat 1-Tier, 2-Tier dhe 3-Tier?

Arkitektura 1-Tier paketron të gjitha shtresat (UI, logjikë, bazë të dhënash) në një skedar të vetëm ekzekutues lokal pa rrjet; 2-Tier e ndan aplikacionin në Klient (Fat Client që mban logjikën) dhe Server të bazës së të dhënave; 3-Tier ndan fizikisht Presentation Tier (shfletuesi), Application Tier (web serveri dhe logjika) dhe Data Tier (DBMS).

Cilat janë rolet e komponentëve në pattern-in Model-View-Controller (MVC)?

Model menaxhon të dhënat dhe rregullat e biznesit; View paraqet ndërfaqen grafike të përdoruesit (UI/HTML); Controller pranon inputin e përdoruesit dhe orkestron veprimet mes Modelit dhe Pamjes.

Cili është ndryshimi kryesor midis arkitekturës Monolitike dhe asaj me Microservices?

Në Monolit të gjitha modulet (Auth, Billing, Catalog, Search) janë të paketuara si një bllok i vetëm softuerik me një deployment të vetëm. Në Microservices aplikacioni ndahet në shërbime të vogla e të pavarura që komunikojnë me REST APIs ose gRPC, ku secili shërbim mund të zhvillohet, vendoset (deploy) dhe shkallëzohet në mënyrë autonome.

Çfarë është arkitektura Jamstack dhe nga cilat komponentë përbëhet?

Jamstack përbëhet nga JavaScript (në anën e klientit), APIs (shërbime të ripërdorshme) dhe Markup (HTML i para-gjeneruar në kohën e Build/SSG), duke u shpërndarë përmes një rrjeti global CDN për të ofruar shpejtësi të lartë, kosto të ulët dhe siguri maksimale.

Cili është dallimi midis shkallëzimit vertikal (Scale-Up) dhe shkallëzimit horizontal (Scale-Out)?

Shkallëzimi vertikal shton resurse fizike (RAM, CPU) në të njëjtin server por ka kufi fizik dhe kosto të lartë. Shkallëzimi horizontal shton më shumë serverë paralelë pas një Load Balancer-i, duke kërkuar që serverët të jenë 'stateless' për të mundësuar rritje të pakufizuar.

Cilat janë katër shtyllat kryesore të sigurisë së informacionit në ueb?

1. Privatësia (parandalimi i përgjimit gjatë transmetimit); 2. Integriteti (garantimi që të dhënat nuk modifikohen gjatë rrugës); 3. Autentifikimi (verifikimi i identitetit të palëve); 4. Mosrefuzimi (dëshmi e pakundërshtueshme se veprimi është kryer nga pala përkatëse).

Cilët janë hapat e procesit të sigurisë SSL/TLS Handshake ndërmjet klientit dhe serverit?

1. Client Hello (kërkesë për lidhje të sigurt + Cipher Suites); 2. Server Hello + Digital Certificate (çelësi publik); 3. Key Exchange & Autentifikimi i Certifikatës; 4. Krijimi i Çelësit Simetrik (aktivizimi i tunelit të kriptuar simetrik).

Si ndryshojnë Ueb 1.0, Ueb 2.0 dhe Ueb 3.0 në thelbin e tyre funksional?

Ueb 1.0 (1991) ishte 'vetëm lexim' (read-only), me faqe statike dhe i centralizuar; Ueb 2.0 (2005) është 'lexim dhe shkrim' (read-write), me faqe dinamike, rrjete sociale dhe i centralizuar; Ueb 3.0 (2009+) është 'lexim, shkrim dhe zotërim' (read-write-own), i bazuar në decentralizim, blockchain dhe kontroll personal mbi të dhënat.

Cili është roli i HTML, CSS dhe JavaScript në ndërtimin e një faqeje ueb?

HTML përcakton strukturën dhe semantikën e dokumentit (skeleti); CSS përcakton paraqitjen vizuale, formatimin dhe ngjyrat (pamja); JavaScript përcakton sjelljen, manipulimin në kohë reale dhe interaktivitetin (sjellja).

Cila është rrjedha me 5 hapa e përpunimit dhe shfaqjes së faqes ueb nga shfletuesi (Browser Rendering Pipeline)?

1. Ngarkimi i HTML; 2. Krijimi i DOM nga analiza e HTML-it; 3. Ngarkimi i burimeve (CSS, imazhe, video); 4. Analizimi i CSS dhe krijimi i Pemës së Përshkruar / Render Tree; 5. Layout (pozicioni e përmasat), Paint (vizatimi i pikselave e ngjyrave) dhe shfaqja e faqes në ekran.

Pse përdoret deklarimi <!DOCTYPE html> në fillim të dokumentit HTML5?

Deklaron standardin modern të HTML5, njofton shfletuesin për mënyrën korrekte të interpretimit dhe parandalon kalimin e shfletuesit në modalitetin e vjetëruar të gabimeve të njohur si 'Quirks Mode'.

Cili është dallimi thelbësor midis seksioneve <head> dhe <body> në një dokument HTML?

Seksioni <head> përmban metatëdhënat e padukshme për përdoruesin e thjeshtë (të dhënat për makinën, konfigurimin UTF-8, titullin e tabit, lidhjet me CSS), ndërsa seksioni <body> përmban të gjithë përmbajtjen vizuale të dukshme në ekran për njeriun.

Cilat janë atributet kryesore të elementit <meta> dhe funksionet e tyre?

<meta charset='utf-8'> përcakton kodimin e karaktereve duke mundësuar shfaqjen e shkronjave shqip (ë, ç); <meta name='viewport' content='...'> siguron përshtatjen responsive në pajisje mobile; <meta name='description'> dhe <meta name='author'> shërbejnë për SEO dhe të dhënat e autorit.

Cili është dallimi midis atributeve globale dhe atyre specifike në HTML?

Atributet globale (si id, class, style, title) mund të përdoren në çdo element HTML pa përjashtim. Atributet specifike vlejnë vetëm për elemente të caktuara, si href (për <a>), src dhe alt (për <img>), ose type (për <input>).

Cili është dallimi semantik midis çifteve <strong> / <b> dhe <em> / <i>?

<strong> tregon tekst me rëndësi të lartë logjike semantike (i shfaqur bold), ndërsa <b> stilon tekstin bold pa i dhënë rëndësi semantike. <em> paraqet theksim gjuhësor semantik (i shfaqur italic), ndërsa <i> është stilim i pjerrët thjesht vizual (p.sh. për terma teknikë ose fjalë të huaja).

Për çfarë shërbejnë entitetet HTML dhe cilat janë kodet për simbolet <, >, &, dhe hapësirën e pandashme?

Entitetet përdoren për të shfaqur karaktere të rezervuara nga sintaksa HTML ose simbole speciale: < për më të vogël (

Cili është dallimi midis referencimit absolut dhe atij relativ te tagu <a>?

Referencimi absolut përmban protokollin dhe domenin e plotë (p.sh. https://www.fiek.edu/page.html) dhe përdoret për lidhje jashtë ueb-sajtit. Referencimi relativ referon skedarë brenda të njëjtit projekt (p.sh. about.html, ../index.html) pa kërkuar protokoll apo domen, duke lehtësuar zhvendosjen e projektit.

Cilat janë karakteristikat dalluese të formateve të imazheve GIF, JPEG dhe PNG?

GIF përdor kompresim pa humbje (lossless), kufizohet në 256 ngjyra, dhe mbështet animacione e transparencë binare; JPEG përdor kompresim me humbje (lossy), mbështet mbi 16.7 milionë ngjyra ideale për fotografi reale, por nuk mbështet transparencë; PNG përdor kompresim pa humbje, mbështet miliona ngjyra dhe ofron transparencë alfa (Alpha Channel) ideale për logo e grafika.

Cilat janë tri llojet e listave në HTML dhe tagjet e tyre përbërëse?

1. Lista të parenditura (<ul> me elemente <li>) me pika/bullets; 2. Lista të renditura (<ol> me elemente <li>) me numërim automatik sekvencial; 3. Lista përkufizimesh (<dl>) të përbëra nga termi (<dt>) dhe përshkrimi/përkufizimi i termit (<dd>).

Cilët elemente përbëjnë strukturën themelore të një tabele në HTML?

<table> që rrethon tabelën, <tr> që definon një rresht horizontal (Table Row), <th> për qelizat e titullit (me tekst bold dhe qendërmarrë), dhe <td> për qelizat standarde të të dhënave (Table Data).

Çfarë funksioni kanë atributet colspan dhe rowspan në tabelat HTML?

colspan="n" bashkon n kolona horizontalisht në një qelizë të vetme, ndërsa rowspan="n" bashkon n rreshta vertikalisht, duke kërkuar heqjen e qelizave korresponduese të tepërta.

Cilat janë elementet kryesore semantike strukturore të prezantuara në HTML5 dhe roli i tyre?

<header> (koka e faqes/seksionit), <nav> (blloku i linqeve të navigimit), <main> (përmbajtja kryesore qendrore), <article> (përmbajtje autonome si lajm/artikull), <section> (grupim tematik i përmbajtjes), <aside> (përmbajtje anësore/sidebar), dhe <footer> (fundi i faqes me të drejtat e autorit dhe kontaktet).

Si ndryshojnë metodat GET dhe POST te tagu <form> gjatë dërgimit të të dhënave?

Metoda GET i bashkëngjit të dhënat në mënyrë të dukshme tek URL-ja si query string (e përshtatshme për kërkime, jo e sigurt për të dhëna private); metoda POST i dërgon të dhënat brenda trupit të kërkesës HTTP (e sigurt për fjalëkalime dhe e përshtatshme për sasi të mëdha të dhënash).

Cili është ndryshimi funksional midis gjendjeve required, disabled dhe readonly në fushat e formularëve?

required bllokon dërgimin e formës nëse fusha mbetet bosh; disabled e bën fushën të paqasshme dhe vlera e saj NUK dërgohet në server gjatë submit-it; readonly lejon leximin por ndalon modifikimin e vlerës, dhe vlera e saj DËRGOHET në server.

Cilat janë përbërësit e modelit të ngjyrave HSL dhe vlerat e lejuara për secilin?

Hue (Nuanca) merr vlera këndore nga $0$ deri në $360$ ($0^\circ = \text{e kuqe}$, $120^\circ = \text{e gjelbër}$, $240^\circ = \text{e kaltër}$); Saturation (Ngopja) merr vlera në përqindje nga $0\%$ (gri totale) në $100\%$ (ngjyrë e pastër); Lightness (Ndriçimi) merr vlera nga $0\%$ (e zezë totale) në $100\%$ (e bardhë totale, ku $50\%$ është balanca normale).

Çfarë përfaqëson kanali Alpha në modelet RGBA dhe HSLA dhe cili është diapazoni i vlerave të tij?

Kanali Alpha (A) shton dimensionin e transparencës, duke marrë vlera decimale nga $0.0$ (transparencë e plotë / e padukshme) deri në $1.0$ (opacitet i plotë / solide).

Cili është dallimi thelbësor midis atributit id dhe atributit class në HTML dhe CSS?

Një atribut id duhet të jetë rreptësisht unik për vetëm një element brenda gjithë faqes dhe në CSS selektohet me thurje (#id), ndërsa class mund t'u caktohet shumë elementeve njëkohësisht për ripërdorim stili dhe në CSS selektohet me pikë (.class).

Cilat janë komponentët e një rregulle në sintaksën e CSS?

Rregulla përbëhet nga Selektori (që shënjestron elementin HTML) dhe Blloku i Deklarimeve brenda kllapave gjarpërushe { }. Brenda bllokut ndodhen Deklaratat, ku secila deklaratë përbëhet nga Vetia (Property) dhe Vlera (Value), të ndara me dy pika dhe të përmbyllura me pikëpresje.

Cilat janë tri nivelet e përfshirjes së CSS-it dhe shtrirja (scope) e tyre?

1. Inline CSS: shkruhet te atributi style="" i tagut, vlen vetëm për atë element unik; 2. Internal/Embedded CSS: shkruhet brenda tagut <style> në <head>, vlen për të gjithë atë dokument HTML; 3. External CSS: skedar i jashtëm .css i lidhur me <link rel="stylesheet">, vlen globalisht për shumë dokumente HTML.

Pse rregulli @import në CSS duhet të shmanget në favor të tagut <link>?

@import shkakton ngarkim sekuencial dhe të vonuar të skedarëve të stileve, gjë që rrit kohën e ngarkimit të faqes dhe dëmton performancën, ndërsa <link> mundëson shkarkimin paralel të skedarëve nga shfletuesi.

Cili është dallimi midis selektorit të pasardhësve (Descendant) dhe selektorit të fëmijëve (Child)?

Selektori i pasardhësve (A B, me hapësirë) shënjestron çdo element B që ndodhet brenda elementit A në çfarëdo thellësie folezimi; selektori i fëmijëve (A > B, me simbolin >) shënjestron VETËM elementet B që janë fëmijë të drejtpërdrejtë (një nivel poshtë) të prindit A.

Cili është dallimi midis selektorit të fqinjit të drejtpërdrejtë (+) dhe fqinjëve të përgjithshëm (~) në CSS?

Fqinji i drejtpërdrejtë (div + p) shënjestron VETËM paragrafin e parë që vjen menjëherë pas bllokut div me të njëjtin prind; fqinjët e përgjithshëm (div ~ p) shënjestrojnë TË GJITHË paragrafët fqinjë që ndjekin elementin div në të njëjtin nivel.

Cili është dallimi midis pseudo-klasave (:) dhe pseudo-elementeve (::) në CSS?

Pseudo-klasat me një dy-pikësh (:) shënjestrojnë gjendje të veçanta të një elementi (p.sh. :hover, :link, :visited, :active); pseudo-elementet me dy dy-pikësha (::) stilojnë pjesë specifike të brendshme të një elementi (p.sh. ::first-letter, ::first-line, ::marker).

Cilat veti të CSS-it trashëgohen natyrshëm nga prindi te fëmijët dhe cilat jo?

Vetitë tipografike dhe të tekstit (font-family, font-size, color, text-align, list-style) trashëgohen automatikisht nga elementi prind. Vetitë e strukturës, kornizave dhe hapësirave (layout, sizing, border, background, margin, padding) NUK trashëgohen natyrshëm (përveç nëse deklarohet vlera inherit).

Si renditen selektorët sipas peshës së specifikimit (Specificity Hierarchy) në CSS?

1. Selektori Universal (*): pesha 0; 2. Selektorët e elementeve/tagjeve dhe pseudo-elementeve: pesha 1; 3. Klasat (.class), atributet ([attr]) dhe pseudo-klasat: pesha 10; 4. Selektorët ID (#id): pesha 100; 5. Stilet Inline (style=""): pesha 1000; rregulla !important anashkalon çdo specifikë normale.

Cila është radha e përparësisë (Priority Order) në zgjidhjen e kaskadës në CSS?

Nga përparësia më e ulët tek më e larta: 1. Stilet default të shfletuesit; 2. Stilet e jashtme (External .css); 3. Stilet e brendshme (Internal <style>); 4. Stilet inline (style=""); 5. Rregullat me prapashtesën !important (kanë përparësinë absolute).