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.

WordPress a permalinks bez hierarchie

V předchozím článku jsem psal o možnosti drobečkové navigace ve WordPressu. S tím nám ale vyvstává další problém, který musíme řešit, pokud chceme zachovat pěkná a krátká URL. WordPress totiž v URL kopíruje stromovou strukturu stránek. Pokud tedy vytvoříte stránku Ovoce a její podkategorii Jablka, bude výsledná URL vypadat následovně http://www.example.com/ovoce/jablka/. Jak se tedy zbavit hierarchie v URL?

Existuje plugin s názvem Custom Permalinks. Po jeho instalaci můžeme v URL editovat nejen název za lomítkem, ale celou strukturu. Nejlépe to uvidíme na obrázku, kde je vybraná nadřazená sekce stránky a přesto můžeme vytvořit krátké URL bez odkazu na rodiče.

Příklad použití můžeme vidět například zde:

Věřím, že cest, jak tuhle funkcionalitu obejít, je spoustu, ale tahle se mi zdá nejjednodušší a zcela plní svůj účel.

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 na drobečkovou navigaci ve WordPressu

Pohání váš web WordPress a potřebujete do něj vložit drobečkovou navigaci? Klasicky v případě, kdy na Worpdressu provozujete eshop nebo jiný složitější server, se tato potřeba stává často nutností.

Nejdříve krátká definice, co to drobečková navigace je:

Drobečková navigace (anglicky breadcrumb), je typ navigace, která pomáhá návštěvníkům orientovat se ve struktuře webu. Umožňuje jednak snadno zjistit, kde ve struktuře webu se návštěvník nachází, jednak snadný přechod na stránky ve vyšší úrovni hierarchie webu. Má podobu lineárního seznamu odkazů oddělených obvykle znakem >, např.:

Úvodní stránka > Hlavní kategorie > Podkategorie > Detail produktu

Drobečková navigace by měla obsahovat odkazy na všechny stránky (úvodní stránka, sekce, podsekce), které by musel zákazník projít hlavní navigační strukturou z úvodní stránky. Poslední položka v drobečkové navigaci odpovídá právě načtené stránce a jako jediná není odkazem.

Konvenčně je umístěna pod hlavičkou webu, nad hlavním nadpisem stránky. Drobečková navigace by měla být umístěna na všech stránkách kromě titulní stránky.

Zdroj: H1.cz

Ve výchozím nastavení a vzhledu možnost zobrazení drobečkové navigace neexistuje, a proto se musíme poohlédnout po schopném pluginu. Jedním z takových je Breadcrumb NavXT. Práce s ním je jednoduchá a intuitivní.

Nastavení pluginu se provádí v administračním menu Nastavení > Breadcrumb NavXT. Zde je několik záložek, kde vyplníte znak pro oddělování odkazů, název odkazu pro domovskou stránku, zda má být poslední položka odkazem, apod.

V dalším článku vám povím, jak nastavit Permalinks (hezká a krátká URL) bez toho, aniž by kopíroval hierarchii webu (se zapnutou drobečkovou navigací).

Kino aplikace – Android

Už několikrát jsem byl v situaci, kdy jsem byl “v terénu” a hledal jsem nejbližší kino, kam bych si zašel na právě aktuální filmový megatrhák! Protože je ale práce s mapou docela neohrabaná a nezohledňuje moje další parametry (čas promítání, film, atd), tak mi nenabízí takový komfort, jaký bych čekal. Proto už jsem několikrát v Android Marketu hledal vhodnou mobilní aplikaci. Žádná ale nesplňovala moje potřeby.

Co by měla kino aplikace pro Android umět:

  • vyhledat nejbližší kina na mapě (za pomocí GPS)
  • vypsat program vybraného kina
  • hledat kina podle hraných filmů
  • vyhledat kina podle termínu hraní filmu
  • zobrazit detail kina (telefon, adresa, www)
  • zobrazit detail filmu (popis, hodnocení, trailer, adt), detail herce, rezisera (z csfd.cz)
  • aplikace by měla být schopna sdílet vybrané položky (termíny, kina, filmy, apod)
  • a další funkce..

Jaké aplikace jsem našel v zahraničí:

Co si myslíte vy? Našla by daná aplikace své uživatele? Používali byste ji? Chybí vám nějaká funkcionalita, kterou byste ocenili?

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:

Kde levně sehnat fotky

Na Internetu existuje spousta zdrojů, kde se dají sehnat kvalitní i méně kvalitní fotografie. Pokud za ně ale nechcete platit a zároveň uznáváte autorské zákony, tak se výběr zužuje.
Já jsem si zvykl používat následující free fotobanky:

Další možností je hledat fotky na Flickru, kde je umístěna spousta fotek s povolením je dále využívat (tyto autorská práva jsou u každé fotky uvedena).

A kde sháníte pro svou práci fotografie vy?

Další 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 »

6 Android aplikací, za které bych platil

Jako spokojený uživatel HTC Desire a systému Android jsem narazil na několik free aplikací, u kterých jsem si řekl “za tohle bych i platil”. Rád bych se s vámi o tyhle poklady podělil.

Pubtran – po internetovém prohlížeči moje absolutně nejpoužívanější aplikace. Pro nepražáka v podstatě povinná výbava. Díky téhle aplikaci vždycky vím, jak se dostanu z hospody domů a nemusím hledat složitě spojení na Idosu. Umí toho ale mnohem víc: zjišťuje aktuální spoždění vlaků, ukáže zastávky na mapě, odešle spojení do kalendáře, koupí SMS jízdenku atd.
mAnalytics

SportyPal – Pro běžce výborná aplikace, která zaznamenává váš běh / vyjížďku na kole / bruslení / létání / plavání / a další druhy aktivit. Převede váš výkon do čísel a do grafů, takže se pak zpětně můžete podívat, jak jste si vedli.

gStrings Free – Hrajete na kytaru a nemáte ladičku? Nebo jste ji zrovna zapomněli? Nic se neděje – tahle skvělá aplikace ji v pohodě nahradí. Můžu říct z vlastních zkušeností, že jsem ji kolikrát použil i v případě, kdy jsem s sebou ladičku měl.

Taxikář – taky po kapsách nenosíte vizitky taxikářů a nemáte je ani uložené v telefonu? Tahle aplikace vám může pomoct toho správného najít. Jednoduše je vyberete podle města a pak si je seřadíte podle hodnocení a ceny. Nápad je to výborný a v případě obsáhlejší databáze bych za to pár korun určitě dal.

PowerAmp – za tuhle aplikaci ve skutečnosti platím, ale chtěl jsem ji zde uvézt, protože je vlastně jediná, kterou jsem si koupil. Jde o nejlepší hudební přehrávač na Android. Přehrává po složkách, má ekvalizér a spoustu dalších vychytávek. Zkusil jsem už hodně přehrávačů, ale jedině tenhle má všechno! Zkuste trial verzi a sami uvidíte.

Mapy – jasně, znáte ji všichni, ale já si prostě nedokážu bez téhle aplikace představit svůj život! Proto ji tady z úcty ke Googlu dávám.

A jaké jsou ty vaše?

Sémantický web

Logo Sémantický web

Moje bakalářská práce měla plný název Užití sémantických technologií ve značkovacích jazycích a vedoucího práce mi dělal Marek Nekvasil. Tímto mu chci ještě jednou poděkovat za ochotu a vstřícnost. Pro zveřejnění práce jsem se rozhodl až po roce a je proto možné, že některé pasáže už nebudou tak aktuální, ale i přes doufám, že někomu toto zpracování přijde vhod.

Bakalářská práce

Práce je napsána v DocBooku a po vyexportování jsem použil styly do Jirky Koska, kterému tímto děkuji.