Modern és keresőbarát weboldalak tervezése

InformációÉrdeklődés
Tisztelt érdeklődő!
Jelenleg a tanfolyamnak nincs konkrét időpontja. Amennyiben érdeklődőként regisztrálja magát, elősegíti a tanfolyam mielőbbi megszervezését.
Várjuk jelentkezését!
Érdeklődés

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.

 

Óraszám: 40 tanóra (1 tanóra: 45 perc)
Minimum létszám: 7 fő

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.

Belépési feltétel:

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.

Igazolás: Oklevél
Időbeosztás:

Délutánonként, heti 2 alkalom, 17:00-21:00 vagy 4 egész nap

Tematika:
 
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



Érdekel Megosztás

Webmester kategória többi tanfolyamai: