Analóg óra készítése Photoshop és Flash segítségével, SWFObject rész

Írta: | 2011. július 02. | kategóriák: (X)HTML, JavaScript | Nincs megjegyzés

Az előző részekben létrehoztunk egy analóg órát Photoshop segítségével, a mutatókat „elindítottuk” ActionScript-el. A mostani részben Javascript kódot használva beágyazzuk a HTML kódba.

III. rész SWFObject

Az SWFObject – mostantól csak so – egy nyílt forrású Javascript könyvtár, amit a Flash tartalmak gyors és egyszerű beágyazására használhatsz a weblapodon. Nem kell az <object> vagy az <embed> tag-ekkel bajlódni – ez utóbbi nem is standard! A böngészők közti különbségről nem is beszélve, ezért hát elég macerás olyan kódot írni, ami a főbb böngészőkben megfelelően működik. Hogy ezzel ne kelljen szórakozni, segítségül hívjuk a so objektumot. A so csak egy pár sor adatot kér, a többit majd ő intézi (böngésző és Flash player detektálás stb.).

Elolvasom a teljes bejegyzést »

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

Írta: | 2008. május 04. | kategóriák: (X)HTML, CSS, JavaScript, Web | 13 megjegyzés

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.

Elolvasom a teljes bejegyzést »

Darabolás mentes hivatkozás képeken

Írta: | 2008. május 03. | kategóriák: (X)HTML, Alapok, CSS, Design | 2 megjegyzés

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>

Elolvasom a teljes bejegyzést »

WordPress menu span hack

Írta: | 2008. január 15. | kategóriák: Blogolok, CMS, CSS, Design, PHP | 2 megjegyzés

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.

Elolvasom a teljes bejegyzést »

Margójegyzet a web 2.0 technikáiról

Írta: | 2007. november 21. | kategóriák: Blogolok, Web | 6 megjegyzés

Web 2.0 tag felhő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).

Elolvasom a teljes bejegyzést »

Bevezetés a Web 2.0 világába

Írta: | 2007. november 18. | kategóriák: Blogolok, Web | 6 megjegyzés

Tim O?ReillyMi 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.

Elolvasom a teljes bejegyzést »

WordPress sablon készítése (második rész)

Írta: | 2007. október 21. | kategóriák: (X)HTML, CMS, CSS, Design, PHP | 11 megjegyzés

Ebben a leírásban a sablon fájlok kerülnek nagyító alá. A sablon kód fájljai egy vagy több PHP fájlból állnak. Akárhogyan is extrém eset az, ha csupán az index.php állomány áll rendelkezésre. A WordPress a hivatkozásból próbálja eldönteni, hogy melyik sablon a legrelevánsabb és hívódik meg, mint afféle parser a kérésre. Első lépésként azt nézi, hogy milyen kategóriájú a kérés: pl. Keresés, Arhívum, Bejegyzés, stb. Ha megvan a típus, akkor megpróbálja meghívni a kellő sablont, viszont, ha az nem létezik, akkor lejjebb ugrik a hierarchiában, így eljutva az index.php oldalig, ha nincs más létező állomány.

Elolvasom a teljes bejegyzést »

WordPress sablon készítése (első rész)

Írta: | 2007. október 19. | kategóriák: (X)HTML, CMS, CSS, Design, PHP | 11 megjegyzés

Janoszen weboldalán találtam rá egy érdekes leírásra, ami ötletet adott a leíráshoz. A téma: WordPress sablon készítése. Ahhoz, hogy egy sablon tudjál készíteni, kell tudjál HTML-t, CSS-t és PHP-t is. Ajánlott olvasmány a WP dokumentációja és a WordPress codex is.
A WordPress sablonok két fő részből állnak: a programozási része, PHP fájlok, és a design része, CSS fájl(ok) és a hozza tartozó képek. A sablon a wp-content/themes/ mappaban kell legyen. Pontosabban a megadott mappában kell létrehozd a sablon nevével annak mappáját. A sablon mappájában két fájl a kötelező: style.css és index.php. A többi rád van bízva, hogy mit is csinálsz és hogyan csinálod. Ha plusz függvényeket is szeretnél használni, amiket te definiálsz, akkor használnod kell a functions.php állományt is. Az említett fájlban kell definiáld a függvényeket és szükség szerint megírd azokat.

Elolvasom a teljes bejegyzést »

Adatbázis véglegesítés az uFalhoz

Írta: | 2007. október 16. | kategóriák: Fejlesztés, Hírek, Programozás, Tervezés, Web | Nincs megjegyzés

Végleges, legalábbis amíg nyomós okok nem lesznek annak módosítására, az uFal vendégkönyv adatbázis szetkezete. Gondolva a lehető legtöbb dologra, a következő lesz a felépítése: lesz egy tábla a beállítások tárolására, options néven. A messages táblában lesznek majd tárolva az üzenetek, míg a tiltást a banlist tábla fogja intézni.

Az options tábla:

1
2
3
'row_id' (int) auto_increment -- az egyedi sorazonosító
'field' (varchar(64)) -- a mező megnevezése
'val' (text) -- az érték

Elolvasom a teljes bejegyzést »

uFal, vendégköny fejlesztés

Írta: | 2007. szeptember 26. | kategóriák: Fejlesztés, Hírek, MySQL, Programozás, Web | 7 megjegyzés

uFal logoSokan emlékezhetnek a régi weboldalról (is) letöltehető vendégkönyvre. Az oldal költözésekor úgy éreztem, hogy nincs szükség a csomag áthozására, töröltem is. Bár igaz, a legtöbbször letöltőtt script volt, nem voltam megelégedve vele. Miért is? Több okom volt rá: nehezen beágyazható, az eredeti oldal szövegkörnyezettől elütő, statikus formázás, nehézkes mysql kezelés, és még sok-sok egyéb zavaró tény. Persze nem mondom azt, hogy nem volt használathó, volt emoticon és kód támogatása is, azt használtam az oldalon, csak nem volt az igazi.

Miről is szól ez a bejegyzés? Bizonyára vakarod a fejed és gondolkodsz az oldal elhagyásán. Ne tedd, választ kapsz! Igényt véltem felfedezni a vendégkönyvre (furán hagzik 🙂 ). A fórumon el is indúlt a fejlesztés, készül az uFal (sajnos a görög mü betüt nem tudja a wordpress menteni, annak ellenére, hogy UTF-8 a kódolási beállítás 🙁 ) Miért pont ez lesz a neve? Miért ne? Szerintem jól hangzik és még nem találkoztam hasonló elnevezésű vendégkönyvel. A logója a fentebb látható kép lesz.

Elolvasom a teljes bejegyzést »