Óbudai Egyetem
Rejtő Sándor Könnyűipari Mérnöki Kar

Médiatechnológiai és Könnyűipari Intézet

Könnyűipari Mérnök levelező szak
Nyomda, Média szakirány
Multimédia II. tantárgy
Tárgykód: RMTMM2NVLC
Oktató: Dr. Borbély Ákos

Első stílus

"Az idő mindent determinál"

Az első stílusnál a legtöbb problémát az okozta, hogy a megszokottól eltérő betűtípust alkalmazhassak. Számtalan gondot okoz, főleg az ékezetes betűknél, például Ű, Ő. Ebben a stílusban a Google Open sans (Tervező: Steve Matteson) típusát választottam, mely jelenleg az általam ismert fontok közül talán a legalkalmasabb korszerű webes tipográfiára.

Második stílus

"Nem tudtuk, hogy lehetetlen, ezért megcsináltuk."

Ebben az esetben arra törekedtem, hogy lehetőleg merőben eltérő megjelenéssel mutassam be ugyanazt a html tartalmat, mint az első stílusnál már kidolgoztam.

Képtérkép (Image Map)

"A felhők felett mindig kék az ég."

Az image map technika segítségével számos érdekes applikációt készíthetünk. A következő lapon egy példán keresztül fogom szemléltetni milyen lehetőségeket rejt számunkra a képtérkép.

Felhasznált eszközök

Notepad ++ - kódoláshoz a legkiválóbb eszköz
Adobe Photoshop - a képszerkesztés szabványává vált piacvezető grafikai szoftver
Dassault Systèmes SolidWorks - 3D modellezésre kifejlesztett CAD rendszer, gépészeti tervezésre és terméktervezésre használom
KeyShot - jelenleg az egyik leggyorsabb valós idejű renderelő program, elsősorban nem organikus, azaz "tárgy jellegű" objektumok renderelésére kiváló.
IrfanView - Ingyenes képnézegető program, mely fájméret optimalizálására és tömeges képfeldolgozásra kínál jó megoldást

Pár szó az ikonfontokról

A világhálón jelenleg a reszponzív oldalak terjedésével egyidejűleg felmerült az igény a nagyítható vektoros képek alkalmazására. Ez az igény először a széles körben használt ikonoknál jelentkezett. A kézenfekvő megoldás az W3C (World Wide Web Consortium) által kifejlesztett SVG (Scalable Vector Graphics) formátum alkalmazása jelentette volna, de a formátum még nem tudott elterjedni bizonyos jogi korlátozások miatt, így több böngésző a ami napig sem támogatja kellő mértékben.

A fejlődésnek nem állhat az útjába semmi, így a megoldást az ikonfontok alkalmazása jelenti napjainkban, mely rohamosan terjed. Ezen az oldalon is a fenti fehér ikonokat betűkészletként töltöttem be. Az ikonokat tartalmazó betűkészlet neve: Font Awesome (Tervező: Dave Gandy) és MIT licensz alapján használható.

Webes tipográfia trendjei

Jelenleg számos gondot okoz, hogy ne csupán a hagyományosan alapértelmezett betűtípusokat alkalmazzuk egy weblapon, hanem tetszés és ízlés szerint jeleníthessük meg gondolatainkat, alátámasztva a nyomtatott tipográfia 500 éves tapasztalati úton kifejlesztett eszközeivel. Egyre több lehetőségünk van erre, de még vannak komoly hiányosságok.

Figyelemmel kísérve a vezető operációs rendszer gyártó cégek trendjeit azt láthatjuk, hogy az általuk tervezett betűtípusok kifejezetten monitorokra és kijelzőkre vannak optimalizálva. Ez alatt azt értem, hogy jellemzően függőleges és vízszintes vonalakat használnak és kerülik az íveket és dőlt vonalakat. Ennek elsősorban a kis méreteken van jelentősége, hiszen kijelzők pixeleinek formája téglalap, és az íves formák megjelenítése a mai napig komoly gondot okoz. Az itt látható típust is kifejezetten kijelzőkre tervezték. A jelenleg legismertebb két ilyen típus a Segoe (Microsoft), és az Open Sans (Google).

Gondolatok a reszponzivitásról

Pár évvel ezelőtt a legnagyobb gondot az okozta a tervezőknek és sitebuilder-eknek, hogy a böngészők jellemzően másként jelenítették meg a szabványos stíluselemeket. Különösen sok fejfájást és hajhullást okozott az explorer hibáinak tömkelege. A fejlődés során még a mai napig nem jutottunk el a böngészőfüggetlen megoldásokig, mert a szabványosítást az üzleti érdekek hátráktatják.

Napjainkban a böngészésre alkalmas mobiltelefonok és tabletek megjelenésével teljesen új alapokra került a weboldalak tervezése. A különböző méretű és oldalarányú kijelzők sokaságára való tervezést tovább bonyolítja a képpontsűrűségbeli eltérések is.

Korábban az általánosan elfogadott 72 dpi, ma már a múlté, és a retina display-ek korában már most készülnünk kell a 4k felbontású kijelzők megjelenésére. A kijelzők fejlődése számtalan tervezésbeli új szempontot hozott, melyeket új szakmák megjelenését eredményezték. A korszerű weboldalaktervezését ma már nem csupán webdesignerek és grafikusok, hanem UX designerek (User experience - felhasználói élmény tervező) és UI designerek (User interface- felhasználói felület) készítik.

A kulcskérdés ma már az ergonómia és a használhatóság, melyet mindenek előtt eszközfüggetlenül kell megoldanunk. Számtalan problémát okoz például a tesztelés, hiszen milyen módon tudjuk ellenőrizni, hogy megfelelően működik a weboldalunk egy londoni üzletember Blacberry telefonján, vagy egy kínai legújabb tableten?.

További érdekes szempontokat hozott a korábban említett vektoros megjelenítés, különös tekintettel, az ikonokra. Elhagyjuk lassan a sprite-ok korát is, melyekkel a gyorsabb képbetöltéseket igyekeztünk megoldani. Sokan ma már érintőképernyőn böngésznek, és ha valaki 45 pixelnél kisebb gombokat próbál manapság tervezni, biztos lehet benne, hogy kockázatot vállal, hiszen az ember ujjai komoly méretbeli korlátokat jelentenek például egy telefonos böngészés esetén.

Összefoglalva kijelenthetjük, hogy napjaink webdesignja egyre összetettebb és egyre magasabb szintű kihívásokat jelent a szakemberek számára, és számos új kutatási terület felé nyitott kaput a reszponzív tervezés. A számomra legmegdöbbentőbb eredményeket az utóbbi években elvégzett USER TESZTEK jelentették, melyek során elképesztő eredényeket kaptam, az emberek mentális modeljeinek sokféleségéről.

Üzenetküldő form készítése

Az alábbi űrlap egyszerű email-es üzenet küldésére alkalmas, de jelenleg nincs "bekötve" biztonsági okok miatt. A hibakereső része, és formátum ellenőrző rész nem tökéletes, további fejlesztést igényel.