HTML5 programozás
avagy a HTML5 nyelv rejtelmei, nem középiskolás fokon
Kezdés:
Ez a tanfolyam már véget ért,
figyeld az új időpontokat!
Hossz:
40 óra
Az egyes alkalmak
Ár:
69 000 Ft+áfa
ingyenes!
Részvételi mód:
Visszanézhető videók
Előfeltételek
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.
Nézd online!
Ezt a tanfolyamot kényelmesen, otthonról is követheted, a képzésrol készült felvételeket bármikor visszanézheted. Kérdés esetén beépített chat segítségével léphetsz kapcsolatba az oktatóval vagy más hallgatókkal. Ha ez a tanfolyam már véget ért, az elkészült videóanyagot Elofizetéssel megvásárolhatod!
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.
Témakörök
1. HTML-elemek, HTML5-írásmód

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.

2. Adatok bekérése, ellenőrzés űrlapokkal, adatbekérő vezérlőkkel(form)

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.

3. Szép színes ábrák vászonra vetése (canvas)

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.

4. Még több színes ábra, ezúttal kicsit másként (svg)

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.

5. Zenék és videók a weblapon (audio, video)

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.

6. Egerész társadalmunk kiszolgálása a Drag and Drop API-val

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.

7. Kommunikáció a webszerverrel ill. weblapokkal

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.

8. Problémás nap
Session, postMessage, JQuery.Ajax
9. Profi hálózati kommunikáció (Web Sockets)

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.

10. A böngésző földrajzi helyének megállapítása (Geolocation)

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.

11. Weblapokat átívelő adattárolás a böngészőben (Storage API)

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.

12. Offline használható weblap, web alkalmazás

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.

13. JavaScript több processzorra komponálva, azaz szálkezelés JavaScripttel (Web Worker API)

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.

14. Optimalizálás mobil eszközökre

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.

15. Desktop alkalmazás HTML-ből?

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.

Technikai információk
Részletes technikai információkat csak a képzés hallgatói nézhetik meg bejelentkezés után!
HTML5 programozás tanfolyami videók
html elemek alapozó
78 perc
2012. március 26.
itfactory recap
76 perc
2012. március 26.
Lista, tábla és form
74 perc
2012. március 28.
form elemek, validáció
83 perc
2012. március 28.
Vasarely, coreldraw
85 perc
2012. április 11.
transform, grafikon
114 perc
2012. április 11.
pixeladatok, animácio
39 perc
2012. április 11.
Kyle, animacio
106 perc
2012. április 16.
Informatikus picasso
92 perc
2012. április 16.
video és audio elem
52 perc
2012. április 18.
videovezérlés javascripttel
28 perc
2012. április 18.
svg controller, javascript player
46 perc
2012. április 18.
drag drop
90 perc
2012. április 23.
filedrop, microdata
40 perc
2012. április 23.
JavaScript alapok
75 perc
2012. április 25.
javascript object, node.js, XmlHttpRequest 01
71 perc
2012. április 25.
problémás nap - Session, postMessage, JQuery.ajax
84 perc
2012. május 02.
Kapcsolat felépítése, üzenetfogadás, KO binding
68 perc
2012. május 07.
Üzenetküldés, rajzüzenet, bináris üzenet
87 perc
2012. május 07.
navigator.geolocation
38 perc
2012. május 14.
google maps api, mini websocket chat
76 perc
2012. május 14.
cookie és localStorage
60 perc
2012. május 16.
FileReader és FileWriter
87 perc
2012. május 16.
indexedDB open és createObjectStore
84 perc
2012. május 21.
indexedDB adatmódositás, applicationCache
91 perc
2012. május 21.
UI szál, egy és több worker
75 perc
2012. május 23.
Eseményfeliratkozás módjai, FileReaderSync
73 perc
2012. május 23.
android sdk kaland, mobile metatag, media query
70 perc
2012. május 25.
orientation api, motion api, window.connection
38 perc
2012. május 25.
svg könyvolvasó példa
56 perc
2012. május 30.
sharpshooter átirat win8-ra
70 perc
2012. május 30.