středa, 9. listopadu 2011

TIP: Jak na Mootools & jQuery zároveň v jednom projektu

Ať už jste donuceni z jakéhokoli důvodu použít obě výše zmíněné Javascriptové knihovny na jednom projektu, možná se Vám bude hodit následující tip. Předem je třeba říct, že tyto knihovny skutečně mohou fungovat zároveň a nebude Vás to stát mnoho úsilí.

Jak jistě víte, jQuery i Mootools používají znak dolaru ($) jako zkratku pro volání funkce jenž je jádrem obou knihoven. Toto chování lze však u jQuery vypnout pomocí jednoduchého příkazu:

jQuery.noConflict();

Na internetu je mnoho diskuzí kde doporučují následující postup:

<script type="text/javascript" src="jquery-1.3.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script type="text/javascript" src="moo1.2.js"></script>

Všimněte si, že se zde prvně načítá jQuery, poté se vypne asociace k dolaru a nakonec se načítá Mootools. Toto řešení je ovšem docela nevzhledné a pokud používáte automatické načítání skriptů, je zbytečně obtížně realizovatelné.

Po pár hodinovém mlácení hlavy do stolu jsem nedávno na jednom projektu přišel k závěru, že to jde udělat líp, aniž by se knihovny praly. Trik je v tom, že musíte zajistit, aby se Mootools načetlo před jQuery. Potom už můžete kdekoli z kódu zavolat magickou metodu noConflict(). Pokud by se prvně načetlo jQuery, Mootools by nebylo funkční a vy byste si omlátili hlavu o stůl stejně jako já, než byste přišli na to, čím je způsobena nefunkčnost Vašeho skriptu.

Ve finální podobě tedy:
//head
<script type="text/javascript" src="moo1.2.js"></script>
<script type="text/javascript" src="jquery-1.3.js"></script>

//content'n'stuff

<script type="text/javascript">
    //kdekoli v kódu
    jQuery.noConflict();
</script>


Doufám, že tento tip Vám ušetří čas, peníze a modřiny.

sobota, 1. října 2011

GAIKAI - 3D hry v internetovém prohlížeči!

Co si budeme namlouvat, za vším dnes stojí peníze. A tak když velké společnosti viděli úspěch služby OnLive (psal jsem: OnLive - Hrajte nejnovější hry na netbooku!), přišli s velice "originálním" nápadem rozjet vlastní portál nabízející téměř to samé. Tedy možnost hrát jakoukoli hru i z nevýkonného počítače. Hlavním rozdílem a i lákadlem je, že si do svého počítače nemusíte instalovat žádného klienta. Gaikai, jak službu nazvali, se totiž umí spustit přímo ve vašem internetovém prohlížeči. Pro nás to znamená jediné: konkurenční boje a v jejich důsledku snad i lepší služby.

Gaikai je zatím ve stádiu testování, ale velice rychle se rozjede v plnohodnotnou službu. Již nyní můžete vyzkoušet jak takové hraní bude vypadat a jestli k tomuto máte dostatečně rychlý internet.

Abych nezdržoval, dema několika málo her si můžete zdarma vyzkoušet zde: http://www.gaikai.com/

Aby těch cloudových služeb nebylo málo, plánuje se spuštění podobného systému OTOY. Ten by měl být více zaměřený na aplikace, kde se hodí mít obrovský výpočetní výkon, jako třeba při práci s videem. To jen potvrzuje mé dřívější domněnky o konci éry klasických desktopových systémů a jejich aplikací.

neděle, 25. září 2011

Airfoil - Streamujte zvuk ze svého Macu či PC bezdrátově

Chcete se zbavit všech otravných drátů a plně využít potenciál domácí bezdrátové sítě? Chcete přehrávat zvuk ze svého laptopu na jiném počítači, ke kterému máte připojené reproduktory? Přináším Vám tip jak toto realizovat za pár stovek korun. Aplikace Airfoil udělá veškerou těžkou práci za na pár kliknutí.

Jednoduše nainstalujte Airfoil na jednom z počítačů. A na druhém počítači nainstalujte a spusťte Airfoil speaker. Pokud jsou oba počítače ve stejné síti, okamžitě se zobrazí v seznamu dostupných zařízení. Pak už jen stačí vybrat aplikaci, nebo zvukové zařízení, jehož zvuk chceme přehrávat, klepnout na tlačítko connect a máte hotovo. Jednodušeji už to ani nejde.

Předem upozorňuji, že je toto vhodné spíše pro přehrávání zvuku samotného, než nějakého videa či filmu, protože má aplikace docela velký buffer (jenž nejde nastavit), takže pocítíte přibližně dvou sekundové zpoždění zvuku. Při přehrávání videa (např. přes program VLC) se doporučuje nastavit zpoždění obrazu na hodnotu 2.7s , ale nejlepší bude, když si to sami vyzkoušíte. 

Oficiální stránka: rogueamoeba.com/store/

Pokud by někdo nechtěl investovat do samotné aplikace Airfoil, nebo mu natolik vadilo zpoždění zvuku, může zkusit rozchodit PulseAudio server (Měl by umět fungovat na všech platformách) na obou stranách a nastudovat si materiály k tomu, jak jej správně nastavit. (pak by mělo být možné snížit tento lag na pár stovek milisekund) Pokud se toto někomu povede dřív než mě, budu velice rád, když se s námi podělíte o detailní postup.

pondělí, 5. září 2011

WDTV LIVE Czech official

Omlouvám se za delší neaktivitu, mám stále více práce a tím méně času na vedlejší aktivity. Mnoho z vás si již jistě všimlo, že vyšlo hned několik nových verzí oficiálního firmware. Za zmíňku stojí poslední aktualizace 1.06.1, která přidává do zařízení oficiální podporu českého jazyka v menu (vzkaz pro WD: pozdě, ale přece) .

Aktualizace by Vám měla automaticky vyskočit v nabídce menu.
Pokud ne, můžete si ji stáhnout na adrese:

Pro mě osobně toto zařízení přestalo být takovým trhákem, protože v dnešní době všechny nové televize zvládnou co tato krabička. Mým dalším plánovaným krokem je Google TV popř. Apple TV (ovšem, až budou u nás více rozšířené). Nadále se tedy přestávám zajímat o toto zařízení, ale doufám, že si vaši sledovanost získám u jiných připravovaných článků o webdesignu a obecných poznatků ze světa Informačních Technologií.

pondělí, 23. května 2011

OnLive - Hrajte nejnovější hry na netbooku!

Je tomu již více než rok, kdy jsem psal článek o Chrome OS a o budoucnosti osobních počítačů, ve jsem zmiňoval začínající projekt OnLive. Od té doby se z malého projektu stala docela slušně rozšířená služba a každým dnem získává na popularitě u hráčů po celém světě.

O co jde? OnLive je první služba svého druhu, plně využívající takzvaného cloud computingu. Z vašeho nevýkonného počítače či notebooku hravě udělá "nadupanou" herní konzoli a vy si tak můžete zahrát i ty nejnovější herní pecky, bez nutnosti neustálého dokupování novějšího a rychlejšího hardwaru.

Jak to ale funguje? Trik spočívá v přesunutí všech výpočetních úkonů, potřebných k plynulému běhu hry, z vašeho počítače (terminál) do výpočetního centra (server) klidně i tisíce mil vzdáleného.

Poté co na svém ovladači stisknete libovolné tlačítko, je třeba hrubou silou výpočetního centra zpracovat výsledný obraz hry a dopravit ho zpět na vaši obrazovku za pomocí internetu (streamování videa). To vše během několika milisekund.
Do vašeho počítače se tak přenáší video s minimálně třiceti snímky za vteřinu. Je proto možné, že vaše internetové připojení nebude dostatečně rychlé a hra již nebude plynulá. Internet se ovšem globálně zrychluje a proto je řešení tohoto problému pouze otázkou času.

OnLive nabízí slušnou dávku her a každým měsícem se zde objevují nové tituly. Každou hru je možné si zdarma vyzkoušet na 30 minut. Po této době máte možnost zaplatit si hru na pár dní nebo si ji koupit napořád, jako kdyby jste si ji koupili v kamenném obchodě. OnLive také nabízí speciální balíčky her za měsíční poplatky.

Kromě hraní her nabízí OnLive také komunikaci se svými přáteli, přes textový chat a nově i pomocí mikrofonů. Zajímavá je funkce "špehování", kdy můžete vidět co zrovna hrají ostatní hráči  (tato možnost jde v nastavení vypnout). Onlive si také pamatuje všechny vaše uložené pozice ve hrách.

OnLive můžete provozovat na jakémkoli počítači s Windows nebo MacOS kdekoli ve světě (v závislosti na dostupnost internetového připojení), případně si můžete koupit OnLive konzoli k televizi (viz. obrázek).


Klady:
- Nejnovější hry rozjedete i na starém počítači až ve FullHD rozlišení (závisí na rychlosti linky).
- Žádné dlouhé instalace her.
- Rozumné ceny
- Už žádné zálohování uložených pozic z her.
- Mnoho možností komunikace a hledání přátel a protivníků

Zápory:
- Náročné na internetové připojení. (V ČR prozatím nemyslitelné použití pro FPS hry, kdy se počítá každá milisekunda)
- Omezený výběr z her. (OnLive se ale snaží vyhovět poptávkám hráčů)

Oficiální web: http://www.onlive.com/

sobota, 14. května 2011

CSS Trik: Oprava chyby pozadí při 100% šířky stránky

Dnes jen velice krátce. Na spoustě webů používajících vodorovné čáry přes celou šířku okna prohlížeče bývá často viděn neošetřený problém, způsobující nehezký vzhled při scrolování. Jeden obrázek za tisíc slov:

Jak vidíte, pozadí stránky není zcela dotažené do konce, což možná zrovna u facebooku možná tolik nevadí, protože je pozadí bílé. Na jiném webu by to však mohlo způsobit například nečitelnost textu.

To je způsobeno tím, že má element s pozadím nastavenou šířku na 100%. Pokud tedy zmenšíme okno na velikost menší než je šířka našeho globálního wrapperu (který používáme třeba kvůli vystředění stránky), tak tento wraper přeteče přes šířku nadřazeného elementu (čili elementu s pozadím).

A jaké má tato situace řešení?
Velice jednoduché, stačí nastavit elementu nesoucímu toto pozadí minimální šířku.

V případě facebooku tedy:

#bluebar {
  /*původní definice*/
  min-width981px;
}

Doufám, že se Vám tento tip bude hodit.

pondělí, 25. dubna 2011

CSS trik: Zaoblení rohů elementu o 1px a 3px bez použití obrázků

Dnes pro vás mám dvě užitečné CSS třídy, které můžete s drobnými úpravami hromadně používat ve vašich projektech. Je určen hlavně do prostředí, kde nemůžeme spoléhat na podporu CSS3. Bez dalšího dlouhého vysvětlování...


Chcete-li zaoblit rohy elementu o 1 pixel, přiřaďte mu třídu rounded-corner-1 , která je definována takto:

.rounded-corner-1 {
    displayinline-block;
    background#fff;
    border-left1px solid #fff;
    border-right1px solid #fff;
}

.rounded-corner-1:before{
    border-top1px solid #fff;
    padding-top1px;
    displayblock;
    content" ";
    positionrelative;
    top-1px;
}

.rounded-corner-1:after{
    border-bottom1px solid #fff;
    padding-bottom1px;
    displayblock;
    content" ";
    positionrelative;
    top1px;
}

Chcete-li zaoblit rohy elementu o 3 pixely, přiřaďte mu třídu rounded-corner-3 , která je definována takto:

.rounded-corner-3 {
    displayinline-block;
    background#fff;
    border-left2px solid #ddd;
    border-right2px solid #ddd;
    positionrelative;
    z-index2;
}

.rounded-corner-3:before{
    width100%;
    height100%;
    padding2px 0;
    border1px solid #ddd;
    border-left:0;
    border-right:0;
    displayblock;
    content" ";
    z-index-1;
    positionabsolute;
    top-2px;
    bottom0px;
}

.rounded-corner-3:after{
    width100%;
    height100%;
    border1px solid #ddd;
    border-left:0;
    border-right:0;
    padding2px 0;
    displayblock;
    content" ";
    z-index-1;
    positionabsolute;
    top-1px;
    left-1px;
    bottom0px;
}


Jak vidíte, zaoblení o 3px potřebuje trochu více kódu, ale výsledek stojí za to.

Demo pro 1px: http://jsfiddle.net/marakoss/FRsG6/

Obě verze fungují od IE8 (kvůli absenci podpory pseudoelementů :before a :after)

Doufám, že vám tento trik ušetří mnoho času.