Manapság már rengeteg eszköz áll rendelkezésére azoknak, akik – akár hobbi, akár üzleti céllal – weboldalak készítésére adnék a fejüket. Ott a WordPress és a hozzá hasonló CMS rendszerek, vagy nekieshetünk a HTML/PHP/Javascript kódok írásának manuálisan egy jobb kódszerkesztővel, esetleg segítségül hívhatunk Bootstrap modulokat, hogy kicsit gyorsabban haladjunk a munkával. De még többet gyorsíthatunk és egyszerűsíthetünk a weboldalak összerakásán, ha segítségül hívunk egy sokoldalú webszerkesztő alkalmazást. Mai tesztalanyunk ez utóbbi kategóriába tartozik: a Sparkle Pro 4.0 jelenleg – szerintünk – a legjobb maces webszerkesztő program, s mindjárt el is mondjuk, mire alapozzuk ezt az állítást.
Sparkle Pro 4.0: a legjobb maces webszerkesztő program
Bár egy weboldal elkészítése megoldható pusztán egy sima kódszerkesztőben is, azért jóval gyorsabb megoldás, ha segítségül hívunk valamilyen webszerkesztő programot. Ezekkel különösebb kódolás nélkül dolgozhatunk, nagyjából úgy, mintha egy szöveg- vagy kiadványszerkesztőben terveznénk meg egy több oldalas dokumentumot, magazint.
A Sparkle Pro 4.0, ellentétben a mostanság divatos Bootstrap alapú weboldal építőkkel (Blocs, Mobirise stb.), nem zár minket korlátok közé azzal, hogy csak előre definiált modulokból építhessük fel oldalainkat. Ebben a programban tökéletesen kihasználhatjuk a kreativitásunkat: minden elemet úgy helyezünk el, ahogy nekünk tetszik, de ha épp a blokkosítás hívei vagyunk, immár az sem jelent gondot neki. Használhatunk szinte bármilyen típusú objektumot, ami a weben megszokott: szövegdobozok, térképek, videók, képek, képgalériák, hanglejátszó stb. Értelemszerűen felépíthetünk menüket, űrlapokat, integrálhatunk szocmédiás elemeket (Twitter, Facebook, Instagram), vagy adott esetben akár tetszőleges HTML kódot is beépíthetünk az Embed objektum segítségével. Megjeleníthetünk popup felületeket, beépíthetünk oldalon belüli keresést, vagy éppen bevételszerzési és egyéb funkciókat is. Utóbbiaknál olyan fizetési megoldásokat integrálhatunk pár mozdulattal – bevásárlókosár funkcióval együtt -, mint a Paypal, a Stripe vagy a Paddle, de érdekesség, hogy más külső szolgáltatásokat használatát is egy kattintásos közelségbe hozza a program: így például online időpont-foglalási és naptár szolgáltatásokat, illetve reklámfelületeket (például Google Ads) is egyszerű fogd és dobd módszerrel építhetünk be a készülő weblapba.
Bár az oldalak felépítésekor szabadon garázdálkodhatunk, de ha valaki jobban szereti az egységeket, a Structure részben immár nem csak a korábbi verziók Box és Wide box használatára nyílik lehetősége, hanem a Layout block névre keresztelt új megoldást is alkalmazhatja. Ennek nagy előnye, hogy a Layout block területen belül elhelyezett elemek egyszerre mozgathatók, ráadásul a layout blokkok sorrendje egy mozdulattal cserélhető az oldalon. Sőt, ha a CMD billentyűt lenyomva tartjuk, akkor egyszerre többet is mozgathatunk, így az oldal főbb elemeinek átrendezése villámgyorsan megy (ez speciel hasonló a Bootstrap szerkesztőkhöz).
Használhatunk számtalan webes szűrőt és effektet (árnyékok, lekerekítés, áttetszőség, keret, háttér-szűrők), illetve a kitöltéseknél nem csak színt, színátmenetet, vagy képet alkalmazhatunk, hanem lehetőség van ingyenes stock fotók egy kattintásos letöltésére (Pixabay, Unsplash és Pexels forrásokból), illetve a programhoz mellékelt – vagy saját – kitöltési minták használatára is. Ugyanígy van lehetőség az objektumok mozgatására is, akár megjelenéskor lefutó, akár görgetés közbeni animációk használatával. Utóbbi segítségével akár a manapság népszerű parallax effektet is összehozhatjuk, kis ügyességgel.
Maga a Sparkle Pro automatikusan is képes a weboldalakat mobilra optimalizálni, de ha nagyon biztosra akarunk menni, manuálisan is hozzáigazíthatjuk az oldalak tartalmát a különféle eszközök felbontásához. Így a reszponzív felület még pontosabban idomulhat a különféle eszközök eltérő kijelző méretéhez és felbontásához.
A készülő oldalakról azonnali előnézetet is kérhetünk, ha bekapcsoljuk a Preview üzemmódot. Így a szerkesztőfelületen végzett módosítások azonnal látszanak minden megadott böngészőben. Sőt, az aktuális Sparkle verzió immár arra is képes, hogy az azonos wifi hálózathoz csatlakozó okostelefonon is megnyissa az élő előnézetet (egyszerűen le kell olvasnunk egy QR kódot).
De még ez sem minden! A Sparkle Pro ugyanis támogatja az úgynevezett Sötét üzemmód (Dark mode) használatát is a weboldalakon. Vagyis megadhatjuk, hogy miként változzon az oldal színsémája, ha nappali, vagy ha éjszakai üzemmódban működő operációs rendszereken – a Windows, macOS, Linux, iOS, Android aktuális verziói mind rendelkeznek ilyen üzemmódokkal – nyitották meg éppen az oldalt.
De van betűkészlet-menedzser funkció is, amellyel villámgyorsan tölthetünk le és izzíthatunk be webes fontkészleteket. Az előnézetes lista nagy segítség, hogy gyorsan megtaláljuk a dizájnhoz illő betűkészletet, amit aztán egyetlen kattintással letölthetünk és telepíthetünk. S ha már a kényelemnél tartunk, az új verzióban helyet kaptak a FontAwesome ikonok és egy AI-alapú háttér-eltávolító funkció is. Utóbbival villámgyorsan törölhetjük a fotókról a lényegi téma körül látható, ámde általunk feleslegesnek ítélt hátteret.
A Sparkle felülete letisztult, átlátható. A fejlesztők igyekeztek mindennek megtalálni a legmegfelelőbb helyet, így villámgyorsan építhetünk vele weboldalakat. Kódolni gyakorlatilag semmit nem kell, a program elsősorban a dizájn oldaláról közelít, így nekünk csak annyi a feladatunk, hogy az elképzeléseinket megvalósítva építsük fel benne leendő honlapunkat. A kódolást elvégzi a háttérben a program, precízen igazodva a webes sztenderdekhez.
Blog, felhasználó-kezelés, SEO és Google PageSpeed, privacy
Bár a Sparkle Pro alapvetően statikus weboldalak készítéséhez előnyös választás, egészen meglepő extra lehetőségei is vannak. Az egyik ilyen a Blog funkció, amely bár kényelemben elmarad attól, mintha egy WordPress blogot üzemelnénk be, de ha csak ritkán bővítjük új bejegyzésekkel az oldalunkat, akkor alapvetően megteszi. Létrehozhatunk index oldalt a blog-bejegyzéseknek, de amúgy minden egyes blogos cikk külön aloldalnak számít és pont úgy is épülhetnek fel, mint bármely más aloldal a készülő site-on belül.
Ennél is érdekesebb a felhasználó-kezelés funkció, amelynek köszönhetően jelszavas védelemmel láthatunk egy oldalakat a site-unkon (egyszerűen be kell kapcsolni a Protect with Password opciót a kívánt oldalak jellemzőinél). A program külön felülettel szolgál, hogy azon hozhassuk létre a felhasználói fiókokat és menedzselhessük azokat, illetve azok jelszavait és egyéb adatait. Mivel a jelszavakat így egy fájlban tárolja, szükség van egy mester-jelszóra is, amellyel védeni és titkosítani tudjuk azokat. Ezután létrehozhatunk egyéni felhasználókat vagy akár csoportokat is. Kitölthetjük az adataikat, az egyedi jelszavakhoz pedig még jelszógeneráló funkciót is kapunk.
A jelszóval védett oldalak megnyitásokat így a felhasználók egy – teljesen testreszabható – bejelentkezési oldalt látnak, majd miután belépnek, rögtön hozzáférnek a kérdéses oldal tartalmához. A login felület egyébként külön objektumként elhelyezhető bárhol és definiálhatunk a belépés- és kilépés után automatikusan megjelenő lapokat is. Még az automatikus – meghatározott idő letelte utáni – kiléptetés is megoldható.
A Sparkle oldalait felkészíthetjük a GDPR megfelelésre is, így például létrehozhatunk süti-figyelmeztetést és a létrehozott oldal a felhasználó választásának megfelelően kezeli a sütiket.
Szintén hasznos lehetőség a SEO optimalizálás, amihez tényleg mindent megad a Sparkle: segít beállítani a nagyobb keresők és szocmédia szolgáltatások tulajdon-ellenőrző funkcióit a kódok lekérésével és menedzselésével, generál metaadatokat a keresők számára, plusz képes a szocmédia oldalak számára is generálni ilyet. Emellett támogatja az úgynevezett Structured data információk használatát is, a helyi üzleti adatok megadási lehetőségével. Szóval a keresőoptimalizálást nagyjából kimaxolja, ennél többet már csak mi tehetünk, ha az oldal tartalmát is keresőbarát módon állítjuk össze. Van amúgy egy SEO Assistant funkció is, amely lépésről lépésre végigvisz minket azon, mi mindent kell megadni, hogy a keresők jobban szeressék leendő honlapunkat.
Természetesen van lehetőség Google Analytics és Google Ads bekötésre egyaránt, s mivel mára már elvárás, gond nélkül megadhatunk ikont is az oldalunknak, külön a kitűzött fülek (Pinned Tabs) esetére, sőt, a MacBook Prók Touch Bar felületén történő megjelenéshez is.
A Sparkle készítői arra is odafigyeltek, hogy a programmal készült weboldalak a lehető legjobb eredményt érjék el a Google PageSpeed szolgáltatásában, illetve a manapság – mellesleg SEO szempontból is – fontos Web Vitals jelentésekben is. Ráadásul a program automatikusan képes a projektünkben használt képek optimalizálására is. Nem csak az átméretezést és a JPG tömörítés mértékét állíthatjuk be, de akár WebP formátumba is automatikusan konvertálhatjuk a képeket, így a kompatibilis webböngészőkben – Chrome, Firefox, Safari, Edge, Opera stb. – a jpg képek helyett a WebP képek töltődnek le, amelyek ugyanazt a minőséget sokkal kisebb fájlmérettel hozzák, így gyorsabbá válik weboldalunk betöltése. Mondjuk, mivel eleve statikus oldalakról van szó, így már alapból is gyorsabb az eredmény, mint mondjuk egy optimalizálatlan WordPress oldal esetében. Pedig amúgy WordPressben is csodákra képes egy jó cache plug-in, mint például a magyar fejlesztésű Swift Performance.
Korábban már említettük, hogy vannak űrlap-elemek is, amelyekből tetszőleges űrlapokat hozhatunk létre, az egyszerű kapcsolat formtól egészen az időpont-foglalási felületig. A visszaküldést intézheti a szerverünk, vagy adott esetben megadhatunk akár SMTP szerver elérést is erre a célra a programban.
Értelemszerűen a fenti funkciók egy része – űrlapok, weboldal védelem, privacy funkciók stb. – csak akkor működik, ha az elkészült és publikált oldalt feltöltjük egy szerverre, bérelt webtárhelyre. A programból egyébként megoldható a közvetlen feltöltés is a szerverre – a felhasználó-menedzser funkciónál külön feltölthetők az esetleges új vagy módosított felhasználói adatok is a védett aloldalakhoz -, de ha úgy egyszerűbb, exportálhatunk egy mezei mappába is a gépen, hogy aztán úgy hasznosítsuk a kész oldalt, ahogy jól esik.
Összegzésül
Mindent egybevetve a Sparkle jelenleg – szerintünk – a legjobb maces webszerkesztő program. Nem korlátozza semmiben az alkotói szabadságot, miközben igyekszik minden webes sztendernek megfelelő kódot létrehozni abból, amit mi a vászonra álmodunk. A login funkció, a részletes SEO- és sebességoptimalizálási opciók, a Layout blokkok használatának lehetősége, mind mellette szólnak, ahogy az is, hogy akár automatikusan, akár manuálisan egyaránt megoldható benne a reszponzív oldalak létrehozása.
Olcsónak nem mondható, viszont van lehetőség egyszeri vásárlása, illetve előfizetésre is. Emellett letölthető belőle ingyenes próbaverzió is, így nem kell zsákbamacskát vennünk. Aki inkább az App Store-ból szerzi be az alkalmazásait, ott is megtalálja, ebben az esetben alkalmazáson belüli vásárlási lehetőségek közül lehet választani, kinek-kinek az elvárásai szerint.
A program használatának elsajátítása meglehetősen egyszerű, aki dolgozott már hasonlóval, villámgyorsan kiigazodik rajta. Akinek viszont még új ez a terület, vagy nem talált meg minden funkciót, annak egy kiváló – igaz, csak angol nyelvű – online dokumentáció segédkezhet az első lépések megtételében.
Ha valakit további, webes fejlesztéssel kapcsolatos témák érdekelnek, böngéssze át Webfejlesztés dossziénkat a Techwok Pro rovatában.
