Honlapok funkcionális- és arculati tervezése, megvalósítása

Szerző

Abonyi-Tóth Andor, Horváth Győző, Tarcsi Ádám (Lektorálta: Tömösközi Péter)

Vissza a tartalomjegyzékhez

A modul célja és tartalma

A honlapok, portálok fejlesztése igen komplex folyamat, amely többek között magában foglalja a követelmények összegyűjtését, szerepkörök meghatározását, használati esetek elkészítését, a folyamatok megtervezését, a vázlatos tervek elkészítését, a konkrét arculat megtervezését, a terveknek megfelelő sablonok fejlesztését, a szerver- és kliensoldali programozást, a technológiai és felhasználói teszteléseket, és még hosszasan sorolhatnánk.

Ahhoz, hogy az elkészült alkalmazás népszerűvé váljon, különböző marketing eszközöket is be kell vetni (pl. SEM, SEO), és folyamatosan dolgozni kell azon, hogy a felhasználók megelégedéssel használják az adott szolgáltatást.

Nagyobb fejlesztési projekteknél népes csapat dolgozik egymással együttműködve a siker érdekében, ahol az egyes szerepek határozottan szétválnak, pl. UX-specialista vesz részt a vázlatok elkészítésében és a felhasználói tesztelés elvégzésében, profi grafikus készíti az arculattervet, több programozó dolgozik a kliens- és szerveroldali kódok fejlesztésén, profi tesztelők segítik a hibák kiszűrését és így tovább.

Azonban kisebb fejlesztési projektek esetén ezen feladatok néhány (vagy akár egy) emberre hárulnak. Emiatt a fejlesztőnek többféle területen is helyt kell állnia.

Tananyagunk célja, hogy a honlapkészítés iránt érdeklődő hallgatóknak konkrét példák segítségével bemutassuk a honlapkészítés fázisait, a tervezéstől a kész sablonokig, és olyan eszközökkel és ötletekkel segítsük a munkát, amelyeket kisebb fejlesztési projektek során fel tudnak használni.

A tananyagunknak nem célja (nem is lehetne), hogy univerzális szakembereket képezzen. Attól például hogy valaki megismerkedik a felhasználói felületek tesztelésének módszereivel, még nem biztos, hogy ő maga is szakszerűen el tud végezni egy tesztet. Attól, hogy a saját honlapjának arculatát el tudja készíteni, nem biztos, hogy más feladatot is az elvárt színvonalon és határidő betartásával el tud végezni. Az érintett témák tehát csak ízelítőül szolgálnak a hallgatók számára annak érdekében, hogy megismerjék az egyes fázisokat. Ezek alapján aztán eldönthetik, hogy melyek voltak azok a területek, amelyek igazán közel álltak hozzájuk, mely irány(ok)ban képzik magukat tovább.

Tananyagunkban számos szemléltető animációt is elhelyeztünk. Kérjük a kedves Olvasót, hogy az animációkban foglalt műveletek a gyakorlatban is próbálják ki, és végezzék el az egyes feladatokat annak érdekében, hogy az adott eszközöket minél jobban megismerjék és használni tudják.

Vissza a tartalomjegyzékhez

A modul leckéi, a megértéshez szükséges előismeretek, tárgyi feltételek

Leckék

1. Webes alkalmazások tervezési módszerei és eszközei
2. Web-alapú felhasználói felületek használhatósági elemzésének módszerei és eszközei
3. Céges weboldalak, webshopok ergonómiája
4. Drótvázterv készítés a gyakorlatban
5. Arculati kézikönyv formai és tartalmi elemei, logótervezés elvei, a logótervezés módszertana és eszközei
6. Az InkScape alkalmazás használata a logótervezés során
7. Arculattervezés eszközei, arculatterv készítése a GIMP alkalmazás segítségével
8. A tartalom és megjelenés szétválasztásának eszközei, HTML5+CSS3 sablon elkészítése
9. A Wordpress CMS testreszabása
10. Ismerkedés a tesztelés során felhasználható eszközökkel (validátorok, platformfüggetlenséget ellenőrző módszerek, megfelelés a WCAG 2.0 teljesítési feltételeknek)
11. Keresőoptimalizálás, keresőmarketing

Előismeretek

• A HTML5 és CSS3 nyelv ismerete
• PHP és JavaScript alapismeretek

Tárgyi feltételek

• Multimédiás számítógép, telepített böngészőprogramokkal, GIMP és Inkscape alkalmazással

Vissza a tartalomjegyzékhez

Elvárások a tanuló felé

Minimumszint

Ismerje a felhasználói felületek használhatósági elemzésének módszereit, a weblapok készítésére vonatkozó alapvető ergonómiai elveket. Legyen képes vázlatos terv (wire-frame) készítésére, illetve a terv alapján arculatterv megvalósítására, valamint a HTML5- és CSS3- sablonok fejlesztésére. Legyen képes az elkészült munkát technológiai és akadálymentességi szempontból elemezni.

Optimumszint

Ismerje a felhasználói felületek használhatósági elemzésének módszereit, és legyen képes az adott célra megfelelő eszköz, módszer kiválasztására. Ismerje a weblapok készítésére vonatkozó alapvető ergonómiai elveket, és az alkalmazás tervezése során ezeket vegye figyelembe. Legyen képes vázlatos terv (wire-frame) készítésére, illetve a terv alapján arculatterv megvalósítására. Az arculattervezés során olyan megoldásokat válasszon (pl. rétegek, rétegcsoportok, segédvonalak), amelyekkel biztosítható a terv egyszerű bővíthetősége, átalakíthatósága. Legyen képes az arculattervnek megfelelő, reszponzív HTML5- és CSS3-sablonok fejlesztésére. Legyen képes az elkészült munkát technológiai és akadálymentességi szempontból elemezni és azok alapján a szükséges módosításokat átvezetni az alkalmazásra.

Vissza a tartalomjegyzékhez

A modul irodalomjegyzéke

Kötelező irodalom

• Webergonómia Jakob Nielsen nyomán (Szerkesztő: Leiszter Attila, Typotex, 2011)

Ajánlott irodalom

• ISO 9241. (1992/2001). Ergonomics Requirements for Office with Visual Display Terminals (VDTs), Geneva, International Organization for Standardization.
• ISO/IEC 9126, 2001. Software Product Evaluation-Quality, Characteristics and Guidelines for the User, Geneva, International Organization for Standardization.
• Nigel Bevan (1999): Quality in Use: Meeting User Needs for Quality, Journal of System and Software
  http://www.usabilitynet.org/papers/qiuse.pdf
• Jakob Nielsen (2003): Usability 101: Introduction to Usability, http://www.useit.com/alertbox/20030825.html
• Jakob Nielsen (1993): Usability Engineering, Morgan Kaufmann, San Francisco.
• Haidar S. Jabbar, T. V. Gopal, and Sattar J. Aboud. (2007) An integrated quantitative assessment model for usability engineering. Journal of Computer Science, 3(5):345–352.
• Peterson, R. & Olney, I. (2009). Usability evaluation in a multiphase, exploratory design-based research study of an online community for the practice of special education in Bulgaria. In G. Siemens & C. Fulford (Eds.), Proceedings of World Conference on Educational Multimedia, Hypermedia and Telecommunications 2009 (pp. 891–900). Chesapeake, VA: AACE.
• Bodrogi Péter (2001): A felhasználói felület tervezése, Veszprémi Egyetem, jegyzet.
• Steve Krug (2005): Don't Make Me Think! A Common Sense Approach to Web Usability (2nd Edition), New Riders Press.
• Nguyen, T., Chang, V., Chang, E., Jacob, C. & Turk, A. (2008). A Contingent Method for Usability Evaluation of Web-based Learning Systems. In K. McFerrin et al. (Eds.), Proceedings of Society for Information Technology & Teacher Education International Conference 2008 (pp. 579–585). Chesapeake, VA: AACE.
• Izsó Lajos (2007):Web-bányászati módszerek alkalmazása internet-alapú tananyagok minőségvizsgálatára http://www.jampaper.eu/Jampaper_H-ARC/2007._II._2.sz._files/JAM070201h.pdf
• Nyéki Lajos (2009): Az SPSS Clementine 12.0 alkalmazása távoktatásos hallgatók LMS használatának.
• Jókai Erika, Nagy Gábor Zsolt (2009): Elektronikus tanulási környezet használatának vizsgálati módszerei, I. Oktatás-Informatikai Konferencia – Tanulmánykötet, ELTE Eötvös Kiadó, Budapest, 141–149.
• Choquet, C., Luengo, V. & Yacef, K. 2009. Usage Analysis in Learning Systems. AACE
• Schroeder, W. (1998) Testing web sites with Eye-tracking;
  http://www.uie.com/articles/eye_tracking/
• Jakob Nielsen (2006): F-Shaped Pattern For Reading Web Content http://www.useit.com/alertbox/reading_pattern.html
• Kiss, O. E: (2004) Weblapok fejlesztési lehetőségeiről. Magyar Pszichológiai Társaság XVI. Pszichológiai Nagygyűlése, Absztrakt kötet 179. o., Debrecen, 2004. május 27–29.
• Kara Pernice, Jakob Nielsen (2009): Eyetracking Methodology - How to Conduct and Evaluate Usability Studies Using Eyetracking http://www.useit.com/eyetracking/methodology/
• Lajos Izsó: The INTegrated Evaluation and Research Facilities for Assessing Computer-users’ Efficiency (INTERFACE)
  http://www.erg.bme.hu/Kutat/INTERFACE/INTERFACE.pdf

Vissza a tartalomjegyzékhez

Kulcsszavak

Használhatóság, arculatterv, html5, css3, wireframe, mockup, gimp, inkscape,