Így neveld a blogodat

Probléma Talán alapozó cikk, talán gyakorlati kérdés: hogyan kezeli a Blogger a képeket? Korábban a Primadonna blogon futottam bele Leah cikkében , amiben a egy képfeltöltő portál hibájára panaszkodott. Hogy a probléma még mindig előfordul, és hol jelentkezik, azt nem tudtam megállapítani (nem találtam olyan blogot, amit ő készített és valami nem jelenne meg), de később egy másik blogon találtam egy hasonló furcsaságot: Eltűnt kép, elcsúfult dizájn Nem állítom, hogy Leah problémája ugyanilyen hibára vezethető vissza, mert nem beszéltem vele. (Fogok, de előbb be kell mutatkoznom, és mi sem jobb bemutatkozás, mint cikket írni valaki háta mögött?) Valószínű, hogy egyéb képmegosztási kérdés lehet, de felpiszkálta a fantáziámat. Máshol is láttam a fentebbihez hasonló Tinypic megoldásokat, ezért fel kellett tegyem a kérdést: biztosan jó módszer így beemelni a dizájn elemeket

Ez egy képekkel alaposan megtámogatott gyakorlat lesz, amiben végigvezetlek Titeket a Github Desktop telepítésén és az alapbeállításokon. Vágjunk bele azonnal!

Mint azt írtam, az általunk használt verziókezelő rendszer a Git lesz. Továbbá a GitHub Desktop programot fogjuk vele használni. De hogy jönnek ezek össze? És pontosan mi az a Git?

A Git egy elosztott verziókezelő szoftver. Ez így tiszta kínai, szóval mielőtt ész nélkül belevágunk, beszéljünk egy kicsit magáról a koncepcióról. Azaz: mi is az a verziókövetés? És miért van rá szükség? Jöjjön egy elméleti bevezető!

Probléma Ebben a rövid cikkben egy kis CSS-t fogok bemutatni: hogyan lehet szöveggel körbefuttatni a képeket. Téglalap alakú képekről lesz most szó, bár egy későbbi cikkben kitérhetek arra is, hogyan lehet szabálytalan alakú képeket (vagy négyzetes, de átlátszósággal bíró, .png formátumú) képeket körbefuttatni. Mindenkit megnyugtatok: nem ennyire nehéz a téma, hogy ilyen sokat csúszott a cikk, egyszerűen ütemezési probléma merült fel. (Magyarán elfelejtettem, hogy nem írtam meg.) Megoldás elméleti háttere Egyszer már volt róla szó, hogy a tartalomért a HTML felelős, de a kinézetet a CSS állítja . (Az interaktivitást meg a JavaScript adja.) Ezért CSS-hez kell fordulnunk, mert ha csak simán egymás alá dobáljuk a szöveget és a képeket HTML-ben, akkor nem fogják körbeölelni egymást. Persze van egy másik megoldás is, ami Blogger-specifikus. A Szerkesztési nézetben is át lehet állítani, hogy a képet körbefussa a szövegünk, de kell hozzá egy kis ké

Probléma Ebben a cikkben egy picit belemegyünk a színelméletbe, hogy megértsük, hogyan kezelik a böngészők a színeket. A weben használt leggyakoribb színértékekről fogok beszélni: a nevesített színekről, a hex-kódokról, illetve kitérek az RGB(A) színrendszerre és annak egy változatára, a HSL(A)-ra is.

A tartalommal kapcsolatos beállítások után jöjjenek a kinézettel kapcsolatos beállítások. Két részben fogom ezeket bemutatni, az első az Elrendezés menüt, míg a második a Téma menüpontot fogja részleteiben tárgyalni.

A Blogger nem csak oldalszintű beállításokat tesz lehetővé. A bejegyzések és az oldalak esetén is vannak opciók. Nézzük meg most ezeket, mert sok gondot tudnak okozni!

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,

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 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-

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