Archívum

Archive for the ‘HTML 5’ Category

HTML5 Workshop videók

2011. szeptember 29. csütörtök turoczya 2 hozzászólás

Júniusi HTML5 videók. Egy kis gyorstalpaló a HTML5-ről. Egy rövid áttekintés a HTML5 képességeiből. 7. részből álló videó sorozat. A videók átlagban 45-60 percesek.

A témák amiket a videóban érintünk:

HTML 5 elemei
HTML 5 újdonságok
Audió és Videó
Canvas
Geolocation
HTML5 vezérlők
Validáció
CSS 3
SVG – Scalable Vector Graphics
Internet Explorer 9 – Dev Tools
Windows 7 kompatibilitás

Az előadás prezentációt innen lehet letölteni.

Kategóriák:HTML 5 Címkék: Html5, Video, Workshop

HTML5 Jegyzet – Ingyen

2011. július 15. péntek turoczya 1 hozzászólás

Az O’Reilly gondozásában kikerült egy kis jegyzet. 18 oldalas HTML5 leírás. Most ingyen le lehet tölteni az O’Reilly oldaláról. http://oreil.ly/nf7EjG

In this post, we take a deeper look at HTML5 and offer a simple proposition with a lot of complex consequences: HTML5 is both something entirely new, and yet nothing more than HTML was ever intended to be; and that once you really understand HTML5, you’ll change the way you code and even think about the web and your own web applications.

HTML5: Everyone’s using it, nobody knows what it is. I realize that sounds more like a line out of an existential movie — maybe Waiting for Godot or a screenplay by Sartre — than a statement about HTML5. But it’s really the truth: most of the people using HTML5 are treating it as HTML4+, or even worse, HTML4 (and some stuff they don’t use). The result? A real delay in the paradigm shift that HTML5 is almost certain to bring. It’s certainly not time to look away, because by the time you look back, you may have missed something really important: a subtle but important transition centered around HTML5.

Letöltés menete:

Ted a kosárba a könyvet, majd a kasszánál 0$ kell fizetni. (O’Reilly felhasználónévvel rendelkezned kell. Ingyen tudsz regisztrálni az oldalon.)

Kategóriák:HTML 5 Címkék: ebook, Html5

HTML5 Tanfolyam prezentációja

2011. június 27. hétfő turoczya 33 hozzászólás

A két napos Microsoftban tartott HTML5 tanfolyam prezentációja.

A tartalomból:

HTML5 alapjai
Új elementek
Audió és videó element
Canvas
Geolocation
HTML5 vezérlők
Validáció
Local Storage
History API
CSS3
Font-Face
SVG
Internet Explorer 9 kényelmi lehetőségei

Tanfolyam megrendelés

Az előadás prezentációt innen lehet letölteni.

Kategóriák:HTML 5 Címkék: Canvas, CSS3, Geolocation, Html5, localStorage, SVG

Wolfeinstein 3D – HTML5-ben

2011. június 20. hétfő turoczya Hozzászólás

A HTML5 vitathatatlanul a legújabb és legtöbbet halott webes prezentációs technológia. Nagyjából mindent meglehet vele oldani mint mondjuk az Adobe Flashel vagy a Microsoft Silverlighttal. Igaz a fejlesztés körülményes, de minden megoldható benne.

Íme egy retro game a Wolfeinstein 3D implementációja HTML5-ben.

http://www.nihilogic.dk/labs/wolf/

Sőt ha mi magunk is szeretnénk elkészíteni ezt a játékot és hozzá egyedi pályákat akkor ezt a tutorialt olvassuk el.

Tutorial 1. része

Tutorial 2. része

Kategóriák:HTML 5, JavaScript Címkék: Html5, JavaScript

IE9 & HTML 5 Tutorial

2011. május 6. péntek turoczya 1 hozzászólás

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)

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.

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>

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.

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.

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!

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.

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 ikonok.

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.

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)

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.

Kategóriák:HTML 5, Internet Explorer 9

CSS 3

2011. május 2. hétfő turoczya 1 hozzászólás

A CSS3 (Cascading Style Sheets) egy stílusleíró nyelv, amellyel HTML vagy XHTML típusú dokumentumok megjelenését tudjuk leírni. A CSS-t a W3C felügyeli 1997 óta. A CSS 2-t 1998-ban implementálták, de csak jóval később kezdték el a böngészők használni, ráadásul a CSS összetettsége miatt a böngészők máshogy értelmezték és ez a web fejlesztés mai állapotára is hatással volt. A CSS 2.1 ennek a probléma kiküszöbölésére született, de még ezzel is több probléma volt. Mindenestre egyszerűsítettek rajta.

A W3C tanulva a CSS előző változatainak hibáiból, a CSS3-at modularizálttá tették. Ez azt jelenti, hogy a funkciókat modulokra bontották, így a böngészők ezeket csomagokban tudják megvalósítani, vagy akár ideiglenesen figyelmen kívül is hagyhatják. A különböző böngésző gyártók ezt már komolyan vették, és immár minden nagyobb böngésző a jelenlegi szabványnak megfelelően jól implementálja a CSS3 szabványt. Ráadásul, a CSS3 fejlesztése is nyíltabb is lett, bárki véleményt formálhat a fejlesztés mikéntjével kapcsolatban.

Összességében elmondható, hogy a CSS3-tól várja azt a fejlesztői közösség, hogy végre a lehető legtöbb böngészőn helyesen jelenjen meg az oldal kinézete.

Ismerkedjünk is meg néhány érdekesebb CSS3 újdonsággal.

Border

Az IE9 -ben a CSS3 segítségével immár nem csak téglalap alakú kereteket határozhatunk meg. Megadhatunk akár nem szokványos keretet is, aminek az oldalai le vannak például kerekítve.

CSS3 Border Radius elemei:

· border-radius

· border-bottom-left-radius

· border-bottom-right-radius

· border-top-left-radius

· border-top-right-radius

Nézzünk egy apró példát erre.

Készítsünk egy szabványos HTML5 dokumentumot, majd a body tagbe vegyünk fel egy div –et aminek az id-ja a MyBorder legyen.

Itt valami nagy dolog készül!

</div>

A header részébe tegyük bele az alábbi stílust. Itt meghatározzuk, hogy mekkora legyen maga div, a keret, a keret színe és stílusa. Valamint a CSS első sorában a radius-át határozzuk meg.

<style>

#MyBorder

{

border-radius: 100px 66.66px 200px 50px;

border: 8px green double;

padding: 24px;

width: 400px;height: 125px;

}

</style>

Az eredmény pedig a következő lesz:

Szín modell

Az Internet Explorer 9 támogatja a CSS3 szín modell kezelését. Támogatást nyújt RGBA, HSL és HSLA szín modellekre.

Maradjunk az előző példánál és a stílushoz adjuk hozzá a következő sort:

background-color:rgba(255,0,0,0.5);

Itt RGBA modell segítségével adtuk meg az adott elem háttér színét. De ez meghatározhatjuk ilyen formában is:

background-color: rgba(100%,0%,0%,0.5);

Ha már szín modellek, akkor a grafikában jól ismert HSL színmodell is támogat az Internet Explorer 9. (HSL = Hue Saturation Lightness) Többen szín keréknek vagy szín gyűrűnek ismerik. Ahol a 0 és 360 fok a piros, a 120 fok zöld a 240 pedig a kék szín reprezentálja.

A fentebbi példa HSL megadásával a következőképpen néz ki

background-color: hsl(0,100%,50%);

Ezen kívül létezik még HSLA, ami annyiban különbözik a sima HSL-től, hogy van egy alpha csatornája, amivel az áttetszőséget tudjuk befolyásolni. Ez az érték 0.0 és 1.0 között lehet. A 0.5 jelenti az 50%-os áttetszőséget.

background-color: hsla(0,100%,50%,0.5);

Az eredmény a következőképpen néz ki: (A HSL-nél nincs alpha csatorna, ott csak piros a háttérszín)

Multi-background

A CSS3-ban bevezetésre került a Multi-background tulajdonság, amivel egyszerre több kép is lehet az adott elem háttere.

A feladat elvégzéséhez szükséges képeket innen lehet letölteni.

Készítsünk egy új szabványos HTML5 dokumentumot.

A HTML dokumentum mellé másoljuk be a letöltött képeket.

A headerbe írjuk az alábbi stílust. (Figyeljük meg a background-image tulajdonságot)

<style>

div

{

width: 400px;

height: 180px;

padding: 10px 10px 10px 10px;

background-color: #a0e0ff;

background-image: url(redball.png), url(bluesky.png);

background-position: 30px 50px, 0 0;

background-repeat: no-repeat, repeat-x;

}

A body részhez meg adjuk a következő div elemet.

<div>

Hello CSS3

</div>

Az eredmény a következő lesz:

Ez már egész látványos dolog. De ha arra gondolunk, hogy egy RIA alkalmazásnál sokszor a háttér animálva szokott lenni akkor még messze vagyunk tőle.
Vagy mégse? A HTML5 és CSS3 ugyanis nagyon erős páros lett, így ezt a feladatott is egyszerűen meg tudjuk oldani vele.

Cseréljük le a fentebb definiált stílust az alábbi stílusra. (Ebben az esetben 4 képet adunk meg a háttérnek)

<style>

div

{

width: 400px;

height: 180px;

padding: 10px 10px 10px 10px;

background-color: #a0e0ff;

background-image: url(grass1.png), url(redball.png), url(tree1.png), url(clouds1.png), url(bluesky.png);

background-position: 0 0, 30px 50px, 0 0, 0 0, 0 0;

background-repeat: repeat-x, no-repeat, repeat-x, repeat-x, repeat-x;

}

</style>

A divnek pedig adjuk meg az animatedback id-t.

Hello CSS3

</div>

Ha most elindítjuk az oldalt akkor az alábbi kép div element fog minket fogadni. Ez egész kellemes, de a labda és a környezet még mindig nem mozog. Valahogy mozgásra kell bírnunk.

Ezt legegyszerűbben JavaScriptből tudjuk megtenni. A Div element alá tegyük be az alábbi JavaSciprtet. Ez a script felelős azért, hogy a háttérnél a képek megfelelően mozogjanak.

var ball_y = 30;

var ball_dir = 1;

var clouds_x = 0;

var grass_x = 0;

var tree_x = 0;

function ani_loop() {

clouds_x = clouds_x – .2;

tree_x = tree_x – .7;

grass_x = grass_x – 1;

ball_y = ball_y + ball_dir;

if (ball_dir > 0 && ball_y > 150) {

ball_dir = -ball_dir;

ball_y = 150;

}

if (ball_dir > 0) {

ball_dir = ball_dir * 1.0312;

}

if (ball_dir < 0) {

ball_dir = ball_dir * 0.97;

}

if (ball_dir < 0 && ball_dir > -0.15) {

ball_dir = -ball_dir;

}

document.getElementById(‘animatedback’).style.backgroundPosition = grass_x+‘px 0, 30px ‘+ball_y+‘px, ‘+tree_x+‘px 0, ‘+clouds_x+‘px 0, 0 0’;

t = setTimeout(‘ani_loop()’,10);

}

ani_loop();

</script>

Az eredmény pedig egy látványos div element lesz. Ne feledjük, hogy az egész oldalunk hátterét tudjuk a segítségével befolyásolni! Bármit megvalósíthatunk vele. A legszebb dolog pedig, hogy az Internet Explorer 9 révén grafikus gyorsítást is kap. Így az animációk még gördülékenyebben játszódnak le.

Opacity

Immár bevezetésre került az opactiy tulajdonság is, amivel meghatározhatjuk az adott elem mennyire legyen áttetsző. Ez az érték 0.0 és 1.0 között lehet. De akár kifejezhető százalékban is.

A következő példa az opacity tulajdonsággal játszik egy-egy div elementnél. (25×125 pixel a div)

</div>

Az alábbi apró kódrészletnek ez lesz az eredménye:

Fonts Modul

Az Internet Explorer 9 a CSS3 -ban definiált új font modell-t is támogatja, valamint támogatja még a Web Open Font Format (WOFF) és a Raw Fontokat is.

A font-weight, font-size tulajdonság az Internet Explorer 9 frissítve lett, így már a CSS3 szabványnak megfelelően használhatjuk.

De ez még nem lenne érdekes. Lehetőségünk van 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.

@font-face {

font-family: MyFont;

src: url(http://mysite/fonts/MyFont.ttf)

format("embedded-opentype");

}

p {font-family: MyFont, serif; }

Kategóriák:CSS3, HTML 5

HTML 5 – Video & Audio

2011. április 29. péntek turoczya 3 hozzászólás

Video lejátszó

A HTML5 sokat fejlődött, és nagyon egyszerűen tudunk benne multimédia tartalmakat megjelenítni. Például, ha szeretnénk egy kis videót lejátszani, csak az alábbi elem és annak attribútumaira lesz szükségünk.

<video width=”400″

height=”300″

src=”demo.mp4″

poster=”frame.jpg”

autoplay

controls

loop>

Ez a szöveg akkor fog megjelenni, hogy ha az adott codeck nem támogatott.

</video>

Nézzük mit is csináltunk pontosan. Készítettük egy video tagot, ahol megadtuk a magasságát és a hosszúságát a videónak. Az src attribútumnál megadtuk a videó elérési útvonalát. A poster attribútum egy képet mutat addig, amíg a videó, egyfajta splash screen szerű dolog. Az autoplay tulajdonsággal meghatározzuk, hogy ha betöltődött a videó, akkor rögtön kezdje el lejátszani, a loop-pal meg értelemszerűen újra és újra kezdi a videót. A controls még egy érdekes tulajdonság, ha ezt az elemet belerakjuk akkor az alapvető videó vezérlő kontrolok megjelennek az videóban (Természetesen testre szabható, átalakíthatóak)

De akár több forrást is megadhatunk, a source elementek között.

<source src=”video.ogv” type=’video/ogg; codecs=”theora,

vorbis”‘>

<source src=”video.mp4″ type=’video/mp4; codecs=”avc1.42E01E,

mp4a.40.2″‘>

</video>

Az eredmény kb. a következő lesz:

De felmerülhet a kérdés, hogy miért jobb ez a videó „lejátszó” mint mondjuk egy Silverlightos vagy egy Flashes. Nos, a válasz abban rejlik, hogy ez tisztán HTML. Azaz nincs böngésző plugin nem kell telepíteni semmit se hozzá, sőt ha akarom, olyan szinten testre szabhatjuk, amennyire csak szeretném JavaScriptel bármit elérhetek benne.

Készítsünk video lejátszó weboldalt

A cél az, hogy egy mini webes videó lejátszót készítsünk.

<!DOCTYPE html>

<html>

<head>

<title>HTML5 Video</title>

<body>

Ez a szöveg akkor fog megjelenni, hogy ha az adott codeck nem támogatott.

</video>

</article>

</body>

</html>

A példa videót innen lehet letölteni. Ezt a videót tegyük közvetlen a html oldal mellé. (Vagy hivatkozzunk rá)

Adjunk stílus az oldalnak. Legyen fekete az oldal, és a videó lejátszót pedig pozicionáljuk középre. Az article elementbe helyezzük el a videót.

<style>

body {

background:#000;

padding:0;

margin:0;

overflow:hidden;

width:100%;

height:100%;

font-family:sans-serif;

font-size:10px;

color: #666;

}

article {

display:block;

position:relative;

margin:100px auto 10px auto;

width:592px;

}

</style>

Ha most elindítjuk az alkalmazást, akkor egy sima videó lejátszó alkalmazást kapunk.

Ez eddig egyszerű, de nem lenne olyan jó, ha nem lehetne testre szabni. A következőekben készítünk egy kis menedzsment felületet hozzá.

Adjunk az article elementbe a videó alá egy sima gombot, aminek az id-ja play legyen.

Most már csak a JavaScriptet kell megírnunk.

var play = document.getElementById(‘play’);

var video = document.getElementById(‘example’);

play.addEventListener(‘click’,playControl,false);

function playControl()

{

if (video.paused == false) {

video.pause();

this.firstChild.nodeValue = ‘Play’;

} else {

video.play();

this.firstChild.nodeValue = ‘Pause’;

}

</script>

A JavaScriptben lekérdezzük mind play mind a video elementet. A video elementnek az id-ja az example. Itt név szerint hivatkozunk rá, majd feliratkozunk a click eseményére. Utána értelemszerű a dolgunk. Ha video jelenleg nincs megállított, akkor leállítjuk, majd a gomb nevét átírjuk.

És így már van saját gombunk, amit mi írtunk hozzá. Ha rákattintunk, akkor elindul a videó, ha már megy és megint rákattintunk akkor leáll a videó.

Audio lejátszó

Tulajdonképpen az audio elementnek ugyanolyan tulajdonságai vannak, mint a videónak, kivéve a Width és Height tulajdonság, mert neki ugyanis nincs ilyen eleme. Viszont az alapvető vezérlő kontrolok itt is megtalálhatóak.

Amit észre kell vennünk, hogy audio és videó alkalmazásokat HTML5-höz nagyon könnyen írhatunk. Néhány pillanat alatt kész is egy teljes értékű kis videó és zene lejátszó weboldal.

Próbáld ki élesben egy HTML5-ös videó alkalmazást

Kattints ide és nézd meg, hogy milyen lehetőségek vannak még a HTML5 videó és audió támogatásának.

Kategóriák:HTML 5

HTML 5 – Start

2011. április 28. csütörtök turoczya 26 hozzászólás

HTML története

A HTML az angol HyperText Markup Language szavak rövidítése. Alapvetően egy leírónyelv, ami weboldalak készítéséhez használunk. A HTML szöveges állomány, amelyet akár egy egyszerű jegyzettömbbel is szerkeszthetünk. A 90 es évek óta 4 végleges változaton vagyunk túl, és most érkezik a HTML5 –ös változata, ami újraértelmezi a HTML-t. Mert immár nem „csak” egy markup leíróról tudunk beszélni, mint ami a HTML4-ig volt. Hanem egy komplett RIA (Rich Internet Application) platformról. Olyan nagy cégek álltak a HTML5 mögé, mint a Microsoft, Adobe vagy a Google. Ők látják, hogy előre mutató technológiáról van szó, ami a piac igényeit átformálja és átdolgozza. A HTML5nek ugyanis meg van az az előnye, hogy szabványos, platform független és nem bontja meg a webes koncepciót. Azaz nem kell külön plugint telepíteni ahhoz, hogy használjuk. Ha a böngésző ismeri a HTML5 szabványt, akkor jól fogja megjeleníteni a számunkra a tartalmat. Ráadásul immár gazdag tartalomról beszélhetünk.

De ne feledjük a HTML5 jelenleg még nincs kész, a szabványosítása még most is tart. Bár már nagyobb változások nem várhatók, de még végleges ajánlás nem készült el.

Ismerkedés a HTML5 alapjaival

Ismerjük meg a HTML5 alapjait, hogy miben hoz újdonságot az oldallá leírása szintjén. Vegyünk a példa kedvéért egy egyszerű oldalt. Általában egy oldalnak van headerje (fejléc) sidebarja (oldalsáv, ahol navigációs elemeket helyezhetünk el például) footerje (lábléce) valamint content (tartalom) része is.

Ezt HTML4 esetében div-ekkel oldottuk meg. Ugyanis speciálisan nem volt footer, header vagy épp article element.

Ez így extra munkával járt, hisz ezek gyakori elemek, és külön kellet mindet definiálnunk. A HTML5 tervezésénél viszont megvizsgáltak több millió web oldalt és az eredmény az lett, hogy a legtöbb oldalnál ezeket az elemeket használják. Ezért a HTML5 ezeket az elemeket nyelvi szinten támogatja. Van header, footer, nav, menu, article, section (stb) elementek. Ez a címkézési módszer nem csak azért jobb mert egyszerűbb mint a div-ek használata, de a böngészők is értelmezhetik, hogy milyen strukturális elemről van szó.

Tehát, ha a fentebbi elrendezést szeretnénk az oldalnak adni, nincs más dolgunk, mint a megfelelő elementeket használjuk.

Az előző példa HTML5 elmentekkel:

Építsük meg!

Ha HTML5 –ben kezdünk dolgozni, nagyon fontos, hogy az első sorban ezt jelezzük, kell az alábbi elemnettel. (Mint látható, egy DTD-vel Document Type Definitionnal határozzuk ezt meg. Ez biztosítja azt, hogy a böngésző szabványkövető módban értelmezze a weboldalt)

<!DOCTYPE html>

Amennyiben ezt nem tennénk meg, akkor az oldalunk széteshet, ugyanis a böngésző ilyenkor egy úgynevezett quirks mode-ba kapcsol és magától próbálja értelmezni a kódolást, ami hibás megjelenítést eredményezhet.

Az oldal további részei a következőképpen néznek ki

<html>

<head>

<style>

…

</style>

<body>

<header><h1>Hello HTML5</h1></header>

<p>Section</p>

</section>

<footer><p>Lábléc</p></footer>

</body>

</html>

A style rész jelenleg direkt ki van hagyva! (Pontozott rész értelemszerűen nem kell a kódba) Ha most betöltenénk az oldalt, akkor kb. csak egy ilyen egyszerű kinézetett kapnánk.

Ez így még nem megfelelő a számunkra. Ezt a stílusokkal tudjuk meghatározni. Sőt immár CSS3 támogatása is van az Internet Exporer 9-es változatnának. (A CSS3 újdonságaival később ismerkedünk meg) De írjuk meg az oldalunk egy alap stílusát. (Figyeljük meg, hogy nem adtuk meg a style-nál hogy miről is van konkrétan szó, csak annyit mondtunk, hogy stílus) Illesszük be az alábbi kódsort a <style> </style> element közé.

body {background-color:white; color: black; text-align:center;}

header, footer, nav, section, article {display:block;}

header {width:100%; background-color:yellow;}

nav {width:30%; background-color:orange;float:left;}

section {width:65%; background-color:SpringGreen ; float:right;}

article {width:70%; margin:2em 10%; background-color:turquoise;}

footer {width:100%; background-color:pink; clear:both;}

Látható, hogy immár a headernek, navnak és további elemnek direktbe adunk stílust.

Az oldal kinézete immár az elvárt elrendezést kapjuk.

A teljes kód:

<!DOCTYPE html>

<html>

<head>

<title>Basic styling of new structural tags</title>

<style>

body {background-color:white; color: black; text-align:center;}

header, footer, nav, section, article {display:block;}

header {width:100%; background-color:yellow;}

nav {width:30%; background-color:orange;float:left;}

section {width:65%; background-color:SpringGreen ; float:right;}

article {width:70%; margin:2em 10%; background-color:turquoise;}

footer {width:100%; background-color:pink; clear:both;}

</style>

<body>

<header><h1>Hello HTML5</h1></header>

<p>Section</p>

</section>

<footer><p>Lábléc</p></footer>

</body>

</html>

Header és Footer

A headerbe általában banner, oldal nevet, címet szoktunk belepakolni. Azt is mondhatnánk, hogy headerből vagy footerből elég egy is egy oldalra. De a HTML5 –nél akár több is lehet. Hogy hol van ennek haszna? Nagyon is sok helyen. Például, egy cikknek is lehet fejléce és lábléce.

<p>2010. november 1</p>

</header>

<p>Tartalom</p>

<footer>Beküldő: Livesoft Kft.</footer>

</article>

Ilyenkor a stílusban definiált beállításokhoz képest fog a számunkra megjelenni az oldal.

Elmenetek Internet Explorer 8-al

Fejlesztési szempontból fontos megemlíteni, hogy ha ezt az oldalt meg akarnánk nézni Internet Explorer 8 –al akkor egy széteset oldal kapnánk, ugyanis a 8-as Explorer a HTML5-öt nem támogatja. Így egy kerülő megoldást kell alkalmaznunk.

Ilyenkor az alábbi elemet kell beillesztenünk az oldalunk fejlécébe:

<!–[if IE]>

document.createElement("header");

document.createElement("footer");

document.createElement("nav");

document.createElement("article");

document.createElement("section");

</script>

<![endif]–>

Elavult elemek

A HTML5-ben közel 100 HTML címke van. De bizonyos elemek kikerültek a HTML 4.01 es változatához képest. Az alábbi elemeket mostantól kerüljük egy webes alkalmazás készítése során.

· <acronim>

· <applet>

· <basefont>

· <big>

· <center>

· <dir>

· <font>

· <frame>

· <frameset>

· <isindex>

· <menu>

· <noframes>

· <s>

· <strike>

· <tt>

· <u>

· <xmp>

További újdonságok

A HTML5 rengeteg újítást hozott, nem csoda, hogy ezt a technológiát emlegetik a jövő RIA-jának. Nézzünk néhány lényegesebb újítást még

· Új szöveges elemek Time, progress, meter,

· Új tartalom beágyazó elemek: (figure, video, audio, source, canvas, mapaz)

· Interaktivitást lehetővé tevő elemek: details, command, menu,

· microdata, adatokat tudunk HTML-be ágyazni

· HTML és JavaScript kapcsolata, események működése

· Offline alkalmazások létrehozása

Ezen elemek közül megismerkedünk még néhánnyal.

Kategóriák:HTML 5

Turóczy Attila szakmai blogja

Archívum

HTML5 Workshop videók

HTML5 Jegyzet – Ingyen

HTML5 Tanfolyam prezentációja

Wolfeinstein 3D – HTML5-ben

IE9 & HTML 5 Tutorial

Előkészületek

Audio lejátszó

Canvas

Font Face

Windows 7 kényelem

CSS 3

Border

Szín modell

Multi-background

Opacity

Fonts Modul

HTML 5 – Video & Audio

Video lejátszó

Készítsünk video lejátszó weboldalt

Audio lejátszó

Próbáld ki élesben egy HTML5-ös videó alkalmazást

HTML 5 – Start

HTML története

Ismerkedés a HTML5 alapjaival

Építsük meg!

Header és Footer

Elmenetek Internet Explorer 8-al

Elavult elemek

További újdonságok

Facebook

Twitter

Kategóriák

Archívum

Meta