Webdesign: FireWorks

« 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

« 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 Photoshop-ban minden pixel kapásból a helyén van; míg InDesign-ból először exportálnom kell (termé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.

frissítve (2011. 06. 24.): A Web Developer’s Guide To Adobe InDesign (Smashing Magazine) →

folytatás »

Webdesign: PS, AI, ID, FW?

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 kiegészítések #4

« 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

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

« 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)

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

« 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 »

OpenID

Ahogy igértem, bővebben is írok róla. 16 napja lehetséges ezen a honlapon az OpenID használata, amivel egyszerűen „megúszható” a hozzászóláshoz szükséges regisztráció. A dolog lényege, hogy egyetlen egyszer, egy helyen szükséges csak regisztálnod, melynek eredményeként kapsz egy OpenID azonosítót (az enyém pl. http://haldesign.myopenid.com/); amellyel ezek után minden OpenID fogadására képes webhelyre (például ide is) be tudsz lépni. Még gyerekcipőben jár a projekt, de remélem sikeres lesz, mert minél egyszerűbb, annál jobb – és ez az internetezésre is igaz.

OpenID logo

Találtam egy nagyon jó magyar nyelvű leírást az OpenID használatáról az Asszem blogon. Át is adom magam a lustaságnak, a szót pedig Oláh Andrásnak (ha jól következtetek a nevére blogjának címéből):

Nézzünk egy példát: ki akarom próbálni mondjuk a ClaimID nevű webkettes szolgáltatást. A hagyományos módon ez egy új regisztráció létrehozásával történne, de mivel az oldal támogatja az OpenID regisztrációt, ezért a belépés a következőképp zajlik akkor, ha még nem léptem be az OpenID oldalon, és először próbálok meg belépni a ClaimID oldalra:

  1. Beírom a ClaimID oldalán az OpenID azonosítóm (ez általában az azonosító.myopenid.com URL).
  2. A ClaimID forwardol az OpenID oldalra, ahol beírom az OpenID jelszóm. Az egész folyamatban ez az egyetlen pillanat, amikor jelszót kell beírni.
  3. Sikeres azonosítás után az OpenID megkérdezi, hogy a ClaimId használhatja-e az azonosítómat. Itt eldönthetem, hogy igen, de csak egyszer, azaz most, vagy mindig, tehát a jövőben is. Ebben az esetben minden további alkalommal, ha be vagyok lépve az OpenID rendszerbe, és megpróbálok belépni a ClaimID-be, akkor automatikusan beenged, a jelszó megkérdezése nélkül.
  4. Ezek után visszakerülök a ClaimID oldalára, immár mint belépett felhasználó, és elkezdhetem használni a szolgáltatást.
  5. ha befejeztem a munkát, kilépek a ClaimID oldaláról (logout)
  6. amíg nem lépek ki az OpenID oldalról és nem csak egy alkalomra engedélyeztem a 3. pontban a belépést a ClaimID-be, akkor az ismételt belépéshez a ClaimID-be elegendő csak az OpenID azonosítómat beírni és már bent is vagyok.
  7. ha kiléptem az OpenID-ből is, akkor az első ponttól megismétlődik a folyamat. Ha a harmadik pontban engedélyeztem a belépést minden alkalomra, akkor az a lépés kimarad.

(a teljes bejegyzés: olahandras.blog.hu/…)