Webszerkesztő Tanfolyam

A weboldalak jelentősége napjainkban vitathatatlan, a multinacionális vállalatoktól kezdve a kisebb vállalkozásokon keresztül egészen a magánszemélyekig mindenki rendelkezhet és egyre többször rendelkeznek is weboldallal, melyek legtöbbször a reklámot, vagy a bemutatkozást szokták elősegíteni, mivel a legtöbb ember ma már a neten keresgél.

Természetesen a weboldal szimpla megléte nem elegendő, mivel a látvány, a kialakítás, a tartalom az egyik legnagyobb befolyásoló tényező, hogy milyen elsőbenyomás születik a felhasználóban miután az oldalra navigál. Továbbá nagyon fontos a felhasználóbarát megjelenés, működés, hogy a felhasználó szeressen az oldalon böngészni.

Tanfolyamunkon a tanulók megismerkednek a web alapvető működésével, a weboldalak alapjaival, a legújabb trendekkel, a legmodernebb technológiákkal, a reszponzivitással, a keresőmotor optimalizációkkal, illetve a weboldalak fizikai elhelyezésének, beüzemelésnek lehetőségeivel, egyszóval mindennel, ami ahhoz kell, hogy egy modern, informatív, minden eszközön jól kinéző valóban XXI. századi weboldalt tudjanak megszerkeszteni és üzemeltetni.

Mindezeket ráadásul olyan professzionális eszközök felhasználásával, mint a webfejlesztésben igencsak elterjedt és elismert JetBrains WebStorm és a pixelgrafikus képszerkesztés királyaként ismert Adobe Photoshop.

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
  • JetBrains WebStorm
  • 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