Eredetileg csak egy 5.5-ös verzióra szándékoztam frissíteni, de elkapott a gépszíj, jöttek az újabb és újabb ötletek, a késő éjszakába nyúló kódfaragások, amit egyébként nagyon élvezek. Hiába no, nincs olyan ügyfél az univerzumban, akivel olyan jól megértenénk egymást, és akivel olyan gördülékeny lenne a kommunikáció, mint saját magammal. Szóval ennek a több mint két évet szolgált 5-ös verziónak meg vannak számlálva a napjai, hamarosan jön a 6-os, melyben már nem kapott helyet ez a jobb oldalon látható szenzációs kis „Flash-animáció”. Egyáltalán észrevette már valaha valaki, hogy egérföléhúzásra megnyiratkozom?

Naponta többször is előfordul, hogy csupán a gyönyör kedvéért meglátogatom az új honlapom. Négy napja még nem gondoltam volna, hogy 10 év után is ennyire tud lelkesíteni ez a téma.

„Ez a kép fogadja az összes kormányzati oldalra érkező látogatókat, a Pénzcentrum információi szerint a felirat a kormányzati honlapok közül egyedül a magyarország.hu-n nem jelenik meg.

(forrás: vastagbor.hu)

Szimpatikus, bár az is elég OMG, hogy ezt a szöveget képként rakták föl egy spacer.gif-es táblázatban; és az is OMG, hogy erről a Pénzcentrum az írja: Meghekkelték az ÖSSZES kormányzati honlapot!

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.

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.

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)

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.

folytatás »

(a képek forrása: xants2355)

folytatás »

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

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!

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.

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

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

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

• Advanced Search – az a bizonyos fejlett kereső, ami ugyan részletes, de cseppet sem tökéletes – viszont nem sikerült még rájönnöm, hogy miért nem működik mindig rendesen (ha tudod a válszt, ne titkold előem).
• Customizable Comment Listings – ahogy már írtam is, csak úgy belebotlottam – például ilyent is tud: top commenters.
• Feedburner Feed Replacement – a feedeket átirányítja a FeedBurner-re (esetemben pl. a http://haldesign.hu/blog/feed-et a http://feeds.feedburner.com/haldesign-ra).
• KommentValasz – sHaMaLt remek kis pluginja 2007. 02. 14. óta üzemel ezen a honlapon, és már említettem is – most csak a rend kedvéért: a kommenteknél a „válasz erre a megjegyzésre” opciót köszönhetjük neki.
• OpenID Registration – segítségével egy WordPress blog OpenID fogadására alkalmassá tehető (az OenID-ről bővebben itt).
• Share This – ő csinálja a „bejegyzés megosztása” linkeket a bejegyzések végén.
• WP-PageNavi – általa lesznek lapozhatóak az oldalak – és nem csak egy „korábbi” meg „újabb bejegyzések” link szerepel az oldalak alján.

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

folytatás »

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/...)

• az OpenID-ról a Wikipedián: http://en.wikipedia.org/wiki/Open_id
• OpenID regisztráció: MyOpenID.com (vagy még sok más helyen)

BittBox

Az egyik az idén januárban megszületett BittBox, melynek szerzője jobbnál jobb, képekkel gazdagon illusztrált Illustrator tutorialokkal áll elő. Íme az áprilisi termés (idáig):

• A Blend (áttűnés) eszköz bemutatása
• Egyedi Illustrator Brush (ecset) készítése
• Mire (lehet) jó egy „túlméretezett” körvonal?

(a kép forrása: www.bittbox.com)

A BittBox erőssége az Illustrator kategória, különösen, ha hozzávesszük a többnyire vektoros dolgokat tartalmazó Freebies kategóriát, ahonnan ingyenesen le is töltheted azokat. De van itt még Photoshop, webdesign, és más egyéb is – én már (több mint egy hónapja) hozzáadtam az oldal RSS csatornáját az olvasómhoz.

Tutorial Blog

A másik ajánlatom a Tutorial Blog, ami már 2005 decembere óta üzemel, Illustrator témában jócskán elmarad az előzőtől. Azért akad itt is némi vektor [ahonnan a legutóbbi „Free Vector Downloads (Part2)” valamiért kimaradt], és – itt már több van Photoshop-ból, és még több webdesign-ból, meg persze e helyen is van még sok minden más. Érdemes bekötni ezt az RSS csatornát is.

Most tehát nincs „vesződséges” kommentálás, regisztrálni sem kell, csupán egy kattintással lehet oltani a kíváncsiság okozta szomjamat. (Persze csak ha van véleményed az alábbi négy kérdésben – az elsőről kell, hogy legyen, ha ezt nem RSS-en kersztül olvasod.)

Dicséretes, hogy már most, kicsivel az indulás után mennyire átgondolt, könnyen kezelhető a rendszer, kár, hogy a külső és a méret nem testreszabható. Ajánlom a Poll-r blogot is, én már felvettem az rss linkjét az olvasómba.

Az utolsó kérdéshez egy kis adalék – ha esetleg nem tudnád miről van szó: www.mno.hu/...

A címekre kattintva az utolsó két kérdésnél tudsz hozzáadni újabb válaszokat is; illetve mindegyiknél megnézheted az eredményeket szavazás nélkül is.

folytatás »

• Extended Live Archives – segítségével nagyon jól használható archívum készíthető. Olyan mint ez (alul).
• CG-Archives by Year – használatával évenkénti csoportokba rendezhető az időrendi archívum. Például így (felül) (az oldal, ahonnan letöltöttem, nem elérhető).
• Del.icio.us Plugin – általa vannak ott a jobb oldalon a del.icio.us-ra mentett legfrissebb linkjeim (a plugint pedig nem találom a neten).
• Flashifier – Flash tartalom beágyazásához – például úgy mint itt (ennek is megszűnt az oldala).
• LiveCalendar – lásd a jobb felső sarokban.
• PMetrics – egy kiváló blog analizáló – már említettem májusban.
• Search Everything – installálása után a keresés nem csak a blog-bejegyzések, hanem az oldalak, vagy akár a kommentek között is működik (tetszés szerint).
• WP-FLV – Flash video tartalmak beágyazásához – ahogyan itt is történt.

folytatás »

Lenyűgöző a Google Analytics kidolgozottsága, részletessége, sokoldalúsága (56 oldalon még több grafikon) – messze felülmúlja a Performancing Metrics-et, egyetlen nagy hátránya utóbbival szemben, hogy engem is mér. Be lehet ugyan állítani mindenféle szűrőket, de azt nem, amit a Performancing Metrics-nél a WordPress admin felületén keresztül (Beállítások > PMetrics) hogy a regisztrált, bejelenkezett, x jogosultsági szinten felüli látogatókat figyelmen kívül hagyja. Márpedig ez nagy hátrány (ha nem is hiba – hiszen nem egy WordPress pluginról van szó), mert a WordPress 2 egyik nagyszerű újítása, hogy a szerkesztés közben, még publikálás előtt láthatom, milyen lesz a bejegyzésem, ez esetben azt is jelenti, hogy amikor órákig írok egy cikket, és közben sokszor elmentem, az mind beleszámít a statisztikákba.

Az alábbiakban bal oldalon az 56 menüpont, közöttük dőlt betűvel szedve akok, melyekről a jobb oldalon képek is láthatóak (ezek az első 2 hét statisztikái – a Google Analytics felületén „természetesen” bármelyik nap, hét, hónap, vagy tetszőleges időtartomány kiválasztható). Klikk a képre (vagy a dőlt betűs linkre) a nagyításhoz.

Marketing Optimization

Unique Visitor Tracking
- Daily Visitors
- Visits & Pageview Tracking
- Goal Conversion Tracking
- Absolute Unique Visitors
- Visitor Loyalty
- Visitor Recency

Visitor Segment Performance
- New vs Returning
- Referring Source
- Geo Location
- Geo Map Overlay
- Network Location
- Language
- User-defined
- Domains

Marketing Campaign Results
- Campaign Conversion
- Source Conversion
- Medium Conversion
- Referral Conversion
- Campaign ROI
- Source ROI
- Medium ROI

Search Engine Marketing
- All CPC Analysis
- AdWords Analysis
- Overall Keyword Conversion
- CPC vs Organic Conversion
- Keyword Considerations

Content Optimization

Ad Version Testing
- Overall Ad A/B Testing
- Source Specific Testing
- Keyword Specific Testing

Content Performance
- Top Content
- Content Drilldown
- Content by Titles
- Dynamic Content
- Depth of Visit
- Length of Visit

Navigational Analysis
- Entrance Bounce Rates
- Top Exit Points
- Site Overlay
- Initial Navigation
- All Navigation

Goals & Funnel Process
- Goal Tracking
- Goal Conversion
- Defined Funnel Navigation
- Defined Funnel Abandonment
- Reverse Goal Path
- Goal Verification

Web Design Parameters
- Browser Versions
- Platform Versions
- Browser & Platform Combos
- Screen Resolutions
- Screen Colors
- Languages
- Java Enabled
- Flash Version
- Connection Speed
- Hostnames

Én is ott voltam (ismét hála szeretett munkáltatómnak), és egy kicsit csalódott vagyok. A siralmas háziasszonyon kívül nehezen tudnám megfogalmazni, hogy miért, inkább a könnyebb utat választva ajánlom mások beszámolóit:

• web2symp.blog.hu – a szimpózium hivatalos blogja
• web2symposium.blogter.hu – a blogter beszámolója
• 2.0.blog.hu – az index beszámolója
• onlinemarketing.blog.hu – konrad beszámolója
• sesblog.hu – ses beszámolója

Kedvcsinálóul néhány print screen: