Responsive Web Design. Dr. Nyéki Lajos 2019

Átírás

1 Responsive Web Design Dr. Nyéki Lajos 2019

2 Bevezetés A responsive web design tervezési technika által létrehozott web oldalak skálázhatók, a web oldalt mobil telefon, táblagép és asztali számítógép böngészőjével is megtekinthetjük. A skálázható web oldalak felépítése speciális, a skálázhatóságot média lekérdezések és töréspontok biztosítják. Ezek teszik lehetővé a felhasználó képernyőjéhez és böngészőjéhez való alkalmazkodást.

3 A leggyakoribb képernyő felbontások Alacsony felbontás 4,4% % % % % % Egyéb magas felbontás 31,6% (Screen Resolution Statistics, January 2017,

4 A média lekérdezés A média lekérdezés olyan CSS szabály, amely megadja a böngésző számára a média típusát és tulajdonságait. A média típusa lehet screen (digitális képernyő), print (nyomtatott oldal), speech (szövegfelolvasó program) és all (minden média típus esetén). A média tulajdonságai: a viewport mérete (szélessége, magassága), orientációja (álló, fekvő), skálázhatósága, színmélysége, felbontása, méretaránya, stb.

5 A média lekérdezés típusai Link megadásával: <link rel= stylesheet media= screen href= pelda.css > Import szabály url(pelda.css) screen; Media szabály (min-width: 500px) { };

6 A töréspont A töréspont azt adja meg, hogy különböző médiumok esetén (pl. notebook, tablet, mobil) hogyan változzon a tartalom megjelenítése.

7 A töréspontok használata A tervezők egy része a szabványos töréspontokat szereti használni, ezek a mobil telefon, a táblagép és az asztali számítógép változatok. Egy másik megközelítés a mobil telefonra először, és a fokozatos bővítés a többi médiumra. Ha a fokozatos bővítés során már kevés a hely vagy sok a hely a széleken, akkor célszerű töréspontot beszúrni, és elkészíteni a következő változatot.

8 A gyors prototípus készítés néhány eszköze Bootstrap Foundation Zurb W3.CSS

9 A tervezés Stílus útmutató készítése a terv vizuális megjelenítése érdekében. Ez az útmutató lesz a közvetítő kapocs a tervező és a fejlesztő között. Responsive design pattern -ek használata a felhasználói navigáció megtervezésekor. A toggle navigation pattern és a select menu pattern használata az egyszintű és a többszintű navigáció megtervezésekor. Reszponzív oldaltervek készítése százalékok és dobozok használatával. Tartalom és tipográfia hozzáadása.

10 Fluid elrendezések százalékok használatával

11 Fluid elrendezések rácsok használatával

12 A terv megvalósítása kódolással Grafika hozzáadása stíluslapok használatával. Fokozatos bővítés a különböző böngészők figyelembe vételével és elegáns csiszolás a hibák kiküszöbölésére. A Modernizr JavaScript könyvtár használata a böngésző jellemzőinek feltárására. A tesztelés és az optimalizálás elvégzése.

13 Freeware szoftverek CoffeeCup Free HTML Editor Lauyan ToWeb Responsive Website Creation Software V7.1 Mobirise Website Builder RocketCake Responsive Website Editor 2.2

14 Kereskedelmi szoftverek CoffeeCup HTML Editor CoffeCup Responsive Site Designer Humane Technologies Pinegrow Web Editor WYSIWYG.Web.Builder.14