Így neveld a blogodat

Mielőtt belevágnánk a kódolásba, ismerkedjünk meg jobban a platformmal, amit mindannyian használunk. Kötetlen sorrendben végigmegyünk a Blogger menürendszerén, és megnézzük, mit lehet kihozni belőle anélkül, hogy bármit is értenénk a HTML-hez. Tekintsétek ezeket a bejegyzéseket egyfajta főpróbának. Utána jön a webprogramozás minden ízével és szépségével. Beállítások menü használata: alapok A menüsor legalján található a Beállítások menüpont, ami sokkal több kincset rejt magában, semhogy hagyjuk parlagon heverni. A legtöbb blogger(ina) nem vesztegeti rá az idejét, úgy hagyja, ahogy a Google elkészítette. Mi ne legyünk ilyen lusták, áldozzunk rá egy kevés időt, hogy kiismerjük! A blogunk meghálálja. Az első pont az Alap beállítások lesznek, ahol a blogunkkal kapcsolatos legalapvetőbb dolgokat menedzselhetjük. Itt módosíthatunk olyan dolgokat, mint a blog címe, URL-címe, kik olvashatják, ki(k) a szerző(k). Nézzük is sorjában! Alap: ez a menüpont három beállítást tartalmaz:

Pillanatkép szerkesztés közben A bejegyzés címe teljesen jogos kérdés, nagyon eltűntem. Egyszer ugyan frissítettem a blogot, de az is csak holmi helyzetjelentés volt egy módosított dizájnról meg némi információ a Blogger új felületéről. Ennél halottabb nehezen lehetne az oldal. Szóval... mi van velem? Ha már blog, használom úgy, mint egy blogot, vagyis személyes információkat is megosztok (habár eredetileg teljesen professzionális, kizárólag edukációs tartalmat terveztem). Nem, azt nem fogom leírni, hogy XY vagyok, itt és itt élek, ezt meg azt csinálok éppen, maradjunk a fontosabb dolgoknál. Először a beígért teljes webkurzus, az alapozó tutorial cikkeknél: készülnek. Úgy is mondhatnám, hogy a HTML résszel már a háromnegyedénél járok, de még mindig sok van hátra: rengeteg kiegészítő kód, az elkészült szöveg feltöltése, gyakorló feladatok megírása, segítségek elkészítése. Ha az egész készen van, akkor fogom egyben feltölteni, majd ütemezett módon, naponta (esetleg kétnaponta) tesz

Az elmúlt időszakban mind a blog, mind maga a Blogger felülete is megújult. A változások ugyan nem hoztak sok újat, viszont a régi menük közül egyik-másik más helyre került, ezért végigvesszük, mi a helyzet most, mire kell figyelni a jövőben. A régi cikkeket a Blogger felületéről itt és itt találjátok. Az új felületen a változás leginkább a bejelentkezésben nyilvánul meg. Eddig egy főoldalra kerültünk, ahol menedzselhettük a blogjainkat, megtekinthettük a legújabb bejegyzéseket az általunk követett blogokon. Mostantól közvetlenül a bejegyzések szerkesztésére ugrunk, a blogjaink közül pedig a felső sarokban egy lenyíló menü segítségével tudunk választani. Blogok kiválasztása A további menük ugyanott találhatóak. Nagy könnyebbség, ha két blog között kell váltanunk: a blogválasztó azonnal átdob a másik blog adott menüjébe. A blogjaink statisztikáinak összehasonlítása sosem volt még ilyen egyszerű! Nem beszélve a sablon csinosításáról. Az olvasnivalók listája a menük alján a r

A blog a jövőben teljes testi-lelki megújuláson megy majd keresztül. A külső kicsinosítása lesz az első látható változás, majd utána (közben?) a tematikán is változtatok. Eddig igen öles léptekkel haladtunk, az alapozó részeket is épp, hogy ledaráltam, és ha rajtam múlik, ez így ment volna, amíg hat-nyolc rész múlva el nem érünk a komolyabb programozásig. Érthető, hogy ez nem kezdőknek való tempó. Azonban a blog célja kimondva-kimondatlanul mégis az, hogy több embert vonjon be a frontend programozás világába, amihez lassítani kell. Ezért az eddig tervezett cikkek helyett áttérek az alapok részletesebb magyarázatára. Kezdve a HTML világával, folytatva a CSS-sel, rengeteg "alapozó tutorial" cikket fogok írni interaktív kódokkal, az egyes elemek aprólékos magyarázatával. Továbbra is igyekszem a Blogger berkein belül maradni, azaz a gyakran felmerülő problémákat előre veszem, és nem foglalkozom sokat az olyan részekkel, amiknek egy design készítése során kisebb jelentősége van

Probléma Az előző részben végigvettük, hogyan lehet gombhatású linket létrehozni. Ezen cikket megelőző alapozóban pedig szó esett a CSS változó elemek használatáról. Most kísérletet teszünk arra, hogy ezt a két tudást vegyítve egy könnyen adaptálható, programozói tudás nélkül is testreszabható gombot készítsünk. Megoldás menete Az eddig elkészített kód bonyolult, "fecsegő". Nagyon sok ismétlést tartalmaz, ezért szikárabbá tesszük. Béna angol szóviccel élve: kiszárítjuk. Ez a programozás egyik kedvenc technikája, a "Don't Repeat Yourself", azaz "Ne ismételd önmagad" rövidítéséből jön ( DRY, angolul "száraz" ). Ennek ellentettje a WET, azaz "Write Everything Twice" ("Írj mindent kétszer"), mások szerint pedig "We Love/Like Typing" ("Imádunk gépelni") stílusú kód. Sajnálom, tudom, hogy eddig nem készített fel titeket senki erre, de a programozóknak ritka rossz a humorérzéke. Ennél csak borz

Sablon formázási lehetőségek A Blogger rendszerében a sablont alapvetően kétféleképpen szabhatjuk testre: egyik megoldás a Személyre szabás almenü használata, ahol nagyon sok részt, mint a háttér, linkek színe, bejegyzés szövegének betűtípusa stb. tudunk állítani. Ugyanitt használhatunk CSS-kódokat is, ha ennél specifikusabb beállításokra van szükségünk. Ez már igényel némi rutint, és az egyszeri felhasználó könnyen egy átláthatatlan CSS-útvesztőben találhatja magát. Ennél is több lehetőséget rejt magában a HTML-kód szerkesztése , ahol lényegében bármit megváltoztathatunk. Ehhez már mindenképpen kellenek előismeretek, HTML és CSS tudás nélkül senki ne vágjon bele! (Kivétel ha van egy egyértelmű leírása, mit és hogyan csináljon. Meg vannak biztonsági mentései.) Röviden ennyi a "kódolt" (vagy "kódos") dizájn: minden, amihez kell némi gépelés. Értehető, hogy vannak különféle szintjei, hiszen az is kódos designnak számít, ha hozzáadunk a blogsablonhoz egy saját

Probléma Megesik, hogy az oldalon található linkek túl "laposak", jobb lenne, ha helyettük gombok jelennének meg. Ilyenek lehetnek az előző/következő oldalakra, bejegyzésekre mutató linkek, esetleg más modulok alján a "Küldés" gombok. Jól kinéző gombot készíteni azonban bonyolultabb, mint elsőre látszik! A cikk első felében elkészítünk egy sima, nem változtatható színű gombot, majd egy kis alapozás után megtanuljuk, hogy tegyük személyre szabhatóvá. Megoldás menete A gomb legfontosabb tulajdonsága, hogy térhatású. (Mindazonáltal készíthetünk lapos felületűt is.) Ezt leginkább az árnyékok manipulálásával és a gomb háttérszínének ügyes változtatásával tudjuk elérni (mivel a monitor még mindig sík, tényleges 3D tárgyat nehéz lenne létrehozni). A cél, hogy egy folyamatos színátmenetet hozzunk létre, mintha a fény felülről jönne. A felület egy része fényes, a többi árnyékos, illetve az egész gomb árnyékot vet. Ha ráhúzzuk az egeret, kissé kifényesedhet, jelezve,