Jak obejít “nefunkční” Flashe po aktualizaci IE

20.04.2006 19:36

Pokud máte např. web, který je celý ve flashi (což já osobně nemám opravdu rád) nebo máte na svém webu flashové reklamy, tak s nejnovější aktualizací Internet Exploreru je většina flashů “neaktivních”. Flash je sice neaktivní, ale ve stránce se zobrazí a animace fungují, ale nefungují na něm žádné události (kliknutí, přejetí myši apod.). Aby flash fungoval normálně, tak uživatel musí myší nad flash najet a kliknout (nebo stisknout Enter), čímž se flash aktivuje a začně chovat jako obvykle.

Toto trápení je způsobeno změnou zpracování ActiveX komponent v IE a týká se to tagů APPLET, EMBED a OBJECT. Pro autory webů s flashovým obsahem nebo zadavatele flashové reklamy to je nepříjemná věc, kterou je naštěstí možné obejít.

Jak to obejít?

Toto omezení je možné obejít tak, že se reklama vloží do stránky pomocí externího JavaScriptu. Tzn. pokud máte tag <object> nebo <embed> přímo ve stránce, tak daný objekt bude zcela jistě neaktivní - prohlédněte si příklad, ve kterém je flash přímo ve stránce.

Řešení 1 - vložení objektu přes externí skript

Pokud je do stránky ActiveX objekt vložen z externího javascriptu, tak vše funguje bez problému. Vyzkoušejte si funkční příklad.

<!-- HTML stránka -->
<html>
  <body>
    <script type="text/javascript" src=\"embed.js\"></script>
  </body>
</html>

// externí javascript
document.write('<embed src=\"flash.swf\"></embed>');

Řešení 2 - externí znovu vložení pomocí outerHTML nebo innerHTML

Pokud je daný flash ve stránce "natvrdo", je možné ho znovu vložit pomocí externího JavaScriptu. S tímto řešením přišel David Grudl, které popisuje na svém blogu. Do stránky jednoduše nalinkujete externí javascript, který se načte pouze v IE (podmíněné komentáře) a až po načtení HTML kódu stránky (vlastnost defer) se v cyklu projdou veškeré objekty a znovu se vloží. Vyzkoušejte si funkční příklad.

<!-- HTML stránka -->
<html>
  <head>
    <!--[if IE]>
      <script type="text/javascript"  src="fix_eolas.js" defer="defer"></script>
    <![endif]-->
  </head>
  <body>
    <embed src=\"flash.swf\"></embed>
  </body>
</html>

Aby skript byl opravdu univerzální, tak jsem ho musel drobně rozšířit (stáhnout):

var aXobjects = new Array(\"object\",\"embed\",\"applet\");
for (var x=0; x<aXobjects.length; x++) {
	var objects = document.getElementsByTagName(aXobjects[x]);
	for (var i=0; i<objects.length; i++) {
	    objects[i].outerHTML = objects[i].outerHTML;
	}
}

Dále je nutné si dát pozor na správně nastavenou cache na serveru, protože pokud by daný soubor nebyl správně uložen u klienta, tak by se po znovu vložení opět stahoval ze serveru.

Je nepříjemné, že odstranit toto omezení jde pouze pomocí externího skriptu, tudíž pokud obsah výše uvedeného skriptu vložíte inline na konec stránky, tak i po jeho vykonání budou objekty stále neaktivní. Nicméně řešení existuje, není to sice nic hezkého, ale mohlo to být horší.


TOPlist již umí kreslit grafy z globálních statistik

15.03.2006 11:48

Zhruba před rokem jsem začal grafovat podíl vyhledávačů z globálních statistik TOPlistu, na němž je možné sledovat vývoj podílu vyhledávačů na stránkách, které mají měřící kód TOPlistu.

Pavel Francírek tuto myšlenku rozvedl dále a před několika dny dodělal do TOPlistu grafovaní veškerých tabulek z globálních statistik, což nám umožňuje sledovat trendy všeho, co TOPlist měří.

Aktuálně si můžete prohlédnout grafy:


Je rádce na Centrum.cz mladší bratr našeptávače na Seznamu?

21.01.2006 14:10

Dnes jsem se na blogu Milana Kryla dozvěděl, že Centrum nasadilo na HP a vyhledávání svého Rádce. Neváhal jsem a šel jsem se podívat o co jde. Co jsem zjistil, mě velmi překvapilo…

Je celkem pochopitelné, že Centrum také zavedlo svůj “našeptávač”. Na Googlu existuje v laboratoři, na Seznamu je již dlouho v provozu a je velmi populární, protože usnadňuje uživatelům práci s formulářem. Zavedení tedy není žádné překvapení.

Rádce vs Našeptávač - princip

Rádce narozdíl od Našeptávače nevypisuje u nabízených možností počet zadání za jeden den, ale počet nalezených stránek. Jak píše Milan Kryl, tak fráze jsou setříděny podle četnosti používání - což je podle mě počet zadání dané fráze do vyhledávání (tedy stejný princip jako na Seznamu). A proč se tedy zobrazuje počet výsledků místo počtu zadání? Milan toto zdůvodňuje tím, že získáte představu o potenciální konkurenci. Věru hodnotná to informace, ale už si přece nehrajeme na pískovišti ;)

Proč tedy počet výsledků hledání? Třebas proto, že to dělá Google nebo by spíše bylo trapné ukazovat malá čísla počtu hledání jednotlivých výrazů? Ideální řešení je tedy vypsat počet nalezených stránek - to ve většině případů bude dostatečně velké číslo.

Co ale musím ocenit, je přidání možnosti pravostranného rozšíření. Vypadá to jako zajímavý nápad a mohlo by to i dobře fungovat.

Já se domnívám, že Rádce by měl sloužit především uživatelům a ne jako “Rádce k PPC a SEO optimalizaci“. Ty mohou mít potřebné nástroje zcela jinde a mnohem sofistikovanější.

Rádce vs Našeptávač - technologie

Myslíte si, že kopírování zdrojového kódu někoho jiného (bez svolení), lehká korekce názvu funkcí a poté vypuštění na internet na svých stránkách (tedy vydávání za své dílo) je v pořádku? Já tedy rozhodně ne. Vzhledem k tomu, že jsem technicky zaměřený a docela obstojně ovládám javascript, tak jedna z prvních věcí co dělám je, že začnu ihned zkoumat zdrojový kód daného webu (aplikace).

Ovšem při zkoumání zdrojové kódu Centrum Rádce jsem nechápavě zíral. Vzhledem k tomu, že velmi dobře znám kód Seznam Našeptávače, tak jsem si během několika málo vteřin uvědomil, že vidím velmi podobný kód, jen s malinko jinými názvy funkcí a proměnných. Převážná většina kódu je slušná kopie, opravdu malá ochutnávka:

  • Začátek skriptu
    Rádce vs Našeptávač: 1
  • Funkce Init
    Rádce vs Našeptávač: 2
  • Funkce pro zobrazení výsledku
    Rádce vs Našeptávač: 3

Pro lepší představivost se doporučuji podívat na zdrojové javascripty od obou aplikací: Rádce - Našeptávač. A věřte, že podobnost není čistě náhodná nebo čerpaná z jiného - dalšího “free” zdroje.

Speciálně na třetím příkladu je vidět nápadná podoba. Co si o tom myslím? Centrum asi nemá bohužel dostatek kvalifikovaných lidí na vývoj vlastního a lepšího řešení. Sám zastávám názor, že u jiných se člověk učí a inspirace je zdravá, ale obyčejná kopie - to je již zoufalství. Podobný krok bych čekal od malého webového studia, ale ne od druhého největšího portálu u nás.

Na druhou stranu je to uznání výborné práce webmasterů v Seznamu (a především autora skriptu - Petra Doležala), protože když už se něco kopíruje, tak je to asi dobré.

Třešnička na dortu - bookmarklet

Chcete vidět, jak vypadají data z Našeptávače na Rádci? Mám pro vás bookmarklet, který je nutné spustit na Centrum.cz. Hezké, že? :)

Související


CSS design v pohledu do budoucnosti: workaround versus hack

04.09.2005 12:22

V dnešní době již existuje poměrně hodně stránek pro webmastery, na kterých se dozvědí nejrůznější hacky pro opravu té které chyby v CSS pro konkrétní prohlížeč. Ovšem stránek, které by poskytovaly informace ohledně workaroundů (neznám vhodný český výraz, proto používám „obejití chyby“) si myslím, že je opravdu poskromnu, takže se pokusím vhrnout trochu světla na dobré praktiky při kódování CSS.

Každý kdo je nějakým způsobem zapleten do webdesignu, speciálně tedy do kódování CSS tak ví, že nutně musí ovládat teorii, aby byl schopen odhalit, zda je jedná o chybu člověka nebo prohlížeče. Teorie je základ, ale nestačí, protože každý den musíme čelit rozdílům mezi prohlížeči, vykreslovacími a všemožnými chybami. Tyto překážky jsou velmi obtížné, avšak můžeme je brát jako výzvu :)

Pokud narazím na problém (chybu) v CSS, postupuji následovně:

  1. Pokud vím, že se jedná o chybu, mohu ji občas předejít
  2. Pokud to není možné, mohu ji obejít
  3. Pokud ani toto nezabere, tak mohu použít hack

Tím chci říct, že použití hacku by měla být vždy až ta poslední možnost.

Ale předtím, než se dostaneme ke konkrétnímu příkladu, pojďme se pokusit definovat co je hack a co je workaround (obejití chyby).

  • Hack je způsob, jak oklamat prohlížeč.
  • Workaround je způsob, jak oklamat vykreslovací chybu s minimálním vlivem na prohlížeč.

Jinak řečeno, hack řeší problém konkrétního prohlížeče zatímco workaround řeší problém obecně pomocí principů CSS. Základní problém s hacky je ten, že v dané chvíli nemůžeme říct, jak se budou chovat v nových prohlížečích, ovšem můžeme si být celkem jisti, že správný a logický CSS workaround nám bude fungovat tak jak chceme i v budoucnu.

Měli bychom vytvářet kód pro dnešek, ale myslet i na budoucnost. Kód by se měl vždy vytvářet pro co největší množství aktuálních prohlížečů a jedno perfektní doporučení zní takto: “code for the best, fix for the rest” (v češtině se to nerýmuje, ale znamená to: kóduj pro nejlepší, opravuj pro zbytek). Toto doporučení vám pomůže udržet vaše CSS malé, čisté, přehledné a umožní vám ho přizpůsobit pro slabší prohlížeče.

Podívejme se na asi nejznámější vykreslovací chybu v CSS: IE 5.x a jeho chybný box model. Myslím si, že toto je jeden z nejvíce otravných problemů, kterému musíme čelit den co den, při nastavování rozměrů u blokových prvků. Této chybě je možné se vyvarovat tak, že prvku zadáme pouze rozměr a rámeček nebo výplň (padding) zadáme na podřízený prvek, např:

#container { width:500px; }
#container #content { padding:10px; }

Stejný problém lze vyřešit i pomocí hacku:

#content { width:480 !important; width /**/:500px; padding:10px; }

Použití tohoto hacku je ještě relativně bezpečné, ale přesto je jedná o jasný hack konkrétního prohlížeče.

Podívejme se na jiný příklad:

/* Hides from IE5-mac \*/
* html #content { height:1%; }
/* End hide from IE5-mac */

Toto je krásný příklad hacku (dokonce dvojnásobného hacku). Ovšem tento hack lze vyřešit obejitím chyby minimálně dvěma způsoby:

#content { height:1%; }
#container > #content { height:auto; }

a řešení číslo dvě s jedním pravidlem:

#content{ height:auto !important; height:1%; }

V IE6 se při používání float můžete často setkat s chybami jako je 3px mezera textu nebo peekaboo. Nicméně můžeme se těmto chybám vyvarovat bez použití hacků? Ano, můžeme se pokusit vyřešit chybu ve floatu samotným floatem. Z toho co vím, lze řadu vykreslovacích problémů v IE vyřešit opačnými floaty.

Základní definice pravidel CSS pro dvousloupcový layout s pevnou šířkou:

#container { width:760px; }
#content { float:left; width:500px; }
#sidebar { float:right; width:160px; }
#footer { clear:both; }

Pro třísloupcový layout uvažujme následující HTML:

<div id=\"container\">
	<div id=\"header\">Header</div>
	<div id=\"main\">
    	<div id=\"content\">Content</div>
	    <div id=\"nav\">Navigation</div>
	</div>
	<div id=\"extra\">Extra column</div>
	<div id=\"footer\">Footer</div>
</div>

Jedinou nevýhodou tohoto kódu je navíc jeden obalovací prvek pro prostřední sloupec a navigaci, nicméně pořadí sloupců v kódu je ideální pro přístupnost a vyhledávače. K tomuto HTML ještě potřebujeme CSS:

#container { width:760px; }
#main { float:left; width:540px;  }
#content { float:right; width:400px; background:#aaa; }
#nav { float:left; width:140px; background:#bbb; }
#extra { float:right; width:220px; background:#ccc; }
#footer { clear:both; }

A zde to máme. Základní sadu pravidel CSS, pomocí kterých získáme robusní cross-browser CSS layout pro moderní, a také pro ne až tak moderní prohlížeče bez jediného hacku.

Doufám, že vás tento trošku delší článek nenudil, že byl alespoň trošku užitečný a svůj názor na toto téma můžete vyjádřit v komentářích.


Poznámka: Jedná se o volný překlad článku CSS design for the future: workaround vs hacks od Alessandra s jehož názorem se ztotožňuji.


Rychlé XML-RPC se jmenuje FastRPC

14.08.2005 13:52

FastRPCPokud programujete aplikace, které využívají pro vnitřní komunikaci protokol XML-RPC, tak jistě víte, že tento protokol má určité výkonové i datové rezervy. Jinak řečeno - přenáší se hodně “omáčky” :)

Tento problém řeší protokol FastRPC, který je nejvíce užitečný u vysoko zátěžových aplikací, které vyžadují vysoký výkon, rychlost a minimální přenos zbytečných dat. Toto je možné díky tomu, že FastRPC je vlastně binární verze klasického XML-RPC.

Stejně jako klasické XML-RPC také FastRPC využívá pro přenos dat HTTP protokol. Dále FastRPC poskytuje plnou kompatibilitu s klasickým XML-RPC, přičemž k určení datového formátu (textový/binární) pro přenos dat dojde automaticky pomocí HTTP hlaviček.

Aktuálně FastRPC existuje jako C++ knihovna a jako modul do Pythonu a PHP4.

Více informací (příklady, manual, zdrojové kódy) naleznete na adrese fastrpc.sourceforge.net. Specifikace binárního protokolu je dostupná v manuálu.

Za vývojem tohoto produktu stojí portál Seznam.cz a jeho programátoři Václav Blažek, Miroslav Talášek a Roman Marek. V současné době to je už druhý open source produkt portálu Seznam.cz (první byl šablonovaní systém Teng).