A ‘Design’ kategória arhívuma

Webes rasztergrafikus állományok

Három fő rasztergrafikus file-formátum terjedt el az interneten. Ezek a JPEG (JPG), a GIF és a PNG. A vektorgrafikus állományokat még kevés böngésző támogatja alapból, természetesen az Internet Explorer eddigi legújabb tagja, az IE 8, sem. Mit is jelent a rasztergrafikus képformátum? Azt jelenti, hogy a képek egy milliméterespapírhoz hasonlóan, ezernyi kis pontot tartalmaznak. Minden pont egy képpont, pixel, és egy színkódot tartalmaz. Miért nem elég egy egységes képformátum? Egyszerű a válasz: a képeket különféle célokra használjuk és ezért más-más, veszteséges és veszteség mentes, módszerek vannak a képen látható informáciú sürítéséhez. Így például egy fotót JPEG formátumban érdemes menteni az optimális állományméret és képminőség arányának megtartása érdekében. Egy diagrammot GIF-ként érdemes megosztani a világhálón, mivel a kevés szín lehetővé teszi, hogy többszörösen kissebre tömörítsük a képen látható információt.

Színvilág a webdesignban

Ez egy rendhagyó leírás! Nem szoktam hosszú leírásokat írni vagy ha igen, akkor azokat több bejegyzésre bontva teszem közzé. Ennek több oka is van, például jobb hatékonyabb több, rövidebb, leírás, mint egy hosszú, amit sokan megunnak és nem olvasnak végig. Ezért meg is kérlek, ha nem olvasod végig, el se kezd! Igen, ezt nyugodtan provokálásnak tekintheted!

Firebug: Firefox, Internet Explorer és társai

Minden webfejlesztő rémálma, tisztelet a kivételnek, hogy az elkészült weboldalt Internet Explorer összeférhetővé tegye. Bár a Microsoft webböngészőjének újabb változatai már eléggé standard követőek és szépen jelenítik meg a weboldalak túlnyomó többségét, mégis szükség van a weboldalak trükkös kódokkal való teleszúrkálására, mivel sokan használnak régebbi böngészőket.

Photoshop tutorial linkgyűjtemény 2.rész

Sziasztok! Ahogy ígértem elkészült a 2. rész is. Remélem sikerült érdekes linkeket összegyűjtenem számotokra. Ezeket az oldalakat is sokszor látogatom, hiszen rengeteg tippet, trükköt, praktikát lehet tanulni belőlük. Talán már egyik-másik link lehet, hogy ismerős számotokra. Nézzétek el nekem, hogy most nem részletezem a linkek tartalmát. Beszéljen helyettem inkább a megtekintett tartalom. Jó böngészést. A tutorialokhoz pedig jó tanulást.

Steven.

1. Grafpedia
2. Photoshoproadmap
3. Myfreetutorials
4. PSD.tutsplus
5. 1stwebdesigner
6. Vandelaydesign
7. Tutorial9
8. Good-Tutorials
9. Noupe
10. Abduzeedo
11. Webdesignledger

11 újabb hasznos dolog weboldal fejlesztéshez

A legutóbbi bejegyzéshez hasonló képpen összegyűjtöttem még néhány hasznos fejlesztői eszközt.

Web Form Factory

Generálj saját űrlapot hat lépésben: erre való a WFF röviden. Van hozza háttér kódolás, adatbázis kezelés meg minden, amit látni érdemes!

Kreatív weboldal galéria

Nemrég indítottam egy új weboldalt. FirstHandWeb névre hallgat és egy kreatív weboldal galéria. Ha van egy szép weboldalatok, egy jó menütök, fejlécetek vagy láblécetek vagy ha láttok egy figyelemreméltó weboldalt, nyugodtan küldjétek be.

Ha reklámozni akarjátok az oldalatokat, akkor azt is megtehetitek. A teendő, hogy kiválasztjátok melyik szabad reklámhely kell, írtok egy bemutatót az oldalról a blogotokon és elkülditek nekem az adatokat. A széles bannert (640×260) egy hétre kapjátok meg, illetve az oldalléc reklámot (125×125) egy hónapra.

Internet Explorer height probléma

Bizonyára már többen is belefutottak abba a problémába, hogy míg a legtöbb böngésző helyesen kezeli azt a megszorítást miszerint egy elem magassága nulla, addig az Internet Explorer különféle bajokat okoz. Hol is vehetjük hasznát egy nulla magasságú elemnek? Például van, hogy több float-olt elemet el szeretnénk választani az oldal egy lebegés mentes részétől: a tartalom és az oldalléc lebeg és elszeretnénk választani a lábléctől.

Egy elméleti megoldás az elválasztási problémára, hogy készítünk egy CSS osztályt, ami magassága nulla és clear: both tulajdonsággal bír. A gond az, hogy bár a Firefox és az IE 8 helyesen kezel minden esetet, ahol a height paramétert valamiféleképpen lenulláztuk, az IE 6 és IE 7 különbözően viselkednek.

Ingyenes, jó minőségű Twitter madár grafikák

Az elmúlt napokban összegyűjtögettem a legszebb, legjobban kidolgozott Twitter ikonokat. Van itt egyszerű és komplikáltabb madár is, ami közös, hogy mindenik ingyenes és kiváló minőségű. Természetesen számtalan Twitter grafika van az interneten. Ezek közül igyekeztem a legvonzóbb és alaposan elkészített példányokra fektetni a hangsúlyt.

CSS: menü villogás kivédése

A probléma

Legtöbb esetben a sitebuilderek a menügombokat úgy oldják meg, hogy a gomb minden állapota egy külön kép. A probléma az, hogy például egy a:hover vagy a:active állapotváltozásnál, ha a felhasználó a gomb fölé viszi az egeret, eltünik a háttere amíg a hover állapothoz kapcsolódó képet le nem tölti.

[A régi szép időkben, amikor az ilyen egyszerű menüket JavaScript-el csinálták, volt egy opció erre amit preload image-nek hívtak, ám a jelen megoldás egyszerűbb, és szemantikailag, illetve SEO szempontjából is helyes kódot kapunk.]

Inspiráció: Szerezz inspirációt a webdesignhoz

Azt hiszem, ha webdesignhoz van szükség némi inspirálódásra, akkor a legjobb, ha a témába tartozó kreatív alkotásokat nézegetjük. Bizonáyra már te is belefuttál olyan oldalakba, ahol számtalan igényes és ötletes, szép színvilágban pompázó, letisztultságra (vagy éppen komplikáltságra) hivatott oldalak voltak listázva. Ezek weboldal galériák.

A CSS kert

Azt hiszem az egyik legjobb hely webdesignhoz való inspirálódásra a CSS Zen Garden. Ezen az oldalon az a lényeg, hogy a weboldal szerkezete adott, nem tudod módosítani, csupán CSS segítségével van lehetőséged kifejezni a benned rejlő kreativitást. Úgy is mondhatjuk, hogy az egész rendszer a sablonozásra épül. Érdemes eltölteni egy kis időt az oldalon, mivel nagyon érdekes, megfogó ötletekre tehetsz szert!