A markáns és szembetűnőtől a inkább visszafogottnak tűnő, mégis hasznosig – az elmúlt hetek és hónapok során számos változáson mentünk keresztül a TutKit.com oldalon. Ezek között szerepeltek teljesítményjavítások és technikai frissítések, valamint a design és a felhasználói vezérlés beállításainak módosítása. Az összes változás pozitívan érinti a felhasználói élményt. Mi rejtőzik a háttérben és fölötte, és mi változott – egy átfogó áttekintés.
Eltűnt a sötétség!
Mostantól egyetlen kattintással bármikor átállíthatod a design-t sötét vagy világos módra. Úgy állítottuk be alapértelmezettként, ahogy az operációs rendszerben meg van adva.
Ebben az összefüggésben az összes képet AVIF formátumba alakítottuk át, hogy a böngésződnek kevesebb adatot kelljen letöltenie (ezáltal a képek kb. 70%-kal kisebbek lettek fájlméretben).
Eszközök, Sablonok & E-Könyvek: több egy pillantásra, közbenső kattintás nélkül
Már régóta láthatod az eszközeink, sablonjaink és e-könyveink oldalain kis előzetes képeket az összes elem tartalmáról. Így közvetlenül láthatod, mi vár rád a letöltéskor.
Minden előzetes kép mögött egy kis menü rejlett. Ezen keresztül nagyíthattad az előzetes képet, megjelölhettél tartalmat kedvencnek és lekérhettél kompatibilitásfigyelmeztetéseket. Szép ... De azt is jelentette, hogy a nagyításhoz minden képnél meg kellett nyitnod a menüt, egy ikont kattintanod, meg kell nézned és be kell zárnod a képet, mielőtt a következőre léptél volna. Egy felesleges kitérő. Ezért eltávolítottuk a menüt. Most elég az egérrel egy kis előzetes kép fölé húznod, és puff: máris megjelenik a nagyobb változat.
A felülvizsgálata során gyorsan máshol is értelmes módosítások adódtak: A kompatibilitásfigyelmeztetéseket most már az egyből látható információs ikonnal hívhatod elő. A tartalom kedvencnek megjelölése az ugyancsak egyből látható csillagikonon keresztül történik, ami emellett csak bejelentkezett felhasználóknak jelenik meg.
Videó útmutatók: Most már képek segítségével is képben vagy!
Ha korábban megnézted valamelyik Videó útmutató oldalunkat, ott nem sok minden fogadott, csak főként szürke sivatag szövegekkel és lejátszás gombokkal. Az elrendezést teljesen átszabtuk úgy, hogy egy az egyben az Eszközök, Sablonok és E-Könyvek elrendezését kövesse.
Vagyis: Mostantól a Videó útmutatóinknál is láthatók kis előzetes képek, ami egyszerűen esztétikusabb hatást kelt. Az ingyenes vagy frissített videókat – az Eszközök esetében látható módon – színes jelzőkkel láthatod a képeken.
Így most oldalaink egységes megjelenést nyújtanak. Legyen szó eszközről, sablonról, e-könyvről vagy videó útmutatóról: Mindenhol egy előzetes kép, amelyet egérrel húzással nagyíthatsz; egy gomb a letöltéshez vagy a videó lejátszásához; ikonok további információkért és kedvenc jelöléshez; ha a tartalmakhoz további anyagok, például projektállományok, útmutatók vagy szöveges útmutatók is elérhetők, a leírások alján találhatod a linkeket.
Emellett elhagytuk a felesleges háromszög ikonokat az összecsukható és kinyitható szövegekhez, így az elrendezés a „kevesebb több” alapelv mentén letisztultabb megjelenést kapott. Az összes optimalizálást végül módba hoztuk az okostelefonok számára is.
Nagy takarítás a Csomagoldalakon
Mit lehet elhagyni? Hogyan lehet másképp megjeleníteni? Hogyan lehet jobb helyzetben elhelyezni? Ezekre a kérdésekre irányultak azok a változtatások, amelyek áttekintettük az értéklapok oldalainak megkönnyítése érdekében, miközben a tartalombőséget magasan tartottuk. Az egyes projektek megtekintésekor ezekhez hasonló változtatások történtek a következők:
Galéria: A galériákban bemutatjuk, hogyan lehet például az eszközöket és sablonokat használni. Korábban itt volt egy forgató hatás. Szép, de zavaró. A galéria új nézetét pontosan három dolgokra redukáltuk: láthatod a kiválasztott képet, az alcímet és a navigációt balra és jobbra – és nagy látványos effektek nélkül.
Szövegek kinyitása és becsukása és egy kis több szín: Eddig majdnem minden szakaszt kinyithattál és becsukhattál egy Csomag-oldalon, amire háromszög alakú gombok szolgáltak. Ez a funkció eltávolításra került. A szélesebb oldal hatékonyabb – és legyünk őszinték: Van olyan, aki valaha is használta volna ezt a funkciót? Emellett a címsorokhoz folyamatosan több színt adtunk. Most felülről lefelé egy finom TutKit-zöld választja el egyedi területeket egymástól.
Információs terület: A teljes csomagoldalak jobb felső sarkában összegyűjtjük az összes további információt, például a kompatibilitást, a tartalmak számát és a kategóriákat. Sok adatgyűjtés van itt.
Az információs területet újra rendeztük és illusztratíve feljavítottuk. Így a tutorialoknál az előrehaladás csak bejelentkezett felhasználóknak jelenik meg (kijelentkezett látogatóknak úgysem kell). A csomagjaink értékelése a kommentmezőbe került. Az információs területen újdonság egy link a használati jogokhoz. Talán a legfeltűnőbb változás azoknak a személyeknek a megjelenése, akik létrehozták a csomagot. A nevük helyett portréjukat mutatjuk be neked. Remélhetőleg egy kicsit barátságosabb hatást kelt majd...
Sok kis részletjavítás:
- nincs több slider-navigáció a szoftverek/kategóriák között
- általánosan folyamatos görgetés a keresésnél, kategóriaoldalaknál stb.
- Kártyák: kevesebb árnyékolás, ikonok eltűntek, élesebb sarkok
- Kártyák: animáció szűnt meg, helyette zöld átfedés
- Húzás-effekt optimalizálva a szétválasztó gombnál
- Nagyobb arcok, például a blogon és a videótúránál
- Arc az űrlapban
- Alsó menü teljesen új (nem nyitás, arc mutatása stb.)
- Szerzők oldala: "Ugrás a szerző webhelyére" eltávolítva, folyamatos görgetés, zöld átfedések
- Kezdőlap: Új tartalmak már nem dia formájában
- 4 oszlop a szerzőknél
- Oldalugrás a felugró ablaknál
- új modul célcsoportokhoz
Kevesebb kérdés a teljesítményjavításról
Gyorsan betöltő oldalak - az ilyeneket szereti a Google, mi is, és biztosan te is. Ami a portálunk teljesítményét illeti, továbbra is további fejlesztéseket fogunk végrehajtani. Például megvalósítottuk a képoptimalizálást. Azokat ugyanis átkonvertáltuk a vékony JPG formátumról a jóval vékonyabb WEBP- és AVIF-formátumokra.
Emellett foglalkoztunk az adatbázisokkal és a lekérdezésekkel, amelyek az oldalaink betöltésekor zajlanak. Eléggé technikai minden, de csak egy példa kedvéért: Ha egy tutorialokkal teli csomagoldalra érkezel, a rendszernek többek között tudnia kell, hogy milyen mértékben nézheted meg a videókat. Tehát rendelkezel-e tagsággal? Megvetted-e a csomagot? Vannak-e esetleg ingyenes videók? Ezekre a kérdésekre rengeteg feleletet kell keresnünk az oldal betöltésekor, ami természetesen időbe telik. Ennek megfelelően a teljesítményjavításhoz itt is bevetjük az eszközöket (Figyelem, most tényleg technikai szótár):
- Felesleges adatbázislekérdezések, amelyek több információt kértek, mint amennyire valójában szükség volt, eltávolításra kerültek.
- Az általában leggyakrabban végzett adatbázislekérdezések sebességét javítottuk.
- A PHP módszerekben lévő kódokat optimalizáltuk, és az ismétlődő adatbázislekérdezéseket bizonyos hurokokban megszüntettük.
- A rendszerünk összes részét ellenőriztük felesleges adatbázislekérdezésekre, amelyeket az összes oldalon használtak, különösen azokra, amelyek menüpontjainkkal voltak összefüggésben. Ezeket a teljesítmény javítása érdekében optimalizáltuk.
- Megállapítottuk, hogy néhány adatbázislekérdezést feleslegesen többször megismételtek, különösen azokat, amelyek a felhasználókat a csomagokhoz kapcsolták. Ezeket a megismétléseket egy rövidtávú gyorsítótároló rendszerrel (gyorsítótárral) orvosoltuk, amivel időt és erőforrásokat is megspóroltunk.
- A rendszer hibanaplóját figyeltük és az összes jelzett problémát orvosoltuk.
- Az automatizált rendszerfeladatokat (cronjobokat) ellenőriztük, hogy melyek futottak túl hosszan vagy szakadtak meg. Ezeket a feladatokat hatékonyabbá tettük, ezáltal közvetlenül az adatbázisból szűrték az információkat, anélkül, hogy ezt közvetetten PHP-kódon keresztül tették volna.
Minden szempontból naprakész a technika? Minden tekintetben naprakész!
Nyilvánvalóan sokat optimalizáltunk a háttérben, illetve frissítettük a szoftvercsomagokat, például:
- Frissítés a legújabb PHP-verzióra.
- A Laravel (framework-ünk) verzió 9-ről 10-re frissült.
- Majdnem 35 csomagot frissítettünk a frameworkből, valamint az SDK-t a fizetési szolgáltatónktól, a Braintreetől.
- Jelenleg az http2-re támaszkodunk (szeretnénk a 3. verziót használni, csak épp az Apache-szerver nem támogatja (még)).
- A Ubuntu frissítve lett 20.04-ről 22.04-re (ami fontos volt az AVIF-képtámogatás miatt).
Mi jön még?
Jelenleg intenzíven dolgozunk azon, hogy portálunk januártól többnyelvű legyen. Ez nagy feladat, de büszkeséggel tölt el minket, ha ezt sikeresen megvalósítjuk.
Emellett már jövő héten lehetőség lesz kedvezményes áron vásárolni egyes tartalmakat, ha éppen akció van. Ennek eredményeként különálló áruházunk (shop.psd-tutorials.de) nem fog új termékekkel frissülni, és legkésőbb 2024 első negyedévének végéig offline kerül, és az összes tartalmunk kizárólag a TutKit.com-on lesz elérhető.
2024-ben tervezzük legalább havonta 1x hírlevelet küldeni, hogy minden tag és hírlevél-előfizető láthassa, mi az újdonság. Mert eddig mindig sikerült: Minden héten legalább egy új tartalom került az oldalra!
Továbbra is érdekes új tartalmakat fogunk biztosítani. Például én magam tervezek egy új tréninget az Adobe Photoshop Elements-hez, mivel végre valami változott a felületén, és most már érdemes teljesen új tréninget készíteni erről. A MI téma továbbra is foglalkoztatni fog minket, és az ehhez kapcsolódó termékeinket a legújabb szinten tartjuk vagy teljesen új termékeket készítünk.
Hiányzik még valami? Akkor írj nekem egy e-mailt az info@tutkit.com címre. Nagyon örülnék, ha a bloghoz hozzáadnánk egy kommentálási lehetőséget. Mit gondolsz? Hasznos lenne, vagy úgysem szokott senki kommentelni az időhiány miatt?