Rival Blog

Že mám blog, jsem zase po několika měsících zjistil, až když jsem doménu rival.cz přesouval na nový server ;)

Co se týče článků o Skrz.cz, budu částečně publikovat i kamaráda Ondry Krabse, který poskytuje na svém blogu byznysandele.cz prostor pro start-upy, konkrétně tedy zde – http://www.byznysandele.cz/search/label/Startup%3A%20Skrz.cz

Přiznám se, že provozování Skrz.cz a v souvislosti s tím i vlastní affiliate sítě, mi zabírá veškerý volný čas, takže na psaní článků nebylo ani pomyšlení :-/

Tak jo, dneska je to přesně měsíc od mého posledního ublognutí o spojení fotobanky Pixmac.cz a Obrázky.cz a taky je to měsíc, co jsem spustil svojí „víkendovku“ – agregátor slevových serverů – Skrz.cz. Už to skoro přestává být víkendovka, ale takový malý byznys, takže se možná v dalších dnes trochu rozepíšu, jak to funguje, jaké jsou plány do budoucna a tak podobně, třeba to bude někoho zajímat a doufám, že se neobjeví dalších 50 agregátorů, už teď jich je asi 8 :)

Mimo Pixmac na full-time, jsme ještě spouštěli nový Florbal.cz, který jsme přemigrovali ze starého CMS na WordPress a zatím to až na pár much funguje dobře a zbývá doladit detaily a pár funkcí. No, vlastně bych málem zapomněl na spuštění projektu KupToFoto.cz, na který můžete slyšet neuvěřitelně originální reklamu na Evropě 2 nebo na TV stanici Óčko (to jsem zatím neviděl). Jde o projekt právě fotobanky Pixmac, fotobanky Profimedia a mediální skupiny Mafra (iDnes.cz). Jde o takový projektík, kde Pixmac hraje úlohu technologickou, Profimedia dodává pár dalších miliónů fotek (klasické, celebrity, papparazzi) a Mafra to celé zakončuje reklamou a propagací. Projekt byl spuštěný 1. 9. a krásně jsme si na něm ověřili Paretovo pravidlo – finální úpravy a poslední nasazení proběhlo doslova, za pět minut dvanáct (ne v poledne ;)

To bylo takové krátké shrnutí posledních 1 až 2 měsíců a ačkoliv si slibuju, že něco napíšu, úplně se vidím 17. října, jak píšu podobné shrnutí a zase si slibuju častější psaní… no, jiný už asi nebudu ;)

P.S.: Málem bych zapomněl na svůj off-line svět, máme už 2 týdny v předvýchově čtyřnohého pomocníka jménem Charm (border kolie) z organizace PesProTebe.cz. Budeme ho mít ještě 5 měsíců a pokud složí zkoušky, bude z něj vodící pes! Snad se podaří a snad se s ním za půl roku dokážeme rozloučit :´(

Fotobanka Pixmac odedneška dodává komerční výsledky do Seznamáckého vyhledávání obrázků na Obrázky.cz ;)

• http://obrazky.cz?q=byznys
• http://obrazky.cz?q=praha
• http://obrazky.cz?q=pláž

Sérii o rychlosti webu plynule nahradím sérií o javascriptovém frameworku jQuery. Nebudu rozebírat důvody, proč je dobré používat framework a už vůbec vám nebudu radit, který je nejlepší. Na to si člověk musí přijít sám ;) Sám jsem nahradil Prototype právě knihovnou jQuery.

Standardní funkce a efekty frameworků se v zásadě od sebe neliší, všude máte nějaké to vyjíždění, zasouvání, zkrácený přístup k elementům přes $(‘#id_elementu’), pohodlnou práci s DOMem a selektory, práce s Javascriptem je pak spíše zábava než práce. Ostatně, příkladů lze na internetu najít čím dál tím víc. Budu tedy střídat základy práce s frameworkem jQuery a užitečnými tipy a návody. Jinak jQuery má super dokumentaci, dobré příklady a rozsáhlé fórum. Tyto odkazy doporučuji v první řadě.

Horké klávesy (hot keys)

Znáte je z desktopových programů, ale čím dál více se začínají dostávat i do web aplikací, ve kterých je pak radost pracovat a bavit se. Klávesové zkratky jsou bezvadným doplňkem „user experience“ a to je v dnešní době obzvlášť důležité. Používáte v Google Docs zkratky? Všechny důležité fungují stejně jako v desktopových kancelářských aplikacích. A co Facebook? Stránkujete obrázky pomocí šipek na klávesnici nebo se snažíte pokaždé trefit myší na „Další“?

A právé teď přichází na scénu jQuery plugin hotkeys, který zvládne všechny zkratky ve všech moderních prohlížečích. Miniverze pluginu má jen 4.4 Kb, takže není třeba se bát stokilových molochů. „Bindování“ zkratek je pak až neskutečně triviální.

Zapínám odchytávání zkratky Ctrl+C (kopírování):

$(document).bind('keydown', 'ctrl+c', fn);

A tady zase vypínám:

$(document).unbind('keydown', 'ctrl+c', fn);

Čekali jste něco víc? Bohužel, je to až takhle jednoduché. Další informace a živé ukázky přímo na stránkách projektu. A ještě jedna ukázka praktického využití tohoto pluginu. U nás ve fotobance Pixmac je stránkování ve výsledcích vyhledávání jednou z nejdůležitějších funkcí. Najít ten pravý obrázek do prezentace nebo na billboard prostě někdy není jednoduché. Maximální komfort tak zaručí náš „Auto result“ a stránkování pomocí šipek na klávesnici. Auto result spočítá maximální možný počet fotek na stránce (z viewportu), takže na malém monitoru dostanete třeba 8 fotek, kdežto na velkém třeba 30. Konec nepohodlného skrolování ;) Pak přichází na řadu přednačítání další stránky v době, kdy prohlížíte fotky na stránce současné. Je to tak směšně prosté a elegantní, že to nikdo z konkurentů nemá. V době kdy prstem mačkáte klávesu „vpravo“ (viz. plugin hotkeys) už jsou náhledy dávno načteny a další stránku dostanete rychleji než bys řek „jQuery“. Předchozí stránka je pak stále schovaná v DOMu a tak stisknutím klávesy „vlevo“ dostanete předchozí výsledek hledání stejně rychle.

Však si to vyzkoušejte na nějakém příjemném tématu – žena v plavkách – a samozřejmě uvítám i kritiku, neb sto očí vidí víc, než jen těch deset našich. Díky ;)

V díle třetím ukážu jednu praktiku, která se hodí pro malé obrázky, typicky třeba ikonky, menší loga apod., kde lze ušetřit 100% HTTP requestů, které jsou největším žroutem času při načítání webu. Technika se jmenuje DATA URIs a podporují ji tyto prohlížeče – Firefox, Safari, Chrome, Internet Explorer od verze 8. Kompletní specifikaci najdete v RFC 2397.

Základním faktem je, že místo URL obrázku zapíšete do „src“ nebo v CSS do“url“ zapíšete toto schéma: data:[<mediatype>][;base64],<data>

Například:

<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7"
width="16" height="14" alt="Ikona složky">

Výsledkem bude taková hezká ikona, bez jediného HTTP requestu.

Na straně serveru potom musíte toto schéma z obrázku vygenerovat, například podle tohoto článku – http://www.sitepoint.com/blogs/2010/06/05/reducing-http-requests-with-generated-data-uris/ … a rozhodně doporučuji DATA URI kešovat, protože na straně serveru je víc takových operací náročných na paměť. Ale každý ušetřený HTTP požadavek za to stojí! Podívejte se ještě na můj příklad, jak mít stránku bez HTTP požadavků (zjistíte v záložce Síť ve FireBugu).

Příklad stránky s jedním HTTP požadavkem!