Az előadás letöltése folymat van. Kérjük, várjon

Az előadás letöltése folymat van. Kérjük, várjon

Webdesign I - Oldaltervezés alapelvek. I. Tartalom-elhelyezés az oldalon ALAPELVEK 1.Mindig értékes és érdekes tartalom jelenjen meg az oldalon! 2.A tartalom.

Hasonló előadás


Az előadások a következő témára: "Webdesign I - Oldaltervezés alapelvek. I. Tartalom-elhelyezés az oldalon ALAPELVEK 1.Mindig értékes és érdekes tartalom jelenjen meg az oldalon! 2.A tartalom."— Előadás másolata:

1 Webdesign I - Oldaltervezés alapelvek

2 I. Tartalom-elhelyezés az oldalon ALAPELVEK 1.Mindig értékes és érdekes tartalom jelenjen meg az oldalon! 2.A tartalom töltse ki legalább az oldal felét, de jobb ha a 80%-ához közelít! 3.A navigációt a minimálisra kell csökkenteni! 4.Ne legyenek túlságosan nagy méretű, „üres” képek az oldalon! 5.A hirdetéseket jobb volna teljesen kihagyni használhatósági szempontból! 6.Tartalom-kiemelés és elhagyás elve. 7.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: A képernyő 20 % tartalmaz csak értékes információt!

5 - 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 800x600-as felbontású képernyő 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!

6

7 - 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 700x1024-es felbontású képernyő képpontból áll: Példa: 2. A tartalom töltse ki legalább az oldal felét, de jobb ha a 80%-ához közelít!

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

9

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. 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: 1. Böngészőben való megjelenés

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 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 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 A fehér terület tipográfiai jelentősége!

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 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. 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.

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


Letölteni ppt "Webdesign I - Oldaltervezés alapelvek. I. Tartalom-elhelyezés az oldalon ALAPELVEK 1.Mindig értékes és érdekes tartalom jelenjen meg az oldalon! 2.A tartalom."

Hasonló előadás


Google Hirdetések