Nejnavštěvovanější stránky Ataxo (návod jak jsem kdysi měřil H1.cz)

Před dávnou dobou jsem napsal článek Známe nejnavštěvovanější stránky (služby) na webu H1.cz, který vzbudil odezvy typu "jak že jsem to jenom změřil" či “on něco takového umí Google Spreadsheet”. Doba pokročila a tak jsem se rozhodl připravit krátký nástin toho, jak jsem to provedl. Některé z níže popisovaných věcí již nemusí fungovat a proto budu psát v minulém čase (jednotného čísla, třetí osoby, pohlaví mužského). Předně také musím napsat a upozornit na slovo “odhad” návštěvnosti. Sám vím, že nejde o 100% přesnou metodu, ale v rámci možnosti jste byli schopni alespoň rámcově či poměrově odvodit návštěvu jednotlivých stránek (např. kolik % uživatelů z hlavních stránky navštíví stránky kontaktů nebo o jaké služby je nejvíce zájem). Nemusíte se, prosím, namáhat upozorňovat na nepřesnosti a kritizovat správnost. 

U webu H1.cz jsem prováděl odhad návštěvnosti cca v době září-říjen 2010 a u ATAXO pak v době říjen 2010 - duben 2012 (nechal jsem to prostě běžet :-)

1) Seznam stránek
V prvním kroku jsem musel získat seznam stránek daného webu. U většiny webů naleznete něco jako sekce Mapa webu (http://www.ataxo.cz/mapa-webu) a u těch SEO lepších pak dokonce i sitemapu XML (http://www.ataxo.cz/sitemap.xml). Tato data jsem si zparsoval a udělal nich txt soubor. To pro případ když bych měřil déle a web se dynamicky změnil. Tento txt soubor jsem si uložil na server (netradičně ataxo.txt)

2) CSS hack (teorie)
Kdysi dávno měla většina prohlížečů (později už jen část těch méně chytrých) velmi zajímavý bug/feature. Každý navštívený odkaz (link) změní v prohlížeči svoji barvu. Uživatel má tedy přehled, na jakých stránkách již byl. A právě k této hodnotě se dostane JavaScript.

3) CSS hack (praxe)
Vytvořil jsem si PHP stránku, která automaticky načetla všechny URL odkazy z ataxo.txt a vytvořila HTML kód

<a id="s0" href="http://www.ataxo.cz/">http://www.ataxo.cz/</a><br>
<a id="s1" href="http://www.ataxo.cz/nabizime/male-firmy">http://www.ataxo.cz/nabizime/male-firmy</a><br>
<a id="s2" href="http://www.ataxo.cz/nabizime/velke-firmy">http://www.ataxo.cz/nabizime/velke-firmy</a>

V CSS jsem vytvořil styl, který zjistil navštívené odkazy (přes a:visited) a nastavil jim horní odsazení na 100 pixelů

#odkazy a:visited { top: 100px; }

4) JavaScriptu tomu vládne
V JavaScriptu jsem si načetl všechny odkazy z minulého kroku a zjistil jsem jaký je jejich offset (tedy které jsou těch 100 pixelů posunuté). Toto měli vlastně dle CSS stylu jen ty weby, na kterých daných návštěvník byl. Pak jsem podle jednoduché binární logiky vytvořil serii 0 a 1 (pořadí odpovídá pak dané stránce). Např. 010 znamená, že uživatel navštivil pouze prostředí stránku (tedy “s1” http://www.ataxo.cz/nabizime/male-firmy)
Toto číslo jsem si pomocí AJAXu uložil to TXT souboru, kde jsou již hodnoty z minulých návštěv (takže by tedy přičetla návštěva k druhému webu).

5) Sháníme crowd
No a co dál? Tento skript (např. iVan.php) jsem pomocí IFRAME vložil na potřebné stránky, gadgety a další srandy po webu :) Převážně šlo o můj blog (v kódu nehledejte, už je fuč :)

Pokud tedy uživatel navšítvil web, automaticky se v iframe načetl můj skript (iVan.php), který načetl seznam všech stránek webu Ataxo (z textaku ataxo.txt), vykreslil HTML kód. CSS styl změnil vlastnosti již u navštívených odkazů a tyto jejich hodnoty (vlastně URL) uložil do dalšího souboru, který byl sumou všech návštěv pro jednotlivé stránky. Nejblíže byl vlastně Lukáš Zaplatílek,který o variantě CSS hacku hovořil a  čímž získává prvního bludišťáka. Gratulujeme!

6) Statistika (ne)nuda je!
Protože mám rád Google Spreadsheety a myslím že se hodí na všechno (kromě otevírání konzerv), tak jsem si importoval data právě sem. Vytvořil jsem si z toho pěkné (někdy i barevné) grafy a ukazoval je církvi, králi, vlasti, múzam a světu. (K. H. B.).

7) Intepretace výsledků 
Nejnavštěvovanější stránky (ad procenta - pokud má hlavní stránká 25 000 přístupů a v závorce je 20% tak stránká má 5 000 přístupů)

• ataxo.cz/o-nas/reference/rozdeleni-podle-produktu/seo-optimalizace-pro-vyhledavace/list (58%) 
• ataxo.cz/o-nas/reference/zakaznicke-segmenty/velke-firmy-a-korporace/list (57%) 
• ataxo.cz/produkty/sprava-ppc/odmena-z-media (51%) 
• ataxo.cz/produkty/sprava-ppc/garantovana-cena (43%) 
• ataxo.cz/nabizime/male-firmy/emailing (35%) 
• ataxo.cz/o-nas/reference/rozdeleni-podle-produktu/sprava-ppc/list (31%) 
• ataxo.cz/o-nas/proc-ataxo (30%) 
• ataxo.cz/o-nas/reference/zakaznicke-segmenty/zivnostnici-a-male-firmy/list (28%) 
• ataxo.cz/nabizime/male-firmy (26%)

Nejvíce je zájem o o reference, u H1 to bylo O nás a Tým. Zajmavé, že..

Graf ve velkém, barevném provedení na  http://jsbin.com/aqiduk (pokud si z toho chcete udělat plakát)

Zajímá tě více? @codeas

Tweet

Máte doma barevné brýle? Vytvořte si snadno 3D obrázek v Chrome

Jestlli máte doma barevné (red/cyan) brýle,tak si můžete pomocí rozšíření do Chrome vytvořit 3D obrázek (tzv. anaglyph). O 3D se v poslední době hodně hovoří, takže jste mohli takové brýle např. dostat jako přílohu v časopise, dárek na konferenci nebo k nějakým filmům na DVD.

Rozšíření pro webové prohlížeč se jmenuje 3Dnator. Instalace je velmi jednoduchá - stačí navštívit stránku rozšíření a kliknout na tlačítko Přidat do Chrome (viz obrázek níže). Pokud nemáte Chrome, tak ho stáhnete odtud

Druhým (a posledním) krokem instalace je potvrzení přístupu.

Po instalaci sem vám v pravém horním rohu objeví ikonka brýlí.

Při zapnutém rozšíření se vytváří 3D obrázky z většiny obrázků, které potkáte během prohlížení webu. Zkuste si něco zadat do Google Image Search.

Pakliže chcete jen jednorázově převádět fotografie, tak můžete stálý převod vypnout a vždy jen kliknout pravým tlačítkem myši na danou fotografii a vybrat z nabídky 3Dnator! V novém okně se otevře převedený obrázek.

Pokud se vám moje rozšíření líbí, budu rád když ho podpoříte v Google soutěži Mám padla a to kliknutím na '+1' ve stránce rozšíření 3Dnator nebo na stránkách soutěže. Děkuji!

Inspirace

Poprvé jsem se o možnosti tvorby anaglyph fotek dozvěděl v červenci 2010, kdy jsem dělal střihače na filmovém festivalu v Karlových varech. Zrovna jsem prohlížel web a našel jsem implementace tvorby v PHP (http://instantsolve.net/blog/2008/06/creating-anaglyphs/) přišlo mi to zajímavé a těšil jsem se, až to někdo implementuje do JavaScriptu, abych o tom mohl napsat na blog. Bohužel/bohudík jsem dva roky na nic nenarazil, tak jsem se na konci roku 2011 rozhodl účastnit soutěže Mám padla s tímto rozšířením.

Jak to funguje?

Při impelementaci  mě inspirovalo rozšíření Mustachio (zde), které přidává knírek na všechny fotky během prohlížení webu. Autor ovšem na přidávání knírku využívají server-side stranu, takže pokud navštívíte stránku, tak jenom změní SRC u všech obrázků na něco jako http://server.com/skript.php?url=http://web.cz/obrazek.jpg. Nevýhodou takového řešení je vysoká náročnost na výpočet, pokud používá rozšíření více lidí.

Rozhodl jsem se jít cestou renderování na straně klienta, díky využít elementu canvas v HTML5. Pokud navštívíte nějakou stránku, tak rozšíření najde všechny obrázky na strance, zjistí základní paramatery (výška, šířka, název id a tříd, url atd) a přesně na stejném místě vytvoří element canvas do kterého uloží fotku. Původní obrázek skryje. S totou fotkou v canvasu je poté ještě provedena transformace dle níže přiložené vzorce, kde (r,g,b) jsou složky jednoho pixelu a provede se maticové součiny a pak součty. Složka (r,g,b)1 se vztahuje k aktuálnímu pixelu a (r,g,b)2 k pixelům posunutý o nějakou offset hodnotu (já jsem defaultně nastavil 10 pixelů).

3D obrázek vznikne samozřejmě v rámci možnosti. Pokud bych rozšíření rozšířil (zajímavé spojení) tak bych mohl přidat možnost vložit dvě fotky - pak by efekt byl reálnější. To spíš jako vize do budoucna. 

Takže instalujte, používejte a případně i plus-jedničkujte - děkuji

Zajímá tě více? @codeas

Tweet

Návod jak využít Google+ a OpenID k přihlašování

Jistě jste již na webu zahlédli možnost přihlásit se pomocí OpenID, jenže jste možná netušili, že můžete využít svůj Google účet. Dříve bylo možné využít vlastní blog na Bloggeru a do adresy identifikátoru se vložila celá URL adresa (v mém případě např. http://codeasi.blogspot.com)

S příchodem Google+ se situace náhle změnila a jako autoritu můžete Google a svůj pluskatý účet.

Pokud po vás chce přihlašovací systém vložit identifikátor (jako např. na webu Utery.cz), stačí vložit adresu vašeho profilu. V mém případě:

https://plus.google.com/115748350099126853184

TIP: Jednoduchý způsob jak se rychle dostat k vaší profilové adrese je navštívení odkazu http://plus.google.com/me

Po odkliknutí se vás systém zeptá zda chcete povolit přístup.

Poté jste přesměrování na web, kde jste již zalogováni - můžete doplnit jen doplňkové údaje (jméno, příjmení, atd) -  emailová adresa bývá předvyplněna..

Až příště přijdete na web, zadáte jen adresu profilu, v případě že jste přihlašeni s Google účtem (a zadali jste  při schvalování přístupu "Zapamatovat toto schválení), tak jste rovnou přesměrováni. Nemusíte si pamatovat další heslo a v případě potřeby, můžete z rozhraní Google toto propojení kdykoliv odstranit (revoke).

Takto internetová online identita směřuje ke sjednocování, které má svoje pro a proti. Jednou výhodou je centralizován správa s použitím opravdu silného hesla, které můžete měnit pravidelněji a v případě potřeb kdykoliv promazat propojení (např. při ztrátě mobilu). Nevýhod vymyslet za mě daleko více..

Pokud Google Plus ještě nemáte (ano, jsou tací) nebo si nechcete pamatovat adresu profilu, tak i pro vás existuje jednodušší alternativa. Zadáním snadnozapamtovatelné adresy identifikátoru (pro všechny uživatele stejná) 

https://www.google.com/accounts/o8/id

se dostanete jako v minulém návodu k povolení přístupu.

Takže až se budete chtít někde registrovat, tak zkuste využít tento způsob

Když už se bavíme o tom plusku, o zajímavostech, Google a sobě píšu na 

https://plus.google.com/115748350099126853184/posts ;-) 

Zajímá tě více? @codeas

Tweet