xom`s pinion - Tom Hnatovsky Blog

Ukaž mi, kdo jsi!

18. září 2006 Zaujalo mne 20 komentářů

xom ze South Parku Poslední týden jsme si v našem pražském bytě užili spousty zábavy s generátorem South Park postaviček, dokonce se nám v hlavách zrodil nápad vytvářet jakýsi modřanský seriál, který se možná někdy objeví někde na netu ;o)

Tímto spotem vyzývám návštěvníky tohoto blogu, aby mi poslali svůj SP portrét! V komentářích můžete zanechat odkaz na váš obrázek či mi ho poslat mailem (hnatovsky@xom-tom.com) a já vám ho do komentáře vložím sám.. Jde mi o to, abych si udělal obrázek, kdo sem leze a jak vypadá. ;o) Abyste se nestyděli, tak přikládám portrét i já – lidé mě dle něho celkem poznávají..

PS: Zhruba za měsíc chci zveřejnit koláž z došlých obrázků, tak doufám, že tam nebudu sám.

Last.fm AJAXový RSS agregátor

12. září 2006 Web design 10 komentářů

Last.fm

I v Česku se rozmohla móda nechávat si indexovat vámi právě poslouchané skladby na serveru Last.fm, který dokáže poskytovat zajímavé statistiky a nabízet možnosti tvorby virtuálního přátelství s lidmi, kteří sdílejí váš hudební vkus. I já jsem se zhruba před měsícem rozhodl, že se podělím o svůj hudební (ne)vkus a když jsem tvořil nový design tohoto webu, tak jsem jej obohatil o desítku nejaktuálnějších skladeb z Last.fm.

Člověk se může spokojit s kusem kódu, který generuje statistiku v podobě obrázku (styl obrázku lze editovat), ale já jsem chtěl něco jiného, něco co bude dokonalou součástí designu, proto jsem se jal využít možnosti Last.fm RSS kanálu. Nebyl by problém podobnou statistiku načítat pomocí PHP a kešovat, optimální platnost keše mi přijde tak čtvrthodinka. Jenže někdy se musí data obnovit a to se stane po přístupu návštěvníka webu – systém zjistí, že nemá platný seznam písní, zahrabe na Last.fm, hrabe, hrabe – server může být v ten moment nedostupný, potencionální čtenář odchází, protože se mu stránka nenačte. Proto jsem přistoupil k problému z druhé strany – využil jsem JavaScriptu a dolování informací o hudbě až po načtení stránky – moderní je tomu říkat AJAX.. ;o) Jde o to, že se volá funkce např. getLastFmTracks() pomocí události onLoad a následně dojde k dotazu serveru na seznam, pokud je v keši načte se ihned, pokud je keš neplatná, tak se načte z Last.fm, výsledek se předá JavaScriptu, který pomocí innerHTML funkce přidá do stránky informace, jak prosté.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>LastFM Test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body onload="getLastFmTracks('lastFM', 'xomax');"> <!-- Box, do ktereho budeme vkladat --> <ul id="lastFM"> <li>Sem načteme statistiku</li> </ul> </body> </html>

JavaScript

Událostí OnLoad na elementu body voláme funkci getLastFmTracks s dvěma parametry, kterými definuje stránkový element, do kterého budeme vkládat výsledek, a uživatele, jehož statistika nás zajímá.

/* Definice promennych */ var i; var x; var artist; var name; var url; var date; /* Funkce zjistujici hudebni vkus */ function getLastFmTracks (block, user) { /* Pracuje prohlizec s W3 DOM kodem? */ if (document.getElementById) { /* Aktivace komunikacniho rozhrani */ var last = "http://pinion.xom-tom.com/skript/last.fm/lastFM.php?user="+user; x = (window.ActiveXObject) ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest(); x.open("GET", last, true); x.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8"); x.onreadystatechange = function () { /* Vyzadany dokument je nacteny (readyState == 4) a dotaz byl vykonan v poradku (status == 200) */ if (x.readyState == 4 && x.status == 200) { /* Ziskame data dle tagu z XML vypisu, abychom vedeli kolik pisnicek se v nem skryva */ var artist1 = x.responseXML.getElementsByTagName("artist"); var name1 = x.responseXML.getElementsByTagName("name"); var url1 = x.responseXML.getElementsByTagName("url"); var date1 = x.responseXML.getElementsByTagName("date"); var output = ""; var n = 1; /* Projizdime XML vypis dokud v nem neco je */ for (i=0; i < name1.length; i++) { artist = (artist1.length == "0" ? "" : artist1[i].firstChild.nodeValue); name = (name1.length == "0" ? "" : name1[i].firstChild.nodeValue); url = (url1.length == "0" ? "" : url1[i].firstChild.nodeValue); date = (date1.length == "0" ? "" : date1[i].firstChild.nodeValue); output += '<li><a href="' + url + '" title="Detail o interpretovi ' + artist + ' | Hrál mi ' + date + '">' + n + ' | ' + artist + ' – ' + name + '</a></li>\n'; n++; } var el = document.getElementById(block); el.innerHTML = output; } } x.send(null); } }

PHPko

JavaScript volá PHP stránku, na které se provádí následující skript. Pokud nechcete informace kešovat, můžete rovnou volat XML výstup z Last.fm. Kešování provádím podobně jako DGX ukládá Gravatary, prakticky jsem použil jeho kód, pouze upravil k potřebám mého hostingu (zákaz fopen na místa mimo localhost).

header("Content-Type: text/xml"); header("Cache-Control: post-check=0, pre-check=0", false); header("Pragma: no-cache"); header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); header("Cache-Control: no-cache, no-store, must-revalidate"); $user = $_GET["user"]; $expire = 60*10; // 10 minut $file = 'lastFM'.$user.'.xml'; // soubor kese $url = 'http://ws.audioscrobbler.com/1.0/user/'.$user.'/recenttracks.xml'; // URL RSS last.fm $cached = is_file($file); // existuje soubor s kesi? $expired = $cached && (time() - filemtime($file) > $expire); // je soubor stary? $return = ''; // Nacteme si novy obsah kese.. if (!$cached || $expired) { $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_HEADER, 0); curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, 0); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE); curl_setopt($ch, CURLOPT_TIMEOUT, 100); curl_setopt($ch, CURLOPT_GET, 1); $return = curl_exec($ch); curl_close($ch); // Zapiseme do kese, kdyz je co.. if ($return != '') { fwrite(fopen($file, 'wb'), $return); } } $return = file_get_contents($file); echo $return;

Co s tím?

Zdrojové soubory s popsaným kódem jsem vám sbalil, ať si je můžete stáhnout. Implementace na stránkách je snadná – stačí nakopírovat obsah <script> do <head> nebo umístit do externího souboru, který budete načítat. V JavaScriptové části to chce ještě změnit cestu k PHP souboru (dle toho, kam ho nakopírujete.) <body> obohatit o definici onload="getLastFmTracks(cilovy_element, 'vas_nick_na_last_fm');" a nakonec nastavit práva zápisu na adresář, kam se budou ukládat keše..

Tradá a teď sdílíte s celým světem svou náladu, která se leskne z výběru vašich písní..

Krajské logotypy v Česku

31. srpna 2006 Web designZaujalo mne 11 komentářů

Změna logotypu Libereckého kraje A státní instituce nám opět graficky haraší. Tentokráte se pro změnu svého logotypu odhodlal Liberecký kraj. Když přihlédneme ke skutečnosti, že takový Královehradecký či Olomoucký nemá logo dodnes, tak je přinejmenším podezřelé proč již tak brzy inovují Liberečané to staré. Změna symbolu mě vedla k procházce po všech krajích, abych se ujistil, že na tom jsou jinde hůř..

Původní logo Libereckého kraje vycházelo ze symbolu hory Ještěd a táhnoucího se trikolorovirého pohoří, to celé doplněno „hravým“ fontem. Celek informuje pozorovatele o hornaté krajině. Nové logo je vyvedeno šedé a tmavě růžové, netuším kde přišel autor k těmto charakteristickým barvám, symbol u nápisu je jednoduchý a připomíná mi nějakou silnici, Hodkovičtí obyvatelé zatnou pěsti při představě zpoplatněného pidikousku dálnice na Rádelský Mlýn, směrem do Liberce. Čtvrtkružnice ve mně prostě neevokují skokanský můstek, který to má symbolizovat a ani se neztotožňuji s barvami. Logo vypadá jako z nějaké banky grafických návrhů a ne jako speciální ikona vyráběná na tělo územnímu celku. Prostě se mi více líbí to staré, které má určitě jisté nedostatky, ale na stránkách o turismu v kraji se vyjímá.

Web stránky kraje

Tak jsem se vyjádřil k lokalitě domácí a teď sjedu i ostatní kraje, budou řazeny dle abecedy.. ;o)

Jihočeský kraj Jihočeský kraj se s logem popral poměrně dobře – symbolika je jasná, rybníky a nad nimi Šumava. I přes povedenost loga není pořádně použito na stránkách kraje, tam se vše točí kolem velkého znaku. Použití v grafice je možno shlédnout na webu Jižní Čechy nabízející možnosti pro turisty.

Web stránky kraje

Jihomoravský kraj Jihomoravský kraj má dle mého názoru nejlepší logo ze všech a také ho umí náležitě užít – je použito všude, poutá pozornost, je symbolické. Já si pod ním představuji typický valašský klobouk, kamarádka zase Pálavu se slunkem. Kraj je jediným, který má úvodní stránku webu ve Flashi, to by moc mít z hlediska přístupnosti neměli, a také je jediným, u kterého se mi líbí oficiální stránky více než turistické.

Web stránky kraje

Karlovarský kraj Dalším krajem v pořadí je Karlovarský. Jeho logotyp symbolizuje tryskající vřídla, osobně ho ale vnímám jako pochodeň, kterou už jsem jenom někde viděl, ale spíše jako symbol krasobruslařské soutěže. Na druhou stranu se mi líbí jejich web, který nevypadá stroze jako mnoho jeho kolegů. Dobré je použití loga na webu.

Web stránky kraje

Moravskoslezský kraj Moravskoslezský kraj nevyužívá na svém webu znaku, jako by se za své logo styděl. Ona to není kdovíjaká sláva, opět je použita, jako u většiny, trikolora a celek připomíná logotyp KlasA nebo-li Autocont.. Osobně se v symbolu ztrácím, nemám z něj dobrý pocit..

Web stránky kraje

Pardubický kraj Pardubický kraj má logo složené z jakéhosi globu a rozhledny, nevím, co si představit.. Nehledě na to, že mi to krapet připomíná eBanku, čekal bych spíše symboliku koně.. Alespoň, že se nebojí dát logo na své stránky, i když zde panuje schizofrenie, jak se prezentovat – logem či znakem?

Web stránky kraje

Plzeňský kraj Plzeňský kraj odvážně nepoužil státní barvy a sáhl po zelené, modré a žluté – za to tleskám, ale samotné logo by mohlo být použito kdekoliv – opět si nic pamětihodného nepředstavuji.. V hlavičce oficiálního i turistického webu použili Plzenští obrys kraje a na logo zapomněli, co musím pochválit je slogan – Plzeňský kraj – turistů ráj, zní to dobře. Plusem pro propagaci kraje je možnost stažení loga ve křivkách (Corel Draw a Adobe Illustrator).

Web stránky kraje

Hlavní město Praha Praha, hlavní město používá své logo dostatečným způsobem, je vidět na všech jejich materiálech, identifikuje se jím na pěkně zpracovaném webu, takto by to mělo vypadat. Zde jsem naprosto spokojený.

Web stránky kraje

Středočeský kraj Středočeský kraj u mě vyhrál soutěž o nejpřehlednější web, všechno co jsem potřeboval jsem ihned našel. Na první pohled Středočeši nepoužívají logo ani znak v hlavičce, na ten druhý pohled jsem zjistil, že ta převrácená vlajka v horní části webu je logem.. Nějak tomu nevěřím, ale Středočeský kraj má opravdu logotyp vypadající jako výřez odněkud odněkud.. ;)

Web stránky kraje

Ústecký kraj Ústecký kraj má zajímavý symbol – voda jasně symbolizuje Labe, věž zase hrady – jako celek to vypadá jako ikona poštovní známky ze sady Microsoftích klipartů. Řekl bych, že se logo asi moc nepoužívá, ale oficiální web je jím označen. Jako druhý kraj ze všech, po Plzeňském, nabízí stažení loga - a to ve velkém rozlišení (3543×3543).

Web stránky kraje

Kraj Vysočina Vysočina se prezentuje jedním z nejzajímavějších grafických počinů – základem je zelený klín dvou pahorků do tvaru písmene V umístěný nad c v názvu kraje, což dotváří háček. Oceňuji použití netradičního fontu v názvu a stylizaci písmen i a j, kde je použito jakoby odřezávacího efektu na diakritická znaménka nad samohláskami. Znak se hrdě používá jak na oficiálním webu, který nevystupuje z řady klasických krajských portálů, tak i na turistickém.

Web stránky kraje

Zlínský kraj Zlínský kraj je poslední kraj s logem. Symbol působí značně technicky, servisně – na mě působí zastaralým dojmem, ale asi je vcelku používán. Stránky kraje mně mírně evokují web televize – to bude tou výškovou budovou vlevo. Krajský magazín vyždímává z loga poslední kapky, snaží se být trochu inovativní, ale celkově se mi prezentace Zlína zdá nepřitažlivá.

Web stránky kraje

Jak je vidno z krátkého přehledu, tak se v Česku umí jednotně prezentovat jenom zlomek samosprávných celků, nevím, jak jsou na tom symboly krajů na mimo internetových materiálech jinde než v Liberci a Praze, ale mám pocit, že moc dobře ne. V Praze se člověk s jejím logem setkává na každém rohu – na plakátcích v MHD či pozvánkách na kulturní akce. Přičemž v Liberci jsem se s logem setkal vlastně jenom na propisce, co mi ji loni dali na dni otevřených dveří. Já vím, prezentace krajů není jednoduchá – spousta krajsky působících společností není v jejich rukou, ale na druhou stranu jsou od nich dotovány – myslím, že by neškodilo sjednocení služeb pomocí log, aby měl návštěvník jasno, co je ještě dotováno a co ne. V létě jsem se nestačil divit ve Švýcarském Davosu, jak svého logotypu využívají opravdu všude - autobusy, info centra, kulturní i sportovní stavby, na lanovkách. Pro turistu je určitě jednodušší si zakoupit jakousi městskou či krajskou kartu, na kterou bude moci vstupovat do institucí podporovaných městem resp. krajem, řádně označených a ty ho budou více přitahovat. Máme se co učit..

© 2004-2012 Tom Hnatovsky - Všechna práva vyhrazena