Ennek a hibának a lényege annyi, hogy bárhogy is próbáljuk állítani a z-indexeket, a fent említett két böngésző esetén az oldalunk legördülő menüje be fog csúszni a videó mögé. Ezt elkerülendő, a kapott beágyazó kód URL-jének a végéhez hozzá kell csapni ezt az értéket: &wmode=opaque

Például:

<iframe title="YouTube video player" src="http://www.youtube.com/embed/T2aoe5UDIFw?rel=0&amp;wmode=opaque" frameborder="0" width="650" height="335"></iframe>

Unas Hosting

URL: http://unas.hu
Ajánlott csomag: Alpha csomag (nettó 6.000 Ft / év)
Szolgáltatások: a csomaghoz jár 1 db ingyen .hu domain; Alpha csomag 500 mb tárhely (jelenleg a Webground Media is egy ilyen táron van, 2 másik weboldal társaságában); korrekt ügyfélszolgálat

Maxer Hosting

URL: http://maxer.hu
Ajánlott csomag: Maxer üzleti webtárhely csomag (nettó 14.700 Ft / év)
Szolgáltatások: a csomaghoz jár 1db ingyen .hu, .com, .eu, .net, .org domain regisztráció; 5 GB webtárhely, 15GB email tárhely

Mobicom

URL: http://mobicom.hu
Ajánlott csomag: Kezdő WP csomag (nettó 5.000 Ft / év)
Szolgáltatások: korlátlan webtárhely, 1 db website számára (1 domain), 24 órás ügyfélszolgálat, egyedi WordPress-tárhely csomagok

Természetesen ezeken kívül is lehetnek még olyan szolgáltatók, akik korrekt árral jó minőséget nyújtanak, de mivel nincs személyes tapasztalatom velük, így nem merném nyugodt szívvel ajánlani őket. Ha kérdésed van egy adott szolgáltatóról, vagy ajánlanál te magad is szolgáltatót, írd meg egy hozzászólásban nyugodtan!

Akismet

Abban az esetben, ha az oldaladon lehetőséget adsz a látogatóidnak arra, hogy hozzászóljanak a cikkekhez (és miért ne adnál?), mindenképpen aktiváld ezt a bővítményt, ami az alap WordPress csomag része. Aktiválás után kimagaslóan jó sikerrel fogja meg a robotokat, spamokat a hozzászólások tekintetében.

Bővítmény weboldala: http://wordpress.org/extend/plugins/akismet/

WP Page-navi

Alapvetően a WordPress sablonjaiban a navigáció a hagyományos, “Újabb bejegyzések / Régebbi bejegyzések” struktúrára épül. Ezen lehet módosítani a Page-Navi segítségével, mely aktiválás és egy apró kód beszúrása után már a normálisabb, oldalszám alapú navigációt tesz lehetővé!

Bővítmény weboldala: http://wordpress.org/extend/plugins/wp-pagenavi/

Google XML-sitemaps

Eljutottál addig, hogy elkészült az oldalad, feltöltötted a kezdő tartalommal, igaz? Jó-jó, de a Google-nek is illene tudnia erről, nem? Ebben segít többek között a Google XML-sitemap nevű bővítmény, aminek a lényege, hogy generál a rendszer XML nyelven egy “térképet” a keresőknek, ami alapján könnyebben navigálnak az oldalon, és tudják, mi is van rajta.

Bővítmény weboldala: http://wordpress.org/extend/plugins/google-sitemap-generator/

Subscribe to comments

Valószínűleg minden látogató, aki hozzászól az oldaladon egy-egy témához, szeretné tudni, ha válasz érkezik rá. Ebbem nyújt segítséget a Subscribe to comments. Telepítés után automatikusan beépül a sablonba, így a hozzászólás írásánál megjelenik egy új lehetőség, miszerint értesítést kérhetünk a bejegyzéshez.

Bővítmény weboldala: http://wordpress.org/extend/plugins/subscribe-to-comments/

NextGen Gallery

A blogok, oldalak nagy részének szüksége van képgalériára. És ha már galéria, akkor NextGen gallery, semmi más! Számos lehetőség, album -, illetve galéria rendezési lehetőség, vízjelezés, diavetítés, stb.

Bővítmény weboldala: http://alexrabe.de/wordpress-plugins/nextgen-gallery/

Zárszó

Ez a lista természetesen nem teljes, hiszen minden oldalnak megvannak a maga saját szükségletei. Te még milyen bővítményeket raknál a listához?

1.Lépés

Első lépésben hozzunk létre egy 800px széles, 30px magas dokumentumot, fehér háttérrel. Természetesen a méretektől el lehet térni, én most jelen esetben egy olyan oldalhoz tervezem a menüt, ahol a tartalmi rész 800px széles, így a felső menüsor kitölti majd az egészet.

2.Lépés

A layers palettán látható background layerre kattintsunk duplán, így átalakíthatjuk ezt az amúgy zárolt réteget hagyományos réteggé. Ha ezzel megvagyunk, az egér jobb gombjával kattintsunk rá a rétegünkre, majd válasszuk ki a Blending Options menüpontot. A felugró új ablakban navigáljunk a Gradient Overlay részre, ahol a gradient részre kattintva állíthatjuk be a színeket. (ha nem a színcsíkra, hanem a lefele mutató nyílra kattintunk, akkor egy legördülő menüben találjuk a gradient-mintákat) Miután megnyitottuk a színátmenet beállításához szükséges ablakot, a mellékelt kép segítségével állítsuk be a színeket. Segítségül álljanak itt a színkódok, valamint a százalékos arányszám, hogy hova kell rakni őket. (új szín-pozíció lehelyezéséhez egyszerűen kattintsunk a csík alatti részre)

• 0%: #94c516
• 52%: #8eb92a
• 52%: #72aa00
• 92%: #a8c732
• 100%: #b9ce44

3.Lépés

A munka felével már meg is vagyunk. Most a Text tool segítségével helyezzünk el menüelemeket a sávon, igény szerint, lehetőleg egyenlő távolságra egymástól. Én 16px méretű Arial betűtípust használtam, vastag kivitelben, fehér (#fff) színben.

4.Lépés

És a záróakkordja a menünek: a hover effect, azaz a gomb azon állapotba, amikor az egeret a menüpont fölé visszük! Ezt egy egyszerű bemélyítéssel fogjuk megoldani! A Layers palettán válasszuk ki a legalsó réteget (amin a zöld színátmenet van), majd az eszköztárból a Rounded Rectangle Tool-t. (Lehet, hogy nem ez lesz aktív, hanem a Rectangle Tool, ebben az esetben nyomjuk le hosszan a gombot, mire a felugró menüből válasszuk ki a megfelelőt.) Mindegy, hogy milyen szín van beállítva a téglalaphoz, utólag meg tudjuk változtatni. Miután kiválasztottuk a megfelelő eszközt, rajzoljunk egy 3px saroklekerekítésű téglalapot az első menüpont “alá”. (a saroklekerekítés mértékét az ablak tetejénél lévő “Radius” értéknél lehet megadni) Ha elégedettek vagyunk az eredménnyel, menjünk be a réteghez tartozó Blending Optionsbe, ott is az Inner Shadow részbe. Állítsuk át az Opacity-t 33%-ra, a Distance-t 3%-ra, a Choke-t 0%-ra, a Size-t pedig 3%-ra. Ezután már csak annyi a dolgunk, hogy a Color Overlay-ben beállítunk egy nekünk megfelelő színt, és készen is vagyunk!

Zárszó

Remélhetőleg sikerült egy kis ihletet adnom, valamint segítséget egy egyszerű, gyorsan kivitelezhető, de látványos menü elkészítéséhez, amit bátran lehet használni szinte bármilyen oldalon!

Az internetet böngészve láthatunk számos különféle formájú, stílusú oldalt, de általánosítva elmondható, hogy megkülönböztethetünk rajtuk 4 különálló szerkezeti részt, bár ebből van egy, amit néha elhagynak. Ezek az egységek láthatóak az oldalt található ábrán is, amit a következőkben részletesebben elemezni fogunk.

Header – Fejléc

Ez az oldal azon része, amit először meglátunk. Itt szokás elhelyezni az oldal nevét, esetlegleges mottóját, valamint ha van, a cég/oldal logóját. Ha vízszintes menürendszerrel dolgozunk, akkor általában az is itt helyezkedik el, de ezen kívül még számos egyéb dolog helyezhető el itt: belépést segítő panel, keresőmező, reklámfelület, stb.

Content – Tartalom

Az összes weboldal fő része, a legfontosabb. Értelemszerűen, itt jelenik meg a lényegi tartalom, az az információhalmaz, ami köré maga az oldal épült. Nagyon fontos, hogy a látványtervezés ne merüljön ki egy bombajó fejlécgrafikában, meg egy-két ikonban. Kiemelt figyelmet kell szentelni arra is, hogy a szöveges tartalom ízlésesen legyen szerkesztve, kiemelve a fontos rész. (linkek megkülönböztethetősége, címek kiemelése, stb)

Sidebar – Oldalsáv

Kiegészítő információk gyűjtőhelye. Itt szokás elhelyezni a különböző feliratkozási lehetőségeket, a friss hozzászólások listáját, reklámfelületeket, bejelentkezési panelt, keresőboxot, másodlagos információkat, tájékoztatókat.

Footer – Lábléc

Manapság már másodlagos oldalsávként is szokott funkcionálni, így ugyan azok a lehetőségek vonatkoznak rá, mint fenti társára. Viszont általában ide még szokás egy-két fontos információt elhelyezni: az oldalt tervező, üzemeltető nevét, egy hivatkozással, ha ingyenes rendszer fut az oldalon (pl WordPress) akkor annak a linkjét. Bizonyos esetekben szokás egy “minimalista” menüt itt is elhelyezni a könnyebb navigáció érdekében.

Összegzés

Mint ahogy az látható, hiába tűnik egy extravagáns oldal spécinek, valamilyen szinten azt is íratlan szabályok szerint építik fel, így pl. nem lesz olyan, hogy az oldal teljes szélességének 80%-ban lényegtelen információk lesznek, míg a maradék 20%-ban lesz a lényegi tartalom.

Caviar Dreams

Betűtípus letöltése: Caviar Dreams betűtípus letöltése

Azóta létezik maga a webdesign, mióta maga az internet megjelent, hiszen a “webdesign” maga a látvány, de közben ennél több is egyszerre. Nézzünk ehhez egy egyszerű példát:

• “A” weboldal: nincs semmi grafika, csak egy hexadecimális színkóddal megadott háttér, előtte valamilyen -remélhetőleg a háttértől elütő- betűszínű ömlesztett (amolyan Háború és Béke hosszúságú) szöveg.
• “B” weboldal: az oldal tetején látható az oldal címe, esetleg szlogenje, oldalt vagy felül egy menüsor található a könnyebb navigáció érdekében, a hosszú tartalom pedig legalább szakaszokra van tördelve, ha nem is oldalakra. Mindez ízlésesen betördelve, a lényeg kiemelve vastag betűkkel, esetleg illusztrálva képekkel, ha olyan a tartalom.

Értelemszerűen a “B” weboldal az, amire azt mondhatjuk, hogy őt “webdesigner” szemlélettel tervezték meg. Itt álljunk meg egy pillanatra, mert valami fontosat mindenképp meg kell jegyezni: a tervezési fázisban nagyon fontos, hogy az, aki a design-t tervezi, tisztában legyen az oldal funkcionális szükségleteivel, az oldal céljával, hiszen hiába tervez ő egy bombasztikusan jó oldalt, ha programozók nem tudnak vele mit kezdeni, mert a funkciókat, amikre szükség lenne, nem tudják benne megfelelően elhelyezni. Ez főként akkor fordul elő, ha a tényleges tartalmi részt, vagy az ún. oldalsávot (ezekről a következő részben lesz szó) rosszul méretezik a tervezésnél.

A fenti példánál maradva még egy nagyon fontos dolgot meg kell még említeni, mégpedig az olvashatóságot. Nem szabad, hogy a látvány, a grafika a weboldal elsődleges funkcióját, a tájékoztatást gátolja, hiszen az internet elsődleges tájékoztató eszköze még mindig az írott szöveg! Lehetőleg próbáljunk meg olyan betűszínt, betűtípust és méretet választani, ami kellemes a szemnek, de azért esztétikus is. (weben a tényleges tartalomra amúgy se szokás speciális betűtípusokat használni, mert nem garantált, hogy minden látogató gépén megtalálható az adott típus.)

Összefoglalva tehát, webdesignnak azt az alkotást nevezhetjük, ami ergonómikus, a felhasználói igényeket teljes mértékben kielégíti, de emellett a weboldalt funkcionálisan kiszolgálja, kiegészíti, és harmonizál a céllal, amiért az adott weboldal létrejött.

Milyen egy jó logó?

Még mielőtt nagyon belemerülnénk a rajzolásba, illetve mindenki beizzítaná a Photoshopot, Illustratort, egyéb programokat, tisztázzuk le, hogy mitől is jó egy logó.

• A jó embléma egyedi: Gondolom ezt nem kell nagyon magyarázni, eléggé öngyilkos megoldás egy már bevált emblémához hasonlót készíteni. Itt természetesen arról van szó, hogy ne csináljunk pl. piros élére állított háromszöget, benne “MOJ” felirattal. 100%-ig egyedi logó nem tervezhető, mert a formák száma véges, a kis apró különbségek viszont sokat jelenthetnek, valamint lehet a betűkkel, formákkal is próbálkozni.
  
• Értelmezhető kicsiben is: Ha nem csak weboldalra szánjuk a logót, hanem nyomtatásra, névjegykártyára is, akkor nézzük meg több méretben is! (10cm*10cm, 5cm*5cm)
• Működjön, értelmezhető legyen inverzben és monokrómban is: Nagyon fontos, hogy úgy tervezzük meg az emblémát, hogy ha kell, fordított színekkel (inverz) is értelmezhető legyen, illetve, hogy monokrómban is jól nézzen ki, hiszen van, amikor monokrómban nyomtatunk. Senki se örül neki, ha egy logó miatt kell színes nyomtatót használni.
• A forma, jelkép illeszkedjen a vállalat stílusához: Elég furán nézne ki, ha mondjuk a “Zöld Dobókocka Rt” logója egy lila lufi lenne, nem? :)

Persze ezek csak a leglényegesebb kritériumok, lehetne még egy halomnyit sorolni, úgy mint: Ne legyen sértő, rasszista, jogvédett logó másolata, stb.

Tervezés

Én személy szerint úgy állok neki a tervezésnek, hogy magamhoz veszek egy ceruzát, meg a négyzethálós füzetemet, majd elkezdek firkálgatni. Itt nem valami Picasso-minőségű rajzokra kell gondolni, ezek amolyan saját magamnak szánt vázlatok. (Ez látszik a fentebbi képen is) Ha nincs konkrét terved, amit szeretnél végigvinni, akkor rajzolj nyugodtan több verziót is, hátha segít a döntésben, de az is lehet, hogy két terv ötvözete lesz az igazi!
Véleményem szerint akkor jó egy vázlat-logó, hogyha ránézel, és nem a skiccet látod ott, hanem bele tudod képzelni a kész, kiforrott, kidolgozott verziót.

Megvalósítás

Miután megterveztük papíron álmaink emblémáját, indulhat a késztermék-gyártás! Betűtípusok terén nyugodtan próbálkozhattok kicsit merészebb dolgokkal, pl. “vágott” betűk (amikor hiányzik egy darab belőle, mint a Webground Media logójában is látható).
Amire fontos figyelni, azok a színek és arányok! Fontos figyelembe venni, hogy az alap “tervezőméret” mellett kisebb méretben is lesz használva, így jobb nem túl sűrű elrendezést, és intenzív színátmenetekeket használni.
Még egy jó tanács, ami igazából egy alapszabály: lehetőleg vektoros formában készüljön a terv, mert így minőség romlás nélkül lehet felhasználni bármilyen célra.

Zárszó

Remélem sikerült egy kicsit segítenem a logótervezésben, illetve ötletet, ihletet adni egy-egy jó kis logóhoz! Nem kötelező jelleggel, de nyugodtan lehet írni ide hozzászólásban az elkészült munkákat ;) És végül, a Webground Media új logója:

]]> http://webground.hu/webdesign-grafika/hogyan-tervezzunk-logot/feed/ 0