Eshopy, které by chtěl každý

Sleduju konkurenci, hledám nové trendy a často taky narazím na eshopy, které by prostě chtěl každý!

MyOwnBike.de

Online eshop a hlavně konfigurátor kol. Naprosto úžasně provedená záležitost! Někdo může tvrdit, že jde jen o hračku, ale já jsem přesvědčený, že tento eshop prodává!

myownbike

Eshop MyOwnBike.de – ukázka konfigurátoru

Burberry.com/store/

Že jsem vysazený na hodinky, to asi víte. Proto mě nemohl nechat klidným eshop Burberry.com/store/ (sekce hodinek).
Na eshopu jsou použity úžasné videa, skvělé animace, 3D modely a hlavně.. produkt je vám servírován příběhem! Co mě zaujalo opravdu velmi, je interaktivní model, na kterém do detailu vidíte, jak jsou hodinky složeny (včetně animace šroubujících se šroubků!).

burberry

Eshop Burberry.com – sekce hodinek

Reiss.com

Eshop s módou. Každý model má detailní fotky a to nejen produktů samotných, ale hlavně oblečených na modelkách a to hned z několika stran. A pozor – ve všech barevných variantách! Představa o produktu je tak téměř dokonalá. K jednotlivým kusům oblečení Vám doporučí, s čím je kombinovat a hned Vám předhodí možnost nakoupit celý “look” (vše, co má model na sobě).
O skvělém filtru po straně asi ani netřeba hovořit. Podle mě opravdu vrchol mezi eshopy s oblečením.

Eshop Reiss.com - podle mého top mezi módními eshopy

Eshop Reiss.com – podle mého top mezi módními eshopy

Znáte jiné úžasné eshopy? Podělte se v komentářích.

Top 25 "Next Wave Companies" – co mě zaujalo

O článku Top 25 “Next Wave Companies”* jsem se dozvěděl díky tweetu Ondry Rašky:

Co mě zaujaly za nápady/firmy:

  1. Profitero.com – porovnejte si ceny konkurence a sledujte vývoj cen produktů. (kdysi o vlastním projektu tohoto zaměření mluvil @vavru)
  2. Shutl.com – kombinuje lokální prodejce s dopravci. Výsledkem je možnost objednání a dodání zboží z lokálního obchodu do 90min.
  3. Etoro.com – kopírujte/následujte investiční chování na burze od jiných investorů. Vše online a hezky graficky a uživatelsky provedeno.
  4. Gidsy.com – kupte si neopakovatelný zážitek. Slevové servery nás zahrnují spousty nabídkami zážitků. Tohle by ale mělo být jiné. Z části mi to připomíná také české NaucmeSe.cz
  5. Justbook.com – objednejte si na poslední chvíli hotel. Rychlost, dobrá cena a malý výběr (neprobíráte se zbytečně velkým seznamem nabídek). Samá pozitiva.
  6. Blablacar.com – spolujízdy šetří čas, peníze a životní prostředí (možná znáte český Jízdomat.cz).
  7. Housetrip.com – portál, kde si můžete pronajmout byt/pokoj od majitele. Nebo se zaregistrujte a pronajímejte svůj byt, když jste zrovna na dovolené (podobné jako airbnb.com).
  8. Raspberrypi.org – levný, drobounký a výkonný. Takhle by se dal definovat tento počítač za $25.

* Jde o magazín Informilo distribuovaný na francouzské konferenci Le Web v prosinci 2012.

Jsou některé z projektů z článku Top 25 “Next Wave Companies” realizovatelné i u nás? Máte nápad na podobný projekt?

A co bude podle vás The Next Big Thing? Napište mi to v komentářích.

next-big-thing

Upload obrázků z URL

Určitě už jste někdy řešili problém, že jste v článku použili obrázek z cizího (zcela legálního) zdroje, ale ten po čase z původního zdroje zmizel. To pak mělo za následek, že váš článek (web, aplikace, atd) byl bez původního obrázku a zpětně jej dohledat jinde je většinou problém.

Jak to řešit?

Nahrávat obrázky vždy k sobě. To však s sebou přináší spoustu práce navíc, než jen odkázat na obrázek jinam (stáhnout obrázek k sobě, nahrát jej na FTP, zalinkovat v článku). Pokud vám to, stejně jako mně, přijde zbytečně moc práce, vyzkoušejte plugin Grab & Save.

Po jeho instalaci se vám v nabídce Nahrát/vložit objeví další možnost s názvem Grab & Save. Zde zadáte URL cílového obrázku a plugin už udělá vše za vás. Stáhne soubor, nahraje k vám na server a předloží k vložení do příspěvku. Všechno je rychlé a intuitivní.

Nekonečná smyčka (načítání příspěvků)

Líbí se vám postupné načítání obsahu při doscrollování na konec stránky? Určitě to znáte ze sociálních sítí Google Plus nebo Facebook, kde se tak načítají další a další příspěvky na News Feedu (ať už po dojetí na konec stránky nebo po kliknutí na odkaz). Nově existuje plugin Infinite Scroll, který tuto funkcionalitu zprostředkuje i pro váš blog / stránku postavenou na WordPressu. Nebude tak již potřeba klikat na odkazy Starší články / Novější články, ale návštěvník si pohodlně váš web proscrolluje.

Demo ukázka

Jak výsledný blog funguje se můžete podívat na www.alet.cz. Stačí scrollovat až dolů. Plugin jednoduše načítá za pomoci AJAXu a funkce Load() další a další příspěvky z databáze.

Jak na implementaci

  1. Stáhněte si nejnovější verzi pluginu – Infinite Scroll (zip)
  2. V nastavení pluginu projděte jednotlivé kroky (hlavně zkontrolujte obalující divy a jejich jména)
  3. Vložte do hlavičky vaší šablony knihovnu JQuery
  4. Upravte si třídy, které stylují plugin. Například u #infscr-loading se hodí přidat vlastnost text-align: center, aby se načítání zobrazovalo vycentrované.

Pokud by vám plugin nefungoval, prostudujte si návod.

Vlastní zkracovadlo URL

Toužíte po tom mít na vlastní doméně své zkracovátko URL? Teď máte díky Bit.ly možnost a nebude to náročnější než pár kliknutí myší.

Potřebovat k tomu budete 3 věci:

  • vlastní doménu
  • 5 minut času
  • lahev vína (ta je tady jen proto, abychom měli 3-položkový seznam).

Abychom si to ukázali na příkladu, tak vám postup nastíním na své doméně NaVlně.cz (předpokládám, že ji mám již koupenou). Přejdu na stránky bit.ly, kde se zaregistruji, v hlavičce webu pak vlevo nahoře kliknu na svůj profil a následně na odkaz Settings. Vypíše se mi nastavení mého účtu. V sekci Custom Short Domain přejdu na odkaz Modify Custom Short Domain Settings a vložím svou doménu NaVlne.cz. Dostanu na výběr ze dvou možností, jak doménu ověřit a zároveň nasměrovat na Bit.ly. Někteří už možná tuší, že k tomu, aby naše zkracovátko fungovalo, bude třeba nasměrovat DNS záznam na IP adresu serveru Bit.ly (168.143.174.97). Přejdeme tedy do administrace našeho doménového registrátora a změníme A záznam u domény. Jakmile DNS probublají (cca hodina), tak můžeme kliknout v našem profilu na Bit.ly na odkaz Verify. Naše doména se přidá do seznamu možných URL a defaultně se bude zobrazovat na prvním místě. Pokud v budoucnosti budeme na Bit.ly zkracovat jakýkoliv odkaz (a budete přihlášeni), tak se použije právě naše zkracovátko.

Ukázka takového linku je zde http://navlne.cz/jwK3iL (odkaz vede do nastavení vlastního zkracovátka na Bit.ly)

Využití vlastního zkracovátka

Důvodů, proč mít vlastní zkracovátko URL, může být několik. Ať už ze svého rozmaru (můj případ), a nebo v situaci, kdy chceme podpořit vlastní brand. Napadá mě možnost u firem, které mají krátkou URL svého vlastního webu. Shodou okolností můj chlebodárce H1.cz :) Zde bych navrhoval například URL zkracovátka z.h1.cz nebo od.h1.cz (zvolená subdoména je samozřejmě libovolná). Takové odkazy pak používat na firemní twitteru a jinde. Samotný kód odkazu by pak vypadal takto z.h1.cz/KODURL.

Malé ale..

Co mi ale trošku vadí, je nemožnost změnit si obsah samotné stránky nacházející se na doméně bez kódu za lomítkem (navlne.cz nebo z.h1.cz). Po zadání této URL se stránka přesměruje na Bit.ly, což je logické, ale pokud by zde byla možnost upravit (obrandovat) i tuto stránku, bylo by to ještě lepší :) Momentálně se dokonce namísto vlastního obsahu zobrazí chybové hlášení od Bit.ly o nenalezení linku (varianta s www funguje normálně).

Další články o zkracovátkách:

Jak přidat Google Plus One na svůj web

Možností je vždycky několik. Pokud poháníte svůj web na WordPressu, tak můžete použít plugin Plus One Button. Osobně jsem s ním ale moc nepochodil, protože nesplňoval moje požadavky.

Proto doporučuji si Google Plus One na svůj web přidat manuálně. Nezabere to víc než 5 minut a výsledek je přesně podle vašich představ. Použijeme k tomu Google Plus One generátor přímo od Googlu.

Ten nám vygeneruje následující zdrojový kód:

<!-- Place this tag in your head or just before your close body tag -->
<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
 {lang: 'cs'}
</script>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="tall"></g:plusone>

Jak už komentáře napovídají. Stačí vložit první část kódu do hlavičky před uzavírající tag Head a nebo do patičky stránky před uzavírací tag Body. Otevřeme si proto editor šablony v našem WordPressu a dáme upravit soubor Header.php, Footer.php nebo Index.php (záleží na vaší šabloně, kde se hlavička či patička webu nachází). Zde pak vložíme následující zdrojový kód:

<script type="text/javascript" src="http://apis.google.com/js/plusone.js">
 {lang: 'cs'}
 </script>

Dalším krokem bude vložení samotného tlačítka do příspěvků. Otevřeme si proto soubory Index.php, Single.php a Page.php (opět v závislosti na tom, kde všude chceme Plus One přidat) a vložíme zde následující kód:

<g:plusone size="tall"></g:plusone>

Abychom zajistili správné fungování tlačítka na úvodní stránce i na stránkách kategorií či archivu, doplníme kód o atribut href a využijeme funkci The_Permalink, která nám vrátí URL právě zobrazovaného článku.

<g:plusone href="<?php the_permalink(); ?>" size="tall"></g:plusone>

Zajistíme tak plusjedničkování právě těch příspěvků, které chceme. Pokud tuto úpravu neuděláme, tak se nám označí vždy celá stránka a po reloadu budou zdánlivě označeny všechny příspěvky na stránce.

Nasazení Google Plus One je opravdu jednoduché. Jaké to bude mít benefity, to uvidíme teprve časem..

Zdroje:

WordPress a firemní web

Krátké povídání o redakčních systémech a úvod do CMS WordPress.

Redakční systémy obecně

Pryč už je doba, kdy se editovaly webové stránky přímo ve zdrojovém kódu a kdo tedy neznal alespoň základy HTML, CSS a nedej bože i skriptovacího jazyka PHP, tak si ani neškrtnul. Dnes už existují efektivní nástroje, díky kterým je editace webového obsahu srovnatelná s prací ve Wordu nebo poznámkovém bloku. Tyto nástroje se nazývají redakční systémy, publikační systémy nebo zkratkou CMS (Content management system). Mnoho z nás se s nimi každodenně setkáváme a přitom nemusíme tušit, že se jedná o právě o redakční systémy. Často jsou integrovány do firemního informačního systému nebo je používáme při psaní svého osobního blogu apod. Mezi CMS rozlišujeme několik podkategorií. Patří sem Web CMS, Enterprise CMS, Document CMS. Podrobně se budeme zabývat pouze webovým CMS a konkrétně WordPressem.

Přečíst celý článek »

3 nejlepší JS slidery – aktualizováno

Hledáte ten nejlepší slider, prohlížeč obrázků, slideshow, photo viewer, image slider, apod? Zkrátka něco, co by ve vámi zvoleném boxu posouvalo obsah podle vašich požadavků doleva nebo doprava? Ještě nesmím zapomenout, že to musí být postavené na JQuery. Pokud ANO, tak vám můžu doporučit 3, které opravdu stojí za to!

Slick and Accessible Slideshow

Slick slideshow

Demo | Download | Oficiální stránka

Nivo Slider

Nivo slider

Demo | Download | Oficiální stránka

Easy Slider 1.7

Easy slider

Demo | Download | Oficiální stránka

Pokud vám nevyhovuje ani jeden z mých doporučených, tak zkuste další.

První jmenovaný slider Slick and Accessible Slideshow jsem použil pro tvorbu webové prezentace Penzion UNO (brzy bude online nová podoba stránek).

Aktualizováno

Časem jsem přišel na mnohem lepší alternativu k těmto výše uvedeným. Je jím JQuery Cycle Plugin, který má na svědomí malsup. Jeho možnosti jsou nepřeberné. Ukázku použití si budete moct už za chvíli prohlédnout u jednoho z našich klientů na www.lvc.cz.

Vlastní vyhledávání v prohlížeči

lupaNevím jak vás, ale mě vždycky strašně zdržuje, když si chci třeba zjistit hodnocení filmu na serveru csfd.cz. Musím nejdřív otevřít stránku samotnou a tam pak vyhledat film. Proto jsem pátral, jaké jsou možnosti vyhledávání přímo v prohlížeči.

Firefox

V nové verzi Firefoxu stačí pouze najet na vyhledávací pole, které chcete přidat (u csfd.cz vpravo nahoře pod profilem). Poté pravým klikem vyvoláte nabídku a vyberete možnost Vytvořit Vlastní hledání. Pak už můžete vybrat nové hledání v boxu vedle adresního řádku a začít hledat přímo pomocí Firefoxu.
Vyhledávání pomocí CSFD

Představu, jak postupovat, si můžete udělat na následujícím obrázku.
Přidání vyhledávání

Pokud by tuto funkci váš Firefox nepodporoval, stačí si pouze nainstalovat tento addon – Add to Search Bar 1.7.

Opera

Jelikož Operu defaultně nepoužívám, tak jsem tento problém ani nikdy neřešil. Funguje to v ní však velmi podobně. S tím rozdílem, že místo do prostoru pro vyhledávání, píšete svůj dotaz přímo do adresního řádku. Pokud chcete vyhledat film na stránce csfd.cz, tak stačí do adresního řádku vepsat “csfd hoří, má panenko”.
Opět stačí kliknout do vyhledávacího pole na serveru csfd.cz pravým tlačítkem a poté zvolit možnost přidat vyhledávač. Důležité je si pojmenovat vyhledávač zkratkou, kterou pak budete používat v adresním řádku (např.: csfd).

Podrobnější návod najdete na Bart blogu.

AMapy na vlastních stránkách

ApiKdyž jsem vytvářel stránky pro Stáj Bělokozly (ustájení koní), byla jedním z požadavků interaktivní mapa. Prvním z adeptů byly samozřejmě Google maps, ale pak jsem se dozvěděl o API od Seznamu a Atlasu. Řekl jsem si, že čeští uživatelé internetu jsou již s těmito mapami zvyklí pracovat a tak nejlepší bude zvolit právě jednu z nich. K AMapám mě nakonec rozhoupal právě článek od Radka Hulána. Samotné vytvoření mapy podle Vašich přání už není tak složité a hodně Vám k tomu pomůže taky návod přímo na stránkách od API AMapy.

Jen bych chtěl dodat dvě upozornění. AMapy potřebují pro správné fungování standardní vykreslovací režim u IE. To znamená, že kdo shazuje tento prohlížeč stránkami do QUIRK módu moc neuspěje. A druhý problém, na který jsem narazil, byla kolize s Lightboxem2. U mapy Vám potom nebude fungovat zoomování a mapa se bude zasekávat a nebude funkční. Proto jsem tedy Lightbox2 musel na stránce s mapou vypínout. Nechtěl jsem se v Lightboxu nějak hrabat, tak jsem použil pro mě méně pracnou cestu.