2. Lecke: A weblapkészítés módszertana

iDevice ikon Célok
  • Ismerje a weblapkészítés folyamatát.
  • Ismerje a weblapokkal szemben támasztott alapvető követelményeket.
  • Ismerje a weblapok fejlesztésének eszközeit.

Tartalom

  • A weblapkészítés folyamata: specifikáció, anyaggyűjtés, tervezés (struktúra és design), kódolás, publikálás.
  • Követelmények a weboldalakkal szemben.
  • A weblapok elkészítésének eszközei.

A weblapkészítésre vonatkozó ajánlás

A weblapkészítés egyik legnagyobb nehézsége, hogy nincs egységes szabvány, illetve szabályrendszer, ami mindenki számára kötelező érvényű. Sajnos a különböző böngészők se ugyanúgy értelmezik és jelenítik meg a leírt forráskódot. Többek között ezért hozta létre több nagy cég (Microsoft, IBM, Apple, stb.) 1994-ben a W3C (World Wide Web Consortium) nevű szervezetet, amely célul tűzte ki a web standardizálását. Egyik fő munkája, hogy a webes fejlesztés több területével kapcsolatban ajánlásokat (W3C Recommendations) hoztak létre, amelyek betartását javasolják a webfejlesztőknek. Ezen szabályok nyomán az utóbbi években a különbségek nagy mértékben csökkentek és remélhetőleg ez a tendencia tovább folytatódik. Emiatt az ajánlások követése minden igényes webfejlesztőnek erősen javasolt. Ez a tananyag is a W3C által adott referenciákat követi. Továbbá a tanuláshoz javasolt a szervezet által működtetett referencia webhely használata (http://w3schools.com/default.asp). Ez a továbbtanuláshoz is komoly segítség lehet, mivel témában és mélységben is jóval túlmutat jelen tananyagon.

A weblapkészítés folyamata

Jó és igényes weboldalak elkészítéséhez egy több lépcsős folyamaton kell keresztülmenni, melynek minden lépése komoly mértékben befolyásolja az eredmény weboldal minőségét, így mindegyiket szakértelemmel és odafigyeléssel kell végrehajtani.

Általánosságban elmondható, hogy egy weboldal hatékonyságát az mutatja meg legjobban, hogy hányan látogatják és mennyi ideig tartózkodik a weboldalunkon, ezekre léteznek mérési lehetőségek (http://www.google.com/analytics/) Tehát nem az a cél, hogy a fejlesztőnek vagy akár a megrendelőnek tetsszen, hanem az internetes felhasználók millióinak kell megfelelni! Éppen ezért egy jó webfejlesztőnek tájékozottnak kell lenni az aktuális webes trendekről, felhasználói szokásokról, technikai lehetőségekről.

1. Specifikáció

Akár magunknak, akár megbízásból készítünk weboldalt, fontos első lépés, hogy pontosan tisztázzuk, hogy mi a célja az oldalnak. Természetesen ez a tartalmából általában közvetlenül következik, de meghatározza az oldal komplexitását, valamint a további lépések igényét, ezáltal jobban becsülhető a szükséges idő, eszköz és egyéb források. Fontos tisztázni a célközönséget, amely meghatározza a tartalmi és külalaki elemeit, felépítését. Fel kell térképezni a konkurenciát, hasonló tartalmú, célú weboldalakat, hogy tisztába legyünk azok erősségeivel, hiányosságaival, illetve a felhasználók igényeivel.

2. Anyaggyűjtés

Tisztázni kell a weboldal tartalmi elemeit. A tartalmi tervezéshez, felosztáshoz szükséges látnunk, hogy milyen és mennyi adatot, képet, stb. kell az oldalon megjeleníteni és azok milyen összetételűek, hogyan csoportosíthatóak. Meg kell ismerni az ezekhez tartozó személyiségi, szerzői és médiajogi szabályozást és ezeket szigorúan be kell tartani! Szükséges látni, hogy mely elemeket kell nekünk előállítani és azoknak milyen feltételei, hardver és szoftver igényei vannak. Gondoskodnunk kell a rendelkezésre nem álló elemek (képek, animációk, stb.) elemek elkészítéséről.

3. Tervezés

A weboldalak tervezése kritikus része a folyamatnak. Egy oldal bármilyen jó lehet tartalmilag, ha áttekinthetetlen a szerkezete vagy csúnyán néz ki, senkit nem fog érdekelni. A tervezést két részre lehet bontani: struktúra és külalak (design).

Struktúra

Az oldalak felépítésénél van néhány alapszabály, amelyet célszerű betartani, ha jól böngészhető oldalakat akarunk készíteni:

  • Mivel a felhasználók nem szeretnek görgetni, a tartalmat célszerű úgy feldarabolni, hogy egy weboldal lehetőleg 1-2, legfeljebb 3 böngészőben megjelenő oldal legyen. Ez természetesen függ a felhasználó által használt képernyőfelbontástól. Ezt természetesen nem tudjunk, de jelenleg a leggyakrabban használt felbontás az 1024*768 pixel, így célszerű az oldalakat eszerint tervezni.
  • Az ember szemmozgása önkéntelen, így az oldalak tervezésénél figyelembe kell venni hogy az oldal mely részeire tekint a felhasználó többször és mely részeire fordít kisebb figyelmet, hiszen az oldal tartalmi elemeit eszerint kell elhelyezni. Egy általános formát lehet megadni a weboldalak felépítésére, ez az F forma. Ez azt jelenti, hogy az oldal bal fölső sarka a legfrekventáltabb pontja az oldalnak és jobbra és lefele csökken a figyelem (3. Ábra).
3. Ábra: A tekintet eloszlása weboldalakon
(forrás: http://www.useit.com/alertbox/f_reading_pattern_eyetracking.jpg)
  • Felhasználási szokások valamint az említett F szabály alapját a weboldalaknak meg lehet adni egy felépítést, amely az oldalt több funkcionálisan elkülönülő részre bomlik. Ettől természetesen el lehet térni, de a felhasználók nagy része ehhez a felépítéshez szokott és a szükséges részeket a megszokott helyen keresi.

4. Ábra: Egy általános weboldal részei


Fontos, hogy a felhasználó azonnal lássa, amikor egy oldalra kerül, hogy milyen oldalon van, ezt az oldalt kereste. Mivel az 1 címsor figyelem szempontjából egy kiemelt rész, itt jellemzően az oldal címe, a cég logója, stb. található. Ide célszerű elhelyezni egy olyan linket is, amely a nyitóoldalunkra visz. A 2 fejlécben több funkció is helyet kaphat, mint egy menü, kereső cella, stb. Az F alak miatt a 3 rész szintén az egyik legfontosabb területe az oldalnak, így ide a lokális vezérlés kerül, azaz a menü. Mivel a 4 terület kevésbé észrevehető az emberek számára, ide olyan funkciók kerülnek, amelyek azoknak a felhasználóknak szól, akik tudatosan vannak az oldalunkon, ismerik a felépítését. Azaz ide a bejelentkezés, gyors elérésű funkciók, fórumok, blogok, stb., illetve kifelé mutató link gyűjtemény kerül. Az 5 rész természetesen az oldal fő tartalmának bemutatására való. A 6 lábléc a legkevésbé látható rész, sokszor csak akkor látható, ha a felhasználó teljesen az oldal aljára görget. Így itt csak járulékos információkat érdemes elhelyezni, mint a készítő nevét, dátumát, stb.

 

Külalak (design)

A külalak tervezése legalább annyira fontos, mint a szerkezet, hiszen ez a „csomagolása” a weboldala. A felhasználók általában 2-3 másodperc alapján megítélik a weboldalakat, mielőtt még a tartalmát fel tudnák mérni. A tervezéskor figyelembe kell venni az oldal tartalmát, a célközönséget, a színek pszichológiai hatását. Általánosságban kijelenthető, hogy sokszor a kevesebb több elv itt is érvényes. Legfeljebb 4 különböző szín javasolt az oldalon. Érdemes figyelni a színek egymáshoz való viszonyára, az olvashatóság, a nyomtathatóság, a színtévesztők szempontjából. A képek és animációk használatánál szintén az ésszerűséget szem előtt kell tartani. A túl sok média elem növeli a letöltendő anyag mennyiségét, ami lassítja a böngészést, elriasztó lehet azon felhasználóknak, akiknek kvótája van a napi böngészéshez. Ezért mindenképp kerülni kell az olyan média elemeket, amelyek funkcionális jelentőségűek az oldalon például menüpont, hogy azok is tudjanak az oldalon navigálni, akik ezeket az elemeket nem töltik le.

4. Elkészítés

Ha megvan a terv és az oldal tartalmi elemei is, akkor az oldal tényeleges elkészítése van soron. A weboldalak fejlesztéséhez többfajta alkalmazás használható, amelyek 3 csoportba sorolhatók.

a) Szövegszerkesztők

Ez az oldalak elkészítésének legelemibb módja, amikor a forrást az első betűtől az utolsóig nekünk kell beírni egy egyszerű szövegszerkesztőben. A kódolás előnye, hogy pontosan olyan forráskód lesz, amit mi szeretnénk, így bármit meg tudunk valósítani, amit a használt nyelvek lehetővé tesznek. Hátránya, hogy nagyobb szakmai ismeret kell az ilyen webes fejlesztéshez. A egyes megjelenítők közötti eltérések miatt kivételeket speciális megoldásokat kell alkalmazni az egységes kinézet miatt, amit sok esetben web-szerkesztő alkalmazások megadnak számunkra.

b) WYSIWYG

A WhatYouSeeIsWhatYouGet alkalmazások jellemzője, hogy olyan felületet tartalmaz, ahol a weboldalt egy grafikus felületen lehet szerkeszteni és úgy összeállítani az weboldalt, hogy nem ismerjük a fejlesztő nyelveket. Ilyenkor a forráskódot a program generálja le. Emellett tartalmaznak olyan felületet is, ahol a forráskódot láthatjuk és szerkeszthetjük, így ezekben az alkalmazásokban a forrást ugyanúgy szabadon lehet szerkeszteni, mint a szövegszerkesztőkben. Hátránya, hogy a szerkesztő nem elég flexibilis és az egyedi megoldásokra nincsenek felkészítve.

c) Tartalomkezelő rendszerek

A tartalomkezelő rendszerek (röviden CMS) alkalmasak egész komplex, programozást tartalmazó weboldalak elkészítésére anélkül, hogy nekünk kellene a kódolást, programozást végezni. Az oldalakat egy keretrendszerben állíthatjuk össze és különböző modulokat tudunk az oldalunkhoz hozzá kapcsolni. A teljes kódot a keretrendszer generálja le, ebbe közvetlenül beleszerkeszteni viszont már komoly web-programozási ismeret szükséges. Hátránya, hogy komplexitásánál fogva, több a hibalehetőség, illetve alkalmazásához először meg kell tanulni a keretrendszer használatát.

Tesztelés

Fontos a weboldalainkat tesztelni, ami statikus oldalak esetén azt jelenti, hogy legalább a leggyakrabban használt böngészőkben ki kell próbálni, a megjelenítését és funkcionalitását végig kell ellenőrizni. Érdemes több felbontásban is végignézni, nem szabad az oldalnak „szétesni” eltérő felbontás esetén. Továbbá a mai trend szerint fontos a mobil eszközökön is kipróbálni az oldalunkat.

5. Publikálás

A publikálás az oldal nyilvánosságra hozást jelenti, amellyel a 10. fejezetben részletesebben fogunk foglalkozni.


iDevice ikon Feladat
A tananyag során a feladata egy olyan komplex weboldalt elkészíteni lépésről lépésre, amely az ön saját weboldala lesz.

Ennek a folyamatnak az ebben a leckében szereplő munkafázisaiból végezze el az első hármat! Azaz keressen olyan önnek tetsző és nem tetsző weboldalakat, amely emberek saját bemutatkozó oldala! Gyűjtse ki azokat a jellemzőket, amelyek tetszenek és szeretné a saját oldalán is használni, valamint nem tetszenek és nem szeretne átvenni! Gyűjtse össze azokat az adatokat, amelyeket szeretne az oldalon megjeleníteni! Gondolja végig, hogy milyen oldalfelosztást szeretne a tanult szempontokat figyelembe véve! Találja ki az oldal színvilágát és gyűjtsön, illetve készítsen hozzá média elemeket, mint képeket. Ha az oldalát valóban szeretné a kurzus végén publikálni, akkor mindenképp vegye figyelembe a szerzői jogi szabályozást (http://net.jogtar.hu/jr/gen/hjegy_doc.cgi?docid=99900076.TV)!

A további leckék során szereplő feladatokkal az oldalt lépésről lépésre építjük fel.


iDevice kérdés ikon Feleletválasztós teszt
Milyen elrendezést használunk a weboldal felépítésénél?
  
Az F formáját követjük, mert ilyen az emberek figyelmének eloszlása az oldalon.
Az E szabályt követve, ami az emberek szemmozgásán alapul.
A fontos dolgokat mindig az oldal tetejére tesszük, valamint a bal és jobb oldali hasábba.

Melyik állítás hamis?
  
A weboldal külalakjának tervezésekor figyelembe kell venni a témáját jellemző színeket.
A weboldal külalakjának tervezésekor célszerű sok színt használni a sok kontraszt eléréséhez.
A weboldal külalakjának tervezésekor célszerű figyelembe venni a színek pszichológiai hatását.

Az oldalak tartalmának felosztását úgy kell meghatározni, hogy
  
pontosan 1024*768 pixel méretű legyen.
kitöltse a böngészőablakot szélességben.
lehetőleg ne legyen több 1-2 görgethető oldalnál.

Mit takar a WYSIWYG rövidítés?
  
Azt az elvet, hogy olyan weboldalt kell fejleszteni, ahol a felhasználó azt látja, amit a fejlesztő.
Olyan weboldalfejlesztő alkalmazást, amikor egy grafikus felületen lehet az oldalt fejleszteni és a kódot a program generálja.
Egy olyan keretrendszert, amiben a weboldalakat előre elkészített modulokból lehet összeválogatni.

Mire nem szükséges a tesztelést elvégezni?
  
különböző felbontásokra
különböző böngészőprogramokra
különböző nyelvi környezetre