Az első részben szó esett az általános jellemzőkről, az oldal elrendezéséről, méreteiről és a szövegek formálásáról. Ez a rész egy más megközelítésből szemlélteti a webkettes karaktersziszikákat.

Pozitív egyszerűség

Régebb is említettem, hogy az egyszerűség egy etalon a web 2.0 világában. Ezt most mélyebben is elemezném: mit is értek a pozitív egyszerűség alatt. Vegyük alapul a valós életet: ha van egy megoldásra váró feladat és két megoldási lehetőség, melyiket választjuk? Természetesen az egyszerűbb nyeri el a tetszésünk! Így van ez a weben is: a böngészőt nem érdekli, hogy mennyi mindent lehet belemocskolni egy jó, tartalmas, weboldalba. A látogatókat a tartalom érdekli; az, hogy egyszerűen megtalálja, szinte elvárássá vált.
Ha például egy weboldalt teleszúrkálunk mindenféle widgettekkel, annak nem lesz jó vége, mivel a látogató a csicsás dolgokra fog odafigyelni és nem lesz már türelme/ideje az igazi tartalom megtalálására. A hasonló kellemetlenségek elkerülésére több egyszerüsítő módszer is van a gyakorlatban. Egy bevált eljárás, ha eltüntetjük a fő tartalomhoz szorosan nem tartozó elemeket vagy kevesebb figyelemfelkeltést biztosítunk ezeknek az elemeknek. Ugyancsak ide tartoznak a sokak szerint dekorálásnak tartott, úgynevezett webkettes megbélyegzések. Az ikonok, kitűzők és egyébb szemkápráztató elemek fő célja a figyelemfelkeltés: a fontos információra való figyelmeztetés.
Elolvasom a teljes bejegyzést »

Az előbbi cikkekben (web 2.0 gyorstalpaló, web 2.0 műszaki szemmel) nem került kihangsúlyozásra a webkettes esztétikum. Ebben a bejegyzésben megpróbálom körülírni és megmagyarázni a webkettő grafikai szokásait.

Általános vonások

Szinte minden webkettes weboldalon találhatunk színátmenetet, kontrasztot, letisztultságot, harmadik dimenziót, ikonokat és sok-sok szabadhelyet. Bizonyára sokan megkérdik magukban: mi az új? Talán semmi! Minden esetre, abban gondlom mindenki egyetért, hogy régen nem volt ilyen népes a jól megformált weboldalak tömege. Több dolgonak is köszönhető ez, köztük a jobb eszközöknek, a web fejlődésének, de akár az inspiratív odalaknak is! A következő részben sorraveszem a legfontosabb elemeket.
Elolvasom a teljes bejegyzést »

A minap láttam egy érdekes weboldalt a neten böngészve és megtetszett rajta egy felhős design. A lényeg, hogy most eszembe jutott és leírom, hogyan lehet olyan kis aranyos felhőket készíteni Photoshoppal. Első lépésként hozz létre egy új dokumentumot, fehér háttérrel. Második lépésként válaszd az Elliptical Marquee Tool-t. Magyar változatban valami hasonló lehet: ovális kijelölési eszköz. Válaszd azt a lehetőséget, hogy a kijelöléshez adja hozza az újabb kijelölést, majd készíts egy nagy ovális kijelölést, amihez hozzáadod a kis kijelöléseket, így kapva egy felhőt. Természetesen ez még egyszínű, de már csak egy lépésre vagy a valóságtól.
Elolvasom a teljes bejegyzést »

Ebben a bejegyzésben egy listát találsz azokkal a fájlokkal, amelyeknek speciális értékük van a Wordpress számára. Miért fontos ez? Azért, mert ha egy jó sablont akarsz készíteni, akkor pontosan tudnod kell, melyik fájlt, milyen esetben használd a legmegfelelőbb eredmény elérése érdekében.
A legfontosabb fájl a style.css. Ezt kötelező módon tartalmaznia kell a sablonnak a megfelelő fejléccel, mivel ez az a fájl, amely a sablon definícióját végzi. Ha nem tartalmazza a fejlécet, akkor is működik, de van eset, hogy egyéb történik, mint amit elvárunk (pl. egyes esetekben a Default sablont hozza be, ha nincs fejléc).
Elolvasom a teljes bejegyzést »

Ebben a leírásban a sablon fájlok kerülnek nagyító alá. A sablon kód fájljai egy vagy több PHP fájlból állnak. Akárhogyan is extrém eset az, ha csupán az index.php állomány áll rendelkezésre. A Wordpress a hivatkozásból próbálja eldönteni, hogy melyik sablon a legrelevánsabb és hívódik meg, mint afféle parser a kérésre. Első lépésként azt nézi, hogy milyen kategóriájú a kérés: pl. Keresés, Arhívum, Bejegyzés, stb. Ha megvan a típus, akkor megpróbálja meghívni a kellő sablont, viszont, ha az nem létezik, akkor lejjebb ugrik a hierarchiában, így eljutva az index.php oldalig, ha nincs más létező állomány.
Elolvasom a teljes bejegyzést »

Janoszen weboldalán találtam rá egy érdekes leírásra, ami ötletet adott a leíráshoz. A téma: Wordpress sablon készítése. Ahhoz, hogy egy sablon tudjál készíteni, kell tudjál HTML-t, CSS-t és PHP-t is. Ajánlott olvasmány a WP dokumentációja és a Wordpress codex is.
A Wordpress sablonok két fő részből állnak: a programozási része, PHP fájlok, és a design része, CSS fájl(ok) és a hozza tartozó képek. A sablon a wp-content/themes/ mappaban kell legyen. Pontosabban a megadott mappában kell létrehozd a sablon nevével annak mappáját. A sablon mappájában két fájl a kötelező: style.css és index.php. A többi rád van bízva, hogy mit is csinálsz és hogyan csinálod. Ha plusz függvényeket is szeretnél használni, amiket te definiálsz, akkor használnod kell a functions.php állományt is. Az említett fájlban kell definiáld a függvényeket és szükség szerint megírd azokat.
Elolvasom a teljes bejegyzést »

A web 2.0 világában élünk és sok szép, úgynevezett glossy effektes dolog létezik, minden csillog villog. Valamelyest ebben jelentkezik, grafikai szinten a web 2.0. A következő leírásban egy, a Windows Live navigációs menüjéról mintázott, üveges hatású menü elkészítését fogod elsajátítani.

Kezdésnek hozzunk létre egy új, fehér hátterű dokumentumot, lehetőleg téglalap alakút (500×60px). Hozz létre egy új réteget a menü alapjának elkészítésére. Válaszd a Rectangular Marquee eszközt és készíts egy kijelölést, amekkorára a menüt akarod készíteni, pl. 480×40px, majd színezd ki a következő színnel: #005b95. A kellő effektelés érdekében végezd a következőket: Layer / Layer Style / Gradient Overlay a következő színekkel (balról jobbra, vagyis a világosabb szín legyen felűl): #2473a5, #005b95, #3585b9, #7eb1d2. Egy Stroke effekt is kell, a következő paraméterekkel: 1px széles, outside, opacity (láthatóság) 100%, a szín pedig #003150.

Elolvasom a teljes bejegyzést »

A leírásban Aero Vista stílusú gombokat fogunk elkészíteni. Több okból is érdemes elsajátítani ezt a fajta stílust: aránylag egyszerű az elkészítése és a weben is jól néz ki, afféle web2.0 stílusnak is megfelel. Vágjunk is bele, hozz létre egy új dokumentumot, majd válaszd a Rounded Rectangle eszközt. A radius paramétert állítsd 5 képpontra, majd rajzolj egy ehez hasonló méretű lekerekített sarkú téglalapot.
Ha készen vagy, akkor kezdődhet a nagy átalakítás. Néhány effektet használva, hamarosan befejezed a képet és megtanulod a Photoshop néhány, leggyakrabban használt, effektét is. Kattints duplán a rétegen és válaszd a Stroke egységet, vagy Layer/Layer style/Stroke. Állítsd be a következő értékeket: size 1, position outside, blend mode normal, opacity 100%, fill type color, color fekete.
Elolvasom a teljes bejegyzést »

Azért született ez a bejegyzés, mint a webdesignerek hét bűne, mert rengeteg idegesítő weboldalt lát az ember nap, mint nap. Ezen lehet segíteni, mindössze oda kell egy kicsit figyelni, hogy mik az esztétikum határai. Nem akarok most minden apró hibát felsorolni, éppen ezért összegeztem a, szerintem, legnagyobb bakikat.
.1. A leggyakoribb hiba a rossz színek választása. A nem jól összeválasztott szín paletta, főleg az éles színek, ?szétverik? a weboldal kinézetét, sértővé vállnak a szem számára és olvashatatlan oldalt eredményeznek. Persze a hasonló oldalakon nem is időznek sokáig a látogatók.
.2. A második leggyakoribb hiba a fontok nem megfelelő összeválasztása. Maradjunk meg az alap betűtípusoknál, vagy legalább a legeltrejettebeknél. Ha nem ezt tesszük, akkor a látogató egy csúnya oldalt fog látni, annak ellenére, hogy a mi gépünkön gyönyörű. Mi erre a magyarázat? Az, hogy mi nem az alap fontot méretezzük, hanem a sajátunkat. Más és más fontok, más és másként méreteződnek, ezért szétnyomhatja az oldalt, vagy éppen olvashatatlanul picik lesznek a betűk. Ha a Photoshoppos tervezésre gondolunk, ott ne használjunk anti-alias effektet, mivel valóságban nem azt fogjuk kapni, amikor lekódoljuk az oldalt.
Elolvasom a teljes bejegyzést »

Egyik barátom ma felkeresett a következő problémával: - Alpár, sok féle képpen próbáltam már, de nem sikerűlt ikon tenni a weboldalamnak. Hogyan lehet? Nem túl nehéz, de mégis elterjedt probléma. Úgy gondoltam, készítek egy leírást, ami alapján bárki, könnyedén kiteheti saját oldala ikonát? Itt is van a kód, ahogyan be tudod illeszteni a megfelelő képet az oldaladba:

<link href="http://webpillango.org/favicon.ico" rel="icon" />
<link href="http://webpillango.org/favicon.ico" rel="shortcut icon" />

A href paramétert a te ikonod elérési útjára kell cseréld Azért írtam két verziót, mert nagyon jó, szinte tökéletes, a böngészők közti összeférhetőség. A kódot az oldal fejlécébe kell beilleszteni, vagyis a head tagok közé.
Elolvasom a teljes bejegyzést »