Ez egy nagyon egyszerű weboldal. Annyira egyszerű, hogy részletesen be kell mutatnom azok számára, akik a Drupal, Joomla! és Wordpress világból jönnek, esetleg saját tartalomkezelő rendszer használnak, vagy csak nem látnak ki a PHP és a keretrendszerek erdejéből.
Ez egy statikus weboldal. Ez annyit jelent, hogy nincs mögötte logika, nincs programozás, csak egyszerű tartalomkiszolgálás. Ugyanakkor megfelel a látogatók és az üzemeltetők elvárásainak.
Ahhoz, hogy egy weboldal megfeleljen a mai követelményeknek, a következőket kell tudnia:
Ha hiszed, ha nem, ezek nem új technológiák. Nagyjából 25 éve létező megoldások. Nézzük sorban őket.
Ez a legfontosabb kritérium. Szkriptek millió pásztázzák folyamatosan a weboldalakat sebezhetőségek után kutatva. A tartalomkezelő rendszerekben mindig találnak biztonsági réseket, amelyeket folyamatosan javítanak. Ha valaki nem frissíti a rendszerét, rövid időn belül fel fogják törni a weboldalát.
A támadók azt használják ki, hogy az adatbeviteli lehetőségek (űrlapok és URL-ek) nincsenek megfelelően ellenőrizve, ezáltal utasításokat is lehet beküldeni a kiszolgálónak, ami végrehajtja a kártékony kódot.
Ez egy statikus weboldal. Nincsenek beviteli lehetőségek, nincsenek űrlapok, nincs adminisztrációs felület, azaz nincs mit megtámadni.
Hallottál már olyan weboldalról, ahol a készítője garanciát vállalt arra, hogy az általa írt részek miatt nem törik fel az oldalt? Mert ez a weboldal ilyen. Garantálom, hogy a statikus HTML tartalmat senki sem fogja feltörni.
Részletesen bemutathatnám a TCP-csomagok felépítését és a kérés-válasz módszert, de nem teszem. Ha érdekel, nézz utána. Ez a weboldal kevesebb helyet foglal mint a Facebookon a logó. Van egy CSS-fájl a fejrészben, egy PNG-fájl a láblécben, illetve maga a HTML-fájl. A CSS és a PNG 1-1 HTTP-kérés és TCP-csomag, a tartalom 1 HTTP-kérés és 5 TCP-csomag.
Vagyis közérthetően: szó szerint egy szempillantás alatt letöltődik és megjelenik. Nincs előfeldolgozás a kiszolgálón és nincs utólagos kiértékelés a kliensoldalon.
Erre nincs magyar szó. Azt jelenti, hogy a weboldal alkalmazkodik a megjelenítő felbontásához. Megtekinthető mobiltelefonon is és nagy felbontású megjelenítőn is.
Nehezen hihető, de még mindig vannak olyan weboldalak, amelyek nem reszponzívak. Ahhoz, hogy a weboldal reszponzív legyen, mindössze egyetlen sort kell elhelyezni az HTML-fájl fejrészében:
<meta name="viewport" content="width=device-width, initial-scale=1">
És még egy sor kell a CSS-fájlba:
body { max-width: 650px }
A keresőbarát weboldal azt jelenti, hogy a cikkeknek az ember és a keresőrobot által is olvasható URL-ei vannak. Akárcsak ennek a cikknek:
https://www.urbalazs.hu/blog/fejlesztes/hogyan-keszult
Ezt meg lehet csinálni bonyolult rewrite szabályokkal is. De miért, ha van egyszerűbb módszer is? Létrehoztam egy blog mappát, abban egy fejlesztes mappát, majd végül egy hogyan-keszult mappát, amibe betettem egy index.html fájlt. Talán 5 másodperc volt és működik.
Ez a cikk információközléshez készült. Nincsenek felesleges menüpontok, reklámok, színes-szagos elemek. Címsorok, bekezdések és néha képek vannak csak.
A sorok nem túl hosszúak, 60-80 karakter van egy sorban. A sorok közt másfeles sortávot hagytam, a betűszínek jók a szemnek.
Az oldal akadálymentesség szempontjából is megfelelő. Megnézheted CSS nélkül is, vagy akár felolvastathatod egy szövegfelolvasóval. A tartalom hozzáférhető bárki számára.
A meglévő oldalak szerkesztéséhez mindössze egy egyszerű szövegszerkesztőre van szükség. Ha a szövegszerkesztő ismeri a HTML szintaxis-kiemelést, akkor az csak hab a tortán.
Új cikk írásakor létrehozok egy mappát a cikk keresőbarát nevével, majd beleteszek egy index.html fájlt és a hozzá tartozó képeket. Ha kész a tartalom az index.html fájlban, akkor feltöltöm a kiszolgálóra.
A szerkesztéshez nem szükséges internet-kapcsolat, így számomra egyszerűbb az új cikkek írása, mintha egy tartalomkezelő online felületén kellene WYSIWYG-szerkesztővel küszködni.
Nem tudom, hogy a többi weboldal miért nem ilyen. Tele vannak felesleges elemekkel, amelyek a látogatókat általában nem is érdeklik. A fejlesztő nagyon sok időt fordít az oldal felépítésére, pedig néha a kevesebb több.
Csinálj te is hasonló weboldalakat mint ez. Győzd meg a megrendelőt az előnyökről. Mutasd meg neki ezt a weboldalt, ha nem hiszi el, amit mondasz. Neked nem kell feleslegesen programoznod, a megrendelő pedig olyan weboldalt kap, amit nem törnek fel.
A weboldal egyszerűségét a Motherfucking Website, a Better Motherfucking Website és a The Best Motherfucking Website ihlette.
A Motherfucking Website magyar fordítása Kibaszott weboldal néven nálam is elérhető.