Címke: HTML
Végre elkészült a saját CSS-es RSS ikonom
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.
Hozzászólás: » 4 « • Írta: Péter (2010/05/21 21:05)
Így néz ki egy up-to-date menü
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!
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
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?
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
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!
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
andvideo
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!
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ó
Natív HTML Verzió
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ó:
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 …
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 …