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.

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ó:

A kép (nagyobb változata) külön ablakban is megtekinthető.lumzy_felulet_full.jpgA Lumzy alkalmazás felülete

Új projektet az 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 kép (nagyobb változata) külön ablakban is megtekinthető.lumzy_newproject_full.jpgÚj projekt kezdése (Lumzy)

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.

A kép (nagyobb változata) külön ablakban is megtekinthető.lumzy_alsomenu_full.jpgAz alsó menüsor egy részlete

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.

A kép (nagyobb változata) külön ablakban is megtekinthető.lumzy_browser_full.jpgBöngésző ablak elhelyezése

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:

• Ikon/kép (Icon/Picture)
  • A kép elhelyezésekor a megjelenő panelben választhatunk a kézzel rajzolt, valamint színes ikonok közül, de saját magunk által készített képet is feltölthetünk az Új kép hozzáadása (Add New Image) funkcióval.

A kép (nagyobb változata) külön ablakban is megtekinthető.lumzy_addicon_full.jpgÚj kép/ikon elhelyezése

• Gomb (Button)
  • A gomb beillesztésekor megadhatjuk a címke szövegének tulajdonságait (méret, szín, formázások), sőt akár ikont is beállíthatunk a gombhoz.
    A kép (nagyobb változata) külön ablakban is megtekinthető.lumzy_addbutton_full.jpgÚj gomb elhelyezése

• Lista (List)
  • Lista elhelyezésekor dupla kattintás után átírhatjuk a listaelemeket, és akár azt megadhatjuk, hogy melyik listaelem legyen kijelölve. Itt is van lehetőségünk események használatára

A kép (nagyobb változata) külön ablakban is megtekinthető.lumzy_addlist_full.jpgÚj lista elhelyezése

• Menüsor (Menu bar)
  • A menüsor elhelyezése után dupla kattintással átírhatjuk a menüpontokat. A menüpontok esetén a "menüpont szövege, ugrás helye, súgószöveg" formátumot kell követnünk. Az ugrás helye lehet egy webcím, illetve akár egy lap neve is. Vagyis ha például egy ELTE menüpontot akarunk létrehozni úgy, hogy kattintáskor az ELTE weblapja jöjjön be, a súgószöveg pedig az ELTE weblap szöveg legyen, akkor a következőt kell írnunk: ELTE,http://www.elte.hu,ELTE weblap.

• Formázható szöveg (Rich Format Textfield)
  • Formázható szövegdoboz használata esetén akár karakterenként, szavanként is formázhatjuk az elhelyezett szöveget. A szöveget felsoroláslistaként is elhelyezhetjük, de erre a célra használhatjuk a Felsorolás lista (Bullet list) komponenst is.

A kép (nagyobb változata) külön ablakban is megtekinthető.lumzy_rtf_full.jpgFormázható szöveg (RTF)

• Szöveg címke (Text label)
  • Szöveges címke esetén a szöveg tulajdonságait tudjuk beállítani.

A kép (nagyobb változata) külön ablakban is megtekinthető.lumzy_label_full.jpgCímke elhelyezése

• Töltelék szöveg (Dummy text)
  • A töltelék szöveg vízszintes vonalakként van ábrázolva. Itt tulajdonságot nem tudunk beállítani, viszont a blokkot átméretezhetjük.

A kép (nagyobb változata) külön ablakban is megtekinthető.lumzy_dummytext_full.jpgTöltelékszöveg készítése

• Nyomvonal navigáció (Breadcrumb)
  • Nyomvonal navigáció esetén dupla kattintás után átírhatjuk a szöveget, és a szöveg alap tulajdonságait is beállíthatjuk.

A kép (nagyobb változata) külön ablakban is megtekinthető.lumzy_breadcrumb_full.jpgNyomvonal navigáció elhelyezése

• Keresés mező (Search box)
  • A kereső mezőnek nem állíthatunk be tulajdonságot, csak átméretezhetjük azt.

A kép (nagyobb változata) külön ablakban is megtekinthető.lumzy_search_full.jpgKeresés funkció

• Címkefelhő (Tag cloud)
  • A címkefelhőre kattintva átírhatjuk a doboz tartalmát, és a szöveg alap tulajdonságait is beállíthatjuk.

A kép (nagyobb változata) külön ablakban is megtekinthető.lumzy_tagcloud_full.jpgCímkefelhő komponens

• Kép (Image placeholder)
  • A kép esetén egy egyszerű ábra kerül a lapra, amelyet átméretezhetünk a kívánt méretnek megfelelően.

A kép (nagyobb változata) külön ablakban is megtekinthető.lumzy_imageplace_full.jpgKép elhelyezése

• Vízszintes- illetve függőleges gördítősáv (Horizontal Scrollbar, Vertical scrollbar)
  • A gördítősávok esetén nincs beállítási lehetőség, csak a kép méretét tudjuk módosítani.

A kép (nagyobb változata) külön ablakban is megtekinthető.lumzy_scrollbar_full.jpgVízszintes gördítősáv komponens

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!

A kép (nagyobb változata) külön ablakban is megtekinthető.lumzy_alaplapblogkezdo_full.jpgAz Alaplap blog kezdőlapjának vázlatos terve

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:

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ép (nagyobb változata) külön ablakban is megtekinthető.wireframe_alaplapmobil_full.jpgAz Alaplap Blog kezdőlapjának mobil nézete

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