Webdesign

Nedávno spuštěná prezentace sterba-kola.cz byla doplněna o AJAXové načítání a filtrování produktů. Kromě nutného jQuery jsem chtěl minimalizovat množství použitých skriptů. Takže žádné jQuery UI. Nakonec jsem použil následující:

• RangeInput (jQuery Tools) - 6KB - pro vizuálně přitažlivé slidery ceny či výšky (jen doplněno o setMin a setMax metody)
• HashChange - 1.5KB - pro práci s hashem v URL a zachování Zpět / Vpřed tlačítek prohlížeče
• Autocomplete - 13KB - našeptávač produktů při hledání, včetně zobrazení cen
• plus 6KB vlastního Javascriptového kódu (zmenšeného pomocí jsMin)

Nejlepší příklad nové funkčnosti je asi interaktivní výběr kola.

Našeptávač produktů, včetně cen

Použití Autocomplete je triviální, včetně automatického submitu formuláře při výběru kola ze seznamu:

$("#search").autocomplete('/produkt.php', 
  {multiple: false,selectFirst: false}).
  result( function(e,d) { if (d) $('#search').submit(); });

Samotný produkt.php si převezme $_GET["q"] parametr a vyhledá a vrátí textový soubor s názvy produktů, oddělený znakem \n.

V eshopu zaměřeném na firemní zákazníky můžete těmto usnadnit nákup a prvotní registraci tím, že podle zadaného IČ načtete kompletní informace o sídle a DIČ z databáze ARES. MFČR ji poskytuje jako webovou službu vracející přehledný XML feed.

Implementace s pomocí jQuery je velice jednoduchá, stačí si vytvořit JSON feed reagující na AJAXový požadavek pod názvem ares.php:

<?php 

header("Content-Type: application/json; charset=UTF-8");
define('ARES','http://wwwinfo.mfcr.cz/cgi-bin/ares/darv_bas.cgi?ico=');
$ico = intval($_REQUEST['ico']);
$file = @file_get_contents(ARES.$ico);
if ($file) $xml = @simplexml_load_string($file);
$a = array();
if ($xml) {
 $ns = $xml->getDocNamespaces();
 $data = $xml->children($ns['are']);
 $el = $data->children($ns['D'])->VBAS;
 if (strval($el->ICO) == $ico) {
  $a['ico'] 	= strval($el->ICO);
  $a['dic'] 	= strval($el->DIC);
  $a['firma'] 	= strval($el->OF);
  $a['ulice']	= strval($el->AA->NU).' '.strval($el->AA->CO);
  $a['mesto']	= strval($el->AA->N);
  $a['psc']	= strval($el->AA->PSC);
  $a['stav'] 	= 'ok';
 } else
  $a['stav'] 	= 'IČ firmy nebylo nalezeno';
} else
 $a['stav'] 	= 'Databáze ARES není dostupná';
echo json_encode($a);

?> 

Pokud jste klientem F-ART AGENCY s.r.o. a jedná se o rozsáhlejší webový projekt, většinou se k němu zakládají uživatelské účty na hulan.us, kde je instalován Mantis BugTracker. Jedná se o volně dostupný software pro obecnou správu připomínek, námětů, objednávek a reportování chyb k projektu.

Mantis umí vést neomezené množství projektů, neomezené množství uživatelé, k problémům připojit jak textový obsah tak DOC/XLS/JPG a další soubory, zajistí emailové notifikace. Je k dispozici plně česky.

Není si tak nutné zasílat emaily s CC: mezi desítkou lidí, ale všichni mají neustále přehled o tom, co se řeší, jak to je splněno a jaké jsou další plány.

Konkurence pro Mantis je BugZilla, FogBugz, Bug-Track, v jistém smyslu i BaseCamp. Některé z těchto nástrojů ovšem nejsou česky (BaseCamp - což je pro někoho problém), mají nepřiměřenou cenu instalace na vlastní server (FogBugz) či nejsou funkčně odpovídající (BugZilla).

Mantis je funkční a také dostatečně jednoduchý na používání - není pro něj nutné uživatele školit, umí jej ovládat přirozeně.

Stejně ale hledám náměty na ještě snazší řešení - co používáte vy?

Popravdě řečeno, je to trošku štěstí, tedy zda se jedná o první, druhou nebo pátou pozici, protože nikdo není schopen předem určit a ovlivnit veškeré faktory, ale stejně ta první pozice jízdní kola Štěrba na dotaz jízdní kola z jednoho miliónu potěšila:

Na Google je to osmá pozice z téměř pěti miliónů.

Související: ŠTĚRBA-KOLA.cz - měsíc po spuštění třikrát vyšší návštěvnost, desetkrát vyšší obrat

Meride a světový pohár v MTB v Novém Městě na Moravě, to je obsah webu MTBWorldCup.cz. Součástí jsou články, propozice, video a fotogalerie, CZ i EN jazyková mutace.

Grafiku kreslil Elementlab.

M.C. TRITON je největší česká poradenská společnost. Nová webová prezentace se zaměřuje na jednoduchou a přímou komunikaci, propojení s Facebookem (třeba novinky se načítají automaticky z Facebook page), podporu pro lokálně umístěné (FLV), Facebook i Youtube videa, a fotogalerie.

V pozadí je připraven CZ / EN / DE / SK web, veřejně zobrazena je ale zatím pouze CZ verze, zbytek čeká na překlad klientem 🙂

Grafiku kreslil, v subdodávce, Pavel Kout / Webface.

Pokud vytváříte (opravdu) jednoduchou mobilní verzi webu, na které je adresa, mapa, telefon a odkaz na plnou verzi prezentace, budete potřebovat následující meta tag:

<meta name="viewport" 
 content="width=device-width; initial-scale=1.0; 
  maximum-scale=1.0; user-scalable=0;" />

Tento meta zajistí, že telefon zobrazí stránku zoomovanou na 100% šířky obrazovky, a nikoliv jako miniaturu.

Telefonní kontakty je dobré uvodit přes <a href="tel:číslo">číslo</a>, naprostá většina mobilních prohlížečů umí takového číslo přímo vytočit.

Více také na Zdroják.cz: Mobilizujeme web v HTML5

Pan Robert Štěrba, kromě toho, že je majitel úspěšného cyklistického obchodu, má jeden velký koníček - je mnoho let sběratelem a odborníkem na cyklistickou historii a organizoval pod značkou BI(CZ)YCLE COLLECTION řadu akcí.

Nově spuštěný projekt ŠTĚRBA-BIKE.cz staví na této práci a nabízí všem zájemcům a odborníkům tisíce fotek historických kol, odborné články, fotografický pohled na velo muzea, služby, poradenství a další informace z této oblasti.

To vše je dostupné v české i anglické variantě, takže dosah není pouze místní, ale skutečně celosvětový. Projekt je spouštěn v těchto dnech a první ohlasy odborníků z této oblasti jsou nesmírně pozitivní.

Grafiku kreslila, v subdodávce, Iva Schneiderová, ART-PGN.

Před měsícem jsem psal článek Zadání - vytvořit nejlepší cykloeshop v republice. První fáze - hotova. Cílem bylo vytvořit cykloeshop o kterém by šlo prohlásit, že bude nejlepší v republice. Myslím, že se to daří a web ŠTĚRBA-KOLA.cz předčil očekávání 🙂

Mohu poskytnout pohled na návštěvnost od ledna 2011, přičemž nový eshop běžel od poloviny února 2011, a která se zvýšila trojnásobně na 2 000 lidí denně a má výrazně rostoucí trend (a pracuje se nadále na tom, aby tento rychlý růst byl udržen).

Ještě zajímavější je ale pohled na dosahovaný obrat - ten stoupnul rovnou 10x ve srovnání se stejným obdobím loňského roku.

souhrn návštěvnosti

Na Živě.cz vyšel moc zajímavý článek srovnávající výdrž notebooků při použití různých prohlíčežů. S novým Internet Explorerem 9 může váš notebook vydržet třeba 4 hodiny místo pouhých 3, jako je tomu v případě Google Chrome.

Vzhledem k tomu, že IE9 je nejen výrazně úspornější, ale i rychlejší (nejlepší GPU akcelerace) a zabere méně RAM, vypadá jako jasná volba a osobně jej používám jako default browser na všech PC.

Více na Živě.cz, originál blogs.msdn.com.

Zkusím něco podobného zkusit změřit na mém HP 5103 a za pár dní zde budou výsledky. Nečekal jsem takové rozdíly mezi prohlížeči.