Folytatva térképes minisorozatunkat, megnézzük, hogyan tudunk címeket és koordinátákat „konvertálni” egymásba, valamint azt is, miként határozhatjuk meg két pont között a legrövidebb távolságot.

Legutóbbi leckénkben megnéztük, hogy miként illeszthetünk az oldalainkba testre szabott Google Térképet. A folytatásban megpróbálunk saját bójákat és infobuborékokat létrehozni, és tovább okosítjuk helymeghatározónkat.

Egy HTML5 újdonsággal folytatjuk a websulit, a helymeghatározással. Ennek apropóján pedig megnézzük, hogyan tudjuk honlapjainkon munkára fogni a Google Térképek szolgáltatást.

Az elmúlt hónapokban sok érdekes hír látott napvilágot HTML5-ügyben, amiből akár azt is hihetnénk, hogy hamarosan itt a „webfejlesztők Kánaánja”, ám egyelőre inkább csak azt mondhatjuk, hogy látszik már a fény a távolban, de az út vége még nagyon messze van.

A kaszkád stíluslapok kapcsán a hangsúly eddig főleg a deklarációs blokkokon belül található elemeken volt. Sokkal kevesebbet foglalkoztunk az úgynevezett jelölőkkel, pedig ezek átgondolt használatával jelentős mértékben leegyszerűsíthetjük oldalaink HTML-kódját.

Manapság, amikor szinte ahány látogató, annyi képernyőfelbontás, akkor igen nehéz megtalálni az optimális elrendezést, ami mindenkinek megfelel.

Időnként előfordul, hogy oldalunkhoz JavaScript segítségével különféle elemeket adunk hozzá. Az új tartalomdarabkákat ez alkalommal stíluselemek használatával hozzuk létre.

Legutóbb elkészítettük oldalaink „nyomtatható változatát”. Most egy kis javascriptes segítséggel hivatkozásainkból lábjegyzeteket hozunk létre.

A weboldalak készítésekor a képernyőt tekintjük elsődleges megjelenítő felületnek. Ugyanakkor a felhasználók rendszeres kívánsága, hogy egyes oldalaknak legyen nyomtatható változata is.

Új felhasználói felület, új illusztrációs, fotószerkesztő és webes funkciók, valamint új név - röviden így lehetne összefoglalni a Xara új termékét, a Xara Designer Pro 6-ot.

A 23. leckében lépésről lépésre felépítettünk egy képgalériát, ebben a fotók akkor jelentek meg, amikor az indexkép fölé vittük az egeret. Most ezt tesszük még látványosabbá CSS3-as animációkkal.

Mi a közös vonása a Fehér Ház, a Firefox, az MTV és az Ubuntu honlapjának? Az, hogy megjelenésük eszközéül mindannyian ugyanazt az ingyenes, nyílt forráskódú tartalomkezelő és -fejlesztő rendszert választották. Ez pedig a Drupal.

Legutóbb néhány szép példát megtekintve megkezdtük az ismerkedést a böngészők által egyelőre eltérő mértékben - és sajnos eltérő módon - támogatott CSS3 újdonságaival. Ez alkalommal nekikezdünk „CSS3-asítani” konferenciánk honlapját, megnézzük, hogyan tehetnénk a munkánkat (még) egyszerűbbé a készülő szabvány lehetőségeinek kihasználásával.

Kissé rendhagyó leckénk első felében hivatalosan is búcsút veszünk a Microsoft népszerű, ám teljesen elavult böngészőjétől, az Internet Explorer 6-tól, majd elkezdünk ismerkedni az egyelőre „béta-állapotban” lévő CSS3 újdonságaival.

A Xara programja teljesen új értelmezést ad a WYSIWYG webszerkesztés fogalmának. Az új verziójával még kényelmesebben és egyszerűbben rajzolhatunk, készíthetünk látványos, interaktív honlapokat.

Korábban több látványos és interaktív fotógalériát készítettünk kizárólag a CSS stíluslapokra támaszkodva. Most némi JavaScript-támogatással összeállítunk egy igazán „sokoldalú” képtárat. Ám ahhoz, hogy JavaScript programunknak minél kevesebbet kelljen dolgoznia, megfelelően elő kell készítenünk a talajt.

Weboldalakat többféle módon lehet készíteni, kinek hogyan kényelmes. A WebDwarf elsősorban oldalaink gyors vizuális megkomponálásában segít.

Olyan galériákat készítettünk az előző leckében, amelyekben a fotók akkor jelentek meg, amikor az egeret az indexképek fölé mozgattuk. E galériák egyedüli hátránya, hogy amint az egérkurzor elhagyta a galéria területét, a fotó eltűnt a keretből. Ezúttal két olyan képgyűjteményt rakunk össze, amelyekben a fotók az indexképre történő kattintáskor jelennek meg, de ami fontosabb, hogy a következő kattintásig a helyükön is maradnak - és még mindig mellőzzük a JavaScript nyújtotta lehetőségeket.

Legutóbbi leckénkben megnéztük, hogyan lehet egy képgaléria indexoldalát néhány egyszerű trükkel feldobni, az átlagosnál érdekesebbé tenni. Ez alkalommal készülő galériánkba némi életet viszünk azzal, hogy amint az egér az indexképek fölé ér, megjelenítjük a kép nagy(obb) változatát - anélkül, hogy egyetlen sornyi JavaScript-kódot írnánk.

Míg türelmesen várakozunk, hogy a kicsinosított, a bevitt adatokat még az elküldés előtt ellenőrző űrlapunk kitöltésével az érdeklődők regisztráljanak a konferenciára, nekikezdünk saját „képgaléria-motorunk” fejlesztésének, amivel előbb a konferenciának otthont adó város néhány nevezetességét, a későbbiek során pedig a konferencián készült fotókat mutatjuk majd be.