Következő esemény

Mi ez itt, kérem?

Személyes hangvételű írások az informatika érettségiről, érettségizőknek és tanáraiknak.

Írjad csak!

Programozik a gyerek

Feedek és ilyesmik

e-mailt kérek az új bejegyzésekről


(nem foglak spammelni)

XML

Kövesd az oldalt!

facebook twitter

2011.01.05. 01:05 raerek

A jó, a rossz és a csúf, avagy weblapkészítés az informatika érettségin

Címkék: informatika telepítés érettségi középszint gyakorlati weblapkészítés emelt szint informatika érettségi kompozer

Ezt a cikket azért írtam, hogy bemutassak egy olyan beállítást a Kompozer weblapkészítő-alkalmazásban, amelyet a megoldásvideók készítésekor én is használtam. A cikk utóbb kissé megnyúlt, és ha téged csak ez a beállítás érdekel, akkor kattints ide.)

Bevezető, a WWW őstörténetével

(Figyelj, ez nem internet-történet. Nehogy abba a hibába ess, hogy az internetet összekevered a World Wide Web-bel. A keveredést egyébiránt az is okozhatja, hogy magyarul az internetet sokan és szívesen nevezik világhálónak. De attól a két dolog nem ugyanaz, még akkor sem, ha mára az internet legtöbbet használt alkalmazása a World Wide Web, a WWW.)

Szóval 1989-90-ben, amikor az internet már sok éve létezett - bár otthon alig-alig volt még ilyenje valakinek - Svájcban, a CERN nevű részecskefizikai kutatóintézetben bizonyos Tim Berners-Lee (akinek azért van ilyen szép neve, hogy az informatikából érettségiző meggebedjen) elkészített egy ajánlást, a HTML első formáját, meg pár programot, mégpedig azért, mert herótja volt attól, hogy a CERN-en belül, a fizikusok között is elvész a fontos információ, és így kívánt lehetőséget teremteni arra, hogy

  • a fizikusok által közösen szerkeszthető dokumentumok készüljenek, amibe mindenki beleírhatja a cuccait, és
  • a sok cikk egymásra hivatkozzon (Számodra teljesen természetes, hogy a weboldalak egymára hivatkoznak, egy kattintás, és máshol vagy. Akkoriban a legtöbbek számára ez elég új dolog volt.)

Tim ezzel részint feltalálta a World Wide Web-et, részint világhírű lett. Figyeld meg azonban az eredeti céljait: nem egy csiricsoda világot akart teremteni, amilyen a web mára lett. Nem, az ő célja inkább valamilyen könnyen és hatékonyan használható dokumentumtárhoz hasonlítható, főként a kutatási eredmények számára.

Utóbb a WWW kilép a CERN-ből, ráadásul pár év múlva - ekkorra már képeket is lehet elhelyezni a weboldalakon, ó minő fényűzés! - elkészülnek a grafikus böngészők (a legelső (?), az NCSA Mosaic ma is letölthető). Ja igen. Eddig csak szövegesek voltak - közülük ma is létezik a Lynx, amit ráadásul aktívan fejlesztenek is. A WWW hódítani kezd.

Közben a weboldalakat leíró HTML nyelv is fejlődik, egyre több dolgot tud, és közben kezd tudathasadásossá válni. Komolyan.

Mi is a gond a HTML-lel?

Hát az, hogy másra kezdték használni, mint amire kitalálták.

Említettem, hogy a WWW kezdett tényleg World Wide, azaz világméretben elterjedni. A kereskedelmi cégeknek is lettek honlapjaik. És - fene a gusztusukat - szerettek volna minél szebb és csicsásabb honlapot maguknak.

A HTML létének célja eredetileg az, hogy a szöveg belső felépítését leírhassuk vele. Azaz világos legyen, hogy mi a cím, mik az alcímek, hol vannak felsorolások, mettől meddig tart egy bekezdés, mely kifejezéseket akarjuk hangsúlyozni, és hova vezetnek hivatkozások. Tudóséknak ez elég is lett volna. (Emlékszel a cikk címére? Ez a rész a "").

A nagyvilág azonban szép honlapokat akart, és a HTML-t elkezdték úgy alakítani, hogy képes legyen erre is. Tudjon más és más betűtípusokat, mindenféle színeket, mindenféle szövegelrendezést, betűnagyságot, és egyéb retteneteket. Azaz a HTML már nem csak a szöveg felépítését tárolja, hanem a kinézetét is. És lőn, és kerültek vala a HTML nyelvbe új címkék. (Ez a rész a "rossz".)

Ráadásul sokan már nem úgy tekintettek a weboldalra, mint egy szövegmegjelenítési lehetőségre, hanem inkább a klasszikus, a nyomdákban megvalósítható képi világot, elrendezéseket akarták itt látni. A háttérképek még csak hagyján, de a HTML-ben egyszerűen nem volt arra mód, hogy mondjuk egy egészalakos fényképen olyan feliratokat heyezzünk el a megfelelő helyekre, mint: "Ez itt a feje", "Jobb kar", és így tovább. Mi a megoldás? A táblázatok. Vágjuk szét a képet, és tegyük az egyes részeit egy táblázat első oszlopának megfelelő celláiba, a második oszlopba meg mehetnek a feliratok. Tüntessük el a táblázat keretezését, és máris olyan, mintha a képen volnának a feliratok. (Na, ez a "csúf" rész.)

Szóval végső soron mindent meg lehetett oldani, de néha "hangyányit" hegeszteni kellett. 2003 környékén a webfejlesztők munkájának nagy része abból állt, hogy vért pisilve megpróbálták megoldani, hogy az egyes weboldalak minden böngészőben azonosan nézzenek ki.

Ekkoriban a HTML egyszerre hordozza a tartalmat és a formát. Ez pedig iszonyat kavarokhoz vezet.

Színre lép a CSS

Többeknek is az a remek gondolatuk támadt, hogy a formát el kellene különíteni a tartalomtól. Ennek a gondolatnak az egyik megvalósulása a CSS. A CSS egy formaleíró nyelv, és ha használod, akkor a CSS nyelvű rész lesz felelős a külcsínyért az oldaladon, a HTML nyelvű rész pedig csak a belbecs marad. Azaz a HTML ismét csak a szöveg felépítését írja le, a kinézetért a CSS lesz a felelős. (Működéséről példa itt, remekül elmondja a lényeget, nem is írok másikat.) A CSS 1994-ben születik meg, azaz baromi régen. Azonban ilyen-olyan okok miatt sokáig nem terjed el. Épp akkoriban kezd igazán terjedni, amikor a jelenleg is használatos kétszintű érettségi követelményeit kialakítják. Mára minden profi webhelynek ezt kéne használnia, és a legtöbben tényleg használják is.

Az informatika érettségi követelményeinek idevágó része, és a saját megjegyzéseim

A követelmény:

7.2. Web-lap készítés:

Középszinten: Ismerje a Web-lap jellemző elemeit. A címsor, háttérszín, háttérkép, különböző színű, méretű, igazítású szöveg, listák, táblázatok, képek, animációk, hivatkozások elhelyezése egy grafikus Web-szerkesztővel. Tudjon egyszerű Web-lap szerkesztési feladatot elvégezni.

Emelt szinten: Tudjon egyszerű Web-lapot készíteni a HTML leíró nyelv segítségével, egyszerű szövegszerkesztővel. Ismerje a HTML alapelemeit.

Megjegyzések:

  1. Emelt szinten elvileg Jegyzettömb-kaliberű alkalmazásnál bonyolultabbat nem is kellene kapnod. Gyakorlatilag kapsz, nézd csak meg a szoftverlistát (Hivatkozás jobb oldalt, a Fontosabb linkek részen).
  2. Középszinten nem elvárás ugyan a HTML ismerete, de majdnem biztos, hogy a grafikus szerkesztő valamit össze fog kutyulni. Ha nem is tudsz fejből HTML-kódot írni, jó, ha az elkészített kódban eligazodsz, és tudod javítani. Ne menj érettségizni némi HTML-tudás nélkül, ha ötöst akarsz.
  3. A CSS-ről szó sincs. Senki nem várhatja el az ismeretét. Semmi nem tiltja a használatát.
  4. A HTML változatairól sincs szó. Nem kötik meg a kezed abban, hogy te HTML4-et, XHTML-t, vagy HTML5-öt használsz, sőt, amíg a böngésző megeszi, úgy kevered őket, ahogy úri kedved diktálja.

Azonban (és itt a lényeg):

Bár saját honlapot készíteni ma már ciki CSS nélkül, nem javaslom senkinek, hogy pusztán az érettségi kedvéért megtanulja a használatát. Diákjaimnak is azt tanácsolom, hogy maradjanak meg az elavult, a profik között elátkozott és rühellt módszernél, és oldják meg az informatika érettségi feladatát a CSS teljes mellőzésével, a HTML nyelvű kódra bízva a formázást is.

A tanácsom mellett egyetlen érvet tudok felhozni. Minden más ellene szól. Ez az érv azonban szerintem elég jó: Így kevesebb az esélyed, hogy valamit elrontasz.

Nem kell két nyelvet megtanulni. Nem kell a két kód együttműködéséből eredő hibalehetőségekkel számolnod. Nem kell két helyen keresni, hogy a grafikus weblapkészítő hol kutyulta el a dolgot. Nem kevered össze a két dolgot az érettségi alatt, amikor a legtöbben azért idegesek egy kicsinység.

Mindez persze nem vonatkozik rád, ha már eddig is zsigerből használtad a CSS-t.

A megoldásvideók elkészítése során én a Kompozer weblapkészítő-alkalmazást használtam. Hogy miért pont azt, arról már írtam a Kompozer telepítéséről szóló cikkben. Lássuk, hogy lehet elmagyarázni a Kompozernek, hogy nem akarunk CSS-t használni:

  1. Gyalogoljunk az Eszközök menübe.
  2. Válasszuk a Beállítások lehetőséget. (Ha nincs ilyen, akkor más verziót, illetve operációs rendszert használunk. Ilyen esetben az Eszközök menü helyett a Szerkesztés menüben keressük a Beállítások részt.)
  3. Vegyük ki a pipát a Stílusok használata HTML elemek és attribútumok helyett sor mellől.

Kész:)

14 komment

A bejegyzés trackback címe:

https://infoerettsegi.blog.hu/api/trackback/id/tr562552185

Kommentek:

A hozzászólások a vonatkozó jogszabályok  értelmében felhasználói tartalomnak minősülnek, értük a szolgáltatás technikai  üzemeltetője semmilyen felelősséget nem vállal, azokat nem ellenőrzi. Kifogás esetén forduljon a blog szerkesztőjéhez. Részletek a  Felhasználási feltételekben és az adatvédelmi tájékoztatóban.

ethatrhjtdenhjartnhjar 2011.04.21. 10:04:49

Nem nagy ördöngősség az a CSS, de hát ha valaki a büdös életben nem akar weboldalt készíteni, az biztos nehezebben érti/szereti meg.

errorlacy 2011.04.23. 15:21:42

Sziasztok!

Esetleg tudnátok abban segíteni, hogy nekünk a SharePoint Designert kell asználnunk középszintűn, ha esetleg hasznos használatit vagy megoldás videót tudnátok csinálni esetleg valahol jó leírást ajánlani!

Előre is köszönöm!

Laci

ppppalika 2011.04.23. 15:38:51

@errorlacy: Nem lesz nagy segítség, amit mondok, de szerintem ha tudsz bekezdést beszúrni (mosolyogtató, de nem triviális), akkor szövegszerkesztési tudással és az utóbbi évek feladatainak megoldásával sima ügy lesz. A feladatokból konkrét problémára kérdezz rá!

Shyro/Chio 2011.11.23. 21:42:10

Hali!

A weblapszerkesztésnél megadott programok közül egyiket sincs igazán kedvem megtanulni használni. Szivesebben írnám simán jegyzettömbe a kódot (html-t és css-t egyaránt), vag yhasználnék pl. ConTEXT-et. Ez lehetséges?

raerek · http://infoerettsegi.blog.hu 2011.11.24. 09:00:12

@Shyro/Chio: Jegyzettömbbe írhatod. Utólag elég nehéz kideríteni, hogy egy HTML-t miben írtál:) ConTEXT-et meg kell kérdezned a szervező intézménytől.

Shyro/Chio 2011.11.26. 14:50:56

@raerek: Köszönöm a gyors választ.

dors 2013.04.27. 20:07:19

Halihó,
Az lenne a kérdésem, hogy ha weboldalkészítési feladatokat milyen böngészőből tesztelik? Ugye elég sok baj lehet mindenféle Internet explorerekkel...
Leellenőriztem a W3 Validatorral a feladatot amit megcsináltam... 2 hibája volt:
1. elmaradt a DOCTYPE (majd a vizsgán is elhagyom :D )
2. A képeknek nem volt alt tagje (majd a vizsgán is elhagyom :D )

Semmi más, de az IE 9 így is se tudott megbirkózni a margin-left/right: auto;-val...

Szóval nyilvánvaló hogy gyakorlatilag szabványos weboldalt készítettem, de az IE alapján elszállt volna egy csomó pontom...

Szóval a kérdés, hogy mit kezdenek a javítok a weblapokkal?

raerek · http://infoerettsegi.blog.hu 2013.04.27. 21:18:02

@dors: Nincs most Windowson, de eszerint: stackoverflow.com/questions/12199003/margin-leftauto-not-working-in-ie ha adsz doctype-ot, a baj megooldódik.

A javítási eszköz nincs specifikálva, nincs szabályozva. Lesz valami IE-n kívül a vizsgagépeden? Ha nem, az nem jelent semmi jót...

Szóval, ha már CSS-sel nyomulsz, ne hagyd el a DOCTYPE-ot. Ha jól emléxem, valahol benne van a kompozerben is, nyilván a többi szerkesztőben is, azaz nem kell fejből megtanulnod.

ppppalika 2013.04.27. 22:45:48

@dors: több esetben hivatkozik a forrásra az értékelő. Persze nem mind. De minden, ami a forrásban szerepel és szabványnak megfelelő, az rendben.

Egyébként az értékelést alapvetően a vizsgakörnyezetben kell végrehajtani, tehát azokkal ellenőrizhetik ők is, mint amit te is elérhettél.

dors 2013.04.28. 07:40:18

@raerek:
Nem tudom lesz-e, de a józan ész azt diktálná... :)

Notepad(ha majd lesz ++ is, az szuper lenne :) )-et használok, semmi grafikus szerkesztőt, szóval majd megjegyzem, nem egy nagy ördöngösség ez a DOCTYPE...

Ez már inkább más:
Szerintem vicc ez az érettségi rendszer, legalábbis a weblaposdi része: Csupa elavult, szabványon kívül trutyit kérnek számon az emberrel. "Már megint minek?"
Így biztosan egyszerűbb az informatika tanároknak, meg a diákoknak is, hogy nem nagyon változnak a követelmények...

Az tegyen info érettségit aki tudja a változásokat követni, ez egy ilyen szakma szerintem...

dors 2013.04.28. 07:46:50

Szuper, így már jó IE-ben is, csak ennyi kellett:
<!DOCTYPE html>

ppppalika 2013.04.29. 00:08:55

@dors: A vizsga az vizsga. A vizsgakövetelményeket nem lehet naponta változtatni. Tehát kb. a 2004-es szintből kell kiindulni, az akkor elérhető ingyenes eszközök szintjéről, mert ugye középszinten nem kérhetnek html ismeretet.

A követelményeket nem a köztanár szabja meg. Azt hallottam egy konferencián, hogy majd akkor lehet változtatni, ha más tárgyban is változtatnak. (Hogy ez előadásban volt vagy beszélgetésben, nem emlékszem.) Az más kérdés, hogy az irodalom, történelem követelmények nem olyan gyorsan avulnak el.

Szóval mivel ez a követelmény, így a tanárok is ehhez igazodnak, mert a legjobbat akarják tanítványaiknak.

Notepad++, hát, középszinten vagy lesz, vagy nem. Emelten sem biztos, viszont nagyobb eséllyel van fent a gépen a Geany. A <!DOCTYPE html ...>-t alapből beteszi.

Mellesleg ha kipróbálod egyszer a SharePoint Designer kód-editorát, szerintem nem fogod hiányolni a notepad++-t. (ott is alapból szerepel az említett elem)

dors 2013.05.02. 19:25:40

Hát nem véletlen nem használok grafikus szerkesztőket és elég régóta használom a notepad++-t szóval szerintem semmi sem fog elidegeníteni tőle :P

ppppalika 2013.05.02. 23:20:02

@dors: :)
Hááááát.

1. Ha ki sem próbálod...
2. Ha nem érted meg, hogy mit írtam...

No, úgy nehéz.