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

iDevice ikon Célok
  • 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


Tartalom
  • 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):

  1. Az eseményt, például a felhasználó ráklikkel egy linkre, a kliens feldolgozza és összeállít egy kérést.
  2. A kliens a kérést elküldi a szervernek.
  3. A szerver a kérést feldolgozza és összeállítja a választ.
  4. A szerver visszaküldi a választ a kliensnek.
  5. 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).

2. Ábra: A böngészők alapvető funkciói

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.

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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!
  6. 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.
  7. 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!
  8. 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.
  9. 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.
  10. 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.

iDevice ikon Feladat

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?

iDevice kérdés ikon Feleletválasztós teszt
A web működése egy kétoldalú kommunikáción alapul. Mi a két szereplő?
  
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.

Mi a különbség a statikus és a dinamikus weboldalak között?
  
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.

Mi a HTML?
  
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.

Mi a CSS?
  
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.

Mire való a böngésző Vissza és Előre gombja?
  
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.