Az alábbi leírásban csak a rövid deklarációk formájának bemutatására törekszem, és nem térek ki az egyes tulajdonságok magyarázatára, valamint arra, hogy az ezek milyen értékeket vehetnek fel. (Ezek megtalálhatók a W3schools CSS referenciájában)

Background (háttér)

A background meghatározásával egyszerre 5 háttér tulajdonság deklarációját helyettesíthetjük. Az első a background-color (#ffffff), majd background-image(url(’hatterkep.jpg’)),  background-repeat (no-repeat), background-position (10px 20px) és a background attachment (scroll).

background: #ffffff url('hatterkep.jpg') no-repeat 10px 20px scroll;

De mi történik ha nem határozzuk meg valamelyik tulajdonság értékét? A böngésző úgy fogja értelmezni a kódot, mintha az alapértelmezett értékeket adtuk volna meg. Lehet kísérletezni! :)

Margin, padding (margó és helykitöltés)

margin: 5px; padding: 5px;

Egy érték megadásakor az összes margó azonos nagyságú lesz.

margin: 2px 4px; padding: 2px 4px;

Ha két értéket adunk meg, akkor az első szám (2px) a felső és az alsó, a második szám (4px) a bal és jobb margókat jelöli.

margin: 1px 2px 3px; padding 1px 2px 3px;

Három érték megadásakor az történik, hogy az első érték a felső margót (1px), a második érték (2px) az oldalsó margókat(tehát a balt és a jobbat egyaránt), az utolsó pedig az alsó margó értékét határozza meg. Talán elsőre kicsit trükkösnek tűnhet, de jobban átgondolva ez a működés így logikus.

margin: 1px 2px 3px 4px; padding: 1px 2px 3px 4px;

Ez a rövidítés a margin-top, margin-right, margin-bottom és margin-left tulajdonságokat hivatott egyszerűsíteni egy sorban. (Ebben a sorrendben.) Az értékek megadása az óramutató járásával megegyező irányban történik, tehát az első érték a felső margó (1px) lesz, a következő a jobb oldali (2px), majd az alsó (3px) és a bal (4px) következik.

Border (szegély)

A border esetében border-width, border-style, border-color tulajdonságokat határozzuk meg egyszerre:

border: 1px solid #000;

Ezzel az egy deklarációval mind a 4 szegélyt azonos stílusúra állítjuk. Ha külön szeretnénk ezt megtenni, akkor

border-top: 1px solid #000;
border-right: 2px solid #000;
border-bottom: 3px solid #000;
border-left: 4px solid #000;

A szegélyek vastagsági értékeit is beállíthatjuk a következő formában:

border-width: 1px 2px 3px 4px;

Akárcsak a margó és a helykitöltés rövidített megadásánál, a sorrend itt is az óramutató járásával megegyező, tehát felső (1px), jobb oldali (2px), alsó (3px), majd bal oldali (4px).

Font (betű)

Font-style, font-variant, font-weight, font-size, font-height, font-family. Ennyi tulajdonsággal rendelkezhet egy font tag a CSS-ben. Nézzük a rövidítést:

font: italic small-caps bold 1em/120% sans-serif;

A sorrend a fentebb említett. A trükk a font-size és font-height résznél van, ezeket ugyanis per jellel elválasztva kell megadni. A font-size és font-family tulajdonságok kivételével az összes többit el lehet hagyni, ekkor az alapértelmezett értékeket fogja használni a böngésző.

List (lista)

List-style-type, list-style-position, list-style-image a meghatározandó tulajdonságok sorrendje. Valahogy így:

list-style: disc inside url('gomb.gif');

A rövidítésben először az egyes elemek jelölésének típusát, aztán a jelölő helyét, majd végül az elemek jelőlésére használandó kép url-jét állítjuk be.

Outlines (kontúrok, vagy körvonalak)

Ezt csak néhány böngésző támogatja, ezért én személy szerint nem is szoktam használni. Azért leírom:

outline: 1px solid #fff;

Akárcsak a border esetében, itt is a width, style és color tulajdonságokat deklaráljuk.

Színek

A CSS-ben leginkább 6 jegyű hexadecimális számokat (# jel és 6 számjegy illetve betű) használunk a színek meghatározására. (Ugyan az egyes színeket betűvel is ki lehet írni, én ezt nem szoktam használni.)
Az első két számjegy a vörös, a következő kettő a zöld, és az utolsó kettő a kék színkódja. (#RRGGBB)
Nem mindenki tudja azonban, hogy lehetőség van ezeknek a számjegyeknek is a rövidítésére. Például a vörös kódja a #ff0000, a rövidítése pedig #f00. Észrevehető, hogy nem egyszerűen elhagytuk az utolsó 3 karaktert, hanem a rövid kódból a karakterek duplázásával kapjuk meg a 6 jegyű karaktersort. Ha belegondolunk ebbe a konverzióba, akkor magától  értetődő, hogy nem minden színárnyalatnak létezik rövid változata.

A fejlesztés során nekem jól szokott jönni, hogy fejből tudom egy pár szín kódját, ezért összegyűjtöttem ide is néhányat, hátha jól jön valakinek:

#000 – fekete
#111, #222, #333, … #999, #aaa, #bbb, #ccc, #ddd, #eee – a szürke halványuló árnyalatai
#fff – fehér
#00f – kék
#ff0 – sárga
#f60 – narancs
#f00 – vörös

Kaptam egy érdekes feladatot: oldjam meg egy Windows XP rendszernél, hogy amikor az alapértelmezett internetkapcsolat megszakad, azt a rendszer észlelje és tegye meg a megfelelő lépéseket annak érdekében, hogy a gép interneten mardjon.

Elkezdtem kutakodni a rendszer lelkében, viszont minden egyes megoldás amit találtam valamilyen szerver verzióra vonatkozott, de egyik sem XP-re, viszont az adott gépen szerver alkalmazása nem lehetett megoldás anyagi okok miatt.

Adott néhány parancs a kapcsolat ellenőrzésére paranccsorból, de konkrétan hibakezelésre semmilyen élhető és hatékonyan hasznosítható eszközt nem találtam.

Elkezdtem kísérletezni mindenféle megszokott paranccsal (ping, rasphone, tracert,ipconfig), viszont mibe állítom én ezt össze, ami megfelelően le tudja kezelni a programok által visszaadott kimenetet, ráadásul reagálni tud rájuk úgy, hogy mellette jegyzeteket is készít a saját munkájáról?

Derült égből a villámcsapás: PHP!  Egyszerűbb, mint egy C-ben írt programot módosítgatni, sokkal könnyebben konfigurálható és ami nem utolsó szempont: nyílt és ingyenes, nem szükséges apróbb módosítások miatt százezrekért új programot csinálni – egy jegyzettömbben összerakható. Adott a feladat: Gép, aminek mindig online kell lennie, egy megadott gépre adatokat küldeni a nap 24 órájában, megszakadás nem engedélyezett.

El is készült egy kis szösszenet: leellenőrzi, hogy a kapcsolat él-e, végigellenőrzi, hogy az adatok küldése lehetséges-e minden megadott időben. Akár 3 másodpercenként is, amennyiben valahol hibába botlik azonnal naplózza azt és megteszi a szükséges intézkedéseket: ha az alapértelmezett net megszakad, létrehozza a másodlagos mobil internetet, ami éppen arra elég, hogy a legfontosabb adatok időben eljussanak a megfelelő helyre a megfelelő időben.

Az első jól működő verzió láttán igen meglepődtem, hogy több évi tanulás után még mindig tud újat mutatni nekem ez a nyelv. A végére hagytam a legjobbat: és még mindig fejlődik, alkalmazkodik az új kihívásokhoz, új célokat fogalmaz meg és kivitelez. A PHP 1995-ben még egy végtelenül egyszerű Perl-ben írt értelmező volt, mára… Doctor Who szuperszonikus csavarhúzója :).

PS: sajnos a kávéfőzésre és a pizzakészítésre még nem tudtam rávenni :(. Még.

Ezek a programok a két kereső óriás desktop alkalmazásai, amikkel a windows asztalán kisebb eszközöket, programokat futtathatunk. Mindkettőnek van több alkalmazása is, ami az adsense bevételek ellenőrzésében segítségünkre lehet.  A google gadgetek közül talán az adsense biff, a yahoo widgetek erdejéből pedig az adsensor emelhető ki. Szerény véleményem szerint ezek a legjobbak, mert az aznapi bevételek mellett mutatják az aktuális hónap bevételeit, egyszerűek és könnyen kezelhetőek.

A probléma megoldására sima HTML oldal esetében a legkézenfekvőbb és legegyszerűbb, ha a szülő divnek a CSSben adunk egy “display: table”-t, ez a megoldás nekem működött a legnépszerűbb böngészőkben.

XHTML oldalaknál több megoldás létezik. A legtöbben azt alkalmazzák, hogy a szülő div végébe egy

<div style="clear: both;"></div>

kódot illesztenek. Azonban ha nem szeretnénk a HTML kódunkat összerondítani oda nem illő dolgokkal, akkor CSS-ből is megoldható a probléma:

div.container:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Ezzel a kóddal a CSS-ből hozunk létre egy láthatatlan divet, ami tartalmazza a clear:both tulajdonságot, de nem jelenik meg a böngészőben.

Végül pedig a legegyszerűbb megoldás, amit találtam:

Adjunk egy “overflow: auto” -t a CSS-ben a szülő divnek. (néhány böngésző – főként az IE6 – igényli, hogy egy magassági vagy szélességi értéket is kapjon a doboz, különben nem működik!)

Toggl, Clocking it, Tick, Harvest, Cashboard, FreshBooks, yaTimer, Slim Timer, Punchy Time, Fourteen Dayz, Time Assist

Csak a teljesség igénye nélkül… Persze nem próbáltam ki mindet. Egyébként a togglnek már van windowson futó változata is, ami az online rendszerhez kapcsolódva dolgozik. Aki nem szereti az online alapúakat, az találhat offline szoftvereket is, de azoknak nagy része fizetős.

A határidők miatt gyakran úgy kell dolgoznom, hogy nincs internet a közelben, ezért nekem is egy internettől független alkalmazást kellett találnom. Az egész napomat rászántam, hogy megtaláljam azt, ami a legjobban megfelel az elvárásaimnak, végül a time stamp mellett döntöttem. Csak létrehozod a projectet, benyomod a start gombot, és elindul a stopper. A feladat végeztével leállítod.

A rögzített időpontokhoz megjegyzéseket is fűzhetünk, az órabér pedig előre beállítható és automatikusan összegzi is azt. A számlát megformázza és a nyomtatást is el tudja végezni. Nekem ez a legfontosabb, ugyanis nincs szükség külön szoftvert csak ezért a részfeladatért tartani. Ugyan nem fejlesztik már, de egyszerű, kicsi és használható. Szerintem a szabadúszók nagy részének igényeit kielégíti.

Máig úgy tudtam, hogy nem lehet megváltoztatni a szöveges adsense hirdetések szövegméretét, de gondoltam most okos leszek, és hekkerkedek kicsit. Aki tud egy cseppet angolul, az találhat egy pár trükköt, tippet a neten adsense betűméret témában, de a google szabályzata kimondja, hogy egy <font size=”n”> taggal állítható a szöveg betűmérete.

“Customize your text links. Our policies allow publishers to alter the font and size of the text link using standard HTML “font” tags around the link. However, the font changes must be reasonably necessary to match the theme of the site. Unreasonable or abusive changes will constitute a violation of our program policies.”

De hiába a font tag, én nem vettem észre változást. Nem voltam elég bátor, hogy más módszert is kipróbáljak, mert a felhasználói feltételek megsértése csúnya büntivel jár.

Fórumokon egyébként rebezsgetik, hogy akinek havonta 20 milliónál több lapletöltése van (premium member), csak az változtathatja a betűméretet. Hát ez nem nyert… :(