Kontakt

Naše portfolio: Ostryweb @ Instagram.

čtvrtek 7. května 2015

Galerie fotek z Instagramu na vašem webu

Vzhledem k nutnosti pozastavení projektů Ostravagram, Girls of Ostrava a Guys of Ostrava, prezentuji vlastnosti systému pro případné další zájemce.

Všem děkuji za přízeň, projekt Ostravagramu dokonce přilákal pozornost masmédií, což vyústilo v článek na Deníku, nebo reportáž v České Televizi. Lence děkuji specielně za trpělivost při výběru fotek pro Guys of Ostrava.

Pozastavení proběhlo díky kombinaci nedostatku času a vzrůstajícímu množství spamu na Instagramu v rámci hashtagu #ostrava. Problém je zjevný z následujícího aktuálního obrázku stavu.

Aktuálně při zobrazení #ostrava na Instagramu v rámci prvních 20 fotek je: 7 fotek spamu sítě uživatelů zjevně jednoho prodejce padělků kabelek. 3 fotky reklamy na jiné produkty. 10 normálních fotek od uživatelů. Při tomto stavu se není možno probírat horama kabelek a jednou za 4 várky vybrat zajímavé foto uživatelů. Bohužel rozhraní Instagramu neumožňuje filtrovat více než jeden hashtag, takže se kabelek a podobných není aktuálně možno při výběru zbavit.


Tento problém ale nemusí být přítomen u jiných hashtagů, takže systém jako takový může být stále užitečný nezměněnou měrou. I nadále fungují například liberecgram.cz anebo www.stodolni.info/foto/.

Následuje praktické vysvětlení, jak systém funguje.

1/ vytvoříte si speciální účet na Instagramu pro tyto účely (nazvěme ho uživatel Pepa)
2/ domluvíme se na nasazení systému, budu po Vás požadovat pár úkonů v rámci Instagramu
3/ praktické nasazení vyžaduje čistě HTML hosting, netřeba PHP, ani databáze.
Nejlevnější řešení je k dispozici už za 65kč ročně včetně domény (cena bez práce při nasazení).
Pokud doménu a hosting již vlastníte, platíte jen za práci při nasazení.
3/ přihlášeni jako Pepa si jakýmkoliv způsobem najdete foto, které chcete zobrazit v galerii na webu
4/ olajkujete ho ("to se mi líbí")
- tímto způsobem plníte svou galerii. Možností je více, můžete zobrazovat například jen vlastní fotky, fotky autorem označené nějakým tagem atp.


Pokud byste rádi něco podobného umístili na své stránky a vybírali si fotky dle svého, ozvěte se na hynek@ostryweb.cz a domluvíme se na podmínkách.

sobota 24. ledna 2015

Change Facebook page category to "Event" or non-listed category


So you want to change the Facebook Page to something that is not listed in the Page category dropdown? I will show you step by step how to do this.

Long story short - what you have to do is to make the About setting form to reveal the Sub-category setting. This often reqires to "unlock" the Address setting first and add a valid address. I will show this on an example with a Page set up as a "Concert Tour" category, but It's applicable to any other setting.


1/ I have a page under "Concert Tour" category and I'm not happy with it, as it's a page for a music festival. The closest category to music festival in the available list is an "Event". I will want to change the page to this. In the initial stage, I have no way to do it, as the "Event" category is not listed.

2/ We need to "unlock" the Address settings - therefore we need some category, which has this option - I will use "Musician/Band".



3/ After the save, the About settings page expands to a lot of new editable items. We are interested in the Address field. It is crucial to enter address that Facebook/Bing understands, therefore I recommend first choosing "Located inside another Place" option. This will allow you to search and select valid address from the list.


4/ So I saved the address and voila, now I have Subcategories option! There I can select anything listed on the big category list, which can be seen at the end this article and which contains almost 900 options. Also you can choose three of them here.




5/ After this I can delete the entered address (mine got erased after selecting the Subcategory anyway), and also I can turn back the main category setting! So I'm turning back to "Concert Tour". The "Event" setting stays intact.



So what exactly is there to choose from? This is a list taken on January 2015, the updated list can be pulled from Facebook in Graph API Explorer with the query search?type=place_topic&topic_filter=all




P.S.: don't forget to visit our psytrance festival UFO BUFO Facebook page, which is finally tagged as an "Event", not a "Concert Tour".. ;)

pátek 22. března 2013

Upravená pravidla pro Facebook Pages

Předchozí Pravidla zakazovala jakékoliv smysluplné a logické využití velké (851×315 v tuto chvíli) fotografie v záhlaví. V nových Pravidlech jsou skoro všechna omezení pryč.

Facebook ustoupil a fotka v záhlaví může obsahovat „Call to Action“, upozornění na Like/Líbí, nabídky zboží, cenové informace či adresy.

Dál samozřejmě platí to, že obrázek nesmí být zavádějící a nesmí porušovat něčí práva. Stále nesmíte vybízet k tomu, aby lidé vaši fotku v záhlaví použili pro svou osobní Timeline. A jediným omezením je, že fotka nesmí obsahovat více než 20 % textu.
Celý článek je k přečtení na lupa.cz

úterý 22. ledna 2013

Padání Chrome při ukládání a praskání zvuku streamu

Před nějakým časem mi začal prohlížeč Chrome padat kdykoliv jsem chtěl provést nějakou akci se souborovým systémem. Tedy uložit soubor (rsp. otevřít dialog kam soubor ukládat), otevřít soubor atd. Bylo to frustrující protože jediná věc, která fungovala, bylo vyvolat ukládání jako první událost po spuštění browseru a to dříve, než otevřu jakoukoliv stránku. Pak se vše dělo korektně.

Tento stav setrvával několik měsíců, takže jsem se toto dokonce naučil dělat při každém spuštění jako správný Homo Sapiens. Není nic horšího, než když kliknete na odkaz a uvědomíte si, že jste onu proceduru po startu neudělali, tudíž za pár milisekund vás pozdraví hláška o pádu.

pád Chrome při ukládání

Obvzlášť oblíbená varianta je při stahování ze serverů, které Vás nutí čekat půl minuty, aby naservírovaly Captchu, následuje pád a po obnovení server hlásí, že jste vyčerpali přidělenou kapacitu a můžete to zkusit znovu až za hodinu. Tomuto stavu nepomohla ani reinstalace. Ale jak říkám, člověk se naučí.

Od určitého updatu Chrome se mi začala dít druhá nepříjemnost - u streamovaného videa se objevovalo praskání zvuku. Někdy videa (stream, youtube, čt...) jela v pořádku, ale od nějaké akce začala praskat a hotovo. Stejný problém měli s Chromem rodiče na úplně jiném stroji, konfiguraci a parametrech připojení k internetu. Když se ta samá stránka otevřela ve Firefoxu, vše jelo korektně.

Řešením obou problémů v mém případě bylo zakázání jedné z knihoven Flashe v prohlížeči (neptejte se, jak Flash souvisí s ukládáním souborů). Tedy do adresního řádku Chromu stačí napsat about:plugins a najede stránka s výpisem modulů, se kterými Chrome zachází. Vpravo nahoře je pak rozbalovací odkaz "+ Podrobnosti", kterým se rozbalí detaily.

U pluginu Adobe Flash Player pak stačilo kliknout na odkaz "deaktivovat" u souboru pepflashplayer.dll, celý blok pak zšedne.



Toť vše. Žádný další problém se zvukem videí a žádný problém při ukládání souborů. Zároveň si nejsem jist, k čemu knihovna slouží, protože i obsah ve Flashi jede dále normálně.

Snad to někomu taky pomůže.

pondělí 14. ledna 2013

Práce SEO konzultanta

Na webu Smashing Magazine vyšla pěkně okomentovaná definice SEO konzultanta. Tedy co všechno by měl takový člověk v profesionálním prostředí řešit.

Není to jen o tom pustit někoho na skomírající web, aby se podíval, jestli jsou nadpisy opravdu v H1. Je jasné, že ne každá firma si nechá celé toto spektrum ošetřit a je ochotná za to adekvátně zaplatit.

Tento rozsah je ale dobré pochopit zvláště v dnešní době, kdy začíná být jasné, že klasická PPC placená reklama není úplně to pravé ořechové (Rand Fishkin - Inbound Marketing for Startups: How to Earn Customers Without Paying) a zároveň už nefungují klasické finty z dřívějška, kdy stačilo rozprášit odkazy do co nejvíce katalogů a zvyšující se počet návštěvníků po nějakou dobu držel majitele firem spokojené. Tedy do té doby, než se podívali na výsledky prodeje. Ale to už je zas jiná pohádka.

When developing content for a website, an SEO serves as a knowledgeable consultant who will:
  • Define business objectives

    They will thoroughly understand a company’s overall business objectives, not just their objectives with SEO or social media, content marketing or traditional marketing. They know the company’s overarching goals for what they’d like the business to achieve.
  • Define target audience(s)

    They will conduct the necessary research to understand and define a company’s target audience(s).
  • Determine pain points, the conversion funnel and messaging

    They will understand the target audience or personae’s pain points in order to effectively develop content that helps customers get what they need at the appropriate stage in the sales funnel. Then, they will develop the messaging to fit.
  • Develop strategy

    They will consider business objectives, the target audience, pain points and the conversion funnel. SEOs assist companies in formulating a content strategy that will generate the content that really meets the needs of their customers.
  • Determine target keywords

    It would certainly be a shame to generate content that is never found. SEOs determine the keywords that customers are actually using to find relevant information related to their queries.
  • Develop a navigation structure

    Once a company knows what type of content their customers need, an SEO can assist in planning a navigation structure that helps a user find what they need quickly and easily. Ultimately, the structure will also allow the search engines to easily crawl all content on the site so that it can also be found and returned in a relevant search.
  • Develop valuable content

    A great deal of work is done before an SEO can help a client develop valuable content. Once they’re there, it’s a matter of generating authentic, engaging content that benefits the customer. This requires a partnership between the SEO and the client to effectively convey the right message at the right time.
  • Integrate appropriate keywords into content

    SEOs assist customers in finding the content they need by integrating the appropriate keywords into the content. This allows the search engines to properly crawl and index that content to be returned in a search.
  • Facilitate outreach

    They assist companies in connecting with people who would find value in the content that has been generated. This can be done in person, online through social media or through email marketing. Certainly, when content is effectively optimized, it will organically contribute to outreach.
  • Measure and analyze

    Based on data that is collected, SEOs measure and analyze the content that has been generated to determine whether it’s satisfying the needs of the customer.
  • Provide strategic direction

    Based on everything that has been learned from generating content, where does the company go next? The data collected will inform the SEO so that they can help the company make educated decisions about their content moving forward.

zdroj: smashingmagazine.com

úterý 25. prosince 2012

Vývoj Wordpress pluginu s použitím Custom Post Types

Zadáním nedávno spuštěného Wordpress pluginu pro zákazníka bylo vytvořit systém dokumentů, ke kterým je omezen přístup a mají specifickou strukturu. Nebudu popisovat celý vývoj, ale vzhledem k tomu, že v rámci daného řešení bylo nutno sáhnout po pokročilejších záležitostech jako custom post type, custom taxonomy, custom roles, nastavení capabilities atd. popíšu alespoň tyto netriviální věci.

Na konci uvádím i tipy na nástroje, frameworky a odkazy, na které jsem narazil v průběhu vývoje a buď mi pomohly, nebo bych je nejspíš použil při podobné budoucí záležitosti.

Nebudu se rozepisovat o detailech, bez reference v podobě Wordpress codexu (dále jen Codex) se určitě neobejdete.
http://codex.wordpress.org/

Custom Post Type

http://codex.wordpress.org/Post_Types
Na míru definovaný typ “dokumentu” Wordpressu s požadovanými položkami. Položky můžou být buď klasické jako známe z klasických článků a příspěvků - tzn textové políčko (v administraci jako input), pole pro větší text (textarea), ale i vyloženě custom záležitosti (color picker apod).



Ke kompletnímu vysvětlení odkazuju na Codex, jde o obecnou definici nového typu, definujeme jeho název, který je jeho identifikátorem v systému, popisky “labels”, chování v systému.

V ukázce kódu je zahrnuta i další záležitost:

Custom capabilities

http://codex.wordpress.org/Function_Reference/register_post_type
Vzhledem k tomu, že nám v tomto projektu nevyhovuje využití defaultních práv k postům Wordpressu (tedy je nutno oddělit psaní klasických článků a vytváření těchto dokumentů), musíme si nadefinovat názvy speciálních práv k tomuto Post Typu a napojit je na defaultní práva, aby systém věděl, co znamenají. Custom capabilities mají název podle defaultního práva pro “post”, jen místo tohoto slova vkládáme název právě našeho Post Typu. V příkladu výše “muj_document” resp “muj_documents” - toto je potřeba odlišovat dle původního vzoru.

Custom Roles

http://codex.wordpress.org/Function_Reference/add_cap
Opět nám nevyhovuje klasické rozřazení Wordpress uživatelů (Administrator, Šéfredaktor, Redaktor atd..), ale chceme uživatelům přiřazovat speciální role, které mají námi definovaná práva.



V prvním řádku jsme přidali do systému novou uživatelskou roli, níže pak přidáváme práva pro manipulaci s našili dokumenty (capabilities), viz výše, pro jistotu můžeme i některé capability odebrat..

Tento kus kódu je vhodné vložit do bloku instalace pluginu, aby se nespouštěl pokaždé. Tzn ho vložíme např. do funkce muj_activate(), kterou pak voláme následujícím způsobem.



Custom Taxonomy

http://codex.wordpress.org/Function_Reference/register_taxonomy
Jak jsem uvedl výše, jednou ze zásadních věcí je, že jsme schopni si nadefinovat svou strukturu dokumentu, tedy nemusí jít o klasiku v podobě názvu, úvodu, textu, kategorie a štítku, ale lze vše změnit. Kód níže zavádí nové pole Vydavatel, které funguje na principu číselníku (tzn. vlastně upravená verze štítku). Zde opět navazujeme capabilities na námi definované výše.



Custom Meta Boxes

http://codex.wordpress.org/Function_Reference/add_meta_box
Pro editaci v administraci je nutné nadefinovat si ovládací prvky. Můžete opět postupovat ručně, dle Codexu. Já našel a použil framework, který ulehčuje velké množství práce.
https://github.com/jaredatch/Custom-Metaboxes-and-Fields-for-WordPress

Tipy

Téměř ke konci vývoje jsem narazil na Piklist, který mohl celý vývoj dost zásadně ulehčit, bohužel v dané fázi už to nemělo cenu, ale doporučuju zvážit. Framework se zdá dostatečně flexibilní a umí jednoduše nadefinovat vše, co jsem popsal výše a vyvíjel jsem “ručně”.

Pro představu doporučuju prezentaci autorů zde:
http://wordpress.tv/2012/09/04/steve-bruner-and-kevin-miller-building-powerful-websites-and-web-applications-with-piklist/

Web projektu: http://piklist.com/

Obecně velký zdroj všeho kolem těchto rozšíření Wordpressu a customizace je na blogu Justina Tadlocka, takže při studiu určitě chtě nechtě zabrousíte na http://justintadlock.com/.

Pro kontrolu nastavení práv jsem používal Justinův plugin Members. http://wordpress.org/extend/plugins/members/

středa 17. října 2012

Vývoj interaktivního kiosku s mapou obchodního centra

Jde o aplikaci pro full-hd dotykový kiosk, který je nainstalován v Brněnském obchodním centru Campus. Zákazník si vybral offline verzi, což komplikuje případný support, ale snad nebude potřeba. Aplikace umožňuje dotykově filtrovat seznam obchodů, po výběru obchodu zobrazit umístění na mapě a zároveň zobrazit detaily o obchodu s fotkami, otevírací dobou atd. Aplikace má administrační rozhraní, kde se po připojení klávesnice umožňuje upravovat informace o obchodech včetně nahrávání fotek.

Kiosk v Campus Brno



Video softwaru



Použité technologie

Denip Kiosk Master s Windows 7
http://www.denipkiosk.cz/informacni-kiosky/master/

MicroApache distribuce s PHP a SQLite - distribuce má komplet kolem 3MB, vzhledem k offline použití dostačuje
http://microapache.kerys.co.uk/

Open Kiosk browser
https://www.mozdevgroup.com/products/openkioskdistro.html

JQuery
http://jquery.com/

JQuery Easing plugin pro animace objektů
http://gsgd.co.uk/sandbox/jquery/easing/

JQuery Quicksand plugin pro efektní animaci filtrování položek
http://razorjack.net/quicksand/

JQuery SVG plugin pro manipulaci s mapou
http://keith-wood.name/svg.html

JQuery Jeditable plugin pro jednoduchou administraci
http://www.appelsiini.net/projects/jeditable

Řešení

Jak z výčtu vyplývá, použil jsem PHP skript pro generování základní kostry HTML stránky a pro komunikaci s databází. Open Kiosk browser postavený na jádře Mozilly pak splňuje všechna specifika nutná pro použití v takovémto případě.

Pro mapu byl použit SVG formát, se kterým se perfektně pracuje. SVG je vlastně XML definice grafických (i logických - grupy) objektů, se kterýma můžeme libovolně zacházet díky JQuery SVG pluginem (případně jinýma - známý Raphael atp). Lze tedy jednoduše měnit velikost, pozici, rotaci, barvy a zřejmě i další věci, které jsem nepotřeboval. Navíc vše podporuje Easing animace, takže všechny zmíněné změny lze "morfovat" i dle složitějších parametrů, než jen rychlost.

Většina operací se provádí v rámci Javascriptu, PHP víceméně natáhne velkou část dat o obchodech při prvotním spuštění a dokud nedojde k refreshi stránky, vše se děje v rámci Javascriptu. Záležitosti, jako zobrazování informací o obchodech apod, se načítají pomocí Ajaxu, stejne tak operace v administraci.

Browser refreshuje stránku automaticky po nastavitelném intervalu nečinnosti, zároveň umožňuje zúžit uživateli mantinely - lze použit filtr URL, lze omezit přístup jen na daný web, lze dokonce skrýt jakékoliv ovládací prvky včetně panelu s adresou. Stará se o fulscreenové zobrazení bez minimalizačního a zavíracího tlačítka a blokuje nevhodné kombinace kláves jako Alt+Tab apod.

Některé zajímavosti, které se hodily nebo zaujaly:

Přehled easingových animací, po kliku se předvedou
http://jqueryui.com/demos/effect/easing.html

Čistě CSS animovaný modální dialog
http://www.paulrhayes.com/2011-03/css-modal/

Generátor čistě CSS šipky
http://cssarrowplease.com/