Webszerkesztő Tanfolyam

A weboldalkészítés mesterségéhez vezető út első lépése, hogy a szerkesztési alapelvekkel tisztában legyünk. A Webszerkesztő tanfolyam során a résztvevők elsajátítják azt a tudást, amivel a későbbiekben önállóan tudják megtervezni és a gyakorlatban elkészíteni egy modern honlap szerkezeti felépítését (oldalak, menük, menüsáv), valamint a kinézetét is. Megismerkednek a HTML leírónyelv alapjaival, amivel kellő tudást szereznek ahhoz, hogy elkészítsék első saját - statikus - weboldalukat. A megfelelő struktúra mellett a stílus is fontos, így megtanulják a CSS leírónyelv használatát, amiben az igényeknek megfelelő stílusformázásokat lehet beállítani. Természetesen a grafikai elemek sem hiányozhatnak egy esztétikus weboldalról, ezért a weboldalhoz szükséges képek szerkesztéséhez a Photoshopot hívják segítségül. Ha a szükséges webes, valamint szerkesztési és grafikai alapismeretek is elsajátításra kerültek, akkor már csak egy feladat maradt hátra: a keresők első oldalára varázsolni az elkészült oldalunkat.

A tanfolyam megkezdésének feltételei:

Webes alapismeretek

• Hálózati alapismeretek
  • LAN, MAN, WAN kiterjedésű hálózatok
  • Alkalmazás réteg protokolljai (HTTP, FTP, stb.)
  • Internet alapismeretek, TCP/IP protokoll
  • URL (Unified Resource Locator) az erőforrás pontos helyének meghatározása
  • A weboldalak elhelyezésének lehetőségei
  • Domain és DNS (Domain Name Service) működése
• Weboldalak működése, elérése, feldolgozásuk lehetőségei

Webszerkesztés

• Ismerkedés különböző szerkesztőeszközökkel
  • Netbeans
  • Az egyes eszközök összehasonlítása, kinézeti elemzése
• HTML (Hyper Text Markup Language) leírónyelv megismerése
  • HTML áttekintése, fejlődése
  • HTML leírónyelv alapjai
  • HTML dokumentum részei
  • HTML tag-jei és attribútumai
  • HTML gyakorlati feladatok megoldása
• HTML szerkezeti felépítésének megismerése
  • Szövegközi elemek (inline) viselkedése
  • Blokkosított elemek (block) viselkedése
  • Címek, listák, bekezdések
  • Képek kezelése
  • Hivatkozások, horgonyok
  • Gyakorlati feladatok
• HTML szerkezeti elemei
  • Táblázatok létrehozása
  • Táblázat javallat és ellenjavallatok
  • Beágyazott táblázatok
  • Gyakorlati felhasználások
• Első website létrehozása
  • Fájlok szerkezeti elhelyezése
  • Felépítési szabályok
• CSS (Cascading Style Sheet)
  • Elemi doboz modell felépítése
  • CSS elhelyezése (külön fájl, HTML head, style attribútum)
  • CSS elhelyezésének javallatai
  • Tag, Id, Class kiválasztók (Selectors) működése
  • Microsite típusú oldalak felépítésének megkezdése:
    • Paper-prototype megtervezése elkészítése
    • HTML5 szemantikus tagoló elemek ismertetése
    • Az elkészített terv alapján a weboldal fő szerkezeti elemeinek elkészítése
    • Microsite típusú weboldal tartalmi elemeinek megszerkesztése
  • Szövegformázások
  • Díszítések stílussal
  • Saját betűkészlet alkalmazása
  • CSS stíluselemek használatával a végleges kinézet kialakítása
  • Microsite publikálása tárhelyre (FTP kezelés)
  • Validálás (HTML, CSS)

Webes grafika

• Adobe Photoshop pixelgrafikus képszerkesztő megismerése
  • Program alap struktúrája
  • Eszköztárak
    • Eszköztárak
    • Nézetek
    • Paletták
    • Munkaterület
• Adobe Photoshop gyakorlati felhasználása
  • Használható fájlformátumok (gif, jpg, png, bmp, stb.)
  • Csoportos kép átméretezése egyszerűen
  • Pattern (web hátterek) készítése
  • Képek vágása és optimalizálása webre
  • Gyakorlati feladatok megoldása
  • Színkezelés, színek kiválasztása (color scheme)
  • Képmódosító eljárások (image menüpont)
  • Rétegkezelés
  • Szöveg elhelyezése, betűtípus kiválasztása
  • Gomb elkészítése
  • Honnan szerezhetünk be képeket? (Creative Commons)
  • Képek optimalizálása webre
  • Weboldal képváltó egy elemének elkészítése
  • Rétegstílusok
  • Szűrők
  • Effektek
  • Gyakorlati feladat (weboldal logo feliratának elkészítése)

Webszerkesztés haladó szinten

• HTML 5 megismerése
  • HTML 5 újdonságai, lehetőségei
  • HTML 5 támogatottsága különböző böngészőkben
  • HTML struktúra kialakítása (fejléc, menü, képváltó, tartalom, lábléc)
  • Fő blokkelemek kialakítása
  • Menü kialakítása (inline-block elemek)
  • Legördülő menü kialakításának elve
• A JavaScript és jQuery kliensoldali programozásinyelvek alapjainak megismerése
  • JavaScript és jQuery alapok és ismertetés
  • JavaScript és jQuery használata, működése
  • Egyszerűbb JavaScript és jQuery műveletek (színezés, mozgatás és interakció a CSS -sel)
  • jQuery carousel képváltó kiválasztása és beépítése weboldalba
• Weboldalak helyes kialakítása, SEO (Search Engine Optimization)
  • Keresőmotorok működése manapság
  • Keresőmotorbarát weboldal szerkezet
  • Google webmester eszközök
  • Közösségi oldalak ereje
  • Feketekalap veszélyek áttekintése
• Komplex statikus weboldal kép váltójának elkészítése
  • jQuery alapú szabadon felhasználható képváltó lehetőségek
  • Camera slider ismertetése
  • Camera slider telepítése és funkciói
  • Képváltó beépítésének buktatói (minőség, informativitás, méret)
  • könnyen beépíthető CSS animációk (animate.css, hover.css)
• Komplex statikus weboldal – aloldalak
  • Aloldalak típusai
  • Aloldalak (mutációk) elkészítése a főoldal felhasználásával
  • Multimédia elemek beillesztése aloldalakba:
  • Google Maps, Facebook közösségi elemek, YouTube video beágyazása (IFRAME működése)
  • saját hang vagy video beágyazása
  • könnyen beépíthető jQuery alapú eszközök (fitvidjs.com, datatables.net)
• Reszponzív oldalak kialakítása
  • Reszponzív weboldalak kialakításának elve
  • Weboldal megjelenési helyének kiválasztása media-query használatával
• Bootstrap
  • Mi ez és mire használjuk?
  • Reszponzív weboldal keret elkészítése
  • BootstrapZero ismertetése, felépítése
  • Használatának főbb előnyei

Webszerkesztés vizsga

• Elkészített vizsga statikus weboldal leadás, publikálás
• Értékelés