Články z rubriky ‘Grafika&Webdesign’
Úterý, Srpen 9th, 2011
Všichni o Facebooku mluví, všichni tam jsou, ale málokdo se v něm vyzná. Návody jak propojit web s facebookem, které jsou k nalezení na webu jsou pár let staré, neaktuální a většinou (vzhledem k změnám které mezitím FB prodělal) nefunkční. V odborné literatuře jsem nenarazil ani na jednu knihu. Jediný rozumný zdroj dokumentace je na facebooku:
http://developers.facebook.com/
Mým cílem bylo zprovoznit tlačítko na coudyho psím blogu tak, aby ukazovalo na obsah, tedy v různých částech webu na různé věci, a navíc na jedné stránce mít dvě různá tlačítka na dva různé obsahy! Popravdě řečeno, ono výsledné řešení je poměrně triviální, ale přijít na to je složité, protože nesmíte postupovat přesně podle návodu tvůrců facebooku 
Základem je nepoužívat open graph tagy, které oni píšou jako že jsou „required“. V případě kompletního použití open graph tagů a XFBML verze tlačítka, jak to doporučují , to prostě vždy bude lajkovat na stránku uvedenou v tagu „og:url“, která ale je vždy brána jako base url celého webu (potažmo entity)!!! I když se upraví kód webu tak, aby se tato url na každé stránce měnila podle obsahu, tak to prostě vůbec nefunguje. Toto řešení, které je popsáno na developers.facebook.com je určeno pouze pro lajkování něčeho jako celku – tedy restaurace jako takové, zpěváka jako takového, ale ne oblíbeného jídla na webu restaurace, nebo konkrétní písně zpěváka.
Pokud chceme lajkovat jednotlivý obsah místo celku, je potřeba og:tagy vynechat (až na jeden o kterém se zmíním později), a použít jen kód pro like tlačítko s konkrétní url.
Zde se otevírá další problém – facebook si svým parserem ze stránky automaticky vycucne o čem ten link je a přidá obrázek o kterém si myslí že odpovídá obsahu, ale to nemusí vždy odpovídat realitě. Záleží na struktuře stránky. Dobré je mít požadovaný obsah v div s názvem „content“. Jako náhled si facebook volí nějaký obrázek ze stránky, ale ten také nemusí být správný. Občas třeba vybere reklamu apod. Zde právě pomůže umístit do záhlaví osamocený „og:image“ tag, který facebook parser nebude ignorovat a kterým ukážete na ten správný obrázek.
Důležité je také vědět, že facebook si ukládá vaše stránky do CACHE, která platí cca 24h. Takže při programování tlačítka nebude reflektovat na změny v reálném čase. Zde pomůže facebook URL Linter:
http://developers.facebook.com/tools/lint/
Po zadání konkrétní adresy do linteru se vám zobrazí jak parser facebooku stránku vidí, ale hlavně se vždy vymaže CACHE!!!
Pokud chceme mít pohromadě více like tlačítek na jedné webové stránce, která budou lajkovat různý obsah, trik je v tom že nebudou odkazovat na adresu té jedné stránky na které jsou, ale na různé stránky kde je daným obsah dominantní a linter jej správně pochopí.
Publikováno v Blog, Grafika&Webdesign | Žádné komentáře »
Pátek, Únor 4th, 2011
Nedávno jsem si všimnul že na facebooku se při vyplňování textového políčka stavu automaticky přidávají řádky podle potřeby. To je naprosto geniální a efektní funkce a uplatní se skvěle v každém webovém formuláři , který může být díky tomu daleko přehlednější (zejména pokud obsahuje hodně položek).
Jak na to? Docela snadno – na stránce http://onehackoranother.com/projects/jquery/jquery-grab-bag/je to vymyšlené jako plugin pro knihovnu jquery.
Já už to používám a je jasné že tento skvělý nápad se rychle rozšíří do světa…
Publikováno v Blog, Grafika&Webdesign, Zákysník | Žádné komentáře »
Úterý, Leden 26th, 2010
Kdo viděl kvalitní full HD video, tedy rozlišení kolem 1920×1080, ví, že to nemá chybu. Video zaznamenané v tomto rozlišení je něco vyjímečného, co se blíží k živému prožitku. Pokud bychom věřili značce a hledali u Canonu, což není jistě chyba, toto rozlišení nabízí videocamera Canon LEGRIA HF200. Cena kolem 16000Kč. JENŽE. Mám už doma zrcadlovku Canon a k ní pár dobrých objektivů. A věřím tomu, že dobrý objektiv dělá 90% obrazové kvality fotky.
Nastává tedy dilema, zda využít své drahé príma objektivy a koupit nové tělo zrcadlovky co umí točit full HD video, nebo koupit novou videokameru a smířit se s jejím kompromisním objektivem… A věřím že na Canon EF 70-200mm f4L ty vestavěné objektivy kamer opravdu nemají.
Babo raď…
Canon EOS 7D je proto moc pěkný 
a snímá až 30 fps, což běžné kamery také značně překonává… Navíc nízkou hloubku rozlišení já opravu nevidím jako nevýhodu, ale naopak posun k profi výsledku.
Publikováno v Blog, Grafika&Webdesign | 1 Komentář »
Čtvrtek, Listopad 26th, 2009
Wordpress je můj oblíbený redakční systém, ovšem… má jako všechno i své mouchy. Zrovna jsem narazil na jednu masařku – při použití vestavěného WYSIWYG editoru pro psaní příspěvků odstraní při uložení všechny prázdné řádky v příspěvku, takže prakticky nejde vůbec odřádkovat pomocí klávesy ENTER.
Prý je to vlastnost, a ne chyba. Ale vysvětlujte to lidem, kteří prostě potřebují odřádkovat! Také pokud se přepnete do html, ručně vložíte kód, tak po přepnutí zpět do WYSIWYG editoru a uložení dojde ke k vynechání nebo přidání tagů
Řešením tohoto problému je instalace a aktivace pluginu TinyMCE Advanced, který nahradí ten ve Wordpressu vestavěný.
Aby to fungovalo jak má, je ještě potřeba provést zaškrtnutí volby „Stop removing the <p> and <br /> tags when saving and show them in the HTML editor“ v konfiguraci tohoto pluginu.
Publikováno v Blog, Grafika&Webdesign, Hudba, Zákysník | Žádné komentáře »
Pátek, Říjen 30th, 2009
Někdy stačí náhoda a člověk objeví něco pěkného, co by mu jinak zůstalo navždy skryto. Při přepínání kanálů na kabelovce jsem uslyšel na jednom z hudebních programů nádhernou píseň. Píseň měla v sobě nepodbízivost, melodičnost a cit – tedy něco, co mi v dnešní hudbě obvykle schází. Se zájmem jsem si zapamatoval jméno zpěvačky: Maria Mena.
Maria Mena nemusí roztahovat nohy a dělat obscéní gesta do kamery, aby zaujala (jako např. „hvězdy“ Madonna či Lady Gaga). Každá z písní na jakémkoliv jejím albu má v sobě nápad, hloubku, melodii a je o něčem. Tedy ne stylem dva „hity“ a vata. (jako to dělají např. „hvězdy“ Madonna či Lady Gaga)
Maria pochází z hudební rodiny (jméno Maria dostala podle stejnojmenné hrdinky z West Side Story, její bratr se jmenuje Tony:-) ), rodiče se jí ale rozvedli a díky tomu v ní rozvířili vír emocí. Citlivá (a talentovaná) Maria si pak začala psát a zpívat své songy jako formu terapie pro tyto své pocity a frustrace (např. vyjadřující její bolest z rozvodu rodičů). Dobře udělali, její rodiče, že se rozvedli, mám konečně zase něco nového – pěkného k poslechu… Zní to možná cynicky, ale právě s prázdným břichem, v bolesti, utrpení a slzách vznikají ty nejhodnotnější umělecká díla na světě…
Maria Mena je občas k slyšení i v našem rádiích, se svým songem „All this time“. Videoklip k tomuto songu a několika dalším, (přepněte si na HQ kvalitu!), lze shlédnout na O2 stream music.
Publikováno v Blog, Grafika&Webdesign, Hudba | 1 Komentář »
Pondělí, Únor 16th, 2009
Pokud chcete, aby vaše webová aplikace vracela uložitelný soubor typu xml, je potřeba zadat na začátek php skriptu příkaz header v této podobě:
header(’Content-Disposition: attachment; filename=“nazevsouboru.xml“‘);
příkaz způsobí ve webovém prohlížeči vyvolání dialogu pro uložení souboru s nastaveným názvem (nikoliv url) a příponou xml
Obsah xml se vygeneruje podle potřeby pomocí vlastní třídy nebo DOM XML, o tom psát nebudu.
Je tu ale zádrhel – a to pamatovat na to, že použití znaku „&“ a „<“ je v xml nelegální. Lze to řešit pomocí znakových entit (místo „&“ psát „&“), ale to způsobuje další problémy, protože pokud je obsahem dat např. adresa url nebo javascript, tak pak je sice XML korektní, ale ani adresa, ani javascript už fungovat nebudou…
Místo toho je lepší používat značku pro oblast CDDATA – vše uvnitř CDDATA bude parserem, který bude xml zpracovávat ignorováno.
tedy např:
<eventUrl><! [CDDATA[http://www.stranka.cz/forum.php?forum=20&page=2]]></eventUrl>
Sekce CDDATA v XML dokumentu tedy začíná „<![CDDATA[" a končí "]]>“. V sekci CDDATA se nesmí vyskytovat jiná CDDATA a nesmí se v ní tedy vyskytovat „]]>“.
Publikováno v Blog, Grafika&Webdesign | 1 Komentář »
Pondělí, Prosinec 8th, 2008
S rozvojem služby youtube a tím, že obsahuje čím dál hodnotnější videa v čím dál lepší kvalitě (začíná se podporvat dokonce i HD) je dobré vědět jak se dají tato videa vypálit na DVD. Jednoduše a zadarmo.
- najděte si videa na youtube a zkopírujte si jejich www odkaz
- pomocí stránky http://www.stahnivideo.cz/ kam vložíte www odkaz videa si tato videa stáhněte uložte na disk jako soubory s příponou .flv
- Stáhněte a nainstalujte si skvělý opensource program DVD FLICK. V něm si vytvořte projekt, do kterého vložíte pomocí „add title“ stažené flv soubory. Projděte si nastavení projektu a zvolte jako výstup buď do iso obrazu nebo přímo vypálení na disk. Tlačítkem „Create DVD“ se vytvoří DVD.
Publikováno v Blog, Grafika&Webdesign, Software | 1 Komentář »
Středa, Září 17th, 2008
Některé DVD rekordéry neukládají video na DVD v klasickém formátu PAL 720×576, ale v nezvyklém rozlišení 704×576. Pokud takto uložené video z DVD chceme vypárat a upravit v počítači, je pravděpodobné, že jej střihové programy odmítnou importovat a bude posléze docházet k dalším problémům, například k tomu, že některé kodeky jej odmítnou přijmout jako vstupní formát.
Řešením je úprava formátu příslušného videa do rozměrů 720×576. K tomu se ideálně hodí program Virtualdub-MPEG2.
1. Buď otevřeme přímo VOB soubor z DVD (pokud je video kratší), nebo nejprve převedeme celé DVD do jednoho souboru na disku např. pomocí programu DVDFAB. Zde je potřeba dbát na co nejlepší kvalitu (jsme profíci), takže nezapomeňte nastavit pro zvolený kodek maximální datový tok (např. 5 Mbitů).
2. Ve Virtualdubu-mpeg2 přijdou ke slovu filtry. Protože DVD přehrávače prvních několik řádků obrazu ignorují, občas se v horní části obrazu vyskytne něco nepatřičného (skákající „kostičky“ apod..). To je pak vidět při přehrávání v počítači. To se vyfiltruje filtrem „fill“. Ten umí do videa vložit čtverec zadané barvy (použijeme černou #000000). Rozměry je třeba nastavit tak, aby překryly pouze např. první tři řádky videa.
3. Druhým důležitým filtrem je deinterlace (odstranění prokládání). Předejde se tím problémům, protože budeme měnit velikost videa a tím pádem liché i sudé řádky se nám „posunou“ někam kde původně nebyly.
4. Třetím filtrem je resize. Ovšem ten nastavíme chytře tak, aby nedošlo k deformaci rozměrů obrazu, ale pouze se přidaly chybějící sloupce. Takže zadáme new width:704 new height:576 (původní velikost), ale zaškrtneme volbu „Expand frame and letterbox image“ kde již zadáme rozměry 720×576. Jako fill color nastavíme opět černou #000000.
5. Po aplikaci těchto filtrů lze zvolit pro kompresi kodek PANASONIC DV CODEC, který převede video do AVI DV formátu pro další pohodlnou editaci.
Pozor, PANASONIC DV CODEC vyžaduje vstupní video v rozlišení 720×576 (proto nutno aplikovat minimálně filtr resize), jinak se rekomprese nepodaří.
Publikováno v Blog, Grafika&Webdesign, Software, Zákysník | Žádné komentáře »
Úterý, Červenec 1st, 2008
Comment by Trevor — September 18, 2007 on ajaxian.com:“It’s effing insane that we’re still doing this shit in 2007. IE’s COM dependency is going to be the death of us all.
Právě programuju jednu složitější webovou stránku – dynamickou prezentaci fotek s efekty crossfade, pan, zoom, dynamickým nahráváním fotek. Engine je v javascriptu. A ejhle! Problémem je, že Internet Explorer 7 a všechny jeho dřívější verze mají v sobě hrozně nepříjemnou a velice zásadní chybu – když se mu něco ve skriptech znelíbí, tak při přechodu na další stránku neuvolní alokovanou paměť a zabere novou. Po učité době, (záleží na tom kolik paměti skript spotřebuje a kolik máte paměti v počítači), proto IE zkolabuje. Pomůže pouze zavření celé aplikace Internet Explorer.
Vygoogloval jsem si, že je to známá chyba která je v jádru IE usazená už odedávna. Dříve ale nebyly webové stránky tak atraktivní a interaktivní jako dnes a proto se příliš neprojevovala. Dnes, v době webu 2.0, je to BIG problém. Stává se to velmi často – surfujete, a posléze se počítač hrozně zpomalí a nebo prohlížeč rovnou zatuhne – ve správci úloh pak zjistíte že prohlížeč sežral několik set megabajtů které nechce vyvrhnout zpět. Říká se tomu odborně „memory leak“.
Nevím, proč je pro tvůrce Internet Exploreru nemožné naprogramovat webový prohlížeč, který by při přechodu na další stránku prostě natvrdo uvolnil paměť kterou alokovala předchozí stránka, ale zjevně to zatím nedokázali. Současné i minulé verze Internet Exploreru jsou totiž pro Javascript pouze jakýmsi „hostitelským prostředím“ – ti dva spolu zdvořile komunikují pomocí DOM (Document Object Model for HTML), ale do kuchyně si vzájemně nevidí. Jinými slovy každý si spravuje nezávisle „svou“ paměť. Škoda. To, že lze udělat blbý Javascript který neuvolní alokovanou paměť je jasné, ale jádro IE by si to mělo „ohlídat“. Nezbývá než se vrátit k jednoduchým ale fungujícím webům, nebo si počkat a doufat ve spásu v podobě Internet Explorer 8…
Zkoušel jsem i Mozillu 3.0, ta sice paměť uvolňuje korektně, ale zato je pomalejší než Internet Explorer, a proto mne nezachrání…
Publikováno v Blog, Grafika&Webdesign, Vývoj software, Zákysník | Žádné komentáře »
Pondělí, Červen 23rd, 2008
Webové stránky udělané celé ve flashi moc nemusím. Jejich autoři totiž rádi volí mrňavé písmo, nepříjemné kombinace barev, naprosto nestardardní a nelogickou navigaci, jen aby ukázali „jak moc jsou kreativní“. Většinou se minutu snažím na takovém webu minutu kamsi náhodně klikat, kde tuším odkazy, koukám jak něco vyjíždí nebo odjíždí a po minutě, kdy se pořád nedostanu k tomu co hledám, nevydržím a z takových webů odcházím…
Flash je zkrátka technologie, kterou je potřeba využívat s velkým citem, a jen tam, kde se to hodí. Nehodí se pro „seriózní“ velké weby informační, obchodní či zpravodajské, ale hodí se báječně pro různé hříčky – weby filmů, počítačových her… Ano, lze najít krásné weby udělané celé ve flashi. Jako tenhle web německé skupiny ALPHAVILLE. Je to nádherná „ruční“ práce. Nejvíc mne dostalo, v sekci ukázek (KLANGWELT), když zastavím a pustím přehrávání, jak kotouček „doběhne“ a při znovurozeběhnutí se z něho zapráší… Web vůbec neskrývá, že Alphaville už jsou víceméně hudební historií… Ovšem dělá to velmi stylově. V dnešní době, kdy se weby vyrábějí za pár minut úpravou „předvařených“ CMS, je na tohle radost pohledět…
Publikováno v Blog, Grafika&Webdesign | Žádné komentáře »
