Co jsem dnes udělal pro svůj web #4

Wed, 26 Apr 2017 22:15:40 +1100

A ještě jeden článek se stihne do konce měsíce. Pod pojmem "dnes" se v tomto případě skrývá asi půl roku drobných úprav, kde pár z nich vyzdvihnu jako inspiraci pro vás. Například v administraci pravidelně upravuji různé maličkosti, ale všemi vás nudit nechci; podíváme se na ně ve dvou bodech. Na frontendu se toho sešlo víc, a tak je vhodný čas na další díl seriálu. Podíváme se například na mapu stránek a CSS hamburger menu.

1. Mapa stránek

Sitemapa je stále důležitou součástí každého webu, mnohdy ale podle toho nevypadá. Když jsem koukal, kde bych se mohl inspirovat, moc jsem toho nenašel... Bohužel, spousta webů tuhle sekci dost fláká. Dlouho jsem měl v hlavě takovou myšlenku, jak mapu stránek realizovat: ne jenom jako tupý seznam kategorií následovaný tupým seznamem článků, ale jako něco, co může skutečně být nápomocné.

A vy se nyní můžete inspirovat ode mě. Celá sitemapa je tvořena seznamem kategorií, pod každou z nich jsou hned vypsané články, které do ní patří. S datem v závorce kvůli aktuálnosti a také kvůli rozlišení, co je kategorie a co článek. Celý seznam je samozřejmě rozkopírovaný na 404 chybovku.

Dále jsem hledal informace k výpisu tagů v sitemapě. Pročetl jsem několik diskusních vláken a všechna se shodla na jednom: tagy / štítky do sitemapy nepatří.

Mapa stránek

2. Hamburger menu

Změna menu je v dnešním seznamu ovšem důležitější, protože vám nyní mohu představit chytrou knihovnu, která vyřeší pěkné animace za vás. Já si také jednu vybral, vykuchal a vložil do vlastního kódu. A musím říct, že se to poměrně snadno edituje. Barvy máte hned, změna rozměru byla sice malinko složitější, ale pořád rozumně zvládnutelná. Tuto animaci se mi úspěšně povedlo nasadit i na web stylovaný bez jediné absolutní jednotky, tudíž s knihovnou se opravdu příjemně pracuje.

CSS animated hamburger menu

3. Referer modul

A nyní k backendu. V rámci jednoduchých statistik ve vlastním systému si ukládám přístupy. Dlouhodobý problém byl v tom, že modul ukládal i requesty robotů: jak těch hodných, tak těch zlých. Existuje totiž spousta spambotů, kteří vlastně nic moc nedělají, jen ukládají referera do podobných statistik, jako byla ta moje. A samozřejmě kýbl robotů, kteří hledají bezpečnostní chyby.

Blacklist není řešení, protože nikdy nepokryje všechno. A jak jednoduše zjistit, jestli se jedná o robota nebo ne? JavaScriptem přeci. Nejsnazší řešení je proto ukládat statistiky Ajaxem, až po načtení celé stránky. Sice se to občas nestihne uložit, ale pořád lepší než si zapatlat tabulku bordelem.. A furt ji promazávat. Řešení to sice není nejlepší, ale v poměru cena / výkon je velice dobré.

4. Skrytí URL administrace

Další update, který jsem měl mít hotový už dávno, bylo skrytí URL administrace. Tedy schovat ji pořádně. Také jste si někdy všimli, že máte ve statistikách divné URL ze známých webů? Ano, někdo klikl na váš odkaz z administrace. Vy pak vidíte adresu přihlašovacího formuláře, který by sice měl být bezchybně zabezpečený... Ale chápete, že ano.

Stačí si do rootu webu nahrát skript, který provede přesměrování pod parametrem. Nic víc. Spousta systémů tohle řeší i na frontendu, ovšem v backendu by tahle funkce měla být bez dalších otázek. A já konečně tento drobný nedostatek napravil.

Žádná věda.

if (!empty($_GET['url'])) {
	$redirect_url = (string)$_GET['url'];
	$redirect_url = str_replace('&amp;','&',$redirect_url); // pro jistotu
	if (strpos($redirect_url,'http') === 0) {
		header('Location: '.$redirect_url);
echo ' ';
	}
}

5. Bannery vpravo a malý update designu

Drobnou změnu designu odnesly hlavně bannery v pravém sloupci. Měření ukázalo, že návštěvníci automaticky ignorují cokoli, co jen vzdáleně připomíná reklamu. I když jde jenom o interní odkazy. V tuto chvíli jsem si dopsal měření prokliků sharovacích tlačítek - seriózně, používá to někdo? Já sám to nepoužívám. Proč to ale každý web automaticky cpe úplně všude? Proč jdu s davem? :-)

V rámci aktualizace designu jsem akorát změnil písmo a celkově si srovnal typografii. Těžko říct, jestli je lepší nebo horší, ale je jiná. A to byl účel.

6. Google HTML suggestions

Nástroj "Vylepšení kódu HTML" v rámci Google Webmaster Tools je chytrá utilitka, která vám poradí s obsahem stránek. Řeší meta description či chybějící titulky. I já díky tomu pár nedostatků odhalil. Tak se nezapomeňte po dlouhé době zase podívat do Google Webmaster Tools.

Google HTML suggestions