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 !

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.

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!

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

Eredeti cikk: joyboner.com

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.

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.