2014. július 19., szombat

CreateJS

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

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.

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