Vizsgatémák 15 Reszponzív webdizájn Flashcards
Mit lehet tudni a mobil tartalomszolgáltatásról?
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.
Mi a reszponzív webdizájn?
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.
Mi az adaptív webdizájn?
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.
Sorold fel majd jellemezd a weboldal elrendezéseket!
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ő
Mi a referencia pixel?
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.
Miben mérik a nyomtatók/kijelzők pont-/pixelsűrűségét?í
DPI (dots per inch)
DPCM (dots per centimeter)
PPI (pixels per inch)
PPCM (pixels per centimeter)
Hogy kötünk abszolút hossz mértékegységeket?
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.
Mit neveznek a látószög mértékegységének?
px mértékegységet.
Mikor mihez ajánlott kötni a mértékegységeket?
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.
Melyek a CSS relatív hosszúságú mértékegységei?
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
Melyek a reszponzív webdizájn fő komponensei?
Média lekérdezések
Nézetablak
Folyékony rácsok
Rugalmas helyettesítési elemek
Adaptív/reszponzív képek
Mi a nézetablak?
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.
Sorold fel a nézetablak-arány mértékegységeit!
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ő
Mik a média lekérdezések?
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.
Jellemezd a média lekérdezéseket!
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
Milyen nyelvekben használhatók média lekérdezések?
CSS
HTML
XML
JavaScript
Mi a média lekérdezés szintaxisa CSSben?
@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.
Mi a média lekérdezés szintaxisa HTMLben?
A média attribútum a következő elemeken adható meg:
link
meta
source
style
pl.
<link></link>
<link></link>
Mi a média lekérdezés szintaxisa?
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ó.
Hogy működik a média lekérdezés?
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.
Jellemezd a média lekérdezés kiértékelését!
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.
Sorold fel és jellemezd a média lekérdezés módosítókat!
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
Melyek a reszponzív webdizájn média típusai?
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.
Sorold fel majd jellemezd a média típusokat!
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
Sorold fel az elavult média típusokat!
tty, tv, projection, handheld, braille, embossed, aural
Mik a média jellemzők?
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
Jellemezd a média jellemzőket!
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.
Sorold fel a tulajdonságok és a média jellemzők közti eltéréseket!
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ó
Mikor kell mindig hamis legyen egy jellemző értéke?
Ha olyan fogalomra hivatkozik, mely nem létezik egy adott eszközön.
Sorold fel a legfontosabb média jellemzőket!
width: <length>
height: <length>
orientation: portrait/landscape</length></length>
Milyen előtagokat és hogyan használunk tartomány típusú jellemzőkön?
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)
Hogyan lehet média jellemzőket kombinálni?
not, and vagy or-al
not(color)
(width < 600px) and (height < 600px), update: slow)
or (hover: none)
Jellemezd a nézetablakot!
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.
Milyen nézetablakokat tartanak fenn a mobil böngészők?
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
Mire való a viewport meta címke?
Lehetővé teszi a szerző számára a nézetablak és a kezdeti nagyítási arány közvetlen megadását.
