Brainscape's Knowledge GenomeTM

Browse over 1 million classes created by top students, professors, publishers, and experts.


See full index

Pitanja za GRID > WEB Dizajn 2.kol > Flashcards

WEB Dizajn 2.kol Flashcards

1
Q

Gde je nastao problem? pre…

A
  • dizajn se prilagođavalo za ekrane računara
  • statični dizajn safiksnim veličinama
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Sa upotrebom mobilnih uređaja (i mobilnog interneta) dolazi do: (loše korisničko iskustvo)

A

1.pojave vertikalnih i horizontalnih klizača (korisnici su navikli na vertikalno, ali ne i na horizontalno listanje)
2.prvo (neuspešno) rešenje –skaliranje kompletne stranice (male veličine svih elemenata) rešenje problema –prilagodljivi dizajn

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Prilagodljivi dizajn (RWD responsive design) -

A

omogućava da se veb stranica prikazuje dobro (bez horizontalnog skrola i sadržajem
adekvatne veličine i čitljivosti) na svim uređajima. RWD se postiže HTML+CSS (nije potreban JS).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Šta je to RWD?

A

Wikipedia: To je takav dizajn koji za cilj ima da pruzi optimalan pregled na razlicitim uredjajima, uz lako citanje sa minimalnim menjanjem velicine i skrolovanjem (Kompjuteri, telefoni, tableti)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Osnovni problem: rezolucija

A
  • prilikom dizajna prilagodljivih veb stranica, osnovno ograničenje predstavlja veliki broj različitih veličina ekrana
  • dodatni problem predstavljaju i različite orijentacije ekrana (portrait/landcape), kao i različiti odnosi širine i visine ekrana (4:3, 16:9, kvadratni)
  • danas se gotovo podrazumeva da mobilni uređaj podržava i automatsko menjanje orijentacije ekrana pri okretanju uređaja
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Dobro korisničko iskustvo -

A

Od početka projekta voditi računa da će se sadržaj prikazivati na uređajima različitih dimenzija i rezolucija:
1. Bez velikih elemenata (slika, paragrafa) fiksne širine - koristiti relativne veličine kad god je to moguće
2. koristiti CSS upite medija (media queries) za prilagođavanje izgleda različitim ekranima

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

<meta name=“viewport”>

A

viewport–vidljiva površina veb strane - HTML5 definiše <meta></meta> tag koji omogućava kontolisanje viewport-a, odnosno daje čitaču instrukcije kako da kontroliše dimenzije i skaliranje veb stranice.
Primer: <meta name=”viewport”content=”width=device-width, initial-scale=1.0”>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

width=device-width

A

podešava širinu stranice širini ekrana uređaja

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

initial-scale=1.0

A

podešava inicijalni nivo zumiranja na 100% kada se veb strana prvi put učita u čitač

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

Osnovni RWD koncepti:

A

fleksibilne mreže (fluid grids), fleksibilne slike (fluid images), upiti medija (media queries)
+responzivni web - okviri ili šabloni koji koriste prethodna tri koncepteta
Bootstrap W3.CSS CSSGroundwork

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

fluid-grid

A

koncept prilagodljivog dizajna

princip: stranica (width 100%) se deli na 12 kolona. Širina elemenata je podešena po (celom) broju kolona koji zauzima.
Sa povećanjem/smanjenjem širine ekrana i kolone se razvlače ili skupljaju.

Širina jedne kolone: 100% / 12kolona = 8.33%
Definiše se 12 klasa za svaku od kolona – ime klase počinje sa “col-“ i sledi broj koji definiše koliko kolona element kojem će biti dodeljena ta klasa će zauzimati.

CSS selektor (sve kolone):
[class*=”col-“]{
float:left;
padding:15px;
border:1px solid red;
} Svaki red (row) je zapakovan u element <div>. Broj kolonau redu treba u zbiru da bude do 12
HTML:
<divclass=”row”>
<divclass=”col-12”>100% </div>
</div>
<divclass=”row”>
<divclass=”col-3”>25% </div>
<divclass=”col-9”>75% </div>
</div>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

box-sizing -

A

Novo HTML5 svojstvo koje definiše šta ulazi u dimenzije elementa (width i height).

Podrazumevano: širina i visina box modela elementa obuhvata samo content (sadražaj).
box-sizing: border-box; omogućava uključivanje vrednosti paddingi borderu ukupnu širinu i visinu elementa
grid-view koncept koristi sledeće CSS „resetovanje“
* {
box-sizing: border-box;
}
.row / .col- - kako kolone unutar reda „floatuju“ ulevo, da bi se naredni red spustio ispod prethodnog reda koristi se stil:
.row::after{
content:””;
clear:both;
display:block; }

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Fleksibilne slike (fluid images)

A

-width:100%ili max-width:100%;

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

Šta je to progresivno poboljšanje?

A
  • fokus im je više na pristupačnost sadržaja nego na sam pretraživač ili uređaj.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

Navesti 3 primera za front-end.

A

-Karike front-end razvoja web strane:
1. HTML definiše SADRŽAJ veb strane
2. CSS određuje IZGLED veb strane
3. JavaScript određuje PONAŠANJE veb strane

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

JS kao klijentska skripta.

A

izvršava se lokalno na klijentu (veb čitaču korisnika)
- interpretirana skripta -čitač izvršava skriptu već kod tumačenja (interpretacije )

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

Šta su to serverske skripte?

A
  • se izvršavaju od strane veb servera ili preko modula koji se dodaju veb serveru
  • najčešće korišćene server -side tehnologije su:
    PHP
    ASP/ASP.NET
    JSP(Java Server Pages)
    Python,…
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

Koje su mogućnosti JS?

A
  • omogućava interaktivnost veb stranicama- kada veb strana treba da reaguje na korisnikovu interakciju (klik mišem) ili sistemski događaj (učitavanje stranice…)
  • čitanje i pisanje (promena sadržaja) HTML elemenata
  • da izvrši proveru validnosti podataka unetih u formu pre predaje tih podataka serveru–preprocesiranje forme
  • prepoznavanje veb čitača
  • kreiranje „kolačića“
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Šta je jQuery?

A
  • je najpopularnija i najsveobuhvatnija JS biblioteka koja pojednostavljuje pisanje JS koda
    -u ovoj biblioteci redovi i redovi koda koji izvršavaju određene zadatke su upakovani u metode koje se onda iz drugog JS dokumenta pozivaju sa jednim redom koda
    jQuery biblioteka sadrži:
    -HTML/DOM manipulaciju
    -CSS manipulaciju
    -HTML event metode
    -Efekte i animacije
    -AJAX
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Koji su načini korišćenja jQuery?

A

-jQuery se može koristiti na dva načina:
1.preuzimanje jQuery biblioteke (download ) sa sajtajQuery.com
2.uključivanje jQuery biblioteke preko CDN

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

Šta je BOOTSTRAP?

A
  • najpopularniji i najzastupljeniji
  • besplatan front-end framework za brži razvoj veb aplikacija
  • uključuje HTML/CSS bazirane šablone za forme, tabele, navigaciju, tipografiju, slajdere slika…, a šabloni mogu opciono koristi JS dodatke (engl. plug-ins)
  • jednostavno se dobijaju responzivne stranice
  • koristi mobile-first pristup od verzije Bootstrap 3
  • kompatibilnost sa svim čitačima
    Bootstrap koristi dve vrste kontejnera:

.container klasase koristi za responzivni kontejner fiksne širine
.container-fluid klasa se koristi za kontejner pune širine koji zauzima celu širinu vidljive površine prozora (viewport)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

Primer za SCSS i primer za SASS.

A

primer SCSS:
$omiljena-siva: #333;
body {color: $omiljena-siva;}

primer SASS:
$omiljena-siva: #333
body
color: $omiljena-siva

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

Ghost Buttons.

A
  • ne privlače puno pažnje na sebe, ali su i dalje prepoznatljivi kao dugmići (na koje treba da se klikne)
  • osnovni, „ravan“ oblik –kvadrat, pravougaonik, kružnica, dijamantski
  • bez popune sa jednostavnom okvirnom linijom debljine nekoliko pointa
  • najčešće potpuno transparentan –zato i naziv „ghost“
  • sadrži jednostavan tekst bele ili crne boje
  • često su veći nego tradicionalni dugmići
  • postavljeni na „udarno“ mesto na stranici –najčešće centrirani
  • mogu pored teksta sadržati i male, geometrijske ikonice
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

Prednosti flat dizajna

A
  • jednostavnost i fokusiranost na sadržaj (zbog minimalizma)
  • ide dobro sa responzivnim dizajnom
  • jednostavnost „učenja“ sajta i navigacije kroz njega
  • smisleno i logično organizovan sadržaj
  • brže vreme učitavanja
  • jednostavna tipografija poboljšava čitljivost-
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

Mane flat dizajna.

A
  • jednostavan stil može da oslabi ključne elemente tj. frustrirani korisnici ulažu trud u nalaženje elemenata (navigacije, kontakt informacija…)
  • veliki rizik da izgleda dosadno i bez personalizovanog stila zbog trenutne popularnosti
  • izgubljena vizuelna hijerarhija
  • neuočljivi dugmići
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

UX i UI.

A

-Korisničko iskustvo (UX) -osećanje koje korisnik ima tokom korišćenja vebsajta
-Korisnički interfejs (UI) –kako korisnici intereaguju sa stranicom, predstavlja dizajn, prezentaciju i egzekuciju elemenata koji čine veb stranicu

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

UNICORN

A

-je W3C objedinjeni validator koji pomaže veb programerima da se popravi kvalitet veb stranica izvođenje raznih provera i testova (sakuplja rezultate popularnih HTML i CSS validatora i ostalih servisa poput Internationalization ili RSS fida).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

CMS-Content Management System.

A

CMS aplikacija je veb aplikacija koja omogućava sledeće administrativne i upravljačke funkcije:
- kreiranje, izmena, objavljivanje, arhiviranje veb stranica, članaka, dokumenata, blogova
- dodavanje i editovanje događaja u kalendar, proizvoda u inventar…
- pregled izveštaja i statističkih podataka sajta
- kreiranje i editovanje sistema korisnika koji imaju dozvole različitog nivoa pristupa

29
Q

Value i action?

A

Action definiše akciju koja će se desiti
Value za dodeljivanje vrednosti atributa

30
Q

Koje vrednosti može da ima position? Koja vrednost je predefinisana?

A

Vrednosti koje može da ima svojstvo position su: static, relative, absolute i fixed. Predefinisano je static

31
Q

Napisati formu.

A

<
ime:
<input type=”text” name=”first name” value=”upisati
<
prezime: < type=”text” name=”last name” value=”upisati
<
</form>

32
Q

Sta označava atribut action u formi?

A

Atribut action definiše akciju koja će se desiti kada se forma pošalje serveru.

33
Q

<meta name=”view port” content=”width=device width, initial scale=1.0”>

A

Meta tag koji omogućava kontolisanje viewport a, tj. daje čitaču instrukcije kako da kontroliše dimenzije i skaliranje
veb stranice
viewport vidljiva površina veb strane
width=device width podešava širinu stranice širini ekrana uređaja
initial scale=1.0 podešava inicijalni nivo zumiranja na 100% kada se veb strana prvi put učita u čitač

34
Q

Napiši media query za širinu 2000px.

A

@media screen and (min width:2000px)

35
Q

Forma sa radio button om (male/female) napisati kod.

A

<form action=”action_page.
<input type=”radio” name”gender” value=”m” checked>Male<
<input type=”radio” name”gender” value=”f” checked>Feale<
<input type=”
</

36
Q

Ako imamo 3 diva, I jedan zauzima ¼ , drugi ½, I treci ¼, kako cemo ih upisati u kolonama?

A

<div class=”col 3
<div class=”col 6
<div class=”col 3 ”> Treba da se dopise kod samo… Tu je trebalo da se dopise samo broj kolone koje ce se

37
Q

Bilo je neko pitanje sta CSS koristi za GRID view concept

A

box sizing:border box

38
Q

Kako se poziva JS (tako nekako pitanje)

A

–

 tagom. (ja msm da je
39
Q

Zasto je JS client side?

A

skripte klijentske strane imaju veći pristup informacijama i funkcijama koje se nalaze na klijentskim računarima dok
skripte serverske strane imaju veći pristup istim na serveru

40
Q

Da se kaze da li je JS objektno orjentisa, objktno zasnovan ili nesto trece..

A

Objetkno zasnovan je.

41
Q

Navesti tri vodeće tehnologije za server side programiranje (dinamičko kreiranje web sadržaja).

A

PHP, JSP, ColdFusion, Perl, Python… (tri su bile

42
Q

Za sta se koriste skripte serverske strane?

A

procesiranje formi
kreiranje I prikazivanje veb strana sa informacijama iz baze podataka
prilagodjavanje veb citaca

43
Q

Dat je kod: Pitanje sta radi kod? I da se napise koji je deo metod i koji property

A

<p demo “></
< document getElementById demo innerHTML =”Hello
</

 definiše skriptu koja se pokreće direktno u veb čitaču
document objekat predstavlja celu veb stranicu i sadrži sve ostale objekte da bi se pristupilo bilo kom elementu
stranice, prvo
se pristupa document objektu
getElementById metod za pristup elementu prema vrednosti id a
innerHTML property može da se „iščita“ ili promeni sadržaj bilo kog HTML elementa
44
Q

Koja je rec rezervisana za promenljivu u JS?

A

var

45
Q

Kako se definise promenljiva u JS?

A

var x = document.forms[“frm1”];

46
Q

Bio je bonus zadatak trebao je ovaj kod da se ispise:

A

<button>Klikni!</</button>

47
Q

Pitanje koja je razlika kada se napise = I ==…

A

jedno je valjda kada se dodeljuje vrednost a drugo kada se proverava…

48
Q

Razlika izmedju while I do while petlje

A

while telo petlje ne mora da se izvrsi ni jednom
do while telo se barem jednom izvrsava

49
Q

Za sta se koristio Flash?

A

Animacija logotipa I navigaciju koja menja izgled… generalno za povecanje interaktivnosti
stranice

50
Q

Da se navede 5 odlika flat design a:

A

jednostavnost, povecana intuitivnost, duge senke, dinamicke boje, jednostavna
tipografija, nevidljivi dugmici, minimalizam…

51
Q

Sta su ghost buttons?

A

Ne privlače puno pažnje na sebe, ali su i dalje prepoznatljivi kao dugmići, najčešće potpuno transparentan zato i
naziv „ghost”, sadrži jednostavan tekst, često su veći nego tradicionalni dugmići, postavljeni na „udarno“ mesto na
stranici

52
Q

Sta je HERO HEADER?

A

Velika slika sa upadljivim textom, najcesce postavljena na vrhu web stranice

53
Q

Sta je <canvas>?</canvas>

A

predstavlja kontejner na veb stranici za crtanje grafike uz pomoć JS
nema mogućnosti generisanja grafike sam po sebi, već je samo „placeholder“ za grafiku koja se zadaje skriptom

54
Q

Sta je <svg> od cega je skraceno?</svg>

A

Scalable Vector Graphics element se koristi za definisanje vektorske grafike

55
Q

Bilo je da se ispise kod kako bi se nacrtao jedan pravougaonik sa zadatim pozicijama I velicinom…

A

Primeniti ovaj kod:
<rect x =” y =”20“ width =”100” height =”
fill=” blue” stroke width =”3” stroke =”yellow” stroke opacity =”

56
Q

Najcesce koriscene biblioteke ikonica

A

Font Awesome
Google Icons
Bootstrap Icons

57
Q

Pitanje za Web Worker

A

omogućava izvršavanje JS skripti u pozadini bez uticaja na performantnost stranice
prednost : bez Web Workera, kada traje izvršavanje skripti na veb stranici, strana je „nedostupna“ (ne mogu se
elementi strane selektovati, kliknuti…) dok se skripta ne završi

58
Q

Server Sent Events?

A

Omogućava da veb stranica dobije automatski ažuriranja (update) od servera (one way messaging)
ranije je ovo bilo moguće ali ne automatski već je veb stranica trebala da „pita“ da li postoje neka ažuriranja
primer upotrebe : Facebook/Twitter updates, ažuriranja cena akcija/deonica/deviznih kursvea, nove vesti (news
feeds), sportski rezulrati

59
Q

Za šta služe forme? Koji tag se koristi za najveći broj elemenata forme?

A

Forma sluzi za unos podataka od strane korisnika.
Tag <input></input> se koristi za najveci broj elemenata forme

60
Q

Sta je DOM?

A

(Document Object Model) DOM je W3C standard za pristup dokumentima: dokumentima:”DOM je platforma i jezički neutralni
interface koji dozvoljava programima i skriptama da dinamički pristupaju i menjaju sadržaj, strukturu i stil
dokumenta.”

61
Q

FORME <form> Unos podataka od strane korisnika.

A

Osnovni element koji obuhvata celu formu je < form >. On grupiše sve ostale elemente za
Action Definiše akciju koja će se desiti kada se pošalje forma serveru

<textarea> Višelinijsko polje za unos teksta.
row broj vidiljivih linija teksta
col vidljivu širinu površine teksta
<button> Obično clickable dugme.
Razlika između <button> i <input type="button“> je što se u button može smestiti sadržaj (teskt, slika).
Preporuka: korišćenje <input type="button“>.
type=„text“ & type=„password" Najčešći tip je jednolinijsko polje za unos teksta (type=„text“). Podrazumevano
staje 20 karaktera, ako se to
ne promeni. <input type=„password“> definiše polje za unos šifre sa sakrivenim karakterima(* ili ●).
<input type=„submit"> Definiše dugme za slanje (submit) podataka forme serverskoj (action) stranici koja će
obrađivati te podatke. Pomoću
value atributa određujemo šta će biti napisano na dugmetu (podrazumevano: Submit).
<input></input> definiše reset dugme koje će sve vrednosti forme vratiti na njihove podrazumevane (početne)
vrednosti.
<input type=„radio"> Može da se napravi samo jedan izbor. Moraju biti povezani u istu grupu pomoću iste vrednosti
name atributa.
Predefinisano nijedno dugme nije odabrano, a to možemo promeniti pomoću checked.
<input type=„checkbox">
<input type=„checkbox"> Može se izabrati nula, jedna ili više opcija za razliku od radio dugmadi.Može se izabrati nula, jedna ili više opcija za razliku od radio dugmadi. <input></input> <input></input> Atribut multiple omogućava višestruki unos.Atribut multiple omogućava višestruki unos. <label> for <input></input> <label> for <input></input> For atribut ukazuje na id <input></input> elementa.For atribut ukazuje na id <input></input> elementa. Oni novi tipovi inputa koje čitač ne podržava će se ponašati kao type="text".Oni novi tipovi inputa koje čitač ne podržava će se ponašati kao type="text". Ograničenja navedena preko ovih atributa se mogu lako zaobići sa JavaScriptom.Ograničenja navedena preko ovih atributa se mogu lako zaobići sa JavaScriptom. Da bi se izbegao nevalidan unos, uneti podaci se moraju proveriti i na serverskoj strani.Da bi se izbegao nevalidan unos, uneti podaci se moraju proveriti i na serverskoj strani. <input></input> <input></input> -- Definiše polDefiniše polje za unos brojeva. Mogu se uvesti ograničenja na dozvoljene brojčane je za unos brojeva. Mogu se uvesti ograničenja na dozvoljene brojčane vrednosti pomoću atributa minivrednosti pomoću atributa mini max, kao i korak (step).max, kao i korak (step). Primer: <input></input>Primer: <input></input> <input type=“range"> <input type=“range"> -- Klizač sa opsegom vrednost.Klizač sa opsegom vrednost. Primer: <input></input>Primer: <input></input> <input></input> <input></input> -- Polje za pretragu (ponaša se isto kao obično tekstualno polje). Search Google:Polje za pretragu (ponaša se isto kao obično tekstualno polje). Search Google: <input></input><input></input>
</label></label></button></button></textarea>

62
Q

Forma sa radio button om (male/female) napisati kod.

A

<form action=”action_page.php”>
<input type=”radio” name”gender” value=”m” checked>Male<
<input type=”radio” name”gender” value=”f” checked>Feale<
<input type=”
</form>

63
Q

Ako se za sada CSS deklaracija font-size: 0.75em, kolika je vrednost u pikselima?

A

16px0.750.75=9px

64
Q

Zašto je u slučaju fleksibilnih slika bolje koristiti max-width:100%, umesto width:100%?

A

-Pošto je rezolucija veb slika 72ppi, ukoliko veličina slike bude veća od originala neće biti uvek poželjan rezultat. Zbog toga je bolje koristiti max-width jer se slika reskalira ali nikad neće biti veća od svojih početnih dimenzija.

65
Q

Da bi neki element postao flex kontejner koji CSS se dodaje?

A

-CSS grid (grid container)
*
.grid-container{ display:grid; }

66
Q

Šta predstavlja 1vh?

A

-Viewport jedinica koja će se povećavati i smanjivati u skladu sa veličinom prozora.

67
Q

Navesti primer 3 klijentske (front-end) i 3 serverske (back-end) tehnologije.

A

-BACK-END
*
PHP
*
ASP/ASP.NET
*
JSP(Java Server Pages)
*
Python
-FRONT-END
*
HTML
*
JS
*
CSS

68
Q

Dopisati skriptu.

A

<p id=“infobox“>Ćao…</p>

 document.getElementById("demo").innerHTML="Hvala na registraciji"
69
Q

Zasto je JS interpretirani jezik?

A

-čitač izvršava skriptu već kod tumačenja (interpretacije).

Pitanja za GRID (28 decks)

Brainscape helps you reach your goals faster, through stronger study habits.
© 2024 Bold Learning Solutions. Terms and Conditions