Archive for október, 2008

Hover animáció jQuery-vel

2008 október 30 | besorolva: Javascript - 6 Comments

Szimpla hover effekt, némi animációval... egyszerűnek tűnik, nem? Valóban egyszerű, de nagyszerű - portfóliókban pl. kifejezetten jól mutathat.

Használata nagyon egyszerű, készítesz egy listát relatív pozícióval, a beillesztett képek abszolút pozíciót kapnak, a hover animációját pedig a jQuery plugin biztosítja.

jQuery hover tutorial

A HTML

Tehát egyszerű listába ágyazzuk a képeket:

1
2
3
4
<ul class="hover_block">
	<li><a href="/"><img src="your_image.gif" alt="alt" /> Text</a></li>
	<li><a href="/"><img src="your_image.gif" alt="alt" /> Text.</a></li>
</ul>

A CSS formázás

A lista elemek pozicionálása relatív, míg a képeké abszolút.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
ul.hover_block li{
			list-style:none;
			float:left;
			background: #fff;
			padding: 10px;
			width:300px; position: relative;
			margin-right: 20px; }
 
		ul.hover_block li a {
			display: block;
			position: relative;
			overflow: hidden;
			height: 150px;
			width: 268px;
			padding: 16px;
			color: #000;
			font: 1.6em/1.3 Helvetica, Arial, sans-serif;
		}
 
		ul.hover_block li a { text-decoration: none; }
 
		ul.hover_block li img {
			position: absolute;
			top: 0;
			left: 0;
			border: 0;
		}

A jQuery kód

1
2
3
4
5
6
7
$(function() {
	$('ul.hover_block li').hover(function(){
	$(this).find('img').animate({top:'182px'},{queue:false,duration:500});
}, function(){
	$(this).find('img').animate({top:'0px'},{queue:false,duration:500});
		});
	});

Az effekt időtartamát lecsökkentheted vagy növelheted a 'duration' opcióval - értelemszerűen nagyobb duration lassabb effektet eredményez.

Mire vársz? Töltsd le vagy nézd meg a demót !

A plugin szerzője Timothy van Sas.

Sweetcron

2008 október 28 | besorolva: Alkalmazások - 1 Comment

A különféle közösségi oldalak mindennapjaink részévé váltak, fotókat osztunk meg nap-mint-nap a Flickr-en, bejegyzéseket a Twitteren, linkeket a Del.ici.us-n, videókat a YouTube-on, stb...

Ezeket a szerteszét hagyott életjeleket foghatjuk össze automatikusan az ingyenes és nyílt forráskódú, jelenleg béta állapotú, Sweetcron segítségével.

Vannak hasonló szolgáltatások a neten (swurl, friendfeed) de ez saját domain alatt, saját szerveren mégis csak más… és egyszerűen egyedi kinézetre alakítható. (Csak megjegyzem, hogy a worpress-hez létezik hasonló funkciójú plugin)

sweetcron

A Sweetcron letöltése és az előkészületek

A Sweetcron.com oldalon egy email cím ellenében kapod meg a hozzáféréseket a letöltéshez. A letöltéseket a fejlesztő, Jon Yongfook Cockle Google Group-on hosztolja, és itt található egy wiki a szükséges információkkal, illetve a támogatói csoport fóruma is.

A telepítéshez szerver oldalon PHP5.x, illetve MySQL (4.1) szükséges, illetve a mod_rewrite funkció megléte. Célszerű már a telepítés előtt létrehozni egy adatbázist, melyet a rendszer majd használ.

A Sweetcron legfrissebb verzióját töltsd fel a web szervered azon mappájába, ahol szeretnéd a blogodat beélesíteni. Elhelyezheted a gyökérkönyvtárban, vagy almappában is, például /blog vagy /lifestream.

Megjegyzés: a letöltött állomány tartalmaz egy .htaccess fájlt, ami szükséges a Sweetcron hibátlan futásához. Néhány operációs rendszer szereti elrejteni ezt a fájlt, így ha nem látod abban a mappában, ahova feltöltötted, akkor lehet, hogy létre kell hoznod egy újat.

A Sweetcron telepítése

A telepítés még kicsit fapados – remélhetően ez a béta verziónak tudható be – némi saját kezű fájlszerkesztést igényel, ami bármilyen text-editor segítségével elvégezhető.
Először ellenőrizd, hogy a .htaccess fájlod a helyén van és a következő kód található benne:

Options +FollowSymLinks
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?/$1 [L]

Utána, nyisd meg a system/application/config mappát és nevezd át a „config-sample.php” fájlt „config.php” –ra. Írd át az URL-t az oldalad URL-jére. Utána nevezd át a „database-sample.php” –t „database.php” –ra és töltsd ki az adatbázis információkat (adatbázis neve, felhasználó név, jelszó).

Megjegyzés: ha almappába telepíted, akkor van két extra teendő:

1. A config.php –ban bizonyosodj meg arról, hogy a base_url a teljes elérési útja a Sweetcorn telepítési helyének, tehát legyen ott az almappa.
2. Nyisd meg a .htacces fájlt és írd át a RewriteBase / RewriteBase /almappa -ra

Nyisd meg az oldalad egy webböngészővel (www.domain/almappa/ )és már csak a néhány befejező lépés van hátra (az admin accountod beállítása, cím, stb.).

Konfigurálás

A sikeres telepítés után nincs is más hátra, mint felveni néhány feed-et. A Feeds tabon kattints az „Add new Feed” gombra a jobb oldalon:

sweetcron admin panel

Ha megvan a „valós” feed cím (pl.: http://feeds.feedburner.com/nettuts) akkor egyszerűen másold be és kattints az „Add This Feed” gombra. Azonban a Sweetcron automatikusan érzékeli a feedeket a legtöbb oldalon (pl.: http://nettuts.com/), így elegendő az url megadása is.

Az Options tab-on általános beállításokra van lehetőség, az oldal címe, és az admin email után az egy oldalon megjelenő bejegyzések számát befolyásolhatjuk.
A Cron Type már érdekesebb, két beállítás lehetséges itt: Pseudo-Cron és True Cron. Ezek arra szolgálnak, hogy a program mikor/hogyan ellenőrizze a feedjeidet új bejegyzések után kutatva. Pseudo Cron az alapértelmezett, mivel nem igényel szerverkonfigurálást. Ennél a beállításnál, ha hosszabb ez az idő, mint 30 perc, a következő látogatód fogja elvégezni a frissítést azzal, hogy betölti az oldalt. Az átlagos oldalbetöltésnél egy kicsit lassabb sebességet fog tapasztalni.
A True Cron megszűnteti ezt a problémát, mert a szerver maga végzi el ezt a feladatot. Ha tudod, hogy mit csinálsz, akkor beállíthatod a servered Cron Job –jait, kattints arra az opcióra és megkapod az URL-t, amit frissíteni kell.

A beállítások, és a feed-ek felvétele után az oldalon még nem látható semmi újdonság, de nem kell aggódni, a Cron job még nem indult el. Ha gyorsítani szeretnéd, menj vissza a beállítások panelra, kattints a True Cron –ra, másold ki az ott kapott URL –t és a böngésződben indítsd el. Ez lekérdezi az összes jelenlegi feed bejegyzésedet. Vagy (könnyebb megoldás), kattints az „Items” tabra, majd válaszd a „Fetch New Item Now” gombot.

Adminisztráció

A Sweetcron valójában egy blog motor, nem csupán feedek összegyűjtésére alkalmas, a Write tabra kattintva önálló postokat is írhatsz.

Egy másik fontos dolog, ha behúz egy új bejegyzést (mondjuk egy új Twitter Tweet –et), akkor azt az adatbázisban eltárolja. Ha ezt a Tweet –et később törlöd, vagy módosítod a Twitteren, akkor nem fog automatikusan módosulni az oldaladon.

Az admin panelen az Items tab-on található az összes eddig írt, vagy feedből beemelt bejegyzés, és itt lehet szerkeszteni, törölni, vagy szimplán megváltoztatni a publikáció állapotát.

A cikk Chris Coyier írása alapján készült, amely a Nettuts portálon jelent meg.

A Sweetcron testreszabásáról, egyedi megjelenítés kialakításáról folytatás következik.

jQuery Twitter plugin

2008 október 27 | besorolva: Javascript - No Comments

Egyszerűen megjelenítheted weboldaladon friss Twitter bejegyzéseidet ezzel a jQuery pluginnel. Rendkívül egyszerűen telepíthető és konfigurálható, mindössze kettő fájl beillesztésére van szükség, maga a plugin, illetve a megjelenést formázó css fájl.

A css fájl segítségével a megjelenés, színvilág egyszerűen formázható, természetesen akár a saját oldalad meglévő stíluslapját is használhatod.

JQuery plugin twitter bejegyzések megjelenítéséhez

Bevezetésként nézd meg a demó verziót: - jQuery plugin for Twitter v1.0
Ez egy valóban egyszerű és könnyen testreszabható módszer arra, hogy Twitter feed-et beágyazz egy weblapba.

Töltsd le a szükséges fájlokat(.zip) majd másold őket a weblapod könyvtárába. A head részbe az alábbi kódot kell beilleszteni:

<link rel="stylesheet" href="jquery.twitter.css" type="text/css" />
<script src="jquery.twitter.js" type="text/javascript"></script>

Ha jQuery-t nem használsz a weboldaladon, akkor még erre is szükség lesz:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

Következő lépésben hozz létre egy üres div-et, twitter id-vel, ahol a bejegyzéseket szeretnéd megjeleníteni:

<div id="twitter"></div>

Végezetül illeszd hozzá a beépülő modult a twitter divhez a következő jQuery kóddal:

$(document).ready(function() {
	$("#twitter").getTwitter({
		userName: "jquery",
		numTweets: 5,
		loaderText: "Loading tweets...",
		slideIn: true,
		showHeading: true,
		headingText: "Latest Tweets",
		showProfileLink: true
	});
});

A testreszabás önmagáért beszél:
userName - twitter felhasználóneved,
numTweets - a megjelenített bejegyzések száma,
loaderText - szöveg a betöltődés alatt,
slideIn - slide effekt ki, vagy be kapcsolása (true vagy false)
showHeading - fejléc igen, vagy nem
headingText - a fejléc szövege,
showProfileLink - a profilod linkjét mutassa, vagy nem.

A beépülő modul friss verzióját a szerző, Damien du Toit oldaláról lehet letölteni.

Notepad++ szépítése Textmate témákkal

2008 október 25 | besorolva: Alkalmazások, Hasznos tippek - 2 Comments

A kódkiemelés, kódszínezés egyedileg testreszabható a Notepad++ editorban, de a Textmate széles témaválasztékát felhasználva könnyen egyedivé, tetszetősebb megjelenésűvé alakítható, néhány egyszerű lépéssel.

1. Témákat a Textmate Theme Directory-ben tudsz válogatni..

2. Válaszd ki a neked tetsző témát, és töltsd le.

3. Nyisd meg a letöltött .tmTheme fájlt pl. Notepad++ programmal.

4. Jelöld ki az egészet (Ctrl+A) és másolás (Ctrl+C)

5. Nyisd meg böngészőben a Fabio Zendhi Nagao által fejlesztett theme converter oldalt.

6. Illeszd be a korábban kijelölt tartalmat a nagy szövegdobozba, majd kattints a download gombra, és mentsd el a fájlt.

7. Nyisd meg az alábbi könyvtárat a gépeden:
C:\Documents and Settings\%%USERNAME%%\Application Data\Notepad++\

8. Itt találod az eredeti téma fájlt (stylers.xml), nevezd át pl. original.stylers.xml-re (biztos, ami biztos).

9. Másold ide a korábban letöltött xml fájlt.

10. Nevezd át stylers.xml -re.

11. Indítsd újra a Notepad++ programot.

12. És van egy szép új felületű Notepad++ programod!

Notepad template

* Köszönet Fabio-nak a konvertáló eszköz megírásáért!

Eredeti cikk: joyboner.com

Dropbox online háttértár

2008 október 6 | besorolva: Hasznos tippek, Napi rutin - No Comments

Már használható a Dropbox - online backup, szinkronizáló, fájl-megosztó site. A többi hasonló szolgáltatástól a saját gépre telepíthető szinkronizáló kliens különbözteti meg.

A multiplatform (Windows, Mac és Linux) szolgáltatás ingyenes alapcsomagja 2 GB-nyi tárhelyet biztosít, de 10 dollárért havonta, vagy 100 dollárért évente 50 gigabájtot is kaphatunk.

Dropbox online háttértár

A 14,1MB méretű kliens letöltése és telepítése után egy külön könyvtárba húzott fájlokat szinkronizálja és feltölti a saját tárhelyre.

Mondj nemet az IE 6-ra!

2008 október 1 | besorolva: Napi rutin - No Comments

Nem tartom célnak az Internet Explorer száműzését a számítógépekről, de a 6-os, illetve itt-ott fellelhető korábbi verziókat ideje lenne elfelejteni. A modern böngészők lényeges tulajdonsága, hogy legalább figyelmezteti használóját, ha ideje frissíteni. A biztonsági szempontok, a felhasználói élmény, valamint hozzáadott szolgáltatások is a modernebb változatok mellett szólnak.

Az általam kezelt oldalak statisztikái alapján a 6-os verziót a látogatók legalább 30-35%-a használja, ami még mindig nem hagyható figyelmen kívül. Elsősorban nekünk, fejlesztőknek kell lépéseket tennünk, hogy finom és diszkrét módszerekkel ráébresszük a felhasználókat a frissítés előnyeire.

A SaveTheDevelopers.org kampány neve találó, "kíméld a fejlesztőket", a sitebuilder munka során valóban a legtöbb extra munkát a ie6-ra töténő optimalizálás jelenti.

A script egy kis diszkrét pop-up képet jelenít meg pár másodpercre a régi böngészőt használó látogatónak, amelyre kattintva a savethedevelopers oldalán kap némi iránymutatást, bár ez szerintem ennél bőségesebb is lehetne.

Helyezd el az alábbi kódot (2kb) a weblapjaid fejlécében:

1
<script src="http://www.savethedevelopers.org/say.no.to.ie.6.js"></script>

A kód szabadon letölthető, módosítható, tehát nem kell külső fájlt linkelni, illetve én pl. a megjelenő kis képet is átalakítottam:

Adsense integrálás FeedBurnerben

2008 október 1 | besorolva: Napi rutin - No Comments

A Google még 2007 júniusában felvásárolta a FeedBurner-t, de egy darabig nagy változások nem történtek, bár menet közben a pro verzió is ingyenessé vált.

A FeedBurner már eddig is tudott integrálni reklámot az RSS feedekbe, de most lehetővé vált, hogy Adsense hirdetésekkel tegyünk szert némi plusz bevételre hírcsatornánkon keresztül. Ehhez csupán rendelkeznünk kell egy FeedBurner és egy Google Accounttal, utóbbihoz természetesen hozzá kell adni az Adsense fiókot.

Dropbox online háttértár

Az első lépés, hogy az Adsens fiókba való belépés után a főoldalon az "Adsense feedekhez - Indulj el" szövegre kattintunk.
A megjelenő lap alján keresd meg a "Tekintse meg útmutatónkat a fiókok átköltöztetéséről" szöveget, és ismét kattintsunk.
A következő oldal tartalmából kiderül számunkra, hogy az egyetlen út a megoldáshoz a Google Account-on át vezet, és ha kitöltjük a "please use this contact form" részt, akkor ők ezt el is végzik helyettünk.
A két mező közül a felsőbe kell írni a FeedBurner accountunkat, az alsóba pedig a Google Account e-mail címe kell. A Submit gombra való kattintás után kapunk egy megerősítő (verify) e-mailt, amivel igazoljuk, hogy mi akarjuk igénybe venni ezt a szolgáltatást és nem más.
Készen is vagyunk.

A közeljövőben Google account-al is beléphetünk be a FeedBurner oldalunkra, illetve új fiókot Google hozzáféréssel lehet majd regisztrálni. A korábbi felhasználók a hozzáférésük adatait meglévő (vagy új) Google hozzáférésükbe importálhatják- így semmilyen adat nem veszik el.

A cikk vendég-szerzője: Opauszki Tibor - tlsoft.hu