Rugalmas webtervezés mobil eszközökre

InformációÉrdeklődés
Tisztelt érdeklődő!
Jelenleg a tanfolyamnak nincs konkrét időpontja. Amennyiben érdeklődőként regisztrálja magát, elősegíti a tanfolyam mielőbbi megszervezését.
Várjuk jelentkezését!
Érdeklődés

Napjainkban egyre nagyobb az igény, hogy egy weboldal ne csak a hagyományos számítógépek kijelzőjén jelenjen meg esztétikusan, hanem a mobileszközök (mobiltelefonok, táblagépek) kijelzőjén is. Az okostelefonok és a táblagépek ugyan elvileg gond nélkül megjelenítik a hagyományos felépítésű oldalakat, de ezeken a készülékeken igazi felhasználói élményt mégiscsak a mobilra optimalizált megjelenítés biztosít.

 Amikor a webfejlesztő azzal szembesül, hogy az általa fejlesztett weboldalból mobil megjelenést is csinálnia kell, több lehetőség közül választhat. Egyik lehetőség, hogy elkészíti ugyanannak a weboldalnak egy teljesen önálló, kifejezetten mobilra optimalizált mutánsát. A másik lehetőség, hogy az eredeti weboldal megjelenését úgy alakítja ki, hogy az rugalmasan alkalmazkodjon a kijelzők eltérő méretéhez.

 Tanfolyamunk középpontjában ez utóbbi technika, az úgynevezett Responsive Web Design (RWD) áll. Bár viták folynak arról, hogy a fent említett két lehetőség közül melyiknek mi az előnye és a hátránya, abban egyetértés van, hogy a Responsive Web Design alkalmazása kis és közepes honlapok esetén gyorsabb, egyszerűbb és költséghatékonyabb lehet.

 A Responsive Web Design alkalmazásához alapvetően azt kell jól elsajátítani, hogy a weboldal vázszerkezete, a rajta megjelenő elemek (betűk, képek, stb.) méretezése hogyan lehet teljesen rugalmas. Ehhez egy szemléletváltásra is szükség van, hiszen a fejlesztők többsége hagyományosan mindent méretet pixelben definiál.

 A tanfolyamon a nélkülözhetetlen elméleti alapok lefektetésével párhuzamosan közösen átalakítunk egy hagyományos, pixel alapú méretezéssel készült weboldalt, rugalmas, mobileszközökön is optimális megjelenéssel rendelkező weboldallá.

 A tanfolyam elvégzésével a hallgatók képesek lesznek már méglévő weboldalakat, CMS sablonokat rugalmas megjelenésűvé átalakítani, illetve új weboldalakat már eleve ezen elv mentén elkészíteni.

Óraszám: 16 tanóra (1 tanóra: 45 perc)
Minimum létszám: 6 fő

Tandíj: 48.000 Ft /fő + ÁFA

Kedvezmény: 1.600 Ft + ÁFA (részletek)

Részletfizetés: nincs, a tandíjat egy összegben kell befizetni

Célközönség:

Tanfolyamunkat olyan webtervezőknek, webfejlesztőknek ajánljuk, akik a mobileszközök felé is nyitni szeretnének.

Belépési feltétel:

Stabil HTML és CSS alapismeretek

Igazolás: Tanúsítvány
Időbeosztás:
  • Az aktuális kiírás szerint, lásd a fenti táblázatot
  • Vállalunk egyéni tanácsadást is
  • Céges csoportoknak egyedi beosztással és tematikával is tartunk képzést
Tematika:
 
Bevezető- Fix és rugalmas tényezők a webtervezésben
- Mitől lesz egy weboldal rugalmas?
- Mobileszközök jellegzetességei a webtervezés szempontjából
- Létezik-e külön mobilweb, vagy a web eszközfüggetlen?
- Responsive Web Design fogalma és összetevői
Pixel fogalma- Tényleg abszolút mértékegység-e a pixel?
- Három típusú pixel a retina kijelzős mobileszközök világában
Viewport fogalma- Mit nevezünk viewport-nak?
- A viewport-ok típusai
- Viewport meta elem
Rugalmas betűméretezés- Igazodás a böngészőprogramok alapértelmezett betűméretéhez
- Az "em" és "rem" mértékegység
- Betűméretek és távolságok beállítása "em" mértékegységben
Rugalmas dobozméretezés- Áttérés fix (pixel alapú) layout-ról rugalmas (százalék alapú) méretezésre
- Rugalmas webtervezés képlete
- Hasábméretezés "em" mértékegységben
Rugalmas képméretezés- img elemek rugalmas méretezése
- Rugalmas háttérképek CSS-ben
- Egyéb multimédiás elemek (pl. videók) rugalmas méretezése
Eszköz- és médiaspecifikus CSS- CSS médiatípusok
- CSS médiatípus deklarációk
- CSS által definiált média karakterisztikák (szín, méret, képarány, orientáció)
- CSS3 media queries (média lekérdezések) fogalma és szintaktikája
- Ideális töréspontok az eszközök felbontása alapján
- CSS feldarabolása eszközspecifikus módon
"Első a mobil" (mobil first) és az "Első a tartalom" (content first) elve- A media queries korlátai
- A tartalom, a megjelenés és a viselkedés tudatos szétválasztása
- Progressive enhancement elve a kijelzők mérete és az eszközök képességei alapján
- Media queries és az Internet Explorer
TesztelésRugalmas tervek tesztelési lehetőségei

Demo Videó


Érdekel Megosztás

Webmester kategória többi tanfolyamai: