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

-
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).

- 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.

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.

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.

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. |
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.
|
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. |
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.
|
különböző felbontásokra
| |
különböző böngészőprogramokra
| |
különböző nyelvi környezetre
|