1. Lecke: A web működésének és használatának alapjai

- A tanuló megértse a web alapvető működését.
- Ismerje a dinamikus és statikus weboldalak jelentését, a web-programozási lehetőségeket.
- Ismerje a statikus weboldalak készítéséhez szükséges nyelveket.
- Ismerje a böngészőprogramok legfontosabb gombjait.
- Ismerjen jellemző weblapkészítési hibákat
- a web működése, kliens-szerver kommunikáció
- statikus és dinamikus weboldalak
- web-programozási módok
- a fejlesztéshez szükséges nyelvek: HTML, CSS
- böngészőprogramok weblapkészítési hibák
A web működése
A weblapkészítés megtanulásához szükséges, hogy értsük a web alapvető működését, azaz milyen folyamat játszódik le, amikor, mint felhasználó, ráklikkelek a böngészőben egy linkre majd megjelenik a kívánt weboldal. Ilyenkor valójában egy kétszereplős kommunikáció zajlik le. A két szereplő két alkalmazás: a szerver, amely a webszerver és a kliens, amely a böngésző. Ezek fizikailag lehetnek ugyanazon a számítógépen, de bármilyen távol lévő két számítógépen is. A folyamat fázisai (lásd 1. ábra):
-
Az eseményt, például a felhasználó ráklikkel egy linkre, a
kliens feldolgozza és összeállít egy kérést.
- A kliens a kérést elküldi a szervernek.
- A szerver a kérést feldolgozza és összeállítja a választ.
- A szerver visszaküldi a választ a kliensnek.
- A kliens értelmezi a választ, összeállítja a weblapot, amelyet megjelenít.

1. Ábra: Kliens-szerver kommunikáció
Web-programozás
A weboldalak tartalmazhatnak programkódot, ún. szkriptet (kisebb utasítássorozat), amelyek befolyásolják a fenti folyamatot. A programokat két csoportra lehet bontani. Az egyik a kliens oldali program, amelyet a böngésző hajt végre és az 1. és az 5. pontban fut le. Valamint a szerver oldali program, amit a webszerver hajt végre a 3. pontban. Bizonyos feladatokat egyértelműen el lehet dönteni, hogy kliens vagy szerver oldalon lehet végrehajtani (pl. ha a szükséges adat szerver oldalon van adatbázisban, csak szerver oldali programozással lehet kiolvasni), másoknál a webfejlesztőnek kell dönteni. Ilyenkor több szempont szerint kell mérlegelni: hálózati terhelés csökkentése, kliens ill. szerver gépek terhelésének csökkentése, csak megfelelő adatok kliens oldalra küldése, stb.
Ezt jól példázza egy bejelentkező weboldal. A nyitó oldalon
található egy bejelentkező űrlap két beviteli mezővel (azonosító, jelszó)
illetve egy bejelentkező gomb. Amikor a felhasználó ráklikkel a gombra, egy
kliens oldali szkript ellenőrzi, hogy a felhasználó kitöltötte-e mindkét űrlapmezőt,
különben el sem küldi a kérést a szervernek. Ha kitöltötte, akkor elmegy a
kérés, amelyben szereplő azonosító és jelszó helyességét egy szerver oldali
szkript ellenőrzi a szerver oldali adatbázis alapján. Az eredmény függvényében
más-más weboldal állít össze válaszként (vagy a bejelentkezett weboldalt, vagy
egy hiba üzenetet tartalmazó weboldalt).
Az oldalak tartalmának összeállítása szerint két csoportra bontjuk a weboldalakat. A statikus weboldalak tartalma állandó, az oldal forráskódjában szerepel. Ilyen oldalakat olyan témára érdemes készíteni, amelyek tartalma nem változik. A másik kategória a dinamikus weboldalak, amelyek tartalmát legtöbbször valamilyen adatforrásból (adatbázis, fájl) program állít elő. Így ezek tényleges tartalma mindig az adatforrás aktuális tartalmától függ, percről percre változhat, például hírek, áruházak, fórumok. Míg statikus weboldalakat lehet készíteni programozási tudás nélkül, dinamikus weboldalak készítéséhez mindenképp szükséges kliens és szerver oldali programozási ismeret.
Nyelvek
Ez a tananyag statikus weboldalak elkészítésével foglalkozik, amely nem számít programozásnak. Egy ún. jelölő nyelvet kell haszni, a HTML (Hyper Text Markup Language) nyelvet, amely elsősorban a weboldal tartalmáért felelős. Továbbá egy másik, szintén jelölő és nem programnyelvet is használunk, a CSS (Cascading Style Sheets) nyelvet, amely a weboldal kinézetét határozza meg. Ezekről később részletesen lesz szó.
Böngésző program
A böngésző programokat mindenki ismeri és használja nap, mint nap. A programok típusuk és verziójuk szerint eltérnek, de az alapvető funkció mindben egyformán megtalálható (2. Ábra).

Amikor a böngésző egy weboldalt lekér a szerverről, akkor az
letöltődik és tárolódik lokálisan. Ezeket a weboldalakat felfűzi egy listába a
böngésző ablakonként, illetve böngésző-laponként (fülenként). A Vissza (1) gomb egyet visszalép ebben a
listában és az ott szereplő oldalt jeleníti meg újra. Az Előre (2) gomb a listában előre lép egyet és jeleníti meg az
oldalt. A Frissít (4) gomb az
utoljára elküldött kérést újra elküldi a szerverre és az eredményt újra
megjeleníti. Tehát ha a kéréssel adatokat is küldtünk, aminek hatására a
szerver oldalon egy művelet lefutott, akkor ez a folyamat újra megismétlődik! A
Leállítás (5) gomb a fent
részletezett folyamatot állítja le ott, ahol épp tart. Továbbá minden böngésző
tartalmaz egy Címsort (3), amelyben az aktuálisan megjelenített weboldal url-je
(Unified Resource
Locator) található, azaz a
felhasznált protokollt, a megjelenített weboldal teljes útvonalát (a domain,
fájl elérési útvonala és a fájlnév), valamint további paramétereket. A
böngészés irányítható, ha az url-t a felhasználó a címsorban közvetlenül kitölti.
A jelenlegi böngésző használati statisztikák megtalálhatók
itt:
http://w3schools.com/browsers/browsers_stats.asp
Weblapkészítési hibák
A weblapkészítés elkezdése előtt fontos, hogy ismerjük az
általános web-tervezési hibákat, milyen hibákba nem szabad esni egy oldal
elkészítésekor, ha sikeres weboldalt szeretnénk készíteni.
- Maradjunk az általánosan elfogadott trendeknél! Ne találjunk ki szerintünk érdekes és újító megoldásokat, mert ezeket a látogatók nem ismerik és csak összezavarja őket. Ha nem találják meg az oldalon a keresett tartalmat, másik oldalon fogják megkeresni.
- Ne használjunk az oldal vezérléséhez bonyolult képeket és animációkat! Ezek lehetnek nagyon szépek, de az oldal használatát, áttekinthetőségét nehezítik. Továbbá a webes keresőknek nehezítik a linkek követését, a webodalak feltérképezését.
- Ne készítsünk teljes weboldalt Adobe Flash-ben! Ezek az oldalak nagyon szépek tudnak lenni, de funkcionálisan rettenetesen sok problémát okoznak.
- Ne készítsünk értelmetlen nyitó oldalt, ahol a felhasználónak valamit választani kell, vagy klikkelni a belépéshez! Ez megzavarja a keresőket, bosszantja a felhasználókat, ráadásul semmi haszna.
- Ne várjuk el a felhasználótól, hogy milyen böngészővel és milyen felbontásban nézze az oldalunkat! Senki nem fog a kedvünkért böngészőt, vagy felbontást változtatni, inkább elnavigál az oldalunkról. Készítsük el az oldalt úgy, hogy minden böngészőben és minden felbontásban megfelelő legyen!
- Kerüljük a felugró ablakokat! Minden felhasználót bosszant a felugró ablak, ráadásul általában olvasatlanul zárják be őket. Ezeket csak tényleg indokolt esetben használjuk.
- Ne indítsunk zenét az oldal betöltődéskor! Ha szeretnénk zenét az oldalhoz, akkor tegyünk rá egy lejátszót és bízzuk a felhasználóra, hogy elindítsa!
- A linkek mindig jól elkülönüljenek a többi tartalomtól és mindig láthatóan változzon, ha az egeret fölé viszi a felhasználó! Ezek alapvető elemei az oldalnak, fontosak a vezérléshez. Ha a felhasználó nem találja őket, nehezen fog navigálni.
- Kerüljük az extrém módon kirívó tartalmat az oldalon! Az ilyen elemek a reklámokra jellemző, amit a felhasználók nagy része átugrik, így figyelmen kívül hagy. Ezzel értékes információkat fog elveszteni.
- Kerüljük az olvashatatlan tartalmat! A színek kavalkádja, a speciális betűtípusok, a zavaró háttérképek nagyban ronthatják az olvashatóságát, ami elriasztja a felhasználókat az oldalunkról.
Természetesen sok egyéb hibát is fel lehetne sorolni.
Célszerű nyitott szemmel járni a weben és gyűjteni a rossz és a jó
megoldásokat, így tudunk jobb és jobb weboldalakat fejleszteni.

Válasszon ki néhány népszerű weboldalt a következő
kategóriákból:
- cég weboldala
- szervezet vagy intézmény weboldala
- hírportál
- valamilyen témát bemutató weboldal
- közösségi portál
- webáruház
Alkosson véleményt az oldalakról 2-3 másodperc alatt, majd
elemezze ki, hogy miért ez a véleménye!
Alkosson véleményt 1-2 perc után az oldal
használhatóságáról, majd elemezze ki, hogy miért ez a véleménye!
Gyűjtse ki kategóriánként, hogy milyen tartalmi és külalaki összetevők
jellemzik az ilyen oldalakat, azaz miben hasonlítanak az egy kategóriába eső
oldalak!
Állítson fel értékelési szempontokat kategóriánként és
pontozza az oldalakat!
Néhány szempont az értékelésekhez:
- Milyen oldalakból áll a webhely? Mit tartalmaznak az egyes
oldalak?
- Milyen funkciókat tartalmaz a webhely?
- Az oldalon hol helyezkednek el a funkciók?
- Mennyire áttekinthető az oldal?
- Mennyi médiaelem található az oldalon (kép, hang, animáció,
stb)?
- Milyen szín-összeállítású az oldal, hogyan kapcsolódik a
tartalmához?
- Mennyi színt használ és azok milyen hatást keltenek a
felhasználóban?

A webet használó személy és a számítógép.
| |
A kliens, ami a böngésző, és a szerver, ami a webszerver
alkalmazás. | |
A kliens, aki a webet használó személy, és a szerver, ami
egy távoli számítógép. |
A statikus a helyi számítógépen van, a dinamikus
pedig egy távoli gépen. | |
A statikus oldal mindig egy helyen van, a dinamikust pedig
időnként átmozgatják egy másik számítógépre. | |
A statikus oldal tartalma állandó és a forrásba bele van
írva, a dinamikus oldal tartalma változó, valamilyen programmal állítják el. |
Egy olyan nyelv , amivel weboldalakat lehet leírni.
| |
Olyan programnyelv, amivel weboldalakat lehet programozni.
| |
Olyan programnyelv, amivel a weboldalak kinézetét lehet meghatározni.
|
Olyan programnyelv, amivel a weboldalak kinézetét lehet leírni.
| |
Olyan nyelv, amivel weboldalakat lehet készíteni, a HTML utódja.
| |
Olyan nyelv, amivel leírható, hogy az oldal hogyan nézzen ki.
|
A már látogatott és a lokálisan eltárolt oldalak láncában
lehet előre és vissza mozogni, és az oldalakat újra betölteni. | |
A Vissza gombbal a böngészőben beállított kezdőoldalra lehet
lépni, az Előre gombbal pedig az oldal elejére. | |
Az Előre gombbal a legutoljára látogatott oldalra lehet
lépni, a Vissza gombbal pedig vissza az aktuális oldalra. |