A canvas kezelésére egy csomó könyvtár van, például tetszett a fabric.js meg a kinetic.js, de most egy másikat mutatnék, mert nekem ez működött legjobban mobil eszközön is.
2014. július 19., szombat
2014. június 27., péntek
Canvas
Mint legutóbb láthattad, lehet animációt, "arcade" stílusú játékot csinálni html elemek megjelenítésére, pozícionálására alapozva, azonban ez nem ideális. A HTML szabvány dokumentum megjelenítésére lett megalkotva, nem mozgó sprite-ok dinamikus, interaktív kezelésére.
Nagy megterhelést jelent a böngészőnek az egyes html elemek megváltoztatása után újrakalkulálni és újramegjeleníteni az egész oldalt, az erre történő optimalizáció szinte már külön tudományág.
Néhány évvel ezelőttig a webes programozók mást nem tehettek, ha mindenáron böngészőben futó játékot akartak készíteni: vagy a lassú html manipulálás, vagy a beépülő flash (vagy más beépülő) maradt a számukra.
Mostanában azonban más lehetőségek is vannak: a canvas használata már minden elterjedt böngészőben lehetséges, még mobil eszközökön is.
Nagy megterhelést jelent a böngészőnek az egyes html elemek megváltoztatása után újrakalkulálni és újramegjeleníteni az egész oldalt, az erre történő optimalizáció szinte már külön tudományág.
Néhány évvel ezelőttig a webes programozók mást nem tehettek, ha mindenáron böngészőben futó játékot akartak készíteni: vagy a lassú html manipulálás, vagy a beépülő flash (vagy más beépülő) maradt a számukra.
Mostanában azonban más lehetőségek is vannak: a canvas használata már minden elterjedt böngészőben lehetséges, még mobil eszközökön is.
2014. június 19., csütörtök
SetTimeout
Most egy kis életet viszünk a webes alkalmazásunkba, megmozgatjuk egy kicsit a DOM tagjait.
2014. június 13., péntek
JSfiddle
A függőségek után szeretnék egy eszközt bemutatni, ami a neten elérhető.
Ennek segítségével könnyebben haladhatunk majd.
Ennek segítségével könnyebben haladhatunk majd.
2014. június 3., kedd
Kitérő: mi a programnyelv és hogyan fut a program a számítógépen?
Most egy gyors, felületes leírást szeretnék írni, hogy mi is ez az egész programozásdi.
2014. május 27., kedd
Függőségek
Eddig egyetlen HTML fájlban benne volt minden, amire szükségünk volt. A böngésző szépen beolvasta, értelmezte, megjelenítette, végrehajtotta... Vagyis csak a böngészőtől függött az egész. Ez az egyik jó dolog benne: bármilyen eszközön és operációs rendszeren működik (persze sok probléma lehet a platformok, böngészők különbözőségével, de szerencsére manapság már a böngészők igyekeznek jól megjeleníteni a szabványok szerint a HTML oldalakat és a CSS és JS képességeik is megbízhatóan hasonlóak)
2014. május 22., csütörtök
CSS kiválasztók
A teszt html fájlunk (elsohtml.html) most ez:
<html>
<head>
<title>
Ez az első HTML-em!
</title>
</head>
<body>
Ez a doksi teste.
<p style="color: red;">
Ez az első paragrafus.
Hiába van ez előtt soremelés, ez nem látszik.
</p>
<p>
Ez a második bekezdés, hejj, de jó!
</p>
<script>
alert("itt vagyok");
</script>
</body>
</html>
Az egyik paragrafus betűszíne piros, a stílusát "inline", vagyis helyben állítottuk be. De lehet ezt másképp is, előre is megadhatjuk, hogy a html-ben definiált elemek hogyan nézzenek ki (a kinézet szempontjából hogyan viselkedjenek).
<html>
<head>
<title>
Ez az első HTML-em!
</title>
</head>
<body>
Ez a doksi teste.
<p style="color: red;">
Ez az első paragrafus.
Hiába van ez előtt soremelés, ez nem látszik.
</p>
<p>
Ez a második bekezdés, hejj, de jó!
</p>
<script>
alert("itt vagyok");
</script>
</body>
</html>
Az egyik paragrafus betűszíne piros, a stílusát "inline", vagyis helyben állítottuk be. De lehet ezt másképp is, előre is megadhatjuk, hogy a html-ben definiált elemek hogyan nézzenek ki (a kinézet szempontjából hogyan viselkedjenek).
2014. május 8., csütörtök
Firebug
Nyisd meg a böngészőben az elsohtml.html fájlt.
Keresd ki a firebug ikonját, nyisd meg. Állítsd be úgy, hogy alul jelenjen meg egy kis ablaksávban, egy kényelmes méretben, hogy nagyrészt maga a html látszódjon fenn, alul pedig a firebug.
Keresd ki a firebug ikonját, nyisd meg. Állítsd be úgy, hogy alul jelenjen meg egy kis ablaksávban, egy kényelmes méretben, hogy nagyrészt maga a html látszódjon fenn, alul pedig a firebug.
2014. május 7., szerda
Tartalom és forma
Megvan a notepad++, megnyithatod benne az elsohtml.html fájlt.
Mint láthatod, egyes elemek színekkel ki vannak jelölve, ezzel is segíti a szerkesztő a kód átláthatóságát. Ezt nevezik syntax highlighting -nek. A "szintaktika" szó jelentésére majd még visszatérünk.
Sok más segítséget is ad a szerkesztő (editor): például ha egy blokk elejének jelölőjére kattintasz, mind az elejét, mindpedig a végét egy színnel kiemeli.
Mint láthatod, egyes elemek színekkel ki vannak jelölve, ezzel is segíti a szerkesztő a kód átláthatóságát. Ezt nevezik syntax highlighting -nek. A "szintaktika" szó jelentésére majd még visszatérünk.
Sok más segítséget is ad a szerkesztő (editor): például ha egy blokk elejének jelölőjére kattintasz, mind az elejét, mindpedig a végét egy színnel kiemeli.
2014. április 28., hétfő
A HTML és ami kell
Mindenhol van web, ez a blog is az. Nem árt tudni, hogy mi is ez az egész, mi van a motorháztető alatt.
Feliratkozás:
Bejegyzések (Atom)