Dinamikus webdesign
avagy SiteBuild XHTML, CSS és jQuery JavaScript segítségével
Hossz:
40 óra
Az egyes alkalamak
Ár:
69 000 Ft+áfa
ingyenes!
Ez a tanfolyam arról szól, hogyan tudnánk mi, programozók az általunk fejlesztett weblapot kicsinosítani akár saját ötlet, „ízlés” (már ha van :)), akár egy rajzolótól kapott JGP alapján. Milyen módon kell kialakítani egy (szinte) bármely böngészőben jól működő, igényes kinézetű weblapot? A cél érdekében tehát megismerkedünk az XHTML tördeléssel, a CSS stíluslapok képességeivel és lehetőségeivel, valamint a Javascript és JQuery által nyújtott dinamikus képességekkel. Ha esetleg a megvalósítandó design PSD-formátumban áll rendelkezésre, nem árt, ha a hallgató a képet szét tudja vágni megfelelő alkotóelemeire. Ennek érdekében a tanfolyamon némi célirányos Photoshop és Fireworks-kezelés is lesz.
Oktató
Benkő Tibor

Okleveles formatervező, 1998 óta foglalkozik weboldalak tervezésével.

Témakörök
1. HTML és képmanipuláció alapok

- A HTML szintaktikája, HTML elemek (body, div, span, style, h1-h6, p), block versus inline, paraméterek (id és class), CSS csatolás, <img>
- Photoshop, Fireworks képfeldarabolás, felbontás, rétegek, képátméretezés, színmódok: RGB és CMYK, Photoshop, Fireworks optimalizáció (png, jpg, gif), antialiasing
- CSS színek HEX és RGB értéke

2. Pozíciónálás és méretezés

- HTML elemek (a, list, br, nbsp, table)
- CSS-szintaktika, elemazonosítás, kód csoportosítása
- CSS height és width, mértékegységek: pixel, point, mm, em, %, pozicionálás (relative és absolute)

3. Pozíciónálás és méretezés 2.

- HTML elemek (form, inputs)
- CSS pozicionálás (relative és absolute), block versus inline, margin és padding, border

4. Pozíciónálás és szövegformázás

- CSS float, background, z-index, font, color, szövegformázás, custom fonts, background, visibility, display
- CSS bullets, text shadow, grid rendszerek

5. Javascript és jQuery alapok

- Javascript csatolás
- a jQuery bemutatása, jQuery selectorok (basic, attribute, form, hierarchy, visible), jQuery selector filter (basic, child, content),

6. jQuery class és DOM kezelés

- jQuery class kezelés (addClass, removeClass, toggleClass), attribútumok kezelése, méretezés
- jQuery DOM kezelés, elemek másolása, elemek beillesztése (around, inside, outside), elemek törlése, elemek helyettesítése

7. jQuery CSS és események kezelése

- jQuery CSS kezelés (height, width, innerHeight, innerWidth, outerWidth, outerHeight, offset, position, scrollLeft, scrollTop)
- jQuery böngésző-, egér- és billentyűzet események kezelése, (load, ready, unload, scroll, resize, bind, live, click, dblclick, hover, mousedown, mouseenter, mouseleave, mouseout, mousemove, mouseover, mouseup, toggle, keydown, keypress, keyup)

8. jQuery form és saját esemény kezelése

- jQuery form események kezelése, (blur, change, focus, select, submit)
- jQuery saját események kezelése (bind, unbind, live, trigger)

9. jQuery effektusok és queue

- jQuery effektusok (hide, show, toggle, fadeIn, fadeOut, fadeTo, fadeToggle, slideDown, slideUp, slideToggle)
- jQuery queue (effektusok sorba állítása), dequeue, clearQueue

10. jQuery effektusok és animáció

- jQuery effektusok késleltetése, megállítása, törlése (delay, stop, finish)
- jQuery animáció (css tulajdonságok animálása, változók animálása, képkockánkénti eseménykezelés, animáció befejezési eseménykezelés)

11. jQuery adat és Ajax

- jQuery data - adatok hozzárendelése elemekhez
- json adatok, xml adatok
- jQuery Ajax (HTTP request, és események)
- jQuery Ajax (HTTP POST és GET)

12. jQuery UI és touchpunch

- jQuery UI bemutatás (accordion, autocomplete, button, slider, spinner, tabs, tooltip, dialog, datepicker, menu, switchClass)
- jQuery touchpunch

13. jQuery plugin

- jQuery plugin, saját plugin készítése
- jQuery UI widget, saját widget készítése

14. Ergonómia alapok, áttekintés

- ergonómia: méretek, szín, forma; szövegtördelés, elrendezés
- áttekintés

Technikai információk
Részletes technikai információkat csak a képzés hallgatói nézhetik meg bejelentkezés után!
Dinamikus webdesign tanfolyami videók
DW-01-01-A HTML szintaktikája
76 perc
2013. május 22.
DW-01-02-képmanipuláció
68 perc
2013. május 22.
DW-02-01-HTML-Elemek
84 perc
2013. május 27.
DW-02-01-CSS-pzicionalas-meretezes
62 perc
2013. május 27.
DW-03-01-CSS-pzicionalas-margin-display
88 perc
2013. május 29.
DW-03-02-CSS-padding-border-form
59 perc
2013. május 29.
DW-04-01-pozicionalas
87 perc
2013. június 03.
DW-04-02-szovegformazas-gridrendszer
57 perc
2013. június 03.
DW-05-01-pozicionalas-javascriptbeszuras
91 perc
2013. június 05.
DW-05-02-jQueryalapok-szelektor
44 perc
2013. június 05.
DW-06-01-class-kezeles
92 perc
2013. június 10.
DW-06-02-Class-es-DOM-kezeles
53 perc
2013. június 10.
DW-07-01-css-meret-es-pozicio
88 perc
2013. június 12.
DW-07-02-esemenyek-css-kezles
72 perc
2013. június 12.
DW-08-01-esemenyek-kezelese(menuk)
90 perc
2013. június 17.
DW-08-02-jQuery-form-esemenyek
65 perc
2013. június 17.
DW-09-01-jquery-effektusok-queue
84 perc
2013. június 19.
DW-09-02-effektusok-animaciok
24 perc
2013. június 19.
DW-10-01-CSS-mobilra-valtozok-animalasa
89 perc
2013. június 24.
WD-10-02-animacio-kepkockankent-ajax
49 perc
2013. június 24.
DW-11-01-ajax
91 perc
2013. június 26.
DW-11-02-jquery-ajax
49 perc
2013. június 26.
DW-12-01-accordeon-autocomplete
104 perc
2013. július 01.
DW-12-02-jqueryUI-elemek-ajax-autocomplete
55 perc
2013. július 01.
DW-13-01-jquery-plugin-touchpunch
96 perc
2013. július 03.
DW-13-02-jQueryUI-widget
63 perc
2013. július 03.
DW-14-01-ergonomia-attekintes-plugin-javitasok
89 perc
2013. július 08.
DW-14-02-multilanguage-site-sprite-ikonok-gombokra
59 perc
2013. július 08.