1 Pannon Egyetem Modern Filológiai és Társadalomtudományi Kar Tanári mesterképzési szak Informatikatanári szakképzettségi terület Webes és képszerkesz...
Adminisztrációs rész elkészítése ........................................................................ 23
6.8.
Google Adsence hirdetés elhelyezése ................................................................. 24
2
1. Bevezetés 1.1.
A témaválasztás indoklása
Tanulmányaim során már az általános iskolában kapcsolatba kerültem a számítógéppel. Különösen a középiskolában az információ szerzésekor egyre bátrabban fordultam az internet által nyújtott lehetőségekhez. Így fedeztem fel a sokféle színes, érdekes weblapot, amely felkeltette érdeklődésemet. Kíváncsi lettem, hogyan működnek, hogyan lehet ezeket elkészíteni. Ezért ebben a témakörben szívesen bővítettem ismereteimet, és kedvenc témámmá vált. Pedagógus jelöltként is fontosnak tartom, hogy a tanulók is használják a mindennapi tanulmányaik során, szabadidejükben kikapcsolódás céljából az internetet. Éljenek bátran a korlátlan lehetőségekkel. Persze fel kell hívnunk a figyelmüket azokra a veszélyekre is, amelyet a világháló magában rejt. Meg kell tanítani Őket, hogyan szelektáljanak a sokféle, különböző minőségű információkból érdeklődésüknek megfelelően. Meg kell ismerniük a helyes felhasználói magatartást. Az internet használatát tehát tanítani kell. El kell sajátítani a különböző informatikai elméleti, gyakorlati ismereteket. Fontosnak tartom azt is, hogy a diákok is megismerjék, hogyan néz ki, hogyan működik, illetve, hogyan készíthető el egy weboldal. Mivel már az iskolákban korszerű gépeket és szoftvereket használnak a tanulók, mindegyikükben biztosított az internet hozzáférés, és a gyerekek nagy részének otthon is lehetősége van a számítógép és web használatára, így motiválttá, fogékonnyá váltak e tananyag megismerésére. Dolgozatomban városunk hírnevét fényesítő néptánccsoport a Szatmár Kamara táncegyüttes weblapjának szerkezeti és grafikai elemeinek elkészítésének folyamatát fogom
bemutatni
lépésről
lépésre.
Az
elkészült
munka
megtekinthető
a
www.szatmarkamara.hu címen. A weblapon megjelenő tartalmakat már az együttes tagjai és a látogatók töltötték fel, ezekért felelősséget nem vállalok.
1.2.
Az Internet története
A gyökerek a hatvanas évekig nyúlnak vissza, a történet katonai fejlesztések civil szférába való átszivárgásával kezdődött. Abban az időben merült föl ugyanis az USA-ban egy kevéssé sebezhető számítógép-hálózat szükségessége, amelynek egy esetleges atomtámadás után megmaradó részei működőképesek maradnak.
3
Kidolgoztak egy többközpontú, csomagkapcsolt (ahol az adatok továbbítása kisebb csomagokban történik) hálózati kommunikációs rendszert, mely a mai TCP/IP szabvány ősének tekinthető. Ezen az elven kezdett működni 1969-ben az ARPANET, és a katonai felhasználásokon kívül a csomagkapcsolt adattovábbítás további kutatásra szolgált, de egyes egyetemek, katonai bázisok és kormányzati laboratóriumok kutatói is használták, elektronikus levelezésre, fájlok cseréjére és távoli bejelentkezésre egymás számítógépei között. 1972-ben megszületett az első e-mail program. 1974-ben jelent meg először az "Internet" kifejezés, egy a TCP protokollról szóló tanulmányban. 1983-ban, azután, hogy az addig szigorúan ellenőrzött az ARPANET-ből MILNET néven leválasztották a hadászati szegmenst, megszületett a mai fogalmaink szerinti Internet. 1988 pedig az első Internetes féregvírus-járvány (worm) éve volt. A 80-as évek végén számos országban szerveződtek gerinchálózatok.
1.3.
Az Internet fontossága a mai társadalomban.
Több mint 15 évvel ezelőtt, a személyi számítógép rohamos hódításba kezdett a legkülönbözőbb korcsoportok körében és ültetett egyre több embert a képernyők elé. Sokan váltak a gépek megszállottjaivá, töltöttek órákat vagy akár napokat egy-egy játékkal vagy készítettek programokat kisebb-nagyobb feladatok megoldására. Többek között ennek a jelenségnek köszönhető a nemzetközi szinten is sikeres hazai programozó generáció megszületése. A 90-es évek közepére a számítógép, a napjainkban is tartó, fokozott ütemű technológiai fejlesztésnek köszönhetően, ha a háztartásoknak nem is, de a legtöbb munkahelyi irodának elengedhetetlen eszközévé vált. Bár még mindig sokan ódzkodnak a számítástechnikában jártasak elvont világától, egyre több ember kerül kapcsolatba a személyi számítógépekkel főként munkája során. A játékok továbbra is népszerűek, de megjelent egy új dolog, ami ismét képes odaszegezni az embereket a képernyők elé, sokszor még olyanokat is, akik korábban hallani sem akartak róla. Ez az új dolog az Internet, ami egész egyszerűen fogalmazva összeköti a korábban külön-külön működő számítógépeket, és lehetővé teszi közöttük az információk továbbítását. Ha egy új Internetfelhasználót leültetünk a számítógép képernyője elé, és elindítunk egy rövid keresést kedvenc témájának kulcsszavait megadva, az Interneten található információ mennyisége lenyűgöző. Sokakat már ez magával ragad, de emellett ott van a világméretű kommunikáció lehetősége is, a szinte azonnal küldhető és fogadható levelezésben vagy akár az Internetes telefonbeszélgetésben. 4
2010-ban az Internet Magyarországon is népszerű téma, és bár még mindig nagyon sokan nem férnek hozzá, alkalmazási lehetőségeinek feltérképezését már nem szabad figyelmen kívül hagyni. Az Internet új kommunikációs csatornaként való definiálásakor fokozott figyelmet kell fordítanunk a felhasználók számának alakulására. A szkeptikusok gyakran hangoztatott véleménye szerint, hogy jelenleg annyira kevés ember éri el, hogy még nem érdemes vele foglalkozni. Tény, hogy az Internet-elérésnek egyenlőre feltétele a személyi számítógép, (bár az úgynevezett „okos telefonok” megjelenésével szélesedik ez a kör) és ennek birtoklása illetve kezelése az emberek nagy részének anyagi vagy generációs akadályok miatt gondot okoz. Ez ellen szól a felhasználók számának folyamatos és dinamikus növekedése.
1.4.
A hálózat szerepe, lehetőségei az információnyújtásban,
szerzésben. Az eredetileg katonai és szakmai célokra tervezett hálózat gyorsan általános kommunikációs, információtovábbító médiává vált, majd maguktól adódtak az emberi kapcsolatteremtés újabb, sokszor korábban soha nem ismert formái. Az eredetileg elsősorban oktatási intézményekben elérhető hálózatra egyre több intézmény, szervezet, cég kapcsolódott, a szolgáltatást hamarosan a nagyközönségnek is felkínálták. Az elektronikus levelezés (e-mail) forradalmát gyorsan követte a "hírcsoportok" (newsgroup) forradalma, majd az egyre újabb és sokoldalúbb információkereső- és továbbító eszközök elterjedése. Innentől a számítógépekhez nem értő laikusok is könnyedén, minden tanulás nélkül navigálhatnak az Internet óceánján. A gyors elterjedésből és egyszerű kezelhetőségből adódik, hogy az emberek közötti kapcsolatok teljesen új formái valósulnak meg. Az utóbbi években a távközlési cégek, kommunikációs vállalatok meglátták az üzleti lehetőséget az Internet technológiájú számítógép-hálózatokban, ill. a hozzájuk kapcsolódó alkalmazásokban (pl. számítógépek, adatbázisok távoli elérése, elektronikus levelezés, adatállományok átvitele, szöveg-, kép-, hanginformációk integrált továbbítása, stb.) így megjelentek az ilyen szolgáltatásokat kínáló üzleti vállalkozások, ill. ezek saját gerinchálózatai.
5
2. Böngésző programok Webböngészőnek vagy böngészőnek (angolul browser) olyan speciális szoftvereket nevezünk, amelyek a World Wide Web eléréséhez szükségesek, illetve ahhoz, hogy a web által nyújtott szolgáltatásokat a számítógépünkön használni tudjuk. A hálózaton található web-oldalakat elméletileg böngésző-független módon készítik, ami azt jelenti, hogy – bár az egyes funkciókat másképp támogathatják –, bármely weboldal ezekben a böngészőkben azonos módon jelenik meg. A multimédia igazi világa a grafikus böngészők megjelenésével kezdődött. Egy jó grafikus felülettel már formázottabb, bonyolultabb tagoltságú szöveget is olvashatunk, sőt, képeket, animációkat nézhetünk meg vagy hangfelvételeket hallgathatunk meg. HTML a böngészőkkel együtt fejlődött, a „hivatalos” HTML-változatokat a W3C (World Wide Web Consortium egy konzorcium, mely nyílt szoftver szabványokat hagyta jóvá illetve készítette el. A böngészők nem csak szolgáltatásaikban különböznek, sajnos előfordulhat, hogy ugyanaz a weboldal teljesen máshogy néz ki a különböző böngészőprogramokkal megtekintve. Ez adódhat abból, hogy az oldal készítője nem tartotta be a megfelelő szabványokat, de sajnos az is gyakori, hogy a web-böngésző program nem követi a szabványokat. Ezért ha a weboldalak készítésével akarunk foglalkozni, nem árt, ha többfajta böngészőprogramot is telepítünk a gépünkre, hogy az elkészült oldalakat több böngészőprogrammal is ellenőrizhessük, tesztelhessük. A modern webböngészők (mint a Internet Explorer, Mozzilla, Opera, stb.) már pontosabban támogatják a HTML és XHTML szabványokat (a HTML 4.01-gyel kezdődően), melyekkel a weblapok azonosan kell megjelenjenek minden ilyen böngészőben. A modern böngészők kiegészítők révén képesek különböző programozási nyelveken írt kódokat, végrehajtani, ezáltal látványosabb tartalmat jeleníthetnek meg; ilyenek a Flash, Java, PHP, stb. nyelvek.
3. Weblapok formája A weblapok formája lehet statikus és dinamikus. A statikus weblapok tartalma állandó, nem változik (például bemutatkozó oldalak) csak manuális átszerkesztéssel. A dinamikus weblapok alapeleme az úgynevezett motor, amelynek segítségével ismételten végezhetőek azonos műveletek egyszerűen (például hírportálok) és nem kell a forráskódot manuálisan szerkeszteni, mert azt a honlap motor állítja elő sablonszerűen. A 6
statikus weblapok létrehozására alkalmas a HTML és JavaScript és minden kliens oldalon futó webes nyelv. A dinamikus weblapokhoz szükség van egy-egy olyan leíró nyelvre (például
PHP,
Java),
amely
szerveroldali
és
a
szerveren
képes
a
felvitt
információkat/adatokat rögzíteni akár szöveges (fizikai fájlok), akár adatbázisba betárolás formájában (például mySQL, postgreSQL).
4. A weblap elkészítésének folyamata 4.1.
Offline telepítéshez szükséges programok
Ahhoz, hogy Windows rendszereken webes programokat fejlesszünk, nem elegendő az adott nyelvhez tartozó kezelőprogram telepítése. Ha csak PHP-t telepítenénk a gépünkre, elkészült scriptjeinket ugyan nagyon kiválóan tudnánk futtatni parancssorból, böngészőben azonban nem lennénk képesek közvetlenül megtekinteni működésüket, hiszen böngészőnk elsősorban egy web kiszolgálóval szeretne kommunikálni. Ezért ahhoz, hogy használható webes fejlesztői környezetet építsünk ki, mindenképpen szükségünk van egy web kiszolgálóra is.
4.2.
Apach webszerver telepítése
A legfrissebb telepítő állományt letöltöttem a http://httpd.apache.org/download.cgi címről. Telepítése grafikus felületen történik, a kezdeti szokásos kérdésekre a „next” gombot választom, míg nem találkozok az első komolyabb képernyővel, mely a szerver nevét és tartományát kérdezi.
1. ábra Apache telepítő képernyője
7
Az első két mezőben (Network Domain ill. Server Name) localhost nevet adtam, hiszen ezt alapértelmezésben ismeri rendszerünk, és a saját számítógépünket jelenti. Az Administrator's Email Address beállítás leginkább a kiírt hibaüzenetekben jelenik meg. Mivel offline szervert állítok be, nem feltétlenül fontos létező email címet megadnom. Ismét a"Next" gombot választom, utána hagyom az alapértelmezett "Typical" opciót, "Next". Az itt következő képernyőn a telepítési útvonalra kérdez a telepítő. Az "Install" gombra kattintva elindul a tényleges telepítés. Ennek végeztével csak a "Finish" gombra kattintás marad - ezzel használatba is vehetem saját szerveremet. Ha fut a szerver, a böngészőm címsorába a http://localhost címet beírva az Apache üdvözlőoldalát kapom. Mivel az elkészített weblapjaink nem az alapértelmezett helyen vannak, ezért átírom a httpd.conf állomány DocumentRoot "elérési út" sorát a kívánt elérési útra.
4.3.
PHP telepítés
A legfrissebb PHP 5.3.2 Windowsos verziójú telepítő állományt letöltöm a http://php.net/downloads.php címről. Az általam ajánlott útvonal az Apache könyvtára, például C:/Program Files/Apache Group/PHP5. Ezután átmozgatom a dlls és az sapi mappa összes állományát a PHP gyökérkönyvtárába. Ezt követően a Windowst is állítani kell, hogy a PHP jól működjön. Start- Beállítások- Vezérlőpult- Rendszer- Speciális fül, Környezeti változók gombra kattintok.
2. ábra Pach változó módosítása
8
A listában megkeresem a Patch változót és a szerkesztés opciót választom. Környezeti változóként a PHP elérési mappáját állítom be. Ezután a php.ini-recommended nevű konfigurációs fájlról készítek egy másolatot a saját könyvtárába, majd átnevezem php.ini-re és jegyzettömbbel átszerkesztem az extension_dir = "./" sort. Az idézőjelek közé bemásolom azt az útvonalat ahova a PHP-t kicsomagoltam plusz egy /extensions. Az én esetemben tehát ez az extension_dir = "C:/Program Files/Apache Group/PHP5/extensions/". Ezt követően az Apache httpd.conf konfigurációs fájlnak a legvégére bemásolom az alábbi két sort: LoadModule php4_module "C:/Program Files/Apache Group/PHP5/php5apache2.dll AddType application/x-httpd-php .php .php4 .php3
4.4.
MySQL telepítése
Letöltöttem és elindítottam a setup.exe telepítő állományt. Alapértelmezett útvonal legyen c:\mysql. Ezt követően a Start menü- Vezérlőpult- Felügyeleti eszközökSzolgáltatások beállításánál a MySQL szolgáltatást átállítottam kézi opcióra, így nem indul el a rendszerrel együtt.
4.5.
A phpMyAdmin telepítése
Letöltöttem a legfrissebb phpMyAdmin csomagot, majd kitömörítettem az Apache DocumentRoot paraméterével megadott könyvtár alá. Az Apache csak a DocumentRoot alatt megadott könyvtár tartalmát tudja kiszolgálni, ezért csak akkor tudom majd a felületet használni, ha ez alá tömörítem ki a csomagot. A böngészőbe begépelve a http://localhost/phpmyadmin címet, letesztelem a helyes működést.
5. Weblap elkészítése 5.1.
Milyen tartalom?
Elő lépésben tisztázni kell, hogy mit is tudjon a weblap nyújtani a látogatók számára. Megbeszéltem a táncegyüttessel, hogy milyen tartalmat szeretnének megjeleníteni a weblapjukra. A beszélgetésből kiderült, hogy hat menüpontra lesz szükségem, mégpedig egy „Kezdőlapra”, ahol az együttessel kapcsolatos friss híreket, közleményeket tudnak megjeleníteni. Aztán a „Rólunk” menüpontban a csapattagokról rövid bemutatást, a „Médiatárban” a fellépéseken és tv-s szereplések alakalmával készült fotók közzététele a feladat. Fontosnak tartom és tartották a szurkolók és a közönség visszajelzését, ezt egy 9
„Vendégkönyv” formájában valósítottam meg. Ezt követően, igényt tartottak a „Fellépések” opcióra, ahol az elkövetkező produkciók időpontját és helyszínét tudhatják a látogatók megtekinteni. Legvégül egy „Kapcsolat” menüpont felvételét teszi szükségessé az, hogy a jövőbeli fellépéseket megrendelők személyesen vagy akár közvetlenül az oldalon e-mail-ben tudjanak ajánlatot kérni.
5.2.
Csontváz kialakítása
Elképzeléseimben egy kéthasábos szerkezetet gondolkodom, ahol a baloldalt az együttest támogatók logóját és linkjeit, valamint az oldal üzemeltetési költségeit biztosító hirdetőket helyezem el. Itt mindenképpen helyet fog kapni egy Google Adsence hírdetési rész, ami további bevételeket hozhat a fenntartáshoz. A jobboldali nagyobb hasáb a „tartalmi” rész lesz, ahol a lényegi dolgokat fogjuk megjeleníteni. A csontváz kialakításánál az első lépés, hogy meghatározzuk a kívánt szélességet, gondolva a kisebb felbontású monitorokat és kijelzőket használó látogatókra. Véleményem szerint a 750px szélesség megfelelő lesz az elképzeléseimnek. A szerkezet kialakítását táblázatok segítségével valósítom meg.
3. ábra Kezdeti csontváz
10
A HTML kódot a megfelelő DTD deklarációval kezdem, amivel meghatározom az oldalon használható elemeket és attribútumokat. Az oldal közepére helyezett táblázat szegélyeinek vastagságát 0-ra állítom, hogy ne jelenjen meg, majd ugyan ilyen értéket kap a cellaköz és cellamargó paraméter is. A táblázat első két sorában lévő egymás melletti cellákat egyesítem, a
tag colspan=”2” paraméterével. Az adott cellákat osztályokhoz rendelem hozzá a későbbi stíluslapokkal történő megformázáshoz a class”név” paraméterrel. Így kapta a felső sáv a „head”, a menü és bannerrész a „main”, a hirdetők oszlopa a „reklam” és végül a törzs rész a „tartalom” nevet.
5.3.
Logó megtervezése
A logó megtervezésénél nagyon sok mindent figyelembe kell venni. Mint például, hogy aki látta az emlékezzen rá a későbbiekben is, a dizájn tükrözze a néptánc csoportra jellemző vidámságot, lendületességet. A logó elkészítéséhez az AAA Logo 2008 programot használtam.
4. ábra AAA Logo 2008
A program vektorgrafikus szerkesztést tesz lehetővé, így a későbbiekben lehetőség lesz nagyobb méretben történő kinyomtatása poszterre, pólóra. Első lépésként a legalsó rétegre helyeztem el a feliratot fekete színnel. Majd újabb layer-ekre a tulipánokat, az r szárából kinövő spirált és a fehér színnel a kamara feliratot. Ennek karakter távolságát és görbületi szögét az ívhez próbáltam illeszteni. A program lehetőséget ad az elkészített munka ki exportálására tetszőleges méretben, én is ezt tettem JPEG formátumba, a későbbi szerkesztéshez.
11
5.4.
Fejrész elkészítése
A head és main rész hátterét képező képet egyben készítem el és majd csak a későbbiekben vágom ketté. Az ezt követő grafikai munkákat a Jasc Paint Shop Pro 9-es verziójával készítem el.
5. ábraVarázs kijeleölő eszköz
Megnyitom szerkesztésre az előbb elkészített logót mivel fehér háttér van a logó körül, ezért ezt körül kell vágnom a későbbi használatra. Ehhez a programnak van egy úgynevezett Varázs kijelölő eszköze. Ennek az eszköznek az ablak felső sávjában található opcióknál átállítom a tolerance értékék 20-ra, ennek hatására az RGB színkódban 20% eltérésű pixeleket is kijelöli és a feather, túlnyúlást is 1-es értékre változtatom.
6. ábra Vászon és téglalap beállítása
12
Létrehozok egy 750 pixel széles és 337 pixel magas fehér hátterű vásznat. Elsőként elhelyezem a korábban körül vágott logót, majd e-mögé egy vektoros téglalapot, aminek kitöltésére egy interneten talált textúrát használok. A Scale opciót úgy állítom be, hogy a 220 pixel magas téglalapot pont kitöltse. Majd ennek a téglalapnak egy vastagabb színben harmonizáló barnás színt adok. Az így elkészült alakzatot a háttérbe küldöm úgy, hogy a logo r betűjének szára rálógjon.
7. ábra Logó és a téglalap elhelyezése
Ezt követően erre a külső vonalra elhelyezek egy 1px szélességű vékony kontúrvonalat a sáv kiemelése céljából. A sáv térhatásúvá tétele érdekében ennek a téglalaphoz egy árnyékot rendelek az Effects, 3D Effects, Drob Shadow menüpontjával. A fényforrás vízszintes és függőleges helyzetét 0-ra állítom, hogy az árnyék egyenlő mértékben helyezkedjen el alul és felül. Az áttetszőségnek (opacity) 80 százalékot állítottam be hogy ne legyen túlságosan hangsúlyos és 10-es blurral a fehér háttérbe történő elmosás érdekében.
8. ábra Kontúr vonal és árnyék
Következő feladat a téglalapba beleolvadó logó spiráljának elkészítése. Elsőként egy vektoros görbét rajzolok a téglalap külső vonalának színével és fehér kitöltéssel. Ezt a réteket a logó és a téglalap közötti layerek közé rakom. Ezt az ívet ezután átalakítom 13
raszteressé és így, egyenesbe hozhatom törlés segítségével, hogy illeszkedjen a másik vonalhoz. Már csak a kontúr vonalat kell elhelyeznem az ívre. Ehhez az előző görbét használom fel úgy, hogy lemásolom (duplicate) és módosítom a vonal színét és vastagságát.
9. ábra Az ív elkészítésének lépései
Az így elkészült fejrészt egyesítem a merge all opcióval, kijelölöm az egészet és áthelyezem egy új vászonra. Itt elvégzem a kettévágást a kívánt helyen a négyzetes kijelölő eszköz segítségével és ezeket is külön rajzlapokra helyezem át és mentem el head.jpg és main.jpg néven. Ehhez segítségemre lesz az ablak jobb alsó sarkában lévő kurzor pozícióját mutató kiírás. Az így kettévágott képek közül a main.jpg képet legkisebb tömörítésű JPEG-ként mentem el a későbbi feldolgozáshoz.
10. ábra head.jpg
11. ábra main.jpg
Az oldal háttereként az előzőekben elkészített fejrészt fogom felhasználni úgy, hogy csak vízszintes ismétlődést fogok engedni. Ebből a képből kivágok egy 150px széles részletet. Viszonylag azért ilyen széleset, hogy az ismétlések vonala ne legyen észrevehető. Ezzel egy, az oldalon keresztben végigfutó szalagot fogok kapni.
14
5.5.
Véletlenszerű hátterek elkészítése
Azt szeretném megvalósítani, hogy az oldal minden egyes betöltésekor más-más, a néptánc csoportot egy-egy jellegzetes produkciójuk jelenetét jelenítsem meg a main részbe. Az egyik ilyen produkciójuk, az egyik kereskedelmi tv csatorna tehetségkutató műsorában történő továbbjutásukat jelentő koreográfia a Szemetek, ahol néptáncos mozdulatokkal hívják fel a figyelmet a környezet szennyezésre. A probléma abban van, hogy a csatorna nem adott rendelkezésre álló jó minőségű felvételt, így a korábbi fellépések alkalmával elkészített fotókból kellett egy montázst készíteni.
12. ábra Kivágott szereplők
A képekből szabadkézi kijelölést használva (Freehand selection) vágtam ki a szereplőket. A kijelölés típusán Edge seeker-t választottam, ami a kezdeti és végpont közti résznél megpróbálja a kontrasztot figyelembe véve vonalra illeszteni a kijelölést. Az így körülvágott képeknél jól látszik, hogy különböző méretűek és a takarások miatt hiányosak. Ezt figyelembe véve úgy helyeztem el a táncosokat egymás mellé, hogy a hiányzó részek minél kisebb részt tegyenek ki. 15
Az egymásra helyezett rétegeket a megfelelő sorrendben helyezem el az Arrange Move Up, Move Down opciójával. Mivel figyelembe kellett venni, hogy ki milyen sorrendben áll ezért a térbeli hatás megőrzése érdekében a méretet is módosítottam az adott illetőnél. Az így elkészített összemontírozott csapatot egy új rétegként elhelyezem a korábban elkészített main.jpg képre. Ezt követően a hiányzó foltok „betömése” következett. Ehhez a Clone Brush eszközt használtam, melynek segítségével a mintavételező lerakása után a kép egy másik részére tudom átmásolni az ecset alakjának, méretének, és mozgás irányának megfelelően. Legvégül az elkészült csoportkép köré egy kissé elmosott fehér árnyékot raktam, hogy ne olvadjanak bele a mintás háttérbe
13. ábra Az első változó kép
A további képeket szerencsére már sikerült az eredeti tv-s felvételekből megszerezni így ezekkel már csak az volt a feladat, hogy szabadkézi kijelöléssel körbevágjam és ráillesszem az előző háttérre.
14. ábra Második és harmadik kép
16
5.6.
Stílus lap elkészítése
Az elkészült grafikai munkákat helyezem el a korábban elkészített táblázat megfelelő celláiba stíluslap segítségével. Ehhez első lépésben az index.php állomány HEAD részébe hivatkozok az külső oldal.css stíluslapra. A css állomány első részében a body elem paramétereit állítom be. A backgroundimage az oldal hátterét állítja be, aminek az egy mappa szinttel fentebbi image mappában lévő bg.jpg-t értéket adom. A background-repeat:repeat-x értékével a háttér ismétlésének vízszintes lehetőségét engedélyezem. Az oldal alapértelmezett háttérszíne a fehér, amit a megfelelő kóddal oldok meg. A margin-top paraméter 0px értékére azért van szükség, hogy a táblázat közvetlenül a böngésző tetejénél kezdődjön és pozícionálni tudjam a hátteret a fejrésszel, mivel különböző böngészőkben másképp jelenik meg a weblap.
15. ábra Body tulajdonságainak beállítása
A head osztály névvel elnevezett cellám, a táblázat felső sorának fogja a tulajdonságait beállítani. A pontra azért van szükség, mert ez egy általam elnevezett és létrehozott osztály. A widh paraméter a szélességet, míg a height a magasság értékét állítja be a fej.jpg kép méretének megfelelően.
16. ábra Head stílusának beálítása
Hasonlóan járok el a tartalom és reklám celláinak beállításával. Egy új paramétert használok fel, a vertival-align-t mellyel a szöveg függőleges igazítását tudom, az én esetemben felülre igazítani. A text-align a bekezdések igazítását végzi el. A center érték a középre igazítást fogja elvégezni.
17
17. ábra Tartalom és raklam formai beálítása
A main rész formai beállításait nem külső stíluslappal végzem el, mivel minden betöltésnél véletlenszerű képet akarok megjelenítetni ezért ezt egy script segítségével fogom megvalósítani.
18. ábra Véletlen háttér generáló script
Elsőként deklarálok egy randombgs tömböt, amibe elhelyezek szringeket, ami nem más, mint a három darab kép elérési útvonala. Majd a document.write utasítás az előzőekhez hasonlóan elvégzi a cella méreti beállításait és végül véletlen szám generálással kiválaszt egy tömbbeli elemet.
19. ábra Böngészőben megnyitott weblap
18
5.7.
Menü elkészítése
A menüt a main rész bal oldalára helyezem el. Formailag vertikális elhelyezést választok listában felsorolva. Ezt a listát stíluslappal formázom meg, amit a weblap head részében külső hivatkozással nyitok meg. A listát egy új glossymenu osztályhoz rendelem hozzá.
20. ábra Menü forráskódja
A hivatkozásokban a p paraméter megkapja az adott tartalmi rész php állományának nevét. Ennek a tartalmi résznek a megnyitását majd a későbbiekben részletezem. Az egyes menükre húzva az egeret módosul a karakter színe és a bal oldali behúzás mértéket 25 pixelre állítom.
21. ábra Kiválasztott menüpont formázása
Az aktív menüpont körül megjelenő áttetsző hátteret egy 1px szer 1px nagyságú áttetsző png képpel valósítom meg, így a mögötte lévő grafikai elemek láthatóak maradnak.
22. ábra A végleges menü
19
6. Az oldal feltöltése 6.1.
Tartalmi rész betöltése
A tartalmi rész cseréjét egy PHP kóddal valósítottam meg. Az első if-es szerkezettel azt oldottam meg, hogy amennyiben a p paraméternek nincs értéke akkor az alapértelmezett kezdo változó értéket kapj meg a változó. Második sorban, arra az estre figyelek, hogyha az adott p érték nevű php állomány nem létezik, akkor is a kezdo.php töltődik be. Legvégül ha létezik az adott értékű fájl, akkor az kerül betöltésre a tartalom osztálynevű cellába
23. ábra A tartalom betöltéséért felelős php kód
6.2.
Kezdő oldal elkészítése
Ennek tagolását táblázattal oldottam meg, ahol a tartami részt egy adatbázisból nyerem. Első lépésként csatlakoznom kell az adatbázishoz, amit a kapcsolodas.php fájl végzi.
24. ábra Kapcsolódási állomány
Itt először az adatbázis kapcsolódási helyét, felhasználói nevet és jelszót adom meg amennyiben nem sikerül a kapcsolódás, akkor a Nem megy aMySQL hibaüzenetet iratom ki. Ezek után az adtabázis nevét rendelem hozzá a $kapcs változóhoz és itt is hibaüzenetet kap a látogató, ha nem létezik vagy nem érte el az adatbázist. A hírek egyes elemeit a hirek táblából kapom meg, aminek a következő mezői vannak: cím, kep, hir video, date. A későbbiekben feltöltött rekordokon feltöltés sorrendjéhez viszonyítva visszafelé olvasom ki. A szöveg megjelenítését szintén stíluslap segítségével valósítottam meg. Az egyes bejegyzéseket felhajló lap imitálásával oldottam meg, amit a Paint Shop Pro programmal készítettem el árnyék deformációja segítségével.
20
25. ábra Példa a kezdő oldalon megjelenő hírekre
6.3.
Vendégkönyv elkészítése
A tánccsoportnak szüksége volt egy vendégkönyvre, ahol a nézők pozitív vagy negatív kritikáit megírhatták. Ezt a kezdő oldal felépítéséhez hasonlóan valósítottam meg adatbázis segítségével. A látogatók véleményeiket az oldal tetején lévő űrlapon írhatják meg. A hozzászóló nevét és e-mail címét inputbox míg véleményét textboxban adhatja meg. Ezek formai beállításait css formázza meg.
26. ábra Vendégkönyv űrlapjának forráskódja
21
6.4.
További menü pontok elkészítése
A további menüpontokat statikus formában valósítottam meg, mivel ezek tartalmi része a későbbiekben nem változik. A Rólunk menüpontban a tagokról tudhatnak meg a látogatók egy-két dolgot. Tagolását táblázatos formában töltöttem ki. Ezek formázását stíluslapokra bíztam, a képek kereteit az előzőekben használt grafikai programmal készítettem el. A Fellépések és Kapcsolat pontot szintén statikus frissítési formában tudják a tagok változtatni.
6.5.
Képgaléria
A képgaléria elkészítéséhez a ClearBox-ot használok, amely egy magyar fejlesztésű, ingyenes képnézegető kód. Ez tartalmaz egy scriptet, amit az index állomány head részében meg is nyitok. A kinézetért stíluslapok felelnek, amiben különböző beállítási lehetőségeim vannak. A galéria elkészítéséhez elsőként kismérető, thumbnail képeket kell létrehoznom. Az egy galériába tartozó képek linkjeinél a következő paramétert kell megadnom például: rel="clearbox[gallery=Középdöntő 2].
27. ábra ClearBox galéria
22
6.6.
Adatbázis létrehozása
Az adatbázis létrehozását phpMyAdmin segítségével oldottam meg. Az új adatbázis létrehozása résznél megadom a szatmarkamara nevet.
Ebbe az adatbázisba létrehozom a hirek és uzenetek és felhasznalok táblákat. A következő táblázatban ismertetem az egyes mezőneveket és azok tulajdonságát. Az id egyedi azonosítóként szolgál, amit a rendszer automatikusan növel új bejegyzés esetén.
28. ábra Hírek adattábla mezői és tulajdonságai
29. ábra Üzenetek adattábla mezői és tulajdonságai
6.7.
Adminisztrációs rész elkészítése
Az adminisztrációs rész működésére jellemző, hogy az adatbázisban tárolt md5-ös titkosítású jelszavakat tároljuk és sikeres bejelentkezés esetén folyamatosan fenntartja ezt az állapotot.
30. ábra Folyamat fenttartása
Lehetőségünk van a híreket felvenni, törölni és a vendégkönyv bejegyzéseiből törölni. Hírek felvétele esetén lehetőségünk van képet, youtube videókat elhelyezni. Ezek felvételéhez inputbox-okat használok. A hírek törlésénél az adott rekord id-jét vizsgálom és végzem el a törlést a táblából. Hasonlóan járok el a vendégkönyvi törlésnél.
31. ábra A törlés kódja
23
6.8.
Google Adsence hirdetés elhelyezése
Az oldal fenntartásához szükség van hirdetőkre. Ehhez nyújt lehetőséget a Google Adsence rendszerhez történő csatlakozás. Itt elsőként regisztrálnunk kell, majd elküldeni annak a weblapnak a linkjét ahova szeretnénk elhelyezni a reklámokat. Ha engedélyezik a használatot, akkor abban az esetben az oldalon el kell helyeznünk egy kódot, amit mellékelten küldenek. A további beállításokat a Google rendszerén tudjuk elvégezni, de ennek optimalizálása már külön részt érdemelne.
