Vissza az előzőleg látogatott oldalra (nem elérhető funkció)Vissza a tananyag kezdőlapjára (P)Ugrás a tananyag előző oldalára (E)Ugrás a tananyag következő oldalára (V)Fogalom megjelenítés (nem elérhető funkció)Fogalmak listája (nem elérhető funkció)Oldal nyomtatása (nem elérhető funkció)Oldaltérkép megtekintése (D)Keresés az oldalon (nem elérhető funkció)Súgó megtekintése (S)

Honlapok funkcionális- és arculati tervezése, megvalósítása / Webes alkalmazások tervezési módszerei és eszközei

Tanulási útmutató

Összefoglalás

A leckében megismerkedünk a web-es alkalmazások tervezési módszereivel, és eszközeivel. Részletesen bemutatunk olyan alkalmazást, amellyel elkészíthetjük az alkalmazásunk vázlatos, drótváztervét.

Követelmény

A hallgató ismerje meg a webes alkalmazások tervezési módszereit és eszközeit, valamint ismerjen meg olyan eszközöket, amelyekkel elkészítheti ezen terveket.

Önállóan megoldható feladatok

Drótvázterv készítése a gyakorlatban

Térjünk át a gyakorlatra! Készítsük el egy képzeletbeli blog (Alaplap blog) drótvázas tervét. A blog egy olyan szakmai blog szerepét kívánja betölteni, amely elsősorban számítógépes hardverelemekkel kapcsolatos újdonságokat, híreket tartalmaz.

A bloggal kapcsolatban korábban megfogalmaztuk a követelményeket, a drótváz terveknek ezekkel összhangban kell lenniük.

Megjegyzés

Emlékeztetőül a követelmények:

  • Az adminisztrátor WYSIWYG-szerkesztő segítségével tudjon blogbejegyzéseket és oldalakat publikálni.
  • A bejegyzéseket különböző kategóriákba lehessen sorolni az adminisztrációs felületen!
  • Az adminisztrátor jelölhesse meg azon bejegyzéseket (kiemelt bejegyzések), amelyet fő helyen szeretne elhelyezni a kezdőlapon!
  • A blogbejegyzések között lehessen keresni szabadszavas kereső segítségével! A kereső minden oldalon elérhető legyen!
  • A bejegyzéseket lehessen kategória szerint szűrni!
  • A bejegyzésekhez tartozzon RSS-csatorna!
  • A bejegyzésekhez felhasználói regisztráció után lehessen hozzászólni!
  • A blog kezdőlapján legyenek elkülönítve a kiemelt és további bejegyzések! A kiemelt bejegyzések hangsúlyosabban jelenjenek meg!
  • Minden bejegyzéshez tartozzon egy (egységes méretű) figyelemfelhívó kép!
  • Legyen oldalsáv, ahol a menüpontok, és más blokkok (pl. címkefelhő, legutóbbi bejegyzések, utolsó hozzászólások) elérhetőek!
  • A kezdőlapon csak a bejegyzések bevezetője legyen olvasható, ha a bejegyzés címére kattintunk, akkor legyen olvasható a teljes bejegyzés!
  • Minden oldalon legyen lábléc, amelyben az alábbi információkra mutató linkek kapjanak helyet: Jogi nyilatkozat, Impresszum, Kapcsolat, Oldaltérkép!
  • A menüpontokat egyszerűen módosítani/bővíteni lehessen az adminisztrációs felületen!

Tananyagunkban a drótváz készítéséhez a Lumzy portált fogjuk használni, amely egy online elérhető, ingyenes szolgáltatást biztosít. A portálra érdemes regisztrálnunk magunkat, mert így kényelmesen el tudjuk menteni a munkánkat. Az alkalmazás előnye, hogy némi interakciót is alkalmazhatunk az egyes oldalak között, így bizonyos szintig szimulálhatjuk az alkalmazás működését, például egy adott elemre kattintva megjelenhet az adott aloldal vázlatos terve.

A http://lumzy.com/app/ oldalon megtaláljuk a Regisztráció (Register) linket, amelyre kattintva néhány adat megadásával elvégezhetjük a regisztrációt.

Az alkalmazás felülete az alábbi képen látható:

Új projektet az Új projekt ikon ikon megnyomásával készíthetünk, majd a megjelenő ablakban meg kell adnunk a projekt nevét és az első oldal címét.

A projekt neve (project title) neve legyen Alaplap blog, a kezdőlap címe pedig Alaplap blog kezdőlap. Egy üres oldalból (blank page) induljunk ki, és nyomjuk meg a Projekt készítése (Create project) gombot!

Alapból egy 800x500-as üres oldal jelenik meg, de a képernyő alján lévő szélesség (width) és magasság (height) értékeket megváltoztathatjuk. Ugyanitt láthatjuk, hogy az ikonok segítségével Új oldalt is készíthetünk, szerkeszthetjük annak tulajdonságait, másolatot készíthetünk belőle, illetve törölhetjük azt. Ezt a későbbiekben részletesebben bemutatjuk, hiszen nem csak a blogunk kezdőlapját, hanem annak egy aloldalát is meg fogjuk tervezni.

Kezdjük el az alkalmazás megtervezését!

Ha hangsúlyozni szeretnénk, hogy ez egy webes alkalmazás, húzzunk be a lapra egy web-böngészőt (web-browser) stilizáló komponenst. Ezt a Container & Layout csoportban találjuk a vezérlők (Controls) között.

Ragadjuk meg a böngészőablak jobb alsó sarkát, és méretezzük át úgy, hogy betöltse a teljes lapméretet. Ezek után elkezdhetjük felépíteni az oldalunkat.

Az összes többi összetevőt is ugyanezzel a módszerrel helyezhetjük el. A bal oldali panelen megtaláljuk a legfontosabb összetevőket, úgymint:

Ha nem az egyes kategóriákból akarjuk a fenti komponenseket kikeresgélni, akkor a keresőmezőbe (Quick search) is beírhatjuk a nevet.

Folytassuk tovább az oldal felépítését!

Az alábbiakban látható, hogy mi hogyan terveztük meg ezt az alkalmazást. Arra kérjük az Olvasót, hogy gyakorlásképpen próbálja meg ugyanezt megvalósítani!

Mivel az alkalmazásban nem volt Twitter, Facebook és gyengén látó változatra vonatkozó ikon, a következő három ikont használhatjuk erre a célra: Twitter icon Facebook ikon Gyengénlátó verzió ikonja

Megjegyzés

Ma már arra is figyelnünk kell, hogy egy adott webalkalmazás hogyan fog megjelenni és működni az okostelefonokon, amelyek kijelzője jóval kisebb felbontású, mint az asztali számítógépeké. A kezdőlap fenti elrendezése tipikusan nem alkalmas arra, hogy az az okostelefonokon is jól átlátható, használható legyen. Ezért külön megtervezhetjük ezt a mobil nézetet is. Ebben érdemes a bejegyzésekkel kezdeni az oldalt, és a most bal oldalon elhelyezett blokkokat a képernyő aljára tenni úgy, hogy oda a képernyő tetejéről is eljuthassunk linkek segítségével.

A későbbiekben látni fogjuk, hogy az alkalmazás HTML5-ös sablonjának elkészítésénél ezt a tervet is figyelembe vesszük, és felbontásfüggő megjelenéssel készítjük el a sablont.

Vissza a tartalomjegyzékhez

Új Széchenyi terv
A projekt az Európai Unió támogatásával, az Európai Szociális Alap társfinanszirozásával valósul meg.

A tananyag az ELTE - PPKE informatika tananyagfejlesztési projekt (TÁMOP-4.1.2.A/1-11/1-2011-0052) keretében valósult meg.
A tananyag elkészítéséhez az ELTESCORM keretrendszert használtuk.