HTML5 programozás

HTML5 programozás,

avagy a HTML5 nyelv rejtelmei, nem középiskolás fokon

Mottó: Ezzel lehet oprendszert is írni?

A HTML5 egy világszabvány. Aki HTML5-ben ír programot, egyszerre ír Windows 8-ra, Androidra, iPhone-ra, és mindenre, amiben HTML5-kompatibilis böngésző van. Ezen a tanfolyamon megtudhatjuk, hogy vajon a HTML5 valóban egy új programozási rendszer, és nem csak egy nagy "semmi", amit <tagek> közé írnak. Nem véletlenül választották Redmondban a Windows 8 legelterjedtebb programozási felületének a HTML5-öt.
Lesz itt szálkezelés, drag'n'drop, navigációs adatok kezelése, grafika, és minden, amit eddig csak a "komoly" rendszerek tudtak. Ez pedig jó alapot teremt arra, hogy komolyabb, világraszóló alkalmazásokat fejlesszünk.

Kinek ajánljuk
Ezt a tanfolyamot azoknak ajánljuk, akik szeretnék megismerkedni a HTML5 új képességeivel, vagy programozói szabadságra vágynak, mert az szeretnék, ha az alkalmazásuk mindenféle kütyün futna.

Szükséges előismeretek
A HTML-szintaxis ismerete szükséges. Akinek ez nincs meg, a tanfolyam előtt nézze meg néhány weboldal forráskódját, hogy tisztában legyen vele, mik azok a HTML tagek. Emellett nem árt, ha a jelentkező tudja, mi az a ciklus, elágazás, változó, vagy írt már programot bármilyen nyelven bármikor a múltban.

Képzésen tanultak használhatósága a való viágban
A tanfolyam végeztével a hallgatók képesek lesznek interaktív webes alkalmazások elkészítésére, telefonon futó progik barkácsolására, világmegváltó ötletek kivitelezésére.

Technikai tudnivalók online-osok részére
A HTML5-tanfolyamhoz tetszőleges HTML-szerkesztőprogram használható. Az oktató Visual Studiót fog használni, így az előadások követéséhez ez a melegen ajánlott eszköz. A Visual Studió természetesen csak Windows operációs rendszeren fut, és kell neki vagy 4 GB memória.

A tanfolyam hossza:
40óra
Ár (online és tantermi részvétel esetén egyaránt)
Magánszemélyek részére: bruttó 69 000 Ft
Cégek, intézmények részére: 69 000 Ft + áfa
A képzésen 98 fő vett részt.

Oktató

Tóth László (Tocsi)

A NetAcademia vezető fejlesztési oktatója

Részletes tematika és videók

Minden előadásról videó készül, melyet a résztvevők tetszőlegesen visszanézhetnek, illetve le is tölthetnek.
1. nap: HTML-elemek, HTML5-írásmód
2012. március 26., hétfő, 17:00 - 19:30

Bemelegítésként végigszaladunk egy HTML-dokumentum felépítésén. Megnézzük, mik azok a HTML-elemek, és valójában mit jelentenek. Bár nem fogunk minden egyes elemet megrágni - mivel szinte mindenki látott már HTML-t - azért a közös indulási pont kijelöléséhez fontos ez a lépés. És hogy el ne felejtsük: az 5-ös HTML saját elemei ill. a régi elemek átértelmezése sok embernek újdonság lesz.

html elemek alapozó (.zip)
357Kb
html elemek alapozó (.wmv) 1:18:06
276 439Kb
itfactory recap (.zip)
361Kb
itfactory recap (.wmv) 1:16:10
375 969Kb
2. nap: Adatok bekérése, ellenőrzés űrlapokkal, adatbekérő vezérlőkkel(form)
2012. március 28., szerda, 17:00 - 19:30

Egy valamire való webalkalmazás kommunikál a felhasználóval. Másként szólva adatokat szerez tőle. Ennek eszköze a form és a form belsejében használható adatbeviteli vezérlők. Megnézzük hogy működik, milyen probémák merülhetnek fel és azokat hogyan oldhatjuk meg. Így aztán fogunk vízjelezni, adatot ellenőrizni (magyarul: validálás) és megküzdünk pár böngésző inkompatibilitási problémával.

Lista, tábla és form (.zip)
360Kb
Lista, tábla és form (.wmv) 1:14:26
294 984Kb
form elemek, validáció (.zip)
591Kb
form elemek, validáció (.wmv) 1:23:25
365 933Kb
3. nap: Szép színes ábrák vászonra vetése (canvas)
2012. április 11., szerda, 17:00 - 19:30

Ceruzával egyszerű rajzolni. Photoshoppal is. Na de JavaScripttel? Ennek is megvan a maga bája. Sőt a haszna is. A dinamikusan, helyzethez illően megrajzolt kép tudja tükrözni az aktuális állapotot vagy akár egy egész játékprogramnak is helyet adhat. Megszínezzük, összemaszatoljuk a vásznat. Képeket manupilálunk, vagy épp a felhasználói felületet egészítjük ki színes apróságokkal. Később a videóknál még visszatérünk a vászonra festett mozgóképpre is.

Vasarely, coreldraw (.zip)
492Kb
Vasarely, coreldraw (.wmv) 1:24:56
320 308Kb
transform, grafikon (.zip)
478Kb
transform, grafikon (.wmv) 1:53:46
487 396Kb
pixeladatok, animácio (.zip)
523Kb
pixeladatok, animácio (.wmv) 0:38:56
184 636Kb
4. nap: Még több színes ábra, ezúttal kicsit másként (svg)
2012. április 16., hétfő, 17:00 - 19:30

A vászonra rajzolt dolgok fix méretű pixeles ábrák. Egy másik API-val megnézzük, hogy a JavaScript mellőzésével HTML-szerűen is alkothatunk képeket. Ezek ún. vektoros képek, melyek minőségromlás nélkül tudnak igazodni a kicsi és a hatalmas monitorokhoz egyaránt. Emelett a letöltendő adatmennyiségük nagyságrendekkel kevesebben, mint a pixeles képeké. A rajtuk, bennük megjelenített szövegek kiválaszthatók, sőt keresőmotorok által értelmezhetők.

Kyle, animacio (.zip)
430Kb
Kyle, animacio (.wmv) 1:46:00
564 066Kb
Informatikus picasso (.zip)
358Kb
Informatikus picasso (.wmv) 1:31:33
424 068Kb
5. nap: Zenék és videók a weblapon (audio, video)
2012. április 18., szerda, 17:00 - 19:30

Hát hajoljunk meg a tömegek igényei előtt, legyen videó a HTML-ben is. Egyszerűen írjuk be a HTML-be, hogy video. Hát ennyire azért nem rózsaszín a helyzet. Megnézzük, milyen formátumokat lehet illetve érdemes használni. Megtanuljuk vezérelni a lejátszást az audio és video elemekhez tartozó API segítségével.

video és audio elem (.zip)
357Kb
video és audio elem (.wmv) 0:52:16
222 625Kb
videovezérlés javascripttel (.zip)
357Kb
videovezérlés javascripttel (.wmv) 0:28:28
127 663Kb
svg controller, javascript player (.zip)
359Kb
svg controller, javascript player (.wmv) 0:45:47
224 677Kb
6. nap: Egerész társadalmunk kiszolgálása a Drag and Drop API-val
2012. április 23., hétfő, 17:00 - 19:30

A drag drop-ot nem kell magyarázni senkinek. A megvalósítása azonban határozott támogatás nélkül sokkal bonyolultabb, mint azt elsőre bárki is gondolná. Szerencsére már a HTML API-ja is támogatást nyújt. Megnézzük, hogyan tudjuk ezt kihasználni.

drag drop (.zip)
646Kb
drag drop (.wmv) 1:30:15
380 341Kb
filedrop, microdata (.zip)
541Kb
filedrop, microdata (.wmv) 0:40:22
182 918Kb
7. nap: Kommunikáció a webszerverrel ill. weblapokkal
2012. április 25., szerda, 17:00 - 19:30

XmlHttpRequest Level 2 és postMessage API

Megismerkedünk az AJAX alapját is képező XmlHttpRequest objektummal, annak is a felokosított változatával. Így lehtőségünk lesz hazaszólni a szerverünknek ha kifogytunk az adatokból, vagy épp a felgyülemlett terhet szeretnénk nála lepakolni. Gyakran lehet szükség olyan adatcserére, ami nem az otthoni szerverünkkel történik, esetleg más megnyitott weblapokkal szeretnénk összedolgozni. Eddig ez a szoros biztonság miatt szinte lehetetlen volt (legalábbis a HTML keretein belül maradva). Most azonban a postMessage API segíteni fog.

JavaScript alapok (.zip)
357Kb
JavaScript alapok (.wmv) 1:14:53
286 961Kb
javascript object, node.js, XmlHttpRequest 01 (.zip)
362Kb
javascript object, node.js, XmlHttpRequest 01 (.wmv) 1:11:24
289 632Kb
8. nap: Problémás nap
2012. május 2., szerda, 17:00 - 19:30

Session, postMessage, JQuery.Ajax
problémás nap - Session, postMessage, JQuery.ajax (.zip)
1 762Kb
problémás nap - Session, postMessage, JQuery.ajax (.wmv) 1:23:41
346 066Kb
9. nap: Profi hálózati kommunikáció (Web Sockets)
2012. május 7., hétfő, 17:00 - 19:30

A weblapok protokollja a HTTP. Ez sajnos történelmi alapon egy kapcsolatmentes, szenilis csatorna. Kérted, kaptad, felejtsünk stílusban. A közelmúltban gyakran keserítette meg életünket. De most itt a TCP alapú, szerű új kommunikációs csatorna, a Web Sockets. Kétirányú állandó csatorna kiépítésével emlékezni képes, emiatt (nagyon) kevés adattal is értelmesen kommunikáló, gyorsan reagáló megoldáshoz juthatunk. Bár ez a technológia rengeteg lehetőséget hordoz magában, a leggyakoribb probléma, amit mi is körbe fogunk járni, a chat.

Kapcsolat felépítése, üzenetfogadás, KO binding (.zip)
405Kb
Kapcsolat felépítése, üzenetfogadás, KO binding (.wmv) 1:7:44
292 833Kb
Üzenetküldés, rajzüzenet, bináris üzenet (.zip)
1 312Kb
Üzenetküldés, rajzüzenet, bináris üzenet (.wmv) 1:26:39
391 754Kb
10. nap: A böngésző földrajzi helyének megállapítása (Geolocation)
2012. május 14., hétfő, 17:00 - 19:30

Ma már az emberek a zsebükben hurcolják magukkal a webböngészőt. Ideális lehetőség, hogy helyzetérzékeny funkciókkal vadítsuk meg a webalkalmazásunkat. Jó, de hol vagyunk?

GPS? Akár, de nem feltétlenül. Ahogy az emberek is rengeteg egymástól független adat alapján meg tudják határozni saját helyüket (utcatábla, csillagok állása vagy hol is ittam az utolsó pohárral) úgy a hálózaton lógó számítógépek is több forrásból táplálkozhatnak. Ott van mindjárt az IP-cím. Amivel akár városszintig is elmehetünk. Wifi hotspotok, GSM-adótornyok vagy akár GPS-vevő. Ezekre mindre tud támaszkodni a Geolocation API, meynek segítségével helyzetérzékeny szolgáltatáskat adhatunk, vehetünk igénybe vagy épp csak kirajzolhatjuk, hogy a böngészőnk szerint holl vagyunk a térképen.

navigator.geolocation (.zip)
505Kb
navigator.geolocation (.wmv) 0:37:48
198 729Kb
google maps api, mini websocket chat (.zip)
506Kb
google maps api, mini websocket chat (.wmv) 1:15:55
397 375Kb
11. nap: Weblapokat átívelő adattárolás a böngészőben (Storage API)
2012. május 16., szerda, 17:00 - 19:30

A webalkalmazás személyre, szituációra szabott működéséhez gyakran van szükségünk adatokra az előző lapon vagy lapokon tett ténykedésekről. Esetleg tegnapról. A Cookie segített ebben eddig is. Ennél azonban sokkal robosztusabb, hatékonyabb megoldás a Storage API. Annyira, hogy akár SQL-szerű működést is meg lehet vele valósítani a böngészőben. Ennek az API-nak nézzük meg az alapjait és próbáljuk ki, mi mindent bízhatunk a felhasználó böngészőjére megőrzés céljából.

cookie és localStorage (.zip)
430Kb
cookie és localStorage (.wmv) 1:0:05
243 143Kb
FileReader és FileWriter (.zip)
488Kb
FileReader és FileWriter (.wmv) 1:27:06
389 817Kb
12. nap: Offline használható weblap, web alkalmazás
2012. május 21., hétfő, 17:00 - 19:30

Ha már tudunk a böngészőben átmenetileg adatokat tárolni, a HTML-t dinamikusan változtatgatni, akkor miért is zavarna minket, hogy nem adatott meg az örök életű folyamatos Internetelérés? Megnézzük azt a pár apró dolgot, amivel koordinálni tudjuk azokat az eseteket, amikor valaki kihúzza az alkalmazásunk alól a talajt (meg az utp madzagot a falból). Ha a Windows 8-ra írunk HTML5-progit, bátran számíthatunk arra, hogy a futtató masina nem lát ki a webre, mert például külföldön van a tablet, kirándul, és nincs ingyenes WiFi a közelben.

indexedDB open és createObjectStore (.zip)
358Kb
indexedDB open és createObjectStore (.wmv) 1:24:07
362 128Kb
indexedDB adatmódositás, applicationCache (.zip)
359Kb
indexedDB adatmódositás, applicationCache (.wmv) 1:31:28
416 709Kb
13. nap: JavaScript több processzorra komponálva, azaz szálkezelés JavaScripttel (Web Worker API)
2012. május 23., szerda, 17:00 - 19:30

A cím magáért beszél. Most a processzormagok szaporodásának időszaka van. Hogy ezt alaposan ki tudjuk használni, értenünk kell a párhuzamosan, azaz egyidőben egyszerre végrehajtható funkciók írásához. Ezzel nemcsak a kellemetlen lefagyásérzést tudjuk elkerülni bizonyos időigényes feladatoknál hanem konkrétan fel is tudjuk gyorsítani azok működését. A szálkezelés komoly témakör, de itt hozzásimulva a JavaScript egyszerűségéhez, megfelelően visszafogott API-val hatalmas eredményeket produkálhatunk.

UI szál, egy és több worker (.zip)
391Kb
UI szál, egy és több worker (.wmv) 1:14:47
314 406Kb
Eseményfeliratkozás módjai, FileReaderSync (.zip)
357Kb
Eseményfeliratkozás módjai, FileReaderSync (.wmv) 1:13:28
367 421Kb
14. nap: Optimalizálás mobil eszközökre
2012. május 25., péntek, 17:00 - 19:30

Az a hír járja, hogy a mobileszközök átveszik a hatalmat a hagyományos számítógépektől. Nos, mióta léteznek mobileszközök, mindig is külön történet volt azok webalapú támogatása. A kezdetek óta sokat egyszerűsödött a helyzet, hiszen például egy tabletet a mi szempontunkból nem is kell feltétlen külön kategóriaként kezelni. Bár vannak sajátosságai, mint a különféle beépített érzékelők, vagy az egér hiánya. A telefonoknál akadnak további sajátosságok, például a telefonálási képesség! Bár erről egyre gyakrabban megfeledkezünk. No meg az apró képernyő. Ezeknek a sajátosságoknak a kezeléséről szól ez a nap.

android sdk kaland, mobile metatag, media query (.zip)
356Kb
android sdk kaland, mobile metatag, media query (.wmv) 1:9:49
335 420Kb
orientation api, motion api, window.connection (.zip)
356Kb
orientation api, motion api, window.connection (.wmv) 0:38:09
187 807Kb
15. nap: Desktop alkalmazás HTML-ből?
2012. május 30., szerda, 17:00 - 19:30

A kapukon döngető Windows 8 egyik fő fejlesztői platformja is a HTML5. Betekintést nyerhetünk, milyen az, amikor nem weblapot fejlesztünk HTML-lel és JavaScripttel, hanem egy webtől elrugaszkodott, igazi Windowsos alkalmazást alkotunk meg.

svg könyvolvasó példa (.zip)
545Kb
svg könyvolvasó példa (.wmv) 0:55:50
345 251Kb
sharpshooter átirat win8-ra (.zip)
958Kb
sharpshooter átirat win8-ra (.wmv) 1:10:24
423 772Kb