Modern és keresőbarát weboldalak tervezése
Tisztelt érdeklődők!
Tanfolyamainkat a jelenléti képzések mellett Élő virtuális tantermi rendszerben is szervezzük. A képzések élőben zajlanak, ugyanúgy, mintha a tanteremben ülne. Önnek csak a Webinar szoftvert kell telepíteni.
Részleteket tájékoztató oldalunkon olvashat.Sokan úgy gondolják, hogy egy weboldal elkészítése kizárólag a weboldal megjelenésének grafikai megtervezéséből, majd a látványterv HTML és CSS segítségével történő "megrajzolásából" áll.
De vajon a HTML és a web tényleg csak és kizárólag a vizuális látványról szól?
Hiába kreatív és attraktív a weboldal, ha a célközönség nem találja meg, akkor a befektetett munka mit sem ér. Manapság egyre nagyobb hangsúlyt kap a weboldal azon része is, ami közvetlenül nem látható. A gondosan megtervezett, webszabványokon alapuló, minőségi weboldal-kód az alapja többek között a weboldal megtalálhatóságának, a keresőoptimalizálásnak (SEO), az akadálymentes honlapfejlesztésnek, végső soron a felhasználók megelégedettségének.
Hallgatóink egészen az alapoktól megtanulják, hogy miképpen lehet olyan keresőbarát és szabványos HTML kódot írni, ami tisztán a weboldal szemantikai tartalomleírására szolgál. Mindezt a nyelv legmodernebb, HTML5 verzióján keresztül. Gyakorlati példák segítségével részletesen foglalkozunk a tartalom és megjelenés szétválasztásával, a szemantikailag korrekt HTML kódolás alapjaival, a keresőoptimalizálás (SEO) és az akadálymentes webfejlesztés megoldásaival.
Természetesen a jó tartalomhoz felhasználóbarát és attraktív megjelenésnek is társulnia kell. Ennek fényében a tanfolyamon terítékre kerül a weboldalak megjelenését meghatározó, legmodernebb CSS3 nyelv is, a webes kép- és videóformátumokkal, valamint a webes tipográfiával együtt.
A munkaerőpiacon ezt a feladatkört SiteBuilding-nek nevezik, amikor a grafikai tervből a Site Bulider felépíti a HTML-CSS változatot.
A megszerzett ismereteket nagyon hatékonyan lehet használni a különböző tartalomkezelő rendszerek, mint a Joomla, Drupal, Wordpress, stb. sablonjainak elkészítésekor vagy módosításakor.
Tandíj: 80.000 Ft /fő + ÁFA
Kedvezmény: 4.000 Ft + ÁFA (részletek)
Részletfizetés: nincs, a tandíjat egy összegben kell befizetni
Célközönség:
Tanfolyamunkat elsősorban kezdőknek, autodidakta újrakezdőknek ajánljuk, de elvégzésével a webszabványok, a megtalálhatóság, a SEO és az akadálymentes fejlesztés iránt érdeklődő haladók is sok hasznos tudással gazdagodhatnak.
A tanfolyam sikeres elvégzéséhez mindössze valamelyik operációs rendszer (Windows/Linux/Mac OS) biztonságos kezelése, valamint stabil internethasználati tudás szükséges.
A tanteremben lévő gépeken Windows fut, így ha a tanfolyam során nem a saját laptopját (operációs rendszerét) szeretné használni, akkor ismernie kell a Windows használatát. Mivel a kódokat egy platformfüggetlen ingyenes kódszerkesztő (Komodo Edit) segítségével készítjük majd el, így nem előfeltétel egyik ismert vizuális webszerkesztő program (pl. Adobe Dreamweaver, Microsoft Expression) ismerete sem.
Délutánonként, heti 2 alkalom, 17:00-21:00 vagy 4 egész nap
Bevezető | - A korszerű webdesign folyamata - "Első a tartalom" (content first) elve - Statikus és dinamikus weboldalak ismérvei - Milyen eszközökkel készíthetünk weboldalakat? - A tartalom, a megjelenés és a viselkedés szétválasztása - A Progressive Enhancement elve - Webszabványok fogalma és szerepe a fejlesztésben - A szabványosság ellenőrzése |
A weboldalak tartalma és szemantikája | - A dokumentumok és weboldalak struktúrája - Mit jelent a szemantikus jelölés? - A HTML, mint tisztán szemantikai jelölőnyelv - A szemantika fontossága a keresőbarátság és az akadálymentesség szempontjából - A HTML jelölőelemek általános anatómiája - A fontosabb HTML szabványok története és ismérvei |
A szabványos HTML5 kódolás alapjai | - A szabványos HTML5 dokumentum anatómiája - A DOCTYPE definiálása és szerepe - Szabványos karakterkódolás (ISO, Unicode) - HTML szintaktikai szabályok - Szakaszjelző jelölőelemek - Szemantikamentes jelölőelemek (div és span) - Az id, class és lang attribútumok szerepe - Bekezdések és címsorok jelőlése |
A weboldalak megjelenése | - Vizuális, hallható és tapintható megjelenés - Nyers, nulladik szintű megjelenés - A CSS, mint megjelenítési nyelv - A CSS szabványok története és ismérvei - Megjelenési stílusjegyek |
CSS és HTML összekapcsolása | - HTML és CSS kód összekapcsolási lehetőségei - Több stíluslap használata - Média- és eszközspecifikus stíluslapok |
A szabványos CSS3 kódolás alapjai | - A CSS stíluslapok és szabályok felépítése, szintaktikája - Kiválasztók írása - CSS szabályok súlyozása (specifikussága) - CSS szabályok öröklődése - CSS reset fogalma |
CSS alapú layout tervezés alapja | - CSS3 dobozmodel (méretezés, margók, keret, háttér) - Rögzített és rugalmas layout-ok különbségei - Elemek pozicionálási lehetőségei - Elemek vizuális elrejtése |
Egyéb szemantikus HTML jelölőelemek használata és CSS formázása | - Listák (sorszámozott, sorszámozatlan, definíciós) - Linkek - Idézetek - Kiemelések - Rövidítések |
Képek használata a weboldalakon | - Pixeles képformátumok áttekintése (GIF, JPEG, PNG) - Vektoros képformátumok áttekintése (Flash, SVG) - Mikor melyik képformátumot érdemes használni? - Kép elhelyezése a HTML kódban, mint tartalom - Kép elhelyezése a CSS kódban, mint dekorációs elem - Képekkel kapcsolatos keresőbarátsági és akadálymentességi szempontok |
Tipográfia a CSS-ben | - Betűcsaládok kiválasztása, jellegzetességei - Betűformázás lehetőségei - Beépített és egyedi betűcsaládok használata - Google Fonts használata - Betűméretezés lehetőségei - Térközök formázása - Szövegigazítás, szövegtranszformáció - Ikon fontok használata |
Videó és audió használata a weboldalakon | - Weben használható videó és audió formátumok áttekintése - HTML5 videó és audió beillesztése - Youtube videó beillesztése |
Szabványos táblázatok | - Mikor és mire használunk táblázatokat? - HTML táblázatok anatómiája - Táblázatok CSS formázása - Táblázatok akadálymentességi szempontjai |
Szabványos űrlapok | - Mikor és mire használunk űrlapokat? - HTML űrlapok anatómiája - Jellegzetes űrlapelemek (űrlapmezők, címkék, gombok) - Űrlapok akadálymentességi szempontjai |
Keresőbarátság növelése | - Mikroformátumok és mikroadatok elhelyezése a HTML kódban - Google Webmestereszközök használata - Sitemap.xml és robots.txt |
A weboldal teljesítményének mérése | - Online Marketing eszközök - Látogatottság mérése - Adwords és Facebook hirdetések átkattintás-mérése - Mi a konverzió? - Landing Page és Thank You page |