Internetes kereskedelem szempontjából eddig elsősorban a termékek egyesével történő ajánlása, akciós ajánlatok, illetve a lájkolás szerepelt a repertoárban, (plusz a Static FBML) mely tehnikák természetesen megfelelően használva jól támogatják az értékesítést, és ügyes közösségépítő ötletekkel már komoly felhasználótábort lehet elérni.

Termékek értékesítését a facebook oldalon segítő újabb eszköz a ShopTab nevű alkalmazás, amellyel a webáruház teljes kínálatát a facebook oldalra vihetjük, kategorizálva, és nagyon könnyen, egyszerűen. A shoptab tulajdonképpen egy új tab-ot ad hozzá a facebook oldalhoz, shop elnevezéssel, amelyen listázásra kerülnek a termékek. Az app fapadosan egyszerű, nem is igazi e-commerce megoldás, inkább afféle katalógus (de halkan megsúgom, folyik a fejlesztése), és akár az árösszehasonlító oldalak esetében, itt is maga a tranzakció a saját webshopban történik.

ShopTab alkalmazást Jay Feitlinger és Bret Giles (ShopTab LLC,Scottsdale, Arizona) indította el azzal a céllal, hogy segítse a kis-és közepes méretű vállalkozásokat shop létrehozásában a facebook platformján.

A regisztrációt követően 7 napos tesztidőszak áll rendelkezésre, miután eldönthető, a három jelenleg elérhető csomag közül melyiket válasszuk. A csomagok között csak a feltölthető termékek számában van különbség, 500, 1000, és 3000 termék importálására van lehetőség, mindez rendre havi 10, 15 illetve 20 usd díjért. Igen, importálásra is van lehetőség a kézi termékbevitel mellett, megadott sablon alapján táblázatból, vagy adatbázisból generált csv fájl segítségével. Az importálás lehetősége nagyban megkönnyíti a nagyobb mennyiségű adat feltöltését, és naprakészen tartását. A termékeket kategóriák szerint, illetve ártartományok szerinti bontásba csoportosítja a rendszer, ez utóbbi automatikusan történik.

Jelenleg elérhető pénznemek az amerikai és kanadai dollár, euro, és a font, de a fejlesztő csapat kérésünkre, ígéretük szerint rövidesen a forint pénznemet is felveszi a sorba.
Testreszabási lehetőség jelenleg az egyedi fejléc beillesztésében merül ki

A shoptab tehát nem egy önálló e-kereskedelmi platform, de kis költséggel, megfelelő kiegészítőként használható meglévő webáruház mellé. Élesben megtekinthető és kipróbálható a Kelly Kiadó facebook oldalán a shop tab-on.

A hazai laza twitterezést @angelday (plastik.hu), @doransky (doransky.hu) és @hh (webisztan.blog.hu) keverte fel, a Nagy Twitter Verseny elindításával.
Változatos eszközökkel gyűjtik a srácok a követőket, bár az első hullám után némi lassulás mutatkozik.

Tulajdonképpen a bevezető után a lényeg: bár a twitter sok tekintetben kötött formájú rendszer, ajánlok pár weboldalt, amely segítségével egyedi hátterek készíthetőek, így otthonosabban érezheted magad a saját kis mikroblogod felületén.
A hátterek beillesztése a belépés után a settings/design pont alatt érhető el, katt a 'Change background image' feliratra, majd "Upload your image". A háttérkép ne legyen nagyobb, mint 800kb.

1. Twtbg.me

2. TwitBacks.com

3. MyTweetSpace.com

4. PrettyTweet.com

5. Artweet.com

6. FreeTwitterDesigner.com

Hajrá, tegyétek egyedivé a twitter oldalaitokat!
A válogatás eredeti forrása SingleFunction.

A lightbox plugin használata:

Az oldal head részébe az alábbi kódot kell beilleszteni:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>

Szükség van még egy css fájlra is:

<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />

Ennek tartalmát természetesen az oldal eredeti stíluslapjába is bemásolhatod.

A html:

A plugin használatához nem kell átírnod a kódod, a jQuery rugalmas selectorával bármilyen képhalmazt - akár többet is - kijelölhetsz. Lényeg hogy a kódod „váza” ilyesféle legyen:

<a href="image1.jpg" title="képfelirat"><img src="thumb_image1.jpg" alt="" /></a>

A script a képfeliratokat az 'a' tag title attributumának tartalmából veszi át, fotóalbum esetén pedig azt is kiírja, hány kép található az adott válogatásban.

A jQuery lightBox plugin aktiválása:

Ezek után hívd meg jQuery lightBox függvényt, válaszd ki a hivatkozásokat, amelyre alkalmazni szeretnéd. Mutatok néhány példát:

<script type="text/javascript">
$(function() {
	// Első példa...
	$('a[@rel*=lightbox]').lightBox(); // Minden link, amely rel="lightbox" attribútummal rendelkezik
	// Vagy ez...
	$('#gallery a').lightBox(); // Minden link, amely gallery ID-jű elemben van.
	// Itt egy másik...
	$('a.lightbox').lightBox(); // Minden link, amely lightbox class-al rendelkezik
	// Esetleg ez...
	$('a').lightBox(); // Minden link az oldalon
	// ... A lehetőség száma rengeteg. Használd kreatívitásod vagy a fenti példák bármelyikét.
});
</script>

Az elérhető konfigurációs beállítások:

A plugin néhány beállítási lehetősége a meghíváskor testreszabható, a konfigurációs értékeket a függvény paramétereként egy hash-ben adhatod át, az alábbiak szerint:

* overlayBgColor - A színátfedés (overlay) színe, alapértelmezetten #000 fekete.
* overlayOpacity - A színátfedés átlátszóságának mértéke, alapból 0.8.
* imageLoading - Animáció a betöltődés alatt. images/lightbox-ico-loading.gif az alapértelmezett.
* imageBtnClose - Bezárás gomb. images/lightbox-btn-close.gif az alapértelmezett.
* imageBtnPrev - "Előző" gomb. images/lightbox-btn-prev.gif az alapértelmezett.
* imageBtnNext - "Következő" gomb. images/lightbox-btn-next.gif az alapértelmezett.
* containerBorderSize - A képet tartalmazó box padding értéke, 10 az alapértelmezett.
* containerResizeSpeed - A képet tartalmazó box átméretezésének időtartama, 400 az alapértelmezett.
* txtImage - Az "Image" felirat.
* txtOf - Az "of" felirat.
* imageBlank - A blank image, amely az Internet Explorer hover hack-hez kell, images/lightbox-blank.gif az alapértelmezett.
* keyToClose - Bezárás gyorsbillentyű, a c (close) az alapértelmezett.
* keyToPrev - Előző kép gyorsbillentyű, p (previous) az alapértelmezett.
* keyToNext - Következő kép gyorsbillentyű, az n (next) az alapértelmezett.

Példa a jQuery lightbox plugin konfigurálására:

<script type="text/javascript">
$(function() {
   $('a[@rel*=lightbox]').lightBox({
	overlayBgColor: '#FFF',
	overlayOpacity: 0.6,
	imageLoading: 'http://example.com/images/loading.gif',
	imageBtnClose: 'http://example.com/images/close.gif',
	imageBtnPrev: 'http://example.com/images/prev.gif',
	imageBtnNext: 'http://example.com/images/next.gif',
	containerResizeSpeed: 350,
	txtImage: 'Imagem',
	txtOf: 'de'
   });
});
</script>

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

Több jQuery plugin kombinálása:

Csoxa kérésére megmutatom, hogy lehet az előbb bemutatott lightbox, és az animált hoover plugint együtt használni:

A header-be a szokásos módon helyezd el a scripteket:

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.lightbox-0.5.css" media="screen" />

Aktiváld egymás után a két funkciót:

<script type="text/javascript">
		$(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});
			});
		});
		</script>
 
		 <script type="text/javascript">
    $(function() {
        $('#gallery a').lightBox({fixedNavigation:true});
    });
    </script>

A html kódban a korábbi hivatkozásokat kell annyiban átalakítani, hogy a nagy méretű képre linkelsz, illetve ha szeretnél feliratot, akkor feltétlenül szükség lesz a title elemre.

<ul class="hover_block" id="gallery">
 <li><a href="01_big.jpg" title="Ez a kép felirata">
  <img src="01.jpg" alt="bluedesign blog" /> Ez a szöveg a kép mögötti tartalom,  kattintható hivatkozással.</a>
 </li>
</ul>

Ennyi, a jQuery megoldásokat könnyen lehet kombinálni. A megjelenést a stíluslappal rugalmasan tudod variálni, sok sikert hozzá.

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

A mellékelt screenshot-ot egy ismerősöm készítette, van humorérzéke...

Bővebben:

1. Az elsődleges ablak a tartalomnak van fenntartva; a másodlagos interakcióknak nem kell helyet biztosítani az oldalon — a számukra szükséges hely igény szerint létrehozható és eltávolítható.
2. Mivel a felhasználó látja a kiinduló ablakot, jobban képes koncentrálni, és könnyebben visszatérhet az előző feladathoz.

A jQuery pageSlide plugin alkalmazása:

Az oldalad header részébe illeszd be a jQuery-t, és a pageSlide plugint:

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="js/jquery.pageslide-0.2.js"></script>

Javascript

A plugin aktiválása során definiálható, hogy melyik elem aktiválja a működést, illetve itt állítható be a másodlagos tartalom szélessége is.

1
2
3
4
5
6
7

    <script type="text/javascript">
  $(document).ready(function() {
      $('a').pageSlide({
          width: "350px"
      });
  });
  </script>

HTML

A másodlagos tartalmat egy külön html fájlban tárold (a demóban secondary_page.html), de csak magát a tartalmat, mivel a plugin működése lépésekor az itt elhelyezett kód a fő oldal szerves részeként jelenik meg.

A html kódban egy hivatkozásra lesz szükség, amelyre kattintva működésbe lép a plugin:

<a href="secondary_page.html" rel="pageslide">Kattintásra megjelenik a másodlagos ablak</a>

A másodlagos ablak eltűnik, ha a felhasználó az eredeti oldalon bárhol kattint.

Az eredeti cikk a Halobrite.com oldalon érhető el, szerzője Scott Robbin.

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

Miért fókuszáljunk a felhasználó oldali teljesítményre?

A felhasználói oldal (azaz a HTML, CSS, JavaScript, és a képek) a weboldalad legjobban hozzáférhető része. Ha megosztott tárhelyed van, akkor lehetséges, hogy nem rendelkezel root (vagy ahhoz hasonló) hozzáféréssel a szerverhez és ezért nem tudod módosítani a szerver beállításokat. És ha még rendelkezel is a megfelelő jogokkal, a web szerver és adatbázis kezeléshez speciális tudás szükséges, hogy közvetlen eredményeket érhess el.

Emellett olcsó is. A legtöbb felhasználó oldali optimalizálást ingyen is el lehet végezni, és csak az időt kell rászánni. Nem csak hogy elenyésző a költsége, de így hasznosíthatod a legjobban az idődet, mivel a felhasználó oldali teljesítmény igen nagy részben felelős az oldal válaszidejéért.
Ezt észben tartva itt van néhány egyszerű módja, hogy hogyan növelhetjük az oldalunk gyorsaságát.

1. Nézd át a weboldalaidat, hogy megtaláld a bűnösöket.

Jó szolgálatot tehet, ha átnézed az oldaladat, hogy megtaláld azokat az elemeket, amelyekre nincs szükséged, és amelyeket optimalizálni lehet. A weboldal átnézéséhez általában alkalmazunk valamilyen eszközt, mint például a Firebug, amelynek segítségével meghatározhatjuk, hogy milyen elemeket (pl.: képek, CSS fájlok, HTML dokumentumok, és JavaScript fájlok) kér le a felhasználó, mennyi ideig tart azokat betölteni, és milyen nagyok. Általános ökölszabály, hogy a lehető legkisebb méretűek legyenek az oldal elemek (a 25KB alatti méret megfelelő cél).

A Firebug’s Net tabulátor (lásd fent) segít megkeresni azokat a nagy fájlokat, amelyek lelassítják az oldalt. A fenti példán láthatod, hogy részletezve felsorol minden olyan elemet, ami a weboldal átalakításához szükséges: mi az, hol található, mekkora, és meddig tart betölteni.

A neten több olyan eszköz is van, ami segíthet az oldalad átvizsgálásában – olvasd el ezt a listát hogy többet is megismerhess.

2. A megfelelő formátumban mentsd el a képeket, hogy minél kisebb legyen a fájl mérete.

A képek használatánál fontos eldönteni, hogy melyik képnek milyen az optimális formátuma. A három általánosan elterjedt webes képformátum a következő: JPEG, GIF, és PNG. Általában JPEG-et kell használnod a lágy tónusú és színvilágú valószerű fotóknál. Az éles színű képek esetében használj GIF vagy PNG formátumot (például grafikonok és logók esetében).

A GIF és a PNG hasonlóak, de a PNG jellemzően kisebb fájlméretet eredményez. Olvasd el a Coding Horror cikkét a PNG használatának mérlegeléséről a GIF helyett.

3. Kicsinyítsd le a CSS és a JavaScript fájlokat, hogy nyerj pár byte-t.

A kicsinyítés a felesleges karakterek (például a Tabok, a szóközök, a forráskód kommentek) eltávolításának folyamata a forráskódból, hogy ezáltal csökkenjen a fájl mérete. Például:
Ezt a CSS részt:

.some-class {
  color: #ffffff;
  line-height: 20px;
  font-size: 9px;
}

át lehet alakítani ilyenné:

.some-class{color:#fff;line-height:20px;font-size:9px;}

…és tökéletesen fog működni.

És ne aggódj – nem kell majd manuálisan újraformáznod a kódodat. Tengernyi olyan ingyenes eszköz áll rendelkezésre, melyeknek segítségével lekicsinyítheted a CSS és a JavaScript fájlokat. A CSS-hez egy csomó könnyen használható eszközt találsz ezen a CSS optimalizációs eszköz listán.

A JavaScript esetében népszerű minimalizációs lehetőség a JSMIN, YUI Compressor, és a JavaScript Code Improver. Egy jó kicsinyítő alkalmazás lehetőséget biztosít arra, hogy a fejlesztés során a visszaállítsa a minimalizációt. Ehelyett használhatsz egy böngészőben működő eszközt is, mint amilyen a Firebug, hogy megnézd a kódod formázott verzióját.

4. Kombináld a CSS és a JavaScript fájlokat és ezzel csökkentsd a HTTP kéréseket

Minden olyan elemre, amire a weboldal rendereléséhez szükség van, egy arra vonatkozó HTTP kérést kell küldeni a szerver felé. Tehát ha öt CSS fájlod van egy oldalon, akkor minimum öt különálló HTTP GET kérésed kell, hogy legyen arra az adott weboldalra vonatkozóan. A fájlok összevonásával csökkented a fent említett, a weblap létrehozásához szükséges HTTP kérések számát.

Olvasd el Niels Leenheer cikkét arról, hogyan kombináljuk a CSS és a JS fájlokat a PHP felhasználásával (ezt a módszert más nyelvek esetében is alkalmazhatjuk). A SitePoint egy hasonló módszert említ, a CSS és a JavaScript becsomagolását; ezzel képesek voltak 1.6 másodpercet lefaragni a válaszidőből, és ezzel 76%-kal csökkentették a válaszidőt az eredeti időtartamhoz képest.

Egyébként pedig összevonhatod a CSS és JavaScript fájlaidat a jó öreg copy-paste módszerrel is (varázslatosan működik).

5. CSS sprite használata a HTTP kérések számának csökkentésére

A CSS Sprite több kisebb kép egy nagyobb képpé való kombinálása. A megfelelő kép megjelenítéséhez használd a background-position CSS tulajdonságot. Ha így kombinálsz több képet, az lecsökkenti a HTTP kérések számát.

Például a Digg esetében (lásd a fenti képen) több különálló, a felhasználók közötti interakcióra szolgáló ikon is látható. A szerver kérések lecsökkentésére a Digg több ikont is összevont egy nagy képpé és aztán CSS-t használt a képek megfelelő pozícionálásához.

Ezt manuálisan és megcsinálhatod, de van erre egy webes eszköz is a CSS Sprite Generator, ami lehetővé teszi számodra a képek feltöltését, amelyeket aztán a program kombinál egy CSS sprite-ba, majd ezután megadja a CSS kódsort (a background-position tulajdonságokat) a képek lerendereléséhez.

6.Használj szerver oldali tömörítést a fájlméretek csökkentéséhez

Ez trükkös lehet, ha megosztott tárhelyed van, és az alapjáraton nem engedi a szerver oldali tömörítést, de ahhoz, hogy teljes mértékben optimalizáld az elemek megjelenítését, el kell végezned a tömörítést. Az oldal elemek tömörítése olyan, mintha egy nagy fájlt zippelnél, hogy aztán elküldd emailen: Te (web szerver) bezippelsz egy nagy családi képet (az oldal elemet) és elküldöd emailen a barátodnak (a böngészőnek) – ő aztán kicsomagolja a ZIP fájlodat és megnézi a képet. Népszerű tömörítési módszerek a Deflate és a gzip.

Ha a saját külön szervereden dolgozol vagy van VPS-ed – mázlid van – és a tömörítés nincs beállítva, ez esetben egy tömörítő alkalmazás telepítése nagyon egyszerű. Olvasd el ezt a leírást arról, hogyan installáljuk a mod_gzip-et az Apache esetében.

7. Kerüld az inline CSS és JavaScript használatát

Alaphelyzetben a külső CSS és JavaScript fájlokat a felhasználó böngészőjének cache-e dolgozza fel. Amikor a felhasználó továbblép a kiinduló oldalról, addigra már nála tárolódik az összes stíluslapod és JavaScript fájlod, cserébe pedig nem kell a stílusokat és a scripteket megint letölteniük. Ha túl sok CSS és JavaScript fájlt használsz a HTML dokumentumodban, akkor nem tudod kihasználni a böngésző caching tulajdonságait.

8. Tehermentesítsd a szervered

Az oldal elemeid egy részének feltöltése egy harmadik web szolgáltatóhoz nagyban megkönnyíti a szervered munkáját. Az oldal elemek más szolgáltatásra történő feltöltésének lényege az, hogy ezáltal megosztod az oldal kiszolgálásának feladatát egy másik szerverrel.

Használhatod a Feedburner-t az RSS betöltések kezelésére, a Flickr-t a képek kezelésére (légy tisztában annak jelentőségével, hogy ezen keresztül töltöd le a képeidet), és a Google AJAX Libraries API-t a népszerű JavaScript keretrendszerek/ könyvtárak kiszolgálásához, mint amilyen a MooTools, a jQuery, és a Dojo.

Például a Six Revisions oldalán az Amazon’s Simple Storage Service –t (az Amazon Egyszerűsített Tároló Szolgáltatását, röviden Amazon S3 ) használja a szerző az itt látható képek kezelésére, valamint a Feedburner-t az RSS betöltéseknél. Ennek köszönhetően a saját szervernek csak a HTML, a CSS, és a CSS képek háttereit kell szolgáltatnia. Ezek a megoldások nem csak költség hatékonyak, de drasztikusan lecsökkentik a weblap válaszidejét is.

9. Használd a Cuzillion-t egy optimális web lap szerkezet megtervezéséhez

A Cuzillion Steve Souders ( felhasználói felület mérnök a Google-nél, miután otthagyta a Yahoo!-t ahol pedig a teljesítményért felelős részleg vezetője volt) által megalkotott webes alkalmazás, amely lehetővé teszi, hogy különböző weboldal konfigurációkkal kísérletezz, hogy megtalálhasd az optimális szerkezetet. Ha már megvan a weblapod design-ja, akkor a Cuzillion-nal szimulálhatod a weblapod szerkezetét és aztán csűrheted csavarhatod, hogy jobb teljesítményt érhess el a dolgok átrendezésével.

Nézd meg az InsideRIA video interjúját Steve Sounders-szel a Cuzillion működéséről és a Telepítési leírást, amivel percek alatt elkezdheted a munkát.

10. Figyeld a web szerver teljesítményt és rendszeresen készíts értékelést.

A web szerver adja az agyat a működéshez – ez felel a HTTP kérések/válaszok fogadásáért/elküldéséért a megfelelő embereknek valamint ez szolgáltatja a weblapod elemeit. Ha a web szervered nem teljesít megfelelően, akkor nem tudod kihozni a maximumot az optimalizálásból.

Elengedhetetlen, hogy folyamatosan ellenőrizd a web szervered teljesítmény mutatóit. Ha root-hoz hasonló hozzáférésed van és tudsz telepíteni dolgokat a szerverre, akkor nézd meg az ab-ot, ami egy Apache web szerver teljesítmény-értékelő eszköz vagy a Httperf-t az IBM-től.

Ha nincs hozzáférésed a szerverhez (vagy gőzöd sincs, hogy miről beszélek) akkor érdemes egy távoli irányító eszközt használnod, mint például a Fiddler vagy a HTTPWatch, és ezekkel elemezni és figyelni a HTTP forgalmat. Mindkettő kijelöli neked azokat a problémás részeket, amelyekkel foglalkozni kellene.

A nagyobb változtatások előtt és után elvégzett értékeléseken kiválóan látható a változtatások hatása. Ha pedig a szervered nem tudja a weblapod által generált forgalmat lebonyolítani, akkor itt az ideje egy frissítésnek vagy egy szerver migrációnak.

Erről a témáról írt nemrég Bagi Zoli is: Css és javascript optimalizálás YSlow módra

A cikket Jacob Gube írása alapján Mészáros Dóra fordította.

A wordpress költöztetés lépései:

1. Az adatbázis áthelyeze

Lépj be a phpmyadmin-ba, válaszd ki a wordpress adatbázisát, és katt az export fülre.

• Bizonyosodj meg róla, hogy export mezőben minden szükséges tábla ki van jelölve.
• A Struktúra mezőben válaszd ki az "Add DROP TABLE / DROP VIEW" beállítást
• Jelöld be a "Fájlnév megadása" lehetőséget
• Kattints a "Végrehajt" gombra, és mentsd az SQL fájlt.

2. A korábbi url-ek cseréje

Az url-ek cseréjéhez nyisd meg az SQL fájlt egy text-editorral (pl. Notepad++), és a csere (find and replace) funkció segítségével keresd meg, és cseréld ki az összes korábbi url címet (pl."http://localhost:8888/blog" címet erre: "http://www.ujdomain.hu").

3. Adatbázis import

Az új tárhelyen hozz létre egy adatbázist és felhasználót, majd a PhpMyadmin felületen válaszd ki a megfelelő adatbázist, menj az import fülre. A tallózás segítségével keresd meg a korábban mentett SQL fájlt, majd kattints a "Végrehajt" gombra.

4. A fájlok másolása

Ez feltehetően nagy nehézséget nem okoz, ügyelj arra, hogy a némely szerveren nem látható .htaccess fájl is átkerüljön.

5. A wp-config.php fájl szerkesztése:

Nyisd meg editorral a wp-config.php fájlt, és cseréld le az adatbázis beállításokat az új tárhelynek megfelelően.

Ennyi, ha mindent jól csináltál, a rendszer gond nélkül fog működni az új domain alatt.

Megjegyzés: Ha új szerverre költözöl, de a domain név ugyanaz marad, akkor az adatbázisban nem kell cserélni semmit, csupán a wp-config.php fájlban kell az adatbázis információkat szerkeszteni.

A cikk részben saját tapasztalatok alapján született, de a WebDesigner Wall oldalon megjelent írás alapján készült.

Alkalmazása rendkívül egyszerű, az oldalad header részébe illeszd be a jQuery-t, és az s3Slider plugint:

 <script src="js/jquery.js" type="text/javascript"></script>
<script src="js/s3Slider.js" type="text/javascript"></script>

Magyarázat

A html kód felépítése: egy "slider" div-en belül az elemeket listában helyezd el, a lista elem tartalmazza a képet, illetve egy "span" tag-ben a kísérőszöveget.

Ha beállítasz egy fő div id-t (pl. s3slider) mint itt, akkor a galéria (slide show) többi osztályánál és id-jénél annak a névnek kell szerepelnie. Például, ha a fő div-ednek adsz egy id-t #te_neved néven, akkor a belső id-nek #te_nevedContent -nek kell lennie és az osztálynévnek .te_nevedImage-nek, mint ahogy azt a példa is mutatja.

A másik fontos dolog, hogy minden .te_nevedImage elemben kell lennie span-nek, valamint a lista elem végén szükség van egy .te_nevedImage osztályú div-re, különben az utolsó kép nem jelenik meg.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13

 <div id="s3slider">
   <ul id="s3sliderContent">
      <li class="s3sliderImage">
          <img src="#" />
          <span>Your text comes here</span>
      </li>
      <li class="s3sliderImage">
          <img src="#" />
          <span>Your text comes here</span>
      </li>
      <div class="clear s3sliderImage"></div>
   </ul>
</div>

CSS

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

 #s3slider {
   width: 400px; /* important to be same as image width */
   height: 300px; /* important to be same as image height */
   position: relative; /* important */
   overflow: hidden; /* important */
}
 
#s3sliderContent {
   width: 400px; /* important to be same as image width or wider */
   position: absolute; /* important */
   top: 0; /* important */
   margin-left: 0; /* important */
}
 
.s3sliderImage {
   float: left; /* important */
   position: relative; /* important */
   display: none; /* important */
}
 
.s3sliderImage span {
   position: absolute; /* important */
   left: 0;
   font: 10px/15px Arial, Helvetica, sans-serif;
   padding: 10px 13px;
   width: 374px;
   background-color: #000;
   filter: alpha(opacity=70); /* here you can set the opacity of box with text */
   -moz-opacity: 0.7; /* here you can set the opacity of box with text */
   -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
   opacity: 0.7; /* here you can set the opacity of box with text */
   color: #fff;
   display: none; /* important */
   top: 0;
 
   /*
       if you put
       top: 0; -> the box with text will be shown at the top of the image
       if you put
       bottom: 0; -> the box with text will be shown at the bottom of the image
   */
}
 
.clear {
   clear: both;
}

A script aktiválása során két paramétert kell beállítani, a div nevét, amelyen belül az effekt működjön, illetve a képváltás idejét:

Javascript

1
2
3
4
5

 $(document).ready(function() {
   $('#s3slider').s3Slider({
      timeOut: 4000
   });
});

Böngésző kompatibilitás

A plugin tesztelve az alábbi, elterjedtebb böngésző verziókon:

• Firefox 2.x (Win)
• Firefox 3.0.3 (Win/Linux/Mac)
• Opera 9.6 (Win/Linux)
• Safari 3.0.3 (Win/Mac)
• Internet Explorer 6 (Win)
• Internet Explorer 7 (Win)
• Google Chrome (Win)

A plugin szerzője: Boban Karišik

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

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.

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.

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)

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:

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.