Így neveld a blogodat

Probléma Egy kép többet mond ezer szónál. De mi van, ha elég egy ikon? Melyik figyelemfelkeltőbb: "Kattints ide, ha lájkolnál!", vagy ? Rengeteg ingyen elérhető ikon-készlet létezik, ezek között sok csak az alapokat adja ingyen, a kiegészítő karakterek fizetősek. Hobbi bloggereknek ez nem pálya, komoly cégeknek lehet ilyenre szüksége. A legnépszerűbb választások a különféle nagy CSS keretrendszerek részei, amikről egyelőre nem beszélünk, elő fognak még kerülni. A lényeg egyelőre, hogy elérhetőek külön, de más, webdizájnt segítő csomagokkal együtt is. Ez gyakran meghatározza, melyik készletet használjuk, mivel általában az illeszkedik legjobban a stílusba, amit eleve kapunk. Ha nincs keretrendszer, nem gond, kiválasztjuk az egyiket, valahogy elérjük az ikonokat, és már használhatjuk is. Az én kedvenc választásom a Font Awesome csomag, ami az egyik legnagyobb, teljesen ingyenesen elérhető ikon-készlet. Hatalmas bázissal bír még a Bootstrap Glyphicon , de a nagyja fizető

Probléma Az iniciálék igazán akkor erősek, ha más betűtípussal írjuk őket. A böngészők alapértelmezetten igen kevés, úgynevezett, "web-safe" fontot támogatnak, főleg a különleges betűtípusok terén kicsi a választék. Ha egyéni kinézetre van szükségünk, magunknak kell utánajárnunk és beillesztenünk a kódba. Megoldás menete Senkit se ijesszen el a cím háttere, a cikk azért kapott "közepes" besorolást, mert sok pepecseléssel jár egy igazán egyedi font beillesztése, de nem nehéz. Főleg, ha van Dropbox felhasználónk. Az elméleti háttér egyszerű: egy helyen belenyúlunk a kódba, és manuálisan hozzáadjuk a kérdéses betűtípust, majd átnavigálunk oda, ahol használni akarjuk, és az előző cikkben látott font vagy font-family tulajdonságnál beállítjuk az adott szövegre vagy betűre. Több lehetőségünk van, attól függően, web-safe fontot akarunk beágyazni, Google Fontokat használunk, vagy valami még ennél is egyedibbre van szükségünk – akár magunk szerkesztette fo

Probléma Az egyik legegyszerűbb és legnépszerűbb módszer a bejegyzések feldobására, ha iniciálékat helyezünk el bennük. Ezek állhatnak a bejegyzés elején, de akár minden bekezdés első betűjeként is. Akármit megváltoztathatunk a betűmérettől kezdve a betűtípusig, és ha mindez nem elég, még összetett, nagy képeket is beágyazhatunk a bejegyzéseinkbe. Megoldás menete Több lehetőségünk van. Az egyik, ha az első betűt egy span elembe ágyazzuk, és ennek a stílusát alakítjuk. A másik, ha képet akarunk beilleszteni, hogy lehagyjuk az első betűt, és egy kép elemet teszünk helyette. A harmadik, "automatikus" megoldás esetében nem kell semmi külön beillesztéssel bajlódnunk, mivel a CSS kezeli helyettünk egy pszeudo-elemen keresztül. Ez a legrugalmasabb módszer, mivel így a régebbi bejegyzések is automatikusan átalakulnak a nekünk tetsző formára. A DRY ( ne ismételd magad ) paradigma is ezt támogatja, mivel így mindössze egy helyen kell belenyúlnunk a kódba, nem minden bejegyzé

Bár a cím nagyon technikainak hangzik, semmi elérhetetlen nem lesz ebben a rövid cikkben. Cserébe viszont úgy érezhetjük magunkat, mint egy igazi webdesigner, mert pár olyan alaptrükköt nézünk meg, amit a profik is nap mint nap használnak. DOM Az első a DOM-vizsgálat , ami lényegében a HTML kód böngészését jelenti. A DOM a Document Object Model rövidítése, és az oldalt felépítő elemek elrendezését tartalmazza. A DOM-ra úgy szokás tekinteni, mint egyfajta HTML-elemeket tartalmazó családfára. Az egymásba ágyazott elemek esetén a külső entitás a szülőobjektum , a belső pedig a gyermek . Természetesen a gyerekelemeknek is lehet gyerekük, ami a legkülsőnek így az unokája lesz, ami így rendelkezni fog egy nagyszülővel is, és így tovább. Ha egy szülőnek két gyereke is van, azok egymás testvérei . Unokatestvért nem szoktak megkülönböztetni, ahogy nagybácsit/nagynénit sem (a HTML-objektumoknak nincs nemük, nehéz is lenne). Nem csak a szakzsargonban használják a DOM-fa kifejezést, a DOM-

Az első lépéseken túl vagyunk, most már bele merünk nyúlni a kódba is. Egyelőre a Blogger Személyre szabás menüjét fogjuk használni, azon belül pedig a Speciális gomb alatt a Stíluslap (CSS) hozzáadása pontot. Az elemeket legfeljebb az Elrendezésben mozgatjuk, de már hozzáadunk saját modulokat is, amiket teljes egészében magunk írtunk. A lecke végén jön majd egy újabb alapozó cikk, amiben a Blogger Személyre szabás menüjéhez adunk hozzá újabb sorokat, ami segítségével az egyéni dizájnunkat a felhasználó is testre tudja szabni (HTML vagy CSS tudás nélkül). Ennek, meg persze a HTML és CSS ismereteinknek segítségével elkészítjük az egyik alapsablon egy módosított változatát. Ez a rész tehát inkább a dizájnra koncentrál (noha még mindig nem értek hozzá), szemben az eddigiekkel. Ennek következtében megszaporodnak a kódok is.

A maratoni HTML alapozó után a CSS-t próbáljuk átvenni, ami szintén nem két perc lesz. Ígérem, most több képet hozok, és kevesebb lesz a szöveg, viszont így nehezebb lesz megérteni. A későbbiekben eleget használjuk majd ezeket, így ez csak egy rövid összefoglaló a legfontosabbakról. HTML formázások A szöveg nem mindig homogén massza, gyakran van szükség egyes elemei formázására. Ezt megtehetjük HTML-lel is, hogy az ismerős alapoknál maradjunk. Elterjedt formázások a szavak félkövérré alakítása és a kurziválás (dőlt betűk), ami rögtön össze is zavarja a kezdő szerkesztőt: félkövér kiemeléshez mind a b ( bold ), mind a strong használatos, ahogy a kurzív szöveget is elő lehet varázsolni az i ( italic ) és az em ( emphasized ) tagekkel. Melyiket használjuk? Nem mindegy! Oké, ránézésre mindegy. A b és i csak a megjelenését alakítja át a szövegnek, míg a másik két elemet a képernyőolvasó programok is felismerik. Emlékeztek az előző részben a webes akadálymentesítésre? Na, ez ug

Ahogy az előző alapozásban mondtam, az első cikk a HTML-ről fog szólni. Ehhez elhagyjuk a Bloggert, de előbb még nézzünk körül a Sablon menüben, és menjünk a HTML-kód szerkesztése pontra. Megnyílik a HTML-szerkesztő, és mindenhol színes kódok sorakoznak. (Ez az említett szintaxis kiemelés. Na, ezt veszítjük el most egy időre.) Nem kell belenyúlni semmibe, csak nézzük. Szokjunk hozzá, hogy kis gyakorlással mi is ilyeneket fogunk készíteni. Érezzük át a feladat súlyát, görgessünk a kód végére, nézzük meg a sorszámot, majd egy hirtelen mozdulattal zárjuk be az oldalt. Az Első lépések Nyissunk meg egy Jegyzettömböt, és kezdjünk neki az első HTML-weboldalunknak. Először mentsük el a semmit, méghozzá UTF-8 karakterkódolással (ez fontos! nélküle az ékezetes karakterek helyett mindenféle rondaság jelenne meg). Tegyük a kedvenc mappánkba, vagy akár az Asztalra, szóval ahol tárolni szeretnénk. Én javaslok egy külön mappát a HTML-kódoknak, hogy egy helyen tartsuk őket. A fájl neve lehe