I. Honlapkészítés

KEZDŐKÉNT, A HONLAPUNK ELKÉSZÍTÉSE SZOKOTT SOK GONDOT OKOZNI. FOGALMAD SINCS, MIT KÉNE TENNED, HOGYAN IS MŰKÖDIK EZ AZ EGÉSZ, EZÉRT HATALMAS ÉS BEVEHETETLEN AKADÁLYNAK LÁTOD MAGAD ELŐTT. NÉZZÜK HÁT, HOGYAN IS MŰKÖDIK EZ AZ EGÉSZ!

ELÖLJÁRÓBAN ELMONDHATÓ, HOGY KÉTFÉLE MÓDON JUTHATSZ HONLAPHOZ: 1. SZAKEMBERREL KÉSZÍTED 2. SAJÁT MAGAD KÉSZÍTED

I.1. Ha szakemberrel készíted weblapodat

Azt mindenképp tudnod kell, hogy ha szakember készíti, akkor sem tudsz teljesen kibújni némi technikai tudás megszerzése alól. Ahhoz, hogy saját magad tudj tartalmakat írni az oldaladra és ne kelljen minden apróság miatt a programozót zaklatnod, elkerülhetetlen, hogy beletanulj néhány technikai apróságba:

• a legtöbb tartalomkezelő rendszert tudod használni, ha a szövegszerkesztőhöz értesz – bár, azt hozzá kell tenni ez nem teljesen úgy működik, mint a szövegszerkesztők, mert a webes megjelenítésnek vannak bizonyos korlátai a nyomdaihoz képest, és ezt meg kell tanulnod; • érdemes elsajátítanod a HTML kódolás alapjait, enélkül ugyanis nem tudsz apróbb, könnyen javítható hibákat észrevenni és kijavítani a szövegeidben vagy a hírleveledben;

• a képszerkesztés alapjait is meg kell tanulnod (pl. hogyan tudsz egy képből kivágni egy részletet vagy átméretezni); • értened kell az egésznek a felépítését, logikáját, mert a programozónak neked kell megmondanod, milyen legyen az oldal, illetve később, hogy milyen fejlesztéseket szeretnél rajta.

I.2. Ha te készíted el az oldaladat

Ha rászánod az időt és energiát, akkor két utat választhatsz: 1. statikus oldalt, vagy 2. dinamikus oldalt készítesz.

I.2.1. Statikus oldal

A statikus oldal a legegyszerűbb webes megjelenési forma, aminél az oldal szövege és minden más is egy HTML fájlban található. A honlap minden egyes oldala újabb HTML fájl, aminek előnye az,

hogy minden oldal teljesen egyedi lehet (pl. más dizájnt kap), viszont komoly korlátai is vannak:

• ha egy olyan elemet szeretnél lecserélni, ami minden oldalon megegyezik, akkor minden oldalon változtatnod kell (persze erre vannak módok, hogy kikerüld vagy meggyorsítsd, de ezeknek is vannak hátrányai), • mivel a szöveget a HTML fájlban tároljuk, sokkal lassabban töltődnek be az oldalak, • egy sor funkciót nem tudsz adatbázis nélkül megvalósítani (fórum, webshop, regisztráció, automata hírlevél-feliratkozás stb.), • minden változást a HTML kódban kell átírnod (pl. új szövegeket feltenni, új oldalakat létrehozni stb.).

Ha statikus oldalt szeretnél létrehozni, akkor azt a legegyszerűbben a Jegyzettömbben teheted meg, amibe bepötyögheted a HTML kódot (nyilván ehhez meg kell tanulnod a HTML nyelv alapjait, ehhez segítség például a www.w3schools.com honlapja, ahol gyakorolni is tudsz a tanult HTML kódokkal, és segítséget is kapsz angol nyelven).

Vannak olyan szoftverek is, melyek segítenek a honlapszerkesztésben, például az Adobe Dreamweaver is ezek közé tartozik, aminek nagy előnye az, hogy vizuális szerkesztőfelülete van, tehát látod, amit csinálsz, de a HTML kódban is tudsz szerkeszteni, ez azonban egy fizetős szoftver.

Az ingyenes szoftverek között csak néhány képes arra, amire a Dreamweaver, legtöbb esetben a módosításokat futtatja a böngészőben, így könnyen ellenőrizhető, hogy jól kódoltunk-e (ilyen például a Notepad++ - itt a kódok is külön színnel vannak jelölve a könnyebb kezelés érdekében, és a program magyarul is elérhető).

Statikus oldalt akkor érdemes készítened, ha semmi extra funkciót nem szeretnél az oldalra, nem szeretnéd gyakran frissíteni a tartalmat, csak egy oldalt szeretnél, ami információt nyújt a cégedről, a termékedről vagy a szolgáltatásodról, esetleg megrendelési vagy ajánlatkérési űrlapot szeretnél kitenni oldaladra.

I.2.2. Dinamikus oldalt készítesz

A dinamikus oldalak olyan oldalak, amikben vannak változó részek is, amiknek a hátterében lehet Javascript 1 vagy PHP 2 is. Az adatok gyakran (szövegek, felhasználónevek és jelszavak stb.) egy adatbázisban tárolódnak, csak a honlap kinézete, váza készül HTML-ben (vagy PHP-ban).

Ha olyan oldalt szeretnél, ami tartalmaz blogot, fórumot, webshopot, regisztrációs lehetőséget, ahol könnyen tudsz

1

2

A JavaScript programozási nyelv egy objektumalapú szkriptnyelv, amelyet weboldalakon elterjedten használnak. A JavaScript kód vagy a HTML fájlban vagy külön (jellemzően .js kiterjesztésű) szövegfájlban van. Ezek a fájlok tetszőleges szövegszerkesztő (nem dokumentumszerkesztő) programmal szerkeszthetők. A PHP egy általános szerver oldali leírónyelv, más néven szkript (script) nyelv. Alapvetően dinamikus weblapok létrehozására és üzemeltetésére hozták létre. Az első leírónyelvek egyike, melyek megengedték a fejlesztők számára, hogy a kódot a HTML vázba ágyazhassák, kötelezően külső fájlok használata helyett, a kódot pedig a webszerver PHP processzor modulja értelmezi.

például galériákat létrehozni, akkor érdemes dinamikus oldalt létrehoznod valamelyik tartalomkezelő használatával. Rengeteg féle tartalomkezelő (CMS) rendszer van, ezekről nagyon jó összeállítást találsz a CMSAward oldalán (elérhetőség: https://www.cmsaward.hu/).

A leggyakrabban használt CMS rendszerek, a WordPress, és a Drupal. Mindegyiknek vannak előnyei és hátrányai egyaránt. Azonban legnagyobb előnyük, hogy ezek a rendszerek nyílt forráskódúak 3 , tehát a felhasználók fejlesztik őket tovább, illetve fejlesztenek hozzá kiegészítőket. Valamint ingyenesek, tehát szabadon letölthetők, használhatók, fejleszthetők.

Azért van egy nagy hátrányuk is az egyedileg fejlesztett rendszerekkel szemben, ugyanis a nyílt forráskód miatt nagyobb a támadások esélye, viszont ez egyben előny is, mert ha feltűnik valamilyen támadás általában 1 napon belül megszületik a megoldás is a kivédésére, míg ha valaki más, vagy magad fejlesztesz le egy rendszert és valaki megtámadja, akár napok is eltelhetnek, mire rájössz vagy a webfejlesztőd rájön a megoldásra.

A nyílt forráskódú CMS rendszerek azért is praktikusak, mert viszonylag könnyen meg lehet tanulni a használatukat, gyorsan beüzemelheted őket és már írhatod is a tartalmat, nem kell a fejlesztőre várnod, magad alakíthatod a dizájnt, és ha holnap megunod, lecserélheted egy másikra. Ha kitalálsz egy új menüpontot, akkor nem kell emiatt átírnod az egész

Nyílt forráskód jelentése: A szabad vagy nyílt forráskódú szoftverek (FLOSS) szabadon használható, másolható, terjeszthető, tanulmányozható és módosítható számítógépes programok.

oldalt, vagy a programozót megkérned, mivel egyedül is könnyen létre tudod hozni.

I.3. Mire van még szükséged egy saját honlaphoz?

Ha megvan, hogy milyen módon kívánod a honlapodat fejleszteni, akkor utána szükséged lesz egy tárhelyre, ami lehet ingyenes szolgáltatónál is (pl.: http:// freeweb.hu/ , https://atw.hu/), ami gyakorlásnak tökéletes, de ha komolyan gondolod az egészet, akkor érdemes rááldozni néhány ezer forintot éves szinten és saját tárhelyet vásárolni.

Ami még nagyon fontos az a saját domain név. Ezzel kapcsolatban több erre specializált honlapon is ellenőrizheted, hogy a kiválasztott nevet már regisztrálták-e.

Az egyik ilyen ismert oldal: https://goo.gl/sS1AKT.

Ha a kitalált domain név szabad, akkor az alábbi szabályok tudatában és igénylőlap kitöltésével tudod regisztrálni honlapod domain nevét: https://goo.gl/KQXSEi

TIPP: Érdemes olyan találó nevet kreálni domain névnek, ami kapcsolódik a tevékenységhez, vagy a honlap tartalmához, és az emberek könnyen tudják mihez kötni! A tárhelyfoglalásnál ügyelj arra, hogy a szerver képes legyen PHP-t futtatni és járjon a tárhelyedhez korlátlan adatbázis is!

A WordPress, ahogy korábban is említésre került, egy ingyenes és nyílt forráskódú, PHP és MySQL alapú tartalomkezelő rendszer. Számtalan funkciót magába foglaló, modulárisan felépített publikációs platform. Többek között ennek a modularitásnak köszönheti a népszerűségét. A világ top 1 millió weboldalából 16,7% WordPress alapú (forrás: Alexa) és az új weboldalak 22%-a készül WordPress-el. Ez a platform a legnépszerűbb tartalomkezelő rendszer ma az interneten!

Wordpress szerkesztő felület nyitóoldala

I.4.1. Főbb jellemzők I.4.1.1. Sablonok Sablonnak nevezzük azt a grafikai felépítést, aminek a segítségével megjelenik a weboldalunk. Számos grafika közül válogathatunk az adminisztrációs felületen, jelenleg több mint 1600 tölthető le ingyenesen a WordPress alkotóinak hivatalos oldaláról. Ingyenes témák itt találsz: https://wordpress.org/themes/.

I.4.1.2. Bővítmények A WordPress egyik legnagyszerűbb tulajdonsága, hogy bárki könnyedén fejleszthet hozzá bővítményeket, kiegészítőket. A nyílt forrású szellemiségnek köszönhetően fejlesztők ezrei teszik közzé az általuk készített fejlesztéseket ingyen. Jelenleg több mint 22.000 ingyenesen letölthető bővítmény található a WordPress hivatalos bővítménytárában. Ingyenes bővítményeket itt találsz: https://wordpress.org/plugins/.

I.4.1.3. Kisalkalmazások - Widgetek Widgeteknek nevezzük azokat a kisalkalmazásokat, melyek segítségünkre vannak a weboldalunk megjelenésének finomhangolásában. A widgetek kezelése igen egyszerű, gyakorlatilag egérrel építhetjük fel az oldalunkat, az úgynevezett „fogd és vidd” technológia segítségével. Ezek a mini modulok (alapesetben) a szöveges rész egyik oldalán elhelyezkedő sidebar-on megjelenő dobozok (box). Például: Keresés, Friss hozzászólások, Friss bejegyzések, Címkefelhő, stb.

I.4.1.4. Mobilalkalmazások A WordPress elérhető a legnépszerűbb mobil-operációs rendszereken is, például: WebOS, Android, iOS (iPhone, iPod Touch, iPad).

I.4.2. WordPress Kézikönyv

A WordPress Magyarország oldalán található egy részletes bemutató a rendszerről. Ez a Kézikönyv bemutatja a WordPress adminisztrációs felületét. Elsősorban átlagfelhasználóknak ajánljuk. Itt található: https://goo.gl/6DhpNz

I.5. Wix

A WIX szintén egy ingyenes, felhő alapú weboldal készítő rendszer, használatával ugyanúgy online lehet weboldalakat készíteni (a legfrissebb HTML5 alapú weboldalról van szó), a WordPresshez hasonlóan szintén „fogd és vidd” technológia működtetésével. Jellemzőjeként meg kell említenem azt, hogy míg a WordPressnél az évek alatt több tízezer sablon készült, addig ennél a lehetőségnél még csak pár ezer áll rendelkezésre, tehát jelentősen nagy különbség figyelhető meg. Közösként említhetjük ki azt, hogy mindkettő reszponzív, tehát minden képernyő stíluson (mobil, tablet, asztali verzió) jól és szépen jelenik meg. Emellett a WIX-el is könnyedén lehet webáruházat készíteni.

Ami nagy előnyeként említhető ki a WIX esetében, az az, hogy 24/7-es ügyfélszolgálat áll rendelkezésre, tehát van kihez fordulni, ha gondba ütköznénk. Azonban nemzetközi cégről van szó, így ez segítség magyarul nem érhető el.

Nagy különbség a két rendszer között, hogy míg a WordPress nyílt forráskódú, tehát bárki szabadon szerkesztheti az alap rendszert is és tovább adhatja azt használatra, addig a WIX nem nyílt forráskódú.

Ez annyit tesz, hogy csak akkor lehet használni ezt a platformot, ha regisztrálunk hozzájuk. Persze ez részben jónak is tekinthető, hiszen míg a WordPressnél előfordul az, hogy egy-egy bővítmény meghibásodik, vagy összeomlik, esetleg vírust hordoz, addig ennél az opciónál garantáltan jó kiegészítést kapsz.

I.5.1. Használata

Tapasztalatok alapján a WIX sokkal inkább elsajátítható az átlagemberek számára is. Számukra jóval egyértelműbb és sokkal jobban ellátja a minimális igényeket. Míg a WordPress-nél elég sok esetben az a tapasztalás, hogy az igényeket csak programozó tudja ellátni.

WIX szerkesztőfelülete Persze WIX-nél ez így nem megoldható, ahogy említettem a minimális, átlagos igényeket tudja csak kielégíteni, de azokat viszont hibamentesen és maximálisan. Persze ennek viszont megvan a hátulütője is. Igaz, hogy a WIX-et az átlagember átlagos igényeihez hozták létre, de emiatt a megvalósítási lehetőségek tárháza is véges. I.6. Melyik a jobb? Ahogy már korábban említésre került a WordPress erős, stabil és elterjedt rendszer, ami eléggé jól alkalmazkodik a felhasználó igényeihez. Persze a használatához, az egyes funkciók kezelésének elsajátításához időt kell rá szánni. Azonban az ismertető anyagok, tájékoztató blogbejegyzések tárháza végtelen. a WordPress-el. Ahogy már ismertetésre került egyszerűbb használni, viszont még kevés funkcióval bír. Tehát ez teljes mértékben a felhasználóra van bízva, hogy egy egyszerű, de stabil keretrendszer (WIX) segítségével szeretné weblapját létrehozni, vagy inkább több energiát és időt belefektetve egy igen kreatív weboldalt készít vállalkozásának a WordPress segítségével. I.7. Adobe Dreamweaver Mint ahogy az korábban is említésre került, a Dreamweaver, akkor jó választás, ha valaki nagyon jártas a honlapkészítésben és ismeri a HTML nyelvet.

A WIX tényleg optimális és jó rendszer, de még bőven van hova fejlődnie ahhoz, hogy esetleg majd felvehesse a harcot Az Adobe által kiadott program az egyik legismertebb weboldalkészítő alkalmazás. A profi kép és videószerkesz-

Adobe Dreamweaver szerkesztőfelülete

tő szoftvereiről elhíresült cég, a honlap szerkesztő esetében is hozza a Tőle megszokott színvonalat és támogatottságot. Mint a cég legtöbb programja, így ez is 1 hétig ingyenesen kipróbálható (a telepítés napjától indul a visszaszámlálás). Utána fizetőssé válik az alkalmazás, melynek költsége az alábbiak szerint alakul:

ADOBE DREAMWEAVER CSOMAGOK (FORRÁS: www.adobe.com)

Fizetés módja Ár Tartalma

Éves csomag, havi fizetés 25,39 euró / hó 100 GB felhőtárhely, Adobe Portfolio, Adobe Fonts és a prémium funkciókkal kiegészített Adobe Spark

Éves csomag, előre fizetve 304,56 euró / év

Havi előfizetési csomag 38,09 euró / hó 100 GB felhőtárhely, Adobe Portfolio, Adobe Fonts és a prémium funkciókkal kiegészített Adobe Spark

100 GB felhőtárhely, Adobe Portfolio, Adobe Fonts és a prémium funkciókkal kiegészített Adobe Spark

A Dreamweaver rendelkezik WYSIWYG 4 szerkesztővel, így akár kezdők számára is használható alapszintű HTML nyelvismerettel. A legújabb verziókban ráadásul JavaScript, AJAX 5 is elérhető.

A Dreamweaver nagy előnye, hogy előre beépített sablonokkal is rendelkezik, így a weboldal már indítható egy kezdő sablonnal, melybe már csak a tartalmat kell feltölteni. Mindezek mellett a Dreamweaverrel képesek vagyunk reszponzív weboldalakat is készíteni, ami annyit tesz, hogy honlapunk tökéletesen igazodik a különböző képernyőméretekhez (okostelefon, tablet, asztali számítógép).

4 A WYSIWYG angol nyelvű rövidítés, feloldása: what you see is what you get (amit látsz, azt kapod). Jelentése az, hogy a szerkesztő rendszer nagyon erősen, a kényelmes olvasási látványhoz közeli kompromisszumra van beállítva, vagy egyáltalán ilyenre beállítható. 5 Az AJAX interaktív webalkalmazások létrehozására szolgáló webfejlesztési technika.