Illustrator, Photoshop, webdesign tutorialok

Úgy tűnik, nem mostanában fogok írni saját illustrator tutorialokat (februártól terveztem rendszeresíteni), de szerencsére vannak, akiknek nálam több idejük van erre, és megteszik ezt helyettem is. Két weblapot ajánlok ezúttal, kiemelve az Illustratorral kapcsolatos leírásokat.

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

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.

Szavazás

A WordPress 2.1-es frissítéssel kapcsolatos bejegyzésemben két kérdés körvonalazódott: legyen-e naptár a jobb felső sarokban (úgy, ahogy hétfőig volt); illetve lassú-e az oldalak letöltése? Akkor is, és most is Doranskyra hivatkoztam és hivatkozom, mert ismét nála olvastam valamiről, ami megragadta a figyelmem: ez pedig a Poll-r.hu.

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 »

WordPress pluginok

Gondoltam, érdemes erről is egy listát készíteni. Melyek azok, amik az elmúlt majdnem egy év során hasznosnak bizonyultak:

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

Google Analytics – tömény statisztika

Május 20-án ajánlottam a Performancing Metrics-et, mint blog-analizátort, amit a Google Analytics jó alternatívájaként emlegetnek. Egy héttel később érkezett meg a Google Analytics hozzáférésem, amiről már teljesen lemondtam, mivel hónapokkal korábban (talán ez év elején, de az is lehet, hogy már tavaly év végén) igényeltem.

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.

Daily Visitors

Referring Source

Geo Map Overlay

Overall Keyword Conversion

Content by Titles

Site Overlay

Browser Versions

Screen Resolutions

Connection Speed

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

Web 2.0 symposium

hal a Web 2.0 symposium-on
(a kép forrása: http://2.0.blog.hu)

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

Performancing Metrics – a blog-analizátor

Legújabb kedvencem a WordPress plugin-ek közül ez a sokoldalú és ingyenes blog analizáló, melyet a Google Analytics jó alternatívájaként emleget a WordPress Plugins oldala, és amely egyébként nem csak WordPress alapú blogoknál működik. Fontos, hogy használatához a cURL használatát engedélyezni kell a szerveren!

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

Performancing Metrics print screen

Performancing Metrics print screen

Performancing Metrics print screen

Tartalom „erőltetett” frissítése a Firefox-ban

Egy nagyon hasznos apróságra bukkantam a CreativeBits-en. Weblapok készítésekor, tesztelésnél sokszor előfordul, hogy a Firefox a frissítés gombra kattintva (F5) nem minden elemet frissít, hanem cache-ből veszi elő őket. Ha a frissítés gombra a Shift billentyű nyomva tartása közben kattintunk, biztosak lehetünk benne, hogy a legújabb, aktuális tartalmat látjuk.

CSS tippek

A linkleltár második részében szemezgettem az internet kincsei közül a CSS témájában, most néhány hasznos tippet szeretnék megosztani a stíluslapokkal kapcsolatban.

Gyakori hibák

Saját tapasztalatomból (is) tudom, hogy következetességgel és odafigyeléssel sok-sok munkaóra megspórolható. Én a legtöbb időt az alábbiak figyelmen kívül hagyása miatt vesztegettem el.

Pont, vessző, pontosvessző, szóköz – mindig csak a megfelelő helyre!

  • .p » ponttal az elején a class="p" stílusú tag-ekre vonatkozik
    p » pont nélkül minden bekezdésre érvényes
  • a, a:hover, a:visited » ez egyes stílusok felsorolásakor közéjük mindig kell vessző, az utolsó után viszont soha
  • a {border: 0; background: #000; color: #fff;} » egy stílus meghatározásánál az egyes tulajdonságok után mindig legyen pontosvessző (bár az utolsó után már nem kötelező, de nem baj, ha ott van)
  • a {font-size: 10px} » az érték és annak mértékegysége között soha ne legyen szóköz

Nem mindegy a sorrend!

  • p a » bekezdésn belüli link
    a p » linken belüli bekezdés
  • p.header » minden class="header" stílusú bekezdés
    .header p » a class="header" header stílusú tag-en belüli összes bekezdés

Egyszerűen jobb

Mint az élet sok más területén, így itt is igaz, hogy a legegyszerűbb a legjobb; mert ha kevesebb a kód, akkor először is kisebb a fájl, másodszor pedig könnyebb átlátni.

Rövidítsünk, ha lehet!

  • p {font-weight: bold;
    font-style: italic;
    font-variant: small-caps;
    font-size: 11px;
    line-height: 15px;
    font-family: helvetica, sans-serif}

    » mindezek helyett elég ennyi:
    p {font: bold italic small-caps 11px/15px helvetica, sans-serif}

  • body {background-color: #000;
    background-image: url(bg.gif);
    background-repeat: no-repeat;
    background-position: center top}

    » egyenértékű ezzel:
    body {background: #000 url(bg.gif) no-repeat center top}

  • p {border-color: #000;
    border-style: solid;
    border-width: 10px}

    » egyszerűbben és rövidebben:
    p {border: #000 solid 10px}

Ráadásul…

  • …jó tudni, hogy egy tag-nek akárhány stílusa lehet (szóközökkel elválasztva).
    p class="txt alignright" » ebben az esetben a bekezdések a .txt és az .alignright stílusokban definiált tulajdonságokkal jelennek meg

Internet Explorer – a buta böngésző

Lehet, hogy nem tűnik túl aktuális témának, hiszen már csak hónapok kérdése, és 5 (!) év után itt lesz az új Internet Explorer, a 7-es. De az is lehet, hogy a cím továbbra is aktuális marad, hiszen sok cikk olvasható az interneten, ami a jelenlegi publikus béta verzió hibáit taglalja. Én még nem kezdtem el az ismerkedést vele, mert elismerem, nagyon elfogult vagyok az Internet Explorer-rel kapcsolatban – a címből gonolom egyértelmű, negatív irányban. Ennek két oka van: honlapokat készítek, és honlapokat böngészek.

Mikor honlapokat készítek

Az Internet Explorer 6 – már csak élemedett kora miatt is (de nem csak ezért!) – rengeteg szabványt / ajánlást nem ismer. Tragikus, hogy a munkaidőm nem elhanyagolható részét arra kell fordítanom, hogy az Explorer butaságaira gyógyszereket keresgéljek és használjak. Szerencsére az interneten majdnem minden megtalálható (a következő Linkleltár a css témájából szemezget majd – érintve ezeket az Explorer butaság-betegségekre írt orvosságokat is); de aki készített már honlapot úgy, hogy törekedett a szabványosságra, és a kitűzött céljai között szerepelt a böngészőfüggetlenség is, az tudja (maga is érzi), honnan ered ez az Explorer-utálat.

Mikor honlapokat böngészek

Szomorú, hogy még ma is átadásra kerülhetnek olyan komoly oldalak (akár portálok, nagy cégek megrendelésére), melyek csak az Exporer-en jelennek meg helyesen, vagy rosszabb esetben csak Explorer-rel használhatók. Felháborítónak tartom, hogy vannak, akik egyszerűen figyelmen kívül hagyják a felhasználóknak azt a legóvatosabb becslések szerint is több mint 10 %-át, de más statisztikák szerint akár az internetet böngészők harmadát, azokat, akik kerestek egy okosabb alternatívát, és nem az Explorer-t használják. Az ilyen oldalakon nem szoktam néhány másodpercnél többet időzni.

A megoldás

Ha honlapokat készítesz, ne csak Explorer-re optimalizálj. Rá fog menni rengeteg időd, de megéri – legalábbis, ha fontosak neked leendő weblapod látogatói.
Ha honlapokat böngészel, a legjobb, ha váltasz egy okosabb böngészőre. Ajánlom a Firefox-ot (hibáival együtt is nagyságrendekkel teszi élvezetesebbé az internet-turkászást), vagy a Netscape-et. Előbbihez rengeteg hasznos bővítmény is a rendelkezésedre áll, többek között az IE Tab, melynek segítségével egy gombnyomással Internet Explorer-nézetre válthatsz a Firefox-on belül (minderre a Netscape alapból képes – lásd a bal alsó sarkában levő kis gombot).

Miért is?

Ez a fejezet azoknak szól, akik Internet Explorer használóként nem értik, miért (lenne) jó nekik a böngésző-váltás. Egy egyszerű példán keresztül szeretnék rávilágítani arra, hogy nem csak fejlesztői, de felhasználói oldalról is buta programot használnak.

Példa: böngészel egy oldalt, melyen sok link szerepel (mint például ezen). Ezeket a linkeket mind meg szertnéd nyitni, de közben ezt az oldalt szeretnéd tovább olvasni. Explorer esetén ez úgy néz ki, hogy nyomsz egy jobb klikket a link felett, a felnyíló helyi menüből kiválasztod a „Hivatkozás megnyitása új ablakban” menüpontot. Ezt ahányszor megteszed, annyi új ablakod keletkezik, és mindannyiszor vissza kell térned az eredetihez, mindannyiszor újra kiválasztva azt. Én a Firefox-ot használva egyszerűen középső egérgombbal kattintok a linkekre és kész. A linkek tartalma az eredeti ablakon belül, új füleken kerül megjelenítésre, és közben egy pillanatra sem tűnik el az eredeti oldal. Sokkal kényelmesebb. És ez csak egy példa volt…