rarouš.weblog

Je to už pár měsíců, co mě oslovil Vašek Stoupa, zda bych nechtěl přednášet na WebExpu o ASP.NET MVC. Zprvu jsem váhal, protože nemám žádné prezentační zkušenosti a tak jsem to chtěl celé hodit na Borka. Jenže pak jsem si vzpomněl na skvělé přednášky z MIXu, kde nebyl pouze jeden přednášející, ale tandem. Slovo dalo slovo, Vašek i Borek souhlasili a my jsme zapsaní v programu konference. :) Protože ASP.NET MVC ještě není ve stabilní formě API (ta by měla být více méně stabilní v betafázi, která se blíží), domluvili jsme se na tom, že probereme více věcí.

Doufám, že se Borek nebude zlobit, když prozradím naši předběžnou osnovu. Můžete se k ní vyjádřit v komentářích a my ji můžete případně vylepšit. :)

1. WebForms – povídání o tom, kde je vhodné použít klasické WebForms a novinkách ve verzi 3.5
2. AJAX – povíme si, jak je integrována podpora AJAXu v ASP.NET
3. ADO.NET Data Service – bližší seznámení s REST službami postavenými nad ADO.NET a ukázka ve spojení s AJAXem
4. Dynamic Data – povídání a ukázka dynamicky vytvářených administračních rozhraní ze schématu databáze.
5. MVC – povídání a ukázka MVC frameworku, jak se liší od WebForms a možná i spojení s Dynamic Data, to jak zbyde čas.

Pokud vás tato témata zajímají, přijďte se na nás podívat, pokud nezajímají, přijďte se podívat na koktajícího rarouše… ;) Každopádně tam bude spousta jiných zajímavých přednášek, třeba Davidův evergreen o Nette Frameworku.

Včera jsme se podívali na mikroformáty v Texy! Dnes si představíme novinku, kterou přináší Internet Explorer ve verzi 8. Tou novinkou jsou WebSlices – webové výřezy.

Praktické využítí

Výřezy umožňují, aby uživatel mohl sledovat změny části webové stránky. Podobně jako u RSS nebo Atom jde o syndikaci obsahu malé části webové stránky. Prakticky to může vypadat třeba následovně.

U svých článků často přidávám odkazy na související články. Jenže je všechny nezadám při publikaci článku, ale spíš postupně přidávám a třeba když narazím na nějaký pěkný článek k tématu, tak ho přidám. Jenže to už spousta lidí má dočteno a třeba se už nevrátí, nedozví se, že přibyly zajímavé odkazy na dané téma. S WebSlice, můžu označit tento kousek článku k odběru a pokud má čitatel zájem, přidá si ho. Potom když přidám nějaký zajímavý odkaz, čtenář o tom bude vědět.

Jiný příklad, který mě napadá. Stránky nějakého hudebního festivalu obsahují informace o ceně a množství volných vstupenek. Tyto informace se v čase mění – čím je fesťák blíž, tím cena roste a počet vstupenek klesá. Na takovou informaci je celkem zbytečné vytvářet RSS feed. Stačí ji prostě označit jako výřez. Já třeba ještě nejsem rozhodnutý, jestli půjdu, nebo chci vědět, kolik aktuálně vstupenka stojí a kolik jich zbývá, aby se mnou mohli jít i kamarádi. Tak se přihlásím k odběru takové informace.

Uplatnění vidím i jinde.

Technické zpracování

Výřezy jsou části stránky označené třídou hslice a nějakým id a obsahující elementy s třídou entry-title a entry-content z mikroformátu hAtom. Živý příklad ze včerejšího článku je lepší než tisíc slov:

/--div .[#related hslice]
== Související .[entry-title]
.[entry-content]
* [clanek(282)]
* [clanek(267)]
* [clanek(256)]
* [microformats-cz]
\--div

Když uživatel najede nad tento kus článku, objeví se tlačítko pro subskripci:

Po jeho odsouhlasení se stránka přidá do oblíbených a do feedů. Po rozkliknutí se objeví náhledové okno s aktuálním výřezem:

Další možnosti

U výřezů funguje automatické nalezení podobně jako u RSS a Atom feedů, vlastně jsou ve stejné nabídce, ale jsou odlišeny fialovou ikonkou výřezu. Automaticky se vybere první nalezený výřez. Pokud ale chcete nabídnout k přihlášení jako první jiný výřez, lze to ovlivnit vložením meta tagu do hlavičky:

<link rel="default-slice" type="application/x-hatom" href="#related" />

Mění se pouze obsah atributu href v němž je cesta k výřezu. Jak jsem již říkal, ten musí být označen atributem id tudíž je přes jeho hodnotu odkazovatelný.

Dále je možné omezit platnost výřezu pomocí date-patternu s třídou endtime nebo periodu aktualizace za pomocí třídy ttl:

<p>Úryvek se aktualizuje jednou za <span class="ttl">60</span> minut.</p>

Lze i definovat vzhled výřezu a pracovat s nimi na úrovni JS API, ale to už je mimo rámec tohoto článku.

Formát hAtom

Jak jsem již psal výše, výřezy jsou z části postavené na mikroformátu hAtom. Ten slouží k definování něčeho jako Atom feed ve stránce. Dají se jím celkem trefně popsat blogové zápisky, protože obsahuje téměř všechny třídy, které se můžou k popisu blogového zápisku hodit. Proto když budete dělat novou šablonu pro svůj blog, zkuste se u tohoto mikroformátu inspirovat.

Tagy: Microformats, WebSlice, IE8

Mým oblíbeným značkovacím jazykem je Texy! Léta jsme na ní zvyklý, ostatně používám ji i tady na blogu. Mikroformáty jsou téma, které mě zajímá v poslední době. Pojďme si přiblížit jejich užití v Texy!

O tom, co jsou mikrofomáty se třeba dočtete na Microformats.cz. Pokud se vám to nechce dohledávat, tak vězte, že jde o kusy (X)HTML kódu, které mají vyšší sémantiku. Začněme tedy s jednoduchými ukázkami.

rel-design-pattern

Jedním z nejjednodušších vzorů je užití atributu rel u odkazů. Tento atribut se používá k označení vztahu k odkazovanému dokumentu. Odkazy se dají v Texy zapsat několika způsoby, já s oblibou využívám reference, které vypisuju na konci dokumentu. Pro mne je to pak mnohem přehlednější, mít všechny odkazy na jednom místě.

[rarous]: http://rarous.net/#kontakt Aleš Roubíček .{rel:me}
[david]: http://davidgrudl.com/ David Grudl .{rel:friend met}
[tag microformats]: http://technorati.com/tag/microformats Microformats .{rel:tag}
[clanek(282)]: /weblog/282-mikroformaty-v-hledani-yahoo.aspx Mikroformáty v hledání Yahoo .{rel:bookmark}

V předchozí ukázce jsem použil vzor rel při definici mikroformátů XFN, rel-tag a permalink z HTML4.

vizitky hCard

O něco pokročilejším mikroformátem je hCard.

/--div .[vcard]
==Aleš Roubíček .[fn]
vývojář webových aplikací .[job]

Web:
  - [rarous]
E-mail:
  - [email]
Telefon:
  - +420737461283 .[tel]
\--div

[rarous]: http://rarous.net/ .[url]{rel:me}
[email]: ales@roubicek.name .[email]

Takto nějak může být v Texy zapsaná vizitka – kontaktní informace. Je to zkrácená verze, toho co mám v kontaktu na titulce.

tracklisty hAudio

Dalším mikroformátem, který se může hodit je hAudio, sloužící k popisu hudebních děl.

/--div .[haudio]
1. "Dubfire .[contributor]"  - "Emissions .[title]"  .[item]
2. "Steve Angello .[contributor]"  - "Trix .[title]"  .[item]
3. "Delete .[contributor]"  - "Flight Schedule .[title]"  .[item]
4. "Gui Borato .[contributor]"  - "The Rivington .[title]"  .[item]
5. "Lutzenkirchen .[contributor]"  - "Kobalt .[title]"  .[item]
6. "Solaris Heights .[contributor]"  - "No Trance .[title]"  (Popof Remix) .[item]
7. "System 7 .[contributor]"  - "Space Bird .[title]"  (Dubfire Remix) .[item]

Ke stažení "dj set .[category]" [download] (MP3 128 kbps; 36,4 MiB)
\--div

[download]: http://rarousmusic.com/mp3/alessio_busta_-_seven-rm.mp3 "Alessio Busta .[contributor]" - "Seven .[title]" .{rel:enclosure}

Tohle je například živá ukázka ze včerejšího vydání setu Seven.

Závěr

Doufám, že jsem předvedl pár praktických ukázek užití mikroformátů v Texy! Nejsem si jistý, zda lze syntaxí Texy pokrýt všechny možné nuance mikroformátu, ale ona k tomu ani není přímo určena. Každopádně mnohé lze užívat bez problémů. Zajímavým cvičením dnes pro mne bylo, jak v Texy zapisovat Texy :)

Tagy: Microformats, Texy!

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ě IIS7 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