E havi leckénk rendhagyó, ez alkalommal nem honlapokról vagy honlapelemekről lesz szó, hanem látványos HTML-alapú prezentációkat készítünk.

E havi leckénkben három újabb képgalériát készítünk. Az első kettőben további látványos effektusokkal bővítjük repertoárunkat, míg a harmadikban lehetővé tesszük a fotók tetszőleges sorrendben történő megnézését.

Múlt hónapban ismét képgaléria készítésébe fogtunk, ezúttal „igazi animációkat” használva a látványos képváltásokhoz. Most folyamatosabbá és még látványosabbá tesszük a képek cseréit.

Legutóbb közel két évvel ezelőtt készítettünk fotógalériát, így épp itt az ideje, hogy ismét elővegyük egy kicsit ezt a témát. Már csak ezért is, mert közben számtalan olyan új technológiát tanultunk a websuliban.

A múlt hónapban megnéztük, hogy milyen stílustulajdonságok segítségével tudunk kulcskockaalapú animációkat létrehozni. Ezúttal azt vizsgáljuk meg, hogy ezek használatával miként hozhatunk létre klasszikus stop-motion animációkat.

Legutóbbi leckénkben a Windows 8 logójának ablakát a CSS3 animáció segítségével meghintáztattuk, de részletesen nem néztük meg, hogy ennek stílustulajdonságai pontosan mit is állítanak. Eddig.

Legutóbb egy „nyúlfarknyi” JavaScript program segítségével forgathatóvá tettük képes kockánkat. Ez alkalommal folytatjuk a megkezdett munkát és eljátszunk a Windows 8 logójával is.

Miután a múlt hónapban végignéztük, hogyan lehet a HTML elemeket térben is transzformálni, az elméleti ismereteket megpróbáljuk átültetni a gyakorlatba. Elkezdjük munkára fogni a 3D-s transzformációkat.

Legutóbbi, a stílusos transzformációkról szóló leckénkben nem véletlenül hangsúlyoztuk ki többször is, hogy kétdimenziós transzformációkról beszélünk. Ugyanis ez alkalommal, folytatva a megkezdett gondolatmenetet, elkezdjük az oldalelemeket térben is transzformálgatni.

Átevezünk egy kicsit a stíluslapok újdonságainak vizeire. Megnézzük, hogyan lehet az oldal elemeit transzformálni, és bemutatunk néhány példát, hogy többek között mire lehet használni ezt az új stílustulajdonságot.

Előző leckénk végén - mintegy előzetesként - megmutattuk, hogy a YouTube-on található videókhoz is „hozzáigazíthatjuk” saját HTML5-alapú videólejátszónkat. Ez alkalommal kicsit alaposabban megnézzük, hogyan is történik pontosan ez a hozzáigazítás.

Legutóbbi alkalommal elkészítettük saját HTML5-ös videolejátszónkat, gyorstekerő gombokkal, interaktív állapotsávval és hangerő-állítási lehetőségekkel. Ebben a leckében kicsit tovább okosítjuk programunkat, majd megnézzük, hogy ágyazhatunk be oldalainkba YouTube videókat.

Legutóbbi megnéztük, hogyan helyezhetünk el videókat az oldalainkon. Ez alkalommal saját vezérlőpanelt készítünk ezekhez, hogy megszüntessük a böngészőnként eltérő megjelenést.

A HTML5 vitathatatlanul egyik, ha nem a legnépszerűbb, ugyanakkor legtöbb vitát kiváltó újdonsága a címke, amellyel videókat illeszthetünk be a honlapjainkba. Ám a helyzet sajnos messze nem olyan egyszerű, mint azt sokan gondolnák.

Habár a 30 fokokat magunk mögött hagytuk, nem érdemes elkerülnünk az árnyékoknak, főként, ha azok szövegek és blokkszintű elemek árnyékát jelentik.

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.