Webdesign I - Oldaltervezés

Az előadások a következő témára: "Webdesign I - Oldaltervezés"— Előadás másolata:

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 1. Mindig értékes és érdekes tartalom jelenjen meg az oldalon!
Példa: A képernyő 20 % tartalmaz csak értékes információt!

5 800x600-as felbontású képernyő 480.000 képpontból áll:
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ő 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

6

7 700x1024-es felbontású képernyő 716.800 képpontból áll:
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ő 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!

11

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

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

14

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 Milyen weboldalt készítsünk? Melyik kitételnek tegyünk eleget? 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 pixel (ez böngészőprg. függő) =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 Misztótfalusi Kis Miklós Kner Izidor Kner Imre
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 ( ) Virágvölgyi Péter ( )

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 a 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: A betű 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 nem tartalmaz magyar ékezetes betűket - sajnos nem STANDARD, mint ahogyan a nevében van -

30 ASCII kódtábla elemei

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

32 UNICODE kódtábla (ejtsd: junikód):
- 16 bites, elemből áll, - a legkisebb tárolható szám: 0, a legnagyobb tárolható szám - 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árolt kódjai az ASCII-nak felelnek meg -

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.

36