Honlapszerkesztés

Informatika tanár szak, nappali tagozat
Programtervező matematikus szak, nappali tagozat
Programtervező informatikus, MSc - Médiainformatika szakirány, nappali tagozat

Időpont

Csütörtök 11:15-12:45, PC9

Tárgyleírás

A kurzus célja, hogy megismerkedjetek keresőmarketing és a keresőoptimalizálás alapjaival, a weblaptervezés ergonómiai elveivel, és azokkal az eszközökkel, amelyekkel korszerű, ízléses weboldalakat hozhattok létre. A kötelező beadandó feladatként egy olyan komplex feladatot kell megoldanotok, amely később akár referencia munkának is alkalmas lehet, egy álláshirdetésre történő jelentkezéskor. Ezért (is) fontos, hogy igényes munkát adjatok ki a kezetekből.
Tárgyfelelős: Abonyi-Tóth Andor, http://people.inf.elte.hu/abonyita/

Követelmények

A félév során két feladatot kell teljesíteni a hallgatóknak. Az órákon megjelenni KÖTELEZŐ!

Keresőoptimalizálási feladat

Feladatotok egy olyan weboldal készítése és publikálása, amely a később megadott kulcsszó köré épül. A cél az, hogy a Google keresőben erre a kulcsszóra keresve minél előkelőbb helyen helyezkedjen el az oldalad a találati listában.
A kulcsszó: később kerül megadásra

A weblap elkészítésének és publikálásának határideje: Később kerül meghirdetésre.

A honlapot tetszőleges szerveren elhelyezhetitek. A honlap url-jét a webszerkesztés portálon is meg kell adni a fenti határidőig.
A háziversenyben az nyer, akinek a weboldala a szorgalmi időszak végén az első helyet foglalja el a Google találati listájában.
Az oldalon szerepelnie kell a következő szövegnek:
"Az oldal az ELTE IK Web-szerkesztés kurzusának keretében készült, a keresőprogramok muködésének tanulmányozása céljából".

A félév végére továbbá be kell adni egy ún. SEO naplót is, amely tartalmazza, hogy a keresőoptimalizálási versenyben résztvevő honlappal kapcsolatban mikor, milyen módosítás történt.

Honlapkészítés feladat

Feladatotok egy képzeletbeli cég honlap arculatának megtervezése és a weboldal megvalósítása, az órákon ismertetett elvek figyelembevételével. A specifikációt később tesszük közzé.

Ügyeljetek a következőkre:

  • Minél jobban használjátok ki a stíluslapokban rejlő lehetőségeket, a tartalmat és megjelenést válasszátok szét! A különböző tartalmi elemeket önálló DIV elemekben helyezzétek el!
  • Amikor a felhasználói felületet tervezitek, az előadásokon ismertetett ergonómiai elveket maximálisan vegyétek figyelembe!
  • A weboldalak a leggyakrabban használt böngészők mindegyikén működjenek (Opera, Firefox, IE)
  • A hátrányos helyzetű felhasználók igényeit is vegyétek figyelembe a tervezésnél!
  • A weboldalak feleljenek meg a szabványoknak, a validálást a http://validator.w3.org oldalon ellenőrizzétek!
  • Ne csak a kezdőlapot készítsétek el, minden olyan oldalt tervezzetek meg, készítsetek el (és töltsetek fel tartalommal), amely az elképzelésetek szerint egyedi struktúrájú lesz.
  • A menüpontok helyét/struktúráját úgy alakítsátok ki, hogy az igény szerint bovíthető legyen.

Beadandó:

  • az összes forrásállomány
  • a grafikai terv raszteres (tömörítetlenül, vagy veszteségmentes tömörítéssel) vagy vektoros formátumban

Feltöltési határidő (Céges weblap/logó/arculati terv/ SEO napló): Később kerül meghirdetésre.
Javítási határidő: Később kerül meghirdetésre.

Utolsó héten mindenkinek be kell mutatnia a munkáját (ajánlott jegy és értékelés) Aki határidőre nem tölt fel anyagot/vagy nem éri el az elégséges szintet, az nem kaphat jegyet!

Határidők:

Első beadandó feladat (SEO) feltöltési határideje: Később kerül meghirdetésre!

A honlapok beadásának határideje: Később kerül meghirdetésre!

Honlapok értékelése a gyakorlatvezető által: Később kerül meghirdetésre!

Honlapok módosítása a visszajelzések alapján: Később kerül meghirdetésre!

Gyakorlati jegyek véglegesítése, rögzítése az ETR-ben: Később kerül meghirdetésre!

Tematika

- Ergonómia, marketing, céges weboldalak specialitása
- Keresőoptimalizálás, keresőmarketing
- Stíluslapok használata (elmélet), tippek és trükkök
- Stíluslapok használata a Frontpage 2003-ban
- Kódszíntű szerkesztőprogramok lehetőségei
- A Dreamweaver program részletes bemutatása (siteok készítése, css támogatás, sablonok használata)
- Grafikai programok (PSP 7, GIMP) használata.
- Rétegek használata az arculattervezés során
- Objektumelvű program (Inkscape) logo tervezéshez
- Logótervezés
- Website tervezése

Óra Dátum Gyakorlat
1. 02.17. Web-ergonómia ismérlés. Keresőoptimalizálás, keresőmarketing. Google
2. 02.24. Gyakori képmanipulálási feladatok megoldása
3. 03.03. Rétegek kezelése és maszkolás
4. 03.10. Logótervezés
5. 03.17. Stíluslapok használatának elméleti háttere
6. 03.24. Arculattervből HTML + CSS oldalsablon készítése
  03.31. Elmarad
7. 04.07. Arculattervből HTML + CSS oldalsablon (Sharepoint Designerben). Sablonkészítés Dreamweaverben
8. 04.17. Dreamweaver egyéb lehetőségei, reguláris kifejezések
  04.21. Szünet
9. 04.28. Beadandó elkészítése, konzultáció. Web-marketing ismertető. Keresőmarketing a gyakorlatban.
10. 05.05. Feladatok feltöltése, értékelés
11. 05.12. Bemutató + weblapok javítása
12. 05.19. Konzultáció a javításokról
vizsga   Gyakorlati jegy véglegesítése

Ajánlott irodalom

Letölthető segédanyagok

Cím Fájlméret Fájlnév
Webmarketing, keresőoptimalizálás előadás
1 784 kb
 keresooptimalizalas.pdf
Webmarketing, keresőoptimalizálás előadás - ÚJ
1 859 kb
 Web_marketing-SEO.pdf
Képek a képszerkesztés feladatsorhoz - GIMP
1 716 kb
 gimp_kepek.zip
Web galéria
122 kb
 webgaleria.zip
CSS pozícionálás, z-index példák
448 kb
 css_peldak.zip
CSS pozícionálás, z-index példák - kipróbálható
-
 Itt kipróbálható
Logótervezés
1 476 kb
 Logo-2011.pdf