Esküvői weboldalkészítő

Tartalom

Fejezetek:

1. Videó
2. Előszó
3. Funkciók és használat
4. Letöltés és publikálás
5. Technikai működés és limitációk

Videó

Előszó

Ez az eszköz arra készült, hogy gyorsan és egyszerűen elkészítsetek egy szép, letisztult esküvői honlapot. Nem kell hozzá informatikai tudás. Olyan, mint egy szövegszerkesztő: bal oldalt szerkesztesz, jobb oldalt azonnal látod az előnézetet.

A fő tervezési elv a magánszféra. A beírt szövegek és a feltöltött képek a saját eszközötökön maradnak. A generátor nem küldi fel az adatokat sehova, és nem használ cookie-kat. Nincs reklám, nincs regisztráció, nincs fiók.

A kész weboldalt egyetlen fájlban tudjátok letölteni. Ez egy HTML fájl, ami tartalmaz mindent: a szövegeket, a képeket, a formázást, és a galériát is. Ezt a fájlt később bármikor meg tudjátok nyitni, és akár vissza is tudjátok tölteni a szerkesztőbe.

Tipp: a generátort érdemes számítógépen használni, mert ott kényelmesebb a kétpaneles szerkesztés és a képfeltöltés.

Funkciók és használat

Nyisd meg a generátort itt: https://www.clpro.org/eskuvo-honlap/. A képernyő két részre oszlik. Bal oldalt a beállítások és modulok, jobb oldalt az elkészült oldal élő előnézete.

Felső gombok

A bal oldali tetején három gombot találsz:

• Újat kezdek: mindent alaphelyzetbe állít.
• Megnyitok korábbit: betölt egy korábban letöltött HTML fájlt, és visszahozza a szerkeszthető állapotot.
• Letöltöm a weboldalt: letölti az elkészült honlapot egyetlen HTML fájlban.

Alap adatok

Itt adod meg az alapokat:

• Fő cím (a pár neve): ez kerül a weboldal tetejére, és ez lesz a böngésző fül címe is.
• Felső fejléc látszódjon: ha be van kapcsolva, a weboldal tetején megjelenik egy letisztult fejléc a fő címmel.
• Fő cím látszódjon a hero képen: ha be van kapcsolva, a fő cím rákerül a főkép fölé egy átlátszó kártyán.
• Hero kép (főkép): ez a weboldal nagy, nyitó képe.
• A főkép automatikus átméretezése: ha be van kapcsolva, a hero rész fix magasságú, és a kép kitölti a területet (vágással). Ha ki van kapcsolva, a kép teljes magasságában látszik (a hero rész magasabb lehet).

Példa: ha egy álló fotót töltesz fel, és szeretnéd, hogy a weboldal elején ne legyen túl magas a hero, akkor kapcsold be az automatikus átméretezést.

Stílus

A stílus részben állíthatod a weboldal kinézetét.

• Esküvő sablonok: előre beállított szín és betűtípus kombinációk. Egy kattintással adnak egy jó alapot.
• Betűtípusok: külön állítható a címsor betűtípusa és a szöveg betűtípusa. A listában szereplő betűk támogatják a magyar ékezeteket.
• Színek: több színt is állíthatsz. Mindegyiknél van színkiválasztó is.
  • Fő szín (kiemelések, linkek, címszín)
  • Oldal háttér
  • Szöveg szín
  • Kártya háttér (a tartalom blokkok háttere)
  • Fejléc háttér (a legfelső sáv színe)
  • Lábléc háttér
• Betűméretek: külön állítható a hero cím, a szekció címek és a törzsszöveg mérete.

Példa: ha sok a szöveg, érdemes a törzsszöveget 17 vagy 18 körül hagyni, mobilon is kényelmesen olvasható.

Tartalom modulok

A hero után modulokból építed fel a weboldal tartalmát. A modulok szabadon rendezhetők, és bármikor törölhetők.

• Szöveg modul: szabad szöveg, bekezdések, kiemelések. A szövegen belül tudsz félkövért, dőltet, színt és betűméretet használni, és linket is be tudsz szúrni.
• Kép modul: egyetlen képet tudsz beszúrni. Jó például egy jegyesfotóhoz vagy egy térkép képhez.
• Galéria modul: több képet tölthetsz fel. A képek kicsiben megjelennek, kattintásra kinagyíthatók, lapozhatók, és a kinagyított képnél van letöltés gomb is.

Minden modulnál van opcionális cím. Példák:

• Szöveg modul cím: „Rólunk”, „Program”, „Szállás”, „Fontos tudnivalók”.
• Kép modul cím: „Jegyesfotó”, „Helyszín”, „Dress code inspiráció”.
• Galéria modul cím: „Fotózás”, „Előkészületek”, „Emlékek”.

Kapcsolat

A kapcsolat szekció rugalmas. Annyi sort adsz hozzá, amennyit szeretnél.

• Szekció cím: például „Kapcsolat”, „Elérhetőség”, „Szervezés”.
• Kapcsolat sor: három mezőből áll:
  • Kapcsolat neve (például „András mobilja”, „Kata email”, „Tanú: Péter”)
  • Kapcsolat értéke (például telefonszám, email, webcím, szöveg)
  • Linkelve (ha be van kapcsolva, az érték kattintható link lesz)

Tipp: ha URL-t adsz meg értéknek, nyugodtan lehet hosszú, mobilon is szépen törik több sorra.

Letöltés és publikálás

Ha elkészültél, kattints a Letöltöm a weboldalt gombra. Letöltődik egy HTML fájl, ami a komplett honlap.

A fájlt azonnal meg tudod nyitni a böngészőben, így ellenőrizheted, hogy minden rendben van-e. Ha később módosítani szeretnéd, a generátorban a Megnyitok korábbit gombbal vissza tudod tölteni.

Ahhoz, hogy a vendégek is elérjék, fel kell töltened a fájlt egy tárhelyre. Mivel ez egyetlen statikus fájl, általában a legkisebb tárhelycsomag is bőven elég. Alternatívaként használhatjátok az ingyenes egyekleszunk.hu oldalt is.

A feltöltés általában annyi, hogy belépsz a tárhelyed kezelőfelületére, és felmásolod a letöltött HTML fájlt. Sok szolgáltatónál ehhez van fájlkezelő vagy FTP hozzáférés.

Technikai működés és limitációk

Ez a fejezet informatikában jártas olvasóknak szól. A használathoz nem szükséges ismerni, de hasznos lehet, ha szeretnéd érteni, mi történik a háttérben.

Teljesen kliensoldali működés

A generátor egy statikus weboldal, ami a böngészőben fut. Nincs szerver oldali mentés, nincs adatbázis, nincs fiók. A beírt szövegek és feltöltött képek a böngésző memóriájában vannak, és csak akkor kerülnek fájlba, amikor a felhasználó letölt.

Képfeldolgozás és beágyazás

A feltöltött képeket a generátor feldolgozza, majd base64 formában beágyazza a kész HTML fájlba. Ez azt jelenti, hogy a képek nem külön fájlként töltődnek be, hanem a HTML részei.

• A tartalom képek (Kép modul, Galéria) maximum 900x900 pixelre vannak arányosan átméretezve.
• A képek JPEG formátumban, 85 százalékos minőségen kerülnek beágyazásra.
• A hero képhez készül egy kisméretű, 300x300 pixeles verzió is, ami az og:image meta mezőben szerepel.

Az átméretezés technikailag a Canvas API segítségével történik (Image betöltés, canvas drawImage, majd toDataURL JPEG kimenet).

Élő előnézet

A jobb oldali preview nem a teljes oldal újratöltése a szerverről. A generátor a kész HTML-t egy Blob objektumba írja, kap hozzá egy ideiglenes blob: URL-t, és ezt tölti be egy iframe-be. Így gyors és offline jellegű a működés.

Visszatöltés szerkesztésre

A letöltött weboldal tartalmaz egy beágyazott JSON állapotot:

<script type="application/json" id="clwedding-data">...</script>

A Megnyitok korábbit funkció ezt olvassa ki, és ebből állítja vissza a szerkesztő állapotát (modulok, szövegek, képek, kapcsolatok, stílus). Ha ez a blokk hiányzik vagy manuálisan sérült, van egy best-effort betöltés is, ami a HTML struktúrából próbál adatot kinyerni, de ez nem garantált.

Galéria nagyítás és letöltés

A generált weboldalban a galéria lightbox funkciója a beágyazott képek listájával dolgozik. A felhasználó balra és jobbra lapozhat, illetve a letöltés gomb egy anchor (download attribútum) segítségével menti az aktuális képet.

Betűtípusok

A generált weboldal Google Fonts betűtípusokat használ a szép megjelenéshez. Ez azt jelenti, hogy a betűk betöltése a Google szervereiről történik. Maga a generátor ettől még nem használ cookie-kat, de a betűfájlok letöltéséhez szükség van internetkapcsolatra, és egy külső erőforrás is érintett.

Limitációk

• Fájlméret: a base64 beágyazás miatt sok kép esetén nagy lehet a letöltött HTML fájl. Ez lassíthatja a szerkesztőt és a megnyitást, főleg mobilon.
• Memória: nagyon nagy galéria esetén a böngésző memóriája lehet a szűk keresztmetszet.
• Képek minősége: a JPEG 85 százalék jó kompromisszum, de bizonyos képeknél (szöveges grafika, logó jelleg) a JPEG tömörítés látható lehet.
• Hosszú oldalak: sok modul és sok kép esetén a görgetés és a betöltés lassabb lehet régebbi eszközökön.

Összességében a megoldás erőssége a gyors, fiók nélküli, privát munkafolyamat, és az, hogy a végeredmény egyetlen, könnyen másolható statikus fájl.