hdesign blog&portfolio

Kedves Látogató! Itt több bejegyzés már nem lesz. Sorry

Elsősorban időhiány miatt már nincs időm a blogra bejegyzéseket írni, az automatikus linkcsokrok is szenvednek már egy ideje.

Így jelenlegi formájában a blog megszűnik, itt újabb bejegyzések már nem fognak születni. Néha majd nézd meg a hdesign.cc-t, mert ha lesz folytatás, akkor az ott lesz.

Minap találtam egy szép gyűjteményt navigációs megoldásokra. Voltak köztük szépek, és voltak olyanok, amiért pénzt is kértek. Nos, én ezek közül párat megcsináltam, és közzéteszem teljesen ingyen és bérmentve (természetesen CC licenc alatt).

Rögtön négy verziót is készítettem, közös tulajdonságuk, hogy azonos HTML vázra épülnek, azonos ikonokat használnak, JavaScript mentesek, kizárólag CSS-ből történik az “animálás”.

Nézzük meg őket közelebbről is.

1. Az első megoldásnál csak akkor jelenik meg a navigáció szövege, ha fölé viszed az egeret.
2. A másodiknál szimplán csak a háttere változik a navigációs menünek.
3. A harmadik verziónál a kép pozíciója változik, így egy kicsit izgalmasabbá teszi.
4. A negyedik verzióban az ikonok mérete változik, ezzel tovább fokozva a harmadik verziót. (Itt megjegyzendő, hogy ha ezt élesben szeretnéd alkalmazni, akkor ilyenkor inkább cseréld ki a képet egy nagyobbra, mert így elég pixeles lesz a nagyítástól.)

Ezek kombinálása, és felhasználása már a Te feladatod lesz . Nyomja a Tetszik gombra, ha tényleg tetszett, de csak akkor!

Egy WordPress alapú fejlesztést általában lokális gépen szoktam elkezdeni, és ha a projekt 95% környékén jár, akkor kerül fel a végleges helyére. Ez minden esetben domain név változással jár.

Nincs is ezzel semmi gond, az alábbi forgatókönyv szerint zajlik a költöztetés:

• beállítások menüpont alatt átírom az url-eket,
• mentés,
• SQL dump mentése az adatbázisból,
• fájlok felmásolása a végleges szerverre,
• SQL dump feltöltése az adatbázisba,
• konfigurációban (wp-config.php) átírom az adatbázishoz való konnekciókat.

Ez eddig minden esetben működött, de mi van akkor ha bajba kerülünk mert megszűnik a domainnév?

Egyik ügyfelemnél jártunk így. Felhúztuk neki a véglegesnek mondott szerverre az elkészült WordPress-t, amit átmenetileg egy IP címen értünk el. Ha lesz domain név, akkor majd ráérünk bekonfigolni akkor. Gondoltuk… aztán szóltak hogy nem megy, mert elköltözött a szerver, és az IP címe is megváltozott.

Szerencsére van megoldás erre is. Az admin felület két url mezőjét ki lehet vezetni a wp-config.php-ba. Így nem kell az adatbázist berhelni, hogy minden egyes mező értékét módosítsuk ami beégetve tartalmazza az url-t.

define('WP_HOME', 'http://uj-domain-neve.hu');
define('WP_SITEURL', 'http://uj-domain-neve.hu');

Szóval ha hasonló helyzetbe kerülsz nyugalom, van egyszerű megoldás!

Ha hasznos volt számodra ez a bejegyzés, nyomj lájkot!

A Google Chrome egy remek webböngésző. Gyors, egyszerű, és pont annyit tud, amennyit egy webböngészőnek tudnia kell. Használatát kényelmesebbé, és praktikusabbá tehetjük kiegészítők használatával. Számtalan hasonló bejegyzéssel találkoztam már, de azokban nem találtam olyan valóban hasznos kiegészítőket, melyeket használni is tudtam volna. Mivel nemrég még Firefox felhasználó voltam, sogáig nem találtam a helyem a Chrome-ban, de lassan ezt a böngészőt is belakom. Kis utánajárással megtaláltam az ideális kiegészítőket a napi munkához és böngészéshez.

Lássuk hát miket használok:

1. Chromium Delicious plugin

Delicious.com használóknak kötelező darab. Az aktuálus oldalt tudjuk Delicious fiókunkba elmenteni. Ebből létezik több változat is, viszont csak ez képes a gombra nyomás előtt kijelölt szöveget a Notes mezőbe betölteni.

2. Google Tasks

Ha használod a Gmail-t, biztosan felfedezted már a Teendők menüpontot. Nagyon hasznos funkciója ez a Gmail-nek, de eléggé el van dugva, így nem annyira kényelmes a használata. A kiegészítő lehetővé teszi, hogy az ikonjára kattintva bárhol járunk elérjük teendőinket egy kattintással.

3. Google Mail Checker Plus

Gmail-es e-mail fiókunkba érkező leveleket ellenőrzi beállított időközönként. Hangjelzéssel és animációval riaszt ha új levél érkezik.

4. Speed Dial

Bár a Chrome rendelkezik ilyen funkcióval, számomra mégsem nyújt elég testreszabhatóságot. A Speed Dial kicseréli kezdőlapunkat, melyre tetszés szerint elhelyezhetjük gyakran látogatott weboldalaink pillanatképét vagy ikonját, így egy kattintással bármikor elérhetjük őket.

5. PDF-/PowerPoint- Dokumentumnéző

Lehetővé teszi, hogy PDF vagy PowerPoint dokumentumokat a böngészőből tekintsünk meg, a Google Docs nézegetője segítségével. Nem kell megvárnod hogy elinduljon az Adobe Reader vagy a PowerPoint, azonnal és gyorsan megtekinthetsz dokumentumokat a böngésződ segítségével.

6. W3C (x)HTML Validator

Ez a kiegészítő szinte nélkülözhetetlen a napi munkához. Egy pillantás alatt meggyőződhetünk arról, hogy munkánk megfelel-e a W3C követelményeinek.

7. Firebug Lite

Olyan eszköz, mely nélkül szinte létezni sem lehet. Bonyolultabb feladatok megoldásához nem kérdés a szükségessége. Sajnos még csak a butított Lite verzió érhető el belőle.

8. Chrome Web Developer Tools

A Firefox-ból jól ismert Web Developer Toolbar funkcionalitása válik elérhetővé. Nagyban megkönnyíti a munkát.

9. MeasureIt!

A vonalzó. Segítségével pixelre pontosan megmérhetjük hogy mi mekkora, milyen távolságra helyezkedik el egy másik elemtől.

10. Eye Dropper

Pipetta kiegészítő, segítségével megtudhatjuk hogy egy adott pixel milyen színű, mi annak a színnek a hexa kódja, valamint milyen szomszédos színei vannak.

+1 Google Translate

Felismeri a meglátogatott weboldal nyelvét, majd felkínálja annak fordítását (On-The-Fly) a megadott nyelvre. Sokszor hasznos tud lenni.

++1 Mac Theme (AERO)

Egszerű letisztult, az Apple világát idéző Google Chrome téma, mely rendelkezik Windows Vista és 7 AERO támogatással.

Neked van kedvenc Google Chrome kiegészítőd?

Egy összetett weboldalnak szüksége van breadcrumbs, vagy más néven kenyérmorzsa navigációra. Segíti a felhasználókat, hogy visszataláljanak a kiindulási pontra, ezzel is növelve az oldal ergonómiáját.

Csináljunk egy egyszerű szerkezetű, kis méretű, és könnyen felhasználható breadcrumbs navigációt:

Lista szerkezetet fogunk alkalmazni, úgy hogy az aktuális oldalt nem linkeljük.

HTML kód

<ul id="crumbs">
	<li><a href="#">Főoldal</a></li>
	<li><a href="#">Szolgáltatások</a></li>
	<li><a href="#">Árvíztűrő szolgáltatás</a></li>
	<li>Leírás</li>
</ul>

Látszik, hogy a listánkból, csak az ul kap egy ID-it, a többi elemet ezen keresztül fogjuk megszólítani css-ből.

CSS kód

Először is kinullázzuk az ul és li elemeket.

ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
}

Ezután jöhet a #crumbs elemünk, aminek adunk egy border tulajdonságot, megadjuk a szélességét és a magasságát.

#crumbs {
	border: 1px solid #CCC;
	height: 30px;
	width: 580px;
}

Most formázzuk meg az ul-ben lévő li elemeket. Ugye ennek nem kell adni külön szelektort, mivel az ul-nek már adtunk, így azon keresztül megszólíthatjuk.

A float-olás azért kell, hogy egymás mellé kerüljenek a li elemek, megadjuk a magasságát, a sorközt (line-height), ami azért kell, hogy ne kelljen belső margót használnunk majd a linknél, mert akkor nem látszana a háttérkép. Viszont nem tudjuk teljesen elkerülni a belső margó használatát, a link nélküli li elem miatt. Ahhoz hogy bal oldalról távolságot tartsunk, kell adni neki egy padding-left tulajdonságot, így ez közvetve a linkre is igaz lesz.

#crumbs li {
	float: left;
	height: 20px;
	line-height: 30px;
	padding-left: 10px;
}

Most megformázzuk az a elemünket. Blokk szintű elemmé kell tenni, hogy az a teljes felületén kattintható legyen. Itt is megadjuk a magasságát, ami jelen esetben 30 pixel. Jobb oldalról kell adni neki egy belső margót, hogy a háttérképre ne lógjon rá. Végezetül megadjuk neki a háttérkép útvonalát, azt hogy ne ismételje, majd a jobb-közép igazítást.

#crumbs li a {
	display: block;
	height: 30px;
	padding-right: 10px;
	background: url(img/crumbs.png) no-repeat right center;
}

Ahhoz hogy felhasználóbarát dolgot hozzunk létre, adjunk a linknek színt, és aláhúzással jelöljük hogy az bizony kattintható…

#crumbs li a {
	text-decoration: underline;
	color: #666;
}

…majd csináljunk hover állapotot is neki, hogy a felhasználóval érzékeltessük: “ha rám kattintasz, valami történni fog”.

#crumbs li a:hover {
	color: #0C6;
}