Inspiráció: online és offline

Hiszem, hogy nem egyedül vagyok az, akinek inspirációs gondjai vannak. Épp ezért úgy döntöttem, hogy a WebPillangó keretén belül indítok egy inspiráció kereséssel foglalkozó írássorozatot. Amikor ezt olvasod, akkor már minden bejegyzés meg van írva és bizony minden nap megfog jelenni egy újabb és egy újabb ötlettár az oldalon. Természetesen csak “amíg a készlet tart”.

Forrás: http://www.yerkaland.com/

Néhány ötletet Anne Van Wagener egyik írásából merítettem, másokat a MűhelyTitkok oldallécébol lestem el. Vannak amelyek csupán agyszülemények, de vagy nekem használtak vagy valahol hallotam róluk. A lényeg, hogy legyen eredménye annak, hogy időt szánunk a kreatívitásunk fejlesztésére és gondozására.

Az első inspirációval foglalkozó leírás hétfőn látja meg a napvilágot! Ne felejtsd el megnézni, iratkozz fel a WebPillangó RSS csatornájára.

Online betütípus összehasonlítás

A Typetester egy nagyon hasznosnak bizonyuló web 2.0 alkalmazás, ami nagyban felgyorsíthatja a weboldalkészítés művészetét. Dióhéjban, a Typetesterben három oszlopban, valós időben, grafikus felhasználói felületen kereszűl, változtathatjuk a szöveg kinézetét: betütípus, méretek, elő és háttér színek, stb. A formázások eredményét egy CSSként kaphatod vissza, mindössze egy kattintásba kerül.

Elemek újraméretezés az ablakméret változásakor

Biztos vagyok benne, hogy már többetek fejében megfordult a gondolat, hogy bizonyos elemeknek új méretet kellene adni az ablak újraméretezése esetén. Nem nagy szó, CSS. Igen ám, de mi van abban az esetben, hogyha egyes elemek, mint például egy űrlap elemei dinamikusan fix egy százalékban kifejezett értékből kivont képpontokban meghatározott mérték szélességű.

Példa

Az oldal dinamikusan váltja a szélességét az ablakmérettől függően. Ráadásként, az oldal tartalmi része dinamikus szélességű, míg az oldaléc fix értékkel rendelkezik. A tartalmi részben van egy űrlap, ami dinamikusan kell változtassa a méretét a tartalmi rész szélességétől függően.

Darabolás mentes hivatkozás képeken

Ez egy rövid példa arra, hogy miként lehet egy háttérképre, például a fejléc hátterére, linket tenni, pl. a logóra. Természetesen ebből az következik, hogy nem szükséges a kép felvágása, csupán XHTML és CSS segítségével kivitelezhető. A megoldás egyaránt valid és cross-browser.

1. lépés

Helyezzünk egy linket a kérdéses helyre. Én a fejlécben szeretnék egy kattintható felületet a logónak, ami visszamutat a főoldalra.

1
2
3

<div id="header">
  <a href="index.html" title="" id="logoLink"> </a>
</div>

Wordpress menu span hack

A minap felkerült egy írás, ahol dinamikusan lehet gombot készíteni CSS segítségével. DeX hozzászólása kapcsán:

Ha a gombon nyomvatartod az egeret, majd lehúzod róla, és ott engeded el, akkor beragad a lenyomott állás?

arra gondoltam, ha már az active-ot hover-re cserélem, használhatom menünek is az egész CSS kódot, a minimális modosításokkal. A CSSben mindössze annyi a tennivaló, hogy az active modosítókat kicseréljük hoverre. Így a link fölé görgetéskor aktíválodik az új kinézet és nem a link lenyomásakor. Miután készen vagyunk a CSS résszel, nyugodtan használhatjuk weboldalainkban.

Mi van akkor, ha a kódot nem mi írjuk? Én arra az esetre gondoltam, amikor a WordPress által kilistázott oldalakat/kategóriákat formázom menüként. A megoldás egy kis ügyesség, okosság. A probléma orvoslását keresve az alábbi megoldást találtam a legmegfelelőbbnek.

Dinamikus gomb készítése CSSt használva

Nem számít egy nagyon új dolognak a CSS segítségével megvalósított gomb, viszont a dinamikus szélességgel bíró gomb igenis új távlatokat nyit a weblapkészítésben. A következő leírásban egy ilyen szerű gomb elkészítéséről lesz szó. Először elmondanám, hogyan is működik a gomb, milyen elmélet alapján, majd a szükséges kódot is közzéteszem.
Az ötlet az, hogy ne legyen egy statikus háttér, amiről lefuthat a szöveg, ha éppen hosszabb, mint a kép maga. Persze ezt elméletben ne lehet tökéletesen kiküszöbölni, még szerencse, hogy a gyakorlati világban élünk. A háttér dinamikus szélességét annak köszönhetjük, hogy a linkekbe nem a szöveget helyezzük, ahnem egy span elemet, ami tartalmazza a szöveget, így valójában két hátterünk van: egy nyitó, ami nyulni is fog, ahogy a szöveg egyre hosszabb (persze csak egy pontig, de mivel mi határozzuk meg, nem okoz gondot) és egy záró háttér, amely lezárja az első háttér végét, így egységes megjelenést biztosít.

Microsoft Academic Tour 4.0

Ahogyan azt a fórumon is írtam, pénteken (2007. december 7.) kapott helyet a negyedik Microsoft Academic Tour a Kolozsvári Műszaki Egyetem keretein belül. Minden elismerésem a szervezőknek. Ezúttal a fő hangsúly a webes technológiákon volt, de nem csak! Négy fő témára volt tragolva az egész: LINQ, Cornel Raţ előadásában, majd ezt követően az ASP .NET 3.5 és AJAX Adrian Mureşean közreműködésével. Ez után egy kis szünet, majd jöhetett a Microsoft büszkesége, amit a Macromedia (most Adobe) Flash ellenfelének szán: Silverlight 1.0 és 1.1 (2.0) Ioan Cretz Lazarciuc bemutatásában. A záró előadást Tudor Salomie tálalta: Project Astoria.

Margójegyzet a web 2.0 technikáiról

Eddig is weboldalak voltak, most is: mi a különbség? Talán sokan vannak ezzel így, de ez nem igaz! Régen is volt online enciklopédia? Régen is volt ennyi ingyenes és mégis okos, jól elkészített internetware? Nem volt, mert nem lehetett elkészíteni, vagy csak nehéz, nagy anyagi hátteret igénylő körlülmények közt.
A nagy változást az is befolyásolta, hogy drasztikusan estek a tárhelyek árai, és ez mellet, hihetetlen mértékben nöttek az internetelérhetőségek és sávszélességek is. Olcsó lett a számítógép: manapság rengeteg számítógép van a világban és a különböző programoknak hála a harmadik világ országaiba is rengeteg csomag érkezik. Nem kell softwaret sem venni (ha nincs rá pénz): minden van ingyen, létezik open source és freeware!
A fizikai változás a szellemi változást is elősegítette, sok jófejű idő és fiatal lelt szórakozást a számítógépes tanulás nyújtotta lehetőségekben. Volt aki grafikázni kezdett, volt aki a PHP és MySQL szépségét találta meg, stb. Így rohamosan fejlődött és fejlődik a technológia, amely megvalósítja a mai webkettes világhálót és, ami már építi a hidat a harmadik generációs web felé (ami valójában már a negyedik, ha az internet kezdeti formáit is vesszük).

Bevezetés a Web 2.0 világába

Mi az a web 2.0? Fura, hogy sokan használják, de mégis csak kevesek azok, akik értik is, amit ez a kifejezés takar. Egészen pontosan senki sem tudja már, hogy mivé lett, az viszont egészen biztos, hogy ebben a blogbejegyzés sorozatban utána próbálok járni és megközelíteni az értelmét. Több szem többet lát alapon, az aktív kommentelést elvárt dolognak tekintem.
Kezdjük is a legelején: két amerikai, Dale Dougherty és Craig Line, alkották meg a fogalmat, amit majd Tim O’Reilly tett népszerűvé. A kezdetekben (2003-2004) éves konferenciák voltak, ahol megpróbálták határozni az új www trendeket. Valójában a webkettő egy forrdalmi előrelépésnek tekinthető, ami arról szól, hogy toljuk ki a határainkat és szocializáljuk a netet. Nem kell sokat törje az ember a fejét, hogyha hasonló oldalakat keres: iGoogle, Flickr, YouTube, stb.

Top 10 WordPress SEO tipp

Mostanság elég sokat van foglalkozva a keresőmotor optimalizálással. Olvasván egy ismerősöm blogját, találtam egy érdekes bejegyzést néhány jó Wordpress SEO tanáccsal. Ez adta az ötletet, hogy kicsit jobban körüljárjam a témát, így hát megszületett a top 10 SEO trükk a Wordpresshez (természetesen ez csak személyes vélemény, de az biztos, hogy hasznosak).

1. Az első helyet a permalink struktúra helyes megválasztása kapta. Alapból egy szám, az nagyon keresőmotor ellenes. A legtöbben ezt használják: %category%/%postname% A probléma az, hogy ez esetben két helyen is elérhető lesz ugyanaz a bejegyzés. Ennek kijátszása nagyon egyszerű, mégis nagy előnyt nyújt. A teendő, hogy kicseréled a permalink szerkezetet úgy, hogy az egy állomány kiterjesztésnek tűnjön: /%category%/%postname%.php A php helyett ajánlott az oldalad témájának legfontosabb kulcsszavát írni.