Változók hatóköre C-ben

C-ben a változók hatóköre alatt azt a kódrészletet értjük, amelyben az adott változó elérhető, használható. Ez a hatókör attól függ, hol definiáljuk az adott változót. Ennek függvényében 3 változótípust különböztethetünk meg:

  • helyi változók: egy adott függvényen vagy kódblokkon belül definiált változók
  • paraméterek: egy függvény paraméterlistájában meghatározott változók
  • globális változók: minden függvényen kívül megadott változó

Helyi változók

Más néven lokális változók. Egy függvényen vagy kódblokkon belül definiáljuk, elérhetősége is ezen kódrészletre korlátozódik. Amint a program futása túlhalad ezen a kódrészleten, a változó többé már nem elérhető, az általa felhasznált memóriaterület felszabadul. Az így deklarált változók prioritása a legmagasabb. Ha létezik már azonos nevű változó, amit „kijjebb”, magasabb szinten hoztunk létre, az az új létezése alatt a kódból elérhetetlen lesz, az új képletesen fogalmazva kitakarja azt. Fontos, hogy ettől a korábbi változó nem szűnik meg és értéke sem változik! Az adott függvényt / kódrészletet elhagyva a magasabb szinten deklarált változó újra elérhető lesz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#include <stdio.h>
 
// Itt még nem létezik a változó
 
int main() {
	// Változó deklarálása
	int szam;
 
	// Változó inicializálása (kezdőérték adás)
	szam = 10;
 
	// A függvényen belül vagyunk, használhatjuk
	szam = szam + 3;
	printf ("%d\n", szam);
 
	return 0;
}
 
// Itt már nem létezik a változó

Paraméterek

A függvényen belül mindenhol elérhető, hacsak a fentebb említett módon egy azonos nevű helyi változó el nem fedi. A függvényen kívül nem létezik, nem elérhető. A paraméter számára memóriaterület a függvény meghívásakor foglalódik és a függvény befejeződésekor felszabadul, tartalma elveszik.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#include <stdio.h>
 
// Paraméter deklarálása
void minta (int param) {
	printf ("Parameter: %d\n", param);
}
 
int main() {
	// Itt még nem létezik a paraméter
 
	// Paraméter inicializálása (kezdőérték adás)
	minta (10);
 
	// Itt már nem létezik a paraméter
 
	return 0;
}

Globális változók

Minden függvényen és kódblokkon kívül kerülnek definiálásra és a program futása alatt végig, mindenhol elérhetőek. Természetesen a korábbiakban említetteknek megfelelően időnként más, helyi változók vagy paraméterek kitakarhatják, maszkolhatják őket. Jellemzően a program elején szokták definiálni a globális változókat. Ma már erősen ellenjavallt használatuk, tulajdonképpen programozástechnikai hibaként kezelendő és megfelelő tervezéssel használatuk elkerülhető.1-200 sornál hosszabb kód esetén már nehezen kezelhetővé válik és nagyon időigényesen tárhatók csak fel a globális változók használatából eredő hibák.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#include <stdio.h>
 
// Változó deklarálása
int globalis;
 
void minta() {
	// Függvényen belül is elérhető
	printf ("%d\n", globalis);
 
	// És módosítható is
	globalis += 4;
}
 
int main() {
	// Már itt is létezik a globális változó
 
	// Változó inicializálása (kezdőérték adás)
	globalis = 10;
	minta();
	printf ("%d\n", globalis);
 
	return 0;
}

Legördülő menü tisztán CSS-el

Mi a megoldás , ha egy egyszerű és jól működő, pusztán néhány sor CSS felhasználásával megvalósított legördülő menüt szeretnénk? Először építsük fel a menüt rendezetlen listák segítségével, az alábbi módon:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<header>
	<ul>
		<li>
			<a href="#">Első főmenü</a>
			<ul class="sub-menu">
				<li><a href="#">Alemü 1</a></li>
				<li><a href="#">Alemü 2</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Második főmenü</a>
			<ul class="sub-menu">
				<li><a href="#">Alemü 3</a></li>
				<li><a href="#">Alemü 4</a></li>
			</ul>
		</li>
	</ul>
</header>

A példában a HTML5-ben bemutatkozó <header> foglalja magába a menüt. Ez természetesen tetszőleges más HTML elem is lehet, jelen esetben azért esett rá a választás, mert jól olvashatóvá, strukturálttá teszi a mintakódot. A menü működési elve egyszerű: alapértelmezetten felsoroljuk a fő menüelemeket, a bennük lévő almenüket pedig elrejtjük. Amikor a menüelem fölé visszük az egeret (hover állapot), a benne lévő almenüt megjelenítjük a display tulajdonság felülírásával. Mivel az almenü megjelenésekor a fő elem mérete is megnő, a hover állapot érvényben marad akkor is, amikor az egeret az almenü valamely pontja fölé visszük. A másik fontos dolog a 25. sorban található. A position: absolute; gondoskodik róla, hogy az almenük a többi tartalom felett jelenjenek meg, ezáltal ne befolyásolják az oldal elrendezését. A példához tartozó CSS kód:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
header ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
 
header ul li {
	background-color: #333;
	list-style: none;
	display: block;
}
 
header ul li a {
	color: #fff;
	display: block;
	padding: 5px 10px;
}
 
header &gt; ul &gt; li {
	float: left;
}
 
header .sub-menu {
	display: none;
	position: absolute;
	z-index: 100;
}
 
header li:hover &gt; .sub-menu {
	display: block;
}

A kereső optimalizálás alapjai

Mi is az a kereső optimalizálás?

Manapság egy weboldal esetében a kereső optimalizálás (SEO – Search Engine Optimization) elengedhetetlen, ha oldalunkra látogatókat szeretnénk vonzani és ezt nem pusztán fizetett hirdetéseken keresztül szeretnénk elérni. A keresőoptimalizálás feladata, hogy weboldalunk felépítése, de legfőképp tartalma megfelelő legyen, azaz a kereső szolgáltatások (Google, Bing, ..) számára jól értelmezhető és könnyen feldolgozható formát öltsön.

Amikor a keresőmotorok feltérképezik oldalunkat, annak forráskódját elemzik. Az így nyert adatokkal oldalunk bekerül a rendszerükbe, mely alapján egyes keresésekkor találatként megjeleníti azt az adott felhasználónak. Célunk tehát, hogy a kereső számára olyan adatokat szolgáltassunk, mely alapján a számunkra fontos keresések esetén oldalunk megjelenik a találatok között (lehetőleg az első találati oldalon).

A kezdetek

Két alapvető fontosságú dologra szeretnék máris rávilágítani. Az első a megfelelő kereső kifejezések, közismertebben kulcsszavak kiválasztása. Mivel minden keresési oldalra még fizetett hirdetéssel sem lehet felkerülni, nagyon fontos, hogy azon keresések esetén érjünk el jó helyezéseket, amelyeket indító felhasználókat oldalunk látogatóiként szeretnénk viszontlátni. Üzleti célú oldal esetén ez azt jelenti, hogy a potenciális megrendelőinket kell elérnünk, a keresőmotor által számukra mutatott találati listán kell minél előbbre kerülnünk. Lehetőség szerint kérdezzünk meg minél több embert, ők hogyan, milyen kifejezésekkel keresnének olyan tartalmat/szolgáltatást, amit mi is nyújtunk? Sokat segíthet, ha meglévő vagy korábbi ügyfeleinket is megkérdezzük. Fontos, hogy a megfelelő kulcsszavakat nem elég induláskor kiválasztani, folyamatosan figyelni kell, melyek hozzák a számunkra értékes látogatókat, valamint hogy vannak-e olyan (akár új) kifejezések, melyekre jelenleg nem optimalizáltuk oldalunkat, de hasznos lenne.

A második dolog, amit semmikép se veszítsünk szem elől, hogy oldalunkat nem a keresőnek, hanem az onnan érkező látogatóknak készítjük! Fontos megjegyzés még, hogy nem is magunknak készítjük: a célközönség igényeit kell kiszolgálnunk, függetlenül attól, hogy az számunkra esztétikus-e, vagy éppenséggel szakmailag mennyire részletes.

Egy oldal, melynek fejlesztésekor a látogatók kiszolgálása nem a legfontosabb szempont, gyakran a jó találati listás helyezés ellenére sem működik: bár sok látogató érkezik, azok hamar elhagyják az oldalt, a várt megrendelések vagy egyéb célok elmaradnak. Egy oldal hatékonysága nem a találati listán elfoglalt pozícióval, hanem az elért végső célokkal mérhető.

Mi kell a keresőknek?

A kereső motorok célja, hogy az internetező felhasználók megtalálják azokat a weboldalakat, tartalmakat, amikre szükségük van. A keresők célja, hogy a felhasználók az ő keresőjükön keresztül jussanak el a céloldalakra, mivel ők is így juthatnak bevételhez – a keresők is üzleti vállalkozások, nem puszta jótékonyságból üzemeltetik a szolgáltatást. Egy keresőt akkor használnak az emberek, ha ott könnyen megtalálják azokat az oldalakat, amikre szükségük van. Ebből következik, hogy a kereső azon oldalakat fogja előnyben részesíteni és a találati listája elején megjeleníteni, amelyek a látogatóit a lehető legjobban kiszolgálják és a legjobb felhasználói élményt nyújtják számukra.

Ennek legfontosabb eszköze a megfelelő, egyedi tartalom. Ha ezzel nem rendelkezik oldalunk, a felhasználó nem találja meg, amit keresett és tovább áll – ilyen oldalt viszont a kereső nem fog előnyben részesíteni. Ezért kell jól olvasható, megfelelően tagolt (strukturált) szöveg az oldalra, ahol a képek, táblázatok és hivatkozások rendelkeznek kiegészítő információkkal, kapcsolatokkal. Nem célszerű tehát a kiválasztott kulcsszavakat halmozni, ez még legjobb esetben is csak egy rövid időre helyez minket a találati listán előbbre. Később a nehezen olvasható/értelmezhető tartalom miatt sokan hamar elhagyják majd oldalunkat, ami miatt egyre gyengébb helyezést érhetünk csak el.

A felhasználói élmény szempontjából szintén nagyon fontos, hogy oldalunk gyors legyen, a kattintás után legfeljebb 1-2 másodpercen belül már elérhető legyen a tartalom, használhatóak az oldal szolgáltatásai. Ehhez megfelelő tárhelyszolgáltató kell, valamint az oldal méretének (képekkel, effektekkel együtt) minél kisebbnek kell lennie. A folyamatosan terjedő mobileszközök és internetelérések miatt ez napjainkban különösen fontos lett.

Harmadik szempontunk a hitelesség, megbízhatóság: más elismert oldalak hasznosnak tartják a miénket, hivatkoznak nálunk szereplő tartalomra? Idéznek tőlünk? Ha egy, a kereső által értékesnek ítélt oldal ránk hivatkozik, az a kereső számára azt jelenti, hogy a mi oldalunk is értékes, a felhasználóknak ajánlható. Az ilyen hivatkozások létrehozását nevezik link építésnek.

Utoljára vegyük a felhasználói élményt. Tulajdonképpen a korábban említett oldalbetöltési sebesség is ide tartozik, de sok más dologra is figyelnünk kell. Oldalunknak ugyanis könnyen áttekinthetőnek és értelmezhetőnek kell lennie. Fontos, hogy az oldalon belüli navigáció könnyen elérhető és használható legyen, az oldalon belüli hivatkozások egyértelműek legyenek. A megjelenésnek bizalmat, megbízhatóságot kell tükröznie és nem szabad a felhasználót nagy mennyiségű hirdetéssel elárasztani. Ennek mérése nem egyszerű, de a visszafordulási arány vizsgálata segíthet (azaz látogatóink mekkora része nem időzik oldalunkon, hanem kattintás vagy olvasás helyett továbblép). Célszerű azt is megvizsgálnunk, melyek azok az aloldalak, ahol ez az érték magas, ezeket ugyanis át kell dolgoznunk.

Összegzés

Egy jó helyezéshez és oldalunk céljának eléréséhez értékes, jól érthető tartalom kell, amit könnyen és gyorsan elérhető formában kell előadnunk. E tartalomnak kell a kiválasztott kulcsszavak következetes (de nem túlzó) használatával bizonyítaniuk, hogy oldalunk az adott témában a felhasználók számára azt nyújtja, amit épp kerestek.

Google Maps térkép egyedi ikonnal

Szükségünk lesz a Google Maps API elérésére, melyet a megfelelő szkript betöltésével érhetünk el. Az itt ismertetett megoldáshoz nincsen szükség Google Maps API kulcsra. A térkép felületének nyelvét a language paraméter beállításával tudjuk szabályozni.

1
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places&key=GOOGLE_API_KEY"></script>

Ezen kívül szükségünk lesz még egy ID tulajdonsággal rendelkező HTML elemre, amibe a Google Maps a térképet tölti majd. A térkép megjelenítését egy kis JavaScript kódolással érhetjük el.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var latlongs = new google.maps.LatLng (47.123456, 18.123456);
 
var map = new google.maps.Map (document.getElementById ('contact_map'), {
	zoom: 15,
	center: latlongs,
	mapTypeId: google.maps.MapTypeId.ROADMAP
});
 
var map_icon = new google.maps.MarkerImage (
	'images/map_logo.png',
	new google.maps.Size (50, 50),
	new google.maps.Point (0,0),
	new google.maps.Point (16, 46)
);
 
new google.maps.Marker ({
	position: latlongs,
	map: map,
	title: 'Jelölő szövege',
	icon: map_icon
});

Az első sorban adjuk meg, hol helyezkedik el a megjelölni kívánt pont a Google Maps térképén. Ezután létrehozzuk a térképet, mely a megadott paramétereknek megfelelően fog megjelenni:

  • azon HTML elem azonosítója, melybe a térképet töltjük (contact_map)
  • a nagyítás mértéke (zoom), értéke 0 – 19 közötti lehet, ahol 0 a feljes Földgömböt jelenti
  • középpont (latlongs): ez az első sorban létrehozott változó, ez határozza meg a megjelenítendő terület középpontját
  • a térkép típusa, ahol a következő lehetőségek állnak rendelkezésünkre:
    • MapTypeId.ROADMAP: úthálózat megjelenítése (ez az alapértelmezett)
    • MapTypeId.SATELLITE: a Google Earth műholdképes megjelenítése
    • MapTypeId.HYBRID: hibrid mód, az előbbi kettő keveréke, a műholdképre rajzolja rá az egyéb kiegészítő adatokat
    • MapTypeId.TERRAIN: terepviszonyokat megjelenítő mód

Miután térképünk már van, a map_icon változóba létrehozunk egy képet, melyre a jelölő készítésekor lesz szükségünk: ez a kép fog megjelenni a térképen a megadott pontban. A kép létrehozásakor megadott paraméterek sorban:

  • a kép elérési útja
  • a képből használandó részlet mérete
  • a képből használandó rész kezdőpontja
  • a kiválasztott képrészlet azon pontja, mely pontosan illeszkedik majd a megadott helyre. Például, ha egy zászlót használunk képként, a zászlórúd aljának koordinátáit lehet érdemes megadni

Utolsó lépésként egy új jelölő létrehozásával elhelyezzük az előbb összeállított képet a korábban létrehozott Google Maps térképünkkel. A jelölő ikon létrehozásakor megadott beállítások:

  • position: az első lépésben létrehozott GPS koordinátára mutató pont. Korábban ezt használtuk térképünk középpontjaként is. Ha a jelölőt nem a térkép közepére szeretnénk elhelyezni, az első lépésben foglaltakkal megegyezően egy másik pontot is létrehozhatunk, így egyik a térkép közepét, másik a jelölő helyét adja majd meg. Ebben az esetben célszerű figyelnünk a nagyítás (zoom) megfelelő beállítására, hogy a jelölő a térkép által megjelenített területen helyezkedjen el
  • map: a térképet azonosító JavaScript változó, amelyre a jelölőt elhelyezzük
  • title: tetszőleges szöveg, mely akkor jelenik meg, ha az egérmutatóval az ikon felett időzünk a térképen
  • icon: a korábban létrehozott kép/ikon

Ugrás az oldalon belül – animációval

A HTML szabvány ősidők óta lehetőséget biztosít a weboldalon belüli navigációra, görgetésre, ami főleg hosszabb tartalom esetén tud hasznos lenni. Ehhez csak meg kell jelölnünk egy pontot az oldal forrásában (például a hozzászólások előtt), az alábbi módon:

1
<a name="comments"></a>

Majd az oldalon elhelyezünk egy vagy több hivatkozást, ami erre a pontra mutat:

1
<a href="#comments">Ugrás a hozzászólásokhoz</a>

Ennek a megoldásnak, bár egyszerű és jól működik, hátrányai is vannak: egyrészt módosítja az oldal URL-jét (példánkban a #comments hivatkozást hozzáfűzi az aktuális oldal URL-jéhez), másrészt görgetés nélkül, azonnal ugrik, így nehezen követhető, merre haladtunk az oldalon belül.

Fenti hátrányok pár sornyi jQuery kóddal könnyen leküzdhetőek. Az egyszerűbb eset, ha az oldal tetejére szeretnénk görgetni, akkor nem kell megjelölni a célpozíciót az oldalon belül, csak egy osztállyal megjelölni a linket, ami a görgetést aktiválja. A jQuery-s megközelítés további előnye, hogy nincs szükség valódi hivatkozásra, tehát tetszőleges HTML elemet (képet, gombot, ..) használhatunk:

1
<img src="kep.jpg" alt="Ugrás az oldal tetejére" class="scroll-to-top">

A kapcsolódó JavaScript kód pedig a következő:

1
2
3
4
5
6
$('.scroll-to-top').click (function (event) {
	event.preventDefault();
	$('html, body').animate ({ scrollTop: 0 }, 'slow');
 
	return false;
});

Ha nem az oldal tetejére szeretnénk görgetni, hanem egy adott pozícióra az oldalon belül, a fenti kódrészletben a scrollTop értékét 0 helyett a kívánt pozícióra kell cserélni. Persze a legtöbb esetben ezt nem tudjuk konkrét számértékként megadni, azért további módosításokra lesz szükség. A cél megjelölése az oldalon belül nem változik, a görgetést indító hivatkozás viszont igen:

1
<a href="#" class="scroll-to-target">Ugrás a hozzászólásokhoz</a>

A görgetést végző jQuery függvény pedig az alábbira módosul:

1
2
3
4
5
6
7
8
$('.scroll-to-target').click (function (event) {
	var target = $(this).data ('target');
 
	event.preventDefault();
	$('html, body').animate ({ scrollTop: $('[name=' + target + ']').position().top }, 'slow');
 
	return false;
});

Lebegő elemek szülőjének mérete

Ha egy HTML elembe float tulajdonságú elemeket helyezünk, a szülő elem mérete nem fogja követni a tartalom méretét. Így például ha egy bekezdésben lévő szöveg melletti, float használatával körbefolyatott kép magasabb, mint maga a szöveg, a kép ki fog lógni a bekezdésből. Ez elsőre nem feltétlenül szembetűnő, de ha pl. háttérszínt vagy keretet állítunk be a bekezdéshez, a jelenség zavaró lesz, sőt az oldal felépítését is elronthatja. Egyszerű megoldás lehet ilyenkor a bekezdés magasságát CSS-ben megadni, azonban dinamikus oldalak esetében ez nem megoldás. Ehelyett ajánlott CSS fájlunkba felvenni az alábbi sorokat, és az így definiált osztályt beállítani a lebegő elem(ek)et tartalmazó HTML elemeknél.

1
2
3
4
5
6
7
8
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
* html .clearfix { height: 1%; }
1
2
3
<p class="clearfix">
	<img src="kep.jpg" style="float: left">Ide jön a rövid szöveg.
</p>