Weboldal készítés

Hogyan készül egy weblap?

• 1. Személyes találkozó
• 2. Domain regisztrálás
• 3. Tárhely választás
• 4. Konfigurálás
• 5. Tartalom átadás
• 6. Programozás
• 7. Design
• 8. Vázlatterv
• 9. SEO

1. Személyes találkozó

Kezdjünk egy kávéval! A közös munka megkezdése előtt mindenképp szükség van egy személyes találkozóra, ahol egy csésze kávé felett átbeszéljük az elképzeléseidet, terveidet, és hogy az én ötleteimmel kiegészítve hogyan tudjuk mindezt majd a honlapodon megvalósítani. Ha mutatsz nekem hasonló témájú, akár konkurens oldalakat, amik tartalmukban, elrendezésükben, hangulatukban tetszenek vagy pont nem tetszenek Neked, azzal sokat tudsz segíteni, hisz ezáltal a céljaid mellett az ízlésvilágodhoz is közelebb kerülök.

2. Domain regisztrálás

Ki kell találnod egy jól megjegyezhető domainnevet, azaz a honlapod webcímét. Ez lehet a terméked/branded, céged neve, a vállalkozásod fantázianeve (ami az én esetemben www.scarabdesign.hu), de akár a tevékenységi köröd is (például www.weblapszerkesztes.hu). A domain kiválasztásánál fontos meghatároznod a célközönséged, így a régiót is, és aszerint kell választanod a tengernyi domainvégződések közt, ami Magyarországon .hu, de persze regisztráltathatsz egyéb nemzeti (.sk, .ro, .de) vagy globális (.com, .net, .eu) domainnevet is. Mihelyst sikerült egy egyedi domainnevet kitalálnod, amit korábban még nem foglaltak le, azt már csak regisztráltatni kell egy hivatalos szolgáltatónál. Ha magyar domaint szeretnél, és hogy az általad választott cím szabad-e, azt az alábbi linken tudod leellenőrizni:
www.domain.hu

3. Tárhely választás

Hogy a honlapod egyáltalán megjelenhessen, szükséged lesz egy tárhelyre is, ami tulajdonképp egy olyan távoli szerver, ahová a látogatóid csatlakoznak, ha a domaincímedet felkeresik. Rengeteg szolgáltató van a piacon, így érdemes körüljárni, hogy egy olyan céget keress, ahol a honlapod mindig és stabilan elérhető, a látogatók is biztonságban lesznek, valamint nem utolsósorban nem drága. Számos ingyenes tárhelyet kínáló cég létezik, de azokat több szempontból is érdemes kerülnöd!

Mivel a tárhelyszolgáltatók túlnyomó többsége egyben domainregisztrátor is, így egy füst alatt könnyen el lehet intézni mindkettőt egyetlen cégnél, és költségkímélő is, hisz így a domain és a tárhely együtt csak 8-10 ezer forintba kerül évente. Egy online regisztráció és esetleg egy nyomtatvány kitöltését követően 2-3 munkanapon belül már használatba is veheted az érvényes domainneved és tárhelyed.

Ha szükséged van rá, a szolgáltatók kiválasztásában és az ügyintézésben egyaránt szívesen segítek Neked, illetve bátran ajánlom azt a céget, amelyet hosszú keresgélés után szerencsésen választottam a saját és több megrendelőm weboldalához:
www.nethely.hu

4. Konfigurálás

Mihelyst elkészült a tárhelyed, vár rám egy hosszú és pepecselő feladatsor, no meg jó pár kávé, míg elvégzem az alapvető háttérbeállításokat: domain csatolás, DNS rekordok ellenőrzése, biztonságos SSL tanúsítványok létrehozása, PHP verzió beállítása, FTP/SFTP hozzáférés engedélyezése, biztonsági mentések beállítása, SQL adatbázis létrehozása, levelezőfiók konfigurálása… huhh, talán ennyi. Ne bánd, ha esetleg nem érted mik ezek, attól még lehetsz boldog ember!

CMS rendszer

A tárhely beállításait követően feltelepítem a WordPress-t, de egyedi kérés esetén Joomla vagy más CMS, azaz tartalomkezelő rendszert is használhatunk. Ezek rendszerek legfőbb előnye, hogy csak alapvető felhasználói készségeket igényelnek, így a honlapod tartalmán – egy könnyen kezelhető szövegszerkesztői felületen – a későbbiekben bármikor változtathatsz. Így nem leszel a honlapszerkesztődre, a marketingesedre vagy bárki másra utalva, ha ki kell javítani egy elgépelést vagy megcserélni egy bekezdést, de természetesen új oldalakat is tudsz feltenni, vagy épp törölni. A rendszerben a média fájlok is szabadon módosíthatóak, így minden fotód, videód vagy pdf dokumentumod saját magad is átszerkesztheted, lecserélheted, vagy újakat tölthetsz föl.

Hogy mindezeket könnyen kezelni tudd, a CMS rendszeren belül is el kell végeznem jó pár beállítást, de a konfigurálási teendőkkel, a munka szárazabbik részével szerencsére itt végeztem. Jöhet végre a kreatív rész!

5. Tartalom átadás

Van egy rossz hírem: a közös munka első nagy része a Tiéd! Az én munkám érdemi része csak ott kezdődik, ha már – e-mailben vagy pendrive-on – kézhez kaptam Tőled minden olyan szöveges és média tartalmat, amit csak a honlapodra szánsz. Ha szükséged lesz rá, ötleteimmel és meglátásaimmal szívesen segítek, úgyis mint egy külső szem, és mint szakember is, de – korábban akadt már ebből félreértésem – mások honlapjának tartalmát nem tudom helyettük megírni. A saját vállalkozásodat kizárólag Te ismered olyan behatóan, hogy azt és a céljaidat Te ismertesd a célközönségeddel.

A tartalom minősége és hangvétele is kulcsfontosságú, hisz ezekkel érheted el, hogy a felhasználók minden őket érdeklő információt megtaláljanak, ugyanakkor azok is tűnjenek ki, amiket Te vélsz fontosnak tudatni velük. A száraz, információszegény, nyúlfarknyi oldalak éppúgy kerülendők, mint a hosszan ömlengő, infókkal telebombázott tartalom, valahogy meg kell találni azt az egyensúlyt, amitől a weboldalad nem csak érdekes, de értékes is lesz. Felmérések bizonyítják – de talán magunkból kiindulva is ezt tapasztaljuk -, hogy ebben a rohanó világban a látogatók 30 másodpercet sem töltenek el egy olyan honlapon, ahol nem igazodnak ki rögtön, és ilyenkor bizony kilépnek, majd keresnek egy konkurens oldalt. Na, annál meg nem is történhet rosszabb!

Ha a tartalomírásban elakadsz, javaslom, hogy nézz szét a konkurenciád oldalain, mások mit és hogyan csináltak. A plagizálást persze kerülni kell, de mástól ötleteket ellesni, és átformálni a saját képedre nem szégyen. Halkan megsúgom, én is így tettem, miközben a saját weblapomat készítettem, és amúgy – ha bevallják, ha nem – minden cég vagy magánvállalkozás is így tesz.

Amennyiben szeretnél saját készítésű, vagy profi fotós által készített képeket vagy videókat is megjelentetni a weblapodon, azokra is szükségem lesz egy pendrive-on, illetve egy útmutatóra is, hogy azokat melyik oldalakra szánod. Kérlek, ügyelj arra, hogy a képek nagy méretűek és jó felbontásúak legyenek, mert a rossz minőségű fotók elcsúfíthatják a honlapod összképét.

6. Programozás

Drótváz

Végre én is nekikezdhetek a munkának! Első lépésként megtervezem és elkészítem a wireframe-t, azaz az egész weboldalad drótvázát. Ezen belül az alapszerkezet általánosan 3 szekcióra osztható: header (fejléc), footer (lábléc), valamint a kettő közt lévő article (törzs/cikk).

A fejléc fogja tartalmazni a logót, a menüt, a legfontosabb elérhetőségi adataidat, a közösségi platformjaidra mutató ikonokat, webshop esetén pedig idekerül még a kosár megtekintéséhez, a belépéshez illetve a regisztrációhoz mutató link is. A fejléc minden egyes oldal tetején meg fog jelenni, csakúgy mint az oldalak legalján szereplő lábléc, aminek tartalma tulajdonképp megegyezik az előbb felsoroltakkal, csak míg a header rendszerint vizuálisabb, grafikus elemeket tartalmaz, a footer elemeinek egyszerűnek, jól olvashatónak kell lenniük.

UI design

A fejléc és a lábléc közti törzsbe, a drótváz legfontosabb részébe a különböző oldalak szöveges, képekkel illusztrált tartalma fog kerülni. Ezeket a Tőled kapott anyagok alapján úgy tervezem meg, hogy azok a legmodernebb UI design, azaz a felhasználói felület (user interface) trendjeinek és alapkövetelményeinek megfeleljenek. A webszerkesztés ezen része szorosan összefügg a tényleges grafikus designnal is, ezért a szöveges- és médiaelemek, valamint a közöttük szereplő kattintható gombok és hivatkozások elrendezésénél és kinézeténél egyaránt a látogatók igényeit, szokásait veszem figyelembe.

A felhasználói felület megtervezése és kialakítása a keresőprogramokra is hatással vannak, ugyanis azok – különösen a Google – a látogatóbarát honlapokat rangsorolják előbbre. A Google kereső robotjai már nem a kulcsszavakkal teletűzdelt oldalakat részesítik előnyben (sőt, azokat hátrébb sorolják, egyes esetekben le is tiltják), annál már jóval okosabbak, és az értékes szöveges tartalmat, illetve a felhasználóbarát kialakítást preferálják.

Navigáció

Miután leprogramoztam a drótvázat és létrehoztam az összes fő- és aloldalt, elkészítem a menüt, ami a látogatóidat fogja navigálni az oldalak között. Ennek megtervezése pont annyira egyszerű, amennyire bonyolult is. Egyszerű, hisz a menüd elemei koppra megegyeznek az oldalaid címeivel, a nehézsége viszont az, hogy – különösen egy többszintű, legördülő menü esetében – figyelemfelketőnek, ám mégis átláthatónak is kell lennie, ugyanis a felhasználók szemei minden weboldalon a menüt keresik először. A menü leprogramozása után összekapcsolom az oldalakat is, vagyis – különösen a főoldalon – a tartalomban lévő gomboknak és szöveges hivatkozásoknak is megadom azt az utat, ahová a felhasználóidat fogja átvezetni.

Ekkora már tulajdonképp üzemel a weblapod, bár a fehér oldalakon, fekete betűkkel, itt-ott még rendezetlenül egybeolvadt szöveg nem valami bizalomgerjesztő. Na, itt kezdődik a varázslat…

7. Design

Ahogy az lenni szokott, már rögtön az első megbeszélés után, a hazafelé tartó úton azon kattog az agyam, hogy milyen lesz az adott honlap látványvilága, és mivel ilyenkor tengernyi kép villan föl a szemem előtt, a jó ötletekről jegyzetet szoktam írni és ceruzával papírra rajzolni. Így mikor ezen fázishoz érek a weblapszerkesztés során, az esetek túlnyomó részében már tökéletes látom, hogy a designtervvel mit akarok elérni, és hogy azt lépésről lépésre hogyan fogom felépíteni.

Még mielőtt egy tollvonást – akarom mondani egérkattintást – is tennék, a grafikai tervezés megkezdése előtt (olykor már a programozási munkák során) körbenézek a Google-ban jó helyezést elérő, a tevékenységi köröddel megegyező oldalakon. A konkurenciád feltérképezésével jobban kirajzolódnak a saját céljaim is, hisz a projektjeim során mindig arra törekedtem, hogy a munkám nem hasonlítson máséra, sőt, az nívósabb legyen, mint a konkurenciáé. Nem szerénykedem: ez eddig a legtöbb esetben sikerült.

Mivel egy egyedi látványvilág kialakításához sok idő és sok türelem is kell, napi 12-16 órát szoktam ezzel foglalkozni a hét minden napján, de még így is általában – a projekt nagyságától, illetve az egyedi speciális kérésektől függően – átlagosan 2 hétre van szükségem, hogy olyan látványtervet adjak át, amiben mindent meg is valósítottam, amit csak akartam. Igen, maximalista vagyok. (Hogy ez előny vagy hátrány, azt sokszor én sem tudom eldönteni.) Így kizárólag csak olyan honlapot adok ki a kezemből, amit külső szemmel nézve én is szívesen használnék. Mert igen, fontos, hogy nekem és Neked is tetsszen, de a legfontosabb szempont, hogy mindez a látogatóknak készül.

8. Vázlatterv

A honlapszerkesztés fázisainak leglátványosabb részeit, a programozási munkákat és a designterv kreatív megvalósítását egy virtuális szerveren, offline szoktam végezni, mely lehetővé teszi, hogy többféle színvilágot, elrendezési formát is kipróbálhassak. Úgyhogy a munkám eme szakaszát nem fogod látni, de mihelyst elkészültem a fenti feladatokkal, itt az ideje, hogy megmutassam Neked a már majdnem kész weblapodat! Valószínűleg ebben a 2 hétben végig azon izgultál, hogy milyen lesz a végeredmény, de hidd el, én pont annyira fogok izgulni a reakciódon, amikor meglátod a honlapod főoldalát!

A vázlat átadását telefonon és chaten keresztül, vagy egy személyesen találkozón is lebonyolíthatjuk, ahogy Neked kényelmesebb. Ekkor átbeszéljük, hogy változtassunk-e a színvilágon, hogy megcseréljünk, áthelyezzünk vagy megszüntessünk-e egyes bekezdéseket, képeket vagy oldalakat, amiket az egyeztetést követően módosítok is. Ezután a tárhelyeden lévő félkész honlapodat frissítem a teljes verzióra, ami már tartalmaz minden programfunkciót és persze a designt is, és ami a lényeg, hogy a weboldalad már online, mindenki számára elérhető.

9. SEO

Ez a szó már biztosan szembejött Veled jó párszor. A SEO, azaz a keresőoptimalizálás ugyanolyan fontos eleme a honlapoknak, mint maga a design vagy a tartalom. A szép design megfogja és kíváncsivá teszi a látogatót, az érdekes és információkban gazdag tartalom ott tartja, kapcsolatfelvételre és vásárlásra ösztöni, de a látogatók kizárólag csak akkor bukkanak rá a weblapodra, ha a Google-on és más keresőmotorok felületén egyáltalán megtalálnak Téged.

Ehhez az szükséges, hogy a honlapod tartalmazza az alapvető keresőoptimalizálási beállításokat és funkciókat is, amiket sok webszerkesztő és marketinges cég szeret külön kezelni, és a honlapod elkészítésének árán felül, a SEO beállításokért is külön – sokszor százezres nagyságrendű – összeget számláznak ki. Ezekért nekem nem kell külön fizetned!

A weboldalad alapvázát és minden egyes oldalát úgy programozom le, hogy azok – a látogatók előtt rejtett, de a keresőmotorok számára nagyon is látható – forráskódjai tartalmaznak minden fontos információt. Így a honlapod kiemelten a Google-ban, de egyéb keresőoldalakban is megtalálható lesz, méghozzá a célcsoportodra fókuszálva!

Az oldal további részei épp feltöltés alatt állnak. Folyt. köv.