Címke: HTML

Végre elkészült a saját CSS-es RSS ikonom

Címkék: ,

Nem olyan régen a “Hétvégi CSS barkácsolás.” című bejegyzésemben próbáltam CSS segítségével kirajzolni egy RSS ikont, de első nekifutásra nem sikerült. 😮 Az elmúlt hetekben teljesen véletlenül találtam rá Zander Martineau blogjára (Rather Splendid: Pure CSS Icons), aki szintén egy RSS ikont szeretett volna léterhozni pusztán CSS és HTML kódokból építkezve. Az ő kódjainak segítségével alakítottam ki a saját gombomat, melynek eredményét lentebb már ti is áttanulmányozhatjátok. Fontos különbség a kódjaink között, hogy amíg Zander Martineau a “könnyebben” skálázható em mértékegységgel dolgozott, addig én px-t használtam.

CSS RSS Icon: Final

Bővebben …

Hozzászólás: » 4 « • Írta: Péter (2010/05/21 21:05)

Így néz ki egy up-to-date menü

Kategóriák: Fejlesztések, Megoldások
Címkék: ,

A mai napon megmutatom, hogyan érdemes up-to-date, kereső- és felhasználóbarát menüket kódolni. Ezt a cikket főleg Tamás barátom kérésre írtam, mert már régebben megígértem neki, de kötelező elfoglaltságaim miatt egészen idáig nem volt rá időm. 🙁
Bővebben …

Hozzászólás: » 2 « • Írta: Péter (2010/05/17 18:47)

Ugrás a cikk elejére!

Címkék: ,

A múlt héten a “Tapadós fejléc és lábléc.” című bejegyzésem végén felvetettem egy kapcsolódó problémát a lapon belüli hivatkozásokkal kapcsolatban, melynek megoldásáról ebben a bejegyzésben rántom le a leplet.
Bővebben …

Hozzászólás: » 0 « • Írta: Péter (2010/02/27 13:36)

Tapadós fejléc és lábléc

Kategóriák: Fejlesztések, Megoldások
Címkék: ,

Ezt a bejegyzést már régóta ígérem Johnny barátomnak, és végre ma volt egy kis időm, hogy megírjam a fixen pozícionált fejlécek és láblécek rejtélyeit. A bemutatásra kerülő példa segítségével a jobb és baloldalon lebegő menük is könnyen kialakíthatóak, de ezek kivitelezésére nem térek ki.
Bővebben …

Hozzászólás: » 6 « • Írta: Péter (2010/02/18 21:35)

Mi az   ellentetje?

Kategóriák: Érdekességek, Problémák
Címkék: 

A címben szereplő kérdésre egyszerű a válasz, ugyanis nincs ellentetje, de legalábbis hivatalosan nem létezik. Igazából a bejegyzés ezzel a válasszal véget is ér, úgyhogy csak azok olvassanak tovább, akiket érdekel, a “Miért?”!
Bővebben …

Hozzászólás: » 2 « • Írta: Péter (2010/02/03 22:30)

:hover receptek képes linkekhez

Címkék: ,

A következő bekezdésekben arról írok, hogy miként érdemes a többállású képhivatkozásokat beágyazni egy honlap forrásába, és rávilágítok az ezzel kapcsolatos ok-okozati tényezőkre is. A haladóknak nem feltétlenül mondok újdonságot, de azért mindenképpen érdemes elolvasni, hogy tudatosuljon bennünk a bemutatott technikák előnyei és hátrányai.
Bővebben …

Hozzászólás: » 2 « • Írta: Péter (2010/01/25 23:50)

Azt hittem beteg a Tűzrókám …, de nem!

Címkék: ,

Két bejegyzéssel ezelőtt a HTML 5-öt alkalmazva illesztettem be egy kódsort, melynek a feladata egy rövid hangfelvétel lejátszása. Azonban azt még a Mozilla Firefox 3.5.7-es verziójában teszteltem, így működésképtelenségét e verzió számlájára írtam. Szinte a bejegyzés megírása után jelent meg az új 3.6-os verzió, amire azonnal felfrissítettem a böngészőmet. Lelkesen vártam, hogy végre működőképes lesz a beágyazott kód, de hiába. Mivel nem hagyott nyugodni, ezért ma utánajártam a rejtélynek.

Elméletileg a HTML 5 biztosít lehetőséget arra, hogy egy médiafájl beágyazása esetén deklaráljuk a szükséges kódekeket, de úgy veszem észre ez még eléggé gyerekcipőben jár. A Mozilla Developer Center idevonatkozó oldalán találtam rá a megoldásra:

Firefox 3.5 introduced support for the HTML 5 audio and video elements, offering the ability to easily embed media into HTML documents.  Currently, Ogg Theora, Ogg Vorbis, and WAV format media is supported.

(Forrás: https://developer.mozilla.org/En/Using_audio_and_video_in_FireFox)

Tehát a Google Chrome-nak sikerült megtévesztenie azáltal, hogy szó nélkül lejátszotta a beágyazott .mp3 formátumot, így a Mozilla Firefox-tól is elvártam ugyanezt. Sajnos, ez hiba volt. 🙁 Ezek után viszont már biztosan állíthatom, hogy az Ogg Theora és az Ogg Vorbis fájlokat mindkét böngésző hibátlanul kezeli, de a .wav fájlokat csak a Firefox.

A fenti tapasztalatok megszerzése után kicseréltem a régi bejegyzésemben az .mp3 fájlt egy .ogg-ra, így már “mindenki” számára hallható, de aki nem szeretne odáig visszalapozni, annak beillesztettem ide egy sokkal hatásossabb hang effektust. 😀

Frissítés!
Csak én nem tudom elkapni a hangerőszabályzó csúszkát a Firefox-ban? 😯

Hozzászólás: » 5 « • Írta: Péter (2010/01/23 10:41)

A YouTube már támogatja a HTML 5-öt!

Címkék: ,

Tegnap tett közzé egy bejelentést hivatalos blogjában a YouTube, melyben röviden leírja a HTML 5 sztenderd támogatására és népszerűsítésére irányuló kezdeményezését. A TestTube oldalán ti is átállíthatjátok a YouTube-ot úgy, hogy a Flash alapú lejátszó helyett a böngészők natív médialejátszóját, vagyis a <video> taget használja a portál.

(Forrás: http://youtube-global.blogspot.com/2010/01/introducing-youtube-html5-supported.html)

A YouTube esetében a felvételek lejátszásához rendelkeznünk kell a H.264-es kódekkel, egyébként minden egyéb formátumhoz is szükséges, hogy elérhető legyen a kliens számítógépén a megfelelő kódek. Teljesen véletlenül sikerült is rátalálnom egy klipre, ami már kihasználja HTML 5 adta lehetőségeket, ezért készítettem gyorsan egy rövid összehasonlító tesztet. Megjegyzendő, hogy a Mozilla Firefox még nem támogatja ezt, csak a Google Chrome, Apple Safari és a Microsoft Internet Explorer telepített Chrome Frame-mel. Most pedig következzen két képkocka, melyeket a Google Chrome alól készítettem:

Shockwave Flash Verzió

Klip: Shockwave Flash Lejátszó

Natív HTML Verzió

Klip: HTML Natív Lejátszó

Tisztán látható, hogy a HTML 5-ös megoldás egyértelműen rosszabb képet kaptam, ami nem tudom, hogy a CoreAVC kódekemnek vagy az alacsonyabb minőségű forrásnak köszönhető. Azt viszont mindenképpen pozitív tapasztalatként könyvelem el, hogy míg a Flash lejátszó esetén a Shockwave Flash plugin ~36 MB memóriát allokált magának, addig a natív lejátszó csak plusz ~8 MB-ot.

Az újdonságtól belelkesedve megpróbáltam én is lejátszatni itthon néhány .mkv-t és .avi-t a HTML 5 alkalmazásával, de nem jártam szerencsével. Sajnos, nem volt még időm kideríteni, hogy miért nem sikerült egyiket sem, de az .avi esetén valószínűleg a kódek hiánya okozza a problémát. Ellenben az <audio> taggel hivatkozott .mp3 fájlok probléma mentesen funkcionáltak, erről egy rövid példát is mellékeltem:

HTML Kód:
<audio controls="controls" autobuffer="autobuffer" src="./sample.mp3">A böngésződ nem támogatja ezt a formátumot.</audio>

Ahogy azt már említettem a Mozilla Firefox jelen pillanatban még nem támogatja a fenti scriptet, ezért Google Chrome-mal tessék próbálkozni! Az érdeklődőbbek számára viszont készítettem egy képernyőképet a Mozilla Firefox natív médialejátszójáról is, amelyet már a 3.5.7-es verzióban is megtalálható:

Mozilla Firefox HTML Player

Zárásként csak annyit jegyeznék meg, hogy a tegnapi bejelentéssel együtt a YouTube lejátszója kapott egy új mockupot, így például pontosan tudjuk “mennyi az annyi”, amikor választunk az adott videó elérhető felbontásai (360p, 480p, 720p, …) közül.

(A bejegyzésben szereplő képkockák a Josh Gabriel Presents Winter Kills – Deep Down (Official Video HQ) című felvételből származnak.)

Hozzászólás: » 2 « • Írta: Péter (2010/01/21 21:55)

A vertical-align rejtélye …

Címkék: ,

Az első bejegyzésemmel azonnal bedoblak benneteket a mélyvízbe, és mutatok egy apró, de annál hasznosabb CSS trükköt, ami még haladó webfejlesztők számára is értékes információ lehet.
Bővebben …

Hozzászólás: » 5 « • Írta: Péter (2009/08/02 16:30)