Videó fejezetek:
Ebben a videóban egy egyszerű weboldalt fogok elkészíteni. A weboldal két célt fog szolgálni. Az egyik cél, hogy az eddig általam elkészített videókat írásos formában is elérhetővé tegye. A másik cél, hogy a videók elérhetők legyenek függetlenül a szociális média platformoktól.
Ugyanakkor úgy gondoltam, hogy a weboldal elkészítésének a folyamata egy hasznos tartalom lehet mások számára is. Hobbi projektek, bizonyos fajta induló vállalkozások számára az itt bemutatott weboldal-készítési megközelítés egy megfelelő út lehet.Előrebocsátom, hogy ebben a videóban nem szerepel semmilyen promóció. Továbbá a kedves néző részéről nem feltételezek magasabb informatikai tudást, mint amely középiskolában tanulható vagy általános irodai munka által igényelt. Illetve, az elkészítéshez használt programokat is úgy választottam meg, hogy azok teljesen ingyenesek legyenek és akár egy 10 éves számítógép is képes legyen a futtatásukra.
Végül pedig a videó szempontjából pedig azt is fontosnak tartottam, hogy az itt bemutatott módszer kellően időtálló legyen évek távlatából is. S így az tudás amelyet e videó megtekintése során szerezhetsz, hosszabb időn át nyújthat számodra értéket. A videónak nem célja, hogy minden igényt kimerítően foglalkozzon a weboldal készítés témakörével. Ugyanakkor egy megoldást bemutat kompletten, melyet végigkövetve hasonlatos weboldalak készítésének ismeretét szerzed meg.
Először is fontos tisztáznom, hogy mit értek egyszerű weboldal alatt. Pontosabban, beszélnünk kell a weboldal céljairól, és a weboldal azon képességeiről, tulajdonságairól, melyeket ezen célok eléréséhez szükségesnek, vagy opcionálisnak tartunk. Úgy is mondhatjuk, hogy fel kell mérni az igényeket.
Egy analógiával élve, tekinthetünk egy weboldalra úgy, mint egy olyan eszközre, mint a jármű. Járművekből számos fajta létezik: korcsolya, roller, autó, repülőgép, tengeralattjáró, stb. Elképzelhető, hogy olyan igényeink lesznek, amelyek kielégítésére egyértelműen egy adott típusú jármű lesz csak megfelelő, bár talán annak altípusai közül még válogathatunk különböző szempontok alapján. Sokszor előfordulhat azonban, hogy egy utat többféle járművel is megtehetünk, és a jó választás nem egyértelmű, sőt, néha az egyéni preferencia lesz a döntő. Fontos, hogy erre a kérdéskörre időt szenteljünk, mert különben előfordulhat, hogy mondjuk repülővel megyünk Budapestről Bécsbe, holott más megoldás gyorsabb, kényelmesebb, és kevésbé költséges is lett volna.
Az ebben a videóban elkészítendő weboldal is abba a kategóriába esik, ahol sokféle megközelítést alkalmazhatnánk. De erre a következtetésre csupán az igényeink felmérése után juthatunk. De honnan is tudhatnánk, hogy mi az amire feltétlen szükségünk van, mi az amire a közeli vagy távolabbi jövőben lesz szükségünk, vagy pedig úgy állunk vele, hogy hasznos lehet, de nem biztos, hogy megéri belefoglalni.
Az igazság az, hogy az igények felmérése önmagában egy nagyon mély témakör. Ezt a videót viszont gyakorlatiasnak és nem elméletinek szánom, így egyszerűsítéssel fogok élni. Elkészítettem egy listát, mely bár messze nem teljeskörű, mégis segít megvizsgálni a részletesebb igényeket azon esetekben, amikor úgymond egyszerű weboldalról beszélünk.
Kategória 1: Nincs rá szükség, és nem is leszAlapvetően egy weboldal nem más, mint egy egyszerű szövegfájl, amit a webböngésző jelenít meg. Ebben a szövegfájlban elhelyezhetünk speciális utasításokat, mellyel a böngésző tudtára adjuk, hogy milyen formában, kinézettel jelenítse meg a szövegeinket. Illetve, ezeket a speciális utasításokat alkalmazva be tudunk ágyazni a dokumentumunkba képeket, hangokat, videókat, és egyéb elemeket. A weboldalainkat -azaz, a különböző szövegfájljainkat- pedig linkek segítségével összekapcsolhatjuk. Sőt, lehetőségünk van böngészőben futó alkalmazások, programok készítésére is, de ez messze túlmutat a jelen videó céljain.
Ezeket a szöveges fájlokat létrehozhatjuk akár a legegyszerűbb szövegszerkesztő programmal is, amely jellemzően az operációs rendszerünk ingyenes része. Léteznek ezen kívül kifejezetten erre a feladatra szánt szerkesztők is. Továbbá, automatizált eszközök is használhatóak, mint például tartalomkezelő rendszerek vagy kód generátorok.
Hogy mások megtekinthessék az általunk készített weboldalakat az internet segítségével, ahhoz elérhetővé kell tennünk őket számukra. Ez történhet például úgy, hogy az általunk készített oldalakat eljuttatjuk (úgymond “feltöltjük”) egy szolgáltatóhoz, aki ezen fájlok megosztásával, elérhetőségével foglalkozik a nap 24 órájában. Erről a későbbiekben lesz szó részletesen.
Most pedig elkészítem az első oldalát a honlapnak. Ennek az elkészítése tovább fog tartani mint a többié, ugyanis ezt az oldalt majd mintaként is fogom tudni használni. Úgy tervezem, hogy minden egyes videó egy önálló oldalt fog kapni. A videó az oldal tetején lesz, alatta pedig a videó tartalma szöveges formában.
Első lépésként létrehozok egy mappát, melyben a weboldal fájljait fogom tárolni. Ezt “web”-nek nevezem. Ajánlatos, hogy csak az angol ABC betűit használjuk a fájlok és könyvtárak elnevezésénél, illetve ne használjunk szóközöket, s lehetőleg mindent kisbetűvel írjunk. A “web” mappán belül létrehozok egy “milton-friedman” könyvtárat, és egy “szechenyi-istvan” könyvtárat. Ezeken a könyvtárakon belül, minden egyes videó egy külön könyvtárat kap. A könyvtáraknak beszédes nevet adok, ez ugyanis több szempontból fontos. Egyrészt segíthet megérteni a keresőrobotnak a tartalmat, másrészt szerepelni fog a böngésző címsorában is, s így a látogatót is segítheti a tájékozódásban.
Most hogy elkészült a könyvtárstruktúra, a következő lépés az, hogy minden egyes mappába belehelyezem a releváns videó fájlt és borítóhoz használatos képfájlokat. De mielőtt ezt megtenném, foglalkoznom kell a kép és videófájlok tömörítésével. Ez egyrészt azért fontos, mert szeretném, hogy a látogató számára gyorsan betöltsön a weboldal és anyagai. Másrészt pedig azért fontos, mert a webtárhely szolgáltatók árazása jellemzően a felhasznált tárhely mennyiségén alapszik, azaz számomra költséggel jár.
A videófájlok mérete lényegesen nagyobb szokott lenni a képfájlokénál. Ezen weboldal esetében pedig több mint 70 videóról van szó, mely több száz gigabyte tárhelyet is elhasználhat feleslegesen, ha nem foglalatoskodunk a tömörítéssel.
A videók tömörítése egy mély témakör, melyet itt most leegyszerűsítek. Alapvetően a videók tömörítése veszteséges eljárás, ahol megpróbálunk egy számunkra elfogadható egyensúlyt találni négy dolog között: a fájl mérete, a videó minősége, a tömörítés gyorsasága, és a különböző eszközökkel való kompatibilitás.
Mivel a célom a magas kompatibilitás, ezért h264-es algoritmust fogom a tömörítéshez használni és .mp4 fájlformátumba fogom a videót csomagolni. Az mp4 formátumon engedélyezem a webes optimizálás lehetőségét is. Ez a ma általánosan használt webböngészők közel 100%-ban működni fog. A videók megőrzik az eredeti Full HD felbontásukat, ugyanakkor felhasználható adatmennyiséget 5 Mbit / másodperc értékre korlátozom. Így körülbelül 1 percnyi videó 40 Megabyte tárhelyet fog felhasználni. A tömörítés gyorsaságára “közepes”-t állítok.
A program amit használok teljesen ingyenes, ”Handbrake”-nek hívják és elérhető számos operációs rendszerre is. Miután végeztem a videók tömörítésével, elhelyezem őket a megfelelő mappákban. A videófájlokat ugyanúgy nevezem el, mint a mappájukat. Egyes videókhoz készítettem korábban feliratot is. Ezeket a feliratfájlokat is elhelyezem a mappákban. Fontos, hogy a feliratok VTT formátumban legyenek, különben a böngésző nem tudja őket majd megjeleníteni. A feliratfájloknak egyszerű “hu.vtt” nevet adtam, utalva a felirat nyelvére. Hogy az anyagok ne csak videó formátumban legyenek fogyaszthatóak, így elhelyezem a videó hanganyagát “mp3” formátumú hangfájlként minden egyes mappába. A hangfájl neve azonos lesz a videó fájllal.
A videókhoz tartoznak borítóképek is, melyeket szintén elhelyezek hozzá tartozó mappába. A képek neve azonos lesz a videófájlokéval. Ugyanakkor beszélnünk kell a képek tömörítéséről is, ugyanis ez jelentősen befolyásolhatja a weboldal sebességét. A problémakör hasonló a videók tömörítéséhez, azaz egy kompromisszumot kell találnunk a minőség, fájlméret, és kompatibilitás között. Szerencsére, a tömörítés sebességével itt nem szükséges foglalkoznunk, mert nem jelentős a mai számítási kapacitások mellett.
A célom, hogy a 2024-es magyarországi mobilinternet sebességet figyelembe véve egy gyorsan betöltő weboldalam legyen, mely számos eszközön jól jelenik meg. Ezért a képfájlok méretét 100 KByte alatt fogom tartani és JPG formátumot fogok használni. A képek felbontását úgymond Full HD-ban maximalizálom, ami 1920 pixel széles és 1080 pixel magas.
Bár ebben a videóban nem térnék ki rá, említés szintjén érdemes megjegyezni, hogy ennél megközelítésnél léteznek jobb megoldások, de elvégzésük több időráfordítást igényel. Például, lehetőségünk van a képeket többféle kódolási eljárással és méretben elhelyezni, majd utasítani a webböngészőt, hogy válassza a legmegfelelőbbet az adott eszközre.
A képek tömörítésére számos és ingyenes program létezik. Az egyik ilyen, a böngészőből elérhető Squoosh is. Az én esetemben a lépések a következők Squoosh használatával. Először behúzom a tömöríteni kívánt képet. Ez után kiválasztom a tömörítési algoritmust, ami “MozJPG” lesz. A “quality”, azaz minőség csúszkát úgy mozgatom, hogy a kép mérete 100 KByte alá kerüljön éppen. Közben lehetőségem nyílik arra, hogy lássam a különbséget a minőségben tömörítés előtt és után. Végül a letöltés gombbal letöltöm a tömörített képet, amit bemásolok a megfelelő mappába és felülírom a tömörítetlen változatot, ha szükséges.
Most pedig el fogom készíteni az első oldalt. Ez az “Egy angol levelei a magyaroknak” című videóm alapján fog készülni. Tartalmazni fogja a videót, a hanganyagot, a videó címét és a felolvasott szöveget.
Első lépésként megnyitom az ehhez a videóhoz tartozó mappát. Ide fogok majd egy új szöveges fájlt létrehozni. Ez úgymond webfájl lesz, amit leggyakrabban HTML fájlnak hívnak. Fontos, hogy ezt a fájlt “index.html” fájlnévvel mentsük majd el, melyben értelemszerűen a “html” a fájl formátuma, kiterjesztése.
Nyissunk meg egy olyan egyszerű szövegszerkesztő programot, mint Windowson a jegyzettömb. Első lépésként csupán bemásolom a videó címét és a felolvasott szöveget. Ez után elmentem a dokumentumot. Ha megkérdezi a szerkesztő, hogy milyen kódolással mentük a szövegfájlt, akkor válasszuk az UTF-8 kódolást.
Az elmentett dokumentumra kattintva meg tudom azt nyitni egy webböngészőben. Ugyanakkor észre kell hogy vegyük, hogy a szöveg hibásan jelenik meg: furcsa karakterek és elveszett tagolások. Ez azért van, mert semmit eddig nem tettünk annak érdekében, hogy megfeleljen a HTML fájlunk a szabványoknak.
A következő lépésekben módosítani fogjuk a szövegszerkesztővel a fájlunkat. Azt bármikor menthetjük, majd a böngészőt frissítve láthatjuk az eredményt is. Ahhoz, hogy megfeleljen a dokumentumunk szabványoknak, el kell helyeznünk a megfelelő HTML parancsokat a szövegben, Ezeket a parancsokat HTML “Tag”-nek vagy “Tag”-eknek hívják. Ezeket a “Tag”-eket érdemes megtanulni, de az internetes keresőkben is könnyen megtalálhatóak.
Az első tag a <!DOCTYPE html>, amely elmondja a böngészőnek, hogy ez egy HTML fájl.
A második tag a <html lang="hu">, amely közli a dokumentumban használt nyelvet.
A <head> tag a dokumentum fejlécét jelöli. Ide jellemzően olyan dolgok kerülnek, amelyek az oldalunkat közvetve befolyásolják, és nem fő tartalmi elemek. A </head> tag jelöli a fejléc tartalmának végét. Látni fogjuk, hogy a legtöbb HTML tagnak van egy nyitó eleme és egy záró eleme. A <body> tag jelöli a dokumentum törzsét. A lényeges és látható elemek ide szoktak kerülni. A dokumentumunk végén el kell helyeznünk a </body> és </html> tageket is. Amit még a böngésző tudtára kell adni, hogy milyen kódolással készült a szöveg. Ezt a <meta charset="UTF-8"> taggel tesszük.
Ha elmentjük a dokumentumot és frissítjük a böngészőt, akkor látható, hogy a karakterek már helyesen jelenek meg, ámde a szöveg még tagolatlan. Ezt most orvosoljuk. A <h1> taggel körbeöleljük a címet. Létezik még <h2>, <h3>, stb. Tag is, melyekkel alcímeket és fejezeteket hozhatunk létre, ezeket hamarosan használjuk is. Bekezdéseket, avagy paragrafusokat a <p> tagek segítségével hozhatunk létre. Ezt a szövegrészt három paragrafusra bontom. Lehetőség volna a <br> tag segítségével új sorokat is hozzáadni, de erre épp nincs szükség. A dokumentumot elmentve és a böngészőt frissítve látható, hogy az oldalunk máris tagoltabb.
Most pedig illesszük be a videót a <video> tag segítségével. Ezen tagen belül használjuk a <source> taget arra, hogy meghatározzuk a beillesztendő videófájl nevét és típusát. Ezzel a példával láthatjuk, hogy a tageknek adhatunk paramétereket is. A <video> taghez hozzáadom a “controls” paramétert, s így mutatni fogja a felhasználónak a videó lejátszásához, megállításához és egyebekhez szükséges gombokat. A preload="none" paraméter arra való, hogy ne kezdje el automatikusan betölteni a videót, ezáltal is gyorsítva az oldal betöltését. Végül a “poster” paraméterrel pedig a videó borítóképét határozzuk meg. Ha frissítem a böngészőt, láthatjuk, hogy a videó beillesztésre került, ámde kilóg a képből. Ezért a width="100%" paraméterrel meghatározom, hogy a videó megjelenítése a böngésző szélességéhez igazodjon.
Most pedig beillesztem a hanganyagot, avagy a hangoskönyvet csak audio formában. Ehhez az <audio> taget használom. A “controls” paraméter segítségével engedélyezem, hogy a lejátszást segítő gombok megjelenjenek. Az “src” paraméterben pedig meghatározom a fájl nevét. Elmentve a fájlunkat és frissítve a böngészőt láthatjuk, hogy megjelent egy hanglejátszó is.
A következő lépésben egy kicsit javítani fogom a tagoltságát az oldalnak azzal, hogy annak szekcióit megnevezem. Ezt a <h2> tagek segítségével teszem. Létrehozok egyet a videónál, a hanganyagnál, és a leírásnál. Ismét elmentve a változtatásokat és frissítve a böngészőt látható az eredmény.
Hogy segítsem az oldal megértését és a tájékozódást, hozzáadok pár linket is az oldalhoz. Persze, most még olyan oldalakra fogok linkelni, amelyeket nem készítettem el, így ezekre kattintva hibával találkoznék. Ez nem gond, ettől még a linkeket létrehozhatom most is. Az első link a weboldal főoldalára mutat majd, míg a második link arra az oldalra, mely az összes hasonló Széchényi hangoskönyves munkáimat listázza majd ki. Linkeket az <a> tag segítségével tudunk létrehozni. Az <a> tag “href” paraméterében kell meghatároznunk, hogy mire is kívánunk hivatkozni. Itt megadhatnék akármilyen webcímet, amit be szoktunk írni a böngészők címsorába. Ezt “abszolút módon” történő hivatkozásnak hívják. Én azonban egy rövidebb formában kívánok hivatkozni a “relatív módon” történő hivatkozás segítségével. A relatív hivatkozás lényege, hogy azt mondjuk el a böngészőnek, hogy a jelenlegi oldal helyéhez képest hol keresse a linkelt tartalmat. A “../” azt jelenti, hogy egy könyvtárral feljebb keresse, ami ezen oldal esetében azt eredményezi, hogy a többi Széchenyi hangoskönyv anyagot tartalmazó mappára mutat. A “../../” pedig két mappával mutat feljebb, ami pedig majd a főoldala lesz a honlapnak. Ha most a linkekre kattintok, akkor a böngésző könyvtárakat és mappákat fog kilistázni, hasonlóan egy fájlkezelő alkalmazáshoz. Azonban, amikor majd elkészítjük a többi weblapot és feltöltünk mindent a tárhelyszolgáltatóhoz, akkor helyesen megjeleníti majd a linkelt oldalakat.
Most pedig foglalkozzunk az oldal kinézetével. Bár az oldal így is használható, és a videó elején az igények megfogalmazásánál az egyedi kinézet nem került a célok közé, mégis kis energiával számomra kellemesebb érzést keltő küllemet szeretnék adni az oldalnak. Ugyanakkor ezzel el is érkezünk a videó leginkább technikai avagy bonyolultabb részéhez a videónak. Itt parancsok egy listáját kell beletennünk a dokumentumba, amik segítségével a kívánt kinézetet elérhetjük. A parancsok egy része könnyen érthető és meg is jegyezhető lesz. Ugyanakkor néhány parancs működésének elmagyarázása igen hosszúra nyújtaná a videót, és inkább mellőzni fogom.
Ezeket a kinézetet meghatározó parancsokat a szakma CSS-ként hivatkozik. Első lépésként a dokumentumunk <head> tagjei közé hozzáadjuk a <style> taget. Ezen a tagen belül fogunk létrehozni CSS utasításokat. Minden egyes lényeges utasítás után mentek és frissítem a böngészőt, így látható lesz a változás. Egy CSS parancs jellemzően úgy néz ki, hogy az első részében elmondjuk, hogy a dokumentum mely elemét kívánjuk formázni, majd pedig kilistázzuk a formázási tételeket.
A html{ font-size: 16px; } segítségével beállítjuk, hogy az egész dokumentumban alapértelmezetten 16 pixel méretű legyen a betű. Mivel sok böngészőnél ez az alap érték, így nem feltétlen fogunk változást látni frissítéskor.
A h1{font-size: 1.6em;} segítségével beállítjuk, hogy a <h1> HTML tag betűmérete 1,6-szorosa legyen az alap betűméretnek. A mi esetünkben a <h1> tagben az oldal címe szerepel, így ott látjuk is a változást.
A h2{font-size: 1.3em;} segítségével az alcímeink betűméretét állítjuk be.
Lehetőségünk van ugyanazt a formázást egyszerre több elemre is alkalmazni. Ezt tesszük a h1, h2{color: #003366; line-height: 1.2;} használatával. Ezzel beállítjuk az oldal címének és alcímének színét egy sötétkékes árnyalatra, illetve a sorok közötti távolságot is 1,2-szeresre növeljük. A betűszín megadását többféle módon tehetjük, itt egy színkódot használtam. Használhattam volna angol szavakat is, mint pl. Red, Blue, Green stb. A színkód használatával azonban precízebben kiválasztható a szimpatikus árnyalat.
Az a{color: #0066cc; text-decoration: none;} segítségével beállítom az oldalon található link színét a kék egy világos árnyalatára, illetve eltüntetem az aláhúzást.
A p{text-align: justify;} segítségével beállítom, hogy a bekezdések sorkizárt igazítást kapjanak az alapvető balra igazítás helyett.
A video, audio{ width: 100%; display: block; margin-bottom: 20px;} segítségével beállítom, hogy a videó és a hanglejátszó is teljes szélességét használja a képernyőnek. Továbbá ez meghatározza, hogy alattuk egy 20 pixel magasságú térköz is keletkezzen. A display: block elemnek több hatása is van, de itt a legfontosabb, hogy biztosítja, hogy ezen elemek új sorba kerülnek.
A legtöbb formázási parancsot pedig a teljes dokumentumra fogjuk célozni:
body{
max-width: 800px;
margin: auto;
padding: 20px;
font-family: serif;
line-height: 1.6;
color: #333;
background: #f9f9f9;
font-size: 1.15em;
}
Először beállítjuk az oldal maximális szélességét 800 pixelre a max-width: 800px; használatával. A margók szélességét automatikusra állítjuk a margin: auto; segítségével. Ez azt fogja eredményezni, hogy az oldalunk középre igazodik.
A padding: 20px; egy 20 pixeles távolságot fog előidézni a képernyő széleitől. Ezt számítógépen nem igazán fogjuk észlelni, de kis képernyőkön, mobilkészülékeken igen. A font-family: serif; segítségével megváltozatjuk a betűtípust. Itt megadhatunk betűtípus neveket, ugyanakkor fontos tudni, hogy különböző eszközök, operációs rendszerek betűtípus támogatása eltérő lehet.
A sorok közötti távolságot megnöveljük a line-height: 1.6; segítségével. A betűk színét sötét szürkére változtatjuk a color: #333; által. Itt érdemes megfigyelni, hogy létezik egy sorrendiség a formázási parancsokat illetően. Jellemzően a specifikus parancsok élveznek elsőbbséget a kevésbé specifikus parancsokkal szemben. Ebből kifolyólag bár a dokumentum betűtípusának a színét sötét szürkére változtatjuk, a fejlécek és a linkek színe továbbra is kék marad, mert őket specifikusabban meghatároztuk.
Az oldal hátterének színét világos szürkére állítjuk a background: #f9f9f9; segítségével. A betűméretet pedig megnöveljük a font-size: 1.15em; által.
Ezzel el is végeztem a számomra elégségesnek ítélt formázást. Ugyanakkor, van még egy speciális utasítás, amit alkalmazni kell és segíteni fog abban, hogy mobilbarát módon működjön az oldal. Ezt a <meta name="viewport" content="width=device-width, initial-scale=1.0"> beírásával érjük el, melyet a <style> tagen kívülre teszünk. Sajnos ennek a sornak az elmagyarázása kissé technikai lenne, és nem érzem ebbe a videóba illőnek.
Ugyanakkor jó hír, hogy elérkeztünk ahhoz a pillanathoz, hogy van egy használható oldalunk. Ennek mintájára létrehozhatom a többi videóhoz tartozó oldalt is. Azonban, mielőtt ezt megtenném, néhány használhatóságot javító, de szemmel elsőre nem könnyen észrevehető kiegészítést végzek.
Az oldalnak adok egy címet, egy rövid leírást, és megnevezem az internetcímet is, ahol elérhető lesz. Ennek haszna elsősorban az, hogy az internetes keresők találati listáján az oldal olyan címmel és leírással fog megjelenni, amit én megfelelőnek tartok. Bár nem garantált, hogy a kereső tiszteletben tartja majd az ajánlást, ha megfelelő címet és leírást adunk, akkor jó eséllyel így lesz. Nincs egyértelmű szabály arra vonatkozóan, hogy mi számít jó címnek és rövid leírásnak. Általánosan elmondható, hogy érdemes szerepeltetni a tartalomra jellemző kulcs szavakat vagy kifejezéseket. Illetve, érdemes a cím hosszát 60 karakterben a leírásét pedig 160 karakterben maximalizálni.
Ezeket az információkat a weboldal fejlécébe tesszük, ahova a formázási utasításokat is helyeztük. A <link rel="canonical" href="https://www.clpro.org/szechenyi-istvan/egy-angol-levelei-a-magyaroknak/"> segítségével megadjuk az oldal internetes elérhetőségét.
A <title> tagek közé tesszük az oldal címét:
<title>Széchenyi István: Egy angol levelei a magyaroknak</title>
Az oldal leírásának megadására pedig a <meta> tag “description” altípusát használjuk:
<meta name="description" content="Széchenyi bemutat két levelet, melyet egy korabeli angol írt egy magyar lányhoz, ámbár az egész országnak is címezhette volna bizonyos részeit.">
S most elérkezettnek látom az oldal állapotát arra a szintre, hogy hasonló módon készítsem el a többi tartalmi oldalt is. Ezt nem érdemes végig mutatnom ebben a videóban, mert elég repetitív.
Miként elkészült az összes tartalmi oldal, szeretnék létrehozni egy olyan oldalt is, amely kilistázza az összes elérhető tartalmat az adott kategóriában. Először elkészítem azt az oldalt, ami az összes Széchényi felolvasást listázza. Hasonlatosan képzelem el, mint ahogy a YouTube listázza ki a videókat egy lejátszási listán. Azaz, minden elemhez lesz egy előkép, egy cím, egy rövid leírás, és hangoskönyv hosszát is mutatja. A látogató monitor méretét is szeretném figyelembe venni. Így tableten vagy számítógépen szeretném ha két oszlopban listázná ki a tartalmakat, míg okostelefonon csak egy oszlopban. Végül, az oldal tetejére még teszek egy kis rövid összefoglaló szöveget is.
Ami a listázó oldal kinézetét illeti, szeretném ha úgy nézne ki mint az előbb elkészített tartalmi oldalak is, azaz konzisztens maradjon. Megtehetném, hogy lemásolom az egyik előbb elkészített tartalmi oldalt és azt szerkesztem át. De a könnyebb érthetőség kedvéért inkább ismét egy üres szöveges fájllal fogok kezdeni.
Először létrehozok egy új szöveges fájlt a “szechenyi-istvan” mappában. Ennek a fájlnak is “index.html” lesz a neve. Pontosan ahogy a tartalmi oldal esetében is tettem, itt is először a vázát hozzuk a weboldalnak. Definiáljuk a dokumentum típusát, a nyelvét, a karakterek kódolásának módját, beálítjuk a kezdeti nagyítási méretet, megadjuk a webes elérhetőséget, az oldal címét, az oldal leírását, létrehozzuk az oldal törzsét (melyet most még üresen hagyunk).
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="canonical"
href="https://www.clpro.org/szechenyi-istvan/">
<title>Gróf Széchenyi István
hangoskönyvek, videókkal</title>
<meta name="description"
content="Gróf Széchenyi István
legismertebb írásaiból
(Hitel, Világ stb.) felolvasások
hangoskönyv és videó
formátumban. Gondolatokba szedve.">
</head>
<body>
</body>
</html>
</code>
A következő lépésben az oldalon már szemmel látható elemeket is hozzáadok. Ez az oldal címe, leírása, és egy link a főoldalra. Itt annyi újdonság történik, hogy használom a <br> parancsot, ami nem tesz más, mint új sorba teszi az utána lévő szöveget. A módosítás után el is mentem a fájlt és megnézem az eredményt a böngészőben. Természetesen még nem alkalmaztunk formázást, de hamarosan erre is sor kerül.
<h1>Gróf Széchenyi István
hangoskönyvek, videókkal</h1>
<p>
Gróf Széchenyi István legismertebb
írásaiból (Hitel, Világ stb.)
felolvasások hangoskönyv
és videó formátumban.
A felhasznált könyvek
1904-es kiadásúak.
Nem a teljes művek kerülnek
felolvasásra, hanem azokból kiemelt,
önállóan értelmezhető
gondolatok (több mint 40 darab).<br>
Írásai számos területet érintenek
(kulturális, társadalmi,
filozófiai, gazdasági, oktatási területek),
és a benne megfogalmazott kihívások,
valamint a lehetséges megoldások jelentős
része mai napig aktualitással bír.
</p>
<a href="../">Főoldal</a>
-> Széchenyi István hangoskönyv
Most pedig elkezdem kilistázni a hangoskönyveket. Csak kettő elkészítését fogom bemutatni, a többit ugyanúgy kell majd hozzáadni. Először kiírom a címét a hangoskönyvnek, a rövid leírását, majd a hosszát. A hosszát dőlt betűvel szeretném megjeleníteni, ezért köré az <i> HTML taget teszem.
<h2>Asszonyokról, férfiaknak</h2>
Ha kívánjuk hölgyeink megmagyarosodását,
tegyük azt, ami magyar,
elfogadhatóvá, tetszetővé is.
Eszközöljük azt felsőbbségünk által.
<i>(3 perc, 2 másodperc)</i>
<h2>Az elme fő tehetségei </h2>
Elmének fő tehetségi a képzelet,
emlékezet s ítélet. Ezen három
tehetség egyenlő
vagy inkább egymáshoz illő
arányozata alkotja
a tökéletes egészséges agyvelőt. <i>
(2 perc, 25 másodperc)</i>
A következő lépésben beillesztjük az adott hangoskönyvhöz tartozó előképet. Ehhez az <img> parancsot fogjuk használni, melyen belül meg kell adnunk a képfájl nevét és helyét. Ezek ugyanazok a képek lesznek, amelyek a videók borítóképei is. Tehát megtaláljuk őket az adott videó mappájában. A hivatkozás részeként megadom a mappa nevét és a visszeper jel után a fájl nevét is. A width és height paraméters segítségével beállíthatjuk, hogy milyen szélesen és magasan mutassa a képeket. A szélességet 330 pixelre állítom, ez ugyanis a legtöbb okostelefon képernyőjén ki fog férni. A magasságot azért állítom 186 pixelre, mert ez megfelel az eredeti kép méretarányainak arányainak. Ha nem adnék meg szélességet és magasságot, a kép akkor is megjelenne, de abban a méretben ahogy azt elmentettük, ami jelen esetben túl nagy volna számomra. Végül pedig hozzáadom az alt paramétert a képhez. Az alt paraméter egy alternatív szöveget tartalmaz, melyet a böngésző akkor jelenít meg, ha a kép valamiért nem volna elérhető éppen. Továbbá az alt paraméter leírása hasznos lehet vakok és gyengénlátók számára, illetve a keresőrobotoknak is. Az alt tag leírása alapvetően nem jelenik meg, illetve ez egy opcionális paraméter.
<img
src="az-elme-fo-tehetsegei/az-elme-fo-tehetsegei.jpg"
width="330" height="186"
alt="Az elme fő tehetségei - hangoskönyv"/>
A következő lépésben pedig beállítom, hogy a kép és a cím linkként működjenek az adott hangoskönyv oldalára. A target=”_blank” paramétert használva pedig beállítom, hogy amikor a linkre kattint a felhasználó, akkor az egy új böngésző fülön nyíljon meg. Persze, az oldalak linkelése most még nem fog jól működni, ehhez ugyanis fel kell majd töltenünk az elkészült honlapot egy tárhelyszolgáltatóhoz. Van lehetőség arra, hogy a linkeket működésre bírjuk anélkül, hogy feltöltenénk egy tárhelyszolgáltatóhoz a weboldalt, de erre most nem lesz szükségünk.
Most eljött az idő, hogy megformázzuk az oldalt. Első lépésként körbefogjuk a két listaelemet egy-egy speciális HTML paranccsal, mely arra szolgál, hogy hozzájuk tudjuk címezni a formázási listát. Mind a kettő listalem elé teszek egy <div class="videoelem"> parancsot és a </div> -vel zárom. Itt a class paraméter az elnevezésre szolgál és bármilyen nevet adhattam volna ennek a résznek, de azt választottam, hogy “videoelem”. Hamarosan elmagyarázzuk a böngészőnek, hogy hogyan is formázza meg ezt a részt. A <div> parancs alapesetben egy új sorba is mozgatja a közrefogott tartalmat, amit láthatunk amikor a böngésző frissül.
Az oldal fejlécében létrehozzuk a formázást tartalmazó <style> részt. Mivel azt szeretném, hogy ez az oldal nagyon hasonló legyen a tartalmi oldalhoz, ezért átmásolom ezeket a formázásokat egy már meglévő tartalmi oldal részéből. A változásokat láthatom is ahogy elmentem és frissítem az oldalt. Látható, hogy a kinézet megegyező a korábbi tartalmi oldallal.
Most pedig megformázom a kilistázott hangoskönyveket. Először teszek egy sötétszürke keretet köréjük a box-shadow paranccsal. A paraméterei kacifántosak, de lényegében azt írják le hogy milyen méretű, színű, és esésű legyen a keret. A width paraméterrel egy maximális szélességet határozunk meg. A margin parancs segítségével megnövelem a távolságot a két hangoskönyv között. A padding parancs segítségével pedig a fekete kerettől egy kicsi beljebb húzom a tartalmat.
.videoelem {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
width: 330px;
margin: 10px;
padding: 10px;
}
Így már szépen elkülönülnek egymástól a hangoskönyv listaelemek. Ugyanakkor minden egy oszlopban, egymás alatt helyezkedik el. Ez okostelefonon megfelelően néz ki. Azonban szeretném, hogyha van elég hely, akkor két oszlopba kerüljenek a listázások. Ehhez el kell magyaráznom a böngészőnek, hogy az oldal melyik részét kezelje rugalmasan, oszloposan.
Elsőként körbeveszem a hangoskönyv lista elemeit egy új <div> taggel, melynek a “videolista” nevet fogom adni. Majd a <style> részen belül elmagyarázom a böngészőnek, hogy hogyan is jelenítse meg ezt a részt. A “display: flex” és a “flex-wrap: wrap” parancsok azt érik el, hogy rugalmasan tölti ki a helyet a listázandó hangoskönyvekkel horizontálisan. Ha összébb húznám a böngészőt és egy csak egy oszlopra volna hely, akkor mindent áttenne egy oszlopba. Végül a “justify-content: center;” parancs segítségével az elemeket középre igazítom.
.videolista {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
Ez után nincs mást tennem, mint hozzáadnom a többi hangoskönyvet is egyesével. Itt elég csak a végeredményt megmutatnom, mert a folyamat ugyanaz mint az előzőekben látott.
Most pedig a legutolsó oldal készítését végzem el, ami nem más mint a főoldal. Ez lesz egyben a legkönnyebb is, ugyanis a korábbi listázási oldalnál felhasznált formázási kódokat változtatás nélkül fel tudom majd használni.
A főoldalt egyszerűen képzelem el. Az oldal tetején egy logo, alatta az oldal neve, linkek a szociális média oldalakra, és végül link a két listázási oldalra. A linkek a listázási oldalra pont olyan előkép, cím, rövid leírás stílusban lesznek, ahogy a listázási oldalnál is volt.
A főoldal “index.html” fájlja abba a mappába fog kerülni, ahol a Széchényi és Milton mappák is találhatóak. Ugyanide elhelyeztem még három képfájlt. Az egyik a CLPro logo, a másik kettő pedig előképfájlok a két tartalomkategóriának.
Első lépésként átmásolom az oldal vázának egy részét az egyik listázási oldalról. Megadom az oldal internetes elérhetőségét, a címét, és egy rövid leírást is. Ezek után átmásolom a formázási részeket a meglévő listázási oldalról.
Ahogy a listázási oldalnál is tettem, beillesztek ide két videólista elemet, melyek pont ugyanúgy fognak kinézni. A munkámat jelentősen megkönnyíti, hogy újra fel tudom használni a korábban megírt kódokat.
Az utolsó tennivaló a logo kép beszúrása, melyet pont ugyanúgy végzek, ahogy az előképek is beszúrásra kerültek. Utána az oldal címét is megadom. Végül pedig a szociális médiákat is belinkelem, méghozzá úgy, hogy új böngészőfülön nyíljanak meg.
Hogy tetszetősebb legyen, szeretném középre igazítani a logót, címet, és szociális linkeket. Ehhez körbeveszem őket egy <div> taggel, amihez hozzáadok egy style paramétert. A “text-align: center;” értéke a paraméternek középre fogja igazítani a tartalmat.
<div style="text-align: center;">
<img src="clpro-logo-150x150.png"
width="80" height="80" alt="CLPro logo">
<h1>CLPro</h1>
<a href="https://www.tiktok.com/@_clpro_"
target="_blank">TikTok</a> /
<a href="http://youtube.com/@CL_Pro"
target="_blank">YouTube</a>
Most, hogy elkészült a weboldal, elérhetővé kell tennünk mások számára. Ezt a köznyelv szokta úgy mondani, hogy feltölteni a szerverre vagy felhőbe vagy tárhelyre. Lényegében szükség van egy olyan számítógépre, amely a nap 24 órájában üzemel és az internetes címét minden más számítógép tudja. Ennek az igénynek a kielégítésével foglalkoznak a különböző webtárhelyszolgáltató vagy felhőszolgáltató cégek. Technikailag lehetséges lenne, hogy bármely látogató közvetlenül a mi számítógépünkről érje el a weboldalt amit készítettünk. Azonban, ez sok szempontból nem praktikus a legtöbb ember számára.
Tárhely szolgáltatókból és az általuk kínált szolgáltatásokból is sokféle van. A tárhelyszolgáltatásokra érdemes inkább egy külön egész videót szentelni, így ezzel most nem foglalkozom. Internetes keresőkben könnyen találunk számos ajánlatot, mely már évi pár ezer forintért kínál domain nevet és tárhelyet. Az általam most készített oldal igazán minimális igényekkel rendelkezik, így a legtöbb szolgáltató alkalmas lehet.
A weboldal feltöltése történhet többféleképpen, melyből most csak egyet mutatok meg. Ebben az esetben a tárhelyszolgáltató biztosít egy felhasználói felületet a weboldalukon számomra, ahol feltölthetem a fájlokat.
Első lépésben egy zip fájlba tömörítem a weboldal tartalmát. Ezt a zip fájlt töltöm fel a szerverre és a ott kicsomagolom. A kicsomagolás után törölhetem az eredetileg feltöltött zip fájlt, mert már nem lesz rá szükség.
A feltöltés végeztével tesztelhetjük, hogy működik-e a weboldal. A tesztelés témaköre elég mély, és szintén külön videót érdemel. Így most csak pár ellenőrzést fogok végrehajtani.
A legtermészetesebb nem más, minthogy beírom a webcímet és megtekintem, hogy az oldal megfelelően megjelenik-e. Ezt érdemes megtenni különböző típusú eszközökről is. A weboldalon megnyitok párat a linkek közül. Megfigyelem, hogy az oldal tartalma betölt-e, nem hiányzik-e valami, helyesen jelenik-e meg, a hangoskönyv és videó lejátszható-e, illetve, hogy milyen az oldal sebessége. Érdemes lehet valamely gyors és ingyenes tesztelő szoftvert is igénybe venni. Bár nem kívánom egyiket vagy másikat kiemelni, egyet mégiscsak használni fogok bemutatásul. Ez a Google Pagespeed Insight lesz, mely lényegében egy weboldal ahol csak meg kell adnunk a webcímet amit tesztelni szeretnénk. Ez a szoftver elemzi az oldalt sebesség, használhatóság, keresőoptimalizáltság, és egyéb szempontok alapján. Ajánlásokat is tesz a hiányosságok javítására. Semmiképpen sem egy csoda program, de ordas hibákat jellemzően jól észre tud venni.
Mint a képen látható, alapvetően jó értékeket adott a tesztprogram az új weboldalnak. Ugyanakkor felhívta a figyelmet több lehetőségre is, amellyel javíthatunk az oldal sebességén és a láthatóságán is.
Ezzel végére is értem az egyszerű weboldal készítéséről szóló videónak. Ez elsősorban a videó vége, nem pedig a webfejlesztésé. Legtöbb esetben elmondható, hogy egy weboldal sosincs kész. Ebben az esetben pedig tisztában is vagyok nagyon sok hiátussal. Ugyanakkor célom ezzel a videóval egy használható, de semmiképp sem optimális weboldal elkészítésének bemutatása. Bízom benne, hogy így is sikerült a való életben is használható tudást átadnom. Az erre épülő, következő videóm pedig az optimizálással fog foglalkozni.