Adventura v Javascriptu

Když jsem byl mladší a měl jsem spoustu času, hrával jsem hry. Nejvíc mě bavily adventury, protože obsahovaly děj a většinou i humor. Ano, mám na mysli ty pecky od Lucasarts jako byl Indiana Jones, Monkey Island, Sam a Max, Day of the tentacle a další. Dokonce již na svém prvním počítači ZX Spectrum jsem hrál nejraději adventury. Moc jich nebylo, ale byly super. Kdo hrál Heroes nebo Jméno růže od George K., ví o čem mluvím (kde je tomu chlapíkovi dneska konec?).

Dneska už toho volného času tolik nemám a herní průmysl nesleduji, ale přijde mi, že adventury tak jak jsem je a znal a měl rád, již neexistují. Když se něco vydává za adventuru, tak je to většinou 3D hopsačka, kde se tak maximálně dají sbírat a používat nějaké předměty.

Nedávno mě napadlo, že by možná nemusel být velký problém napsat adventuru v HTML s pomocí Javascriptu. HTML se svým absolutním pozicováním obrázků poskytuje dostatečné „vykreslovací jádro“ a adventura nemůže být přeci složitá na naprogramování, aby to nešlo udělat v Javascriptu. Celý týden mi ta myšlenka ležela v hlavě, až jsem se rozhodl, že tento víkend zkusím udělat základní funkční prototyp.

Udělal jsem tedy první verzi, kde jsem si otestoval, jestli browser zvládne vše vykreslovat. V této první verzi je možné jen přecházet po místnosti (kliknutím myši). Některé předměty jsou „aktivní“, což znamená, že v pozdější fázi vývoje hry s nimi půjde manipulovat. Momentálně se jen zobrazí jen popisek, když nad takový předmět najedete myší.

Tato první verze by měla bez problémů běhat pod Safari a Firefoxem. Teoreticky by měla běhat i pod IE, ale začlo mi to házet nějakou chybu, a protože je IE debilní browser s ještě debilnější debug conzolí (dá li se tomu tak říkat), nepovedlo se mi rychle vypátrat problém a tak jsem se na to pro dnešek prostě vykašlal.

První základy Javascriptové adventury najdete zde

JS Adventura

Update: Pod IE7 by to již mělo fungovat. IE6 se na první pohled tváří, že funguje taky, ale ovládání nějak zlobí a popisky se nezobrazují.

Magdalenka.cz

Magdalenka.cz

Nedávno jsem své ženě spustil novou verzi jejího webu Magdalenka.cz. Je to takový foodblog kam si zapisuje své oblíbené recepty, jednak proto, aby je měla někde pohromadě a druhak proto, aby svým kamarádkám, které po ní často poptávají nějaký konkrétní recept, mohla poslat jednoduše link. Kromě samotného technického řešení webu mám na svědomí všechny fotografie jídel ale především jsem vrchní degustátor, takže kvalita všech receptů je zaručena :)

První verze běžela provizorně bez jakéhokoliv redakčního systému. Vyvíjet vlastní redakční systém mi přišlo jako nesmysl a tak jsem se začal porozhlížet po nějakých hotových systémech. A tady jsem poprvé narazil. Většina redakčních systémů je totiž navržená primárně pro blogy, takže každý příspěvek/stránka obsahuje jen nadpis, text a další metadata jako štítky, kategorie apod. To mi ale nestačilo. Stránka s receptem se skládala z názvu, úvodu, ingrediencí, postupu, hlavní fotky a případně dalších fotografií. Jednou z možností bylo nacpat to všechno do toho jednoho hlavního textu a pak to pomocí css rozstrkat po stránce. Tohle řešení není ale moc šikovné, protože vyžaduje po autorovi aby dodržoval určité postupy (příp. šablony), aby se stránka nerozpadla. Jedna drobná chybička (např. jiné pořadí dvou prvků) a už se to sype jako Pigi čaj. Tudy ne, řekl jsem si.

Redakční systémy, které by víceméně splňovaly moje požadavky (především možnost definovat strukturu příspěvku) existují. Ale už to nejsou jednoduché systémy, ale spíše robustní php frameworky převlečené za redakční systém. V mém případě kanón na vrabce (nebo komár na velblouda, jak by řekl Marek Prokop :).

Naštěstí jsem zjistil, že ve WordPressu existuje něco, čemu se říká custom fields. To vám umožní přidat ke každému příspěvku další textové informace, které můžete v šabloně zobrazit. Super, řekl jsem si, stačí přidat položky postup a ingredience. Toto řešení skutečně fungovalo, ale mělo háček. Při psaní každého nového receptu je potřeba dole na stránce rozkliknout custom fields, která jsou tam (ne)šikovně schována. Pak si člověk musí vzpomenout, jak že se ta custom pole mají jmenovat. Pokud zadáte název špatně, šablona jej nenajde a tudíž nezobrazí (příp. zobrazí chybovou hlášku). Aby toho nebylo málo, tak vstupní políčko pro samotný text je jen jednořádkové.

Už jsem to pomalu vzdával, když jsem objevil plugin More Fields. Ten vyřešil všechny moje problémy. Umožnil mi vydefinovat seznam s názvy custom fieldů, takže autor už jen doplní jejich hodnoty. Navíc umožňuje zadávat text do víceřádkového vstupního pole (textarea). A v neposlední řadě se zobrazuje hned pod samotným editačním polem pro text příspěvku, takže jej člověk nemusí hledat někde dole a rozklikávat.

Bohužel se mi nepodařilo nijak rozumně vyřešit fotografie. Nenašel jsem způsob, jak se z kódu šablony dostat k fotografiím, které se přihrají k článku. Vypadá to, že WordPress umožňuje jen vložit tyto obrázky do samotného textu, ale ne s nimi dál programově pracovat. Takže fotky nahrávám ručně do adresáře se stejným jménem jako id receptu a šablona receptu, která id receptu zná, ví kde má obrázky hledat. Nesystémové řešení, ale protože jsem to stejně já, kdo se o fotky k receptům stará, je to pro mě relativně schůdné. K zobrazování fotografií používám javascriptovou knihovnu ShadowBox, která se mi ze všech podobných líbí nejvíc. Náhledy k doplňujícím fotografiím seřezávám do čtverce, po vzoru Flickru, takže to nevypadá blbě, když je jedna fotka na výšku a druhá na šířku.

Co jsem si z toho odnesl za ponaučení? Že WordPress je skvělý systém, ale jen pro jeden konrétní účel – blog. Pro cokoliv jiného přestává být vhodný, protože je nutné jej různě ohýbat a dělat ústupky. To už je fakt lepší sáhnout po nějakém jednoduchém frameworku a postavit si to od píky sám.

Zboží potravinového typu

Velice doporučuji k přečtení rozhovor se šéfem Pražského kulinářského institutu Romanem Vaňkem

V této zemi masově žereme separáty, řekněme si to už jednou jasně. To je hlavní vklad supermarketů do kulinářské kultury České republiky. Rád chodím k živnostníkům, kteří se specializují na určité druhy potravin, to je snad jediná alternativa. Jsou to vesměs srdcaři. Přijdu na Smíchov k uzenáři Janu Sváčkovi. Vidím, že tam přišla stará paní a říká: Vy máte ale drahé buřty. On jí odpoví: Ano, paní, ale ty jsou z masa. Paní pobaveně zareaguje: A z čeho se asi buřty dělají? On jí řekne: Ze sóji, mouky a vody. Pak jí dá ochutnat nějakou uzeninu a ona odpoví: Jé, to je buřt, jaký jsem jedla naposled před válkou. A to je celý zázrak gastronomie.

V rozhovoru padne několik jmen pražských řezníků, kteří prodávají opravodvé maso. Dražší, ale kvalitní. Ale jak se má o nich obyčejný smrtelník dozvědět? Tak se ptám: Proč už neexistuje nějaká web 2.0 aplikace, kam by lidé mohli vkládat informace o obchodech, které prodávají skutečné potraviny (kvalitní řeznictví, zelinářství, obchody jako Cheesy atp.). Mohly by se umisťovat na mapu (takže by člověk rychle našel obchody v jeho okolí) a ostatní návštěvníci by mohli daný obchod ohodnotit a okomentovat.

Tak co? Kdo se toho ujme?

Jaký byl Webcamp 2008

Minulý týden jsem měl poměrně pestrý program. Ve středu Poslední středa, ve čtvrtek a pátek konference WebCamp 2008. Na tu jsem byl pozván Vilémem Málkem jakožto finalista soutěže Interzen 2008, za což mu tímto vřele děkuji.

Konference byla rozdělena na dva dny. Téma prvního dne byl Webdevelopment, což v praxi znamenalo přednášky především o PHP. Téma druhého dne byl Webdesign. To mne zajímalo mnohem víc než téma prvního dne. Celé dopoledne bylo věnováno přístupnosti. David Špinar povídal o Českých pravidlech přístupnosti na což navázal Lukáš Marvan ze Seznamu a Karel Břinda z centra Tereza povídáním o tom, jaká je praxe při nasazování pravidel přístupnosti na komerčním webu. Tuto sérii přednášek o přístupnosti zakončil Radek Pavlíček povídáním a praktickými ukázkami, jak si s webovými stránkami poradí čtečka pro nevidomé (konkrétně čtečka Jaws).

V druhé části dne mne zaujalo povídání Patrika Zandla o tom, jak se navrhovaly různé designy pro web Stream.cz s ukázkami některých verzí. Patrikovy názory na design jsou poměrně netradiční a svérázné, ale na druhou stranu velice střízlivé a vycházející z praxe (kdo tam byl, ví o čem mluvím). Ještě zajímavější však byla přednáška Martina Hassmana o HTML5. Pro mě osobně to bylo velice zajímavé a přínosné. Je dobře, že se v oblasti html začalo něco dít a ten směr kterým se to vydává je velice zajímavý.

Co se týče organizace celé konference, nemůžu organizátorům nic vytknout. Myslím ale, že návštěvnost asi nebyla podle jejich očekávání. Napočítal jsem něco kolem třiceti účastníků, přitom udávaná kapacita byla 190. Podle mne to mohlo být způsobeno poměrně vyšší cenou (1000,- za jeden den, 1800,- za oba dva dny) a tím, že se konference konala ve všední dny. Takže ti, kteří nestudují, si museli vzít v práci volno. Konference také nebyla nijak extra propagována, takže i to mělo určitě nemalý vliv. Ale jinak hodnotím konferenci velice kladně a jestli bude příští ročník o víkendu a cena bude o fous lidovější tak věřím, že účast bude mnohem větší.

Ještě jednou tedy děkuji organizátorům Vilému Málkovi a Jakubovi Vránovi za zajímavou a dobře zorganizovanou konferenci.

Jaká byla Poslední středa

Poslední středa je speciální typ semináře, který pořádá poradenská firma H1. Speciální je jednak proto že je zdarma, a také že je naprosto neformální (probíhá v hospodě). Je to takové povídání si u piva, jen s tím rozdílem, že se netlachá jen tak na prázdno, protože většina přítomných má spoustu zkušeností v oboru a je tedy skutečně o čem povídat.

Tentokrát byly tématem Pokročilé metody link buildingu. Seminář začal František Štrupl krátkou prezentací, která by se dala stručně shrnout do jedné rady: Udělejte dostatečně zajímavý obsah a lidi vám budou vytvářet zpětné odkazy sami a zdarma :) Prezentaci si můžete prohlédnout na blogu NaH1. Následovala poměrně dlouhá a zajímavá diskuse. První dotazy byly směřovány přímo na členy týmu H1, ale postupně si začali radit všichni mezi sebou a ke konci se role dokonce obrátily a členové týmu H1 si nechali radit od ostatních účastníků ;)

Musím říct, že mě poslední středa zaujala hned z několika důvodů:

  • Setkáte se zde zdarma s lidmi za jejichž přítomnost a rady obvykle musíte platit ;)
  • Nejen pořadatelé, ale i ostatní účastníci mají zajímavé zkušenosti a odborné znalosti
  • Zajímavé téma
  • Neformální atmosféra
  • V neposlední řadě výborná kuchyň restaurace Braunův sklep. Grilovaná vepřová panenka s grilovanými cibulovými kroužky se sezamem a medovo-hořčičnou omáčkou byla naprosto vynikající.

Hned jsem se přihlásil na následující Poslední středu. Jednak proto, že téma Důvěryhodnost webu mne zajímá, a také proto abych si ověřil že tam takhle dobře vaří pokaždé ;)

Koncerty ve vašem okolí

Už je tomu nějaký pátek, co jsem vás informoval o spuštění nového webu NaKoncert.cz. Od té doby o tomto novém webu napsalo několik lidí, mimo jiné:

Když jsem web spouštěl, psal jsem o tom, že ještě neobsahuje všechny plánované funkce. Obzvláště jedna funkce vysloveně volala po nasazení. Když už je možné vybrat si jen konkrétní kapely, bylo by dobré mít možnost vybrat si jen určitou lokalitu, ve které mě koncerty zajímají.

Tento úkol se dá řešit několika různými způsoby, které se liší technickou složitostí na jedné straně a uživatelskou přívětivostí na straně druhé. Technicky nejjednodužší by bylo nechat uživatele vypsat města, která ho zajímají. Koncerty v ostatních městech by se mu nezobrazovaly. Takové řešení by nestálo moc práce, ale uživatelsky by nebylo moc přívětivé.

O něco příjemnější pro uživatele by bylo vybrat si jeden nebo několik okresů. Pro uživatele by odpadla nutnost vypisovat všechna města, prostě by vybral okres z předem připraveného seznamu. Technicky je to o něco složitější řešení než první varianta, ale stále to není nic složitého. O této variantě jsem na začátku vážně uvažoval.

Nakonec jsem se rozhodl pro technicky složitější řešení, ale myslím, že uživatelé ocení jednoduchost tohoto řešení. Přesvědčte se sami na následujícím obrázku, jak jednoduché je pro uživatele nastavit si oblast, která ho zajímá.

Výběr místa bydliště

Věřím, že tato nová funkce posunula užitečnost tohoto webu zase o krok dopředu. Co si o tom myslíte vy?

Už žádný promeškaný koncert

Rád bych vám představil svůj nejnovější projekt, web NaKoncert.cz

Jestli rádi chodíte na koncerty, tak to určitě znáte. Kulturní přehledy jsou nabité koncerty kapel, které vás ale vůbec nezajímají a najít mezi nimi koncert vaší oblíbené kapely je jako hledání jehly v kupce sena. Takže nezbývá, než sledovat webové stránky jednotlivých kapel. Jenže to je zase hodně náročné a nemáte čas dělat to denně, takže nakonec víc koncertů prošvihnete, než na kolik se jich vypravíte.

A to je důvod, proč vznikl web NaKoncert.cz. Myšlenka je vcelku jednoduchá: vyberete si kapely, které máte rádi a pak už jen sledujete jedinou stránku s jednoduchým přehledem koncertů jen těch kapel, které jste si vybrali. Navíc si můžete nechat tento přehled zasílat jednou týdně emailem.

Grafickou podobu webu navrhl Whitwa. Jelikož web ještě není dotažený na 100%, mohou tam být drobné odchylky od návrhu, které odborníka doslova drásají, ale vy si jich ani nevšimnete :) Pokud ale budete chtít kritizovat design, tak se raději podívejte na originální návrh

Web ještě nemá implementované všechny plánované funkce. Přesto jsem se rozhodl jej oficiálně spustit již nyní, protože to hlavní už umí a teď už jde jen o to to dotáhnout do dokonalosti. Mezi plánované funkce patří:

  • Speciální url pro každého uživatele, kde bude jeho osobní přehled koncertů dostupný i bez zalogování
  • iCal export (no nebude to skvělé nosit přehled koncertů v iPodu?)
  • filtrování koncertů podle lokality. V ideálním případě by to mělo vypadat tak, že si uživatel nastaví, že ho zajímají jen koncerty v okolí města X do vzdálenosti Y km

Těším se na vaše názory v komentářích. Pokud se vám web NaKoncert.cz líbí, budu rád, když mi pomůžete tím, že na svůj web umístíte některou z ikonek.

Co je to praSEO?

SEO je zkratka pro „optimalizaci pro vyhledávače“ (Search Engine Optimisation). To asi většina z vás ví. Je to dost důležitá věc, protože když vaše stránky vyhledavač nenajde, jakobyste neexistovali. Na internetu se dá najít spousta článků o tom, jak správně optimalizovat. Také existuje spousta firem, které se věnují poradenství v oblasti SEO (u nás je asi nejznámější H1 a Dobrý Web). Jelikož tento článek nemá být o SEO, shrnu jen tři nejdůležitější principy optimalizace pro vyhledávače. Jde o tyto tři body:

  1. Sémantika (aby robot vyhledávače rozpoznal, co je nadpis apod.)
  2. Správná klíčová slova na stránce (když prodáváte dveře, ale slovo „dveře“ na stránce nepoužijete, těžko vás vyhledávač na toto slovo najde)
  3. Odkazy (nehraje roli jen jejich počet, ale i „kvalita“)

PraSEO je pejorativní výraz pro takovou optimalizaci, která se snaží vyhledavač „oblafnout“. Stránka optimalizovaná pomocí technik praSEO se snaží vyhledavači nalhat, že je mnohem zajímavější, než ve skutečnosti je.

V praxi je občas těžké najít hranici mezi SEO a praSEO. Obě metody jsou založeny na dvou faktech:

  1. Znalost základních principů „ohodnocování“ stránek, které má hlavní vliv na pořádí výsledků při hledání ve vyhledávači
  2. Snaha získat ve vyhledávači lepší pozici na konkrétní klíčová slova (fráze)

Jaká je tedy přesná definice pro praSEO? Webster dictionary tvrdí:

Praseo – A combining form signifying green; as, praseocobalt, a green variety of cobalt

No, nevím, nějak mi ta definice nesedí :o ) Ani na českém internetu jsem žádnou přesnou definici nenašel. Jsou jen prostě metody, o kterých se ví, že jsou praSEO. Pojednává o nich mimo jiných zajímavý článek Podvodné optimalizační techniky od Dušana Janovského (Yuhůa)

Takže žádná oficiální definice zřejmě neexistuje. Já sám jsem si tedy vytvořil vlastní jednoduchou definici: praSEO je všechno, co je vytvořeno JEN za účelem zlepšení pozice ve vyhledávačích a pro uživatele to má prokazatelně NULOVÝ přínos. Do této definice se vejdou nejčastější techniky jako např. hromada klíčových slov vespod stránky, linkfarmy apod.

Nedávno jsem tuto mojí definici napsal do emailové konference seo.nawebu.cz a diskutoval jsem o ní s Radkem Ondrou, kterému se moje definice nelíbila. Nicméně mě zatím nepřesvědčil, že by byla nepravdivá. Rozhodně odmítám přijmout jeho tvrzení, že už samotný fakt, že se moje stránka zobrazí na lepší pozici, je přínos pro uživatele, protože mě snáze najde. To je samozřejmě nesmysl – uživatel chce najít nejrelevantnější stránku. Ne takovou, o které já jako tvůrce si myslím, že je pro něj nejlepší.

A co vy si myslíte o praSEO? Kde je hranice mezi SEO a praSEO?

Jaromír Nohavica online

Jaromír Nohavica je nejen velkou osobností mezi písničkáři, ale také velký fanda internetu. Svědčí o tom mimo jiné jeho poslední „album“ s patřičným názvem „Pražská pálená“. Toto album se nedá koupit v obchodě, ale pouze stáhnout a vypálit z oficiálních stránek www.nohavica.cz. Písničky na tomto albu nejsou žádné novinky, naopak. Ačkoliv oficiálně na žádném albu nikdy nevyšly, jde většinou o písničky staré i několik desetiletí. Většina fanoušků je však zná ze starých koncertů nebo spíše alespoň z jejich desetkrát přehrávaných nahrávek nevalné kvality. Nyní je však 22 starých písniček oficiálně ke stažení ve výborné kvalitě. Pořád je to ale jen zlomek všech zatím nevydaných Nohavicových písní.

Ale Jaromír Nohavica jde na internetu mnohem dál! Založil si totiž Písničkový blog! A nejedná se o jen tak obyčejný blog. Jaromír Nohavica se totiž rozhodl publikovat svoje reakce na současné dění v podobě písní! Zatím jeho blog obsahuje pouze dvě písně:

  • „Už zase bijou děti“ – smutná píseň složená jako reakce na dění kolem CzechTechu
  • „Ladova zima“ – velice veselá píseň mapující události letošní zimy

Téměř všechny weby hudebních kapel a muzikantů se omezují jen na prezentaci kapely a přehled koncertů. Jaromír Nohavica dokázal z internetu vytěžit mnohem více a nabídl svým fanouškům velice zajímavý a jedinečný obsah. Kéž by se touto cestou vydalo více umělců.

P.S.: Když už se zmiňuju o webu Jaromíra Nohavici, tak si nemůžu odpustit jednu výtku. Jestli jsem to dobře zaznamenal, změnil se webmaster tohoto webu. S novým webmasterem přišel nový a unikátní obsah o kterém se zmiňuji výše (otázka je, jak velká je to zásluha webmastera), ale došlo také k redesignu webu. Kromě toho, že zmizela spousta zajímavého obsahu (např. texty snad všech (i nevydaných) písní apod.), dostala na frak i použitelnost. Především navigace je hrozná a neintuitivní. Menu druhé úrovně je úplně jinde než menu první úrovně, několik položek v menu není klikatelných, přestože se od ostatních vizuelně nijak neliší (proč tam vůbec jsou?), na některé stránky se dostanete jedině z úvodní stránky (např. zmiňované album Pražská pálená) a na úvodní stránku se z jiné stránky nedostanete nijak. Tento fakt bohužel docela shazuje vynikající vlastnosti webu o kterých jsem se zmiňoval výše.