BLOGH

5 egyszerű, de hasznos CSS tulajdonság

2009. november 11., szerda 16:29 | Weblap készítés

Kénytelen vagyok bejegyzésben is felhívni a figyelmet a Web Designer Wall írására, mert annyira hasznos.

clip, min-height, white-space, cursor, display

Én ezek közül a wihite-space-t nem ismertem, és nagyon megürültem neki, hogy ezután nem lesznek ronda sortörések a dátumoknál az oldalsávban, mert a CSS-ben megadtam, hogy:

#sidebar .simplepie .date {white-space:nowrap;}

Csodás! További képekkel illusztrált részletek a Web Designer Wall-on.

Webdesign: FireWorks

2009. március 27., péntek 21:50 | Szoftver, Weblap készítés

« előzmény

Bjmatt az alábbiakban idézett hozzászólásával végképp eloszlatta arra vonatkozó kételyeimet, hogy a következő weblap tervemnél kipróbáljam-e a FireWorks-öt. Ezzel három részes spontán minisorozatunk végére értünk, melynek végkövetkeztetéseit így tudnám összefoglalni:

  • Webdizájnra (is) mindenki azt a programot használja, amit megszokott és megszeretett, de érdemes nyitottnak lenni az új lehetőségek iránt.
  • Photoshop, Illustrator, InDesign: egyik sem erre lett kitalálva, és sajnos ez érződik is rajtuk.
  • FireWorks: erre lett kitalálva – ki fogom próbálni.
  • Tökéletes megoldás nincs.

Bjmatt hozám hasonlóan Photoshop-ot használt weblapok tervezéséhez, mígnem (éppen a témaindító Propono-s bejegyzés hatására) megismerkedett a FireWorks-szel. Hozzászólásában ezt írta:

Próbálom az én szemszögemből leírni, hogy mire lenne szükségem. A dolog nyitja természetesen a lustaság, ami egyenlő az idővel, ami pedig mint tudjuk egyenértékű a pénzzel. Például a postán is érezhetjük, hogy ha csomót állunk sorba számlákkal, akkor nagyon sok pénzt ott tudunk hagyni.

Komolyra fordítva, akkor jönnek elő a lényeges felfogásbeli különbségek, ha az ember egy összetettebb oldalt, neadjisten alkalmazást kell hogy tervezzen.

Az összetettséget úgy értem, hogy az oldal sok kis almodulból állhat, sokféle szövegstílus, objektumstílus van benne és ezeknek végig kell menni következetesen már a terveken is, úgy hogy később ezeket könnyen felül tudd bírálni és megváltoztatni, úgy hogy ne kelljen az összes variációt egyenként újraszerkeszteni. Ezért vannak stílusok az indesign-ban is, meg illustratorban, meg a css-ben például. Sőt, vannak olyan kis blokkok, amik sok kis elemből állnak és nem jó ezeket mindig másolgatni (sok-sok layer), egyenként módosítgatni, hanem jobb ezekből egy szimbólumot egyszer definiálni, majd ezt újrafelhasználni.

Szerintem már most látjátok, hogy a photoshop ebből szinte semmit nem támogat, legalábbis nem úgy ahogy itt kellene. Mert például vannak layer-stílusok, de ha egyszer létrehoztad, nem tudod újradefiniálni, ha változtatnod kell, újra végig kell menned mindenen és az rengeteg idő és szívás. Karakterstílusai egyáltalán nincsenek, sem szimbólumok. Smart object-ek vannak ugyan, de nem szerkeszthetők helyben, és sokszor hibáznak szövegekkel leginkább.

A FireWorks pedig pont ezekre van kitalálva. Tudsz szimbólumokat, karakterstílusokat, objektumstílusokat definiálni, amelyeket később újradefiniálhatsz, és minden egyes példány automatikusan követi a változásokat. Már magában ez életmentő szerintem.

De ezen felül tud oldalakat kezelni, tehát bizonyos layerek, vagy layercsoportok állandóak lehetnek bizonyos oldalakon, de lehetnek olyanok is, amik csak adott oldalakon szerepelnek. Ez azért jó, mert nem kell minden ilyen elemet lemásolnod, hanem ugyanarra a layerre hivatkozik, tehát ha egyszer megrajzoltad, az végig ugyanaz lesz, és ugyanúgy módosíthatod mint a stílusokat, egy helyen kell csak.

Ami még nagyon hasznos, hogy gyorsan lehet vele egyszerű kis végigklikkelhető demokat készíteni slice-okkal, ez főleg a tervezési fázisban lehet istenes nagyon.

Ami nincsen sajnos azok a spot swatchok, de végülis objektumstílusokkal meg lehet oldani ezt is, kényelmesebb egy stílust újradefiniálni, mint kézzel átszínezni mindent.

Ami lehet keveseket érint, de nekem most nagyon jó, hogy tud Flex komponenseket is exportálni: paneleket, gombokat, menüket tervezhetek vele és használhatom őket Flex-ben. Teljesen rákattantam a Flex-re, kb utoljára a CSS felfedezésekor éreztem hasonlót. :)

Szóval összegezve: az a nagyon jó a FireWorks-ben hogy a webre találták ki, és nagyjából követi is a web újrahasznosítható, moduláris felfogását. Gyorsan lehet vele demokat készíteni és ezeket ki is lehet dolgozni tisztességgel, plusz sok időt megtakaríthatok vele.

Elsőre fura volt a PS/Illu után, de szerintem meg lehet szokni.

Webdesign InDesign-ban

2009. március 25., szerda 22:32 | InDesign, Weblap készítés

« előzmény

Egy héttel ezelőtt többen is félreértették a Propono-n a kérdést, mely szerint webdizájnra Photoshop, Illustrator vagy InDesign a tuti? Ez nem egy vita volt, melyet egyértelműen el kellett volna dönteni, hanem egy – szerintem tanulságos – tapasztalatcsere. Az InDesign például nekem korábban eszembe se jutott volna lehetőségként, míg xants meg nem említette. Érdeklődésemet látva xants elküldte nekem az általa használt sablont, amit engedélyével most közkinccsé teszek – ha valaki szeretné kipróbálni a webdizájnerkedést InDesign-ban, itt egy kis segítség: WebTemplatePakk.zip (802 KB)

WebTemplatePakk by xants

Először lelkes voltam, de bevallom, hamar elment a kedvem, miután rá kellett jöjjek, mennyire hozzá vagyok szokva, hogy a raszteres Photoshopban minden pixel kapásból a helyén van; míg InDesign-ból először exportálnom kell (terészetesen PDF-et, mivel a JPG veszteséges), hogy aztán Photoshop-ban darabolhassam a végterméket. Na de nem akarom elvenni a kísérletező szándékúak kedvét, ha belevágtok, írjátok meg a tapasztalataitokat! Xants-nak pedig köszönet a sablonért.

folytatás »

Webdesign: PS, AI, ID, FW?

2009. március 19., csütörtök 21:34 | Illustrator, InDesign, Photoshop, Weblap készítés

Hátha vannak itt olyanok is, akik nem olvassák a Propono-t; ahol egy érdekes téma vetődött fel: ki milyen programot használ webdesign-hoz?tanulságos olvasmány. Xants InDesign-t. Lehet, hogy én is kipróbálom, szimpatikus megoldásnak tűnik. (És lehet, hogy ideje lenne megismerkednem a FireWorks-szel.)

webdesign InDesign-ban

(a képek forrása: xants2355)

folytatás »

WordPress 2.7

2008. december 11., csütörtök 23:29 | Szoftver, Weblap készítés

Végre elkészült a WordPress 2.7! Úgy tűnik, most tényleg jól átgondolták az admin felületet. A frissítéssel várok a magyar verzióig.

frissítve (2008. 12. 15.): Elkészült a magyar verzió, és ezt már a 2.7 alatt írom. Határozottan kellemes!

WordPress kiegészítések #4

2008. június 8., vasárnap 13:44 | Szoftver, Weblap készítés

« előzmény

Közel egy év alatt ismét összegyűlt néhány idáig említetlen, vagy csak futólag említett, számomra hasznosnak bizonyuló WordPress plugin, melyeket ezúton ajánlok a Nagyérdemű figyelmébe.

  • Fluency Admin – használhatóbbá teszi az eredetileg eszetlenül megtervezett admin felületet.
  • Admin Drop Down Menu – az admin felületen egy almenü kiválasztásánál egy kattintást megspórolhatsz.
  • BBCode – lehetővé teszi BBCode használatát a megjegyzések szövegében.
  • Get Recent Comments – nálam általa listázódnak a legfrissebb megjegyzések a bal oszlopban.
  • Subscribe To Comments – a megjegyzés írója e-mail értesítést kérhet az általa kommentált bejegyzés új hozzászólásairól.
  • Theme Switcher Reloaded – az olvasó különböző témák közül válogathat – ahogyan itt, a bal hasáb alján, a TÉMAVÁLASZTÓnál.
  • Theme Test Drive – segítségével a bejelentkezett blog adminisztátor egy másik témát választhat, mint amit a többi felhasználó lát. Új téma teszteléséhez kiváló.
  • wp-typogrify – a tipográfiailag szebb és szabályosabb megjelenéshez.
  • WP PicLens – végül és utolsósorban: a plugin, ami nálam csak pár napig működött, de Neked hátha nagyobb szerencséd lesz vele.

Ha ismertek más hasznos WordPress kiegészítést, ne tartsátok titokban!

WordPress 2.3.1-hez

2007. november 1., csütörtök 11:05 | Szoftver, Weblap készítés

Simple Tags plugin

A WordPress 2.3 legfőbb újdonsága a címkézési lehetőség. Azonban néhány fontos dolgot „kifelejtettek” a blogmotorból ezzel kapcsolatban:

  • Automatikus kiegészítés az egyszer már beírt címkékhez (vagyis minden egyes címkét minden bejegyzésnél újra be kell írni – nem beszélve arról, hogy az admin felületen sehol nem láthatom a már használt címkéket).
  • Nem lehet címkéket átnevezni vagy törölni az admin felületen keresztül.
  • Nem lehet színezni a címkéket előfordulásuk gyakorisága szerint.

A fenti problémákat mind megoldja, és még jónéhány hasznos dologgal (pl. tömeges módosítás vagy kapcsolódó bejegyzések megjelenítésének lehetősége) szolgál a Simple Tags plugin. A plugin oldalán minden kitűnően dokumentált, úgyhogy nem is fűzök hozzá többet.

WordPress 2.3.1 magyar fordítás

Tegnap megjelent a magyar fordítás is a legfrissebb WordPress-hez, blog-o-tom oldaláról letölthető. A címkék ugyan helytelenül, rövid i-vel szerepelnek benne, de sebaj, úgysem ez jelenik meg, ha a Simple Tags plugint használod.

WordPress és Firefox kiegészítések

2007. július 19., csütörtök 20:27 | Szoftver, Weblap készítés

« előzmény (WordPress)
« előzmény (Firefox)

Március óta ismét összegyűlt néhány említésre érdemes kiegészítés, melyeket megelégedéssel használok, és talán a Ti érdeklődésetekre is számot tarthatnak.

WordPress kiegészítések

  • 404 Notifier – segítségével RSS-en (vagy akár e-mailen) követheted, hogy mely oldalakaidat próbálták sikertelenül lekérni a látogatóid. (Nálam több észrevétlen hibára is fényt derített.)
  • Exec-PHP – engedélyezi a <?php ?> tag-eket a bejegyzésekben. (A Ghalériánál használom a képek title és alt paraméterének kiíratásához.)
  • Search Hilite – kiemeli a keresett szavakat az oldalon – a saját és a kívülről jövő (Yahoo, Google, stb.) kereséseknél is működik. (Ebben már javítva van az 1.5-ös verzió hibája, melynek használatakor bejelentkezett felhasználó esetén a blog neve – esetemben Haldesign – mindig kiemelésre került.)

Firefox kiegészítések

  • ColorZilla – segítségével színmintát tudsz venni a Firefox ablakának bármely részéről, melynek RGB és hexadecimális értékeit alul az állapotspron olvashatod le.
  • MeasureIt – kapsz egy jópofa pixelvonalzót a tűzrókádhoz.
  • ScrapBook – komplett weblapokat menthetsz el és menedzselhetsz vele.

folytatás (WordPress) »
folytatás (Firefox) »

Így készült… (helyett)

2007. április 27., péntek 19:41 | Weblap készítés

Terveztem egy hosszabb leírást arról, hogyan készült a HALDESIGN v4, de a szavazás után valahogy úgy érzem, nem sokakat érdekelne – és bevallom, kedvem sincs hozzá. Mindenesetre az alábbiakban megosztom azokat a linkeket, amik számomra sokat segítettek, hátha más is hasznát veszi.

Probléma: a flash által generált címek ne takarják ki a Lightbox 2 által megjelenített képeket.
Megoldás: <param name="wmode" value="transparent">
(bővebben: Miért nincs hatással a Flash mozira a z-index?)

Probéma: ablakmérettől függően változzon egyes oldalelemek stílusa.
Megoldás: írd meg a Propono-ra a problémát, és kow segít.

Probléma: HTML kód generálása RSS-ből.
Megoldás: SimplePie (általa van a címlap összeollózva a BLOGH és a SZEMETES legfrissebb bejegyzéseiből; és a linkeket is ő generálja ide a középső oszlopba a del.icio.us oldalam RSS-éből).

Probléma: az Internet Explórer különböző verzióinak egyidejű futtatása (tesztelés céljából).
Megoldás: Multiple IE (IE 3, IE 4.01, IE 5.01, IE 5.5, IE 6 install egyszerre).

Probléma: az Internet Explórer létezése.
Megoldás: az idő múlása (talán).

WordPress pluginok #2

2007. április 23., hétfő 20:49 | Szoftver, Weblap készítés

« előzmény

Igértem, hogy az újonnan használatba vett WordPress pluginokról is szó esik majd – íme a haldesign.hu négyes verziójának WP plugin-listája (természetesen a már említettek kivételével):

Ha úgy érzed, ismersz olyan plugint, ami érdekelhet, örömmel olvasok róla.

folytatás »