Mit nem tudsz a saját weboldaladról?

Cikkünk célja, hogy a fontosabb alapfogalmak általános leírása és illusztrációja mentén segítsen fejlesztői szféra és a weboldalak megismerésében a laikus, kezdő vagy újrakezdő közönségnek. Mivel a programozás és fejlesztés egy elképesztő sebességgel fejlődő és szinte megfoghatatlanul komplex szakma, így közel lehetetlen teljesen általános megállapításokat tenni vele kapcsolatban. Az alábbiakban arra törekszünk, hogy a leginkább általános példákon keresztül mutassuk be azokat a szakmai alapfogalmakat, amikkel minden weboldaltulajdonos nap mint nap összefuthat, mégsem tekinthetjük őket az alapműveltség részének.

Az internet kilencvenes évek vége, a kétezres évek eleje óta a világ egyik leggyorsabban fejlődő piaca, közösségi és kommunikációs tere, számos önálló iparág alapja és korunk leginkább meghatározó jelensége. Nem csoda hát, hogy a kezdetektől egészen a mai napig egyre kevesebb cég működik weboldal és/vagy egyéb online jelenlét nélkül. Az eladás, a reklám és a napi ügyintézés, a munka és a magánélet egyre több aspektusa jelenik meg az online térben. Ezek közül a vállalkozások számára leginkább alapvető, az elsők között felbukkanó elemet, a céges weboldalakat vesszük most górcső alá. Miközben ugyanis mára a vállalkozások túlnyomó részének van saját weboldala, a weboldaltulajdonosok számára, számtalan esetben, egy távoli, nehezen átlátható dolog ez a kiemelt fontosságú kommunikációs felület, amihez igazán csak a programozó ért, holott a weboldal a cégé.

Ez pedig számtalan esetben vezet problémákhoz

• a programozó és a tulajdonos nehezen érthetik meg egymást,
• a funkciók, az alkalmazott megoldások, a feladatok időbeli és anyagi költségei nehezen érthetővé válhatnak,
• a tulajdonos aránytalanul függhet a programozótól
• és ezek számtalan kombinációja.

Ennek a posztnak az a célja, hogy a témában kevésbé jártas tulajdonosok számára bemutassunk pár alapfogalmat. Így szeretnénk segíteni, hogy az üzletnek ezt a része is átláthatóbb legyen. Induljunk tehát a kályhától.

Tartalom

1. Ki a programozó és mit csinál?
2. Miből lesz a weboldal?
3. Mit csinál a szerver és ki a postásom?
4. Az admin felület a Word, csak weboldalaknak?
5. A domain csak egy cím, ezt mindenki tudja?
6. Így írunk mi, avagy mi a kód?
7. Mire van nekem szükségem?

Ki a programozó és mit csinál?

Az alábbiakban elsősorban a weboldalak fejlesztésén keresztül mutatjuk be a szakmát és a főbb szereplőket, de webes programozói munka számtalan féle lehet. Weboldalak, webshopok, raktárkezelők, adminisztrációs alkalmazások, fizetési megoldások és számtalan szoftver létrehozásán dolgoznak programozók online és offline egyaránt. Ebből fakadóan az alábbiakat is bőven lehetne tovább elemezni, erre azonban talán egy élet sem lenne elég és jelen esetben nem is szükséges.

A legtöbbek számára a programozói (vagy fejlesztői) szakma ugyanúgy egy önálló átfogó szakma, mint az orvos, az ügyvéd, a gázszerelő vagy az autószerelő. Ez technikailag persze igaz is, ám fontos látni, hogy az orvosszakmában is megkülönböztetünk belgyógyászt, sebészt és pszichiátert és az autót sem mindegy, hogy karosszériáshoz, a szomszédhoz vagy márkaszervízbe visszük. Ehhez hasonlóan a programozó szakma is számtalan, egymáshoz sok esetben csak lazán köthető, kisebb egységre, ha úgy tetszik szakirányra bontható.

Sokat könnyíthet a dolgunkon, ha megismerkedünk a főbb irányokkal, amikbe több kevesebb sikerrel minden weboldalakon dolgozó programozót be lehet sorolni. Ezeket ismerve az alábbi 3+1 “programozói kategória” alapján könnyedén el tudjuk dönteni milyen szakemberre van szükségünk.

• Frontend fejlesztő – A weboldalak megjelenésének kódjáért felel. Nem grafikus vagy dizájner, hanem a kész grafikai tervet a böngészők számára is olvasható kódként felépítő fejlesztő. Rajtuk múlik az oldal tartalmának elrendezése, színei, méretei és animációi, amikor megnyitjuk a böngészőben. Ha képek mobilon félig kilógnak, ha az új arculathoz kell illeszteni egy oldal színeit vagy új videót kell betenni a főoldalra. Egy frontend fejlesztő tökéletesen megfelel a feladatra.
• Backend fejlesztő – A weboldalak hátterének működését, az adatok feldolgozásáért és a tartalmak előállításáért felelős kódot írja. Az ő munkájuk eredményei a tartalomszerkesztők, adminisztrációs rendszerek és még sok más. Rajtuk múlik, hogy milyen felületen hozzuk létre az oldalra szánt cikkeket, képeket, bannereket és videókat. Ahogy az is, hogy fel tudjuk dolgozni az oldalon beérkező információkat, hírlevélfeliratkozásokat, ajánlatkéréseket, vásárlásokat és a többit. Ha nem jönnek be a feliratkozók az oldalra, ha nem működik az előnézet a posztoknál vagy ha hibát dobál a felület, backend fejlesztőre van szükség.
• Fullstack fejlesztő – A fenti kettő ötvözete, olyan programozó, aki mind backend, mind frontend feladatokon dolgozik.
• A plusz egy fő: Rendszergazda – A rendszergazda a weboldal(aka)t futtató gépet telepíti, monitorozza és tartja karban. Az általa telepített és beállított gépre írja az oldalt az összes fenti szereplő és az ügyfelek is erről a gépről nyitják meg az oldalt. Bár a rendszergazda nem feltétlenül programozó, mivel a munkája nélkül nincs webes szoftver, így mindenképp a listánkon a helye.

Ahhoz, hogy egy weboldal, vagy bármely más interneten futó alkalmazás, működőképes legyen a fenti szereplők mindegyikére szükség van valamilyen kombinációban. Ám javítások, módosítások és kiegészítések esetén sokszor elég lehet egyetlen szakirányú fejlesztő segítsége. Ha Ön nem tudja kit volna érdemes keresnie a problémáival vagy igényeivel, forduljon hozzánk.

Miből lesz a weboldal?

Most, hogy egy kicsit megismertük a szakmai szereplőket, vessünk végre egy pillantást a termékre. Bármely weboldalt négy plusz egy fő elemre bonthatunk, amikkel anélkül is találkozunk weboldal tulajdonosként a napi rutin során, hogy tudnánk róla. Ezek az elemek:

1. a szerver (+1 és a levelezés)
2. a CMS
3. a domain
4. és a site

Az alábbiakban egy példán keresztül mutatjuk be, melyik összetevőnek mikor van szerepe a munka során. Példának vegyünk egy átlagos kedd reggelt, amikor:

• beérek az irodába és vár egy levél benne egy új kreatív anyaggal a weboldalra.
• Válaszban megköszönöm az anyagot,
• megnyitom az oldal adminját,
• feltöltöm a képet
• és végül ellenőrzöm a böngészőben, hogy a siteon a végleges helyén is úgy néz-e ki, ahogy azt szeretném.

A fentiek közül azonban semmit nem tudok megcsinálni szerver nélkül, így kezdjük ezzel, mi is a szerver?

Mit csinál a szerver és ki a postásom?

A szerver az alapja mindennek így közvetve hatással van egy-egy weboldal minden elemére és jelentős hatása lehet a fejlesztési és javítási lehetőségekre is. Mivel bárki is dolgozik az oldalán végső soron a szerveren fog dolgozni, így alapvető fontosságú a munka esetén, hogy ismerje a szervere alapvető paramétereit. Legyen szó az üzemeltetőről (amennyiben távoli vagy felhő tárhelye van), illetve a szerveren futó opercáiós rendszerről és az esetleges kiegészítő szolgáltatásokról, például a levelezésről. Egy elavult rendszereket használó szervergép számos hibát és biztonsági rést jelenthet, míg a gépen elérhető hardver, sávszélesség és szabad tárhely mind hatással lehetnek az oldal sebességére és a felhasználó élményre.

A szerver kifejezés jellemzően azt a környezet fedi, ahol a kódok és adatok tárolásra kerülnek, ahol azok egy része lefut, ahol egy másik részüket pedig eléri a böngésző. Sokszor itt fut a levelezés is. Minden világos, nem? Persze, hogy nem.

Pedig valójában a szerver nem több, mint egy számítógép. Lehet egy az irodában elzárva tartott saját számítógép, lehet egy fizikailag távol elhelyezett virtuális számítógép, lehet ugyanott egy megosztott számítógép, aminek a tárhelyét többen is használják. Utóbbi kettőt divatos mostanában felhőnek nevezni. De a szerver, bármilyen néven is illessük, minden esetben “csak” egy számítógép. Ami a szervert egy átlagos géptől megkülönbözteti, hogy a célja, hogy a tartalmát és a rajta futó alkalmazásokat 1, 2, 5, 50 millió gép egyszerre el tudja érni távolról, interneten vagy zárt (például irodai) hálózaton keresztül.

Weboldalakról lévén szó, esetünkben a szerver gép fő funkciói jellemzően az alábbiak:

• a weboldal adatainak tárolása,
• a weboldal futtatása, hogy a tárolt adatok (képek, cikkek, feliratkozók, videók stb.) végső soron maga a weboldal szerkeszthető és menedzselhető legyen a tulajdonos által,
• a weboldal futtatása a látogatók számára, hogy bárki, bármilyen böngészőből elérje a közzétett tartalmakat.
• Továbbá sok esetben az emaileket küldő és fogadó alkalmazás tárolása és futtatása.

Amikor tehát az irodába beérve megnyitom a leveleimet, akkor valójában egy szerveren futó levelezőprogramot nyitok meg. Ez a program adja át a levél tartalmát a böngészőmnek, erről a szerverről töltöm le a kapott anyagokat és amikor elküldöm a választ ugyanez a szerveren futó alkalmazás továbbítja a levél tartalmát a címzett felé.

Fontos megjegyezni, hogy a levelezés lehet ugyanazon a szerver gépen mint a weboldal, de lehet máshol is. A céges levelezést a legtöbben ugyanazzal a címmel használják, mint a weboldalukat, de ez sem jelenti, hogy ugyanazon a szerveren kell lenniük. Egy példával élve a helio.hu weboldalhoz tartozó emailcímek is mind @helio.hu -ra végződnek azonban a weboldal egy magyar cég szerverparkjában fut egy virtuális számítógépen, míg a levelezés a Google szerverén fut.

Ön tudja hol fut az oldala? Ismeri milyen gépért vagy milyen tárhelyért fizet? Tud kihez fordulni, ha valami probléma van a géppel (szolgáltatáskiesés, biztonsági rés, spamba futó levelek)? Kérdés esetén bátran forduljon hozzánk.

Az admin felület a Word, csak weboldalaknak?

A levelemet megnyitottam a képet letöltöttem és választ is írtam, ideje feltenni a weboldalamra. Ehhez CMS rendszerre van szükség. A CMS (content management system) az összefoglaló neve azoknak az alkalmazásoknak, amiken keresztül a weboldalad tartalmát szerkesztheted. Ezt szoktuk az oldalak admin felületeként is emlegetni. Aki még nem látott CMS rendszert, az gondoljon egy igen okos és specifikus Wordre, ami a szerver számítógépen fut és a beírt, bemásolt és beállított tartalmakat egyből a weboldal felületén jeleníti meg. Általánosságban a CMSen keresztül van az egyetlen út, hogy a weboldalon megjelenő szövegeket, képeket vagy videókat szerkeszteni tudjuk. Kivéve persze, ha fejlesztőről van szó, akkor van egy pár másik út is. Népszerű CMS rendszerekek például:

• a WordPress,
• a Drupal,
• a Joomla,
• a SiteCore
• és számtalan egyedi megoldás.

A CMS számos elemét meghatározhatja egy oldalnak és mivel számtalan adott CMSre szakosodott fejlesztő és cég létezik, így rengeteget segíthet egy-egy kiegészítő ajánlatkérés, javítási igény vagy egyéb munka esetén, ha ismerjük a weboldal CMS-ének típusát, verziószámát, esetleg a fontosabb kiegészítőit, plug in-jait.

Belépek tehát az oldalhoz tartozó CMS felületre, megkeresem a módosításra szánt oldalt, feltöltöm a képet majd mentem a tartalmat. A CMS korábban említett backend kódja felel azért, hogy a képet beillessze a weboldalra a megfelelő helyre. A frontend kód felel azért, hogy a kép olyan pozícióban, tájolással és méretben jelenjen meg, ami illeszkedik az oldal megjelenésébe.

Ha mindezzel végeztem, a CMSen keresztül a kép felkerült a szerverre, bekerült az oldalamon a megfelelő helyre és így már bárki számára elérhető, aki az oldalra látogat. Az utolsó lépés, hogy az eredményt megnézem egy (vagy akár több) böngészőben, lehetőleg több eszközön, hogy eltérő képernyőméreteken is ellenőrizzem.

A fenti példa arányai arra is rávilágítanak, hogy egy-egy weboldal esetében mekkora szerepe van a háttérfolyamatoknak. Amikor egy weboldalra gondolunk elsőre mindenkinek “végeredmény” a site jut eszébe, amit a böngészőben megnyit. Ez persze jól is van így, de fontos felismerni, hogy nem minden a külcsín. Aki reklámra, értékesítésre, tartalomgyártásra vagy bármilyen munkafolyamatra használja weboldalát, annak legalább annyira fontos, hogy a szerver, a levelzés és a CMS is gyors, parktikus és biztonságos legyen.

A domain csak egy cím, ezt mindenki tudja?

Ahhoz, hogy megnyissam az oldalamat a böngészőbe beírom a https://helio.hu -t és máris megnyílik az oldal, erről mit kéne beszélni? Egy keveset.

A domainek első és legfontosabb funkciója valóban az, hogy címet adjanak egy-egy gépnek. A beírt domain adatai határozzák meg, hogy a böngésző milyen címet nyisson meg. Ha az adott címen elérhető egy publikus weboldal, a böngésző ezt azonnal meg is jeleníti. A domainek alapját képző DNS szabványnak köszönhetjük, hogy nem számsorokat kell megjegyezzünk a kedvenc oldalaink megnyitásához. Ez azonban csak egy a funkciók közül, egy-egy domain ennél jellemzően jóval több információt tárol. A domain beállításokon keresztül érhetjük el:

• a megnyitandó gép IP címét, tehát a weboldalunk helyét,
• amennyiben saját emailcímet használunk (pl.: @helio.hu) a levelezést bonyolító szerver elérését,
• a domain technikai paramétereit: rendszergazda e-mail címe, szériaszám, frissítési idő, lejárat.

Számos esetben találkozunk olyan helyzettel, hogy a fentiek szépen lassan szétszóródnak, míg végül három különböző szolgáltatóval áll szerződésben cég, egy felel web tárhelyért, egy a levelezésért és még a domain is egy harmadik helyen van regisztrálva. Ez anyagilag is lehet problémás, adminisztráció szempontjából annál inkább. Kevesen tudják például, de .hu végződésű domain-t Magyarországon csak azonosított cég vagy magánszemély jegyezhet be és a későbbiek során csak ez a bejegyző nyilatkozhat róla. Így ha a cégünk domainjét az az informatikus kolléga regisztrálta, aki azóta Ausztráliába költözött, ütközhetünk problémákba, ha ismét hozzá szeretnénk férni. 

Hiába tűnik tehát apróságnak még egy olyan közismert tényező is, mint a domain, okozhat fejfájást.

Így írunk mi, avagy mi a kód?

Senkit sem szeretnénk felesleges technikai részletekkel fárasztani, ám mivel minden program alapja a kód, egy pár szót muszáj említenünk róla. Ahogy minden program, a fent írtak is mind “kódból vannak”. A szerver a kódot futtatja, a megjelenés és a CMS kódnyelven íródik, a domainen keresztül ezt a kódot érjük el. Általánosítva, bármi, amit a weben létrehozunk, bármi adat, ami befolyik vagy megjelenik az oldalunkon programkódból áll össze.

A mi munkánk az, hogy a megrendelők elképzeléseit kód formájában hozzuk létre. A programozás nyelve azonban korántsem univerzális, számos eltérő nyelv létezik. A nyelvekre példa lehet:

• Frontend esetén: HTML, CSS, Javascript
• Backendre: C#, C++, JAVA, PHP, Python
• Adatbázisokhoz: MSSQL, MySQL

A fejlesztők ezeket a nyelveket ritkán használják önállóan, hiszen mindegyik más és más célra ideális. Így nem feltétlenül egyértelmű a válasz arra, hogy milyen nyelven van az oldalam. Ezen a weboldalon például:

• HTML, CSS és Javascript nyelven írt kód felel a frontendért vagyis a megjelenésért.
• A weboldal tartalmait menedzselő és adatait feldolgozó CMS elsősorban PHP nyelven íródott,
• a megjelenített és a weboldalon keresztül tárolt adatokat pedig MySQL adatbázisban tároljuk.

Így, ha fejlesztőt keresnénk olyat vagy olyanokat keresnénk, aki jártas a HTML, CSS, JS, PHP és MySQL világában. Ilyesmi azonban még nem fordult elő, hiszen mi is jártasunk vagyunk ebben. Ha Ön kevésbé biztos ebben, de szüksége volna az információra, csak kattintsion.

Mire van nekem szükségem?

Röviden: konzultációra. A programozás és fejlesztés rendkívül fiatal és komplex szakma, amivel, bár ez már-már közhely, határtalan lehetőségeink vannak a problémák megoldására. Azonban pont a határtalan lehetőségek miatt kell idő és ismeret, hogy megtaláljuk egy-egy igényhez a legjobb megoldást. A fenti komponensekre millió összeállítás jut és butaság lenne azt mondani, hogy van köztük egy vagy kettő, ami egyértelműen jobb a többinél.

Mi is tudjuk, hogy mindenki szereti a kész válaszokat, de nem véletlen, hogy nincs egyértelmű átfogó válasz arra, hogy mennyibe kerül egy weboldal vagy milyen weboldalra van szükségem. Ahogy nincs általános válasz arra sem, hogy mennyibe kerül egy ház. A fentiekkel reméljük, hogy tudunk segíteni abban, hogy azt jobban átlássa mi az alap, a fal és villany és társaik megfelelője egy weboldal esetén. 

A határtalan személyre szabhatósággal együtt jár, hogy csak akkor kínálhat bárki bárkinek megfelelő megoldást, ha minél pontosabban ismeri az igény részleteit és az igény mögött álló embereket. Mi ilyen személyre és cégre szabott megoldásokban gondolkozunk, keressen minket bátran, akár kérdése, akár javítási vagy fejlesztési igénye van. Felhasználóbarát nyelvet beszélünk!

Képek: 123rf