rarouš.weblog

Dnes se podíváme na jedno z praktických užití mikroformátů – sémantické hledání. Možná jste si už položili otázku, k čemu vlastně ty mikroformáty jsou dobré. Ok, mají přidávat nějakou sémantiku do dokumentu, u hCard je přínos zřejmý, ale co dál? Jednou z možností jak využít sémanticky obohacené dokumenty je bohatší hledání.

Aktivace modulů

Yahoo Search nedávno přišlo s takzvaným uživatelsky upravitelným hledáním. Registrovaný uživatel si může do hledání přidat sémantické moduly, které upraví interpretaci výsledků. V základu jsou však aktivní pouze tři moduly upravující výsledky z Flickeru, Videa a Yahoo Travel. Zbylé si uživatel musí aktivovat sám. Jak na to?

1. Přejděte na stránku s výsledky.
2. Rozbalte nabídku Customize
3. Vyberte Browse Gallery
4. Zaškrtněte si třeba LinkedIn a stiskněte Add
5. Pak tlačítko Add zmáčkněte ještě jendou
6. A pak zmáčkněte tlačítko Save

No nyní už můžete využívat sémanticky bohatší výsledky z LinkedIn ve výsledcích hedání. Aktivace modulů není to, zrovna procházka růžovým sadem, Yahoo by mělo trochu zapracovat na použitelnosti. Ale ve výsledku to funguje a to je hlavní.

Jak to vypadá v praxi

V základu tedy máte generické výsledky fulltextu.

Po aktivaci sémantického modulu LinkedIn, se struktura výsledku změní .

Po aktivaci sémantického modulu Last.fm vypadá výsledek interpreta následovně.

Zatím je to jedna z prvních vlaštovek, tuším, že mikroformáty používá v hledání i Technorati, ale každý jiným způsobem. Google má něco podobného pro Youtube a obrázky. V Live Search jsem nic podobného nepostřehl… Pro mě osobně je zajímavé sledovat vývoj na tomto poli a jsem zvědavý, jakých implementací se dočkáme dále.

Související

• Vkládání data do stránky
• Mikroformáty – důvod proč používat XHTML

Tagy: Microformats, Search

Za tu dobu, co jsem na Vistě, jsem většinu času používal pouze Internet Explorer. Samozřejmě mám v systému Firefox, Operu i Safari. V naší branži je to nutnost. Před několika měsíci k nim přibyl Flock, který se tak nějak stal mým hlavním prohlížečem. Firefox 2.0 jsem nepoužíval z několika důvodů.

1. Ve Vistě je fakt hnusnej, nehodí se tam.
2. Žere zbytečně pamět.
3. Neměl pro mě žádnou přidanou hodnotu oproti kompaktnímu IE7.

Ale blýská se na lepší časy. S příchodem Firefoxu 3.0 se mnohé mění. První beta verze sice byly ještě hnusnější než dvojka, ale už poslední bety vypadaly přívětivěji. Pak jsem objevil několik zajímavých rozšíření, který dodají Firefoxu 3.0 konečně look & feel Windows Vista. Prvním je Glasser, který dodá prostředí více skla subsystému Aero, a druhým Hide menubar, který schová hlavní nabídkový pruh – vyvolat lze stiskem klávesy Alt. Konečně se nebojím Firefox zapínat! :)

Výkon webových stránek můžeme obecně zvýšit snížením počtu dotazů na server, snížením objemu přenášených dat, optimalizacemi HTML kódu a v neposlední řadě optimalizací výkonného kódu aplikace. První tři pravidla lze uplatnit i na obyčejných prezentacích, proto se na ně podíváme blížeji.

Snížení počtu dotazů na server

Prvním krokem v optimalizaci by mělo být snížení počtu dotazů na server. Čím víc dotazů, tím více se musí přenášet dat, tím více musí server vynaložit prostředků na jejich obsloužení.

Snažte se snížit počet souborů, které vaše stránka tahá s sebou. Pokuste se sloučit externí skripty do jednoho souboru, stejně tak stylopisy. Místo toho, abyste měli zvláštní stylopis pro tisk, využijte pravidla @media print. Dále omezte @import pravidla na minimum. Další spoustu dotazů mají jistě na svědomí obrázky. Využijte chytře techniku spojování obrázků a snižte tak počet dotazů na minimum.

Dalším krokem ke snížení počtu dotazů je správně nastavené kešování. Většinou se setkávám s tím, že kešování není řízeno vůbec nebo je rovnou zakázáno. To považuju za velikou chybu. Místo zakázání kešování, zkuste nastavit cache na minutu, dvě. Nedělejte to však pomocí meta tagů, to nemá žádný význam. Posílejte HTTP hlavičky. Např. Cache-Control: public, must-revalidate, proxy-revalidate, max-age=120 nastavuje veřejné kešování na dvě minuty a za tuto dobu musí jak lokální, tak proxy cache stránku obnovit.

Dalším účinným pomocníkem je Entity Tag – ETag. ETag je hash obsahu. Pokud se obsah změní, změní se i hash. Tento hash je posílán v hlavičce klientovi a ten ho může připojit do opětovného dotazu. Pokud se obsah na serveru nezměnil, server odpoví kódem 304 Not Modified. V takovém případě je odpověď krátká a přenáší se jen několik bajtů a klient ví, že může použít lokální verzi.

Správným nastavením hlaviček Cache-Control a ETag můžete svému serveru hodně odlehčit.

Snížení objemu přenášených dat

Když už máme snížený počet dotazů – tedy zátěž serveru, ve druhém kroku bychom se měli pokusit snížit trafic – množství přenášených dat. Zkoušel jsem několik technik. Rád používám XHTML protože ho pak můžu zpracovávat pomocí obecného XML readeru. A XHTML vyžaduje oproti HTML o dost bajtů navíc. Proto jsem si udělal takový malý benchmark mojí titulní stránky. Rozdíl mezi HTML a XHTML verzí je cca 3 %. Pak jsem zkusil ořezat přebytečné bílé znaky. Tam už to bylo o něco lepší úspora 13 %. Kombinace HTML bez bílých znaků pak je na šestnácti 16%. Je to sice pěkné číslo, ale zase taková úspora to není.

Proto jsem nasadil kompresi. Ta konečně přinesla kýžený výsledek – úspora 64 %. Docela zajímavý nástroj, který vám zjistí, zda kompresi používáte a kolik byste byli schopní uspořit, najdete na stránkách www.aspnetresources.com. Zkoušel jsem pokusně české portály a kompresi používá pouze Seznam.cz. Přitom zcela jistě ji dříve používal i Atlas.cz, nechápu, proč už není zapnutá.

Jak zprovoznit kompresi na vašem serveru? Pokud máte IIS 6 a možnost nastavit si server sám, tak detaily najdete v článku Enabling HTTP Compression (IIS 6.0), v případě IIS 7 zase v článku Changes to compression in IIS7. Pokud k nastavení serveru přístup nemáte, můžete použít HttpModul pro kompresi. Uživatelé Apache jistě znají mod_deflate a mod_gzip.

Správně nastavenou kompresí ušetříte trafik. Ať už platíte vy nebo váš poskytovatel, je nejen ekonomické ale i solidární mít kompresi zapnutou.

Optimalizace kódu stránky

Správně napsaným kódem se dá zrychlit vykreslování stránky.

• Pokud je vaše stránka well-formed a je validní, může být její vykreslení mnohem rychlejší.
• Pokud nastavíte obrázkům rozměry, bude vykreslování stránky plynulejší a nebude se nepříjemně natahovat.
• Pokud u dlouhých tabulek správně použijete thead, tfoot a vícero tbody, taktéž docílíte rychlejšího zpracování stránky.
• Pokud externí skripty a jiné větší objekty, na jejichž zpracování musí prohlížeč čekat, připojíte až na konec stránky, nebude se na ně zbytečně čekat na začátku nebo uprostřed. Je to třeba častý nešvar magazínů, kde se vám načte perex, pod ním se 20 sekund načítá reklama a pak najednou nablikne zbytek stránky.

Spoustu zajímavých tipů na zrychlení najdete ve vývojářské části Yahoo v článku Best Practices for Speeding Up Your Web Site. Užitečný nástroj ze stejné dílny, který vám stránku zkontroluje přímo ve vašem prohlížeči je Add-on do Firebugu s názvem Y-Slow.

Mnoho z vás si jistě řekně, „k čemu bych měl optimalizovat, když moje stránky navštěvuje pár lidí denně?“ Já jsem toho názoru, že plýtvat se nemá. Doma taky určitě nemáte neustále otevřený vodovodní kohoutek…

Jak už napsal Misantrop, David Grudl spustil novou La Trine a hned začíná sólokaprem. Podle mě trefil na jednu z největších kunďáren roku – samozřejmě až po koupi Atlasu ;). Zatímco všichni opěvují Michalovy obchodní schopnosti a gratulují mu k prodeji firmy Nově, někteří nechápou.

Já taky nechápu. Stejně jako jsem nechápal po prodeji Atlasu. Teď už chápu leccos. Dneska jde prostě o to, komu zůstane černej Pert, než splaskne bublina. A podle toho jak jsou dneska vytažený ceny a hlavně za jakýkoli komunity, bude to celkem brzo. Takže děcka, pokud máte nějakou komunitu, střelte ji co nejrychleji. Možná si brzo budou kluci z líbka trhat vlasy, že to tý Nově nestřelili zrovna oni. A nebo se taky šeredně pletu a plácám tropické šílenosti.

Ale nechť každý posoudí dle svého rozumu a znalostí… Čas ukáže.

Související

• David Grudl – Moc divná čísla kolem Blog.cz
• Martin Malý – Otevírák
• Radek Hulán – Michal Illich prodal Karlův most (aka Blog.cz)
• Michal Illich – CET 21 + JYXO
• Pavel Neuman – Nova koupila Jyxo za 6–8 mil. EUR + další info o dražbě Weblogy

Na blogu OVX píšou: Kdopak spadl do kanálu? A popisují jak měřit stahovanost RSS kanálu pomocí Google Analytics. Nápad to není špatný, ale měřené výsledky jsou celkem zavádějící – měří se každý hit na feed.

Pro měření oblíbenosti vašich feedů je tu mnohem lepší služba – FeedBurner. Kdysi placená služba je už nějaký ten pátek bezplatná. Co všechno tato služba nabízí?

1. Mirorování vašeho feedu – snížíte si trafik a zátěž serveru.
2. Měření počtu odběratelů.
3. Měření prokliku z feedu na vaše stránky.
4. Monetizaci pomocí reklam.
5. Mnoho dlaších služeb, které vám usnadní a zpříjemní práci s vašimi feedy.

Nevýhodou takového řešení je, že musíte změnit URL adresu feedu. Mně konverze uživatelů na novou adresu trvala asi dva až tři měsíce. Ale zas tolik jich nemám. Problém byl v tom, že jsem musel uživatele přimět k tomu, aby si URL feedu změnili sami, protože jsem z technických důvodů nemohl feed přesměrovávat na novou adresu. Ale lze docílit i hladkého přechodu pomocí trvalého přesměrování.

Tagy: RSS, FeedBurner, Analytics

Velmi často se ve zdrojových kódech HTML stránek potkávám se zajímavým mýtem a to s následujícím ta­gem:

<meta http-equiv="pragma" content="no-cache">

Autor se tím pravděpodobně pokouší docílit toho, aby se jeho stránka necachovala. Přejdu-li to, že vypnutí cachování je nesmysl už z pohledu škálování výkonu webové aplikace, tak stejně užití pragmy nemá hlubšího významu.

Proč je použití Pragma:no-cache nesmysl

1. Hlavička Pragma s hodnotou no-cache je součástí specifikace HTTP 1.1 z historic­kých důvodů a je dnes plně nahrazena hlavičkou Cache-Control.
2. Hlavička Pragma je pouze hlavičkou požadavku a v odpovědi nemá opodstatnění.

Hlavičku Pragma:no-cache posílali klienti HTTP/1.0 když nechtěli dostat cachovanou odpověď z lokální nebo proxy cache, ale přímo od serveru, který volali. Posílat ji tedy v odpovědi (natož v HTML) nemá žádný význam. Někdo by mohl podotknout, že mu to funguje. Mícrosoft na to říká: strkejte si pragmu do HTML, ale my vás stejně budem cachovat. Mozilla raději řídí cachování pomocí HTTP hlaviček a tento tag také ignoruje.

Závěr

Nejprve si rozmyslete, zda je pro vás zakázání cachování opravdu přínosné – v 99% případů nebude. Pokud stejně nebudete chtít cachovat (každý požadavek bude váš server muset vždy zpracovat, bude muset protéct po vaší lince atd.), posílejte HTTP hlavičku Cache-control s hodnotou no-cache. Vkládání do meta stránky nemá opodstatnění, zbytečně tak zvětšíte opověď a prohlížeče to stejně většinou ignorují.

Tagy: HTML, Pragma, Cache

Mikroformáty jsou určeny pro snadnější získávání dat ze stránek, jak pro lidi, tak pro stroje. Jedním z problémů je, jak vkládat data a časy, aby byly pochopitelné pro lidi i snadno vyparsovatelné strojem.

Způsobů zápisu data a času existuje nespočet. Snad každý stát/jazyk definuje jiná pravidla pro jejich zápis. Ruku na srdce, kdo z nás přesně ví, jak správně zapisovat datum a čas v naší mateřštině? Případ od případu se může lišit a i správných způsobů je hned několik. Pro přenos časové informace existují standardní formáty, ale ty jsou pro lidi mnohem méně srozumitelné. Jak skloubit snadnou čitelnost pro lidi i stroje?

Mikroformáty na scénu

Kupodivu mnoho mikroformátů obsahuje i definici pro některý časový údaj. Naštěstí, každý to neřeší jinou cestou, ale používá se návrhový vzor pro zápis data a času. V tomto vzoru se používá tag abbr, který uzavírá „lidskou interpretaci“ data a času, a v atributu title jeho strojovou podobu dle ISO 8601. Navíc se ještě využívá návrhového vzoru třída pro definování, co datum právě vyjadřuje.

Datum publikace článku můžeme zapsat následujícím způsobem:

Publikováno
<abbr class="published"
  title="2008-04-20T10:00:00Z">
  20. dubna 2008 ve 12.00
</abbr>.

V ukázce si můžete všimnout, že čas se v atributu title neshoduje s „lidskou“ podobou. Je to dáno tím, že jde o vyjádření tzv. univerzálního času UTC. Ekvivalentně lze zapsat jako středoevropský letní čas 2008-04-20T12:00:00+02:00.

Výpis v dotnetu

V ASP.NET se dají pro správný výpis použít dvě metody třídy System.DateTime. Tou první je metoda ToUniversalTime(), která čas převede na UTC, a tou druhou je ToString("s"), která vytvoří textovou podobu tzv. seřaditelného času. Nezapomeňte však přidat písmeno Z, vyjadřující UTC.

<abbr class="published"
  title="<%= item.DatePublished.ToUniversalTime().ToString("s") %>Z">
  <%= item.DatePublished.ToString("f")%>
</abbr>

Bohužel, žádný ze standardních formátů přesně neodpovídá tomu, který potřebujeme. Ale je tu možnost použít vlastní formát pro univerzální vyjádření času yyyy'-'MM'-'dd'T'HH':'mm':'ss'Z' nebo yyyy'-'MM'-'dd'T'HH':'mm':'sszz pro System.DateTimeOffset.

Tagy: microformats, asp.net

Víte o tom, že službu W3B můžete využívat i ve vašem mobilu? Mobilní verzi najdete na adrese http://www.weblogy.cz/m

Už je tomu nějakej ten týden, co jsem nasadil novou sociální homepage. Po úpravách, které jí měly vystavovat jako application/xhtml+xml došlo k tomu, že jsem se na ní ve Firefoxu už nedostal.

Měl jsem za to, že je chyba v mém systému a že je muj FF nějakej nabořenej, protože u Macíka to třeba nedělalo. Proto jsem to ani moc neřešil. Jenže jsem si jednoho dne řekl, že to musím rozlousknout.

Jádro pudla

Chyba nakonec nebyla pouze v mém Firefoxu, ale šlo o kombinaci Firofox + Silverlight. Do svého Google Analytics kódu jsem měl totiž přidaný kód, pro měření zastoupení Silverlight pluginu, který jsem vzal od Nikhila Kothariho. Problém byl v tom, že plugin instancioval pomocí vytvoření embed značky přes innerHTML. To v kombinaci s application/xhtml+xml Firefox sestřelilo.

Řešení

Když si mě včera do Twittru přidal Arcao, našel jsem na jeho stránkách informaci, o které jsem dosud nevěděl. Google Analytics maj novej script pro měření. Takže ten jsem použil pro novou verzi meho kontrolu na měření návštěvnosti. A začal si hrát s ověřováním Silverlightu. U IE jsem zůstal u metody inicializace ActiveX objektu a využití jeho API. U Firefoxu jsme na to musel trochu jinak. Nakonec jsem využil PAPI a vlastnost description, která vrací verzi pluginu.

Ale verze pluginu se neshoduje s komerčním označením Silverlightu. Musel jsem tedy ještě přidat přepočet. Zatím je to takhle:

No a výsledný kód po nějaké kompresi vypadá takto:

<%@ Control Language="C#" %>
<script runat="server">
private string _ua;
public string UserAccount {
  get { return _ua; }
  set { _ua = value; }
}
</script>
<script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>
<script type="text/javascript">
<% if (Page.Response.ContentType.ToLower() == "text/html") { %><!--<% } else { %>// <![CDATA[ <% } %>
try{var t=_gat._getTracker("<%= UserAccount %>"),v=(function (){var v='',n={},s='Silverlight',a='AgControl',b=s+' Plug-In',x=['2.0','1.1','1.0'];n.a=window.navigator.userAgent;n.p=navigator.plugins;
try {if(n.a.indexOf('MSIE')>=0){var c=new ActiveXObject(a+'.'+a);if(c)for(var i=0;i<sv.length;i++)if(c.isVersionSupported(x[i])){v=s+'/'+x[i];break;}}
else if(n.p[b]){v=n.p[b].description;var d=v.split('.');if(d.length>0)v=d[0]=='1'?s+'/2.0':d[0]=='0'&&d[1]=='95'?s+'/1.1':d[0]=='0'&&d[1]=='90'?s+'/1.0':d[0]=='0'&&d[1]=='80'?'WPF/E':'';}
}catch(e){}return v;})(),a=t._addOrganic,b=t._setVar,q='q',s='s';
a('seznam.cz',q);a('centrum.cz',q);a('jyxo.cz',s);a('atlas.cz',q);a('zoohoo.cz',q);a('tiscali.cz','query');a('1.cz',q);a('volny.cz','search');
a('zoznam',s);a('atlas.sk','phrase');a('centrum.sk',q);a('morfeo.sk',q);a('szm','ws');a('azet',s+q);a('zoohoo.sk',q);
t._initData();t._trackPageview();if(v)b(v);}catch(e){}
<% if (Page.Response.ContentType.ToLower() == "text/html") { %>// --><% } else { %>// ]]><% } %>
</script>

Snad se bude hodit.

Poslední dva dny jsem strávil na konferenci pro webové tvůrce pořádané Vilémem Málkem a Jakubem Vránou. Jaké to tam bylo a o co jste pravděpodobně přišli?

O WebCampu jsem věděl už před pár týdny. Nezaujal mě ani tak program, jako někteří přednášející. Už nějakou dobu jsme měl potřebu se setkat s Davidem Grudlem (všimněte si, není Grundl a ani DGX) a Borkem Bernardem. Vzhledem k tomu, že oba na této konferenci měli přednášet a navíc v Dejvicích, byla to jedinečná příležitost. :)

Psal jsem Borkovi, ať se mi večer ozve, že bych s nimi zašel „na jedno.“ Pak mi v úterý přišel mejl od Honzy Biena, že je pozvaný u může si vzít hosta, ať tedy jdu s ním. No měl jsem zrovna dovolenou a pohyboval jsem se v Praze – tak jsem souhlasil.

Den první – webový vývoj

První den byl věnován webovému vývoj a to především v PHP. Na konec jsem na konferenci našel několik i pro mne zajímavých témat. Na začátku bylo téma o podpoře PHP v produktech Microsoftu (o tom jak rozběhat PHP 5 v IIS na Vistě jsem už psal). Přednáška o budoucnosti PHP byla spíše zábavnou (alespoň z mého C# pohledu). Jakub ať se nezlobí, ale jeho generátor administračních rozhranní se mi vůbec nelíbil. ;)

Borek pak prezentoval celkem ze široka, jaké možnosti pro webové vývojáře dnes existují. Jako serverou alternativu prezentoval ASP.NET (v Dynamic Data měl admina stejně rychle hotového jako Jakub, navíc vč. doménových objektů). U RIA se Borek zmínil o Silverlightu 2 a Flexu. Dále o možnosti psát na serveru klientským způsobem a trendu sbližování technologií pro tvorbu tenkých klientů (browser, plugin, Java/.net, native). Pak jsme šli na pivo do Budvarky.

Vrátili jsme se až na závěrečnou část přednášky Tomáše Petříčka, která byla o Phalangeru v Silverlightu. Myslím, že ta dost přítomných vývojářů zaujala, alespoň podle pozdějších reakcí v hospodě. Na konec byl zlatý hřeb večera – přednáška DGXDavida o Texy! (z pohledu programátora).

Nakonec jsme se přesunuli o patro níž, kde je i hospoda. Tam jsme nakonec s Davidem a Štěpánem stvrdli až do tří nebo tak nějak. :D

Den druhý – budoucnost a přístupnost webu

Ráno jsme přišli dost zničení (po třech a půl hodinách spánku) a zachytili jsme začátek přednášky Davida Špinara o pravidlech přístupnosti pro weby státní správy. Následovala další přednáška o snaze o bezbariérový Seznam a další o tom jakým způsobem používají web handicapovaní uživatelé a praktickou ukázkou hlasové čtečky.

V odpoledním bloku vystoupil Chamurappi a představil svůj český validátor. Patrick Zandl měl velice zajímavou přednášku o Stream.cz a na závěr vystoupil Martin Hassman s tématem HTML5.

Všechno to byla zajímavá témata, ale díky únavě z předchozího dne, to mohlo vypadat, že mě to nezajímá, opakem byla pravda. Návštěvnost konference asi neodpovídala představám pořadatelů, ale možná to bylo i tím, že se o ní málo mluvilo – já jsem jí zaregistroval, díky službě W3B – nebo dosti vysoké ceně. Snad bude mít příští akce větší komerční úspěch.