Kezdőlap > HTML 5, Internet Explorer 9 > IE9 & HTML 5 Tutorial

IE9 & HTML 5 Tutorial

2011. május 6. péntek Hozzászólás Go to comments

A következő feladatban egy egyszerű zene lejátszó/ zene áruház oldalt fogunk megírni demo szinten.

Mielőtt belekezdenénk, telepítsük fel az Internet Explorer 9
Innen érhető el:
http://ie.microsoft.com/testdrive/info/downloads/Default.html

Előkészületek

Előre el van készítve egy HTML oldal és a hozzá tartozó template. Ezt nyissuk meg kedvenc web editorunkkal (ajánlott a Microsoft Expression Web 4, de egy notepaddal is tökéletesesen szerkeszthetjük)

Audio lejátszó

Ma, amikor a multimédia a hétköznapok részévé vált, a weben még mindig különböző bővítmények segítségével tudunk videót nézni. Általában vagy Flash vagy Silverlight esetleg valamilyen ActiveX-es vezérlő kellet ahhoz, hogy videó vagy audió anyagot élvezhessünk a neten. Ezen is változtatott a HTML5, ugyanis beépített audió és videó vezérlővel rendelkezik. És ami nagyon jó benne, hogy rendkívül jól használható. Igaz vannak korlátai, mert szegényes formátumot támogatása van, de amit támogat azt nagyon jól. Audio szempontjából AAC-t vagy MP3at, míg videó szempontjából MP4 vagy H.264 –es videó lesz a megfelelő. (A videók audió sávja szintén csak AAC vagy MP3 lehet) De ez nagyjából elég is, az átlagos felhasználóknak.

Navigáljunk el az „entry” divhez, és írjuk bele az  alábbi tagot. Lépjünk be a forrás fájlok helyére és készítsünk egy Media mappát. Ebbe a mappába tegyünk bele tetszőleges mp3 fájlokat. (Az egyszerűség kedvéért célszerű elnevezni 1.mp3,2.mp3 stb fájlokat)

<audio id=”aPlayer” src=”Media/3.mp3″ controls autoplay>

       Nem támogatott böngésző!

</audio>

Ahhoz, hogy az audio playert kódból kezeljük javascriptet kell írnunk. Ezt a scriptet írjuk közvetlen az audio element alá.

A GetSong funkció egy tömbből kiválaszt egy véletlenszerű számot és az a szám lesz a visszatérési értéke.

A NextTrack funkció a vissza adot szám forrását megkapja, betölti, majd lejátssza.

<script>

var myPlayer = document.getElementById(‘aPlayer’);

                                                      

function GetSong()

{

       var mySongs = new Array();

       mySongs[0] = “Media/1.mp3”;

       mySongs[1] = “Media/2.mp3”;

       mySongs[2] = “Media/3.mp3”;

                                                             

return mySongs[Math.floor(Math.random() * 3)];

}

                                                      

function NextTrack()

{

       myPlayer.src = GetSong();

       myPlayer.load();

       myPlayer.play();

}

</script>

Nincs más hátra, mint feldobni egy gombot és az onclick eseményénél meghívni a NextTrack(); funkciót. Így ha rákattintunk a gombra a tömbből, amely az mp3 fájljainkat tartalmazza, kiválaszt egyet véletlenszerűen és lejátssza azt.

<button id=”nextBtn” onclick=”NewTrack();”>Adj egy új számot</button>

Ha meg vagyunk, nyissuk meg a html oldalt az Internet Explorer 9-el és nézzük illetve hallgassuk meg az eredményt.

Canvas

A HTML5-ben bevezetésre került a Canvas element, aminek a segítségével adott felületen egyszerűen tudunk grafikát létrehozni, leginkább JavaScript segítségével. A HTML5 Canvas rendelkezik egy Canvas 2D API-val is amivel egyszerűen és gyorsan tudunk az adott felületre rajzolni. Ráadásul az Internet Explorer 9 –el még extra grafikus gyorsítást is kap.

A Canvasra rajzolhatunk egyszerű vonaltól kezdve, összetettebb alakzatokig szinte bármit. Sőt JavaScript segítségével még animálhatunk is Canvason. Természetesen, mint minden rajzfelületnek van szélessége és magassága, ha ezt nem adjuk meg akkor alapból 300×150 pixeles canvasrol beszélünk.

Készítsünk egy Canvast, amelynek a Width tulajdonsága 330, a Height 60 az id-ja pedig az adv. HTML-ben kb ennyi a dolgunk. A rajzolást már JavaScriptel fogjuk elvégezni.

<canvas id=”adv” width=”330″ height=”60″>

</canvas>


A Canvas alá készítsünk egy scriptet. Itt lekérdezzük a canvast és annak rajzfelületét.

A DrawBanner a legegyszerűbb funkció. Segítségével egy egyszerű szöveget rajzolunk a canvasra aminek van árnyéka stb.

A renderLoop-ot a timernél hívjuk meg. Ő gondoskodik az animáció irányáról, valamint arról, hogy jelenleg, hol is tart az x koordináta tengelyen a kör. A renderLoop hívja meg a Draw(x) funkciót, ami az animáció szíve. Itt határozzuk meg, hogy mit szeretnénk adott idő pillanatban látni.

<script>

var canvas = document.getElementById(‘adv’);

var ctx = canvas.getContext(‘2d’);

                                               

var index = 0;

var turn = true;    

timer1 = setInterval(renderLoop, 50);

                                               

function renderLoop()

{

       if(turn == true)

       {

              if(index > 330)

                     turn = false;

              index += 4;

       }

       else

       {

              if(index < 0)

                     turn = true;

              index -= 4;

       }

                                 

       draw(index);

}                                       

                                               

function draw(x)

{

       ctx.fillStyle = “black”;

       ctx.fillRect(0,0,330,60);

                                                      

       ctx.save();

       ctx.beginPath();

       ctx.arc(x, 30, 30, 0, Math.PI * 2, true);

       ctx.clip();

                                                      

       ctx.fillStyle = “white”;

       ctx.fillRect(0, 0, 330, 60);

                                                      

       DrawBanner();

       ctx.restore();

}

                                               

function DrawBanner()

{

       ctx.textAlign = “left”;

       ctx.shadowOffsetX = 5;

       ctx.shadowOffsety = 5;

       ctx.shadowBlur= 5;

       ctx.shadowColor = “rgba(0,0,0,1)”;

       ctx.font = ’24px “Segoe UI”‘;

       ctx.fillText(“Music Sotre – HTML5 Demo”, 25, 25);

}

</script>

Ha megírtuk. Nyissuk meg a böngészőnkbe az oldalt, és a canvason egy fehér kört fogunk látni, ami balról jobbra majd jobbról balra halad, és csak az alatta látható szöveget jeleníti meg a számunkra.

Font Face

Lehetőségünk van immár font linkelésre a @font-face szabály segítségével. Ennél a szabálynál meghatározhatjuk, hogy töltse le az adott fontot a megfelelő url-ről, majd ha ez megvolt, akkor már fel is használhatjuk az oldalunkon. Így az oldalunkon akár egzotikus fontokat is felhasználhatunk, amik a felhasználó gépén nincs feltelepítve.

A headerbe található styleba írjuk a következő sorokat. (A b5.ttf –et a Demo könyvtárból másoljuk át közvetlenül az index.html mellé)

@font-face

{

       font-family:MyFont;

       src:url(‘b5.ttf’);

}

Ha meg vagyunk a div entry-be helyezzünk egy új paragrafust, és annak adjuk meg a saját fontunkat.

<p style=”font-family:MyFont”>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.

Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.

</p>

Ekkor, ha megnyitjuk a böngészőt az adott bekezdést a saját fontukkal fogja megjeleníteni a böngésző.

Windows 7 kényelem

Az Internet Explorer 9 az első olyan böngésző, amelyet az operációs rendszer (Windows 7) kényelmi lehetőségeit is kihasználja. Oldalainkat drag and drop módszerrel megfoghatjuk és tálcára helyezhetjük. Ilyenkor az oldalunk favicon-ja megjelenik a tálcán. Mivel a tálca mérete viszonylag nagy ezért az oldalunk faviconjának célszerű 64×64 –es méretűnek lenni, szemben a korábban alkalmazott 16×16 és 32×32 faviconokkal szemben.

Oldalunkon egyszerűen egy sorral tudunk hivatkozni a faviconunkra. Ha az oldalunknak már megadtunk egy favicont, akkor az Internet Explorer eltárolja, ezért új ikon használatakor a cache tartalmát törölni kell!

<link href=”favicon.ico” rel=”shortcut icon”/>

Miután beállítottuk az oldalunk faviconját és az oldalunk Tab fülét lehúzzuk a tálcára akkor megjelenik a tálcán a favicon. Ezt követően, ha rákattintunk az ikonra, megjelenik az Internet Explorer 9 az oldalunkkal. Ráadásul a megjelent explorer megfigyeli, hogy a faviconba mi a domináns szín, és ehhez mérten állítja be az explorer a gombok színeit.

De nem csak a tálcára tudjuk elhelyezni kedvenc oldalainkat. Akár a start menübe is elhelyezhetjük. Ezt a fájl menüből is hozzáadhatjuk, de akár a saját kódból is meghívhatjuk. Ehhez mindösszesen csak a window.external.msAddSiteMode(); funkciót kell meghívnunk. Például az alábbi módon hívjuk meg. Ilyenkor egy figyelmeztetés után bekerül a kedvenc oldalunk a start menübe, mint egy rendes alkalmazás.

<input onclick=”window.external.msAddSiteMode();” name=”Button1″ type=”button” value=”Start menu”>

Sőt a start menü és a tálca kényelmi szolgáltatásait is feltudjuk használni. Ilyen kényelmi szolgáltatás például a JumpList, a Thumbnail Toolbar vagy az állapot ikonokimage.

Kezdjük a JumpListtel.  Ez a menüelem akkor jelenik meg, ha az alkalmazás ikonjára jobb egérgombbal kattintunk a tálcán. Itt viszont már szép számmal elhelyezhetünk menüpontokat. Például a Windows Live Messenger –nél, egyszerűen változtathatunk jelenlegi állapotunkon, indíthatunk el más alkalmazásokat vagy épp a leggyakrabban használatos elemeket találhatjuk a listában (Ezeket a menüket a Start menüben is megtalálhatjuk). Ez szintén egy olyan újdonság, amely a felhasználó életét könnyebbé teheti, így hát az általunk készített oldalt is felkészítjük erre. A feladatunkban az egyszerűség kedvéért, csak egy külső weboldalak címeit fogjuk megadni.

Ezt mind egyszerűen csak meta elemekkel tudjuk megadni az oldal headerjébe. Adjuk hozzá az alábbi kódot az oldalunk headerjéhez.

<meta name=”application-name” content=”Music Store Demo”/>

<meta name=”msapplication-tooltip” content=”DEMO Store” />

<meta name=”msapplication-task” content=”name=Devportal;action-uri=http://devportal.hu;icon-uri=http://devportal.hu/favicon.ico” />

<meta name=”msapplication-task” content=”name=Facebook – Devportal;action-uri=http://www.facebook.com/group.php?gid=166184308991&ref=ts;icon-uri=http://www.facebook.com/favicon.ico” />

<meta name=”msapplication-task” content=”name=Twitter – Devportal;action-uri=http://twitter.com/Devportal;icon-uri=http://twitter.com/favicon.ico” />


Az application-name az oldalunk megnevezése. Az msapplication-tooltip az a felugrós kis ablak, amiben megjelenik az adott szöveg ha tálcán fölé visszük az egeret. Az msapplication-task –kal pedig funkciókkal ruházhatjuk fel a JumpListünket.

 

Másik nagyszerű újdonság a ThumbnailToolbar. Akik használják a Windows Media Player új változatát azok láthatták, hogy magába a betekintő nézetbe is vannak gombok amikkel táv vezérelhetjük az alkalmazásunkat. Az Internet Explorer 9 révén immár a mi webes alkalmazásunkat is irányíthatják a betekintő nézetből. Ehhez mindösszesen az alábbi javascript kódot kell elhelyeznünk az audio player alá. (Maximum 7 gombot helyezhetünk el)

<script>

var btn1;

 

function init()

{

       document.addEventListener(‘msthumbnailclick’, processSelection, false);

       btn1 = window.external.msSiteModeAddThumbBarButton(‘Plus.ico’, ‘New’);   

       window.external.msSiteModeShowThumbBar();

}

                                        

function processSelection()

{

       NewTrack();

}

window.onload = init();

                                                                    

</script>    

A kódban mi feliratkozunk az adott elem eseményvezérlőjére. és ha megnyomásra került akkor meghívjuk a NewTrack() funkciót, így a gomb megnyomásával új számot játszik le az oldal.

Az utolsó, bár nem elhanyagolható újdonság  az állapot ikonok megjelenítése. Képzeljük el a következő szituációt. Az oldalunk egy közösségi oldal, és egy felhasználó küldött nekünk egy üzenetet. Erre kapunk az oldaltól egy emailt, hogy az oldalon van egy üzenetünk és olvassuk el. De ezt a felhasználó csak akkor veszi észre ha fellép az oldalunkra vagy elolvassa az emailjeit. Ezért jó volna számára ezt jelezni mondjuk a tálcán (amit értelemszerűen mindig lát) egy levél ikonnal stb. Erre nyújt tökéletes megoldást az állapotikon funkció. Ráadásul azikon megjelenítése és elrejtése mindössze 1 sor.

Az alábbi példában mi manuálisan az egyik gombbal megjelenítjük, a másik gombbal elrejtjük az állapot ikont.

<input onclick=”window.external.msSiteModeSetIconOverlay(‘Alert.ico’, “Alert”);” name=”btnShow” type=”button” value=”Show”>

<input onclick=”window.external.msSiteModeClearIconOverlay();” name=”btnHide” type=”button” value=”Hide”>

 

Advertisements
Kategóriák:HTML 5, Internet Explorer 9
  1. Még nincs hozzászólás.
  1. 2011. május 23. hétfő - 14:40

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s

%d blogger ezt kedveli: