Vizsgatémák 15 Reszponzív webdizájn

Question 1

Mit lehet tudni a mobil tartalomszolgáltatásról?

Answer 1

A HTTP tartalomegyeztetés során, a megfelelő reprezentáció kerül kiszolgálásra (akár mobil akár asztali).
Az adaptív és reszponzív webdizájn által igazodik a tartalom az eszközhöz.
Gyakori a mobil webtartalom egy külön webhelyről történő szolgáltatása.

Question 2

Mi a reszponzív webdizájn?

Answer 2

Egy webfejlesztési megközelítés, melynek célja, hogy optimálisan nézzenek ki a weblapok, eszköztől függetlenül és tájolástól függetlenül.
A reszponzív weboldalak dinamikusan igazodnak az eszközhöz. Reagálnak a környezeti változásokra.

Question 3

Mi az adaptív webdizájn?

Answer 3

Az adaptív webdizájn ugyanazon weboldal több egymástól eltérő változatának elkészítése, több különböző eszközre. Majd ezek közül az optimális kiszolgálása.
A weboldal elrendezése betöltés után nem igazodik a környezet változásaira.

Question 4

Sorold fel majd jellemezd a weboldal elrendezéseket!

Answer 4

Statikus/rögzített: abszolút mértékegységben rögzített szélességet használó elrendezés.
Folyékony: relatív mértékegységben kifejezett szélességet használó elrendezés.
Adaptív: statikus elrendezések egy sorozataként tekinthető
Reszponzív: folyékony elrendezések egy sorozataként tekinthető

Question 5

Mi a referencia pixel?

Answer 5

A referencia pixel az a látószög, mely alatt egy pixel látszik 96dpi pixelsűrűségű eszközön egy kar távolságból nézve.
Egy karhossz távolságból nézve 1px nagyjából 0,26mm-nek (1/96 inch) felel meg.

Question 6

Miben mérik a nyomtatók/kijelzők pont-/pixelsűrűségét?í

Answer 6

DPI (dots per inch)
DPCM (dots per centimeter)
PPI (pixels per inch)
PPCM (pixels per centimeter)

Question 7

Hogy kötünk abszolút hossz mértékegységeket?

Answer 7

Fizikai mértékegységeket a megfelelő fizikai mérésekhez való kötésével
A px mértékegység, a referencia pixelhez való kötésével.

Question 8

Mit neveznek a látószög mértékegységének?

Answer 8

px mértékegységet.

Question 9

Mikor mihez ajánlott kötni a mértékegységeket?

Answer 9

Kis pixelsűrűségű eszközöknél px mértékegységhez
Nagy pixelsűrűségű eszközöknél szabványos fizikai mértékegységek egyikéhez.

Question 10

Melyek a CSS relatív hosszúságú mértékegységei?

Answer 10

em: a font-size tulajdonság az elemhez tartozó számított érték
rem: az em egység gyökéreleméhez tartozó számított érték
vw, vh, vmin, vmax

Question 11

Melyek a reszponzív webdizájn fő komponensei?

Answer 11

Média lekérdezések
Nézetablak
Folyékony rácsok
Rugalmas helyettesítési elemek
Adaptív/reszponzív képek

Question 12

Mi a nézetablak?

Answer 12

Folytonos médiákhoz a felhasználói ágensek nézetablakokat nyújtanak, amin keresztül a felhasználó látja a dokumentumot.
Felhasználói ágensek módosíthatják a dokumentum elrendezését a nézetablak átméretezésekor.
Ha kisebb a nézetablak mint vászon amin a dokumentum jelenik meg, akkor görgetési felületet biztosít a felhasználói ágens.
Vásznanként egy nézetablak, de több vásznat is meg lehet jeleníteni.

Question 13

Sorold fel a nézetablak-arány mértékegységeit!

Answer 13

vw: nézetablak szélességének 1%a
vh: nézetablak magasságának 1%a
vmin: a vw és a vh kisebbel egyenlő
vmax: a vw és a vh nagyobbal egyenlő

Question 14

Mik a média lekérdezések?

Answer 14

Egy módszer a felhasználói ágens vagy eszkőz jellemzőinek vizsgálatára.
Stíluslapok feltételes alkalmazására szolgálnak.

Question 15

Jellemezd a média lekérdezéseket!

Answer 15

Majdnem mindig független a dokumentumoktól.
Csak külső információktól függenek, kivéve ha nem írja elő valami a hatásuk feloldását.
pl @viewport at-szabály

Question 16

Milyen nyelvekben használhatók média lekérdezések?

Answer 16

CSS
HTML
XML
JavaScript

Question 17

Mi a média lekérdezés szintaxisa CSSben?

Answer 17

@import “screen.css” screen;
@import “print.css” print;

Az opcionális lekérdezés lista a feltételeket fejezi ki, mely csak ha teljesül lesz alkalmazható az @import

@media screen {
* {
font-famili: sans-serif;
}
}
Olyan feltételes csoportszabály, melynek feltétele egy média lekérdezés. Amikor a feltétel igaz, a CSS feldolgozónak alkalmaznia kell a csoportszabályon belüli szabályokat.

Question 18

Mi a média lekérdezés szintaxisa HTMLben?

Answer 18

A média attribútum a következő elemeken adható meg:
link
meta
source
style

pl.

<link></link>

<link></link>

Question 19

Mi a média lekérdezés szintaxisa?

Answer 19

Egy lekérdezés opcionális módosítóból, opcionális média típusból és egy média feltételből áll.
Több lekérdezés vesszővel elválasztva média lekérdezés listává kombinálható.

Question 20

Hogy működik a média lekérdezés?

Answer 20

Egy média lekérdezés egy logikai kifejezés.
Akkor igaz egy média lekérdezés, ha meg van adva média típus, akkor az illeszkedik az eszköz média típusára.

Egy média lekérdezés lista igaz, ha valamely média lekérdezése igaz, akkor hamis ha mind hamis.

Question 21

Jellemezd a média lekérdezés kiértékelését!

Answer 21

A felhasználói ágensnek változás esetén újra ki kell értékelniük a média lekérdezéseket, válaszul a környezetben történt változásokra.

Question 22

Sorold fel és jellemezd a média lekérdezés módosítókat!

Answer 22

not módostó: a média lekérdezés eredményét negálja

only módosító: a média lekérdezést elrejti az ősi felhasználói ágensek elől
az ősi felhasználói ágensek only média típusként kezelik

Question 23

Melyek a reszponzív webdizájn média típusai?

Answer 23

Egy média típus a felhasználói ágens eszközök egy széles csoportja, melyeken megjeleníthető egy dokumentum.
Nem a IANA által kezelt médiatípusok.

Question 24

Sorold fel majd jellemezd a média típusokat!

Answer 24

all: összes elemre illeszkedik
print: nyomtató eszközökre és nyomtatott megjelenítő illeszkedik
screen: printre vagy speechre nem illeszkedő összes eszköz
speech: képernyőolvasókra és olyan eszközökre melyek hangosan olvasnak fel egy oldalt

Question 25

Sorold fel az elavult média típusokat!

Answer 25

tty, tv, projection, handheld, braille, embossed, aural

Question 26

Mik a média jellemzők?

Answer 26

A média típusoknál finomabb teszt, a felhasználói ágens vagy megjelenítő eszköz egy bizonyos jellemzőjét vizsgálja.
pl. width, height, orientation, resolution

Question 27

Jellemezd a média jellemzőket!

Answer 27

Szintaktikailag CSS tulajdonságokra hasonlítanak
név: érték
Logikai kontextusban megadható csak a jellemző neve vagy egy összehasonlító művelettel tartomány alakban.

Question 28

Sorold fel a tulajdonságok és a média jellemzők közti eltéréseket!

Answer 28

A tulajdonság információt ad a dokumentum megjelenéséről, a jellemző az output eszköz követelményeit írja le.

A média lekérdezéseket zárójelek közé kell zárni és and vagy or kulcsszavakkal kombinálhatók, egy jellemző csupán a nevével is megadható

Question 29

Mikor kell mindig hamis legyen egy jellemző értéke?

Answer 29

Ha olyan fogalomra hivatkozik, mely nem létezik egy adott eszközön.

Question 30

Sorold fel a legfontosabb média jellemzőket!

Answer 30

width: <length>
height: <length>
orientation: portrait/landscape</length></length>

Question 31

Milyen előtagokat és hogyan használunk tartomány típusú jellemzőkön?

Answer 31

A tartomány típusú jellemzőknél lehet használni a min- max- előtagot, így közönséges média jellemzőként.
min-height: 600px az ugyanazt jelenti mint (height => 600)
max-height: 600px az ugyanazt jelenti mint (height <= 600)

Question 32

Hogyan lehet média jellemzőket kombinálni?

Answer 32

not, and vagy or-al
not(color)
(width < 600px) and (height < 600px), update: slow)
or (hover: none)

Question 33

Jellemezd a nézetablakot!

Answer 33

A mobil/kézi eszközök nézetablaka keskenyebb, mint egy asztali böngészőablaké.
A keskeny nézetablak gondot jelent olyan dokumentumoknál, melyeket úgy terveztek, hogy az asztali böngészőkben nézzenek ki jól.

Question 34

Milyen nézetablakokat tartanak fenn a mobil böngészők?

Answer 34

Látható nézetablak: az oldal a kijelzőn látható része
Elrendezési nézetablak: a nézetablak, melybe a böngésző kirajzol egy oldalt

Question 35

Mire való a viewport meta címke?

Answer 35

Lehetővé teszi a szerző számára a nézetablak és a kezdeti nagyítási arány közvetlen megadását.