tipy & triky

Několik WordPress SEO tipů pro úplné začátečníky

autor:

SEO, nebo-li Search Engine Optimization (česky optimalizace pro vyhledávače), je věda. Často nadhodnocená a nafouknutá jako dot com bublina v roce 1999, ale pořád věda. Se SEO technikami se dá dělat spousta věcí, včetně diskutabilních a ne úplně férových kousků. Ty mohou také pomoci, ale Google a ostatní vyhledávače se pořád vyvíjí a nekalé SEO praktiky naštěstí penalizují.

My nebudeme řešit WordPress SEO nijak ze široka. Podíváme se pouze na několik nejzákladnějších tipů. Na něco, co zvládne každý. Na jednoduché, ale přesto účinné praktiky, které pomůžou protlačit váš obsah k více lidem. Jen takový základ pro začínající web, který by neměl žádný uživatel WordPressu ignorovat. Nemusíte se bát, tyhle SEO základy jsou jednoduché a zvládnete je levou zadní. A i když si povídáme konkrétně o WordPressu, dají se následující SEO techniky aplikovat i na jiné redakční systémy.

1. Trvalé odkazy – permalinky

Nejdřív si posvítíme na formát názvů jednotlivých příspěvků v URL. Je důležité, aby měly adresy příspěvků rozumný formát. Ten nejjednodušší. Takový, který přečtou lidé jasně a srozumitelně.

Takže zapomeňte na adresu vasedomena.cz/2012/09/16/aizc5df7894c=4786/. Nic takového. Místo nepřehledné změti znaků použijeme samotný název příspěvku. Je jedno, jaký formát data použijete, nebo jestli před název příspěvku dáte rubriku. Ideální je samotný název příspěvku tak, aby výsledek vypadal: vasedomena.cz/muj-prvni-prispevek.

Změnu permalinků můžete provést v Nastavení – Trvalé odkazy.

2. Obrázky

Znáte to sami. Stále častěji hledáte na internetu obrázky. Nezajímá vás text. Chcete vidět fotku známé osoby. Historické památky. Zombie pochodu. Dřív, než foťák sám pozná co fotíme a fotku automaticky a inteligentně pojmenuje, nám začnou růst šediny. Proto nastává klasická ruční práce.

Ale pozor, není třeba jen přejmenovat samotný soubor. Důležitá je v administraci WordPressu kromě položky Název, také položka Alternativní text. Tam napište stručný popis obrázku.

Neuškodí ani vyplnění položek Titulek a Popis. Ty se už zobrazí i v samotném příspěvku, takže je na vás, jestli tam něco takového chcete. Název a Alternativní text by ale měly být samozřejmostí, stejně jako přejmenování názvu souboru.

3. Nainstalujte si SEO plugin

Nedávno jsme vám doporučovali několik pluginů pro WordPress, o kterých byste měli vědět. Mezi nimi byly i dva SEO pluginy. Jeden z nich si vyberte a jdeme na to. My si to ukážeme na příkladu WordPress SEO by Yoast. Ať už si ale nainstalujete kterýkoliv SEO plugin, všude to bude velmi podobné.

S takovým SEO pluginem se dá dělat spousta věcí, od naprostých základů až po pokročilé techniky. K pokročilým věcem se třeba někdy dostaneme, ale dnes si probereme jen pár nejjednodušších věcí. Ty se budou týkat hlavně psaní samotných příspěvků.

Určitě jste si všimli, že vám plugin WordPress SEO by Yoast přidal do administrace několik nových položek, hlavně na stránce pro psaní/editaci příspěvků. Ve spodní části přibyla celá nová sekce se třemi záložkami. Nás zajímá hlavně ta první, General. Na ní je několik položek: Snippet Preview, Focus Keyword, SEO Title a Meta Description.

Ve Snippet Preview vidíte, jak bude váš příspěvek vypadat ve vyhledávání Googlu. Naším cílem je vyladění Snippet Preview k dokonalosti. Nejen pro vyhledávače. Čím lépe bude váš příspěvek vypadat ve výsledcích vyhledávání, tím spíš lidi zaujme. A vy nechcete lidi nudit, nebo otrávit. Vy chcete, aby na vás klikli.

Začneme samotným názvem příspěvku. Takže zase nahoru. Ten by měl být stručný, jasný, lehce pochopitelný a lákavý. Psaní poutavých titulků je téma samo pro sebe, ale ze SEO pohledu je důležité tam mít tzv. focus keyword. Tedy to hlavní slovo, o čem celý příspěvek je. Píšete o nějakém produktu? Napište do titulku jeho název. To nepomůže jenom vyhledávačům, ale i lidem. Vaši čtenáři tak budou hned vědět, o čem bude řeč a co mohou od vašeho příspěvku čekat.

Položku SEO Title by pak mělo jít pouze vygenerovat na základě již napsaného titulku nahoře.

Poslední věcí je Meta Description dole. Meta popisek je to, co se bude zobrazovat jako černý text ve vyhledávání. Jde o kratičký text, jen na dva řádky, dlouhý nějakých 140 znaků. Takový tweet, kterým byste měli co nejlépe a nejpoutavěji popsat daný příspěvek. Pokud Meta popisek nevypíšete, použije se automaticky začátek příspěvku. Což ve většině případů není dobré – na začátku bývají pouze úvody, žádné zásadní informace a v textu se tak hledající nedozví, o čem celý příspěvek je. První věta mu málokdy řekne něco smysluplného, když bude takhle vytržena z kontextu.

4. Linkujte!

Samozřejmě všeho s mírou. Nepřeplácejte každou větu několika odkazy. Nikdo vám na ně klikat nebude. Odkazujte pouze tam, kde to dává smysl a kde to může být čtenářům k něčemu dobré. Nebojte se odkazů. Odkazování v novém příspěvku na zdroj, obrázek nebo video je fajn, my se ale bavíme o odkazování na vlastní starší tvorbu. Psali jste už o podobném tématu dřív? Nezapomeňte v novém příspěvku odkázat ten starý. Ať už v textu, nebo dole pod textem.

Máte eshop a píšete k tomu nějaký blog, ve kterém zmiňujete názvy produktů? Odkazujte na ně. Lidé vás mohou ve vyhledávačích najít právě přes texty na blogu, nikoliv přes produkty na eshopu.

Také neuškodí, když budete odkazovat na cizí stránky. Ne na vašeho konkurenta, ale prostě linkujte i “ven”, ne jen na sebe. Nečekejte, že vás hned začnou všichni linkovat zpátky. Nezačnou. Čtenáři ale ocení, když se na vašich stránkách dočtou něco zajímavého a ještě je třeba odkážete na další materiály k tématu.

A tak dále…

Tím dnešní povídání o základech WordPress SEO ukončíme. Několik tipů by vám pro začátek mohlo stačit a někdy příště se můžeme podívat na další tipy a pokročilejší SEO techniky. Hlavně nezapomínejte, že SEO nezachrání špatný, nebo tuctový obsah. Skvělému obsahu může SEO pomoci, ale vždy to bude hlavně o obsahu.

6 šikovných modulů do Drupalu

autor:

WordPress jim říká pluginy, Drupal moduly. Funkci mají stejnou. Rozšiřují základní funkcionalitu redakčního systému a přidávají vám nové možnosti. Na zbrusu nový Blueboard hosting si tak můžete jedním kliknutím nahrát (nejen) Drupal a následně ho vylepšit těmito moduly. Drupal má, podobně jako ostatní redakční systémy, k dispozici nepřeberné množství modulů, jejichž funkce zasahují snad do všech myslitelných kategorií. Od SEO, přes redakční systém, až po obrázky.

My si opět, podobně jako v obou případech WordPressu, nebudeme jmenovat všechny, ale probereme si několik základních modulů, které vám zpříjemní práci a potěší i návštěvníky webu.

WYSIWYG

WYSIWYG, aneb známá zkratka What You See Is What You Get (doslova: co vidíte, to dostanete) je modul, který umožňuje jednoduché použití ostatních klientských editorů pro tvorbu obsahu. Mohou to být různé HTML editory, pseudo editor (např. nová tlačítka s přidanou funkcionalitou), nebo dokonce editor postavený na flashi.

Modul WYSIWYG také poskytuje abstrakční vrstvu pro ostatní Drupal moduly, které mohou být integrovány s jiným editorem. Což znamená, že další moduly Drupalu mohou dostat k editaci obsahu bez ohledu na to, jaký editor vlastně používáte.

Výsledek je jednoduchý – nemusíte používat základní editor obsahu který vám nabízí Drupal, ale můžete ho nahradit nebo překrýt jiným, kterým vám bude vyhovovat víc. Ať už vzhledem, nebo funkcionalitou.

Lightbox2

Pro změnu jeden čistě vizuální modul. Lightbox2, který čtenářům obrázky odprezentuje v hezkém ”lightbox” módu. Po kliknutí na obrázek se neotevře na nové stránce nebo nikde jinde, ale pěkně se zvětší přes stávající stránku, překryje obsah a efektně vynikne na tmavém pozadí.

Efekt lightboxu nevyhovuje každému, ale pomalu a jistě se z toho stává velmi rozšířený prvek, skoro až standard. Něco na způsob lightboxu má navíc i Facebook a do jisté míry i Google+, takže se nemusíte bát, že byste čtenáře polekali nějakou novotou, kterou nezná. Tak jako tak je ale vždycky lepší, když čtenář zůstane na stránce kterou čte a nemusí otevírat obrázek někde mimo a pak se vracet. Všechno hezky na jednom místě.

Drupal modul Lightbox2 není jen takové pěkné zvětšovátko obrázků na efekt. Samozřejmě umí i přibližování a oddalování a má dokonce i automatickou detekci obrázků. Vybrat si můžete dokonce z různých stylů rozvržení náhledu obrázku.

A pokud byste chtěli, aby se na některých specifických stránkách vašeho webu lightbox nezobrazoval, nemusíte si dělat vrásky, tohle v nastavení najdete také.

XML Sitemapa

Sitemapa je klasika, která nesmí nikde chybět. Ani v Drupalu. Samozřejmě že si vás Google časem najde, ale proč se mu trošku nepodstrčit? Na stříbrném podnose?

Od toho je tu Drupal modul XML sitemap, který se už postará o vytvoření tzv. “sitemapy,” kterou automaticky podstrčí všem důležitým i nedůležitým vyhledávačům (Google, Bing, Yahoo!, Ask…).

Modul XML sitemap navíc obsahuje několik sub-modulů, které řeší odkazy na obsah, jednotlivé položky v menu, termíny taxonomie a uživatelské profily.

Google Analytics

Tady nás nečeká nic překvapivého. Google Analytics dobře známe a pokud vás alespoň trochu zajímá kdo na váš web chodí, odkud tam chodí, co používá a tak dále, jsou Google Analytics pro Drupal to, co hledáte.

Modul Google Analytics pro Drupal je šikovný hlavně v tom, že se nejedná jen o “spárování” vašeho webu s vaším účtem na Google Analytics. To byste totiž museli dělat všechno jen u Googlu. Tam sice budete na statistiky chodit nakukovat pořád, ale pomocí modulu si budete moct pohrát s nastavením měření.

Konkrétně si v administračním rozhraní Drupalu budete moct nastavit šíři a možnosti sledování uživatelů. Budete chtít sledovat jen jednu doménu? Nebo doménu s několika subdoménami? Stejně tak si budete moct pohrát s nastavením sledování jednotlivých stránek, uživatelů, nebo dokonce odkazů a souborů, které si vaši uživatelé stahují.

K tomu všemu si budete moct přímo z Drupalu nastavit různé proměnné a nechybí ani pokročilá nastavení pro zkušenější uživatele.

Administration menu

Drupal je, podobně jako WordPress, zkušený veterán, ale pořád není pro běžné uživatele zrovna přívětivý. Nebo nejlépe navržený. Ať tomu budeme říkat jakkoliv, faktem je, že se dá používání Drupalu oproti základnímu stavu dost vylepšit. A od toho tu je moc šikovný modul Administration menu.

Nejedná se ale nic pro uživatele, pouze pro administrátory webu. Podobně jako to zavedl Google a pak všichni po něm, přidá modul Administration menu úplně nahoru tenkou černou lištu, přes kterou se můžete jednoduše dostat dál. Administration menu je navíc úplně nezávislé na použité šabloně, takže se nemusíte bát, že by to tam nějak nesedlo. Sedne.

Na Administration menu je šikovné to, že se přes něj můžete dostat přímo do všech administrátorských menu. Budete je mít všechny hezky po ruce, vždy a všude. Funkcionalitu malé černé lištičky lze také rozšířit přes další moduly.

Views

Na závěr už jen ve zkratce oblíbenou klasiku – Views. Modul Views slouží k tomu, abyste mohli obsah zobrazit jinak, než vám to umožní standardní isntalace Drupalu. S pomocí Views bude zobrazovaní obsahu mnohem flexibilnější a pro vás, coby administrátora webu, i jednodušší.

Praktický úvod do Views najdete v češtině třeba na drupal.cz.

Views pro Drupal 6 funguje bez problémů, pro Drupal 7 potřebuje ještě Chaos Tool Suite, známé taky jako CTools.

Další dobré tipy na užitečné moduly do Drupalu najdete na blogu ifanda.cz.

Další skvělé pluginy pro WordPress

autor:

V nedávném příspěvku jsme si probrali důležité pluginy pro WordPress. Takové, o kterých by měl vědět každý uživatel WordPressu. Dnes se podíváme na další várku. Ne už tak zásadní a důležitou, ale požád šikovnou a zajímavou. Bez níže uvedených pluginů se už obejdete docela v pohodě, ale mohou vám pomoci, zpříjemnit práci vám a používání webu vašim čtenářům/klientům.

wordpress logo

 

All In One Favicon

Začneme zlehka, takovou malou drobností. Favikonou. Je to taková ta malá mrška, která se zobrazuje nalevo od názvu stránky v prohlížeči. Ikona webu. Většinou je to nějaké zmenšené či upravené logo, část loga, nebo něco jiného. Něco, co váš web reprezentuje.

Favikonu nepodceňujte. Zvolte něco výrazného. Něco, co na ploše několika milimetrů vynikne. Co na liště záložek, mezi desítkami dalších ikon, nezanikne.

Právě plugin All In One Favicon pro WordPress vám umožní favikonu jednoduše nastavit rovnou z administrace. Plugin podporuje tři typy favicon: .ico, .png, .gif a poslední jmenovaný může být dokonce animovaný. Nechybí ani podpora pro Apple Touch ikony.

WPtouch

Jak už název napovídá, půjde o dotyk. Konkrétně o dotykové displeje na mobilních zařízeních. Z těch dnes prohlíží weby stále více a více lidí. Každý druhý má dnes chytrý telefon a nekouká na něm jen na zprávy, kalendář a kalkulačku. Lidé na iOS a Androidu prohlíží spousty webů. Pokud návštěvníkům webu nenabídnete i mobilní verzi, nebudou se s načítáním velké macaté stránky na mobilu obtěžovat.

Aby to nebylo nijak složité, máme tu WPtouch. Jednoduchý plugin pro WordPress, který z vašeho webu udělá lusknutím prstu mobilní verzi. Ta bude vypadat, jako by se na mobilu narodila. Šitá na míru. Rychlá. Sexy. A hlavně je to bez práce.

WPtouch se už o všechno postará sám a web na mobilní verzi zkonvertuje automaticky. Vy si pak můžete ještě chvíli hrát a štelovat třeba barvy.

A nemusíte se bát, že by WPtouch sloužil jen uživatelům iPhone, iPodu a Andoridu. Fungovat to bude i na dalších mobilních (chytrých) operačních systémech.

FD Feedburner Plugin

Když RSS, tak FeedBurner od Google. Za ta léta se stal FeedBurner standardem, který není radno ignorovat. Návštěvníkům nabízí spousty možností jak odebírat RSS a právě proto byste měli sáhnout po FeedBurner – když už se totiž někdo rozhodne, že vás chce odebírat, tak byste mu to neměli komplikovat. Naopak.

Komplikovat vám to nebude ani samotný plugin. FeedBurner pro WordPress nabízí automatické přesunutí hlavního RSS kanálu z WordPressu na FeedBurner. Volitelně můžete přesunout i RSS pro komentáře.

Nejlepší na tom je, že se změna uživatelů vůbec nedotkne. Všechno bude pořád fungovat tak, jak má. Nebudete muset uživatele nutit k přechodu na nový kanál, nebudete se muset přehrabovat v kódu… Všechno hezky hladce a plynule.

W3 Total Cache

Rychlost je dnes naprosto klíčová. Připojení k internetu se sice pořád zrychluje, ale přímou měrou se zároveň zmenšuje trpělivost návštěvníků webu. Spousta z nich také chodí na internet přes mobilní zařízení a mobilní internet je u nás víme jaký. Mít stránky, které jsou svižné, načítají se rychle a návštěvník na nic nečeká, je tak naprosto zásadní.

WordPress není žádný hlemýžď, ale když na něm máte postavenou velkou stránku se spoustou obrázků, videí a grafikou, tak to není nic ideálního. Web bude pomalý a těžkopádný. A nemusí to být zrovna obří stránka, stačí i obyčejný blog.

Ke zrychlení webu vám může dopomoci W3 Total Cache. Šikovný plugin, který, jak už název napovídá, cachuje. A nejen to. Díky cachování celého webu se vám budou stránky načítat bleskovou rychlostí – návštěvník nebude muset tolik čekat a bude na vašem webu déle.

Google XML Sitemaps

Pokud se nechcete WordPress SEO věnovat nějak naplno (což byste měli zvážit), tak můžete váš web alespoň trochu popostrčit Googlu. Právě díky Google XML Sitemaps pro WordPress můžete jednoduše zařídit, aby vyhledávače indexovaly váš web lépe a se vším všudy.

Plugin podporuje různé druhy WordPress stránek a nejsou mi cizí ani vlastní URL adresy. Skvělé je, že po prvotním vytvoření Sitemapy se už nemusíte o nic starat, plugin si všechno vyřeší sám a bude se automaticky aktualizovat.

Když už ne nějaký velký SEO plugin, tak alespoň o Sitemapě byste mohli pouvažovat. Rozhodně vám neuškodí.

Editorial Calendar

Na závěr něco pro ty, kteří na svůj web/blog píší nové články často a mají v tom guláš. Nebo když texty tvoří několik autorů najednou. To v tom není guláš, to je rovnou bordel. Co kdy vydat? Bude středa za dva týdny volná, nebo je už zabraná? No znáte to sami. A WordPress vám s něčím takovým sám od sebe moc nepomůže.

Od toho je tu pak plugin Editorial Calendar, který vám do administrace přidá moc šikovnou novou stránku s velkým kalendářem. Na něm pak vidíte všechny naplánované texty a skvělé je, že je můžete mezi jednotlivými dny pohodlně přesouvat pouze přetažením myši, stejně jako přetahujete soubory a složky. Samotným přetažením se pak automaticky změní datum naplánovaného příspěvku.

Co víc by si mohl šéfredaktor přát?

4 zásadní pluginy pro WordPress

autor:

Objednali jste si náš hosting, koupili doménu a nainstalovali WordPress. Děkujeme. WordPress je skvělý už sám o sobě a umí spoustu věcí. Další spoustu ho můžete naučit pomocí pluginů. Těch je pro jeden z nejpopulárnějších redakčních systémů nepřeberné množství. Zahráli jsme si na popelku a oddělili jsme pro Vás zrno od plev. Z bezedných archívů jsme pro vás vyhrabali 4 zásadní WordPress pluginy, o kterých by měl vědět každý uživatel WordPressu.

wordpress logo

Akismet

 

Boj proti spamům je věčným bojem proti větrným mlýnům, ale právě Akismet může být váším Donem Quijotem. Akismet je specialista na komentářový spam a dalo by se říct, že je jakýmsi nepsaným standardem pro WordPress spam obecně.

Na oficiálním webu Akismetu mají tvůrci pěkné počítadlo zachycených spamů, které naskakují rychleji, než státní dluh České Republiky.

V základní instalaci WordPressu je Akismet dokonce předem připraven, stačí ho jen nainstalovat a aktivovat. Pro osobní blogy je Akismet zdarma, pro firmení použití je za pět, nebo padesát dolarů měsíčně. Máte-li (firemní) web, na kterém něco prodáváte nebo propagujete a máte z toho peníze, měli byste si Akismet předplatit.

WordPress SEO

Ať si kdo chce říká co chce, SEO (Search Engine Optimization – optimalizace pro vyhledávače) důležitá je. Samozřejmě i v případě SEO pro WordPress platí, že nic se nesmí přehánět, ale jeden šikovný SEO plugin neuškodí. Naopak.

SEO plugin pro WordPress není jeden. Nejsou dva. Je jich tolik, až z toho jde hlava kolem. My jsme pro vás nevybrali jeden, ale rovnou dva, které stojí za řeč. Dva nejpoužívanější, nejoblíbenější a snad i nejlepší. Je to All In One SEO Pack a WordPress SEO by Yoast. Ve výsledku je jedno, který z nich si zvolíte. Oba to jsou mocné SEO nástroje šité na míru WordPressu.

WordPress SEO by Yoast si klade za cíl udělat z vás lepšího pisálka. Doporučuje vám použít správné klíčové slovo v názvu příspěvku, v prvním a dalších ostavcích, stejně jako nezapomíná třeba ani na klíčové slovo v alt tagu pro obrázky. Nechybí samozřejmě ani XML Sitemapa, Meta popisky příspěvků, link elements, sociální prvky a spousta dalších možností.

All In One SEO Pack pak nabízí velmi podobnou funkcionalitu a také mu nic pro dobré WordPress SEO nechybí. Ať už si vyberete jeden nebo druhý, vedle nešlápnete ani s jedním.

Google Analytics

Měřit návštěvnost můžete čím chcete. Pokud se ale něco blíží nepsanému standardu, je to právě Google Analytics.

Plugin Google Analytics pro WordPress není nic jiného, než jednoduchý plugin, který oblíbené měřidlo na vašich stránkách pouze aktivuje. Na samotné statisitky se už budete koukat přes klasické Google Analytics.

WP Google Fonts

Staré známé pořekadlo říká, že “content is king” – obsah je král. To je samozřejmě stoprocentní pravda, ale ono už to dávno není jen o obsahu.

Na webu jsou miliony nových lidí, kteří mají miliony možností jak trávit čas. Pokud je nezaujmete během tří vteřin, jdou o dům dál. Extrémně důležitý je tak samotný design webu, ale pomůže i vhodný typ písma.

Člověk by si řekl, že je to taková malá blbost, ale právě o těch detailech to je. Spousta webů používá stejné, nebo velmi podobné písmo. Když bude mít váš web písmo jiné, bude to pro návštěvníka něco nového. Chraň vás ruka páně abyste si tam dali Comic Sans, ale trochu oživení od klasického bezpatkového stereotypu neuškodí.

A právě WP Google Fonts je moc šikovný plugin, který nabízí něco kolem 400 fontů a databáze stále roste. Nevěřili byste, kolik v kombinaci s dobrým designem a vhodným pozadím “to blbé” písmo udělá. Hodně. Mávat rukou nad detaily je jednodušší, než je ladit k dokonalosti. Jenže právě o těch detailech to také je.

AJAX – návod pro začátečníky

autor:

Předem chci říci, že tento článek je určen hlavně začátečníkům, kteří by rádi využili metody AJAX, ale nejsou s to pochopit odborné (a výborné) články nebo nezvládají tak dobře angličtinu, aby hledali mimo českou internetovou zátoku.

Sám nejsem odborník na toto téma, ale pochopil jsem zevrubně, jak to asi funguje a využiji také růzé kvalitní zdroje.

Co je to AJAX

O AJAXu již bylo napsáno mnoho, pokud nevíte o co jde, doporučuji třeba článek AJAX – Kde jsou hranice? od Martina Snížka nebo článek na Rootu od Jakuba Vrány.

Pokud nejste laikové v JavaScriptu a PHP a v tomto oboru vám to pálí, jděte radši tam.

Pro ty, co tu ještě zůstali: AJAX je k tomu, abyste mohli pomocí JavaScriptu načíst třeba stránku PHP (v pozadí stránky, na které se nacházíte) a poslat jí nějaká data. Jiná data od ní můžete i přijmout a hned je použít. Stránka, na které v tu chvíli jste se vůbec neobnovuje.

Návod

Mám raději jeden jasný příklad než látra teorie. Takže jdeme na to.

Chceme třeba mít seznam nějakých článků ve formulářovém poli typu <select> a pokud nějaký vybereme, chceme obsah toho článku zobrazit hned vedle, bez obnovení stránky. Přitom obsahy těch článků jsou úplně v jiných souborech.

<select name="vyber" id="vyber" onchange="vyberClanek();">
   <option value="0">Vyberte článek</option>
   <option value="clanek1.htm">Článek jedna</option>
   <option value="clanek2.htm">Článek dvě</option>
</select>

<div id="mistoZobrazeni">
</div>

Dalším krokem bude vytvoření javascriptové funkce vyberClanek();:

function vyberClanek() {
    var url = document.getElementById("vyber").value;

    if (url != 0) {
        var httpRequest;
        if (window.ActiveXObject) {
            httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } else {
            httpRequest = new XMLHttpRequest();
        }
        httpRequest.open("GET", url, true);
        httpRequest.onreadystatechange = function() {
            processRequest();
        };
        httpRequest.send(null);
    } else {
        document.getElementById("mistoZobrazeni").innerHTML = "";
    }
}

Ve funkci se vytvoří objekt XMLHttpRequest do proměnné httpRequest. Potom pomocí httpRequest.open("GET", url, true); načteme stránku obsaženou v proměnné url. Následně je zavolána funkce processRequest();, ve které zpracujeme data, která byla vypasána načtenou stránkou.

function processRequest() {
    if (httpRequest.readyState == 4) {
        if (httpRequest.status == 200) {
            var mistoZobrazeni = document.getElementById("mistoZobrazeni");
            mistoZobrazeni.innerHTML = httpRequest.responseText;
        } else {
            alert("Chyba pri nacitani stanky " + httpRequest.status + ":" + httpRequest.statusText);
        }
    }
}

Jiná použití

Využití metody AJAX je velmi mnoho. Já ji například používám zde na blogu. Pod každým článkem můžete vidět odkaz, zda vás zaujal tento článek. Kliknutím na něj se žádná stránka neobnoví, pouze se pomocí javascriptu zavolá funkce, která načte v pozadí nějakou stránku s parametry. Načtená stránka potom aktualizuje data v databázi.

Komentáře

tark

Jo tak třeba zrovna tohle se mi vůbec nelíbí – myslím tedy tvůj odkaz „je to ok“ … Proč? Nemám odezvu, jestli se něco stalo nebo ne…

Medhi

tark (#1): Teď vůbec nevím co myslíš?

tark

Ajaj, asi jsem to napsal blbě … prostě po kliknutí na odkaz Tento článek mě zaujal nedostanu žádný potvrzení, takže si myslím, že se nic nestalo.

už je to srozumitelný? 😉

Medhi

tark (#3): Jakto? Napíše to „Děkuji za váš názor“. Nebo tobě to nepíše?

Alex

U mně to funguje… Zobrazí se to místo toho textu na který klikáš…

lookyn

Myslím, že tark to myslel tak, že se nezobrazí například nějaký číselný údaj, dle kterého poznáme, jak oblíbený je článek či tak nějak podobně 😉

Dero

Srozumitelně, názorně, střízlivě. Moc hezký úvod do tématiky.

Chtěl bych se zeptat, budou další pokračování, nebo to bylo jednorázové představení technologie?

Každopádně za článek děkuji.

Arcao

Existuje i alternativa v podobě načítání javascriptu přes DOM.

Marty

Velice pěkné a jednoduché shrnutí, konečně někdo také myslí na ty méně zdatné v tomto oboru.

Martin Picek

Legrační je to, že teď ti všichni naklikají, že se jim tento článek líbí (a taky, že líbí) kvůli vyzkoušení příkladu. 🙂

Medhi

Martin Picek (#10): To jsem si taky říkal, příště přiložím raději nějaký pěkný příkládek na vyzkoušení.

Petr Stříbný

Taky jsem si kliknul. Myslím, že na ankety a podobné věci je to jak dělané.

Roman

Nešlo by přidat stránku s ukázkou. Jinak pěkná web 🙂

dgx

Přehledné, jasné a motivující! Hned si jdu nějaký AJAX napsat 😉