Webdesign I - Oldaltervezés

1. Webdesign I - Oldaltervezés alapelvek

2. I. Tartalom-elhelyezés az oldalon ALAPELVEK • Mindig értékes és érdekes tartalom jelenjen meg az oldalon! • A tartalom töltse ki legalább az oldal felét, de jobb ha a 80%-ához közelít! • A navigációt a minimálisra kell csökkenteni! • Ne legyenek túlságosan nagy méretű, „üres” képek az oldalon! • A hirdetéseket jobb volna teljesen kihagyni használhatósági szempontból! • Tartalom-kiemelés és elhagyás elve. • A fehér terület szerepe. => Böngészőben való megjelenítés!

3. 1. Mindig értékes és érdekes tartalom jelenjen meg az oldalon!

4. Példa: 1. Mindig értékes és érdekes tartalom jelenjen meg az oldalon! A képernyő 20 % tartalmaz csak értékes információt!

5. 2. A tartalom töltse ki legalább az oldal felét, de jobb ha a 80%-ához közelít! 800x600-as felbontású képernyő 480.000 képpontból áll: - 31% keret (oprsz. és böngésző) - kék - 20% értékes információ (térkép) - zöld - 23% navigáció - sárga - 10% hirdetés - rózsaszín - 16% kihasználatlan terület - fehér

7. 2. A tartalom töltse ki legalább az oldal felét, de jobb ha a 80%-ához közelít! 700x1024-es felbontású képernyő 716.800 képpontból áll: Példa: - 16% (31% volt) keret (oprsz. és böngésző) - kék - 14%(20% volt) értékes információ (térkép) - zöld - 51% (23% volt) navigáció - sárga - 6% (10% volt) hirdetés - rózsaszín - 13% (16% volt) kihasználatlan terület - fehér

8. 3. A navigációt a minimálisra kell csökkenteni!

9. 3. A navigációt a minimálisra kell csökkenteni!

10. 4. Ne legyenek túlságosan nagy méretű „üres” képek az oldalon!

12. 5. A hirdetéseket jobb volna teljesen kihagyni használhatósági szempontból!

13. 6. Tartalomkiemelés és elhagyás elve.

15. A fehér terület szerepe => Böngészőben való megjelenítés! => Tipográfiai jelentősége!

16. Milyen weboldalt készítsünk?Melyik kitételnek tegyünk eleget? 1. Böngészőben való megjelenés 1. Minidig ugyanolyan képet mutasson a weblap! vagy 2. Weblapunk maximálisan használja ki a számára adott területet! 1. Fix szélességű oldalak 2. Alkalmazkodó szélességű oldalak Kérdés melyik állítás a fontosabb a kettő közül! Ennek megfelelően 2 típus létezik:

17. 1. Fix szélességű oldalak • Álló A4-es lap formájához hasonlíthatóak leginkább, a lap a rajta lévő tartalommal együtt függőlegesen gördíthetőek • Bármilyen képernyőfelbontásban vagy bármekkora böngészőablak méretben nézzük őket, ugyanúgy jelennek meg • Grafikus megközelítés, megbízható megoldás.

18. Az index.hu designerei az oldalt 977 pixel szélességű layoutora tervezték, azaz 1024x768-as képernyőfelbontásra optimalizálták. • A görgetősáv ebben a felbontásban kb. 25-30 pixel (ez böngészőprg. függő) • 1024-977=47, a görgetősáv számára tehát van hely bőven. • Ha valaki ezt az oldalt 1280x800-asban nézi, akkor neki egy felesleges fehér sáv jelenik meg jobb oldalt. • Ha viszont valaki a 800x600-as felbontásban nézi az oldalt, akkor a piros csík előtti részt látja csak és megjelenik neki a vízszintes görgető.

19. 2. Alkalmazkodó szélességű oldalak • Képernyőfelbontáshoz és ablakmérethez vízszintesen alkalmazkodó weboldalak tartoznak ebbe a csoportba. • Úgy is nevezzük őket, hogy flexibilis weboldalak. • A vízszintesen rendelkezésére álló terület méretétől függ megjelenésük. • Ezt úgy oldják meg, hogy a megjelenítendő tartalom táblázatba van helyezve és a táblázat szélessége pedig a kerethez viszonyítva százalékban van megadva. • A böngészőablak méretét változtatva mindig a számára rendelkezésre álló helyet igyekszik kitölteni, mindezt úgy, hogy az összes tartalmat megjelenítse. Ennek érdekében például áttördeli a szöveget, képek pedig összébb csúsznak.

20. wiki 1280 pixeles ablakban megjelenítve

21. wiki 850 pixel széles ablakban megjelenítve

22. 2. Tipográfia Tipográfia: kép és szöveg együttes elrendezésével foglalkozik. A tipográfiát hagyományosan a grafikai tervezéssel, főként a nyomdai termékek tervezésével kapcsolatosan szokás említeni. Jelentése: típusokkal írni (a 16. sz. óta ismert kifejezés) A weboldalakon alkalmazandó sok szabály nagy része a nyomdászat régi szabályai közül került át.

23. A régi nyomdász egyben tipográfus is volt A nyomdász felelt az oldalak kialakításáért, amihez ismernie kellett az évszázadok alatt kialakult szabályokat, melyekkel: • szép, esztétikus • jól olvasható, • áttekinthető kiadványok születhettek meg. Ez az elsődleges fő cél a kiadványok szerkesztésekor.

24. Jeles személyek Akik a nyomdászat mesterségét és a tipográfia művészetét űzték Magyarországon: Misztótfalusi Kis Miklós Kner Izidor Kner Imre Tevan Andor Két további személy, a legutóbbi kor két kiemelkedő tipográfusa Magyarországon: Haiman György (1914-1996) Virágvölgyi Péter (1948-1998)

25. Virágvölgyi Péter: A tipográfia mestersége számítógéppel A számítógépek elterjedésével a tipográfia a hagyományos szakmai területen kívül került, s már a legegyszerűbb szövegszerkesztő program használata esetén is számos tipográfiai döntést kell hozni. Ez a kézikönyv a számítógépes tipográfia tankönyve, melyben természetes módon a tradicionális, évszázados ismeretek és a legújabb fogalmak egyforma hangsúllyal vannak jelen. Olyan ismereteket közöl, amiket a szövegszerkesztő vagy tördelőprogramok leírásán túl tudni kell ahhoz, hogy kulturált tipográfiai formába tudjuk önteni szövegeinket. A kötetet irodalomjegyzék, fogalommagyarázatok, angol - magyar szószedet és tárgymutató egészíti ki.

26. A fehér terület tipográfiai jelentősége! „A fedett és üresen maradó részek együttes hatása érvényesül a művekben!” A nem fedett részek legalább annyira fontosak, mint a fedettek; így keletkezik az egész! betű + betűköz = szó szó + szóköz = sor sor + sorköz= hasáb (szövegtömb,szövegfolt) hasáb + hasábköz + margó = oldal

27. A tipográfia elemei • betűk*, számjegyek, írásjelek • a fentiekből létrehozott szövegfoltok • képek, grafikák, díszek vonalak a  12 − dzs : % !

28. A kép lehet: • Fénykép • Rajz (árnyalatos, vonalas) • Embléma • Ábra • Grafika • Folyamatábra • Művészi grafika(fekete-fehér, vonalas, folt hatású) A szöveg és kép által létrehozott folthatás nem ugyanaz, a szövegfolt küllemében általában nem hordoz információt (kivétel: kaligramma, ASCII-art). A kép azonnali hatású: azonnal közöl információt és vált ki érzelmet. A betű lehet: • Informatív; • Díszes; • Közömbös; • Vonzó; • Hivatalos; • Személyes A szg.-en használatos jelkészletek (fontok) jelentős része nem is betűket tartalmaz, emiatt nevezzük őket inkább jeleknek. Informatikus megközelítésben pedig karaktereknek.

29. A karakterek tárolása A karakterek egy kódtábla elemei, kódtábla szükséges a szövegek számítógépen történő tárolásához. ASCII kódtábla (American Standard Code for Information Interchange): - 8 bites, 256 féle különböző jele tárolható, - a legkisebb tárolható szám: 0, a legnagyobb tárolható szám 255 - nem tartalmaz magyar ékezetes betűket - sajnos nem STANDARD, mint ahogyan a nevében van - http://hu.wikipedia.org/wiki/ASCII

30. ASCII kódtábla elemei

31. ASCII kódtábla elemei Á, á É, é Í, í Ó, ó Ö, ö Ő, ő Ú, ú Ü, ü Ű, ű

32. UNICODE kódtábla  (ejtsd: junikód): - 16 bites, 65.536 elemből áll, - a legkisebb tárolható szám: 0, a legnagyobb tárolható szám 65.535 - minden nemzetállammal rendelkező népcsoport karaktereit tartalmazza - UTF-8: a karakterkódolás algoritmusa - az UTF-8 változóhosszúságúkódolással(1–6 byte) képezi le a Unicode karaktertáblát - 1 byte-on tároltkódjaiazASCII-nakfelelnekmeg - http://hu.wikipedia.org/wiki/Unicode

33. Néhány példa arra, mikor a szövegek képi elemekké válnak (James Joice)

34. Gramofon – írógéppel készült karakterekből

35. művészet technika Ma már léteznek olyan programok, melyek karakterekből fel tudnak építeni egy megadott képet.