Web DIY bölcsészeknek [PDF]

Zitiervorschau

---

WEB “DIY” BÖLCSÉSZEKNEK

SUDÁR ISTVÁN ÁKOS

WEB “DIY” BÖLCSÉSZEKNEK

WEB “DIY” BÖLCSÉSZEKNEK szerző: Sudár István Ákos

HASZNÁLAT ................................ 3 divek összetett alkalmazása ...... 61 ELŐSZÓ ........................................ 5 html5 elemek .............................. 62 túlfutó tartalom ......................... 63 div nem veszi fel a tartalma méretét ..................... 64 alapfogalmak ................................. 7 mobilra optimalizálás .............. 65 tárhelyválasztás ........................... 10 áttetsző háttér ............................ 66 domain név .................................. 12

cc 2014 Nevezd meg!-Ne add el!-Így add tovább!

borító, oldalterv:

TÁRHELY, DOMAIN

Márkus István Róbert

weboldal:

Sudár István Ákos, Márkus István Róbert

KÉPSZERKESZTÉS

fájltípus, szerkesztő ..................... 15 képméret ....................................... 18 átlátszó képek ............................... 19 webgrafika .................................... 20

STATIKUS OLDAL

szövegformázás ............................ 24 alapszerkezet ................................ 31 head rész ....................................... 33 body rész ....................................... 37

TARTALOM

CSS

2

azonosítók .................................... 44 színek ............................................ 48 betűk ............................................. 49 linkek ............................................ 50 képek, elérési út ........................... 51 képek, szélesség ........................... 55 képek, körbefuttatás ................... 57 képek, linkként ............................ 58 divek ............................................. 59 divek azonos magassággal .......... 60

kommentelés felépítése ....... 104 inputtisztítás .......................... 105

OOP

mi a haszna? .......................... 108 OOP helyett: include ........... 109 az include és a BOM .............110 alapfogalmak ......................... 111 példány összetevői ............... 115 alapfogalmak ............................. 70 osztály összetevői ................. 118 adatbázis .................................... 71 példa ...................................... 120 phpMyAdmin .............................74 csatlakozás adatbázishoz .......... 77 csatlakozás változók .................. 78 adat lekérése ............................... 80 beágyazás .............................. 126 kiválasztás (selector) ........... 127 adat lekérése: mysqli_set_charset .................... 81 effekt (effect) ......................... 128 adat lekérése: mysqli_query .... 82 események (event) ............... 129 adat lekérése, tömbök ............... 84 show/hide ............................. 130 adat lekérése, while-ciklus ........ 85 kép nagyítása kattintásra .... 135 oldalak létrehozása .................... 88 jótanács .................................. 139 beszúrás adatbázisba ................. 89 adat felülírása adatbázisban ..... 90 keresés ......................................... 91 joomla, wordpress ................ 142 hírlevél ................................... 145 link építés .............................. 147 inputok ....................................... 94 google analytics .................... 149 a form attribútumai .................. 96 kulcsszókutatás ..................... 155 adatok fogadása php-val ........... 97 dátum .......................................... 98 feldolgozás php-val ................... 99 feltételes végrehajtás ................ 100 átirányítás php-ban ................. 102

DINAMIKUS OLDAL

JavaScript, Jquery

WEBKEZELÉS

ŰRLAPOK

WEB “DIY” BÖLCSÉSZEKNEK

HASZNÁLAT

• A könyv programozásról szóló fejezeteihez interaktív online felület tartozik, aminek a linkje mindig a bal felső sarokban látható • A könnyű tájékozódás érdekében a fejezet sorszáma, a fejezet címe és az alfejezet címe minden oldalon látható • Különösen a programozással foglalkozó fejezetekben a magyarázatot lényegre törőre vettük, hogy ahol lehet, egy oldalba beleférhessen a lényeg

3

WEB “DIY” BÖLCSÉSZEKNEK

A könyvhöz tartozó weboldalon kipróbálhatod, mit tudnak a különböző parancsok. A weboldal két nagy hasábra oszlik: a bal oldali hasábban található a forráskód, amit kedvedre alakíthatsz. 1. A példakódot kíváncsian átírod itt-ott. 2. Megnyomod a nagy zöld gombot középen 3. És jobb oldalon lefut a módosított kód 4. Ha valamit nem értesz, elolvasod újra a könyvben 5. Vagy megkérdezed a fórumon

HASZNÁLAT

4

WEB “DIY” BÖLCSÉSZEKNEK

Az

egyetem alatt Székely Gábor professzor úr, miután megtárgyaltuk a Teheráni konferencia diplomáciai aspektusait azt mondta nekünk, hogy csináljunk magunknak honlapot, nem nagy kunszt. Tetszett a hozzáállás, szívesen idézem fel, mert teljesen igaza van: akkor is, ha az ember bölcsész, nem árt legalább fogalmat alkotni arról, hogy mi van a motorháztető alatt. Ne csak fogyasztani tudjuk az internetet, hanem formálni is. A programozás természetesen egy bonyolult dolog, éppen úgy, mint a mérnökök dolga, vagy egy régészé. De nem árt a humán beállítottságúaknak, ha belelátnak a programozásba úgy, ahogyan minden programozó leérettségizett történelemből is, magyarból is. Nem nagyra törők a terveim, lényegében a HTML-PHP-JAVASCRIPT alapfogásait szeretném feltárni azon az úton, ahogyan nekem sikerült felfognom. Ebben a könyvben el lehet sajátítani azokat az alapokat, amikkel aztán akár a HTML5 alapú játékok felé is tovább lehet menni, vagy egyszerűen csak a kezünkben tarthatjuk a blogunk fejlődését. Annyi csak, hogy kell egy bizonyos fokú magabiztosság. Azt nagyon fontosnak tartom, hogy higgadtan kezeljük, ha valamit nem értünk. Ez egy nyelv. És ha valamit tudunk magyarul, akkor meg fogjuk találni a módját, hogy kifejezzük programozási nyelven is. Az 1600-as években Comenius azt fejtegette, hogy mindenki megtanítható mindenre, ha a megfelelő úton vezetjük. Ezért ha olyan dologba futunk bele, amit képtelenek vagyunk az agyunkkal felfogni, akkor legyünk tisztában azzal, hogy csak arról van szó, hogy a kapott magyarázat nem találkozik a mi fogalmainkkal. Nem velünk van a baj, keressünk olyan leírást, ami a mi nyelvünnket beszéli.

ELŐSZÓ

5

TÁRHELY, DOMAIN

WEB “DIY” BÖLCSÉSZEKNEK

Mielőtt

a lényegre térnék, essen szó a nyilvánosságról. Ma már senkit sem fenyeget, hogy feltesz valamit a netre, és másnap már mindenki szétküldte a linkjét e-mailben A Google sem fogja kidobni találatként. Ma már az ilyenért keményen meg kell dolgozni. Ennek ellenére a fejlesztéseknél már csak úgy szokás, hogy a készterméket publikálják csak, és a fejlesztői fázisokat gyárkapun belül próbálgatják. Weboldalak esetében ez azt jelentené, hogy a saját számítógépünkön csiszoljuk a weboldalt, és ha kész, feltöltjük a tárhelyünkre. Miért írom ezt? Azért mert a mi esetünkben talán mégis egyszerűbb a tárhely erőforrásait igénybe venni, és kapásból a neten fejleszteni. Mi a mi esetünk?

2

Egy ismerősöm feltett egy kérdést azzal kapcsolatban, hogy szeretne magának egy Joomla webshopot, és már kitalálta, hogy nézzen ki, és szeretné letölteni a Joomlát, de ezen a ponton már nem teljesen érti a dolgokat, mit kell tenni? Először is meg kell érteni, hogy mihez mi kell. A honlapok a böngészőben jelennek meg, ezért kézenfekvő, hogy egy honlap megjelenítéséhez csak egy böngésző kell. Itt téved a bölcsész először, mert ez nem igaz. A honlapok kódolásának két fajtája van: egy, ami a böngészőnek szól, egy pedig ami a szervernek szól. A böngészőnek címzett a kliens-oldali script, a másik pedig a szerver-oldali. Kliens oldalon történik az oldal kivitelezése, a látványelemek megjelenítése. Szerver oldalon pedig például az adatbázis-műveletek, bármit is jelentsenek most ezen a ponton. Nagyjából ez olyan, mint a házépítésnél: vannak a kőművesek jól láthatóan, akik felépítik a házat, és vannak a tervezők az irodában eldugva, akik nélkül nem megy a dolog.

TÁRHELY, DOMAIN alapfogalmak

A blogunkba, a logó alá szeretnénk egy dátumkiírást. Azt a részét, hogy kialakítsuk a logó pozícióját és kinézetét, HTML kódolással el tudjuk intézni, és a HTML kód feldolgozásához elég egy böngészőprogram, például - a méltán mellőzött Internet Explorer. Ez azt jelenti, hogy megírjuk a HTML kódot, elmentjük, megnyitjuk a fájlt, ami megjelenik a böngészőben.

7

Itt lesz a dátum helye

WEB “DIY” BÖLCSÉSZEKNEK

Egy dátum-kiíráshoz én a PHP kódoláshoz nyúlok, a HTML nem tud ilyet, tehát a fájl kiterjesztése .php lesz a .html helyett, amit egyrészt alapból nem nyit meg a böngésző, másrészt ha társítással meg is nyitjuk, nem fog történni semmi. Mert az a szerveroldali script, tehát kell hozzá egy szerver.

A jelek közti kódrészt a böngésző figyelmen kívül hagyja, mert nem rá tartozik. Azt a szerver dolgozza fel.

2

A HTML kódot a böngésző tudja feldolgozni. Többféle böngésző van, és ugyanígy, olyan programból is van többféle, ami a szerver-oldali scriptet tudja feldolgozni. Ha szeretnénk saját fejlesztői környezetet, azt jelenti, hogy szeretnénk, ha a szerver oldali scriptek is lefutnának a gépünkön. Ehhez gondoskodnunk kell megfelelő programokról, de ez nem kezdő feladat. Ha kezd összeállni, hogy miért is nem elég mindenhez a böngésző, és hogy bármelyik online újság megnyitásakor keményen dolgozik nem csak a mi gépünk, hanem az ő szervük is a háttérben, akkor továbbléphetünk. Joomla, Wordpress, és más CMS rendszer (ezek ingyenesen letölthető honlap-motorok, kifinomult beállítási lehetőségekkel), nem mások, mint félkész honlapok, amiket az igényeinkhez tudunk igzaítani. Telepíteni egy Joomlát annyit jelent, mint a fájlokat felmásolni a tárhelyre, és megadni az egyedi értékeket, például jelszavakat. Ha a “Joomla fut”, az annyit jelent, hogy “a honlap fut”, a Joomla nem egy klasszikus értelemben vett program. Inkább egy fékész honlap. És mivel ez egy honlap, ezért tartalmaz olyan kódrészeket is, amik a szervernek szólnak, tehát a saját számítógépünkön, fejlesztői környezet nélkül nem fog futni, nem fogunk látni belőle semmit.

TÁRHELY, DOMAIN alapfogalmak

8

Ezen a ponton szeretnék mindenkit elriasztani a CMS rendszerektől, de csak átmenetileg. Nagyon csábító, hogy 5 perc alatt lehet saját honlapunk, de az az 5 perc nem úgy 5 perc. És a történetnek általában ott lesz vége, hogy az egyszerű ember a fórumok közösségétől várja majd el, hogy a felmerülő problémákat megoldja, mert halvány fogalma sem lesz, mi történik. Mintha vennénk egy félkész házat, amin van tető, és állnak a falai, bent vannak a nyílászárók. Mindaz, amit mi tenni tudunk, az a festés, meg a bútorozás. De kiderül, hogy a konyhába nem süt be a nap, a tető nem szigetel, a kazánt pedig nem tudjuk, hol van, de közeleg a tél.

WEB “DIY” BÖLCSÉSZEKNEK

A

szép az, hogy a Joomla és a többi CMS azért (is) jött létre, hogy megkönnyítse a honlapkészítést, de valójában már-már önálló programozási nyelvek, és ha az ember valami mást akar, mint amit a rendszer alapból nyújt, akkor inkább útban van, mint hasznára.

2

És itt van a védelem problémája. Egy joomlás honlapot ha feltörnek, Kínától Paraguayig bárkit gyanúsíthatunk. Ha a saját készítésű honlapodat törik fel, lesz sejtésed, hogy ki tette: az ellenséged. Ez azt is jelenti, hogy ha nem ingerelsz fel senkit, nem foglalkozik senki a honlapod feltörésével. Nem így, ha valamilyen CMS-sel hoztad össze. Mert ez esetben a célpont nem dedikáltan a te honlapod, hanem maga a CMS rendszer, annak vannak ellenségei. És nem muszáj feltörésre gondolni, elég, ha egy robot teleszórja a cikkeid kommentjeit spamekkel. Mivel a CMS rendszerek többsége ingyenesen letölthető, ezért a struktúrájuk és működésük nyilvános, ismert. Ezen kívül ha biztonsági rés van a rendszeren, akkor az az egész szériát érinti, nem csak egy adott honlapot, és ennek elhárítására nem sokat tehetünk. Talán újabb verzióra váltunk. Képzeljük el, hogy olyan várunk van, aminek a tervrajzát a világon mindenhol ismerik. Itt a riogatást be is fejezem: a CMS rendszerek előnyei továbbra is adottak, nem véletlenül használják még a profik is. De erről majd egy másik fejezetben.

TÁRHELY, DOMAIN alapfogalmak

9

WEB “DIY” BÖLCSÉSZEKNEK

Ezek

után már csak egy dolgot kell tisztázni ahhoz, hogy tárhelyet válasszunk. Ez pedig, hogy a szerver oldali scriptünk “milyen szintű tudást” vár el a szervertől. Mi magunk aligha fogunk tudni olyan kódot írni, ami aggodalomra adhatna okot, de lényegében erről van szó, a szerver oldali script fejlettségéről. A PHP nyelvet folyamatosan csiszolják, és időnként új, vagy egyszerűbb lehetőségek válnak lehetővé, amit mondjuk egy legfrissebb verziójú Joomla honlap alkalmaz is. Vagy akár mi magunk alkalmazzuk a saját fejlesztésű blogunkon. Ekkor pedig tudnunk kell azt, hogy a szerver maj ki tudja-e szolgálni a kéréseket.

2

1. Tehát ha tárhelyet választunk, akkor az egyik kérdés az, hogy miből milyen verzió van telepítve a kiszolgáló szervereken. Mivel ebben a könyvben a PHP-HTML-JAVASCRIPT háromszögből nem nagyon lépünk ki, talán leegyszerűsíthetem a kérdést, és írhatom, hogy erre elég csak egy sanda pillantást vetni, mert általában rendben van. Ha a tárhelyszolgáltató Apache-ot telepített, akkor mivel az ingyenes, nem jelent neki költséget az újabb verzióra váltás, bizonyára naprakészek. Ugyanez a helyzet a PHP telepítésekkel is, ingyenesek, tehát általában a legfrissebb verzió mindenhol megvan. Arról nem is beszélve, hogy feltehetőleg halvány gőzünk sem lesz arról, hogy melyik PHP verzió mivel tud többet az elődjénél.

TÁRHELY, DOMAIN tárhelyválasztás

2. A tárhely feladata a tárolás, és a kiszolgálás. Tehát az elsődleges szempont a sebesség és a rendelkezésre állás. A sebesség talán egyszerűbb: ha nem értünk a szervergépek fajtáihoz, akkor erre vonatkozóan csak közvetve tudunk következtetni. Máskülönben megkérdezhetjük a szolgáltatókat, hogy ki milyen gépeket használ. Aztán megkérdezhetjük azt is, hogy egy-egy szerverre hány felhasználót állítanak be. Van egy szolgáltató, aki arra kifejezetten büszke, hogy 100-nál megállnak, és az bizony tényleg jó. A helyzet persze az, hogy 100 magunkfajta felhasználó nem egyenlő 100 index.hu-val. Adatforgalom tekintetében. De mindenképpen jó, ha nem zsúfolják össze a tárhely-felhasználókat kicsi helyre. Volt dolgom olyan szolgáltatóval, ahol a honlapjaim sokszor azért álltak le, mert egy-egy “bérlőtársam” valamit úgy elállított a fiókjában, hogy az egész szerver leállt. Kevesebb bérlőtárs, kisebb esély a hibára, nagyobb sebesség. A sebesség nem mellékes kérdés, ugyanis a Google-rangsorban elfoglalt helyünk ezen is múlik, ezer dolog mellett, de akkor is. Az oldal betöltési sebességéért sokat tehetünk a honlap megépítésekor mi magunk is, de pl. egy Joomla, Wordpress honlap esetében különösen rajta kell tartani a szemünket.

10

WEB “DIY” BÖLCSÉSZEKNEK

A

rendelkezésre állás pedig egy olyan információ, amit kizárólag fórumokból tudunk kideríteni, hiszen minden szolgáltató 99%-ot ígér. Mégis vannak szolgáltatók, akik ezt nem tudják betartani. Ezzel kapcsolatban tanúsíthatunk megértő magatartást, hiszen általában egy-egy leállást 1-2 órán belül orvosolni lehet, a kérdés inkább mindig az, hogy a szolgáltató felveszi-e a telefont, ha baj van, válaszolnak-e az e-mailekre, és őszinték-e.

2

Ha például csak azt mondják el, hogy leállt a szerver, de nem teszik hozzá, hogy elképzelhető, hogy sérült a mi állományunk is, akkor bonyodalmak történhetnek. Egyszer megesett velem ilyesmi. Az egyik felhasználó jelezte, hogy nem tud belépni az oldalunkra, én pedig felhívtam a szolgáltatót, hogy a szerverrel van-e a gond, vagy a honlapom sérült. Mondták, hogy a szerverrel van a gond, meg fogják javítani. Négy órával később lejárt a munkaidőm, és az oldal még mindig nem volt elérhető. Ez alatt a négy óra alatt óránként hívtam az ügyfélszolgálatot, de nem vették fel. Másnap reggel újra telefonáltam – az oldal még mindig nem működött – és kiderült, hogy a szerver hibát előző nap már fél óra alatt megoldották, és az oldalam csak azért nem volt elérhető, mert megsérült. Biztonsági mentésből helyreállítottam az oldalt, és ez megoldotta a dolgot, de ez azt jelenti, hogy a 12 órás kimaradást meg lehetett volna úszni 1 órással is, ha el tudom őket érni telefonon.

TÁRHELY, DOMAIN tárhelyválasztás

11

A fórumokon újra és újra feltenni a kérdést, hogy ki melyik szolgáltatónál mit tapasztalt, nagyon jó dolog. Ha pedig sikerült 2-3 szolgáltatót kiválasztani, akkor lehet telefonálni nekik, hogy a szolgáltatás részleteiről kérdezzük őket. Ekkor kiderül az is, hogy mennyit kell várni arra, hogy felvegyék a telefont. 3. A csomag kiválasztásánál már könnyű dolgunk van, ha tudjuk mi kell nekünk. • Mekkora tárhelyet akarunk • Mekkora adatbázisunk lesz • Hány domaint szeretnénk a tárhelyhez rendelni • Mennyi önálló honlapot szeretnénk • Akarunk-e innen folytatni levelezést, és ha igen, mennyi levelet szeretnénk küldeni. És végül összehasonlítjuk az árakat. Nem minden ér aranyat, ami drága.

WEB “DIY” BÖLCSÉSZEKNEK

A

leírtak után valószínűleg nem kell külön hangsúlyozni, de a biztonság kedvéért szögezzük le, hogy a domain nem egyenlő a tárhellyel és a honlappal. A domain név lefoglalása nem bonyolult, egyszerűen ellenőrizzük a domain.hu-n, hogy szabad-e a domain, ami kell nekünk (általában foglalt, hiszen már több évtizede tart a honlapok szaporodása), és felkeressük a kiválasztott tárhely szolgáltató honlapját, ahol megrendeljük a domaint. Lehet külön a domaint megrendelni, de alapesetben tárhellyel együtt szokás. Ahhoz, hogy e-mail címet állíthassak be a domainnév.hu-hoz, kell, hogy tartozzon hozzá egy tárhely, mert a leveleket is tárolni kell legalább átmenetileg.

2 TÁRHELY, DOMAIN domain név választás 12

A mi szemszögünkből a legnehezebb azonban a domainnév választás. Nagyjából olyan érzés, mint nevet adni a cégünknek, senki sem akar Kati-ét 2014 Bt. nevet adni a vállalkozásának, de mégis iszonyat sok van ebből a típusból, mert a parlagon heverő ütős fantázianevek száma a nullához közelít. Domain neveknél pedig már a negatív tartományban tartunk. Kitaláltam például, hogy készítek egy macskás honlapot. Legyen a neve macska.hu. Csakhogy a macska.hu-t lefoglalta a haziallatok.hu, annak érdekében hogy ha valaki beírja, hogy macska.hu, a rendszer átirányítsa őt a haziallatok.hu-ra. Ezt hívják domain átirányításnak, ha már szóba jött. Lefoglaljuk a sutemenyek.hu-t, és még a csokissüti.hu-t, a sóssütemény.hu-t, megnyalommindatizujjam.hu-t, a torta.com-ot és a cukormaz.org-ot, és ezeket mind beállíthatjuk, hogy legyenek irányítva a sutemenyek.hu tárhelyére, aminek köszönhetően mindegyik cím ugyanazt az oldalt fogja megjeleníteni. Egy gyereknek több apja lesz. A névválasztásnál a keresőoptimalizálásra is gondolni kell: ha lehet, tartalmazzon kulcsszót. Például a hír.hu ideális egy újság esetében, mert ha valaki beírja a keresőbe, hogy földrengés + hír, akkor a hír szó elsődleges találata a hir.hu lesz. Az első honlapom neve semmilyen nyelven nem jelentett semmit, furcsán is hangzott, úgyhogy a hatás nem maradt el: nem növekedett sehová. A magam részéről azt szűrtem le, hogy a legfantáziátlanabb a legjobb, mert azzal könnyű megbarátkozni. Tegyük fel, hogy egy hírportált rakunk össze, ami a világ minden részéről begyűjti azokat a híreket, amik nagyon furcsák. Én, mint a béna névválasztás önkéntes királya azt a nevet adnám neki, hogy bizarrbazár.hu, ami halálra ítéli az egész vállalkozást. Mik lesznek az oldalon? Hírek. Akkor a domain egyik fele már megvan. Milyen hírek? Furcsák. Akkor készen vagyunk. Furcsahirek.hu. Nem kell túlbonyolítani.

WEB “DIY” BÖLCSÉSZEKNEK

Hogyan csináljam?

1. Eldöntöd, hogy milyen honlapot szeretnél: csinálsz magad, vagy testre szabsz egy Wordpress oldalt 2. Fórumokon utánanézel a tárhelyszolgáltatóknak (Google-be írd be a szolgáltató nevét és a “probléma” szót) 3. A dobogós szolgáltatók csomagárait összehasonlítod (ha alapcsomagok között válogatsz, figyelj, hogy adatbázis járjon hozzá) 4. Felhívod a kiválasztott szolgáltatókat, és megkérdezel tőlük valamit (pl. van-e havi forgalmi korlát a csomaghoz, amit kiválasztottál), így kiderül, hogyan kezelik a telefont. 5. A honlapjukon megkeresed a tárhely megrendelése gombot. 6. A tárhely megrendelésekor egyúttal domaint is lehet lefoglalni, ne mulaszd el. 7. Elvégzed a feltüntetett tennivalókat (általában faxon/emailben/postán küldeni kell két tanúval hitelesített nyilatkozatot a személyi számod hitelességéről, és egy aláírt megrendelőt) 8. Pár napon belül megkapod az értesítést, hogy élesítették a tárhelyet, és hozzárendelték a domaint. A kapott jelszavakat tárold el pl. egy excel fájlban! 9. Jelszót és felhasználónevet kapsz az ügyfél adminba (ahol a szolgáltatással kapcsolatos extrákat intézheted, és ahonnan a legkönnyebben tudod megnyitni az adatbázist) 10. Jelszót és felhasználónevet kapsz a tárhelyhez, és egy FTP címet. A Total Commanderben vagy a FileZillában ezeket megadva tudsz csatlakozni. 11. Feltöltöd a tárhelyedre a honlapod állományát, és kész. 12. Bármi kérdésed van, ha általános kérdés, rákeresel a neten, ha a szolgáltatással kapcsolatos, felhívod az ügyfélszolgálatot.

13

KÉPSZERKESZTÉS

WEB “DIY” BÖLCSÉSZEKNEK

Egy

honlaphoz mindenképpen kellenek képek, úgyhogy ezt is ismerni kell! Régen, mikor sokkal kevesebben értettek a webhez, a kevés kiválasztott gondosan ügyelt arra, hogy minden a lehető legkisebb méretű legyen. Aztán jöttek a nagyobb merevlemezek, és a széles sávú internet, és a probléma zárójelbe került. Ennek ellenére oda kell figyelni erre, olyan ez, mint a szemétlerakás: lerakhatnád az erdő szélére, mert senki nem szól rád, de nem rakod le oda, mert környezettudatos vagy.

3

Mikor papírra rajzolunk, úgy mentjük el, hogy berakjuk egy mappába. Legközelebb elővesszük, ugyanaz a papírméret, változatlan súly, változatlan minőség. Ezt a számítógépen .bmp és .png fájlformátumnak hívjuk. Nagyon fontos, hogy ha szerkesztünk egy képet, legyen belőle egy .png verzió, mint ősforrás, amit újra meg újra elővehetünk változatlan minőségben. A cél azonban a kis fájlméret, ezért a sok lehetőség közül a legismertebbet, a .jpg-t figyeljük most meg. Egy kép egymás után sorakozó bitekből áll. A .png és .bmp formátumok ezeket bitre pontosan nyilvántartják. De a pointilista festészet nagy tanulsága, hogy az egymás mellett lévő foltok messzebbről nézve ugyanúgy képnek hatnak, úgyhogy kézenfekvő újítás volt az előző évszázadban, hogy a képfájl egymás közelében lévő bitjeit átlagolhatnánk is, és csak ezt az átlagszámot tartja majd nyilván az új fájl, a mentés után. Kevesebb adat, kisebb fájlméret. Ezt csinálja a .jpg. Ezért olyan kicsi. Ebből pedig könnyen rájön bárki, hogy minél többször mentjük el a .jpg-t, annál csúnyább lesz.

KÉPSZERKESZTÉS fájltípus, szerkesztő

15

Nagyon eltúlozva, leegyszerűsítve ez egy .jpg fájl életútja. Úgy mondják: veszteséges tömörítésű.

kiindulási állapot 1. mentés után 2. mentés után 3. mentés után 4. mentés után

3487619234921 3735351 5441 42 3

WEB “DIY” BÖLCSÉSZEKNEK

Van

egy kutyás képünk, .jpg formátumban találtuk egy kínai honlapon. Kínai írással az van ráírva, hogy Szeressük egymást! Mi ezt magyarul akarjuk ráírni Arial betűtípussal. Később rájövünk, hogy rovásírással is szeretnénk, hogy több emberhez eljusson az üzenet.

3

Milyen programot válasszunk ahhoz, hogy a képet megfotosoppolhassuk? Nem vagyok híve a ”szerzésnek”, különösen, ha léteznek nyílt forráskódú, ingyenes szoftverek. A fejlesztők nagyon sokat dolgoznak vele, ingyen közkinccsé teszik, te pedig mégis inkább “szereznél” egy Adobe Photoshopot? Photoshoppal is dolgozok, de többnyire GIMP-et használok, ami semmivel sem tud kevesebbet. Csak látványra nem adja azt az érzetet, hogy egy grafikai stúdióban tologatom a betűket ide-oda a telibe találó pszichológiát keresve. De ennek köszönhetően a GIMP szerényebb gépeken is hasít, 100 MB alatti merevlemez-igénye van, szóval a szememben ez egy országúti bringa a reggeli csúcsforgalomban bedugult Fiumei úton. Nagyon fontos, hogy ha valamit szeretnénk, de elakadunk, akkor a neten rá lehet keresni a problémára, mindkét program “hogyan kell….” kérdéseiről szuper blogposztok vannak. A legnagyobb császárok akkor leszünk, ha angolul is tudunk, mert angolul alig van olyan kérdés, amit nem válaszoltak még meg.

KÉPSZERKESZTÉS fájltípus, szerkesztő

16

Tehát vissza a kutyás képhez! Megnyitjuk GIMP-ben, letöröljük a kínai hieroglifákat, és fekete Arial betűtípussal ráírjuk, hogy Szeressük egymást! Elmentjük úgy, hogy felülírjuk az eredeti fájlt, mert az már úgysem kell. JPG-ben mentjük, hogy optimális legyen. Kiváló végeredmény, és web-tudatosan cselekedtünk. De most jöttünk rá, hogy kéne az a rovásírásos-verzió, úgyhogy újra megnyitjuk GIMPben, letöröljük a latin betűs mondatot, és a legszebb rovásírás fontkészlettel – de menőbb, ha kézzel – kiírjuk, hogy Szeressük egymást! Elmentjük ismét, akár más fájlnéven, hogy az előző is megmaradjon. Újra megnyitjuk, hogy egy barátságos kék hátteret is rátoljunk, és ekkor vesszük észre, hogy mit is tettünk, amikor egy már elmentett jpg fájlból kezdtünk dolgozni.

WEB “DIY” BÖLCSÉSZEKNEK

3

Úgy hívjuk ezt, hogy szőrös lett a kép, ami a kutya esetében még jól is jön, de minden egyéb szempontból tragikus. Tanulság: ha csak tehetjük, .PNG-ből dolgozzunk, és csak a webre szánt végeredményt mentsük .JPG-be. Természetesen egy 4000×3200 felbontású fotót jó sokáig kell mentegetnünk .JPG-ben ahhoz, hogy ocsmány legyen, de nem nyúlhatunk mellé, ha követjük a bölcs tanácsokat.

KÉPSZERKESZTÉS fájltípus, szerkesztő

17

WEB “DIY” BÖLCSÉSZEKNEK

Ha

a weboldalunkra szánunk képeket, akkor két dolgot kell átgondolnunk: mi a célunk a képpel és hogy ebből kifolyólag mekkora fájlméretre van szükségünk. Tegyük fel, hogy egy tematikus térképet szerkesztettünk egy ronda .jpg térképet felújítva és kiegészítve. A térkép annyira részletgazdag, hogy csak teljes képernyős nézetben lehet rajta mindent elolvasni. A térképet a saját készítésű blogunkra szánjuk, bele egy posztba. A következő problémákat veti fel. Mekkora legyen a kép mérete? Ugyanis különböző méretű képernyőkön fog megjelenni a blogposztunk. Az 1440 px széles monitornál nagyobb már nem sűrűn van, persze lehetünk előrelátók és a tévés internetezésre gondolva még ennél is nagyobb képméretben mentjük el a fájlt. Ez persze nagyobb fájlméretet is jelent.

3

De akkor lassabban tölt be a blogposzt? Igen. Ezért mérlegelni kell, hogy érdemes-e esetleg egy kb. 800 px széles “előzetes“ képet készíteni, amit a posztba berakunk, a nagy méretű kép linkjét pedig megaduk külön, hogy hol tudja böngészni. Ha a mobilos böngészőkre is tekintettel vagyunk, akkor illene valami ehhez hasonló megoldást találni, de a térkép esetében nem hanyagságból vagy lustaságból teszünk fel a honlapra az egy megás képet, hanem a részletek miatt. Tehát akár bele is férne, hogy a posztba közvetlenül tegyük be.

KÉPSZERKESZTÉS képméret

18

Mi a célunk? Ha csak illusztrációnak szánjuk a térképet, akkor már a szerkesztéskor ügyleni kell rá, hogy kb. 600 px szélességben is olvasható legyen az, amit annak szánunk, és akkor fölöslegesen ne hozzunk létre részletgazdag verziót. A lényeg az, hogy a webre szánt kép felbontása ne legyen nagyobb a szükségesnél. Mi magunk rajonghatunk azokért az emberekért, akik nagy felbontású kristálytiszta képeket tesznek fel a honlapjukra, mert azokat lementve kiváló alapanyagokhoz jutunk, szemben a mi oldalunkon lévő kisméretű, még éppen hogy tiszta képekkel, amik már további feldolgozásra nem alkalmasak.

WEB “DIY” BÖLCSÉSZEKNEK

Logók

esetében merül fel, hogy a kép bizonyos részei átlátszók legyenek, de ez a lehetőség egyébként nagyon sok trükkre nyit kaput. A képszerkesztőnkkel megcsináljuk, hogy például a vállalkozásunk pecsétjének kék tintáján kívül semmi se legyen a képen, hanem azok a részek legyenek átlátszók. Ezt az oldalunkon több helyen is szeretnénk felhasználni, például a blogposztjaink végén. Vagy az általunk szerkesztett térképekre nyomjuk rá (ez esetben ezt vízjelezésnek hívjuk). Tehát webre optimalizáltan .JPG-ben mentenénk, de nem fog az történni, mert a .JPGnem támogatja az átlátszóságot. Amit tudunk, az vagy a .GIF, vagy a .PNG formátum. Mindkettő ugyanolyan jó, a .PNG színtartásában talán biztosabbak lehetünk, úgyhogy a GIF-et hagyjuk meg a 444-nek. Ilyen esetben, ha kénytelenek vagyunk .PNG-t használni, győződjünk meg róla, hogy a webre kerülő verzió nem nagyobb az indokoltnál.

3

A “lyukas” képek sok trükköt lehetővé tesznek, főleg, ha ki akarjuk használni a HTML5 nyújtotta mozgatási lehetőségeket. Vagy ha egy nagyon grafikus menüt készítünk (ami a 90-es évekre volt jellemző). Nagyon fontos, hogy ahol csak lehet, ne kössük meg a kezünket előre, tehát transzparens hátterekkel dolgozzunk ilyen esetekben. A jobb oldali képen látható menüelemek négyszög alakúak, de mivel transzparens a hátterük, a fecnik körül az oldal háttérszíne (fekete) jelenik meg.

KÉPSZERKESZTÉS átlátszó képek

19

WEB “DIY” BÖLCSÉSZEKNEK

Különösen

fontos a “legkisebb szép” elvét követni az állandó weboldal elemek esetében, sőt, amit lehet, próbáljunk a webprogramozás eszközeivel létrehozni. Például árnyékokat, egyszínű felületeket, vagy lekerekített éleket.

3

Persze elismerem, hogy nem mehet a funkcionalitás és a méret-optimalizálás a látvány rovására, tehát a kompromisszumokat meg kell kötni. És ha már a kompromisszum szóba jött, a legjobb, ha van valakink, akivel ezt a kompromisszumot megkötjük, azaz van egy grafikusunk, vagy legalább egy esztétikai érzékkel megáldott emberünk. A nyolcvanas évek áldása volt a punkok csináld magad mozgalma, ami kétség kívül megmentette az emberi civilizációt attól, hogy a korporatavizmus bűzös mocsarába fulladjunk, de ettől még nem kell mindent nekünk csinálni.

KÉPSZERKESZTÉS webgrafika

20

A honlapkészítés olyan, mintha tudnánk beszélni egy idegen nyelven, a webgrafika viszont olyan, mintha lenne szép- és arányérzékünk. Nem ugyanannyi erőfeszítés elérni ez utóbbit. Tehát vannak dolgok, amiket bátran elvégezhetünk mi magunk: vízjelezés, feliratozás, csíkozás, vagdosás, méretezés, optimalizálás, de vannak dolgok, amiket nem. Legalább egy logót szerezzünk be a nagymester ismerősünktől, akkor is, ha nem tetszik amit csinált, mert a mi véleményünk ezekben a kérdésekben tényleg nem számít. Az “Én nem értek hozzá, de….” kezdetű mondatokra gondolok: ha nem értesz hozzá, akkor NEM értesz hozzá, lásd be jobban. Most persze szigorú voltam, mert azokra gondoltam, akik mindenfélét összeokoskodnak a történelemről, csak mert megnéztek egy Avatara videót a Youtubeon, és leállnak vitatkozni veled, aki ezzel foglalkozol hivatásszerűen. Ha van ismerősünk, akinek az ítéletében nagyjából megbízunk, akkor mindenképpen nézessük át vele a webdizájnunkat, az ilyen beszélgetések mindig nagyon termékenyek tudnak lenni. És még egy bölcsesség: profiktól nem szégyen tanulni. A webdizájnt bátran koppinthatjuk profi oldalakról, nem kell a honlapunk minden porcikájának egyedinek lennie. Sőt, a helyzet az, hogy ha megpróbálunk klónozni egy honlapot, korlátozott képességeink miatt úgyis egyedi végeredményt kapunk. Egy általános célú honlapnak a tartalma és funkcionalitása kell, hogy egyedi legyen, formailag viszont azt kell üzennie, hogy ez is azoknak a modern weboldalaknak a sorába tartozik.

WEB “DIY” BÖLCSÉSZEKNEK

Gimp letöltése:

http://www.gimp.org/downloads/

Hogyan csináljam?

0. ha nincs pénzed Photoshopra, használd a Gimpet ingyen. 1. találd ki, hogy mit akarsz grafikusan megoldani, és mit vagy hajlandó programozva megjeleníteni. 2. a weboldalad grafikai összetevőit a lehető (lehető = még esztétikus) legkisebb fájlméretben mentsd el. 3. .jpg-ben már csak a kész végeredményt mentsd el. 4. az olyan grafikai elemeknek transzparens hátteret adj (és .gif-ben, vagy .png-ben mentsd), amik csak részben töltik ki a négyszöges keretüket, mert később, ha a háttérszínt módosítani szeretnéd, nem kell külön-külön a képeken is átszinezni a háttért. 5. 100-200 kb fölötti képek már másodpercekkel hosszabbítják meg az oldal betöltését, amit az ember nem, de a Google észrevesz.

21

STATIKUS OLDAL KÉSZÍTÉSE

WEB “DIY” BÖLCSÉSZEKNEK

Notepad++

http://notepad-plus-plus.org/

A

továbbiakban fő eszközünk a szerkesztőprogramunk lesz. A laikusok körében az a képzet él, hogy a webprogramozók is hihetetlenül összetett eszközöket használnak a programozásra. Valójában ha nagy a kényszer, egy sima jegyzettömb is jó, legalábbis HTML programozásra. A legtöbb fórumon a Notepad++ a javasolt szerkesztőprogram, amit én is jó szívvel javaslok. Ingyenesen letölthető, és roppant sallangmentes, tényleg csak az van benne, ami kell.

4

A Notepad-ben írjuk majd a kódokat, és attól függően, hogy milyen webprogramozási nyelven írtuk, attól függően mentjük el .HTML-ként, vagy .PHP-ként, esetleg .js-ként. Egy későbbi fejezetben erre majd még visszatekintek, most fölösleges volna erről több szót ejteni. Az előző évtizedben nem voltak ennyire felhasználóbarát fórumok, és aki formázott hozzászólással akart felvágni, annak értenie kellett a jelölésekhez, html tagekhez. A felhasználóbarátság ára, hogy az emberre kevesebb elvárás nehezedik, azaz tanulás nélkül is hozzáfér előnyökhöz, ami történelmi távlatokból nézve egy átmeneti illúzió. Ráadásul egy szöveget például a legnagyobb sálba betekert művészettörténész-hallgató is meg tudna formázni html tagekkel. Nem egy nagy varázslat.

STATIKUS OLDAL

23

WEB “DIY” BÖLCSÉSZEKNEK

A

HTML a legkézenfekvőbb, ha egy oldalt fel akarunk építeni, aztán később majd ezt fogjuk kicsit megbolondítani PHP-vel. Először megpróbálunk egy blogposztot kereső optimalizálni a html jelölések segítségével. Megkezdjük az ismerkedést a html tagekkel. Íme. Jobs / Social network

4

Tegnap pótoltam be ezt a két filmet. Filmügyileg a Social network nagyságrendekkel élvezhetőbb volt, de az egészből inkább a jelenség volt érdekesebb, nem a filmen kattogok, hanem ezen a két emberen. Engem lehangolt, és nem látok semmi inspirálót a történetükben. A filmről még egy mondatot: a Social networköt jobban összerakták, de a bénaság határát bőven átlépi, ahogyan az egyes események jelentőségét átméretezték. Meg a klisék. A Jobsból pedig kivettek minden technikai információt, marad a helyén egy elmebajos ámokfutó – életellenes rabszolgahajcsár, aki mindjárt a sikertörténet legelején megcsináltatja a munkáját egy zsenivel, és még át is veri.

STATIKUS OLDAL szövegformázás

Folyamatosan figyelni kell a keresőoptimalizálás változó szabályait, de valószínűleg a tagolt szöveg mindig értékesebb lesz a tagolatlan szövegnél. Tegyük fel, hogy a majdani saját magunk által készített blogunkra fog kerülni a poszt, tehát olyan dolgokról is nekünk kell gondoskodni, amiről a legtöbb esetben nem.

24

WEB “DIY” BÖLCSÉSZEKNEK

Próbáld ki:

http://walap.hu/html/szovegformazas1.php

Az

alapszöveg neve bekezdés, paragrafus. Jele

. És ugyanúgy, ahogy az emberi beszédben jelezzük, hol van a mondandónk vége (levisszük/felemeljük a hangsúlyt, írásban pontot teszünk, stb.), itt is jelezni kell, hogy ennyi. A jele egy /. A paragrafus esetében

. Mikor HTML-ben programozunk, úgy kell elképzelni, mintha a böngészőnkkel kommunikálnánk, és az ő nyelvén fogalmaznánk meg azt, amit egyébként így mondanánk:

4

Jelenítsd meg azt, hogy “Jobs / Social network”, címként, aztán egy bekezdést kezdj, írd bele, hogy “Tegnap pótoltam be ezt a két filmet [....] a történetükben. ”, és itt van a bekezdés vége. Most kezdj egy új bekezdést, írd bele, hogy (…), és itt van a bekezdés vége. Satöbbi, a lényeg, hogy szájbarágósan, akkurátusan minden szándékunkat leírjuk. HTML nyelven ezt így “mondjuk”: Jobs / Social network

Tegnap pótoltam be ezt a két filmet. Filmügyileg a Social network nagyságrendekkel élvezhetőbb volt, de az egészből inkább a jelenség volt érdekesebb, nem a filmen kattogok, hanem ezen a két emberen. Engem lehangolt, és nem látok semmi inspirálót a történetükben.

A filmről még egy mondatot: a Social networköt jobban összerakták, de a bénaság határát bőven átlépi, ahogyan az egyes események jelentőségét átméretezték. Meg a klisék.

STATIKUS OLDAL szövegformázás

A cím (headline) jele , az alcím jele , a bekezdés cím , sőt ezt a h-s hierarchiát lehet szaporítani, és ettől eltekinteni is, de erről majd később. Az ezen tagek közötti szöveget a böngésző félkövéren és nagyobb betűméretben jeleníti meg. A keresőoptimalizálás ott történik, hogy a kulcsszavainkat kiemeljük, a legjobb kiemelés pedig az, hogy tagek közé tesszük. Ez egyúttal merénylet is az irodalom ellen, mert a metaforikus címek elfelejtését követeli meg. A fenti rövid gondolatsornak adhattam volna azt a címet is, hogy Lehangoló történetek, de abból a Google az életben nem találná ki, hogy a szöveg miről szól. Márpedig első blikkre a cím tagek közé rakott szöveget nézik meg a robotok, kedveskedjünk hát nekik kulcsszavakkal.

25

Egy körrel beljebb a bekezdésekért is tehetünk ezt-azt, mégpedig a hagyományos kiemeléseket: félkövér és dőlt betűtípusokkal. A félkövér, azaz bold jele a , a dőlté, azaz italicé az . Ritkán használjuk az aláhúzottat (underline), jele .

WEB “DIY” BÖLCSÉSZEKNEK

Próbáld ki:

http://walap.hu/html/szovegformazas1.php

A

következőkben a példa kedvéért a szövegben a filmcímeket félkövérre állítjuk. Ezt sajnos ilyen általános szabály kimondásával nem tudjuk megértetni a böngészővel, tehát HTML nyelven egyenként jelöljük: Jobs / Social network

4

Tegnap pótoltam be ezt a két filmet. Filmügyileg a Social network nagyságrendekkel élvezhetőbb volt, de az egészből inkább a jelenség volt érdekesebb, nem a filmen kattogok, hanem ezen a két emberen. Engem lehangolt, és nem látok semmi inspirálót a történetükben.

A filmről még egy mondatot: a Social networköt jobban összerakták, de a bénaság határát bőven átlépi, ahogyan az egyes események jelentőségét átméretezték. Meg a klisék.

A Jobsból pedig kivettek minden technikai információt, marad a helyén egy elmebajos ámokfutó – életellenes rabszolgahajcsár, aki mindjárt a sikertörténet legelején megcsináltatja a munkáját egy zsenivel, és még át is veri.

STATIKUS OLDAL szövegformázás

Egy ilyen szöveg fantasztikusan kereső optimalizáltnak számít. Riogatnak, hogy a Google a túlzott formázást is megbünteti, de ez alatt nem ezt kell érteni. Túloptimalizálni úgy tudunk, ha a szöveg élvezhetősége rovására a kulcsszavunkat indokolatlanul sokszor használjuk, ezer alcímben például. Ezek volnának a szövegformázás alapjelei, de még hármat ha megtanulunk mellé, akkor jó ideig elboldogulhatunk majd ezekkel.

26

WEB “DIY” BÖLCSÉSZEKNEK

Próbáld ki:

http://walap.hu/html/szovegformazas2.php

4 STATIKUS OLDAL szövegformázás

Felmerülhet, hogy valamit már új sorba szeretnénk írni, de nem új bekezdésbe. Például egy felsorolást arról, hogy milyen tageket mutatok majd be: Ha mindegyik sort új paragrafusként definiálnék, tehát

tagek közé tenném, akkor ilyen eredményt kapnék (1. szövegdoboz).

sortörés

Erre való “az Enter”, azaz a break, jele
, sőt, mivel ez kivételesen nem egy páros jel, szabályosabb a lezárt változatát, a -t használni. A breaket bekezdéseken belül tudjuk használni, tehát ha két bekezdés között szeretnénk extra ürességet kialakítani, akkor böngészőtől fog függni, hogy megjeleníti-e “az Entereket”. (2. szövegdoboz)

link

Alapvetően a bekezdésen belül van értelme a
-nek, úgy kell használni, ahogy a harmadik szövegdobozban.

sortörés
soron belüli kiemelés
pontozott lista
számozott lista
link

A fenti lista helyesen a negyedik szövegdobozban szerepel. A böngészők csak ezekből a jelekből értenek, tehát új sort csak új paragrafus, vagy címsor kezdetekor nyitnak, vagy
láttán. Az alsó szövegdobozban szereplő kódot a böngésző így jelenítené meg:

soron belüli kiemelés pontozott lista számozott lista

első bekezdés

második bekezdés

első bekezdés

második bekezdés

sortörés soron belüli kiemelés pontozott lista számozott lista link

sortöréssoron belüli kiemeléspontozott listaszámozott lista link.

27

Számunkra pedig azt jelenti, hogy az áttekinthetőség érdekében bármennyi entert üthetünk, nem jeleníti meg a böngésző.

WEB “DIY” BÖLCSÉSZEKNEK

Próbáld ki:

http://walap.hu/html/szovegformazas3.php

Soron belüli kiemelés

4

Ha a beépített lehetőségek, a dőlt és a félkövér nem elég nekünk, akkor megadhatunk bármilyen mást a tagek közé téve. Önmagukban nem érnek semmit, de lehet a -nak stílust adni, bármilyet, és úgy már egy erőteljes eszköz. A szörnynek zöld szeme van. Szeretnénk a zöldet zöld betűkkel írni, úgyhogy a -hoz kell nyúlnunk.

A szörnynekzöld szeme van.

A stílusformázásokról majd egy későbbi fejezetben mutatok jóval többet, de itt elkerülhetetlen volt megemlíteni, mert a csak a style=”” attribútum megadásával csinál valamit. zöld

STATIKUS OLDAL szövegformázás

28

WEB “DIY” BÖLCSÉSZEKNEK

Próbáld ki:

http://walap.hu/html/lista.php

Pontozott és számozott lista

4

Listák esetében így fogalmazunk a böngészőnek:

Pontozott lista következik. Új sorba írd, hogy sortörés, itt a sor vége. Új sorba írd, hogy soron belüli kiemelés, itt a sor vége. Új sorba írd, hogy pontozott lista, itt a sor vége. Új sorba írd, hogy számozott lista, itt a sor vége. Új sorba írd, hogy link, itt a sor vége. Itt a pontozott lista vége. Szóról szóra ugyanez HTML-ben:

• sortörés
• soron belüli kiemelés
• pontozott lista
• számozott lista
• link

STATIKUS OLDAL szövegformázás

Eredmény: • sortörés • soron belüli kiemelés • pontozott lista • számozott lista • link

A pontozott lista jele

, a számozott listáé . Viszont mindkét esetben a lista elemei

tagek közé kerülnek.

29

sortörés

soron belüli kiemelés

pontozott lista

számozott lista

link

Eredmény: 1. sortörés 2. soron belüli kiemelés 3. pontozott lista 4. számozott lista 5. link

WEB “DIY” BÖLCSÉSZEKNEK

Próbáld ki:

http://walap.hu/html/link.php

Linkek

4

A link jele a horgony, azaz anchor, . Több dologra is jó ez, de a legáltalánosabb a linkelés, úgyhogy most csak ezt mutatom be. Ha egy másik oldal belinkelésére használjuk, akkor href=”” attribútumot kell megadnunk, ahol a “” jelek közé kell betenni az URL-t.

Bármi gondod van, magyar nyelven a Weblaboron találsz választ a legnagyobb eséllyel.

Eredmény: Bármi gondod van, magyar nyelven a Weblaboron találsz választ a legnagyobb eséllyel.

STATIKUS OLDAL szövegformázás

Ezek volnának a legfontosabb szövegformázási lehetőségek. Tulajdonképpen a HTML nyelv logikáját, “nyelvtanát” sikerült elsajátítani, és ami vár ránk, az a további szavak tanulása. Veszünk egy nagy levegőt, és belevágunk az oldalépítésbe.

30

WEB “DIY” BÖLCSÉSZEKNEK

A

fejezet elején javasoltam, hogy használjuk a Notepad++ programot. Ha HTML oldalt készítünk, könnyebb például a Dreamweavert használni, vagy nyílt forráskódú párját, az NVU-t. Nem árt, ha raktáron tartunk egy ilyen úgynevezett Wysiwyg (vizivig) programot, mert a táblázat részt pillanatok alatt összerakja nekünk a program. A Wysiwyg jelentése What you see is what you get, azaz amit látsz, azt kapod. Magyarul, ezekben a programokban a végeredményt látva tudunk szerkeszteni.

4

Csak a jelenség sokkoló ereje kedvéért a klasszikus Jegyzettömböt nyissuk meg, írjuk bele a szokásos Hello world! mondatot, és mentsük el. Mentéskor a fájl típusa résznél “szövegfájl”-ról állítsuk “minden fájl”-ra, és adjuk meg a fájlnevet: hello.html. Most keressük fel a fájlt, és böngésző ikon lesz rajta. Duplán rákattintva a böngészőben fog megnyílni a HTML oldalunk, és ki lesz írva, hogy Hello world! Lényegében annyit csináltunk, hogy a szövegünket nem .TXT-ként, hanem .HTML-ként mentettük el. Ugyanígy készítünk .php vagy .js (javascript) fájlokat is. A fájl kiterjesztése adja meg a kulcsot, hogyan kell feldolgoznia a kliensnek.

STATIKUS OLDAL alapszerkezet

Visszatérve a Wysiwyg szerkesztőkre: ezért lehet mellőzni őket. Elmentjük a fájlt, amin dolgozunk, és megnyitjuk böngészőben, hogy lássuk, hol tartunk a munkában.

31

A kézi kódolás során sok hibalehetőséget zárunk ki, ha a páros tageket párban írjuk, nem folyamatában. Kattints a flash ikonra, hogy világos legyen!

WEB “DIY” BÖLCSÉSZEKNEK

Egy szabályos HTML oldal A szabályos html oldalt a html nyitó és záró tagek közé illesztjük.

4

A szabályos html oldalunkra vonatkozó információk a böngészőprogramok számára a fejbe, a head tagek közé kerülnek

információk a böngészőprogramok számára A látható tartalom a body tagek közé kerül

STATIKUS OLDAL alapszerkezet

Az oldalaink nevét szabadon választhatjuk, de van néhány megkötés. A szóközöket - vagy _ jelekkel helyettesítsük, és próbáljuk az ékezeteket elkerülni. Névadásnál fontos, hogy az index, mint név meghatározott jelentéssel bír. Szerver beállítástól függően ha beírunk egy elérési utat, például http://walap.hu/kepek/

32

akkor az ebben a mappában lévő dolgok listáját (indexét) láthatjuk. Ha viszont beteszek ide egy index nevű állományt (pl. HTML vagy PHP kiterjesztéssel), akkor azt fogja automatikusan betölteni. A nyitólapunkat is ezért kell egyszerűen index.html vagy index.php-nek elnevezni.

WEB “DIY” BÖLCSÉSZEKNEK

Nézz egy másik példát:

http://walap.hu/html/head_title.php

Ezen

a ponton még korai volna mélyebben belemenni, hogy mit helyezünk a tagek közé, ezért csak két dolgot nézzünk, az egyik a karakterkódolás, a másik az oldal címe lesz.

4

Aránylag fontos, mit írunk a fejrészbe címnek, mert ezt fogja megjeleníteni a böngésző az oldal fülén. A cím tagek közé kell írni, ami az oldal neve lesz. A másik fontos elem a karakterkódolás. Nagyjából arról van szó, hogy több szabványa is van a betűk (karakterek) leírásának (kódolásának), és a böngészőknek tudnia kell, hogyan dekódolja a biteket. Mert természetesen az a szint, ahol mi a forráskódot írjuk, még mindig egy felhasználóbarát másodlagos felület, és az ott leírt információkat bitekben fogja tárolni a rendszer.

STATIKUS OLDAL head rész

33

Ha angolok lennénk, ezzel nem lenne sok bajunk, mert az alapbetűk, amik az angol ABC betűi, kódolástól függetlenül ugyanúgy jelennek meg a böngészőkben. Viszont a mi gazdag hangjelölő írásunk tömve van ékezetekkel, ezért nekünk következetesen definiálnunk kell, hogy milyen karakterkódolást használunk. Ha a böngésző nem úgy dekódolja a karaktereket, ahogyan mi kódoltuk, akkor ¥Ærdekes lesz az eredmÏǼny. A képen látható példa forráskódja így néz ki.



Tilos-udvar

A Tilos-udvar emlékére zenelejátszó beágyazott kódja

WEB “DIY” BÖLCSÉSZEKNEK

A

böngésző számára a tagbe írt charset=”utf-8” attribútum jelent támpontot. A tag a
-hez hasonlóan egy páratlan tag, tehát egyszerre nyitó és záró tag. A meta ez esetben nagyjából azt jelenti, hogy esszenciális információkat tartalmaz az oldalról, tehát bőven a tartalom fölött áll, ezért meta.

4

A másik, ami a példakódból kiderült, hogy én az utf-8 kódolást javaslom, és a fórumokon azt tapasztalom, hogy a nem angol nyelvű népek (és az angolok is, de nekik ez mindegy) úgy általában az utf-8 védelmező szárnyai alatt lelnek megnyugvást. Szóval lenne lehetőség még ezer karakterkódolásra, utf-ből is van utf-8, utf-16, utf-32, és ezeknek népenkénti alfajai, például utf-8_hungarian, de nem szabad bedőlni, ha olyat akarunk, ami működik, akkor az arany kód az UTF-8_general_ci. A meta tagban viszont elég annyit megadni, hogy charset=”utf-8”. Ehhez persze az kell, hogy mi magunk utf-8-ban kódoljuk a fájlunkat. Még a Jegyzettömbben is be lehet ezt állítani, mentéskor.

STATIKUS OLDAL head rész

34

WEB “DIY” BÖLCSÉSZEKNEK

Nézz egy másik példát:

http://walap.hu/html/head_char.php

Külső stílusfájl becsatolása: http://walap.hu/html/head_link.php

Description:

http://walap.hu/html/head_description.php

A

Notepad++ ennél bővebb beállítási lehetőséggel szolgál, és nekünk, mint ékezeteket használó népnek elengedhetetlenül szükségesek azok a bővebb beállítási lehetőségek, mégpedig a BOM nélküli utf-8 kódolás.

4

Erről megint korai lenne eszmefuttatást folytatni, de a BOM egy rövid kis megfogalmazás a fájl elején, ami felhívja a dekódoló entitás figyelmét arra, hogy speciális karaktereket is tartalmaz. Viszont ez a kis segítőkész információ kicsit olyan, mint az udvariaskodás a 7-es buszon reggel: jelentős fennakadásokat okoz. A BOMról még ejtek szót, most elég annyit felfogni, hogy bármilyen oldalt készítünk, minden összetevőjét elejétől fogva utf-8 BOM nélküli verzióban kódoljuk. A részbe tehető tagek legfontosabb részei ezek, illetve a külső stílusfájl becsatolása.

STATIKUS OLDAL head rész

Ezen kívül fontos lehet még a .

35

WEB “DIY” BÖLCSÉSZEKNEK

Ez

az alfejezet kimondottan hosszú lehetne. Ehelyett kimondottan rövid lesz, és csak egy blogbejegyzés lebutított környezetét készítjük el. Egy ilyen munkának úgy a legérdemesebb nekilátni, hogy papírt veszünk elő, és vázlatokat készítünk, hogyan nézzen ki az oldalunk. A profik photoshopban készítenek látványterveket, de a lényeg ugyanaz: ne a kódoláskor kelljen improvizálni. Mivel – főleg a kilencvenes években – vízszintes és függőleges vonalak hálójában tökéletesen felrajzolhatók voltak a honlapok, táblázatok kialakításával készítették őket. Nézzünk egy klasszikus elrendezést!

4

P.J. Blogja Közélet Filmek

Kaja

Utazás

Foci

A blogról

“Morbi mollis nunc non purus gravida varius id eget metus.”

Lorem ipsum P.J. 2014. február 28-án

Keresés: [___________]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus posuere vulputate sem vel ultrices. Etiam risus elit, tincidunt ac leo et, tincidunt imperdiet felis. Vestibulum consequat ornare lorem, sed sagittis urna molestie RSS feliratkozás: at.

RSS

STATIKUS OLDAL body rész

Aliquam vestibulum dictum tempor. Donec id lobortis lacus. Duis ultrices mollis eleifend. Fusce mi enim, ultricies sit amet felis sed, mollis porta odio. In aliquet magna nec nibh vehicula, posuere pellentesque nibh lacinia. Aliquam vestibulum dictum tempor. Donec id lobortis lacus. Duis ultrices mollis eleifend. Fusce mi enim, ultricies sit amet felis sed, mollis porta odio. In aliquet magna nec nibh vehicula, posuere pellentesque nibh lacinia.

36

© P. J. 2014

WEB “DIY” BÖLCSÉSZEKNEK

Próbáld ki:

http://walap.hu/html/tablazat_alapok.php

Az

előző példát összegezve. Ez egy négy sorból álló táblázat, öt oszloppal. A táblázat celláinak határát 1 pixel széles fekete vonal jelzi. A táblázat celláinak 3 pixel belső margója van. A cellák közt nincs rés. Az első sorban a cellák egyesítve vannak. Az első sor háttere lime. A második sorban megvan mind az öt cella. A második sor háttere sárga. A harmadik sorban az első négy cella van egyesítve, az ötödik cella megvan. A negyedik sorban mind az öt cellát egyesítettük. Ez, ha csak a táblázatot nézzük, így fest HTML-ben:

4 STATIKUS OLDAL body rész

A táblázat kezdetét és végét a jelzi. A sor (Table Row) jele a . A cella jele a .

37

WEB “DIY” BÖLCSÉSZEKNEK

A

html táblázatokban vízszintesen kell gondolkozni. Ha nagyon szigorúak vagyunk, azt mondhatnánk, hogy a html táblázatokban nincsenek oszlopok, csak sorok, és azokban cellák. Ezt ha megértjük, akkor semmi gondot nem fognak okozni ezek a bestiák.

4

Sajnos ennek ellenére fejben kell tartani az “oszlopok” számát, mert a cellák, amik az oszlopok illúzióját adják, nem csúszkálnak ide-oda attól függően, hogy mennyit tettünk be belőlük egy sorba. Ha az első sorban öt cellát írtunk, akkor azzal megadtuk, hogy a táblázatnak öt oszlopa van, és a továbbiakban ennek függvényében kell a cellákkal bűvészkedni, különben szétesik az egész. A példakódból az is látszik, hogy ahány sora és cellája van a táblázatnak, annyit kell leírni. Ha egy 24 soros, 1 oszlopos táblázatot szeretnénk, akkor a tagek közé 24-szer kell beírni, hogy

Cellát egyesíteni a COLSPAN=”” attribútummal tudunk. A használata végtelenül egyszerű, de van, hogy az ember belezavarodik, hogy most akkor hányat kell beírni az idézőjelek közé. Egy öt oszlopos táblázatban az első négy cellát szeretnénk egyesíteni, az ötödiket meghagyni, akkor

STATIKUS OLDAL body rész



38

WEB “DIY” BÖLCSÉSZEKNEK

Próbáld ki a cellák egyesítését: http://walap.hu/html/colspan.php

Sorok egyesítése:

http://walap.hu/html/rowspan.php

A

megértés ott dől el, hogy ezt magyarul is így fogalmazzuk meg magunk számára. Ötoszlopos táblázaton nézzünk példákat! Nem úgy fogalmazunk, hogy “Ezt a négy cellát egyesítem”, hanem hogy az első négyet.

4 STATIKUS OLDAL body rész

...vagy a második cellától számolva hármat



...vagy a negyedik cellától számolva kettőt (tehát nem így, hogy “a negyediket és az ötödiket”).



Sorokat összevonni ugyanilyen elvvel a rowspan=”” attribútummal tudunk.

39

WEB “DIY” BÖLCSÉSZEKNEK

Tovább

tudunk lépni az időben. A táblázatnál sokkal rugalmasabb építőelem a divízió, azaz . A dives szerkezet sokkal könnyebben bővíthető és átalakítható. Figyelembe véve a webdizájn trendek dinamikáját, már a honlap létrehozásakor gondolni kell arra, hogy 1 év múlva ismét hozzá fogunk nyúlni, és miért ne lehetne “nomádra” tervezni az egészet? Itt arra az elvre gondolok, hogy az oldalt három és fél összetevő adja: a tartalom, a szerkezet, a dizájn és a fontok. Ezeket minél függetlenebbül kell tudni módosítani

4

Ezt a három és fél tényezőt minél függetlenebbé kell tenni egymástól az építkezéskor, hogy zavartalanul, nagyobb felhajtás nélkül módosíthatók legyenek utólag. Szögek helyett használjunk csavarokat. Igaz, ezt nem szükséges hangsúlyozni, hiszen az elterjedt technikák ezt az elvet bőven kiszolgálják. Ezen a ponton viszont félbehagyom az oldalépítés rejtelmeit. A könyv elején utaltam rá, hogy azt az utat mutatom be, ahogy nekem sikerült felfognom ezt az egészet. Nagyjából ez a pont volt az, ahol a -től hosszú időre elbúcsúztam. Olyan oldalt kialakítani, amelyik jól is néz ki, nem megy bizonyos felfogásbéli átalakulás nélkül. Az oldalak, amiket pusztán -t használva létre tudunk hozni, csak akkor módosulnak, ha mi módosítjuk. Ezért hívják statikus oldalnak. Ez baromi sok fölösleges munkát igényel, ha az oldalunkat naprakészen akarjuk tartani, kereshetővé tenni a tartalmát, stb. Az történt, hogy az infós szobatársaimnak megmutattam a töris honlapomat, és csak annyit mondtak, hogy meg kéne tanulnom például a PHP nyelvet. És ezt még csak nem is a látványra mondták, hanem csak tekintettel arra, hogy kb. 2006-ot írtunk. Magamban tehát lezártam ezt a gyenge próbálkozást, és inkább a blogomra koncentráltam a blog.hu-n. Ezt fogjuk tenni a folytatásban.

STATIKUS OLDAL body rész

40

WEB “DIY” BÖLCSÉSZEKNEK

Hogyan csináljam?

1. Ennyi tudással még nem tudsz egy mai honlapot elkészíteni, de szövegek gondozásával már boldogulsz 2. Ha van blogod, vagy egy CMS weboldalad, próbáld a bejegyzéseidet átszerkeszteni a bejegyzésszerkesztő forráskód/html nézetében! 3. A további fejezetek kedvéért készíts vázlatokat, milyen honlapot szeretnél magadnak, és milyen funkciókat akarsz megvalósítani!

41

SABLON ÁTALAKÍTÁSA: CSS

WEB “DIY” BÖLCSÉSZEKNEK

Indítani

egy blogot pofon egyszerű, és egy filozofikusabb lélek számár minden igényt kielégít. Lehet választani 10-15 sablon közül, de nyilvánvalóan a több ezer blog társaságában ennél egyedibben szeretnénk megjelenni.

5

Jómagam annak idején két dologgal próbálkoztam: kicserélni a képet a fejlécben, és megváltoztatni az oldal színeit. Egy bordó tónusú unalmas sablonban láttam meg a lehetőséget. Nem tévedtem, a sablont évekig használtam nagy elégedettséggel. Érdekes felfedezés volt, hogy kép- és színcserékkel egy laikus számára felismerhetetlenségig át lehet változtatni a blogsablont. Így állunk: a stílusformázás a többihez képest nem egy bonyolult feladat, viszont ez a cukormáz a dobostortán, ez az, amit a felhasználók a legkönnyebben meg tudnak ítélni. Sőt, mint írtam, a felismerhetetlenségig át lehet alakítani egy oldalt csak stílus beállításokkal. Itt van két blog, aminek a sablonja ugyanazon a gyári sablonon alapul:

CSS

43

WEB “DIY” BÖLCSÉSZEKNEK

Stílusformázás a sorban:

http://walap.hu/css/style_helyszini.php

Stílusformázás a headben:

http://walap.hu/css/style_belso_stiluslap.php

A

CSS azaz a Cascade Style Sheet egy olyan fájltípus, ami az oldalak stílusszabályait gyűjti össze. Nagyon könnyű megszeretni, mert nem más, mint egy felsorolás. Azt gondolom, hogy ez lehetne egy olyan területe a webfejlesztésnek, amit a grafikusok és más esztéták kisajátítanak maguknak, mert így lenne hatékony. Egy webfejlesztő számára csupa olyan eldöntendő kérdést vet fel a CSS fájl megírása, amik iránt nem feltétlenül fogékony.

5

Egy CSS fájl tartalma szó szerint egy felsorolás. Megnevezi az elemeket, és az elemekhez tartozó stílusparancsokat. A legegyszerűbb, ha CSS kezdeteitől indulunk.

Ez egy nagyon rövid bekezdés.

Az előző fejezetben már megismerkedtünk a bekezdés jelölésével. Ha azt szeretnénk, hogy a bekezdés piros betűvel legyen, stílust szabályozunk. Hozzáadjuk a

taghez a style=” ” attribútumot, a

helyett ezt írjuk:

. A style=” ” macskakörmei közé pedig beírjuk a parancsot, hogy color: red. A stílusparancsokat pontosvesszővel zárjuk le.

Ez egy piros betűkkel írt nagyon rövid bekezdés.

Csakhogy általában rengeteg szabályt fogalmazunk meg, és ez nagyon átláthatatlanná teheti a kódot. Ezért megtehetjük azt, hogy az oldal elején összegyűjtjük a stílusparancsokat, és ez már kis híján a CSS. Az oldal részében nyitunk egy blokkot. Kézenfekvő, hogy ha átláthatóbbá akarjuk tenni a kódot azzal, hogy a stílusparancsokat egy helyre gyűjtjük, akkor viszont azonosítókat kell adni a szabályozott elemeknek. Ha egyetlen meghatározott bekezdést akarunk pirossá tenni, problémát fog jelenteni, hogy minden bekezdésnek

a jele, szóval kell valami fogódzó.

CSS azonosítók

Hányadán is állunk? Két és fél azonosítási módot használunk. A feledik, mikor például az oldalra vonatkozó összes bekezdés stílusát adjuk meg. A HTML elem jele után kapcsos zárójelben felsoroljuk a parancsokat, pontosvesszővel elválasztva egymástól.

44

p{text-align: left; color: black;}

WEB “DIY” BÖLCSÉSZEKNEK

Próbáld ki a class-t:

http://walap.hu/css/style_class.php

A másik két megoldás az igazi azonosítási mód. Az egyik az ID, a másik a CLASS. Ha minden elemnek a style=”” attribútumban adnánk meg a stílusát, nagyon áttekinthetetlen lenne a forráskód, és módosíthatóságról még nem is beszéltünk. Helyette célszerű a body-ban megadni egy azonosítót a formázandó elemnek. Fent, a stílus blokkban pedig leírjuk a parancsokat.

Próbáld ki az id-t:

http://walap.hu/css/style_id.php

Az egyik azonosítási lehetőség tehát a stílusosztály (class) használata. A class hivatkozása a stílus blokkban .-tal (ponttal) történik, tehát idezet class így: .idezet{}.

Idézet bárkitől.

Az idezet class .idezet{} formában hivatkozható, kint a body-ban pedig class=”idezet” formában helyezhető el.

5

Alapvetően ennyi volna. A class-t arra kéne használni, hogy általánosabb szabályokat írjunk le, és a classon alapuló apróbb módosításokat id-val tegyük hozzá. Például tegyük fel, hogy a tőlem származó idézeteket alázatosan szeretném kicsit megkülönböztetni a többi idézettől, ezért ezeknek adok egy ID-t. És #-tel hivatkozunk rá a stílus blokkban, mert ez nem class=””, hanem id=””:

Idézet tőlem. Kisebb, beljebb van.

CSS azonosítók

Eredmény:

45

Idézet tőlem. Kisebb, beljebb van.

Ha nem világos, hogy mi történt, a példák ismétlődésével össze fog állni a kép. Két dologra azonban kitérnék: az egyik, hogy az id-val már csak a módosulásokat adtam meg. A betűméretet felül kellett írnom a class-hoz képest, ezt ilyen esetben az !important kitétellel tehetem meg. A másik dolog pedig az, hogy a gyakorlatban az id-k és classok használata ízlés és logika kérdése. Nem szokás ennyire körülményesen csinálni, osztály-id hierarchiát kialakítani. De elvileg ezért van két azonosítási mód.

WEB “DIY” BÖLCSÉSZEKNEK

Próbáld ki:

http://walap.hu/css/style_kulso_stiluslap.php

Egy

olyan összetett oldal esetében, mint amilyen a blog.hu-s blogsablonok, a tagek között tennénk. Mindössze annyi, hogy nem .HTML-ként mentjük el, hanem .css-ként. Hallatlan előnye pedig csak most jön. Ha a stílusparancsokat egy CSS fájlba különítjük el, akkor a HTML oldal részében oda kell írnunk, hogy a megjelenésre vonatkozó parancsokat (a CSS fájlt) hol találják meg a böngészők. A link taggel adjuk meg a következő módon.





CSS azonosítók

Nyilvánvalóan a következő elkészítendő oldalnál is elég csak erre a fájlra hivatkozni. Készítünk például négy aloldalt idézetekkel, és mindegyikben a taggel hívjuk meg ugyanazt a stílusfájlt. Az előny értelem szerűen az, hogy ha változtatni akarunk a kinézeten, akkor a stílusparancsokat egyetlen helyen fogjuk megváltoztatni, de mindegyik oldalon meg fog változni, amelyik ezt a stílusfájlt használja.

46

WEB “DIY” BÖLCSÉSZEKNEK

A blog.hu-n a nehézséget az fogja jelenteni, hogy látjuk a sablont működés közben, látjuk, hogy mi nem tetszik rajta, tehát mit szeretnénk megváltoztatni, de mivel a CSS azonosítókat nem magunk osztottuk ki, ezért fogalmunk sem lesz, mit keressünk a CSS fájlban, mit módosítsunk. Ugyanez a helyzet a Wordpress és Joomla, stb. sablonokkal. Szerencsére az Opera, Firefox és Chrome böngészők meg tudják jeleníteni az oldal elemeinek információit. Tehát tegyük fel, a blogunkat nézve elégedetlenek leszünk a címek színével. Jobb klikk a címre a böngészőben, keressünk egy opciót, hogy elem megtekintése, vagy oldal információinak megtekintése, és egy új ablakrész nyílik, ahol a forráskód odavágó részét látjuk kiemelve, és a vonatkozó stílusparancsokat. Tehát látni fogjuk a CSS azonosítót, amit aztán megkereshetünk gyorsan a CSS fájlban.

5

Bevezetésképpen ennyit elég tudni a CSS-ről, a többit megtanítja nekünk az élet.

CSS azonosítók

47

WEB “DIY” BÖLCSÉSZEKNEK

Próbáld ki:

http://walap.hu/css/szinek.php

Válassz színt:

http://walap.hu/hasznos

Az

elemek színeit természetesen szabályozni tudjuk, ezért nézzük dióhéjban a lehetőségeket! A HTML-ben és CSS-ben három módon szokás a színt jelölni. Az egyik a szín angol neve. Red, blue, yellow, green, lime, pink, orange, stb. Ha árnyalatokra van szükségünk, akkor megadhatjuk hexa-kóddal, vagy RGB-kóddal.

5

A hexa-kód formátuma 6 karakter, az RGB formátuma 3-szor 3 számjegy, vesszővel elválasztva. Ha hexakódot használunk, akkor kettős keresztet teszünk elé, ha RGB-t, akkor zárójelbe tesszük a kódot, és a zárójel elé kiírjuk az RGB-t. A hexa-kód a magenta, ciánkék és sárga színekből #ffffff rgb (255, 255, 255) kever, az adott alapszín legkisebb értéke 0, legnagyobb értéke f. Az RGB(red, green, blue) #000000 rgb (0, 0, 0) a piros, zöld és kék színekből kever, legkisebb #ffff00 rgb (255, 255, 0) értéke 0, legnagyobb értéke 255. Néhány színt összeszedtem a táblázatban. #00ffff rgb (0, 255, 255) Mindegyik kódot tudjuk használni a CSS-ben, #ff00ff rgb (255, 0, 255) természetesen a hexa kedveltebb, mert egyszerűbb #00ff00 rgb (0, 255, 0) a formátuma. Az RGB-ben viszont csak számok vannak, ezért azt könnyebb megtanulni használni #ff0000 rgb (255, 0, 0) színkeveréshez. Ugyanakkor aligha van olyan ember, aki kódolással keveri ki a kívánt színt, #0000ff rgb (0, 0, 255) legjobb ha van egy képszerkesztő megnyitva, ahol a színkezelőben az árnyalatra rábökve megkapjuk az RGB- és hexa-kódokat is. Léteznek külön színválasztó alkalmazások, amik lényegesen kevésbé terhelik le a gépet, mint a Photoshop, de sok honlap is van, elég beírni a keresőbe, hogy “color picker”. A walap.hu-n is találsz ilyet a “hasznos” menüben.

CSS színek

48

WEB “DIY” BÖLCSÉSZEKNEK

Próbáld ki:

http://walap.hu/css/betuk.php

Válassz betűkészletet: http://walap.hu/hasznos

A

Wordből ismerhetünk négy alapvető tulajdonságot: a betűtípust (font-family), a betűméretet(fontsize), a betűszínt (color) és a szöveg igazítását (text-align).

5

A betűtípus (font-family) körül szokott lenni a legtöbb fejtörésem, és néha meglepő dolgok történnek, például észreveszem, hogy baromi nagy betűméret mellett a legalapvetőbb betűtípus, az Arial mennyire jól néz ki. De attól tartok a betűk (fontok) között nem tudok utat mutatni, a tipográfia egy külön tudomány, és aki igényes munkát akar létrehozni, az mindenképpen képezze magát ezen a területen. De van itt olyan dolog, ami elég nagy akadály bármilyen szinten is legyen az ember. Emlékezzünk: egy oldal megjelenése a böngészőben történik. Valahányszor megnyitod a honlapodat, a te gépeden telepített böngésző átveszi a szervertől a kódot, értelmezi, és végül előállítja. Minden egyes alkalommal újra elkészíti. Nyilván abból tudja előállítani, ami van, és azt, amit ért. A közös nevezőt kell keresni: olyan betűtípusokat, amik feltehetőleg a legtöbb számítógépre automatikusan telepítésre kerültek. Ezek száma korlátozott. Érdemes rákeresni úgynevezett web-safe fontokra, például így: “top 10 web-safe fonts”. Hozzá kell tennem, hogy van lehetőség elérni, hogy egy ritka betűtípussal jelenjen meg az oldal, függetlenül a telepített fontoktól, de ez túlmegy a könyv keretein. (A neten a font-face CSS beállításra kell rákeresni)

CSS betűk

A betűméretet (font-size) pixelben érdemes megadni. Ha reszponzív (százalékban megadott szélességűmagasságú) oldalt készítünk, figyelembe kell venni, hogy a pixel egy abszolút érték, és sajnos a betűket relatív méretűvé (például %-ban megadva) nem lehet tenni. A betűszín (color) értékét megadhatjuk RGB vagy hexa kódolásban is, vagy HSV-ben.

49

A szöveg igazítása (text-align) történhet jobbra (right), balra (left), középre (center) és lehet sorkizárt (justify).

WEB “DIY” BÖLCSÉSZEKNEK

Próbáld ki:

http://walap.hu/css/link.php

Vannak dolgok, amiket ha nem szabályozunk, a böngészők a maguk szabványai szerint fogják megjeleníteni. Ilyenek a betűk, címsorok, és sok más mellett a linkek is. A linkekkel kapcsolatban három állapotot szoktak szabályozni. Az egyik az alapállapot, a másik a már meglátogatott link (visited), a harmadik pedig az, mikor az egeret fölé visszük (hover).

Hover:

http://walap.hu/css/hover.php

Az előző fejezetben láthattuk, hogy a linkek html jele anchor/horgony. Ha ezt a CSS-ben szabályozni szeretnénk, akkor pont, vagy kettős kereszt nélkül pőrén a-ként hivatkozunk rá. a{color: red;}

5

Ezen felül sok weboldalnál látjuk, hogy a linkek nincsenek aláhúzva, mert általában egy blogposztba csak a korrektség kedvéért teszünk linket, alapvetően a saját mondandónkat szeretnénk aláhúzni. Alapértelmezetten viszont aláhúzottak (underline) a linkek, tehát ezt külön meg kell szüntetnünk. Text-decoration paranccsal hozzuk létre: {text-decoration: underline;}

tehát text-decoration paranccsal szüntetjük meg: {text-decoration: none;}

A meglátogatott link esetében ugyanúgy az elemeket kell szabályozni, azoknak egy másik állapotát, és erre van egy külön formula. a:visited{}

CSS linkek

Azt, hogy ha mondjuk a kurzort fölé húzva fekete betűket szeretnénk, a hover paranccsal tudjuk megadni. a:hover{color: black;}

50

A :hover parancs egyébként más elemeknél is alkalmazható, függetlenül attól, hogy linkek-e, ezt jó észben tartani, mert néhány JavaScripttel kevesebbre szorulunk rá, ha ezt az egyszerű módosítót használjuk. Például van egy divünk, és megtehetjük, hogy pirosra változtatjuk a színét, ha átfut fölötte a kurzor. #fontos:hover{background: red;}

WEB “DIY” BÖLCSÉSZEKNEK

A

kép talán az egyetlen, amire azt mondom, egyszerűbb wysywig szerkesztőben kezelni, mint notepadban. Hiszen egy wysywig szerkesztőben előhívható a párbeszédablak, amiben kitöltjük a szükséges beállításokat, notepadban viszont sokat kell pötyögni, utánanézni dolgoknak. Mivel a HTML áttekintésekor a képekről nem írtam semmit, a HTML részt is itt mutatom be röviden.

5

A kép HTML tagje . Ez a ,
, stb. tagekhez hasonlóan páratlan tag, tehát nem kell külön lezárni. A kép beillesztésének az elve az, hogy feltöltjük egy nyilvános tárhelyre (a tárhelyünkre), ezáltal elérhető lesz, tehát lesz útvonala, amivel rátalálhatnak a böngészők. Szorosan véve a képek csak meghívott résztvevői az oldalnak. A lényeg az, hogy az tagnek legalább egy attribútumot, a kép elérési útját meg kell adnunk. Ez a src=”” paranccsal lehetséges. Két lehetőségünk van, ha elérési utat akarunk megadni. Az egyik az abszolút elérési út (abszolút URL), a másik a relatív elérési út (relatív URL). Abszolút elérési út például a parancs. Relatív elérési út pedig az éppen szóban forgó oldalunkhoz képest fennálló pozíció. A képen látható könyvtár szerkezetet képzeljük el. Ez esetben a skin könyvtárba tettem a logót. Ha a címlapon (index.html) hivatkozni fogok rá, relatív útvonalként elég ennyit megadnom:

CSS képek, elérési út

51

Ami értelem szerűen azt jelenti, hogy a skin mappában a logo.png fájlt jelenítse meg. Az index.html gyökér mappában van, hozzá képest egy könyvtárral beljebb van a logó. / jellel jelöljük egy könyvtár végét. A könyvtáraknak nem érdemes ékezetes neveket adni, a biztonság kedvéért. Ebből megérthetjük, hogy az URL egyúttal a könyvtárszerkezetről is tanúskodik, hogy az adott oldal hogyan rendszerezi a tartalmát.

WEB “DIY” BÖLCSÉSZEKNEK

Ami

ennél sokkal fontosabb, hogy a relatív hivatkozás esetén hogyan oldjuk meg azt, ha nem a gyökérkönyvtárban hívunk egy képet. Például a cikkek könyvtárban van egy írásunk, amiben a logo. png képünket külön be akarjuk tenni a szövegünkbe, mert arról írunk, hogy milyen jó lett.

5

A cikkünk a gyökér/cikkek/ könyvtárban van. Ez esetben magyarul megfogalmazva ezt kell mondanunk a böngészőnek: lépj kijjebb egy szinttel, és lépj be a gyökér/skin/ könyvtárba! A lépj vissza egyet így jelöljük: ../ a lépj vissza kettőt így: ../../ ennél komplikáltabb esetben már szerencsésebb a gyökérhez képest megadni az utat. Az úgy történik, hogy per jelet teszünk a relatív elérési út elé, és leírjuk az elérést a gyökérből nézve. Tehát a kép elérési útja a cikkből nézve így néz ki (egy könyvtárral kijjebb kell lépnünk):

A gyökérhez képest megadva pedig így:

CSS képek, elérési út

Mikor egy képet feltöltünk, ha nem tartalomkezelővel dolgozunk (blog.hu, Joomla, Wordpress, stb.), akkor saját magunk végezzük el a műveletet. Például Total Commanderrel, vagy File Zillával elhelyezzük a tárhelyen a fájlokat. A kép elnevezéskor nagyon praktikus beszédes neveket adni, például magyarorszag_ivovizhalozatanak_alakulasa_1600_es_2014_kozott_jarasokra_bontva.jpg Programozás szempontjából ez fájdalmasan hosszú, de keresőoptimalizálás szempontjából hatékony.

52

WEB “DIY” BÖLCSÉSZEKNEK

Másik

dolog, hogy a képünket előzetesen ugye már optimalizáltuk webre, tehát egy pixellel sem nagyobb a kelleténél, de ha jól megfontolt okokból a kép nagyobb felbontású, mint amekkora felbontásban meg szeretnénk jeleníteni (például a térkép 1000 pixel széles, de a cikk csak 700 pixel széles), akkor lehetőségünk van a kép kívánt méretét megadnunk.

5

Két módon is jelölhetjük: width=”” és height=”” azaz szélesség és magasság attribútumok megadásával. Mértékegységet nem kell írni utánuk, mert ezek pixelben értendők kizárólag.

vagy mehet a style=”” attribútumba, ez esetben meg kell adni a mértékegységet.

Style attribútumba tenni sokkal praktikusabb, mert itt pixelen kívül százalékban is megadhatjuk a méretet. A width angol szó szélességet jelent, a height magasságot.

CSS képek, szélesség

Az kellemetlen, mikor tudjuk, hogy az egyébként 1000px széles képünket 700px szélesre szeretnénk, de fogalmunk sincs, hogy akkor a magasságot mekkorára kell írnunk. Ilyenkor diplomatikusan csak a szélességről ejtünk szót a böngészőnek, és ő majd kimatekozza magának a magasságot. Pár évvel ezelőtt még voltak böngészők, amik ilyen esetben a megadott szélességgel, viszont az eredeti magassággal dolgoztak.

53

WEB “DIY” BÖLCSÉSZEKNEK

Érdemes

reszponzív módon megadni a szélességet, tehát azt mondani, hogy akármekkora lehet eredetileg a kép, a lényeg, hogy ne lógjon túl, vagy ne lötyögjön a divízióban, amibe raktuk. Legyen teljesen akkora, amekkora helye neki van.

5

Fontos, hogy ne dőljünk be: itt nem azt adjuk meg, hogy a kép 100%-os teljességében jelenjen meg, hanem hogy a rendelkezésre álló hely 100%-át használja fel. Mivel a -ekről még nem ejtettem bővebben szót, csak a táblázatokról, nézzünk azon egy példát! Készítsünk egy 800 pixel széles, egysoros, kétcellás táblázatot. Az első cella 200 pixel, a második 600. Ha ebbe minden formázás nélkül tennénk be a képet, akkor széttolná a táblázatot 1200 pixelre (mert 1000 pixelre feszíti maga miatt a saját cellája szélességét, meg ott van még alapból az első cella 200 pixellel). Két dolgot tehetünk. Az egyik, hogy megadjuk, 600 pixel szélesnek kell lennie a képnek, mert nincs több hely neki. A másik, hogy megadjuk, a szélessége legyen 100%, és akkor automatikusan 600px széles lesz, mert a rendelkezésre álló hely 100%-a ennyi.

CSS képek, szélesség

54

A százalékos, reszponzív méretezésnek az a hallatlan előnye, hogy ha később stílust váltunk, és 1000px széles blogposztokban utazunk, akkor a régi blogbejegyzéseinkben nem kell egyenként átalakítanunk a képek szélességét ekkorára.

WEB “DIY” BÖLCSÉSZEKNEK

Próbáld ki:

http://walap.hu/css/kep_width.php

A

CSS lehetősége persze ez esetben is adott. Mint minden HTML tagre, a kép tagre is tudunk parancsot írni CSS-ben.

5

Ahogyan például a

bekezdést

p{}-ként szabályozzuk, ugyanúgy a szabályozhatjuk általánosan img{ } jelöléssel. Például azt mondjuk, minden kép legyen 100%, akkor a CSS fájlunkba ezt írjuk: img{width: 100%;}

és bumm! Ilyen nagy volumenű döntést persze nem árt körültekintően kezelni, és a “legszűkebb érintettség” elvét követni. Tehát mikor azon sopánkodunk, hogy a cikkekben nem teljes szélességűek a képek, akkor csak a cikkek képeire írjunk szabályt, mert nem tudhatjuk, ha a honlap összes képének megengedjük, hogy töltsék ki a rendelkezésre álló tér 100%-át, hol okoz majd ez gondot. Az egyszerűbb megoldást most még nem mutatom, mert ott még nem tartunk, de a másikat már ki lehetett találni: kialakítunk egy osztályt, mondjuk az

CSS képek, szélesség

és a CSS fájlban így írjuk: .cikk-kep{width: 100%;}

vagy még konkrétabban is fogalmazhatunk: a KÉP, aminek cikk-kep az osztálya. img.cikk-kep{width: 100%;}

55

WEB “DIY” BÖLCSÉSZEKNEK

Egy

blogbejegyzésben nagyon kapóra jön, ha a képnek van margója, és nem tapad a szövegre. A margóadás rejtelmeinek még óriási hasznát fogjuk venni. A margó az elemünk privát szféráját szabályozza, tehát azt, hogy mi az a minimum távolság, aminek meg kell lennie.

5

Rögtön a leglényegtelenebb problémát idecibálva: megadjuk, hogy a kép jobb oldalán 5 pixel margó legyen, viszont a “fal”, a cikk “oldalfala” és a kép között szerkezeti okokból (ebben a példában) 60 pixel távolság van. Ez esetben sem kell félni attól, hogy a kép komolyan veszi az 5 pixeles parancsunkat, és odaszívódik az oldalfalhoz, csak hogy igaz legyen, hogy a margó 5 pixel. A margó az csak egy szabály, hogy “ennél közelebb nem jöhettek”. A margót megadhatjuk egyenként, margó-fönt, margó-jobbra, margó-lent, margó-balra. De megadhatjuk egyben is, föntről kezdve, óramutató járásával haladva: img{margin: 10px 0px 10px 5px;}, és csak a végén teszünk pontosvesszőt.

CSS képek, margók

img{ margin-top: 10px; margin-right: 0px; margin-bottom. 10Px; margin-left: 5px; }

Ezt is lehet még rövidebbé tenni: img{ margin: 10px 5px; }

56

Az első érték a “fönt és lent”, vagyis vertikális margó, a második érték a horizontális margó. Ez esetben mindkét oldalon 5 pixelt állítottam be, nyilván, ha nem szimmetrikus margót akarunk, akkor ezt a rövid változatot nem tudjuk használni. A középre igazításnál viszont még lesz szerepe, úgyhogy jól véssük észbe!

WEB “DIY” BÖLCSÉSZEKNEK

Próbáld ki:

http://walap.hu/css/kep.php

Mi

van abban az esetben, ha a hagyományos elrendezést követve kis képeket szeretnénk elhelyezni a szövegben, nem 100% szélességben? Alapértelmezetten ilyenkor a kép a szöveg sor részét fogja képezni, és nem fogja körbefutni a szöveg. A mi szemünkben ez úgy fogalmazódik meg, hogy “de hát van mellette hely!”, azonban a böngészőknek nincs szemük, úgyhogy ebből nem értenek. Ezért meg kell adnunk, hogy merre igazodjon, ez pedig a rajongva szeretett, és elképesztően nélkülözhetetlen FLOAT parancs.

5

Értéke lehet “jobbra” és “balra”, csak angolul. Right és Left. Tehát a szimpatikus képünket így fogjuk formázni, hogy a szöveg körbefussa jobbról ízlésesen:

A float lebegést jelent, olyan, mintha azt mondanánk: csússzál balra kép, és húzd meg magad! Ha se nem jobbra, se nem balra nem szeretnénk igazítani, hanem középre, akkor a margók megadásával tudjuk ezt megmondani. Lássuk be: ha egy kép középre kerül, honnan tudhatná a böngésző, hogy hol a közép? Ezért a margókkal adjuk ezt meg. A közép az, amikor jobbról is és balról is ugyanakkora távolságot tart az oldalfalaktól. Néha kénytelenek vagyunk ezt magunk kimatekozni (konténer szélessége mínusz kép szélessége osztva két felé: a jobb és a bal margónak, de a leggyakoribb esetekben megadhatunk egy automata értéket: auto.

CSS képek, körbefuttatás

img{margin: 0 auto;}

Tehát vertikálisan 0 legyen a margó, horizontálisan automatikusan számolja ki a kép szélessége és a rendelkezésre álló hely alapján. A szélesség, reszponzivitás, margók és jobbra-balra zárást átnézve már csak egy dolog maradt: a kép, mint link.

57

WEB “DIY” BÖLCSÉSZEKNEK

Ha

szeretnénk, hogy a blogunk fejlécében lévő logónkra kattintva bejöjjön a főoldal, lényegében azt akarjuk, hogy a kép legyen egy link. És ugyanúgy közrefogjuk az anchor taggel, mint egy szövegrészt.

5

Fontos, hogy a link egy hiperhivatkozásra (Hyper reference = href), ezzel szemben az tag egy elérési útra (source = src) vár, tehát ne tévesszen meg minket, hogy mindkét helyre egy-egy URL-t tettünk, a funkciója teljesen más a kettőnek. Ezzel meg is volnánk, de fel szeretném hívni a figyelmet arra, hogy Internet Explorerben a hivatkozásként jelen lévő képek kapnak egy kb. 3 pixel vastag királykék keretet (border: 3px solid blue;), amit nekünk külön el kell távolítanunk. Magyarul a CSS fájlunkba írunk egy általános szabályt, hogy a képeknek ne legyen kerete.

CSS képek, linkként

img{border: none;} Elég ritkán, de megtörténhet, hogy egy képnek mégis adnánk keretet. A border parancsot használjuk. Több paramétert is meg kell adnunk. Egyrészt, hogy milyen vastag legyen a keret. Másrészt, hogy milyen mintájú legyen. Többek közt lehet pöttyös (dotted), négyzetes (dashed) és folytonos (solid). Végül pedig, hogy milyen színű legyen.

58

WEB “DIY” BÖLCSÉSZEKNEK

Próbáld ki:

http://walap.hu/css/div_egyoszlopos.php

Kétoszlopos megoldás:

http://walap.hu/css/div_ketoszlopos.php

A

-ek használatát is ezen a ponton nézzük bővebben. Ezek konténerek, amik közrefogják a tartalmat, és ezáltal az egyes tartalmi összetevőket könnyebben tudjuk szabályozni. A -ekkel való ismerkedés első lépéseként megpróbálunk felépíteni egy nagyon egyszerű oldalt.

5

Szeretnénk, hogy legyen egy szövegtörzs, ami az oldal közepére van igazítva, és nagyjából a tér 80-90%át foglalja el. Tehát egyetlen -et hozunk létre, amit auto marginnal középre igazítunk.

Ez eddig látványosan egyszerű, és sok mindent meg lehet érteni belőle. De most próbáljunk egy oldalsávot készíteni a jobb oldalra, amiben elhelyezzük a mottónkat. A szöveg ezúttal is a terület 80%án legyen, de a maradék 20%-ot most az oldalsáv töltse ki. Ehhez két -re lesz szükségünk. A síkban elrendezés balról jobbra, föntről levele történik a böngészőben, a forráskódban leírt sorrend szerint. Tehát először le kell írnunk a bal oldali elemet, és utána jöhet az oldalsáv.

CSS divek

Ahhoz, hogy jobban lássuk, mi hova került, érdemes az építés idejére különböző alapszínekkel megfesteni a div-ek hátterét (pl. background: lime). Amíg nem állítjuk be a div igazítását (float), addig alapértelmezetten sorkizárt lesz, tehát a konténerek egymás alá kerülnek. A helyes kód:

59

WEB “DIY” BÖLCSÉSZEKNEK

Próbáld ki:

http://walap.hu/css/div_ketoszlopos_bg.php

A

divek magassága a tartalomtól függ, kivéve, ha megadunk egy fix értéket. A fix értéket dinamikus tartalom esetén körültekintően kell alkalmazni. A divek magasságának rugalmassága jól jön általában. Például változó hosszúságú blogbejegyzések esetén is rögtön a bejegyzés végén jön a következő elem, például egy komment box.

5

Ez a rugalmasság viszont néha probléma, mert kitalálhatjuk, hogy a bal oldali hasáb színe krém legyen, a jobb oldalié pedig világosbarna, de a hasábok magassága eltérő. A div csak addig tart, ameddig a szöveg, mi viszont ezt egy oszlopként képzelnénk el. Ilyenkor egész egyszerűen azt a trükköt kell alkalmazni, hogy a mögöttes tároló háttérszínét álltjuk be. A mi kódunk nagyon egyszerű, ezért látszólag nincs mögöttes tároló: bal hasáb jobb hasáb

valójában viszont így fest a dolog:

dolgok bal hasáb jobb hasáb

CSS divek azonos magassággal

És természetesen a body részt tudjuk formázni, tudunk adni háttérszínt. Ugyanakkor jobb, ha a body-t nem piszkáljuk, mert body része minden oldalunknak lesz, és nem biztos, hogy minden oldalunknak ugyanolyan body beállításokra lesz szüksége. Létrehozhatunk ezért egy külön divet, amibe beágyazzuk a meglévő kettőt, és ennek adunk világosbarna háttérszínt.

60

WEB “DIY” BÖLCSÉSZEKNEK

Próbáld ki:

http://walap.hu/css/div_osszetett.php

Haladjunk

az összetettebb kialakítás felé! Készítsünk egy szerkezetet, amiben van fejléc, törzs és lábléc. A törzs pedig két hasábból álljon.

Lábléc

Sajnos különböző okok miatt megtörténhet, hogy szétesik a szerkezet (ezért is rászorulunk néha a táblázatos kialakításra: statikus, rugalmatlan elrendezésre továbbra is az lesz a legjobb), ezért ennél bonyolultabban kell megírnunk a kódot. Az egyik, amit tehetünk a kívánt megjelenésért, amit a háttérszín-problémánál is tettünk. Beágyazzuk az egymás mellett álló hasábokat egy tároló hasábba, így az oldal többi részéhez képest ezek a hasábok egységesen fognak ugrálni. A példában ezt törzs id-val jeleztem. Néha a float parancs arra ösztönzi a böngészőt, hogy amit csak tud, egymás mellé pakoljon be, ezért a clear parancshoz kell nyúlnunk. Egy szélesség és magasság nélküli divet szúrunk be a hasábjaink alá, aminek egyetlen stílust adunk meg, clear: both.

CSS divek összetett alkalmazása

Lábléc

WEB “DIY” BÖLCSÉSZEKNEK

Nem

nyilvánvaló még, de a -ek helyett érdemesebb a HTML5 nyújtotta új strukturális elemeket használni a honlapunk kialakításakor. A fejlesztők állítása szerint az új strukturális elemek azért jók, mert áttekinthetőbbé teszik számunkra a kódunkat, de van ebben más potenciál is.

5

A lényege az újításnak, hogy a rengeteg helyett, aminek általában úgyis ugyanazokat az azonosítókat fogjuk adni (a menüt tartalmazó divnek id=”menu”, a láblécet tartalmazónak id=”footer”, stb.), eleve ilyen nevű konténereket rendszeresítettek. – ez éppen annyit jelent, mint a , csak mi könnyebben kiigazodhatunk a rendszeren. Kimazsoláztam néhány praktikus strukturális elemet, ami -ként használható:





CSS html5 struktruális elemek

Láttam már néhány olyan próbálkozást, ami azt célozta, hogy a keresőbotok számára értelmezhetőbb legyen, hogy hol van a tényleges tartalom. Ha a blogposztunk kódjának csak 50%-át teszi ki a cikk maga, akkor a keresőbotoknak nem teljesen egyértelmű, hogy mi vagyunk a keresésre a legjobb találat. Ellenben ha a cikket az konténerbe tesszük, az irreleváns banner hirdetéseket pedig egy konténerbe, akkor ez utóbbi a linkprofilunk színvonalára lesz jótékony hatással, az első pedig a kulcsszó optimalizálásnál is erősebb eszköz.

62

Ezeket a strukturális elemeket használva a -ek helyett (persze fölösleges száműzni a diveket), nem csupán számunkra lesz átláthatóbb a kódunk, hanem ezzel végre pofon egyszerűen elvégezhető az adatok strukturálása. Strukturált adatok = keresőbarát oldal. Ha pedig pofon egyszerűen elvégezhető (ellenpélda: http://schema.org/ ), akkor átmegy a gyakorlatba, ha pedig átmegy a gyakorlatba, akkor előbb-utóbb elvárás lesz, ha pedig elvárás lesz, akkor miért ne állnánk át már ma?

WEB “DIY” BÖLCSÉSZEKNEK

Próbáld ki:

http://walap.hu/css/overflow.php

Ha

egy divnek mégis adunk fix magasságot, akkor gondoskodnunk kell, mi legyen azzal a tartalommal, ami túlmegy a határain. Ilyen például a Facebook stream box, amit néhány oldalon meg tudunk figyelni.

5

Itt, mivel nyilván fontos a túlfolyó tartalom (overflow), ezért megoldották, hogy görgethető (scroll) legyen. A parancs: overflow:scroll. Ha van egy oldalsávja a blogsablonnak, nyilván nem jó, ha kilométer hosszan ott terjeng a Facebook stream, tehát van a konténernek egy fix magassága, és egész egyszerűen azon belül terjeng kilométer hosszan.

A görgethetőséget/scrollozhatóságot szabályozhatjuk külön a vízszintes (x tengely) és a függőleges tengelyre is. Például egy csak vízszintesen görgethető tartalom ilyen:

CSS túlfutó tartalom



Az overflow értéke auto is lehet, ez esetben csak akkor teszi ki a görgetősávot, ha van túlfutó tartalom.

63

Van, hogy nem lényeges, mi van még, vagy egyszerűen nincs más megoldás, mint ignorálni a kereten túlmenő tartalmat, erre az esetre az overflow lehet rejtett (hidden). Overflow: hidden.

WEB “DIY” BÖLCSÉSZEKNEK

Próbáld ki:

http://walap.hu/css/display.php

Ha a div nem veszi fel a tartalma méretét

5

A display: table; parancs olyan esetben lehet segítségünkre, mikor többszörös beágyazást írunk egy szerkezetre, például három hasábot beteszünk egy jobb oldali hasábba, ami mellett van egy baloldali, és a jobb, meg a bal hasábot összefogja egy fő konténer. A fő konténernek van egy háttere, és sajnos nem minden esetben veszi fel egy ilyen konténer a beágyazott konténerek magasságát, azaz: nem jelenik meg a háttér a kívánt terjedelemben. A display: table; arra kényszeríti a divet, hogy úgy viselkedjen, mint egy táblázat, azaz, vegye fel a tartalma méretét. Beágyazásoknál merülhet fel, hogy ez nem eleve így történik, és olyankor jó tudni erről a parancsról. A display: table sem tökéletes, érdemes egy újabb megoldást használni: display: flex

CSS div nem veszi fel a tartalma méretét 64

WEB “DIY” BÖLCSÉSZEKNEK

Fontos

, hogy legalább alapszinten foglalkozzunk a mobil-optimalizálással, és akkor lehet szükségünk a display: none; parancsra. Például nem akarjuk a mobilokat leterhelni egy facebook streammel, ezért a stílusfájlban megadjuk, hogy mobil eszköz esetén a facebook konténer ne jelenjen meg.

5

Magára a facebook streamre nem tudunk hivatkozni, de csinálhatunk neki egy divet, például id=”facebook-stream” jelöléssel, és a stílusfájlban megadhatjuk: @media screen and (max-width: 480px) { #facebook-stream{display: none;} }

Ha már itt tartunk, a mobil optimalizálás ennyi: végiggondoljuk, hogy az oldal összetevői kisebb képernyőkön hogyan jelenjenek meg – pl. szélesebben, egymás alatt, vagy egyáltalán ne, stb. @media – azt jelenti, hogy “ha a felület...” screen and (max-width: 480px) – azt jelenti, hogy “...képernyő és nem szélesebb 480px-nél”. Kapcsos zárójelben soroljuk fel a módosításokat. Általában négy méretet szoktak beállítani:

CSS mobilra optimalizálás

-320px alatt (első generációs okostelefonok)

@media screen and (max-width: 320px) {}

-iPhone-szerű méretek:

@media screen and (max-width: 480px) {}

-Tablet:

@media screen and (max-width: 768px) {}

-Régi monitorok:

@media screen and (max-width: 900px) {}

65

A nem szabályozott elemekre pedig az elsődleges CSS beállítások vonatkoznak. Az @media {} parancsot ugyanabba a stílusfájlba írhatjuk, mint amiben az alapértelmezett stílus van leírva.

WEB “DIY” BÖLCSÉSZEKNEK

Az

áttetszőségnek (opacity) nincs mértékegysége, 1 a nem áttetsző, 0 az átlátszó, 0,5 a félig átlátszó, tehát közepesen áttetsző. Egy konténer háttere lime, de szeretnénk, ha az egész oldal hátterét adó hatalmas bagoly átsejlene rajta, akkor beállítjuk a konténer stílusának ezt: opacity: 0.6; Fontos, hogy nem vesszőt, hanem pontot írunk a tizedesvessző helyére, mert az angol nyelvterületen így szokás.

5

Az opacity hátulütője, hogy nem a háttérre vonatkozik, hanem a konténerre, azaz, a konténer minden része, a benne lévő szöveg, a benne lévő további konténerek is áttetszők lesznek tőle, és általában nem ez az, amit szeretnénk. Ha áttetsző háttérre van szükségünk, akkor készítünk egy áttetsző GIF vagy PNG csempét. A képszerkesztőben nyitunk egy kb. 40×40 pixeles, átlátszó (transparent) hátterű (background) képet, és befestjük. Festéskor/kitöltéskor be lehet állítani az opacity-t, és ezt ne is mulasszuk el. A PNG és GIF formátumok is támogatják az átlátszóságot és áttetszőséget, ezért ezek valamelyikébe mentsük a csempénket. A mi példánkban ez lime.png lesz. Az alábbi eredményt szeretnénk kapni:(tekintsünk el az esztétikum hiányától, és fókuszáljunk a feladatra.):

CSS áttetsző háttér

66

WEB “DIY” BÖLCSÉSZEKNEK

Próbáld ki:

http://walap.hu/css/background.php

Szükségünk

van egy divre, amiben a menüt helyezzük el, szükségünk van 2 divre, aminek áttetsző csempe hátteret adunk, egy oldalsáv divre, és egy lábléc divre. Ezen kívül szükségünk van arra, hogy az oldal hátterében egy bagoly látszódjon. Kezdjük a bagollyal! A fájl neve bagoly.jpg, a kép mérete pedig 1440×900 pixel. Mivel az egész oldal mögé akarjuk ezt, ezért a body-ban fogjuk megírni. Háttérről van szó, tehát a parancs, amihez nyúlunk, az továbbra is a background lesz, de nem színt, hanem fájlt fogunk megadni.

body{background: url(‘bagoly.jpg’) no-repeat;}

5

A háttérhez megadtuk, hogy egy fájl elérési útja következik: url(), megadtuk a fájl elérési útját: ‘bagoly.jpg’, tehát az oldalunk és a képfájl egyazon mappában van, nem kellett könyvtárakat lépkedni. Idézőjel nélkül is működik általában az elérési út, de van, hogy nem, úgyhogy nem árt az alaposság, írjuk idézőjelbe mindig. Végül pedig megadtuk, hogy ne ismételje a képet: no-repeat A csempézésnek a nyitja itt lesz: kifejezetten ismételni szeretnénk a háttérképet, és ehhez nem kell megadni semmit, mert ez az alapértelmezett. Ha csak vízszintes ismétlődést szeretnénk, a parancs így néz ki: background: url(‘lime.png’) repeat-x;

Ha csak függőleges ismétlődést szeretnénk:

CSS áttetsző háttér

background: url(‘lime.png’) repeat-y;

Ha mindkét tengelyen ismétlődés szeretnénk, nem kell kiírnunk semmit, ez az alapértelmezett. A background-size: érték; beállítással a háttérkép kiterjedését is módosítani tudjuk. Ha azt írjuk, background-size: cover, akkor a háttérképet a divízió szélességéhez igazítja. Ha pixeles, vagy százalékos értéket írunk oda, akkor azt fogja betartani. Ezzel viszont nem árt körültekintőnek lennünk, mert böngészőnként ezt-azt másként kell megfogalmazni. Nem árt tudni, hogy ilyen is van.

67

Ennyi tudással már át tudjuk alakítani a blog.hu/wordpress/joomla sablonunkat. De az igazi programozás része csak most következik. Egyszerű lesz: azt kell csak tudnunk, mit hogyan “mondunk” a programozási nyelven, és miben gondolkodhatunk, mit lehet megoldani, mit nem (az adott szintünkön).

WEB “DIY” BÖLCSÉSZEKNEK

Hogyan csináljam?

1. Ha egy meglévő honlapon szeretnénk változtatni, a böngészőben jobb klikkel hívjuk elő a lehetőségeket, és válasszuk az “elem vizsgálata” vagy hasonló lehetőséget. Bogarásszuk végig a megjelenő információkat, és meg fogjuk találni, hogy melyik CSS fájl hányadik sorában szabályozták az elemet, milyen CSS azonosítóval. Mi pedig így már könnyen átírhatjuk. 2. Ha saját oldalunkat készítjük, belátásunk szerint írunk azonosítókat az elemeknek. Az oldal head részében -el hivatkozunk a CSS fájlra. 3. Koncentrikusan bővítsük az oldalt: először a fő szerkezeti elemeket hozzuk létre, nyers háttérszínekkel, és ha ezeket beigazítottuk, jöhetnek az apró elemek. 4. Nagyon fontos, hogy legyen tervünk, hogyan akarjuk az oldalt, és akkor rá tudunk keresni a neten, hogy ezt vagy azt CSS-ben hogyan lehet megoldani.

68

DINAMIKUS OLDAL

WEB “DIY” BÖLCSÉSZEKNEK

Ebben

a fejezetben nem lesz lehetőség a tanult kódokat a könyvhöz tartozó oldalon kipróbálni. Ha felmegyünk az oldalra, a PHP menüpont alatt megtaláljuk azokat a példakódokat, amik itt a könyvben is szerepelnek, de a hatásukat nem tudjuk ellenőrizni. Ahhoz, hogy kipróbálhassuk, elkerülhetetlen lesz gondoskodni a fejlesztői környezetről, amiről a könyv elején volt szó. A kódokat továbbra is írhatjuk Notepadben, de a kiterjesztés ezentúl .php kell, hogy legyen.

6

Dinamikus oldal alatt azt értjük, hogy automatizált tartalommegjelenítés van rajta. A dinamikus oldalak kulcsa, hogy HTML-ben csak az oldal szerkezetét készítjük el, és a tényleges tartalmat más módon jelenítjük meg. Itt jön a PHP nyelv. HTML-ben nincs lehetőségünk feltételes feladatokat írni, mint például: ha kommentet ír az olvasó a poszt aljára, akkor jelenítse meg. HTML-lel kialakítjuk a komment helyét, kialakítjuk a kommentbox kinézetét, de nincs eszközünk arra, hogy a beviteli mezőbe írt hozzászólást az oldal állandó részévé tegyük.A PHP viszont alkalmas erre, persze van rajta kívül más is, például az ASPX, de az ASPX előnyei magasabb tapasztalat- és tudásszint mellett jönnek elő.

DINAMIKUS OLDAL alapfogalmak

70

Mivel mi elsősorban egy saját blogmotort szeretnénk készíteni, ezért a mi esetünkben mindent megelőz az adatbázis-kezelés. Ugyanis a blogbejegyzéseinket adatbázisban kell tárolni. Ezt nagyjából úgy lehet elképzelni, mintha Excelben tárolnánk az írásokat. És ha szükség van onnan valamire, akkor megadhatnánk, hogy például a 2. sor D oszlopából szedje elő a tartalmat. Mielőtt azonban ezen végigmennénk, a PHP-vel kapcsolatban tisztázni kell azt, hogy kétféle programozási stílusban alkalmazhatjuk. Az egyik programozási fajta, mikor az oldal tartalmi összetevőit föntről lefelé haladva lépésről lépésre leírjuk. Ez angolul Procedural Style. Ezzel szemben áll az objektum orientált programozás (Object Oriented Programming – OOP), ami a szoftverprogramozáshoz hasonlóan nem leírja a műveletek egymásutánját, hanem az egyes műveleteket összefüggés nélkül, külön-külön definiálja, és a végén, vagy az elején ezeket a műveleteket meghívja. Ezt nem nehéz megérteni. Egy egyszerű honlap esetében föntről lefelé halad a tartalom, és ez ad egy időbeliséget, sorrendiséget a megprogramozandó dolgoknak. Egy szoftver, például a Word esetében az időbeliség szintén megvan, de a párhuzamosság még inkább: fönt az eszközpanelen egymás mellett sorjáznak a funkciók, amiket bármilyen kombinációban használhatunk. Tehát egymástól függetlenül kell megprogramozni a félkövérré tevő funkciót, a mentés másként funkciót, a betűméretet módosító funkciót, stb. különben elakadna a program. Az OOP is ezt a szemléletet követi.

WEB “DIY” BÖLCSÉSZEKNEK

Ha

becsülettel végighaladnánk a PHP nyelven, akkor az adatbázis-műveletek valahol félúton jönnének. De minket más cél vezet: szeretnénk egy blogot, ehhez pedig első körben csak az adatbázisműveletre van szükségünk a PHP-ból.

6

A tervünk lényege, hogy elkészítünk egy statikus HTML oldalt, amilyent majd szeretnénk minden bejegyzésünknek, de a tartalmat nem írjuk bele, hanem azt minden egyes megnyitáskor az adatbázisból kéri majd le a kód. És ha más lesz az adatbázisban, mint előtte, akkor mást fog megjeleníteni, anélkül hogy az oldalhoz hozzányúltunk volna. Dióhéjban ennyi. Adatbázból több rendszer közül is választhatunk. A leggyakoribb a MySQL, itt is ezt fogom bemutatni. Mikor bármit kérünk az adatbázistól, a PHP-n belül MySQL parancsokat fogunk írni. Tehát HTML nyelven összerakunk egy oldalt. MySQL adatbázisban tároljuk a tartalmat. PHP nyelven kérjük le az adatbázisból és jelenítjük meg a HTML oldalunkon.

DINAMIKUS OLDAL adatbázis

71

A MySQL-t egy pillanatra képzeljük el úgy, mint az Excelt. Az adatok “táblázatban” vannak. Ha szükség van az adatbázisból valamire, akkor megadhatnánk, hogy például a “2. sor D oszlopából” szedje elő a tartalmat. És ugyanígy megy más is, megadhatjuk, hogy a “2. sor D oszlopát” írja felül más tartalommal, vagy az összes sor után egy új sort fűzzön hozzá a “táblázatunkhoz”.

WEB “DIY” BÖLCSÉSZEKNEK

Mi

szeretnénk egy blogot, ehhez (és a legtöbb dologhoz) elég egy adatbázis. Az adatbázisunk nevét általában a tárhely szolgáltató állítja be. Az adatbázisban két dolgot szeretnénk tárolni, az egyik a posztok, a másik a kommentek. Ezért ki kell alakítanunk két táblát. Tehát a bolcsesz_db adatbázisban létrehozunk egy ‘posztok’ és egy ‘kommentek’ táblát.

6

Ez pont olyan, mintha lenne egy bolcsesz.xls Excel fájlunk, és azon belül egy ‘posztok’ és ‘kommentek’ munkalapunk. A MySQL táblák lesznek azok, amiket igazán meg kell terveznünk. A ‘posztok’ tábla esetén azon kell töprengeni, hogy milyen adatokat szeretnénk könnyen előhívni. Milyen “adatlapot” alakítsunk ki a posztnak. Első nekifutásra például adja magát, hogy címestül, mindenestül eltároljuk egy “táblázat cellába”, MySQL mezőbe a bejegyzést, és egy másik mezőbe pedig a létrehozás dátumát. De ha arra gondolunk, hogy a blogunk címlapján mindig csak a címet, a dátumot, a szerzőt és a bevezetőt szeretnénk csak megjeleníteni, akkor máris konkrétabb a feladat. Akkor inkább valami ilyesmi adatlap kell:

DINAMIKUS OLDAL adatbázis

72

Cím: Dátum: Szerző: Bevezető: Szöveg:

Lorem ipsum 12/03/14 bölcsészlány Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus posuere vulputate sem vel ultrices. Mauris nec pellentesque nisl. Quisque purus ipsum, tincidunt dignissim mollis sit amet, semper id nisl. Integer felis nibh, tristique ac nisi non, vehicula dictum sem. Quisque aliquet nisl ac viverra ullamcorper. Cras nisl enim, gravida dapibus nunc vel, placerat rhoncus dui. Praesent tristique dui sit amet leo hendrerit, condimentum vulputate urna tristique. Donec massa nulla, adipiscing nec adipiscing vel, malesuada.

WEB “DIY” BÖLCSÉSZEKNEK

Szabad

kezet kap mindenki, hogy mit akar eltárolni egy-egy bejegyzéséről. Ha rovatokat akarunk a blogunkra, akkor feltétlen el kell tárolnunk azt is, hogy milyen rovatba tartozik, és ha címkefelhőt is akarunk, akkor a címkéket is el kell rakni.

6

A tároláshoz viszont meg kell adni egy kulcs mezőt, ami minden esetben egyedi értéket fog tárolni. Például a blogunkon többször is adhatunk olyan címet, hogy “Szeretem a pártállamot”, vagy a dátum is lehet ugyanaz, ezért ezek nem alkalmasak egyedi azonosításra. (Az pedig a visszakeresés miatt fontos) Legegyszerűbb, ha minden tábla esetében kiosztunk a bejegyzéseknek egy-egy leltári számot. Ez id-nak szoktuk nevezni, vagy a tábla neve után posztok-id, kommentek-id-nak. És akkor végül egy utolsó dolog: azt írtam, az adatbázis olyan, mint egy Excel táblázat, de ez nem igaz. Mikor kialakítunk egy MySQL-táblát, az adatbázison belül, akkor megadjuk, hogy ebben a táblában milyen mezők vannak, és ezáltal táblázat-jellegű lesz a dolog, hiszen minden beszúrt sor ugyanannyi mezőt fog tartalmazni. Egymás alá kilistázva a tartalmukat, táblázatként fog megjelenni, de a navigáció szempontjából jó tisztázni az elején, hogy az oszlop szót nem ismerjük az adatbázisok esetében. A ‘posztok’ táblánk nagyjából így néz majd ki:

DINAMIKUS OLDAL adatbázis

73

posztok-id 1 2 3

cim Lorem ipsum Praesent tristiq Quisque purus

datum 12/03/14 12/03/14 12/03/14

szerzo bölcsészlány bölcsészlány bölcsészlány

bevezeto Mauris nec ... Vivamus ut... Cras pharet...

szoveg Lorem ipsum... Cras nisl ... Vivamus...

WEB “DIY” BÖLCSÉSZEKNEK

Van

egy kezelőfelület, ahol felhasználóbarát módon tudjuk a MySQL műveleteket végrehajtani, ez pedig a phpMyAdmin. Ha saját fejlesztői környezetet alakítunk ki, akkor ezt is telepíteni kell, a tárhelyszolgáltatók viszont alapból a fiókunkhoz adják, és a tárhelyünkhöz tartozó admin felületről tudjuk megnyitni (pl. “adatbázis megnyitása”). Ha sikerült belépnünk a phpMyadminba, rákattintunk az adatbázisra, amiben létre akarjuk hozni a táblát.

6

Listázásra kerülnek az adatbázis táblái, és a lista alján van egy beviteli rész, ahol létre lehet hozni új táblát. Nem árt tudni előre, hogy mennyi mezőt szeretnénk a táblánkba, de utólag is lehet még hozzáadni vagy elvenni. A profik viszont mindent előre megterveznek. Ezután jön a mezők tulajdonságainak beállítása.

DINAMIKUS OLDAL phpMyAdmin

74

Nagyon sokféle beállítás létezik. Amire figyelnünk kell, hogy itt se legyen semmi nagyobb méretű az indokoltnál. Az adatbázis adja a dinamikus honlapunk tartalmát, és ha optimálisan állítjuk be a mezők tulajdonságait, akkor a kéréseket gyorsan és gördülékenyen szolgálja ki. A gyorsaságot szolgálja az is, ha nagyon pontosan meghatározzuk, hogy a mező milyen jellegű adatot tárol, de nekünk alapvetően mindenféle szöveg tárolására van szükségünk, úgyhogy a legtöbb beállítási lehetőséggel nem kell foglalkoznunk. Emlékszünk még matekból az egész számokra, racionális számokra, törtekre, satöbbi? Mindegyiknek külön mező beállítása lehetséges, és azon belül is lehetnek alfajok. A dátumot tartalmazó mezőnek is beállíthatjuk, hogy ez dátum, és ha egy tömeges lekérést indítunk, akkor 100%-os dátum szerinti rendezést tudunk előállítani. Ha ezzel nem molyolunk, hanem csak VARCHAR (=mindenféle karakter) tulajdonságot állítunk be, akkor nem biztos, hogy teljesen pontos sorrendet kapunk, és semmiképp sem ugyanannyi idő alatt.

WEB “DIY” BÖLCSÉSZEKNEK

Nekünk embereknek ezek a századmásodpercek nem sokat számítanak, de például a Google számára ez is egy támpont, hogy melyik oldalt tegye előbbre a találati listán. Lehet, hogy a konkurens blog csak két századmásodperccel jobb, mint a miénk, akkor máris tudunk hová nyúlni fegyverért. Persze a Google nem csak ezt nézi, szóval ne lincseljen meg senki, ha heteken át tanulmányozta a legoptimálisabb MySQL-adatbázis beállításokat, és továbbra is 2-es a Page Rankja. A következőkben felsorolok egy átlagos szövegtároló tábla beállítást az eddigi példán. Posztok-id – mező típusa: INT, mérete:1, extra: auto increment, key: primary.

6

Ezzel azt adtam meg, hogy egész számok vannak a mezőben, maximum 11 helyi értékkel. Az auto increment beállítás azt jelenti, értékét automatikusan növeli. Ha új sort szúrunk be, nem kell beállítanunk a ‘posztok-id’ értékét, mert a legutolsó sorhoz képest megnöveli eggyel. Key: primary azt jelenti, hogy ez a táblánk elsődleges kulcsa, ezzel indexeltük, kvázi leltári számot adtunk neki. Cim – típus: VARCHAR, méret: 200.

Azt jelenti “mindenféle karakter”. Azért jó ez, mert biztos, hogy nem lesz gond abból, hogy mit akarunk ebbe a mezőbe beírni. A 200-as méret azt jelenti, hogy 200 karakternél hosszabb címet nem adhatunk, ha ennél hosszabb, a 200. karakternél megszakad majd az adat, és csak az addigiakat tárolja.

DINAMIKUS OLDAL phpMyAdmin

75

Datum – típus: VARCHAR, méret: 100.

Ez tényleg hanyagság, de legyen. 100 pedig pazarlás, a dátum mindig ugyanannyi számból áll. De megadhatunk szöveges hónapneveket is, hiszen VARCHAR a mező. Szerzo – típus: VARCHAR, méret: 100. Bevezeto – típus: VARCHAR, méret 500. Szoveg – típus: TEXT, méret: nincs meghatározva.

A text egy rugalmas kategória, a BLOB-hoz hasonlóan. Annyi helyet foglal, amennyi a tartalma, viszont keresés szempontjából nem szerencsés, mert emiatt lassabban tudja átfésülni a rendszer. És végül az egész táblának beállítottuk az utf-8 egybevetést, amit egy korábbi fejezetben már tárgyaltunk, miért fontos. A pontos neve az optimális utf-kódolásnak. utf8_general_ci.

WEB “DIY” BÖLCSÉSZEKNEK

Mit csináljak?

1. írd össze, hogy milyen tartalmat szeretnél az oldaladon megjeleníteni 2. a különböző típusú tartalmaknak (galéra, cikk(jellegű), adatmátrix, stb.) tervezd meg az adattábláját! 3. a tervezésnél segít, ha először excelben próbálod elkészíteni az adattáblát (tábla mező neveit az első sorba, a beszúrandó adatokat a további sorokba) 4. lépj be a phpMyadminba, és hozd létre az adattáblát/táblákat (5.) szorgalmi feladat: előre elkészítheted HTML-ben egy blogposzt prototípusát tokkal-vonóval. Legyen benne példaszöveg is (példacím, példa bevezető, példadátum, stb.)

76

WEB “DIY” BÖLCSÉSZEKNEK

A

phpMyadminba jelszóval és felhasználónévvel lehet belépni, amik, ha a tárhelyszolgáltató admin felületéből indítunk, automatikusan kitöltésre kerülnek. Erre a jelszóra nagyon vigyázzunk! Adatbázisunk védelme olyan sarkalatos, mint a méheknél megvédeni a királynőt. Egyrészt ha gyűjtünk hírlevél feliratkozókat, az ő adataikra nagyon kell ügyelnünk, hogy ne kapja meg harmadik fél, másrészt az egész weboldalunk tartalma az adatbázisban lesz.

6

Az egyik védelmi lehetőség, hogy tartalommegjelenítésre olyan felhasználót állítunk be, aminek a legalacsonyabb szükséges jogosultságot adjuk meg. Erről később lesz szó. A másik védelmi lehetőség, hogy a tartalmi változtatások után készítünk biztonsági mentést az adatbázisunkról. A biztonsági mentés ugyanolyan művelet, mint egy másolat elkészítése, csak biztonsági célból készítjük. phpMyadminban a táblákat időközönként exportáljuk (az exportálás menüpontban), és ha megsérül az éles adatbázis, akkor importáljuk a legfrissebb exportálást, és megy tovább minden (jelszóújítás után). Az adatbázissal PHP segítségével fogunk kommunikálni. Ha az oldalunk tartalmaz PHP kódot, akkor már .php kiterjesztéssel kell elmentenünk. Ettől függetlenül lehetnek benne HTML részek, sőt JavaScript is, emiatt ne aggódjunk. A PHP kód kezdetét és végét -vel jelöljük. Tényleges PHP kódok nélkül egy példa, hogyan használjuk a PHP-t és a HTML-t együtt:

DINAMIKUS OLDAL csatlakozás adatbázishoz 77

WEB “DIY” BÖLCSÉSZEKNEK

Csatlakozás:

http://walap.hu/php/csatlakozas.php

PHP-ban ha valamit le akarunk kérni az adatbázisból, a következő módon csatlakozunk hozzá:

Ebben a fejezetrészben ezt ízekre fogjuk szedni, és minden betűt értelmezünk. Elsőre kaotikus lehet a vizsgálat, úgyhogy ha nem érthető, olvassuk el újra és újra. Ez is csak egy nyelv, tehát ez a tömör betűsor jelentéssel bír. De szemben az élő beszéddel, itt egy vessző hiánya is megmásítja a program futását, nagyon szigorú nyelv, ezért valószínűleg az elején sok hibaüzenettel fogunk dolgozni.

6

A PHP-hoz hasonló programozási nyelvekben teljesen természetes alkotóelemek a VÁLTOZÓK (variables). Ez teljesen evidens, hiszen a programok lényege az automatizáltság, tehát nem lehet eseti a megfogalmazása a kódnak, “Joker lapokat” kell elhelyeznünk ott, ahol értéket kell megadni. Miért kellenek változók? Ha nem világos, majd össze fog állni. A programunknak akkor is le kell futnia, ha az 5. blogposztot kérem le az adatbázisból, és akkor is le kell futnia, ha a 4-et kérem. Ezért mindenképpen változókkal kell dolgoznunk, és a parancsot valahogy így megfogalmaznunk: “Kérd le az adatbázisból a VÁLTOZÓ id-jű blogposztot!”

DINAMIKUS OLDAL csatlakozás, változók 78

Ha valami egy változó, akkor $ jellel jelöljük, és nevet adunk neki. Bármit adhatunk, a lényeg, hogy aztán definiáljuk, deklaráljuk a változónkat. A definiálást pontosvesszővel zárjuk le. Nagyon alapvető: a pontosvessző nem egyszerűen a “mondat” végét jelenti, hanem egyúttal utasítás is a végrehajtásra. A legtöbb hibaüzenetet kezdetben emiatt fogjuk kapni, hogy rossz helyen van a pontosvessző (a felszólítás a végrehajtásra), vagy lemaradt. $majomparade=mysqli_connect(‘localhost’, ‘root’ , ‘ ‘, ‘development’);

ugyanaz, mint a

$con=mysqli_connect(‘localhost’, ‘root’ , ‘ ‘, ‘development’);

mert az egyenlőségjel éppen úgy működik, mint a matekban: a=4 b=4

Akkor a és b vajon egyenlő? De még mennyire! Jól haladunk...

WEB “DIY” BÖLCSÉSZEKNEK

Tehát azt már tisztáztuk, hogy a $con, az egyenlőségjel, a pontosvessző mit jelent ebben kódrészben:

leegyszerűsítve ezt jelenti:

$con = változó deklarálása;

Már csak a deklarációt kell megvizsgálnunk! Jelen esetben egy kötött formátumú parancs szerepel a változóban, de sima értéket, szöveget is ugyanúgy be szoktunk rakni. A mysqli_connect() és a zárójelben lévő ‘localhost’, ‘root’ , ‘ ‘, ‘development’ értékek a csatlakozás módját adják meg. Ebből is a mysqli_connect() egy beépített funkció, egy olyan “kifejezés”, amit nem kell külön deklarálnunk, a szerver, amire telepítve van a PHP (a “PHP szótár”), tudni fogja, mit tegyen, ha ezt látja.

6

Ha elakadunk, és a neten rákeresünk a problémánkra a csatlakozással, vagy a későbbi MySQL műveletekkel kapcsolatban, ügyeljünk arra, hogy olyan válaszokat keressünk, amik szintén a mysqli formulát használják. A PHP korábbi verzióiban mysql_connect, mysql_query, stb. volt a formula, tehát i betű nélkül. Az újabb, mysqli formulák valamivel egyszerűbbek, és jobban kiszolgálják az objektum orientált programozást.

DINAMIKUS OLDAL csatlakozás, változók

A mysqli_connect() funkciónál a zárójelben a következő adatokat kell megadnunk. 1. hol található az adatbázis? 2. mi a felhasználónév? 3. Mi a jelszó? 4. Mi az adatbázis neve? Az értékeket ‘ vagy “ jel közé kell tenni, és az értékeket vesszővel kell elválasztani. A példa esetében az adatbázis azon a tárhelyen van, ahol a kód is fut, tehát: localhost. A felhasználónév: root Jelszó: nincs Az adatbázis neve: development. Így áll össze a csatlakozó parancs:

79

Természetesen mindenkinek a maga adatbázisához tartozó értékeket kell itt megadnia.

WEB “DIY” BÖLCSÉSZEKNEK

A

sikeres csatlakozás után folytassuk a feladatot, és kérjük le az adatbázisból a blogposztot. Tehát valami ilyesmibe akarjuk beönteni az adatokat, kékkel emeltem ki azt, ahová valami PHP kódot kell majd írnunk:

6

Egy teljes lekérő kód példája így néz ki:

DINAMIKUS OLDAL adat lekérése

80

WEB “DIY” BÖLCSÉSZEKNEK

Menjünk

sorban! Az első sort már tárgyaltuk, csatlakozás az adatbázishoz. A második sorban létrehoztunk egy változót, adtunk neki értéket, ezt majd később el fogjuk sütni. A harmadik sorban a karakterkódolás helyességét biztosítottuk.

6

Az adatbázisból bármit kérünk ki, vagy teszünk be, legjobb, ha használjuk a karakter átalakító parancsot, mysqli_set_charset (), bár elvileg ha minden utf8-ban van, akkor erre nincs szükség, de kárt nem tesz. Az $eredmeny változóban egy mysql parancsot deklaráltunk, a mysqli_query()-t. Ennek a felépítése a következő. Először meg kell adni, hogy hová csatlakozzon, aztán meg kell adni azt az SQL parancsot, amit végre kell hajtani. Ha megfigyeljük, a teljes kód tele van ‘ és “ jelekkel. A PHP-ban ez a kettő ugyan azt szolgálja, és tetszőlegesen használhatjuk, a lényeg, hogy párban legyenek. Például a $cim = $sor[‘cim’]; deklarálás “-lel is mehet: $cim = $sor[“cim”];

DINAMIKUS OLDAL adat lekérése: mysqli_set_charset 81

Ha még jobban megfigyeljük, akkor azt látjuk, hogy a változók előtt ott a $ jel, ami jelzi, hogy ez egy változó. Az értékek ‘ vagy “ jelek között vannak, és ami ezen kívül esik, azok pedig PHP parancsok, funkciók. Nagyjából ez a három kategóriája van a PHP nyelv kifejezéseinek: Parancsok, változók, értékek. Még egyszer figyeljük meg: mysqli_set_charset($con, “utf8”); Van benne egy PHP parancs, egy változó és egy érték. Az érték “” jelek közt van. Lényegében azért, mert az érték a PHP számára értelmezhetetlen, neki ezek csak karakterek, és irreleváns, hogy milyen jelentéssel bírnak. Az idézőjelekkel pedig kivonjuk a PHP kódból. Ha idézőjel nélkül adnánk meg az értékeket, a szerver megpróbálná parancsként értelmezni őket, és hamar jönne a hibaüzenet, hogy “Hiba: értelmezhetetlen parancs: ”

WEB “DIY” BÖLCSÉSZEKNEK

Select:

http://walap.hu/php/select.php

Nézzük akkor most a bonyolultabb PHP parancsot, a mysqli_query()-t! mysqli_query($con, “SELECT * FROM `posztok` WHERE `posztok-id` = ‘”.$posztokid.”’ “);

A mysqli_query() felépítése mysqli_query(hová csatlakozzon, mit hajtson végre); A hová csatlakozzon részt már tisztáztuk. A mit hajtson végre rész pedig egy másik nyelven van, ez egy SQL parancs, tehát a PHP számára irreleváns, a PHP csak átadja az értéket a MySQL-nek, ami ezt értelmezni tudja. A $posztok-id helyére a PHP (a szerver) be fogja illeszteni a változó értéket, tehát a MySQL kitöltve kapja meg a parancsot.

6

Ahogyan a PHP számára az érték nem bír jelentéssel, ugyanúgy a MYSQL sem tudna mit kezdeni a $posztok-id változóval, tehát az a parancsnak egy olyan része, ami a PHP-nak szól. Ha “-vel kezdtük az értékmegadást, “-vel is zárjuk. A $posztok-id előtt és után azért van szükség a pontokra, mert ezzel jelezzük, hogy a folytatása az addigi dolgoknak, és ami utána jön, az is oda tartozik még. Olyan mintha mi.így.írnánk.le.a.mondatainkat.hogy. tudjuk.hogy.egybe.tartoznak.a.szavak. Ezek után már csak magát az SQL parancsot kell kiveséznünk. A parancs, amit megadtunk, magyarul így hangzik:

DINAMIKUS OLDAL adat lekérése: mysqli_query 82

Válassz ki minden mezőt a posztok táblából, azoknál a soroknál, ahol a posztok-id mezőben az 1-szerepel. SELECT * FROM `posztok` WHERE `posztok-id` = ‘1’ Szótár nézetben: Válassz ki minden mezőt a posztok táblából azoknál a soroknál, ahol a posztok-id mezőben az 1-szerepel

SELECT * FROM `posztok` WHERE `posztok-id` = ‘1’

WEB “DIY” BÖLCSÉSZEKNEK

Ha megfigyeltük, a táblának a részeit `jelek` (Alt+7) közé tesszük, tehát ez esetben a tábla nevét, és a mező nevét. Az értékeket pedig ‘jelek’ (Alt+1) közé. Ezek után már egészen érthető, mit is akar jelenteni a kód. Miután megtörtént a lekérés, zárjuk a kapcsolatot, hogy megkönnyítsük a szerver dolgát. Ezt a mysqli_close() paranccsal tudjuk megtenni, a zárójelben a szerver azokat az értékeket várja, amivel csatlakoztunk, tehát egyszerűen beírjuk a változót, amivel a csatlakozást deklaráltuk. mysqli_close($con);

6

A nehezebben érthető kódrész a while-ciklus. while ($sor = mysqli_fetch_array($eredmeny, MYSQLI_BOTH)) { $cim = $sor[‘cim’]; $datum = $sor[‘datum’]; $szerzo = $sor[‘szerzo’]; $bevezeto = $sor[‘bevezeto’]; $szoveg = $sor[‘szoveg’]; }

DINAMIKUS OLDAL adat lekérése

A korábbi paranccsal lényegében az történt, hogy az $eredmeny változót megtöltöttük adatokkal. A hátra lévő feladat pedig az, hogy ezeket az adatokat megjelenítsük. Még jobban leegyszerűsítve: kikértük az adatokat az adatbázisból, most már csak meg kell találni a módját, hogy elhelyezzük. Jobban megértjük, ha tisztában vagyunk azzal, hogy milyen formában kapja meg a szerver az adatbázistól az adatokat. Valahogy így: $eredmeny tartalma: [posztok-id]: 1, [cim]: Lorem ipsum, [datum]: 12/03/14, [szerzo]: bölcsészlány, [bevezeto]: Mauris nec …, [szoveg]: Lorem ipsum... Ez pedig így nem csak számunkra érthetetlen. Ha például azt akarjuk, hogy jelenjen meg az oldalon a cím, akkor valami olyasmi parancsra lesz szükségünk, ami azt mondja, “az $eredmeny változót jelenítsd meg, de csak azt a részét, ami a címre vonatkozik”.

83

Viszont ilyen parancsra nincs lehetőség, mert a szabályos PHP logika ennél konkrétabb megfogalmazást igényel. Először is úgynevezett tömböt (array-t) kell csinálnunk a megkapott információból.

WEB “DIY” BÖLCSÉSZEKNEK

Tömbök:

http://walap.hu/php/tomb.php

A

tömbök ötlete valószínűleg azon alapult, hogy ki kellett találni egy módot arra, hogy több, össze tartozó adatot egy csokorban tarthassunk. Elsőre azt mondanánk, hogy ezt úgy tudjuk megtenni, hogy egyszerűen deklarálunk egy változót, azokkal az értékekkel, amiket egy csokorban akarunk tartani. Tehát az érték részhez, az idézőjelek közé beleírjuk a dolgokat, amiket együtt akarunk tárolni.

6

Viszont ezt akkor csak egyben tudjuk kezelni. Érthetőbbé téve a problémát, ha csak a címet szeretnénk megjeleníteni, akkor azt hogyan tudnánk ennek a változónak a segítségével megtenni? Sehogy. Mindent, vagy semmit, ez a két opció lenne. A tömb ebben segít, hogy az $eredmeny változón belül strukturálni tudjuk az információt. Valami olyasmire lesz szükségünk, hogy az $eredmeny változón belül fel legyenek címkézve az értékek. Valahogy így: első érték: 1, második érték: Lorem ipsum, harmadik érték: 12/03/14, negyedik érték: bölcsészlány, ötödik érték: Mauris nec …, hatodik érték: Lorem ipsum... Így már tudjuk azt mondani, hogy az $eredmeny-nek a második értékét kérem (ez a cím). Ha ezt megértettük, akkor már jó úton haladunk, mert itt már csak egy kis apróságot kell megérteni, mégpedig a kétféle “címkézési módot”.

DINAMIKUS OLDAL adat lekérése, tömbök 84

Az egyik hatékony mód a sorszámozás (numerikus mód), ami hasonló ahhoz, ahogy az előbb leírtam, annyi csak, hogy nem 1-gyel, hanem 0-val kezdődik a sorszámozás. A másik mód a szöveges címkézés (asszociatív mód). Numerikus tömb (array)

$eredmeny = array( [0] => “1”, [1] => “Lorem ipsum”, [2] => “12/03/14”, [3] => “bölcsészlány”, [4] => “Mauris nec …”, [5] => “Lorem ipsum...” ); $eredmeny[1]

Asszociatív tömb (array)

$eredmeny = array( [posztok-id] => “1”, [cim] => “Lorem ipsum”, [datum] => “12/03/14”, [szerzo] => “bölcsészlány”, [bevezeto] => “Mauris nec …”, [szoveg] => “Lorem ipsum...” );

címre vonatkozó rész kérése:

$eredmeny[‘cim’]

WEB “DIY” BÖLCSÉSZEKNEK

A parancs, ahonnan elindultunk ez volt (zölddel szedve, amit már átnéztünk):

DINAMIKUS OLDAL adat lekérése, while-ciklus

Először foglalkozzunk a $sor = mysqli_fetch_array($eredmeny, MYSQLI_BOTH) résszel! Látjuk, hogy ismét egy deklarálással van dolgunk, és nem értéket adtunk meg, hanem egy PHP parancsot, a mysqli_fetch_array()-t. Ez arra szolgál, hogy a MySQL-től átvett adatokat tömbbe folyassa be. Két értéket kell megadni ahhoz, hogy ez működjön: egyet, hogy melyik változó tartalmazza azt az adatsort, amit tömbbé kell alakítani, és azt, hogy numerikus (MYSQLI_NUM), asszociatív (MYSQLI_ASSOC), vagy mindkét típusú (MYSQLI_BOTH) tömbről beszélünk. Adatbázis esetén jobb a (MYSQLI_BOTH) beállítást használni. Deklarálom a $sor változót, amibe folyasd bele az infókat, mint tömbbe, az $eredmeny változóból, és mindkét típusú tömbről van szó. $sor = mysqli_fetch_array($eredmeny, MYSQLI_BOTH);

85

A while-ciklus sok célt szolgál, de most csak arra fogjuk használni, hogy újabb deklarációkat tehessünk meg.

WEB “DIY” BÖLCSÉSZEKNEK

Egy while-mondatnak három építőeleme van. Az egyik maga a while szó, a másik a feltétel, a harmadik pedig a parancs, amit végre kell hajtani. while ($sor = mysqli_fetch_array($eredmeny, MYSQLI_BOTH)) { $cim = $sor[‘cim’]; }

6

Ez magyarul így hangzik: Deklarálom a $cim változót, aminek az értéke a $sor tömb cím eleme. Ezt arra értem, amikor a $sor változót úgy deklarálom, hogy a MySQL-ből lekért adatokat folyassa bele, mint tömbbe az $eredmeny változóból, és mindkét típusú tömbről van szó.

DINAMIKUS OLDAL adat lekérése, while-ciklus 86

Innen már csak egy lépés az eredmény megjelenítése. PHP-ben az echo vagy print paranccsal tudunk kiíratni dolgokat. Egészen addig hófehér képernyőt látunk, akkor is, ha a háttérben ezerrel dolgozik a szerver. Mert a PHP kód nem jelenik meg a böngészőben, mert azt a szerver kapja meg. A böngésző pedig csak a HTML részt. Az echo viszont tulajdonképpen “HTML-ként” képes kiköpni értékeket, de ezt így talán nagy hiba volt leírni. Elég annyi, hogy ha azt akarjuk, hogy a PHP-vel kiizzadt információt az oldalon meg akarjuk jeleníteni, akkor az echo, vagy print parancsot használjuk. Ha a PHP fogja tudni, hogy mit kérünk – például a $cim változó értékét akarjuk megjeleníteni – akkor csak ez a parancs, csupaszon: echo $cim;

Ha csak egy sima értéket akarunk megjeleníteni, ami PHP nyelven nem jelent semmit, akkor idézőjelek közé kell tennünk a dolgot: echo “Hello world!”;

WEB “DIY” BÖLCSÉSZEKNEK

A fejezet elején az volt a célunk, hogy megjelenítsük a blogbejegyzésünket, tehát azt a kódot most már pontosan meg tudjuk írni. Az előbb tárgyalt while-ciklusnak nincs túl nagy jelentősége ebben az esetben, mert egyetlen sort kértem le az adatbázisból, az 1-es id-jű blogbejegyzést. Viszont ha például azokat a sorokat kérem le, ahol a `szerzo` = ‘bölcsészlány’, akkor több sort is kapni fogok, mert a bölcsészlány több blogbejegyzést is írt, és minden egyes soron elvégzi azt a parancsot, amit a {kapcsos zárójelek közé írtam}. Ekkor igazán hasznos a while-ciklus. A blogunk címlapja ezek után már nem sok magyarázatot igényel: ott az adatbázisból mindent lekérünk a posztok táblából, feltétel nélkül. És a while-ciklussal megadjuk, hogy jelenítse meg mindegyik sorból a címet, a dátumot és a bevezetőt. Ez tokkal-vonóval így fog kinézni:

6



Blog

,

WEB “DIY” BÖLCSÉSZEKNEK

Ha

blogbejegyzést hozunk létre, akkor az adatbázisba szeretnénk adatot beszúrni. Ez az INSERT paranccsal lehetséges. Igazából ez a része a dolognak több átgondolni valót követel meg, ha azt tűzzük ki célul, hogy készítsünk magunknak egy felhasználóbarát adminisztrációs felületet, ahol kezelni tudjuk a bejegyzéseket. Akkor meg kell oldani, hogy kényelmesen szerkesztgetni tudjuk a szövegünket, és aztán publikálni tudjuk. Utólag módosíthassuk, stb. Ebbe most azért nem mélyedünk bele, mert ha ezt igazán fejletten szeretnénk kivitelezni, akkor egy komplett tartalomkezelő rendszert kell kialakítanunk. Az összetevőit viszont röviden fölvázolom.

6

Először az admin oldalra be kéne applikálnunk egy javascript alapon működő szövegszerkesztőt ahonnan be lehet szúrni a blogposzt adatait az adatbázisba. Ez a phpMyAdminban is csak egy gombnyomás, tehát ezen a ponton spórolhatunk. Ha bent van az adatbázisban az anyag, még nem jelenti automatikusan, hogy meg is tudjuk nézni a neten. Gondoskodni kell róla, hogy legyen egy URL, egy elérési út, ahol a bejegyzést megjeleníti a böngésző. A legalapabb lehetőség, hogy nyilvánvalóan rendelkezünk egy mesteroldallal, sablonnal, amit a blogposztok kialakítására készítettünk. Ennek készítjük el egy klónját, és a blogposzt id-jét kicseréljük benne arra az id-ra, amelyik blogposztnak oldalt akarunk készíteni. Amilyen néven elmentjük, és amilyen könyvtárban elhelyezzük, az adja meg az URL-t. Konkrét példa:

DINAMIKUS OLDAL oldalak létrehozása

Ha a gyökér könyvtárhoz képest a /2014/03/ könyvtárban (a 2014 könyvtáron belüli 03 nevű könyvtárban) helyezzük el, és a fájlnév lorem_ipsum.php lesz, a blogunk domain neve pedig bolcseszblog.hu, akkor az URL ez lesz: http://blocseszblog.hu/2014/03/lorem_ipsum.php A fapados verzióban tehát a mintapéldány másolatát elmentjük a kívánt könyvtárba. Ha vannak képek, azokat is feltöltjük a tárhelyre. Erre mondják azt, hogy a blogposzt oldala fizikailag is létezni fog. A fejlett verzió, amit például a Joomla vagy a Wordpress csinál az, hogy nem hozza létre fizikailag a bejegyzések oldalait. Az URL-t ha beírják a böngészőbe, akkor legenerálja az oldalt, és megjelenik, de egyébként hiába keresnénk a tárhely állományai között.

88

WEB “DIY” BÖLCSÉSZEKNEK

Insert:

http://walap.hu/php/insert.php

Ennyi beszúrni az

felvezetés után térjünk vissza az eredeti problémához: adatokat szeretnénk adatbázisba!

$con=mysqli_connect(‘localhost’, ‘root’ , ‘ ‘, ‘development’); mysqli_query(“SET NAMES utf8”); $eredmeny = mysqli_query($con, “INSERT INTO `posztok` (`posztok-id` ,`cim` ,`datum` ,`szerzo`, `bevezeto`, `szoveg`)VALUES (NULL , ‘”.$cim.”’, ‘”.$datum.”’, ‘”.$szerzo.”’, ‘”.$bevezeto.”’, ‘”.$szoveg.”’ );”); mysqli_close($con);

6

Ami itt újdonság, az INSERT parancs formátuma. Mert egyébként a mysqli_query() funkcióval már megismerkedtünk, az “értékek megtörését”.php kóddal.”szintén ismerjük”; A MySQL-nek átadott SQL parancs magyarul így hangzik:

DINAMIKUS OLDAL beszúrás adatbázisba 89

A `posztok` tábla posztok-id, cim, datum, szerzo, bevezeto, szoveg mezőibe szúrd be a semmi, változó, változó, változó, változó, változó értékeket! INSERT INTO `posztok` (`posztok-id` ,`cim` ,`datum` ,`szerzo`, `bevezeto`, `szoveg`)VALUES (NULL , ‘”.$cim.”’, ‘”.$datum.”’, ‘”.$szerzo.”’, ‘”.$bevezeto.”’, ‘”.$szoveg.”’ );

A mi fapados eljárásunk esetében ezt a parancsot nem kell megírnunk, hiszen a phpMyadminon keresztül fogjuk beszúrni a bejegyzéseket. A beszúrás parancsnak azt a részét, hogy hogyan adjuk meg a beszúrandó tartalmat, egy későbbi fejezetben, az űrlapok készítésénél fogjuk részletesen megnézni.

WEB “DIY” BÖLCSÉSZEKNEK

Update:

http://walap.hu/php/update.php

Az

Update arra szolgál, hogy a már meglévő adatokat módosítsuk. Nagyon könnyű a használata, de nagyon könnyen el is lehet rontani vele mindent. Nekünk igazából nem fog kelleni, kivéve, ha abban gondolkozunk, hogy egy saját blogbejegyzés-szerkesztő admin felületet készítünk, mert itt a régi bejegyzések szerkesztésekor az UPDATE lehetőséget kell használnunk.

6

Egy PHP átadás így néz ki: $con=mysqli_connect(‘localhost’, ‘root’ , ‘ ‘, ‘development’); mysqli_query(“SET NAMES utf8”); $eredmeny = mysqli_query($con, “UPDATE `posztok` SET `szoveg` = ‘”.$szoveg.”’ WHERE `posztok-id` = ‘”.$posztok-id.”’ “); mysqli_close($con);

Magyarul így hangzik: Frissítsd a posztok táblában a szöveg mezőt erre: változó. Abban a sorban, ahol az id ez: változó.

DINAMIKUS OLDAL adat felülírása adatbázisban 90

Mondanom sem kell, hogy a változókat deklarálnunk kell ahhoz, hogy a parancs lefusson. Ami itt igazán fontos, hogy a WHERE kitételt

mindig tegyük meg, mert különben minden sorban kicseréli a `szoveg` mező tartalmát a $szoveg változó tartalmára. Olvasd el ezt a mondatot még egyszer! Igazából amíg azt a kérdést nem tisztáztuk, hogyan tudjuk értékkel megtölteni a változókat, addig ezek a parancsok csak lógnak a levegőben, úgyhogy tekintsünk ezekre a bemutatásokra úgy, mint kis előzetesre. Ha most valami nem világos, hamarosan az lesz.

WEB “DIY” BÖLCSÉSZEKNEK

A

keresőmotorok készítése roppant egyszerű, jó keresőmotor készítése viszont nagyon nehéz. Nyilván azokkal a rendszerekkel szemben, amiket több, mint egy évtizede hivatásszerűen tökéletesítenek, nem tudjuk felvenni a versenyt. Tehát ha a blogunkra akarunk egy hatékony keresőmotort rendszeresíteni, akkor legegyszerűbb valamelyik keresőoldal beilleszthető keresőboxát betenni az oldalba. Azt, hogy ezt hogyan kell kivitelezni, szájbarágósan le szokták írni az oldalukon.

6

Ha kevesebbel is beérjük, akkor a következőket kell tennünk. Kell készítenünk egy beviteli mezőt, aminek módját ezen a ponton még mindig nem tisztázzuk. A beviteli mezőbe írt szót vagy szavakat kezelnünk kell, és egyenként lefuttatjuk az adatbázison, hogy talál-e olyat a meglévő szövegekben. Ez nagyon primitív megközelítés, hiszen ezt még lehetne cicomázni olyan hasznos dolgokkal, mint az idézőjelbe tett szövegek egy kifejezésként kezelése, de most éppen elég lesz az alapok elsajátítása. Az adatbázison lefuttatás egy egyszerű SELECT parancs. A kitételekben rejlik majd a keresőmotorunk ereje. Ha ilyen informatív című blogposztjaink vannak, akkor a keresőmotorunk állhat annyiból, hogy válassza ki a cím mezőket a posztok táblából, ahol a cím tartalmazza ezt a szót: $kulcsszo. SELECT `cim` FROM `posztok` WHERE `cim` LIKE ‘%”.$kulcsszo.”%’

DINAMIKUS OLDAL keresés

Százalékjelet azért teszünk a kulcsszó elé, mert SQL nyelven karakterhelyettesítést jelent. Tehát bármi előzi meg, vagy követi a kulcsszót, ide vele! A keresőmotorunk másik pillérét ez adja, hogy mennyire tudjuk használni az SQL nyújtotta lehetőségeket, mert nem csak % jellel jellemezhetjük a keresőszót. Ha a szövegből kell keresnünk, akkor tücsköt-bogarat kiad találatként, tehát ez esetben nagyon ki kell találni, hogy a WHERE-hez milyen kitételt írunk. Hogy teljes legyen a kép, az még kerüljön ide, hogyan jelenítjük meg a találatokat! Itt olyan dologgal állunk szemben, mint mikor kilistázzuk a blogbejegyzéseinket a blogunk címlapján. Lefut egy SELECT lekérés, ami több találattal ér vissza.

91

While ciklus segítségével tudjuk megjeleníteni az eredményt, ugyanúgy, ahogy a SELECT parancsnál láttuk.

WEB “DIY” BÖLCSÉSZEKNEK

Mihez kezdjek?

1. készítsd el a mesterfájlát a leendő blogposztjaidnak HTML nyelven! 2. tedd bele az adatbázis-műveleteket tartalmazó PHP kódot, mentsd el .php-ként! 3. mentés máskénttel készíts egy példányt, amiben egy az adatbázisban már meglévő blogposztot/ akármit kérsz le 4. gyönyörködj benne! (5.) elkészíthetsz egy címlapot is, amin egymás alatt sorjáznak a bejegyzések bevezetői

92

ŰRLAPOK KÉSZÍTÉSE

WEB “DIY” BÖLCSÉSZEKNEK

Próbáld ki:

http://walap.hu/html/input_text.php

Ebben

a fejezetben megtanuljuk, hogyan tudunk értéket átadni PHP-val. Ha kérdőívet készítünk, ha egy komment motort, keresőmotort, hírlevél feliratkozást, vagy egy blogbejegyzésszerkesztőt szeretnénk írni magunknak, minden esetben a formokhoz (űrlap) fogunk nyúlni. A formműveleteknek két összetevője van: egy HTML-rész, ami a megjelenésért felelős, és egy PHP-rész, ami a feldolgozást végzi.

7

A formok keretét a tagek adják. Erre még vissza fogunk térni, de előbb nézzük a példát! Írjunk a blogunkhoz egy komment motort, talán ez lesz a legegyszerűbb. A terv például: A kommenteléshez ne kelljen bejelentkezni, csak egy felhasználónevet és egy e-mail címet kelljen megadni, hogy értesíthessük, ha válasz érkezett a kommentjére. Ki kell pipálnia, ha nem kér értesítést a kommentjére érkezett válaszról. A komment motor lényege, hogy adunk a felhasználónak beviteli mezőt, és amit abba beír, azt eltároljuk, és rögtön le is kérjük az adatbázisból, és megjelenítjük a többivel együtt, a beviteli rész után. A beviteli mezőket inputoknak hívjuk, HTML tagje ez:

ŰRLAPOK inputok

94

Az inputok legalapvetőbb fajtája a szöveges (text), de létezik szelektor (legördülő lehetőségek), radio button (szintén kiválasztós, de csak egyet enged választani) és jelölőnégyzet, checkbox (szintén kiválasztós, de bármennyit enged választani). Végül van az elküldős input (submit) és a rejtett input (hidden). Nem teljesen input a szövegmező (textarea), amit egy páros taggel jelenítünk meg: , és a tagek közé nem kerül semmi általában. A mi komment motorunkhoz text, textarea, checkbox, hidden és submit inputok kellenek. Az első feladat ezeknek az elrendezése, aztán majd vár még ránk a finomhangolás.

WEB “DIY” BÖLCSÉSZEKNEK

Próbáld ki:

http://walap.hu/html/input_alap.php

Textarea:

http://walap.hu/html/input_textarea.php

Az

inputoknak tehát attribútumként megadjuk a típusát. Ezen kívül meg kell adni a nevét is, hiszen a “túloldalon” egy PHP kód fog várni az adatokra, és tudni kell azonosítani azokat. A példánkban a név és az e-mail is text input, tehát valahogyan meg kell különböztetnünk ezeket. Erre szolgál a name=”” attribútum. Egyedül a submit inputnak nem kell nevet adni. A nevek kitalálásánál minél fantáziátlanabbak vagyunk, annál könnyebben dolgozunk. Az előző példát tehát így egészíthetjük ki:

7

Név: E-mail: Kér értesítést? Komment Poszt-id Elküld





Ezek a legalapvetőbb beállítások, de formailag még megadhatunk ezt-azt. A text típusú inputoknál megadhatjuk a beviteli mező hosszát (size), maximum beírható karakter számát (maxlenght), és egy belekattintásra eltűnő előre beírt szöveget (placeholder). Ez utóbbit az Internet Explorer 9-nél régebbi verziójában nem fogjuk látni.

ŰRLAPOK inputok

A checkboxok a radio buttonhoz hasonlóan nem formázhatók, ellenben a textareának a méretét beállíthatjuk az oszlopok (cols=””) és sorok (rows=””) attribútumokkal. Egy 40 oszlopos és 4 soros textarea hosszúkás lesz, csak a logika tisztázása kedvéért. A tagek közé írt szöveg meg fog jelenni a komment mezőben.

95

Ha a submitnak megadunk egy value=”” attribútumot, ezzel szabályozzuk hogy az elküldős gombon milyen felirat legyen. A hidden inputnak pedig megadjuk vele azt az értéket, amit majd továbbítania kell.

WEB “DIY” BÖLCSÉSZEKNEK

Próbáld ki:

http://walap.hu/html/form_get.php

Form táblázatban:

http://walap.hu/html/form.php

Az

inputok kordában tartása érdekében bátran nyúlhatunk táblázatokhoz, és akkor biztosak lehetünk a katonás megjelenésben. De nézzük a form attribútumait!

7

A method=”” és action=”” attribútumok megadása a legfontosabb. Ha action=”” attribútumot nem adunk meg külön, akkor alapértelmezetten a form oldala kapja az elküldött adatokat. A mi példánkban a feldolgozást a kommentmotor.php végzi, az attribútum így fog kinézni: action=”kommentmotor.php”. A method=”” attribútum értéke vagy POST, vagy GET. Ez az átadás módját jelenti. A kettő közti különbség megértéséhez induljunk ki az eddigi példából, hogy be van állítva egy action=”kommentmotor.php”. Ha POST-tal adom át a form értékeit a kommentmotor.php-nek, akkor a böngészősávban az url a következőképpen fog kinézni: http://bolcseszblog.hu/skin/kommentmotor.php

Ha GET-tel adom át a form értékeit a kommentmotor.php-nek, akkor viszont így:

ŰRLAPOK a form attribútumai

http://bolcseszblog.hu/skin/kommentmotor.php?nev=amitbeirt&email=amitbeirt&ertesi tes=amitbeirt&komment=amitbeirt&id=amiodakerult

Magyarul szólva, ha GET metódussal adjuk át az értékeket, akkor az URL-ben látszódni fognak, és manipulálhatók. Ezért ha csak lehet, ne használjuk ezt. A GET megjegyzés lényege, hogy az URL végén egy kérdőjellel indul, és bármi további hozzáfűzést and (&) jellel teszünk. A hozzáfűzések felépítése név=érték kell, hogy legyen, ismét a fogadó oldal kedvéért, hogy azonosítani tudja az infókat. Ha ilyen szemmel nézzük meg újra a kommentes URL-t, akkor látni fogjuk, hogy az egyenlőségjelek előtt az inputok nevei szerepelnek:

http://bolcseszblog.hu/skin/kommentmotor.php?nev=amitbeirt&email=amitbeirt&ertesi tes=amitbeirt&komment=amitbeirt&id=amiodakerult

96

A POST metódus esetén teljesen más dolognak örülünk: hogy az egész tisztán és láthatatlanul megy. Cserébe nem tudjuk manipulálni. Dióhéjban.

WEB “DIY” BÖLCSÉSZEKNEK

A

példánkban szereplő kommentmotor.php-ban átvesszük a form elküldött értékeit, tároljuk, és visszajelzést küldünk a felhasználónak a műveletről. Kettős perjellel // lehet megjegyzéseket írni a PHP kódba, amit a szerver így figyelmen kívül fog hagyni, nekünk viszont jó tájékozódási pontot jelent.

7

Az értékek átvétele változók deklarálásával történik. Mikor egy formot elküldünk POST-tal, vagy GETtel, az értékek bekerülnek egy POST vagy GET tömbbe, amiben a címkézés asszociatív, azaz szöveges. Tehát az egyes átadott értékeket majdnem úgy tudjuk kérni, mint egy sima tömbből, tehát kapcsos zárójelben feltüntetve, hogy a sok adat közül melyik címkéjűt kérjük. Egészen pontosan így:

ŰRLAPOK adatok fogadása php-val 97

$_POST[‘nev’] $_POST[‘email’] $_POST[‘ertesites’] $_POST[‘komment’] $_POST[‘id’] $_GET[‘nev’]

$_GET[‘nev’] $_GET[‘email’] $_GET[‘ertesites’] $_GET[‘komment’] $_GET[‘id’]

Tehát ha a form metódusa post volt, akkor $_ POST[‘input neve’], ha get volt, akkor $_GET[‘input neve’] módon hivatkozhatunk rá. Ezeket a szebben kezelhetőség kedvéért változókká alakítjuk.

$nev = $_POST[‘nev’]; $email = $_POST[‘email’]; $ertesites = $_POST[‘ertesites’]; $komment = $_POST[‘komment’]; $id = $_POST[‘id’];

És akkor a továbbiakban már csak mint $nev, $email, stb. formában említhetjük. Az értékek átvétele ezzel meg is történt. Folytassuk a dolgot az adatbázis-művelettel! Először is kell egy tábla, amibe a kommentet tárolhatjuk. Öt adatot szeretnénk eltárolni, de mivel nem lehetünk biztosak abban, hogy az öt közül bármelyik is alkalmas lenne indexelésre (leltározásra), ezért egy hatodik mezőt is betervezünk: komment-id, ezt majd auto incrementre állítjuk, ha emlékszünk még ez mit jelent. Sőt, a kommentek esetében nem árt, ha láthatjuk, mikor születtek, úgyhogy egy hetedik mező is kell: dátum.

WEB “DIY” BÖLCSÉSZEKNEK

Dátum:

http://walap.hu/php/date.php

A

date() funkció egy ugyanolyan beépített funkció, mint a mysqli_query(), tehát ezt már megprogramozták helyettünk. Nekünk csak annyi a dolgunk, hogy a zárójelbe beírjuk, hogy a dátum melyik részét és milyen formátumban, milyen tagolással kérjük. A példában egy magyaros eredmény látható.

7

A dátumot egyszerűen a szervertől kell lekérni: date(Y. m. d. H:i); Formátumra vonatkozó kód jelentése: Y Év, 4 számjeggyel kiírva (más kódok is léteznek) m Hónap, 2 számjeggyel kiírva d Nap, 2 számjeggyel kiírva H Óra, 00-23 formában 2 számjeggyel kiírva i Perc, 2 számjeggyel kiírva Amilyen központozást a zárójelben alkalmazunk, olyan központozású lesz az eredmény. Tehát ha az van a kódban, hogy

ŰRLAPOK dátum

a böngészőben így jelenik meg:

2014. 03. 19. 07:04

a date(Y.-m-d H:i) így: a date(d-m-Y, H:i) így:

2014-03-19 07:04 19-03-2014, 07:04.

Tehát ezt is változóvá alakítjuk, és mikor érkezik egy komment, a változót megtölti a szerver, és azt is eltárolja az adatbázisunkban. Változóként így deklaráljuk: $datum = date(Y. m. d. H:i);

98

WEB “DIY” BÖLCSÉSZEKNEK

phpMyAdminban elkészítjük a `komment` táblánkat. komment-id primary key, INT, 11, auto increment

7

posztok-id INT, 11

nev VARCHAR, 150

email VARCHAR, 150

ertesites INT, 1

komment TEXT

datum VARCHAR, 19

A posztok-id többször is lehet ugyanaz, hiszen ez lesz az, amiből tudni fogjuk, hogy a komment melyik posztunkra érkezett, és jó esetben egy posztra több komment is befut. Az értesítésnél pedig azért legyen a kiosztott hely 1, mert elég egy számjegy, hogy tudjuk, kér-e értesítést: 0 ha nem, 1 ha igen. Törekedjünk az egyszerűségre. Nincs más dolgunk, mint beszúrni a beérkezett kommentet az adatbázisba.

WEB “DIY” BÖLCSÉSZEKNEK

Jogosan

felmerülhet a kérdés, hogy mi van akkor, ha nem töltik ki valamelyik mezőt. Erre az esetre kell írnunk néhány feltételes parancsot. Ezeket elágazásoknak hívjuk, de a lényeg a feltételesség. Lényegében, magyarul szólva azt kéne megprogramoznunk, hogy ha van érték a $nev, $email, $ertesites, $komment változókban, akkor hajtsa végre a beszúrást, máskülönben írjon ki hibaüzenetet.

7

A HTML5 szabvány ezt lényegesen egyszerűbbé teszi. Az input attribútumai közé csak be kell írnunk, hogy required (kötelező).

Sajnos 10-es Internet Explorernél régebbi Internet Explorer böngészők ezzel nem tudnak majd mit kezdeni, márpedig 8-nál újabb verzió nem telepíthető a Windows XP-s gépekre. Windows XP-t pedig még mindig sokan használnak, például én is. Érzem persze a társadalmi nyomást.

ŰRLAPOK feltételes végrehajtás php-ban 100

Az, hogy egy változó üres-e, kétféle funkció használatával tudjuk ellenőrizni. Az egyik az isset(), a másik az empty(). Mindkettő ugyanazt tudja, csak fordított előjelet vizsgál: az isset() azt, hogy be van-e állítva a változó, az empty() azt, hogy nincs-e értéke. Ha azt próbáljuk elkerülni, hogy üres érték kerüljön az adatbázisba, jobb az empty-vel ellenőrizni. A tagadás a PHP-ben a ! jel. A $komment példáján ezek közül választhatunk: isset($komment) !isset($komment) empty($komment) !emtpy($komment)

Van komment Nincs komment Nincs komment Van komment

Nem biztos, hogy ha ezt tovább magyarázom, jobban érthető lesz, de más dolgoknál is jól jön még az, ha tudjuk, hogy a PHP ha lát egy kifejezést, egy deklarálást, akármit, akkor azt mintegy “felcímkézi”, hogy igaz, vagy hamis.

WEB “DIY” BÖLCSÉSZEKNEK

Elágazás:

http://walap.hu/php/elagazas.php

Itt jön az elágazás része, a feltételszabás. Elágazást a while-ciklushoz hasonlóan írunk, tehát kiírjuk a varázsszót, zárójelben megadjuk a feltételt, és kapcsos zárójelben az utasítást. if( isset($komment) ) { echo ‘nem üres’; }

Ilyenből sokat tehetünk egymás alá, például így: if( if( if( if(

7

!isset($nev) ) { echo ‘nem adtál meg nevet!’; } !isset($email) ) { echo ‘nem adtál meg e-mail címet!’; } !isset($ertesites) ) { echo ‘nem adtad meg, hogy kérsz-e értesítést!’; } !isset($komment) ) { echo ‘nem írtál kommentet!’; }

De az igazi elágazás úgy teljes, ha a feltétel (if) mellé megadunk egy máskülönben (else) kitételt is. if(feltétel) { parancs alapjáraton } else { parancs máskülönben }

Ha több feltételt szeretnénk megvizsgálni, például mi négy változó együttes kitöltéséhez kötjük a kommentelést, akkor az if( zárójelein belül ) megadhatunk egy felsorolást. AND és OR szavakkal tudjuk ezt megtenni. Nekünk az AND-re lesz szükségünk, logikusan.

ŰRLAPOK feltételes végrehajtás php-ban 101

if( !empty($nev) AND !empty($email) AND !empty($ertesites) AND !empty($komment) ) { $con=mysqli_connect(‘localhost’, ‘root’ , ‘ ‘, ‘development’); mysqli_query(“SET NAMES utf8”); $eredmeny = mysqli_query($con, “INSERT INTO `komment` (`komment-id` , `posztok-id` ,`nev` ,`email` ,`ertesites`, `komment`, `datum`)VALUES (NULL , ‘”.$id.”’, ‘”.$nev.”’, ‘”.$email.”’, ‘”.$ertesites.”’, ‘”.$komment.”’ , ‘”.$datum.”’);”); mysqli_close($con); } else { if( !isset($nev) ) { echo ‘nem adtál meg nevet!’; } if( !isset($email) ) { echo ‘nem adtál meg e-mail címet!’; } if( !isset($ertesites) ) { echo ‘nem adtad meg, hogy kérsz-e értesítést!’; } if( !isset($komment) ) { echo ‘nem írtál kommentet!’; } }

WEB “DIY” BÖLCSÉSZEKNEK

Ezzel

elértük azt, hogy csak akkor szúrja be az adatbázisba a dolgokat, ha minden ki van töltve, különben meg hibát írjon ki. Ha ajaxos megoldást készítenénk, akkor a PHP rész itt érne véget, viszont a html rész valamivel – nem sokkal – bonyolultabb lenne. A probléma gyökere ott van, hogy van egy blogposztunk, kommentelési lehetőséggel az alján, de a komment bevitelt nem a blogposzt oldala fogja feldolgozni, hanem a kommentmotor.php. Ha nem akarunk az ajax-ba bonyolódni, akkor két lehetőségünk van: az egyik, hogy a kommentek feldolgozását is azon az oldalon végezzük el, ahol a form van, a másik pedig kicsit kettédobja a feladatokat: a blogposzt-oldal is dolgozik még egy kicsit, meg a kommentmotor.php is.

7

Lényegében a visszajelzés résznél járunk. Átvettük a form értékeit, beszúrtuk az adatbázisba, és most szeretnénk látni az új kommentet a többi komment között. Ha valamit nem töltöttünk ki, szeretnénk tudni róla, hogy pótolhassuk. Igazából ez utóbbi bonyolítja meg egy kicsit a dolgot. Volt a kommentmotor.php-ben egy olyan részünk az if elágazásban, hogy ha üres bármelyik változó, akkor a máskülönben részt hajtsa végre, ami további feltételeket szabott: ha üres ez, írja ki azt, ha üres amaz, írja ki emezt, stb. Ezt most jegyezzük meg egy pillanatra! A blogposztnál, ahol a formot elhelyeztük, a formban az action=”” attribútum a kommentmotor. php elérési útját tartalmazza, tehát ha a formot elküldi (leokézza a kommentjét) a felhasználó, akkor átirányításra kerül a szerencsétlenje a kommentmotor.php-ra. Azzal viszont az a baj, hogy a kommentmotor.php nem gondoskodik semmiféle látványról, tehát azt jobb, ha nem látja a felhasználó. Erre egy jó módszer, hogy a kommentmotor.php-ba is teszünk egy átirányító funkciót, ami visszanavigálja a böngészőt ahhoz a poszthoz, ahonnan jött. Mivel ez már a 21. század, ezért olyan gyorsan történik mindez, hogy egy szemvillantás alatt megvan, tehát nekünk akár jó is lehetne ez a megoldás. A visszairányítás így néz ki PHP-ben:

ŰRLAPOK átirányítás php-ban

header(“Location: “.$_SERVER[‘HTTP_REFERRER‘]);

102

Ez csak akkor működik, ha olyan helyen kerül rá sor a kód végrehajtásában, amikor még semmi más nem került megjelenítésre. És akkor most kell az, amiről az előbb írtam, hogy meg kéne jegyezni. Ha a kommentmotor.php-ben echo-val megjelenítjük a hibaüzenetet, a header() funkció már nem fogja tudni visszairányítani a böngészőt. Akkor pedig ott reked a felhasználó egy nagy fehér képernyő előtt, a hibaüzenettel, amit nem fog tudni korrigálni, mert már nem a blogposztnál van.

WEB “DIY” BÖLCSÉSZEKNEK

header(“Location: “.$_SERVER[‘HTTP_REFERRER‘]);

7

A () közé kerül az átirányítás címe. A formulája ez: “Location: URL”. A visszairányításnál látjuk, ott egy pont a záró idézőjel után, mert egy PHP kifejezést fűzünk hozzá a PHP szemmel nézve értelmetlen kifejezéshez, a locationhoz. A $_SERVER[‘HTTP_REFERRER’] nekünk nem mond semmit, de a szervernek igen: ez az a hely, ahonnan érkezett a “felhasználó”. “Menj vissza oda ahonnan jöttél”. De azt is lehet, hogy előrefelé irányítjuk a felhasználót, egy meghatározott oldalra: header(“Location: http://walap.hu”);

Látjuk, ha konkrét URL-t adunk meg, akkor nem kell PHP kifejezéssel megtörni az értékleírást.

ŰRLAPOK átirányítás php-ban

Harmadik variáció, hogy a felhasználót visszairányítjuk a blogposzthoz, de az URL-be teszünk egy GET értéket: header(“Location: “.$_SERVER[‘HTTP_REFERRER‘].”?hiba=igen);

A blogposzthoz pedig beteszünk egy kódot az ilyen esetek fogadására: if($_GET[‘hiba‘] == igen) {echo ‘Hiba!‘;}

103

A dupla egyenlőségjel a PHP-ban az, ami nálunk a sima egyenlőségjel. A sima PHP nyelven azt jelenti, hogy “legyen ennyi“.

WEB “DIY” BÖLCSÉSZEKNEK

Kezdő

szinten a bonyolult út az egyszerűbb, mégpedig az, mikor a form feldolgozását a formmal egy lapon végezzük. Felejtsük el az előző oldalon írtakat, és egyszerűen a kommentmotor. php feladatát tegyük bele a blogposztjainkba! Egy blogposzthoz mindenestül a következő kódrészek megírásával tudunk komment lehetőséget biztosítani.

7



104

WEB “DIY” BÖLCSÉSZEKNEK

Inputtisztítás:

http://walap.hu/php/inputtisztitas.php

Maxlength:

http://walap.hu/html/input_text.php

Alap

szintű biztonsági óvintézkedéseket könnyen megtehetünk, és a formoknál pont van egy. A formok azért is különösen érzékenyek, mert ahogy azt az eddigiekből láttuk is, a “PHPnak” üzenünk, és az adatbázisba küldünk dolgokat. Nagyon leegyszerűsítve a formokkal parancssorokat is küldhetnénk, persze nem mi, de egy kezdő hekker minden további nélkül.

7

A szöveges (text) inputok és a szövegmező (textarea) alkalmasak arra, hogy a legkönnyebben bepróbálkozzanak a rendszeren. Az elsődleges védelmi technikánk az lesz, hogy ahol csak tudjuk, limitáljuk a beírható karakterek számát a maxlength=”” attribútummal.

A másodlagos védelmi technikánk az inputtisztítás lesz. Ezt a PHP kódban végezzük el, ott, ahol fogadjuk az adatokat. $komment = $_POST[‘komment’];

Amit tisztítás alatt értünk, hogy a beérkező értékből a nem szokványos karaktereket eltávolítja, vagy átkódolja a PHP funkció, amit alkalmazunk. Valaki például ezt küldi el kommentként: “DELETE FROM `komment`”

ŰRLAPOK inputtisztítás

ami egy SQL parancs, és mindent kitöröltet a komment táblában. Ha eltávolítjuk az idézőjeleket, akkor a parancs már hibás lesz, és nem tud lefutni. A példakód ebben a formájában persze egyébként sem fog kárt okozni, de talán érzékletes. Amit tehetünk, hogy kombinálunk funkciókat, vagy megelégszünk egy funkcióval. Néhány példa: trim() stripslashes()

105

mysql_real_escape_ string()

A trim()-nek meg lehet adni, hogy milyen karaktereket távolítson el. A K betűket így lehet eltüntetni a $változó -ból: trim($változó, ‘K’). Arra jó, hogy eltávolítsuk az idézőjelek mindkét fajtáját. Használata: $komment = stripslashes($_POST[‘komment’]); Használata: mysql_real_escape_string($_POST[‘komment’]); Eltávolít minden olyan karaktert, ami a mysql kijátszását szolgálhatja.

WEB “DIY” BÖLCSÉSZEKNEK

Mitévő legyek?

1. kezdd kisebb feladattal: készíts egy hírlevél feliratkozó boxot az oldalsávra. Két inputtal: név és e-mail. Meg egy submit gomb. A feldolgozást egy másik fájl végezze, és a feldolgozás után irányítsa vissza a felhasználót a kiinduló oldalra. 2. praktikus a komment boxot valamelyik közösségi oldal komment moduljával megoldani 3. készíts közvélemény kutató boxokat a cikkeid végére

106

OBJEKTUM ORIENTÁLT PROGRAMOZÁS

WEB “DIY” BÖLCSÉSZEKNEK

Az

objektum orientált programozásról már írtam mindjárt az elején. Az a helyzet, hogy ha saját fejlesztésű oldalakban gondolkodunk, akkor – különösen nekünk – elengedhetetlenül szükségünk lesz egy alapszintű OOP megoldásra. Ugyanis nagy keservesen keresztülrágjuk magunkat olyan fogalmakon, amikről sosem hallottunk, összehozunk egy alap-oldalt, ami aránylag vállalhatóan néz ki, de aztán nagyon hamar megérik bennünk az igény, hogy ezt vagy azt profibban oldjuk meg. És hozzá fogunk nyúlni az oldalunkhoz óránként.

8

Mikor az első komolyan gondolt honlapomat készítettem el, törekedtem arra, hogy később is módosítani tudjam az egészet. És 2-3 évig jól is szolgált az a primitív rendszer, amit kitaláltam, de utóbb rájöttem, hogy OOP-s megoldással egyszerűbb, a bölcsész-lét nem kifogás az OOP mellőzésére. Ahhoz, hogy az oldalhoz könnyű legyen hozzányúlni, óriási segítség, ha konvencionális szerkezetet álmodunk meg neki. Valami olyasmit, amivel az internet népe évek múlva is ki lesz békülve – mert nem fejlődik olyan rohamosan a net, hogy ilyen pontokat ne találhatnánk. A fejléc-szövegtörzs-oldalsávlábléc négyes például egy évtized múltán csak most kezd kicsit halványodni. A négy elem: fejléc, szövegtörzs, oldalsáv, lábléc közül a szövegtörzs az, amihez nem nagyon kell nyúlnunk, hiszen CSS-ben meg tudjuk tenni a beavatkozásokat: szélesség, háttérszín, betűtípus, betűméret, stb. A szöveg pedig úgyis dinamikusan az adatbázisból jön, tehát azt meg ott tudjuk megváltoztatni. A fejléc, oldalsáv és lábléc többnyire minden blogposztunknál azonosan kell, hogy megjelenjen. A probléma könnyen belátható: ha van 10 blogbejegyzésünk, az 10 példányt jelent abból az oldaltípusból, amit az elején megálmodtunk. Ha kitaláljuk, hogy a fejlécben a menü bővüljön még egy rovattal, akkor mind a 10 oldalnál hozzá kell nyúlnunk a kódhoz. 100 bejegyzés esetén ezt 100-szor kell megtennünk, amire nem rendezkedhetünk be.

OOP mi a haszna?

108

WEB “DIY” BÖLCSÉSZEKNEK

Amit a kezdetekkor kitaláltam, hogy van egy egyszerű PHP parancs, az include(), ami annyit tesz, hogy külső fájlok tartalmát az oldal részévé teszi.

[...]

8

a head.php tartalma pedig ez:

Bolcseszblog.hu

Akkor a kód lefutásakor a böngésző összerakja az egészet, és ez lesz a végeredmény:

Bolcseszblog.hu

[...]

OOP OOP helyett: include 109

Ki lehet találni, hogy mit jelent ez számunkra... Az oldalnak azon részeit, amik nem dinamikusak, pl. menü, lábléc, esetleg oldalsáv, egyszerűen include paranccsal tesszük a sablonunk, oldalunk részévé. Létrehozunk például egy includes könyvtárat, és bepakoljuk a head.php, fejlec.php, oldalsav.php és lablec.php fájlokat. És az összes blogposzt oldalunk ezeket a fájlokat fogja behúzni, tehát ha ezekben a fájlokban megváltoztatunk valamit, az minden oldalra kihatással lesz, ami tartalmazza (include).

WEB “DIY” BÖLCSÉSZEKNEK

A

könyv elején írtam arról, hogy a karakterkódolás egy ponton még kritikus lesz. Ez az a pont. Egy fejlec.php esetében már olyan dolgokat fogunk beletenni, ami a részét képezi, például konténereket. Nézzünk egy nagyon egyszerű kivitelezést!

8

Ha nem figyelünk, könnyen szétcsúszhat az oldalunk. Mit felejtettünk el? Hogy include használata esetén az include-olt fájlok nem egyszerűen UTF-8 kódolással kellenek nekünk magyaroknak, hanem UTF-8 BOM nélkül. Ékezetes betűket használunk, és ilyenkor sima UTF-ben kap a fájl egy BOM udvariaskodást az elejére.



többi dolog

fejlec.php (BOM-mal mentve):

Főoldal

A kódunk tehát a böngésző szemében valami ilyesmi:

OOP az include és a BOM



[BOM] Főoldal

többi dolog

110

És megpróbál a BOM-nak is valahogy helyet csinálni, miközben az nem arra való. A kódolás legyen mindig utf-8 BOM nélkül.

WEB “DIY” BÖLCSÉSZEKNEK

A

mi problémánk az, hogy az oldalunk idővel elavult lesz, viszont eközben egyre csak szaporodnak a blogposzt-oldalaink (az átalakításra szánt sablonunk példányai), ezért képtelenség lenne visszamenőlegesen is módosítani az oldalak kinézetét. A CSS-sel az oldalt át tudnánk alakítani, de szerkezeti újításokat nem tudnánk alkalmazni.

8

A problémánkra egy olyan megoldás lenne ideális, amikor elég elkészítenünk egyetlen sablont, és aztán a módosításkor is elég módosítani azt az egyetlen sablont, és egységesen az összes régi bejegyzésünk is az új köntösben jelenik meg. Pont ezt tudjuk megoldani OOP technikával. Két fogalmat kell megtanulnunk: osztály és példány. Példány értelem szerűen egy blogposzt lesz. Példányok, így többes számban pedig mind a sok száz blogbejegyzés, amiket egy év alatt megírtunk. Minek a példányai lesznek? Ezek egy osztály példányai lesznek. Az osztály pedig lényegében a sablonunk. De ne hívjuk sablonnak, csak gondoljunk úgy rá! Mivel az objektum orientált programozás ennél sokkal izgalmasabb dolgokra is képes, ezért nem árt, ha megszokjuk az elvontabb osztály fogalom használatát. Az osztály (a “sablonunk”) szinte pontosan leírja, hogyan is néz ki az oldal. Egy dolgot nem tesz meg: nem tartalmazza a blogposztonként más és más tartalmi elemeket, csak azok helyeit. Tehát az osztály tartalmazza az általános tulajdonságokat és az egyedi tulajdonságok helyeit, a példányok pedig kizárólag az egyedi tulajdonságokat.

OOP alapfogalmak

111

WEB “DIY” BÖLCSÉSZEKNEK

Ez egy osztály lebutított tartalma, pirossal szedve, amit PHP-ban kéne OOP-val megfogalmaznunk:

ide jön az gyedi érték #1

Egy mondat erről: ide jön az egyedi érték #2

8

Ennek az osztálynak egy példánya pedig PHP-ból magyarosítva csak ennyit tartalmaz: használd az osztályt (ideírom az elérési utat)! Az egyedi érték #1 értéke ez: vers Az egyedi érték #2 értéke ez: zsarnokság

OOP alapfogalmak

Jelenítsd meg a példányt!

Az eredmény pedig forráskód-nézetben ez lesz:

112

vers

Egy mondat erről: zsarnokság

WEB “DIY” BÖLCSÉSZEKNEK

Tehát

OOP technikával lesz egyetlen mesterfájlunk, ami a megjelenítéshez szükséges HTML kódokat és más kódokat tartalmazza, valamint lesz rengeteg példány fájlunk, amik az egyedi értékeket tartalmazzák alapvetően. A példány fájlt beírva a böngészőbe meghívásra kerül a mesterfájl is, és összeáll az oldal gyönyörűen, úgy, hogy a háttérben zajló folyamatokról semmit sem sejtünk.

8

PHP-ban sem sokkal bonyolultabb. Az osztaly.php ilyen, most csak csodáljuk meg, aztán majd ízekre bontjuk. Részletesebben is bemutatom, de most csak annyit, hogy zavaró lehet a public function Megjelenites() { } és társai kifejezés, de azt most próbáljuk kizárni a tudatunkból, és koncentráljunk a HTML kódokra: ott vannak, értjük. Az osztaly.php-nak kell tartalmaznia az általános leírást.

OOP alapfogalmak

113



Egy mondat erről:

WEB “DIY” BÖLCSÉSZEKNEK

Az

előző oldalon bemutatott osztaly.php-nak egy tetszőleges példánya ezúttal a zsarnoksag.php lesz, és így néz ki, most csak csodáljuk meg, aztán majd ízekre bontjuk ezt is:

Egy szabadsag.php így nézne ki:

114

WEB “DIY” BÖLCSÉSZEKNEK

Megint Göngyöljük

8

az a helyzet áll elő, hogy a magyarázat bonyolultabb, mint maga a kivitelezés. fel az ügyet!

Itt, a példány kódjában, a zsarnoksag.php kódjában az első sorban látunk egy require(); parancsot. Ez lényegében azt teszi, amit az include(); parancs. A zárójelek közé ugyanúgy az elérési utat kell megadni. Gyorsan megjegyzem, ismétlésként, hogy amit a példában látunk, az egy relatív elérési út, és sajnos a PHP biztonsági okokból nem támogatja az abszolút elérési út megadását, sem az include() sem a require()-nál, tehát pl. require(‘http://bolcseszblog.hu/includes/osztaly.php’);-t nem fogja végrehajtani, biztonsági kérdésekre fog hivatkozni. Ami a zsarnoksag.php második sorában van, az egy formula, amivel létrehozzuk az osztály egyik példányát. Itt a varázsszó a new lesz. $peldany = new Oldal();

OOP példány összetevői

115

A változó neve – $peldany – lehet bármi, akár $pillempaty is, a lényeg, hogy következetesen használjuk. Ez a new Oldal(); pedig nem csinál mást, mint a new-val jelzi, hogy ez egy új példány lesz, annak az osztálynak, amit abban a fájlban írtunk le, aminek az elérési útját az előbb adtuk meg. És ha kicsit visszaugrunk az osztaly.php példakódjához, látunk egy class Oldal { } blokkot, és persze ezen a blokkon kívül semmi mást (csak belül). Ha ott class Vers { } állna, akkor a példányban, a zsarnoksag.php-ban ez kéne, hogy legyen: $peldany = new Vers(); Tehát az első két sorral intéztük el, hogy megjelenjen a “sablonunk”. Nézzük tovább!

WEB “DIY” BÖLCSÉSZEKNEK

$peldany->egyedi_ertek_1 = ‘vers’; $peldany->egyedi_ertek_2 = ‘zsarnokság’;

8

Ez sok magyarázatot nem igényel: ez a módja annak, hogy azokat a változó értékeket, amiknek helyet alakítottunk ki az osztaly.php-ban, megadjuk. Furcsa lehet ez a $valtozo->osztalyban_szereplo_nev = ‘valami’; formula, de ha csak úgy tekintünk rá, mint $valtozo = ‘változó értéke’; akkor érthetőbb. A dolog mögött álló logika egyébként az, hogy van egy változónk, ez esetben a $peldany. A $peldany értéke micsoda? Mindaz, amit a new Oldal(); parancs gyakorlatilag jelent, tehát egy elég kiterjedt dolog, benne két bizonytalansággal – az egyik, hogy mi az egyedi_ertek_1, a másik, hogy mi az egyedi_ertek_2.

OOP példány összetevői

116

Ezt a “bizonytalanságot” a $peldany-on belül pedig úgy tudjuk felszámolni, ha így adjuk meg: $peldany->egyedi_ertek_1 = ‘vers’; $peldany->egyedi_ertek_2 = ‘zsarnokság’;

Tehát a → jellel tájékoztattuk a szervert, hogy ez az, amit keres.

WEB “DIY” BÖLCSÉSZEKNEK

Összefoglalva:

http://walap.hu/php/peldany.php

És végül elérkeztünk az utolsó sorhoz, $peldany->Megjelenites();

Nem kell meglepődnünk, hiszen az első sorban csak arról szólt a parancs, a require(), hogy használja az osztaly.php-t, arról nem szólt, hogy mire használja. A második sorban arról szólt a parancs, hogy ihol egy új Oldal() példány, de ezzel még nem mondtuk azt, hogy jelenjen is meg. Ha azt írtuk volna, hogy $peldany = Oldal(); akkor már elvárhattuk volna, mert ez azt jelenti, hogy hajtsa végre, a $peldany = new Oldal() viszont a new miatt már egészen mást jelent. A $peldany-on belüli két változó deklarálása szintén nem gondoskodik a megjelenítésről, ezért van hát szükség egy parancsra, ami úgy szól, hogy futtasd le!

8

$peldany->Megjelenites();

Ha visszalapozunk az osztaly.php példakódjához, megtaláljuk ezt a Megjelenites(); dolgot, ez volt: public function Megjelenites() { echo ‘’; $this->MegjelenitesHead(); $this->MegjelenitesBody(); echo ‘’; }

OOP példány összetevői

Ez egy funkció, aminek Megjelenites() a neve, ezt jelenti az, hogy public function Megjelenites(). Lehetne a neve NeJelenitsdMeg(), a név nem számít, mi találjuk ki. Ugyanúgy funkció, mint az include() vagy a mysqli_query(), csak azokat a PHP fejlesztői beépítve megprogramozták már, a Megjelenites() viszont a saját találmányunk, úgyhogy nekünk kell leírni a kapcsos zárójelek közé, hogy mit is csinál egy ilyen funkció. Az pedig rém egyszerű. A fenti példakód magyarul: Először megjelenít egy nyitó taget: . Ezután lefuttatja a MegjelenitesHead() funkciót. Ezután lefuttatja a MegjelenitesBody() funkciót. Ezután megjelenít egy záró taget:

117

Azt pedig nem is kell magyaráznom, hogy a MegjelenitesHead() és a MegjelenitesBody() funkció pont úgy működik, mint a Megjelenites() funkció.

WEB “DIY” BÖLCSÉSZEKNEK

A példakódunk jobbra látható. Mit írtunk le ezzel? Az egész fájl nem tartalmaz mást, mint egy class (aminek Oldal nevet adtunk) leírását. class Oldal { //sok minden részlet }

8

Egy osztály (class) leírásának megvan a sorrendi szabálya. Először is, ahogy azt látjuk, megnevezzük, hogy egy osztályt fogunk definiálni, megadjuk a nevét is, és kapcsos zárójelet nyitunk. Első lépésben mindig nyissunk és zárjunk, és belülre csak utána írjunk, mert elég nehéz lenne kiigazodni, melyik zárójel minek a párja. Egy osztály leírásánál a kapcsos zárójelen belül először a “bizonytalansági pontok”, a változók felsorolását kell megtenni.

OOP osztály összetevői

118

public $egyedi_ertek_1; public $egyedi_ertek_2;



Egy mondat erről:

egyébként arról van szó, hogy ezek a változók lehetnének például private-ok is, nagyjából úgy lehetne megfogalmazni, hogy ez a változó (és a funkciók) egy tulajdonsága, ami a hozzáférhetőséget szabja meg. Nem emberi szemszögből, hanem a kódrészek szempontjából. Bizonyos kódrészek nem fogják tudni használni a változóinkat vagy funkcióinkat, ha private-ra vannak állítva, és néha pont erre lehet szükség (nekünk nem). Itt azokat a változókat kell felsorolni, amiket a “példánytól várunk”. A mi esetünkben ez két változó, de ez esetfüggő természetesen. Ezzel a felsorolással tesszük lehetővé, hogy a továbbiakban felsorolt funkciók használni tudják a példányban megadott értékeket. Ez a protokollja a dolognak.

WEB “DIY” BÖLCSÉSZEKNEK

Összefoglalva:

http://walap.hu/php/osztaly.php

Egy osztály leírásánál a kapcsos zárójelen belül a második blokk a funkciók felsorolása, és azok leírása. Tehát az osztály felépítés nem terjedelem-arányosan: class OsztalyNeve { változók felsorolása egyszerűen a változó megnevezése $valtozo; vagy public/private $valtozo; funkciók felsorolása funkción belül a fent megnevezett változókra $this-> mutatóval hivatkozunk $this->valtozo }

8

A funkciók annál sokkal többre képesek, mint HTML kódok megjelenítése, de mi most csak arra fogjuk használni. A funkciók használata már a kisujjunkban kell, hogy legyen, hiszen beépített funkciókat már használtunk: mysqli_close(), mysqli_query(), date(). Ha meg akarunk határozni egy funkciót, akkor kapcsos zárójelet nyitunk, és leírjuk, hogy mi történjen. A funkciók leírása blokkban szükségünk lesz a példányban szereplő értékekre. Ott kezdődik a dolog, hogy az osztály leírásakor az első blokkban megemlítettük, ezáltal létrehoztuk. $valtozo;

Aztán minden új példányban megadjuk az értékét:

OOP osztály összetevői

$peldany->valtozo = ‘valami’;

És végül az osztályban a funkciók fogják használni, például most megjeleníteni: echo $this->valtozo;

A $this nagyjából olyan szerepet tölt be, mint a példánynál a $peldany – vagy ahogy éppen nevezzük – de ezt nem mi definiáljuk, nevet sem mi adunk, ez egy fix kifejezése a PHP nyelvnek. Úgy képzelhetjük el, mint egy tömböt, hogy a pici külsője ($this) nagy belsőt takar (benne vannak a változók, amiket használni akarunk), és ezeket $this->valtozo_neve; formában használjuk.

119

WEB “DIY” BÖLCSÉSZEKNEK

Ez

a tudás már elegendő, hogy összerakjuk a blogposzt sablonunkat. Mikor egy sablont készítünk, először egy sima HTML oldalt rakunk össze. Aztán még mindig nem “osztályosítom” a sablont, csak beleteszem az adatbázis-műveleteket, hogy az oldal pont úgy működjön, ahogyan kell. Tehát ha már fullosan megvan a kívánt végeredmény, akkor végiggondolom, hogyan bontsam összetevőire, és mik lesznek azok a változók, amik egyedi értékeket fognak tartalmazni minden leendő blogposzt példány esetében. A tapasztaltabbak azt javasolják, hogy a kezelhetőség, a hibalehetőségek csökkentése érdekében jobb szétbontani a dolgot. Van tehát egy kifogástalanul működő sablonunk, amit felosztunk funkciókra. A funkcióknak tetszőleges nevet adunk (minél informatívabb legyen).

8

A procedurális, leíró stílusú kódomnak a részében csatlakoztam az adatbázishoz, és ott definiáltam azokat a változókat is, amit a ban használok. Ez a funkciókra bontás esetén figyelmet igényel, ugyanis ebben a formában nem lesz átjárás a funkciók között, hiszen a funkciók egymásutánja nem jelent semmit, a funkciók különálló információ-csomagok, építőelemek.

OOP példa

120



A nyitó és záró tageket nyugodtan

hozzácsaphatnám a tervezett két funkcióhoz, de

szebb lesz, ha a tervezett MegjelenitesBody() csak a

,

A következő oldalon látható az “osztályosítás” utáni

állapot.

WEB “DIY” BÖLCSÉSZEKNEK

,

WEB “DIY” BÖLCSÉSZEKNEK

8

A példány pedig, például az elso_oop_blogposztom.php így néz ki:

Habkönnyű, nem igaz? Ezzel a PHP alapjait elsajátítottuk, fogunk tudni kérdéseket feltenni a Google-nak, és ha ott nem találunk választ, akkor a fórumoknak. Szerencsére az elmúlt 10 év alatt nagyjából mindent megkérdeztek már a fórumokon, úgyhogy azonnal megoldáshoz juthatunk, ha elakadunk. Angolul keresve könnyebb dolgunk lesz, de magyar nyelven is találhatunk meglepően naprakész helyeket – ezekhez a Google úgyis elvezet.

OOP példa

Ha már ezen a terepen átverekedtük magunkat, jutalomfalat lesz a javascript.

122

WEB “DIY” BÖLCSÉSZEKNEK

Hogyan csináljam?

1. állítsd össze a példányosítani kívánt oldaladat HTML-ben 2. írd meg bele a szükséges adatbázis műveleteket 3. logikusan válaszd szét leendő funkciókra az eredményt 4. hozz létre egy osztályt, benne annyi funkcióval, amennyit terveztél, adj nekik beszédes neveket 5. a funkcióka tedd bele az oda szánt HTML és PHP kódokat 6. hozz létre egy példányt, és ellenőrizd, hogy lefut-e 7. ha hibát ír ki, olvasd el figyelmesen, mert általában a hibaüzenet pontosan megmondja, mi a baj. Ha nem boldogulsz, másold ki a hibaüzenetet a Google-ba

123

JAVASCRIPT TÚLÉLŐCSOMAG

WEB “DIY” BÖLCSÉSZEKNEK

Tényleg

csak néhány alap dolgot szeretnék bemutatni, amire viszont szükség van, ha olyan oldalt szeretnénk, amiben van egy kis mozgás. Egy tisztán javascript fájl kiterjesztése .js, de ha .html fájlba teszünk JavaScriptet, akkor is gond nélkül lefut, mert szemben a PHPvel ez egy kliens oldali script, tehát a felhasználó böngészője fogja lefuttatni.

9

Számunkra az a legkönnyebb, ha a JavaScripthez úgy viszonyulunk, mint a HTML-hez. Ezt arra értem, hogy ugyanúgy látványa van, szemben a PHP-vel. Kicsit mintha a PHP lenne Hannibal ezredes, a HTML lenne Mr. T, a javascript pedig Szépfiú. De ez szigorúan csak ebben a könyvben igaz, ugyanis a javascript legkisebb haszna csak, hogy a honlapokat megmozgatja. Csak két dolog hirtelenjében: a Google Analytics javascript segítségével gyűjti a statisztikát az oldalakról, és a Like gombok, Google+ gombok javascript + html kombinációk. Játékokat lehet programozni JavaScripttel (de ne keverjük a Java programozási nyelvvel). Egy a lényeg: teljesen másra használjuk, mint a HTML-t, vagy a PHP-t.

JavaScript, Jquery

Nem kell lehozni a csillagokat az égről, de nagyságrendekkel simább honlapot tudunk összehozni, ha ki merjük bővíteni a HTML-CSS-PHP hármast JavaScripttel. Ha olyan menüt szeretnénk, amire ha rákattintunk, legördül, és al-menüpontok jelennek meg, JavaScriptet kell használnunk. Ha a blogposztjainkban lévő képeket nagyítani szeretnénk, JavaScriptet kell használnunk. Ha modern dizájnt szeretnénk, akkor meg különösen. És ha ezeknek a logikáját sikerül megértenünk, a formok ajaxos elküldése sem fog nehézséget okozni. Jellegét tekintve, ahogy mi fogjuk használni a JavaScriptet, mozgásközpontúnak nevezhető, tehát a kódok többsége arról fog szólni, hogy egy dolog a honlapunkon hogyan változzon meg ennek vagy annak a hatására. A PHP-ban mindent arra hegyezünk ki, hogy a megfelelő adat/érték/eredmény jöjjön ki a végére, a változók, funkciók erről szólnak. Ez itt most egy más világ, itt nagyjából minden arról szól, hogy mi történjen.

125

Nem végig JavaScriptről lesz szó, hanem át fogunk térni közben a Jquery-re, ami a javascript egy leegyszerűsített, kezelhetőbb változata. A javascript nem olyan egyszerű, de első ránézésre alig fogjuk látni a különbséget egy javascript kód és egy Jquery között. Mint a kínai és a japán írás között.

WEB “DIY” BÖLCSÉSZEKNEK

9

JavaScriptet bárhová helyezhetünk a HTML-kódba, de általában a nyitó tag után, vagy a záró tag elé szoktuk tenni. A javascript kezdetét is html taggel jelöljük:

Bár a JavaScript nem bonyolult nyelv, de a JavaScript alapján létrehoztak egy egyszerűsített nyelvet, a Jquery-t, ami így igazán egyszerű. Ez a JavaScript körülményes kódjait rövidíti le. Használatuk megegyező.

JavaScript, Jquery beágyazás

126

Illetve annyival bonyolultabb a dolog, hogy a JavaScriptet is és a Jquery-t is a böngésző futtatja le, de mivel a Jquery a javascript “rövidítése”, a böngésző nem fogja érteni. Ezért a konkrét saját kódunk mellett meg kell adnunk azt a Jquery könyvtárat (gyakorlatilag elérési útját a Jquery fájlnak), ami az eseményhez szükséges dolgokat tartalmazza. Ez egy terjedelmes fájl, amin nem kell módosítanunk semmit, választhatunk: vagy lementjük a jquery.com-ról, és csinálunk neki helyet a tárhelyünkön, és azt az elérési utat adjuk meg, vagy egy már meglévő elérési utat adunk meg. Mikor JavaScripthez nyúlunk, azt akarjuk, hogy ha valamivel (selector) történik valami (event), akkor csináljon valamit (effect). Ez a három fő pillére lesz a kódunknak.

WEB “DIY” BÖLCSÉSZEKNEK

9

A valami (selector) kérdése nem bonyolult: amit nevén tudunk nevezni, azok a HTML elemek, tehát a JavaScriptben azokra fogunk hivatkozni. Ennek a mikéntje majdnem az, mint a CSS-ben. Ebben a példában bármelyik bekezdésre kattintva egy párbeszédablak fog felugrani a Hello üzenettel: $(p).click(function(){ alert(“Hello“); });

A nyers/általános HTML elemek minden cicoma nélkül fognak szerepelni: bekezdés mint p, link mint a, stb.

JavaScript, Jquery kiválasztás (selector)

a class ponttal megelőzve: mint $(‘.pelda‘)

Az id pedig kettős-kereszttel megelőzve mint

127

.pelda

$(‘#pelda‘)

#pelda

WEB “DIY” BÖLCSÉSZEKNEK

Az

effektek meghatározása jelenti az igazi jquery tudást. Eventből, ami az eseményeket hívja meg (pl. rákattintás, egér föléhúzás, gomblenyomás) egy aránylag rövid lista van, de effektből rengeteg.

9

Ha a szemünkkel szét tudjuk választani a javascript kódot a három pillérre (selector, event, effect), akkor előbb-utóbb személyre tudunk szabni olyan scriptet is, amit nem mi írtunk, nem magunknak. Például egy példakódot, vagy egy máshol már működő megoldást. Hogy mi mindent lehet végrehajtatni (effect), azt érdemes felfedezni magunknak. Itt most csak két dologgal foglalkozunk: eltüntetünk/megjelenítünk dolgokat, és megváltoztatjuk a stílusát. Néhány példa: alert() show() hide() css(“tulajdonság“,”érték”)

JavaScript, Jquery effekt (effect)

128

css(“tulajdonság“) slide() fadeIn()

felugró ablakban kiírja a zárójelbe írt értéket megjelenít egy eredetileg láthatatlan elemet elrejt egy eredetileg látható elemet a zárójelben megadott tulajdonságot beállítja a zárójelben megadott értékre lekéri az elem zárójelben megadott tulajdonságát fel, vagy le csúsztata az elemet a zárójelben megadottak szerint lassú átmenettel megjelenít addig rejtett elemeket

WEB “DIY” BÖLCSÉSZEKNEK

A

különböző effekteket eseményekkel, eventekkel tudjuk hívni. Ha azt akarjuk, hogy a felhasználó egy gombra kattintva üzenetet kapjon, akkor a kattintás lesz az event. Miféle eventekben gondolkodjunk?

9

A teljesség igénye nélkül: ha a billentyűzeten a lefelé gombot nyomjuk, ha a fölfelé gombot nyomjuk, ha egy meghatározott gombot nyomunk, ha az egérrel rákattintunk, ha az egérrel duplán rákattintunk, ha az egeret fölé húzzuk, ha az egeret lehúzzuk róla, ha scrollozunk az oldalon, ha az oldal betölt. És még néhány nyalánkság, például ha egy formot beküldünk. Ezek nevei JavaScriptben és Jquery-ben:

JavaScript, Jquery események (event)

129

lefelé gombot nyomjuk fölfelé gombot nyomjuk egy gombot nyomunk egérrel rákattintunk egérrel duplán rákattintunk egeret fölé húzzuk egeret lehúzzuk róla scrollozunk az oldalon (vagy az elem fölött) oldal (vagy elem) betölt formot beküldünk.

Javascript hívás

Jquery hívás

onkeydown onkeyup onkeypress onclick ondblclick onmouseover onmouseout onscroll

keydown() keyup() keypress() click() dbclick() mouseover() mouseout() scroll()

onload onsubmit

load() (1.8-a verzióval kivonták) submit()

WEB “DIY” BÖLCSÉSZEKNEK

Ez

két külön esemény, az egyik megmutat egy addig meg nem jelenített elemet (aminek addig a stílusa display: none volt), ez a show, a másik pedig ennek az ellenkezőjét teszi. Almenüknél nagyon praktikus dolog ez. A blogunk menüjébe szeretnénk egy Kapcsolat menüpontot, amin belül lenne szükségünk egy Én és egy Anyukám menüpontra, arra az esetre, ha valakit nagyon felháborítottunk volna.

9

A menük készítését listaként javasolják, és főleg ilyen almenük esetében ez eléggé megkönnyíti a dolgunkat. Ha a listát vízszintessé szeretnénk tenni, csak meg kell adni CSS-ben, hogy display: inline; azaz egy sorban jelenítse meg. Én jobban szeretem a több munkát igénylő megoldást, bár nem sok érv szól mellette. A menü szerkezete ez lesz: • Blogbejegyzések • Kapcsolat ¤ én ¤ mamma mia

JavaScript, Jquery show/hide

130

Listaként így kódolnánk:

• főoldal
• kapcsolat
  • én
  • mamma mia

WEB “DIY” BÖLCSÉSZEKNEK

Az szeretnénk, hogy a kapcsolatra kattintva legördüljön az almenü, tehát akkor azonosítót kell adni a kapcsolatnak, és azonosítót az almenünek. A kapcsolat azonosítója az id=”kapcs” legyen, az almenüé class=”almenu”. Jquery-ben fogjuk megoldani, tehát gondoskodnunk kell a Jquery fájl eléréséről is. Az eseményt kattintásra szeretnénk végrehajtani, úgyhogy a click() parancsot fogjuk használni a

• főoldal
• kapcsolat
  • én
  • felmenőim

WEB “DIY” BÖLCSÉSZEKNEK

Próbáld ki:

http://walap.hu/jquery/toggle.php

9

Ezzel csak annyi a baj, hogy ha egyszer rákattint a kapcsolat menüpontra, egészen addig ottmarad az almenü, amíg nem tölti be újra az oldalt, vagy nem megy tovább egy másik oldalra. Úgyhogy vagy a hide() effektet hívjuk segítségül, és beprogramozzuk, hogy ha valami másra kattint, akkor $(“.almenu”).hide();

Vagy pedig eleve nem a show() effectet használjuk, hanem a slideToggle()-t: $(“#kapcs”).click(function(){ $(“.almenu”).slideToggle(); });

JavaScript, Jquery show/hide

134

A slideToggle segítségével ha először kattintanak a kapcsoltra (“#kapcs”), akkor megjelenik a rejtett almenü, ha másodszor kattintanak, újra eltűnik.

WEB “DIY” BÖLCSÉSZEKNEK

Próbáld ki:

http://walap.hu/jquery/css.php

Css

, ez az okos effect képes megváltoztatni a dolgok stílusát. Ha a kapcsolat menüpontra kattintok, színeződjön el más színre például. Amire külön figyelmet kell szentelni, hogy az állapot visszaállítására is találjunk módot.

9

Ha azt szeretnénk, hogy a blogposztban szereplő képeink kinagyíthatók legyenek az oldalon maradva, akkor csak megadunk Jquery-vel egy nagyított állapotot, és hozzákapcsoljuk a kattintás eseményéhez. Ennél a speciális tervnél jó tudni, hogy a stílusban módosítani tudjuk a kurzor kinézetét is. Tehát be tudjuk állítani azt, hogy ha a képünk fölé húzzák az egeret, akkor az addigi nyíl helyett egy nagyító legyen ott. Ebből mindenki érteni fogja, hogy a képet ki lehet nagyítani. Ezt így állítjuk be: img.nagyithato{cursor: url(zoom.gif), auto;}

JavaScript, Jquery kép nagyítása kattintásra 135

Magát a nagyítást Jquery-ben kell megprogramoznunk. Az viszont a nehézség, hogy néha a képeink állók lehetnek, néha pedig fekvők, és ezeket eltérően kell nagyítanunk. Hiszen ha a nagyított állapot mindkét képtípus esetében 95%-os szélesség, akkor az álló képek nem fognak ráférni a monitorra. A JavaScriptben és így a Jquery-ben is lehet if-else elágazásokat írni, amit ismerünk már a PHP-ből. Tehát a feladat egyik részére megvan a megoldás.

WEB “DIY” BÖLCSÉSZEKNEK

A feladat másik része az, hogyan tudnák elmagyarázni Jquery-ben, mi az állókép és mi a fekvő kép. Ehhez effectre lesz szükségünk, aminek segítségével hivatkozni tudunk a kép szélességére és magasságára. Gondoljunk bele: ha sikerülne lekérdeznünk a kép dimenzióit, akkor azokkal az adatokkal már tudunk bűvészkedni. Fekvő kép: aminek nagyobb a szélessége, mint a magassága. Álló kép: aminek kisebb a szélessége, mint a magassága. A css() effecttel le is tudjuk informálni az adott elemet, ami esetünkben a képet, ami class=”nagyithato”.

9

$(“.nagyithato”).css(“width”) $(“.nagyithato”).css(“height”)

Fekvő kép: $(“.nagyithato”).css(“width”) > $(“.nagyithato”).css(“height”) Álló kép: $(“.nagyithato”).css(“width”)< $(“.nagyithato”).css(“height”) A relációs jelet ismerjük általános iskolából... A css() zárójelébe ha csak beírjuk a stílus szabályozó nevét, akkor azzal a meglévő értékére utalunk. Ha ezután, vesszővel elválasztva egy értéket is megadunk, és egy pontosvesszőt teszünk a végére (felszólítás a parancs végrehajtására), akkor azzal módosítani fogjuk az eredeti beállítást.

JavaScript, Jquery kép nagyítása kattintásra 136

A kép nagyításánál másra is szükségünk lesz, mint a szélesség megnövelésére. Először is ki kell emelnünk a helyéről. Alapból – meg sem kell adni – a helyzete relatív, tehát a kód része, position: relative. Ha teljesen ki akarjuk emelni, akkor a helyzetét fixre állítjuk: position: fixed. A fix alapjáraton a bal felső sarokba fogja passzintani az elemünket, de ezen módosíthatunk. Megadhatjuk a helyét a képernyő fönti, jobb, lenti és bal széléhez képest top, right, bottom, left beállításokkal. Elég csak a bal felső sarokhoz képest pozícionálni, és jó, ha reszponzív módon, százalékban adunk meg értéket. Kis matek: a képernyő 95%-át akarjuk kitölteni a nagyított képpel, tehát 5%-on fog osztozni a jobb és bal margó, 2,5-2,5 fejenként. Akkor a nagyított állapot left: 2,5% -ra állítjuk, a jobb margóval már nem is kell foglalkozni. Fönt pedig kikísérletezzük, de legyen mondjuk top: 1%. De még ezzel sem teljes a kiemelés a környezetből. Van a css-ben egy 3. dimenziót szabályozó tulajdonság, a z-index. Ezt megemeljük mondjuk 100-ra, és máris minden “elé” kerül a képünk. Tolunk rá még egy kis box-shadow-t, és meglesz a térhatás is. Egy fekvő kép stílusa nagyított állapotban a következő oldalon látható.

WEB “DIY” BÖLCSÉSZEKNEK

Ezeket az értékeket a jquery css() effectjével ugyanígy egyenként kell majd megadnunk.A fenti CSS leírás csak a tisztán látást szolgálja, nekünk jquery-ben kell leírnunk azokat a szabályokat nagyítás esetére, nem CSS-ben.

9

$(“.nagyithato”).css(“position”,”fixed”); $(“.nagyithato”).css(“top”,”1%”); $(“.nagyithato”).css(“left”,”2.5%”); $(“.nagyithato”).css(“z-index”,”100”); $(“.nagyithato”).css(“width”,”95%”); $(“.nagyithato”).css(“box-shadow”,”0px 0px 80px grey”);

JavaScript, Jquery kép nagyítása kattintásra 137

Most összerakhatnánk a kódot, de még nem gondoskodtunk arról, hogy a képet vissza lehessen kicsinyíteni. A removeAttr() egy olyan effekt, ami az adott elem attribútumait eltávolítja. A removeAttr(“style”); a style=”” attribútumot vonja vissza. A kérdés csak az, hogy ezt mihez kapcsoljuk. Ha a képre kattintva történt meg a css() effect, akkor kellene valami, amire rákattintva megtörténik a removeAttr(). De mivel a kép z-indexe 100, tehát minden előtt van, ezért nehéz lesz ilyet találnunk. A számomra legszimpatikusabb megoldás a toggle() eventet. A toggle() olyan, mint a click(), csak oda-vissza működik, ezért a meghatározása eggyel hosszabb, mint a click()-é. toggle(ezt csináld, másodjára meg ezt)

WEB “DIY” BÖLCSÉSZEKNEK

Próbáld ki:

http://walap.hu/jquery/zoom.php

Konkrétabban, tehát az első funkció után, vesszővel elválasztva jön a második funkció:

9

Most már összerakhatjuk, és működni fog:

JavaScript, Jquery kép nagyítása kattintásra 138



WEB “DIY” BÖLCSÉSZEKNEK

9

Ezt emésztgessük, adjunk időt magunknak, és bátran nyúljunk a Jquery-hez, ha valami mozgást szeretnénk az oldalunkra. Ugyanígy javaslom, hogy ha elérkezettnek látjuk az időt, próbáljuk az űrlapkezelést is Jquery-ajax-szal megoldani, mert nem veszedelmes dolog. JavaScriptben bonyolultabb, de Jquery-vel nem. Már túlmenne a JavaScript-túlélőcsomag fogalmán, ha itt részletesen bemutatnám, de hogy kedvet csináljak hozzá, az elvét felvázolom. A submit() eventhez fogunk kapcsolni műveleteket. Normál HTML-PHP megoldással ugye a submit gombot megnyomva elnavigál minket a kód az adatokkal a PHP fájlhoz, ahol opcionálisan egy visszairányítást is írtunk, és még abban a pillanatban visszatérünk a formhoz. Ajaxxal ez más. Néhány okos kóddal a form adatait összecsomagoljuk küldésre, megadjuk, hogy hol van a PHP fájl, ami feldolgozza. És megadjuk, hogy az eredményt a kiindulási oldalon, ahol a form van, hol jelenítse meg. Lesz például a form alatt egy ennyi:

JavaScript, Jquery jótanács

teljesen üresen. Maga a megjeleníteni való, például egy visszaigazolás, hogy a regisztráció sikeres, a PHP fájlban lesz:

de a jquery elhívja onnan, és a tagek között fog megjelenni. Tehát nem kellett újra betölteni az oldalt, aminek egyebek mellett az is a haszna, hogy az input mezőkben ott marad, amit írtunk, meg eleve ahogy az oldal görgetése éppen állt, ugyanaz marad, nem ugrik vissza a tetejére.

139

WEB “DIY” BÖLCSÉSZEKNEK

Hol kezdjem?

1. általában elég, ha a menü legördíthető, és a képek nagyíthatók 2. ha látsz egy oldalon valami okos megoldást, nyisd meg az oldal forráskódját (jobb klikk, forráskód), és vedd szemügyre a javascript részt. Különítsd el a szemeddel a selectorokat, az eventeket és az effecteket, és próbáld te is megvalósítani a te oldaladon. 3. böngéssz a neten jquery pluginok között, nagyon sok ingyenesen letölthető un. könyvtár kerül fel minden nap, amik a legújabb trendeket valósítják meg. 4. ha egy ilyen jquery plugint nem tudsz működésre bírni, őrizd meg a hidegvéredet: mindegyik pluginhoz van demó kód, add azt az oldaladhoz, és ha a demót működésre bírtad, lépésről lépésre írd át

140

WEBKEZELÉS

WEB “DIY” BÖLCSÉSZEKNEK

A

Joomla és a Wordpress is CMS (Content Management System) rendszerek, amikkel nagyon leegyszerűsítve ott kezdődik a munka, ahol ez a fejezet: készen van az oldalunk szerkezete, benne vannak a javascript események, rendeben van az adatbázis-kezelés, ráadásul még egy fullos admin felület is van. Fájlkezelés, oldalak létrehozása miatt szintén nem kell hogy fájjon a fejünk.

10

Erre találták ki ezeket a rendszereket, és ezért is szeretik használni. Gondoljunk bele: elhatározzuk, hogy blogot szeretnénk saját doménnel, és egyszerűen csak letöltjük a Wordpress egyik verzióját, telepítjük a tárhelyünkre, és kész. Már csak a sablont kell testre szabnunk, és mehet is a tartalomfeltöltés. Ebben a fejezetben ezt a két rendszert fogom összehasonlítani. Ide vehetnék mást is, de ezekhez találjuk a legtöbb segítséget a neten, ami nem utolsó szempont. Mielőtt az összehasonlításba belevágnék, néhány észrevételemet megtenném.

WEBKEZELÉS joomla, wordpress

142

Fontos tisztában lennünk, hogy amit szeretnénk, az mennyire konvencionális. Mert ha nem az, akkor nem konvencionális eszközökhöz kell nyúlnunk. CMS-ről okoskodni olyan érzés, mintha a biciklikről beszélnék. Nagyon kevesen raknak össze maguknak biciklit, inkább megveszik készen, és esetleg leszedik róla a dinamós lámpát, meghúzzák a féket, de aztán ennyi. Vannak viszont bicikli-összerakós típusok, akik szeretik az összes alkatrészt alaposan kiválasztani, és csak azt hozzátenni a bicajhoz, amire szükség van. Ugyanígy vannak olyan típusok, akik szeretnek úgy összerakni egy honlapot, hogy csak azt programozzák meg, amiről a megbízás szól, ennek köszönhetően pedig az oldal pontosan azt nyújtja, amit elvárnak tőle, és semmi meglepetést. És vannak, akik előre gyártott csomagból dolgoznak: CMS-t telepítenek, és azt kalapálják át. A saját fejlesztésű honlap ellen mindenképpen az idő szól. Gyakori félelem, hogy a saját fejlesztésű honlap nem lesz profi hatású, de az úttörő honlapok egyike sem CMS. Sőt, egy-egy CMS sablon is valakinek a “handmade” fejlesztése. Az idő inkább a probléma egyértelműen. A szerkezetet, admin felületet, adatbázis-kezelést, fájl-kezelést kialakítani 1-2 hét, néha több, CMS-sel viszont azt készen kapjuk, tehát 1-2 héttel rövidebb munka vár ránk.

WEB “DIY” BÖLCSÉSZEKNEK

Ha

viszont távlatokban gondolkozunk, több örömet tud okozni egy saját fejlesztés. Amit én mindenképpen a saját rendszer előnyéhez írok, hogy a módosítások nem olyan nehezek, az ember csak kitalálja, mit akar, és megcsinálja. Ebből a szempontból a Joomla még istenes, de azzal is ott a gond, hogy nem tisztán HTML-PHP-JavaScript kódokon alapul, hanem van egy saját, PHP-n belüli rövidített nyelve, ami nem nehéz ugyan, de ki kérte?

10 WEBKEZELÉS joomla, wordpress

143

Van, hogy olyan bővítést szeretnék az oldalamra, amilyen modult még nem írt senki, és akkor nincs más választásom, mint megtanulni modult írni. Elismerem, ezer millió-féle modul férhető hozzá a neten, de fél év alatt háromszor is belefutottam olyanba, hogy saját megoldás kellett. Minek tanuljak meg modult írni? Csak azért, mert az egész folyamat elején spórolni akartam két hetet? Egyszer volt egy olyan feladatom, amit a munkahelyemen, ahol Joomlát használtunk, 3 héten át próbáltam működésre bírni egy olyan bővítést, amin már engem megelőzően is több hetet dolgoztak. Hogy biztos legyek abban, hogy meg tudom oldani, még a legelején egy délután alatt összeraktam a saját fejlesztésű oldalamon ugyanazt. Joomla bővítés esetén a mondat, amit a legtöbbször kimondtam: “De miéééééééééééééééért nem működik?!” Ugyanennek a bővítésnek a továbbfejlesztésekor négy munkanapom ment el arra, hogy megoldjak egy form submitot. Nem vette át az adatot a nyavalyás. A fórumokon sem tudtak segíteni, mígnem rájöttem, hogy a cache az oka: memóriából tölti be az oldalt a submit megnyomása után, tehát a legfrissebb form adatok elszállnak a semmibe. De amíg erre rájöttem, kihullott a hajam. És sorolhatnám az élményeimet. Kiismerni egy CMS-t nem sokkal könnyebb, mint egy (következetes technikával programozó) vadidegen ember által összerakott honlap kezelését átvenni, és azt továbbfejleszteni. Ezen élményeim alapján azt szűrtem le, hogy CMS azoknak való, akik feltelepítik, megigazítják, és úgy hagyják évekig. Maximum sablont cserélnek. Akik folyamatosan fejleszteni akarják az oldalukat, de nem akarnak egy profi programozót alkalmazni, kitartanak a CMS mellett, ugyanúgy fizetni fognak, csak az idejükkel.

WEB “DIY” BÖLCSÉSZEKNEK

Az összehasonlítás.

Máshonnan érkezett a két versenyző. A Joomlát kezdettől fogva annak szánták, ami most, a Wordpress viszont egy blog szolgáltatásból nőtte ki magát. Ez egy könnyű vezérfonalat ad a választáshoz, blogban a Wordpress lesz a jobb. Komplex weboldalban pedig a Joomla.

10

Sablon átalakítása Ha CMS-t fogunk használni, természetesen átalakítjuk a sablont. A böngészőben megnyitjuk az oldalunkat, jobb klikkel rámegyünk az elem vizsgálatára, megnézzük, milyen elemet kell keresni melyik fájlban, és majd módosítjuk. Ebben a versenyben a Wordpress fényévekkel a Joomla előtt jár, mert nagyon leegyszerűsített a fájl struktúrája. Három könyvtár van egy Wordpress gyökerében, és abból is csak a wp-content mappával kell foglalkoznunk, abban megtalálunk mindent, amit módosítani szeretnénk. Joomlában viszont össze-vissza vannak a dolgok: bizonyos dolgokat a template könyvtárban tudunk átírni, bizonyos dolgokat a moduloknál, más dolgokat a pluginoknál. Tartalomkezelés Kicsit kényelmesebb a Joomlában néhány apróság miatt, de alapvető különbségek nincsenek.

WEBKEZELÉS joomla, wordpress

144

Keresőoptimalizálás Minden CMS-sel ez egy nagy falat, mert arra találták ki, hogy az adminisztrátori élmény legyen maximális. Rengeteg alternatívát előre bele kell programozni egy CMS-be, hogy a honlaptulajdonos aztán tényleg állítgathassa a dolgokat. Adott esetben az admin felület több helyet foglal a tárhelyen, mint a honlap maga. De a sok előre beprogramozott kihasználatlan összetevő a “külső honlapra” is igaz. 5000-6000 fájlból áll egy egyszerű CMS honlap. Ebből a szempontból a Joomla és a Worpress hasonló. Kell telepíteni egy plugint, ami növeli az oldal betöltési sebességét (alapból kb. 10 másodperc, de ezt egy jó pluginnal le lehet tornászni 2-3 másodpercre). Klasszikus probléma Wordpressnél, hogy belefuthatunk olyan sablonba, ami akadályozza a Google indexelő robotjait, Joomlánál ilyennel még nem találkoztam. Mindegyik rendszerez lehet telepíteni keresőoptimalizáló plugint, amik nem sokra jók. Eleve a többségük 2-3 éves, és általában a meta tagekre mennek rá. A leghatékonyabb optimalizálás a kapcsolatépítés lenne, de ebben egy CMS nem tud segíteni.

WEB “DIY” BÖLCSÉSZEKNEK

Világ

életemben úgy tekintettem a hírlevélre, mint egy kiirthatatlan gyomra, amit egyenesen a pokolból küldtek fel, hogy gyűlölet szülessen a szívünkben, és kegyetlenül káromkodjunk. Az élet aztán úgy hozta, hogy hivatalból kellett hírleveleket összeraknom és kiküldenem, és titkolt undortól eljutottam odáig, hogy vártam a kiküldés pillanatát: mert feljavítja az oldal statisztikáját. A keresőoptimalizálás nem egzakt tudomány, de abban mégis lehet valami, hogy a forgalmat erős referenciának tekinti a Google: ha alacsony forgalmú az oldal, akkor szükségszerűen érdektelen, a tartalma pedig gyengébb, mint a felkapott oldalakénak.

10

Ha hirtelen mindenkit érdekelni kezd valami, és az első egy órában csak mi írtunk róla, akkor szerencsénk van, de egyébként kezdő oldalként kizárt dolog, hogy a Google sokadik oldalánál előrébb kerüljünk. Az első lépéseket tehát nekünk kell megtenni, és az egyik módszer erre az, hogy hírleveleket küldünk ki. Ettől lesz egy egyszeri forgalmunk, és az már egy jelzés a Google felé, hogy többet érdemlünk, mint napi 3 látogató. A Google nagyon hajlamos arra, hogy beskatulyázzon minket egy bizonyos forgalmi volumenbe. Egy oldal kezelőjeként ezért olyan örömteli, ha hírlevél megy ki, lehetőleg minél vaskosabb listára. És nem tehetünk mást, mint beletörődünk abba, hogy kéretlen leveleket küldünk, mert a normális emberek egyszerűen leiratkoznak, az ideges emberek pedig anyáznak és leiratkoznak, de mindkét esetben ennyi következménye van annak, ha rossz ajtón kopogtatunk. (A spam törvényt persze tartsuk be!) Változatlanul kíváncsi lennék persze, hogy a fiatal generáció mit gondol a hírlevelekről, mert van egy olyan gyanúm, hogy a hírlevél bizonyos esetekben áraszt magából egy kis “segíts rajtam” szagot. Aminek pedig ilyen szaga van, az csak erősíti ezt az imázst hírlevélről hírlevélre. Persze lehetnek kivételek, például ha nem kéretlen feliratkozókból építünk listát.

WEBKEZELÉS hírlevél

Tehát nem Facebook applikációkkal próbálunk címeket halászni, nem vásárolt címlistát használunk, nem lopott címlistát használunk, nem figyelmetlenségből nyilvánosságra került címlistát használunk, hanem egyszerűen megpróbálunk kedvet csinálni az olvasónknak a hírlevelünkhöz. De nincsenek illúzióim: ehhez egy évtized sem lenne elég. Persze hová sietünk, igaz?

145

A címlistával pedig úgy kell számolni, hogy a címzettek többsége nem fogja megnyitni a levelünket. Ha mondjuk havonta plusz 30 látogatót szeretnénk, akkor ahhoz legalább 300 címre lesz szükség. Ebben a számításban segítségünkre van az internet Arany Tíz Százaléka, a gyakran visszaköszönő szabályszerűség, ami mögött már-már összeesküvést sejt az ember. Hírlevél esetében pedig még csak

WEB “DIY” BÖLCSÉSZEKNEK

nem is a nagy számok törvényével van dolgunk. A legtöbb hírlevél, ami a kezemen átment, 10-20%os megnyitási rátát produkált. Akkor is, ha 30.000 címre küldtem ki, és akkor is, ha válogatott 300-ra. Az őrülettől az mentett meg, hogy körültekintő tárgy választással sikerült 20% fölé feltornászni ezt az arányt. A plafon a megnyitási rátában 36-39% körül van, legalábbis a Webgalamb felmérésében közzétett adatokból úgy tűnik. Tehát ennyi az, aki potenciálisan szóba jöhet, mint hírlevél megnyitó. Ha 30 látogatót akarunk, akkor ahhoz legalább 300 címre ki kell küldenünk, de inkább 600-ra, mert nem minden megnyitás végződik tovább kattitnással. Ez azt jelenti, hogy a tovább kattintási arány kb. 40-60%, ezt nevezik CTR-nek (Click Through Rate, hányan mennek a hírlevélből az oldalunkra).

10

A hírlevél formai és tartalmi sztenderdjei nem változnak olyan egységesen, mint a sima web esetében, úgyhogy legegyszerűbb, ha egy általunk mérvadónak tekintett oldal hírlevelére iratkozunk fel, és megpróbálunk valami olyasmit összeütni magunknak is. Egy dologra nagyon figyeljünk: teszteljük le a levelünket több platformon is: Thunderbirdben, Outlookban (remélem egyszer hatóságilag távolítják el a világ összes használatban lévő és használaton kívüli számítógépéről, a rá vonatkozó említéseket visszamenőleg letörlik, és mozifilmekbe kódolt titkos üzenetekkel kimossák az emlékét is a fejünkből), Gmailben, magyar levelezőkön, stb. A leggyengébb láncszem az Outlook, nagyjából egy Noé Bárkájában őrzött útmutatás alapján programozták, ezért csak nagyon alap html kódokat tud értelmezni, például nem ismeri a -eket, hogy messzebb ne is menjek. Ha olyan levelet küldenénk, amiben van, vagy háttérkép, akkor Outlookban nem sok fog látszódni belőle.

WEBKEZELÉS hírlevél

Néhány válasz laikus kérdésekre, amikkel találkoztam: 1. űrlapokat nem lehet levélbe tenni. 2. a képek nem befolyásolják, hogy spam közé kerülünk-e egyből, kivéve ha levélbe kódolt képként küldjük a képeket (és így nem kell külön engedélyezni a letöltésüket). 3. egyszerű Notepadben is összerakhatjuk a hírlevelet (HTML). 4. vannak jó hírlevél küldő szolgáltatások magyarul is. Igen, ezek pénzbe kerülnek, és van olyan, amit meg tudunk fizetni.

146

Végül egy támpont: első a tárgy. Mást nem is látnak a hírlevelünkből, míg meg nem nyitják, tehát az egyetlen, amivel fel tudjuk kelteni az érdeklődést az a tárgy. Más kérdés, hogy ha a levél aztán csapnivaló, akkor nem jutottunk előbbre.

WEB “DIY” BÖLCSÉSZEKNEK

A keresőmotorok szempontjából is nagyon fontos a link építés, de jobb, ha az egészet máshonnan közelítjük meg. Ha új városba költözünk, a kutyát sem fogjuk érdekelni, úgyhogy nekünk kell barátkozni, és igyekezni, hogy a kialakult viszonyok között minél hamarabb nekünk is szorítsanak helyet. Tehát a legjobb formánkat hozzuk, és a fontos eseményeken bedobjuk magunkat, próbáljuk hasznossá tenni magunkat. Ennek eredményeként a közösség részévé válunk, emlegetni fognak, és érdeklődni fognak már irántunk is.

10

Szinte szó szerint ez a feladat a link építésben is. Valószínűleg nem nyújtunk olyat, amit ilyen vagy olyan színvonalon más már ne talált volna ki, ha nem itthon, akkor külföldön. Ez pedig egy konfliktushelyzet alapból: az internet nem kér belőlünk. A Google sem kér belőlünk. Tehát el kell kezdeni barátkozni. A legjobb, ha nem csak keresünk oldalakat, akik szóba állnak velünk, hanem igazi kapcsolatot kell építeni, ami túlmegy a link cserén. Barátokat kell szerezni, tekintsünk magunkra is, és a többi laptulajdonosra is üzletemberként, akiknek kapcsolatok kellenek. Egy link csere önmagában erőtlen, egyszer megtörténik, és annyi. Egy új ismerős, akinek szintén van honlapja, és megkedvel minket, más távlatokat nyit. Mikor egy SEO cég megbízást kap, hogy optimalizáljanak egy oldalt, akkor rendszerint nekiesnek a link profilnak is, és regisztrálják az oldalt mindenféle listákra, amit mi se mulasszunk el. Nem kell kizárólag a címoldalunkat beküldeni például a lap.hu odavágó al-lapjának, hanem teljesen jó gyakorlat, ha egyegy informatív cikkünket is beküldjük valamelyik rovatba. Ezek 5-6 látogatót hoznak, nem többet, de ha felszorozzuk ezt több beküldött linkkel, akkor több látogatóról beszélünk, ami már hatással van a Google Page Rankra, és így Google felől érkező látogatókat is generál.

WEBKEZELÉS link építés

147

Link partnert keresve mindig informáljuk le az oldalt, amit kiszemeltünk. A böngészőinkhez lehet telepíteni mindenféle Add-ont, az egyik ilyen az Alexa traffic rank. Magyar, és különösen kis magyar honlapok esetében nem túl pontos, de a Google Page Rankot minden esetben jól állapítja meg. Ügyeljünk arra, hogy nálunk ne legyen gyengébb Rankja, ha felfelé törekszünk. Egészen egyszerű törtetési szabály ez: ha az új városunkban a lúzerral bratyizunk le, sok időnek kell eltelnie, hogy a befolyásos alakok nyilvántartásba vegyenek. A való világban talán nem lennénk ennyire opportunisták, de itt a weben megtehetjük ezt, hogy következetesen lepattintjuk azokat, akik visszahúznának. Természetesen mielőtt teljesen elszállnánk magunktól, figyelni kell a saját rankunkat, mert átmenetileg lehet, hogy akinek 1 a PR (Page Rank), segíteni tud nekünk, ha nekünk 0. És azt sem árt szem előtt tartani, hogy a link partner is fejlődhet, plusz ha egy jó kapcsolat ígérkezik, nem érdemes elvetni.

WEB “DIY” BÖLCSÉSZEKNEK

Igyekezzünk olyan link cseréket lebonyolítani, ahol nem a címlapunkra terelünk látogatókat. A nyitólapunk-címlapunk inkább olyan funkcióval bír, mint régen az impresszum: ha a cikk felkeltette az érdeklődésemet, megnézem jobban, ki ez a társaság. Nyilván egy nyitólap csábítóbb, de két “nyitólap” létezik mind fölött: a Facebook és a Google. És igyekezzünk a cikkeinket erre a címlapra eljuttatni, vagy megtalálni a jövő Facebook üzenőfalát. A saját címlapunkra tekintsünk úgy, mint egy PR-anyagra, amit ha jó napja lesz a látogatónak, megmutathatunk neki. A magyar társadalom is egyre fogyasztószelleműbb, tehát valami harapnivalót kell az arcába tolni. Ha linket cserélünk, ne a címlapunk linkjét küldjük, hanem egy fogyasztásra kész lapunkét: már csak olvasni/nézni kelljen.

10

Ha angolok lennénk, ezerszer könnyebb dolgunk lenne, de a ilyen kis tóban kevesebb hallal tudunk együttműködni. Igaz, aki a kicsit nem becsüli, az a nagyot nem érdemli. A linkek szerepe tehát ne a keresőoptimalizálás legyen, mert akkor könnyen eshetünk csapdába, és a Google valamelyik algoritmus-frissítése majd egyszer csak elkaszál. Ne link farmokban gondolkodjunk. A link legyen az, amit jelent: kapcsolat. Ez megköveteli, hogy türelmesen fejlesszünk a link profilunkat: vendégszerzőség más blogon, vendéglátás a sajátunkon, ez több munka, és nem lehet egy perc alatt megoldani. De ha lesz belőle látogatói forgalom, akkor az a link valóban érni fog valamit, évek múlva is. A linkjeink fórumokon terjesztése még egy utolsó menedék, de nagyon jó copywriternek kell lennünk ahhoz, hogy ne legyen levágós, hogy a saját honlapunkat ajánljuk. Ilyenkor a fórum adminisztrátora úgyis kimoderál minket. És a fórumokról nem árt tudni, hogy hanyatló iparág. Mióta van rálátásom különböző fórumok statisztikáira, csökkenő forgalmat látok. Ha már fórum, akkor használjuk valódi eszmecserére, közvetve ez is hozzásegíthet minket a növekedéshez: egyfajta brandépítés, ha van egy pozitív szereplője a fórumnak, és a neve éppen a honlapunk neve. Persze ez is egy szép elv, de tudom, hogy az ember ezt csinálja egy darabig erőből, de ha ez nem válik rutinná, akkor egy hónap alatt besül, nem fórumozik tovább. Eredményt pedig nem hoz.

WEBKEZELÉS link építés

Végül, ha nagyon elkeseredettek vagyunk, fel lehet adni az idealizmusunkat, és utána érdeklődni, hogy kinek kell fizetni ahhoz, hogy előrébb jussunk a listán, hol lehet venni linkeket, hol lehet venni forgalmat, hol lehet venni rólunk fórumozókat. Elismerem, ez a fejezet akkor lett volna igazán hasznos, ha erről írok...

148

WEB “DIY” BÖLCSÉSZEKNEK

Ma

már tanfolyamokat szerveznek a Google Analytics használatához, és oklevelet lehet róla szerezni, tehát egyrészt egy elismert és beépült dologról van szó, másrészt tényleg egy komplex rendszer. Ez pedig azt jelenti, hogy érdemes az Analyticset használnunk az oldalunk nyomon követéséhez.

10

Az analytics működtetéséhez az oldalunk minden lapjához hozzá kell adnunk az analytics követőkódját. Mikor regisztráljuk az Analyticsban az oldalunkat, akkor ezt a kódot meg is kapjuk, lesz benne egy egyedi azonosító, ami a kulcsa az egésznek, de egyébként nem kell csinálnunk az egész kóddal soha többé semmit, csak gondoskodni róla, hogy minden oldal része legyen. Erre kiválóan alkalmas, ha készítünk egyetlen .php fájlt, mondjuk analytics.php, és a PHP include() parancsával hívjuk be minden oldalra. Így ha véletlenül meg kéne változtatnunk a követőkódot, akkor egyetlen helyen kell csak cserélnünk, és ez kihat minden előfordulásra. Az analyticset oldal tulajdonosként nagyon fogjuk élvezni, és valószínűleg szabad időnkben felfedezzük magunknak. A bőség zavara miatt mégis megosztom, hogy én mit használok a leggyakrabban. Először is azzal tisztában kell lenni, hogy egy webshop esetében nem a forgalom számít, hanem a vásárlások, és hogy a vásárlás folyamatában hol morzsolódnak le leginkább az emberek. Ezzel szemben egy tartalomszolgáltató oldalnak a forgalomnál már csak a forgalom részletes adatai számítanak jobban.

WEBKEZELÉS google analytics

A legfontosabb, hogy a lehető legtöbb információt gyűjtsük be, ezért ne mulasszuk el az úgynevezett Google-követőkódok használatát, ha valakinek linket adunk az oldalunkra (linkcsere, bannercsere, banner, hirdetés, stb.). Google követőkódot a Google URL builder szolgáltatásában tudunk előállítani, ha bátortalanok vagyunk. Ezt hamar kiadja találatnak a Google. A lényege a dolognak az, hogy van egy linkünk, amit egy partnernek átadunk, például: http://bolcseszblog.hu. Ezt fogjuk kibővíteni egy kódsorral, ami pontosan rögzíteni fogja az összes forgalmat, ami ezen a linken keresztül történt. Erről egy kicsit lejjebb írok még.

149

WEB “DIY” BÖLCSÉSZEKNEK

közönség >>

10

áttekintés

A közönség menüponton belül találjuk az áttekintés almenüt, ami a legfontosabb mutatókat gyűjti egybe. Az összes mutató közül a visszafordulási arány a legproblémásabb, illetve ezzel összefüggésben a látogatás átlagos időtartama. A visszafordulás azt jelenti, mikor a felhasználó az oldalon dolgát bevégezve nem kattint semmire, hanem elnavigál az egész webhelyről (például megnyit egy könyvjelzőzött másik weboldalt). Az Analytics viszont az oldalon töltött időt akkor tudja eltárolni, ha nem fordul vissza az olvasó, hanem az oldalon belül megy tovább valamerre. Tehát a magas visszafordulási arány torzítani fogja az oldalon töltött idő statisztikáját. Abból a szempontból ez teljesen mindegy, hogy ha magas a visszafordulási arány, akkor az azt jelenti, hogy dolgoznunk kell azon, hogy a látogatókat megtartsuk. Mikor az első honlapom statisztikáját figyeltem, azt hittem, a magas visszafordulási arány annak szólt, hogy a hűséges olvasók vissza-visszatérnek, de nem találnak új tartalmat, úgyhogy elhúznak. Ez is benne lehet, de a lényeg, hogy a látogatókat nem ragadta meg további tartalom. Ez már a szerkesztői énünknek információ, nem az oldal managernek, de itt nem is lesz éles határ. Egyrészt megpróbálhatunk izgalmasabb témákról írni, másrészt megvizsgálhatja a programozó énünk, hogy vajon van-e egyáltalán csalogató továbblink a cikkünk környékén. Vagy nincs-e túl sok link: ezer hirdetés és száz poszt. Egy biztos: ha magas visszafordulási arányt látunk, amögött gyér önreklám húzódik meg.

WEBKEZELÉS google analytics

Ugyanerről tájékoztat az oldal/látogatás mutató is. Kicsit kézzelfoghatóbb adat, és nem cseng olyan negatívan. Igyekeznünk kell úgy kialakítani az oldalunkat, hogy a cikkeinkről továbbvezessük a látogatót minél több cikkünkre.

150

WEB “DIY” BÖLCSÉSZEKNEK

viselkedés >>

10

webhelytartalom > minden oldal

A viselkedés menüpontban találjuk a webhelytartalom almenüt, azon belül a minden oldalt. Ha ebbe a nézetbe megyünk, találunk egy keresőmezőt, és rákereshetünk annak az oldalunknak az URL-jére, amire kíváncsiak vagyunk. De ebben a nézetben egyébként kilistázva láthatjuk forgalmi sorrendben az összes lapunkat (nem weboldal értelemben, hanem webhelyen belüli oldalak értelemben). Ez tájékoztat minket arról, hogy melyik írásunkra haraptak rá, és leszűrhetünk következtetéseket, hogy mit kíván olvasni a nép.

WEBKEZELÉS google analytics

151

WEB “DIY” BÖLCSÉSZEKNEK

ügyfélszerzés >>

10

kampányok

Ha akár csak egy követőkóddal ellátott linket is forgalomba helyeztünk, akkor itt meg fog jelenni a statisztikája, automatikusan. Nagyon változatos dolgokra jó, például lehet mérni a hírlevelek tartalmát, hogy melyik cikket nyitották meg legtöbben, amennyiben mindegyik cikkre mutató link követőkódos volt. A követőkód összeállításánál három paramétert kell feltétlenül megadnunk: a forrást (utm_ source=), a médiumot (utm_medium=) és a kampányt (utm_champaign=). Ez egy GET adat az URLben, tehát hozzáfűzésként jelenik meg benne. Az URL-hez ilyen adatokat ?-lel fűzünk hozzá, és minden további megjegyzést & jellel. http://bolcseszblog.hu?utm_source=valami&utm_medium=valami&utm_champaign=valami Megvan az elmélete, hogy mihez milyen információt kell feltüntetnünk, de a Google Analyticsből nézve máshogyan van a dolog. Mikor rámegyünk az ügyfélszerzés > kampányok menüpontra, akkor azok a nevek lesznek kilistázva, amit az utm_champaign= részben adtunk a linkjeinknek. Például marciusi_kampanyok. Ha rákattintunk egyre, például a marciusi_kampanyok-ra, akkor kilistázza az ezen kampányon belül megadott utm_source= értékeket. Egy hírlevél esetében én forrásként éppen ellenkezőleg: a célt szoktam megadni, azt, hogy hová mutat a link. Akkor a statisztikán könnyebb kiiagzodni, hogy végülis melyik linkre hányan kattintottak.

WEBKEZELÉS google analytics

http://bolcseszblog.hu?utm_source=hova_mutat_a_link&utm_medium=email&utm_ champaign=marciusi_hirlevel

152

WEB “DIY” BÖLCSÉSZEKNEK

ügyfélszerzés >>

10

minden hivatkozás

Az ügyfélszerzés menüponton belül találjuk a minden hivatkozást. Ezzel a linkprofilunk működését tudjuk nyomon követni. Honnan jön a forgalom, belinkeltek-e minket valahová csak úgy spontán, vagy melyik a legerősebb kapcsolatunk. Az ügyfélszerzés menüpontban találjuk a forgalmi forrásokat is, ahol nemcsak a linkek vannak feltüntetve, hanem a közvetlen látogatók, és az organikus forgalom (keresőmotorból érkező).

irányítópultok >

WEBKEZELÉS google analytics

új irányítópult

Végül mindezeket az információkat egy panelra pakolhatjuk az irányítópult menüben, ahol egyszerűen új irányítópultot hozunk létre, és személyre szabjuk, milyen adatcsoportokat mutasson.

153

WEB “DIY” BÖLCSÉSZEKNEK

Konverzió.

Ha webshopot üzemeltetünk, be kell állítanunk konverziót is, ami most egy nagyon jól pörgő szó az oldal management területén, kicsit olyan, mint korábban a keresőoptimalizálás. A konverzió magyarul eredményességet jelent számomra. Az Analyticsban be lehet állítani, hogy hány forintot tekintünk eredménynek. Természetesen az Analyticsnak nem lesz információja arról, hogy mennyit költöttünk, és ettől a konverziót nehezebb megérteni, aminek köszönhetően babonás tisztelet övezi azokat az embereket, akik konverzióról beszélnek.

10

A lényeg az, hogy a webshop legvégső fizetős oldalát, ahol már a bankkártya gombot kell megnyomni, jó eséllyel olyanok érik el, akiknek a 80%-a tényleg vásárolni is fog. Ezért azt mondhatjuk, a webshopunk akkor sikeres, ha a látogatók eljutottak ahhoz a fizetős oldalhoz. Már az is egy eredményességi mutató (konverziós ráta) lenne, ha láthatnánk, a látogatók hány százaléka jutott el a fizetésig. De az Analytics ebbe tett még egy kis pluszt, mégpedig, hogy be tudunk állítani egy értéket, hány dollárt ér, ha valaki eljut a fizetős oldalig. Mivel ez bemondásra megy, ezért az egész konverziós ráta olyan ködös dologgá válik első nekifutásra, hogy én sem foglalkoztam vele sokáig. De nem kell megijedni: bemondásra kell megadni a konverziót. Ha már működő webshopról beszélünk, akkor tudjuk, hogy a vásárlások átlagértéke mondjuk 2200 forint (10 dollár), akkor ezt a számot használjuk a konverzió kiszámításához. És a többit már a Google elvégzi. A konverziós ráta nemcsak úgy szólhat, hogy 100 látogatóból mennyi jutott el a fizetős oldalig (1-2%), hanem hogy egy látogatóra vetítve mennyi konverzió (cél) teljesült. 100 látogatóból 2 jutott el a fizetős oldalig, akkor az eredményességünk lehetne 2%, de ez forintosítva úgy hangzik, hogy “100 látogató hozott 4400 forintot”. Tehát egy látogató hoz 4,4 forintot, ez is lehet tehát a konverziós rátánk az Analyticsban.

WEBKEZELÉS google analytics

Egy újság esetén a konverzió bármi, ami olvasással végződik, tehát ott nincs igazán értelme a konverzió számításnak.

154

WEB “DIY” BÖLCSÉSZEKNEK

Sajnos

a Google Analytics gyakorlatilag nem mutatja már a kulcsszavakat, így fogalmunk sincs arról, hogy melyik kulcsszóra jönnek az olvasók. Szerencsére van egy okos megoldás, a Webmaster Tools, ami ad absurdum szintén a Google terméke, csak máshogyan működik. Ha regisztráljuk egy weboldalunkat a Webmaster Tools-ban, választunk a regisztrálási alternatívák közül, nagyon egyszerű művelet, főleg ha már van Analyticsunk.

10

Itt sem teljesen tökéletes a kulcsszó-lista, de nagyságrendekkel több adatot kapunk. Amire érdemes figyelni, hogy azokkal nem sok tennivalónk van, akik rákerestek a bölcsész szóra, megkapták találatként az oldalunkat, és rá is kattintottak (kulcsszó CTR 50-100% a statisztikában). Azt érdemes figyelni, hogy hol kapták meg találatként az oldalunkat előkelő helyen (position 1-10 a statisztikában), de ez gyatra (10% alatti) átkattintással párosul. Mert ez azt jelenti, hogy írtunk a dologról, nem is akárhogyan, hiszen jó a pozíciónk a találati listán, de valamiért a többiek még jobban írtak. Ekkor be kell írnunk a keresőbe a kulcsszót, és meglátjuk, miért nem miránk kattintottak. És akkor eltanuljuk a lista legsikeresebb szereplőjétől a titkát, és megvalósítjuk a mi cikkünkben, átírjuk. Ez egy feneketlen téma, angol nyelven rengeteg blog van egy-egy témára ráállva. Iratkozzunk fel a hírleveleikre, és legyünk naprakészek. Pár hónappal később már szelektálni fog a szemünk, és tudni fogjuk, hogy mi az igazán fontos információ a mi oldalunk szempontjából.

WEBKEZELÉS kulcsszókutatás

155

WEB “DIY” BÖLCSÉSZEKNEK

Köszönöm Robinak a türelmét, a tanácsait, és a közös gondolkozást a kéziratról, honlapról, mindenről! Köszönöm édesanyámnak a kíváncsiságát, hogy idős fejjel is nekiveselkedett a programozás témájának, és megtette észrevételeit a kéziratról! Köszönöm húgomnak, hogy elolvasta a könyv kéziratát!

KÖSZÖNET

156

VÉGE