neděle 26. ledna 2014

Moje poznatky o CSS #1

Úvodní díl mini-série z mých poznatků o CSS. Během této série se podíváme nejen na názvy tříd, psaní cross-browser CSS, testování, responzivní design a i nějaký ten výhled na budoucnost. Snad se bude líbit.



Díl 1: Pravidla pro Názvy tříd v CSS

  • Sjednoťte svůj jazyk! Je vaše svobodná volba pokud se rozhodnete používat např. češtinu. Když už ji ale jednou začnete používat, zůstaňte u toho po dobu celého projektu.
  • Vyvarujte se používání specifických názvů tříd - červená, modrá, Šedá, světlá, tmavá, vlevo, vpravo. Stačí například mírný zásah do grafiky webu a vaše třída .červená se bude muset v celém projektu změnit na .modrá. 
  • Pište malým písmem.... prosím
  • Na dlouhé názvy camelCase nebo pomlčky? Wordpress Codex doporučuje pomlčky. Osobně je mi to fuk v případě, že je tento styl opět jednotný!
  • Všechny pravidla porušte. Pokud už 5 minut přemýšlíte nad správným názvem (a nepracujete na projektu, jehož kód uvidí statisíce programátorů) je na čase to vzdát a udělat to tak, aby to fungovalo a práce byla odvedená včas. Slibuji, že časem to budete dělat automaticky.

Pojďme si rozebrat co je špatně na následujícím:

.button .big .red .right
První třída .button je obecná: už název nám napovídá, že se bude jednat o nějaké tlačítko. Zde je vše v pořádku, protože název třídy nepopisuje nic o vzhledu samotného tlačítka.

Druhá třída .big: autor má na webu zřejmě více velikostí tlačítek a chtěl aby toto konkrétní tlačítko bylo velké. Ale jak velké? Co když by pak chtěl jinde na webu použít tlačítko ještě větší? Napsal by .bigger?

Třetí třída .red: Tlačítko asi bude červené, že? A barva textu? Barva rámečku?

Čtvrtá třída .right: tlačítko jsme zarovnali doprava. Možná i s textem. Při redesignu webu jsem se rozhodl, že ho chci zarovnaný na střed. Musím projít všechny html šablony a tuto třídu smazat a nechte se podat... nahradit třídou .center?

A jak to mělo být správně?

.button .highlight .default-style

Vysvětlení:

Třída .highlight: Toto tlačítko je zřejmě důležité a je třeba ho v kontextu webu vyzdvihnout, v našem případě ho teda zvětšit.

Třída .default-style: Tlačítko má mít zřejmě stejné provedení jako výchozí styl projektu. Čili červené tlačítko.

Třída .right zde nechybí, protože pozici samotného tlačítka musí určovat kontext dokumentu. V našem případě například selektor "article .highlight".

No vidíte, jde to, že?

V titulku jste si mohli všimnout označení pro první část článku. Ano, znamená to, že budou pokračovat další podobné články, které jsou inspirované mou praxí v oboru. Nicméně stále platí, že čím jsem starší, tím méně času mám na tento blog, ale slibuji, že udělám všechno možné a sérii dopsal v době, kdy to ještě stále bude aktuální téma :)

Děkuji za váš čas u tohoto mikro-článku. Snad jsem Vás přivedl na nový úhel nahlížení na CSS třídy.

úterý 13. srpna 2013

OSX jako herní platforma?

Jestli mi chcete tvrdit, že se na nakousnutém jablíčku nedá hrát žádná moderní hra, asi byste si měli znovu překontrolovat fakta a zvážit následující seznam, který je dostupný přes AppStore, Steam a jiné digitální distribuce:

  • Half-Life 2 / Counter-Strike: Source / Portal / Team Fortress / Left 4 Dead
  • Call Of Duty: Modern Warfare / Black Ops 2
  • Batman: Arkham City / Arkham Asylum
  • GTA: San Andreas / Vice City
  • Lego Batman / Harry Potter / Star Wars / Pirates Of Carribean /....
  • BorderLands 1 / 2
  • Bioshock 1 / 2 / Infinite
  • Diablo 3
  • Star Craft 2
  • World of Warcaft
  • Prince of Persia
  • Max Payne 3
  • Duke Nukem: Forever
  • Rage
  • Mafia 2
  • Doom 3
  • Quake 4
  • Driver: San Francisco
  • Colin McRae Dirt 2
  • RaceDriver Grid
  • FlatOut 2
  • F1 2012
  • Deus Ex: Human Revolution
  • Tom Clancys Splinter Cell: Conviction
  • X-Com: Enemy Unknown
  • Civilization IV / V
  • Assasins Creed 2
  • Amnesia: Dark Descent
  • Limbo
  • Trine
  • Spore
  • Tomb Raider: Underworld
  • R.U.S.E.
Jak vidíte, jsou to samá zvučná jména a nové tituly přicházejí každým dnem.
Dalších x-desítek her je možno spustit pomoci Wine-like emulátoru: Např. Trackmania Nations a podobné hry využívající DirectX 9.

A kdyby váš oblíbený titul přece jen na OSX vůbec nevyšel, vždy je možné si na Mac nainstalovat přes BootCamp Windows a mít tak přístup naprosto ke všem hrám pro PC platformu.

Přeji hodně zábavy


středa 7. srpna 2013

Jak downgradovat z iOS7 na iOS6

Nejrychlejší cesta je prepnout iPhone do UDF modu a provest reset do továrního nastavení. Poté případně obnovení ze zálohy. To provedete následovně:
  1. iPhone vypněte
  2. Připojte datový kabel s počítačem (kde máte spuštěný iTunes)
  3. V momentě připojení kabelu držte tlačítko pro vypnutí (na horní straně) a zároveň tlačítko Home (kulaté zepředu) asi 10sekund
  4. Pusťte tlačítko pro vypnutí a nadále držte jen tlačítko Home
  5. Obrazovka by měla zůstat černá
  6. iTunes by měl hlásit, že je iPhone připraven k obnovení.
  7. Po potvrzení se iPhone automaticky začně obnovovat na poslední stabilní verzi iOS pro váš iPhone. (v momentě vydání tohoto článku tj. 6.1.3)

Více na videu pro iPhone 4S (ostatní jsou podobné)

English version of How to downgrade iOS7 to iOS6

Fastest way to do this is to run your iPhone in UDF mode and than reset to factory default using iTunes. Than possibly upload your backup to phone.

To do this, follow this steps:
  1. Turn off iPhone
  2. Plug your cable to Mac (or PC) running iTunes and to your iPhone.
  3. While you connect your cable hold down the Power button (on the top) and Home button (in the front) of your iPhone for about 10seconds
  4. Release the Power button while still holding the Home button - for about 5 seconds
  5. If you done this right the screen should stay black
  6. iTunes should inform you about DFU mode
  7. After that you shloud be able to recover your iPhone to the lastest stable iOS version. (6.1.3 at the time of releasing this article)


čtvrtek 2. srpna 2012

"Must Have" aplikace pro Mac OSX

Je to již rok co jsem uživatelem počítače Apple - Macbook Pro (v pořadí již druhého) a za tuto dobu jsem objevil software, bez kterého bych si každodenní práci na tomto stroji nedokázal představit. Smyslem tohoto článku je tedy podělit se s vámi o tyto tipy na aplikace a případně si od vás nechat poradit, které aplikace jsou ještě lepší. Pro lepší přehlednost jsem je seřadil do kategorií.

Utility

Hyper Dock

Utilita upravující práci s okny a jejich chování. Otevřeli jste několik oken jedné aplikace a chcete se dostat pouze na jedno z nich? Hyper dock vám podobně jako ve Windows zobrazí náhled daného okna po najetí na ikonu aplikace v hlavním docku. Taktéž lze okna nyní připínat k levému a pravému okraji tak, aby se okno roztáhlo pouze přes polovinu obrazovky.

Little Snitch

Malý ale šikovný firewall pro Mac OSX. Díky tomuto programu zjistíte jací démoni běží v pozadí a komunikují s okolním světem. Sám jsem byl překvapen jak velké množství komunikace na OSX probíhá a jistým procesům jsem tak zatrhl činnost.

Zz - No Sleep Helper

Chcete si dát na Macu něco stáhnout a zároveň mít zavřené víko displaye? Bez této utility nebo připojeného ext. monitoru se vám to asi nepovede. Jedna z utilit, která doplňuje funkčnost OSX, která dle mého názoru měla být přímo součástí systému.

Lightshot

Malá šikovná utilita na tvoření screenshotů. Aplikace grab, která je součástí systému podporuje export "vyfoceného" screenu pouze do formátu TIFF. Lightshot zvládne PNG a umí obrázek okamžitě nasdílet na sociálních sítích.

Tuxera NTFS

Z mé strany možná přežitek, ale mám externí disk, který je naformátovaný jako NTFS, na který Mac OSX neumí ve výchozím stavu zapisovat. S těmito "ovladači" je zápis a čtení z disku jedna radost. Pokud přecházíte z Windows na Mac jako já, je toto zřejmě must have aplikace.

Stuffit Expander

Jak se dostat do .rarů a jiných komprimovaných souborů? Stuffit Expander je velice primitivní nástroj, který svou práci však dělá velice dobře. Dvojitým kliknutím na archív se v pozadí rozbalí do složky, stejně jako to děla výchozí archivační utilita Mac OSX, ovšem ta si neporadí s více exotickými archívy. Od toho tu je Stuffit Expander.

Přehrávače

VLC

Tento multiplatformí přehrávač prostě používám na všech systémech. Jelikož využívá vlastních knihoven, přehraje ve všech prostředích téměř všechny formáty médií. Nabízí mi možnost rychle přetranscodovat jedno medium do druhého (viz. jak vytáhnout zvuk z youtube videa pomocí vlc ). Pokud se tento program naučíte používat, nikdy už nebudete řešit hledání kodeků či opravu poškozených videosouborů.

Správci souborů, FTP, Torrent

MuCommander

Tohoto správce souborů používám z jednoho prostého důvodu, zobrazuje obsah disku tak jak na něm fyzicky soubory skutečně jsou uloženy. Dostat se přes Finder do jistých systémových složek je noční můra. V tomto klobouk dolů před Windows, kde pár kliknutím můžete zapnout "advanced mode" a vidět vše co je uloženo na disku. Funkcemi se sice nevyrovná TotalCommanderu, ale po tomto programu ani nikdo nechce.

FileZilla

Obecně je na Mac OSX problém sehnat slušný software pro správu souborů a práci s FTP. FilleZilla je další multiplatformní aplikací, kterou jsem používal skrz všechny systémy, ale bohužel má svoje nepochopitelné chybičky a mouchy, které jsem na Windows řešil jinými programy. Na Mac OSX bohužel moc na výběr nemám, takže se s funkčností této aplikace musím prozatím smířit. 

Transmission

Hledáte-li alternativu pro utorrent z Widnows, Transmission je rozumná volba. Nabízí vše nutné co ke stažení torrentů potřebujete a není zbytečně komplikovaný či robustní. Opět jedna z multiplatformních opensource aplikací, bez kterých to prostě nejde.

Vzdálená správa

Airfoil server & speakers

Čím jsem starší, tím víc pohodlí vyžaduji. Tato utilitka pro vzdálenou správu vám dovolí veškerý zvuk vydávaný vašim počítačem přenášet bezdrátově do druhého zařízení, ke kterému máte třeba připojené lepší reproduktory, než ty integrované v notebooku. Airfoil je sice placená aplikace a zvuk má cca 2 sekundové zpoždění, ale pokud máte druhý počítač stejně pořád zapnutý nebo nechcete kupovat originální Apple AirPlay, může vám tato aplikace slušně posloužit.

VNC server & viewer 

No a abych se dostal na tzv. vzdálenou plochu všech mých počítačů, začal jsem používat VNC viewer, který se mi za ta léta ověřil jako jedna z nejlepších alternativ. Pokud máte doma rychlou síť můžete s tímto programem s minimálním zpožděním dokonce sledovat i video v reálném čase.

Programování

Text Wrangler

Toto je čistě záležitost Mac OSX. Pokud hledáte jednoduchý poznámkový blok se zvýrazňováním syntaxe, číslováním řádků, rychlým startem a aspoň trošku rozšířeným vyhledáváním v textu, je Text Wrangler dobrá volba. Na takové to domácí programování nebo kódování je to dostačující. 

Netbeans

O tomto IDE netřeba zdlouhavě mluvit. Opět multiplatformní opensource aplikace, která nastupuje tam, kde Text Wrangler už prostě nestačí.


Aktualizace 12.7.2013

LightShot screenshot

Už podle názvu se jedná o aplikaci, která vám dovolí "vyfotit" obrazovku a dále ji uložit, zkopírovat do paměti, poslat emailem atd. Důvod proč ji zde zveřejnuji je ten, že výchozí utilita v OSX, která toto umí ukládá soubory do .TIFFu. Lightshot naproti tomu do formátu PNG.

Cinch

V nové verzi OSX přestala fungovat výše zmíněná utilita HyperDock. Cinch neumí sice vše co HyperDock, ale to co je pro mě nejdůležitější - připínání oken ke stranám - umí perfektně a s minimálními nároky na paměť.

SoundFlowerBed

Zvukový subsystém, který vám dovolí přesměrovat zvuk odkudkoli kamkoli. Zejména vhodné, pokud máte externí multikanálovou zvukovou kartu.


Pozn. možná se divíte, že zde nezmiňuji žádného IM klienta. Důvodem je ten, že používám webovou službu imo.im nebo rozhraní facebooku. To stejné se dá říct o Emailovém klientu a diáři (kalendáři).

Děkuji za pozornost a budu rád, když se v komentářích podělíte o vaše aplikace, bez kterých si nedokážete představit vaší každodenní práci

úterý 24. dubna 2012

Quick Tip: Názvy tříd v CSS a AdBlocker

Při nedávnem prohlížení mých starých projektů jsem si všiml, že se mi nezobrazují některé elementy na stránce. Po chvilce pátrání jsem zjistil, že má toto na svědomí nově nainstalovaný AdBlocker. Pro ty co neví: AdBlocker je hojně užívané rozšíření internetového prohlížeče, jehož úkolem je zablokování (skrývání) reklamních bloků na stránkách.

Jak spolu ale souvisí názvy tříd a AdBlocker?
Kromě jiných technik blokování reklamy, využívá Adblocker svou vlastní databázi CSS tříd, které používají nejznámější poskytovatelé reklamních bannerů na internetu. Takže pokud se taková třída na vašich stránkách objeví, je více než možné, že se u klienta, který má AdBlocker nainstalovaný daný prvek stránky prostě nezobrazí.

A které to jsou? 
Toto se samozřejmě mění od verze k verzi, ale většina má společné rysy. V názvu třídy se vyskytuje slovo "AD" či "Advertisement".

Moje rada tedy zní
Snažte se vyhnout používání výše zmíněných slov v názvech vašich tříd.

středa 9. listopadu 2011

TIP: Jak na Mootools & jQuery zároveň v jednom projektu

Ať už jste donuceni z jakéhokoli důvodu použít obě výše zmíněné Javascriptové knihovny na jednom projektu, možná se Vám bude hodit následující tip. Předem je třeba říct, že tyto knihovny skutečně mohou fungovat zároveň a nebude Vás to stát mnoho úsilí.

Jak jistě víte, jQuery i Mootools používají znak dolaru ($) jako zkratku pro volání funkce jenž je jádrem obou knihoven. Toto chování lze však u jQuery vypnout pomocí jednoduchého příkazu:

jQuery.noConflict();

Na internetu je mnoho diskuzí kde doporučují následující postup:

<script type="text/javascript" src="jquery-1.3.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script type="text/javascript" src="moo1.2.js"></script>

Všimněte si, že se zde prvně načítá jQuery, poté se vypne asociace k dolaru a nakonec se načítá Mootools. Toto řešení je ovšem docela nevzhledné a pokud používáte automatické načítání skriptů, je zbytečně obtížně realizovatelné.

Po pár hodinovém mlácení hlavy do stolu jsem nedávno na jednom projektu přišel k závěru, že to jde udělat líp, aniž by se knihovny praly. Trik je v tom, že musíte zajistit, aby se Mootools načetlo před jQuery. Potom už můžete kdekoli z kódu zavolat magickou metodu noConflict(). Pokud by se prvně načetlo jQuery, Mootools by nebylo funkční a vy byste si omlátili hlavu o stůl stejně jako já, než byste přišli na to, čím je způsobena nefunkčnost Vašeho skriptu.

Ve finální podobě tedy:
//head
<script type="text/javascript" src="moo1.2.js"></script>
<script type="text/javascript" src="jquery-1.3.js"></script>

//content'n'stuff

<script type="text/javascript">
    //kdekoli v kódu
    jQuery.noConflict();
</script>


Doufám, že tento tip Vám ušetří čas, peníze a modřiny.

sobota 1. října 2011

GAIKAI - 3D hry v internetovém prohlížeči!

Co si budeme namlouvat, za vším dnes stojí peníze. A tak když velké společnosti viděli úspěch služby OnLive (psal jsem: OnLive - Hrajte nejnovější hry na netbooku!), přišli s velice "originálním" nápadem rozjet vlastní portál nabízející téměř to samé. Tedy možnost hrát jakoukoli hru i z nevýkonného počítače. Hlavním rozdílem a i lákadlem je, že si do svého počítače nemusíte instalovat žádného klienta. Gaikai, jak službu nazvali, se totiž umí spustit přímo ve vašem internetovém prohlížeči. Pro nás to znamená jediné: konkurenční boje a v jejich důsledku snad i lepší služby.

Gaikai je zatím ve stádiu testování, ale velice rychle se rozjede v plnohodnotnou službu. Již nyní můžete vyzkoušet jak takové hraní bude vypadat a jestli k tomuto máte dostatečně rychlý internet.

Abych nezdržoval, dema několika málo her si můžete zdarma vyzkoušet zde: http://www.gaikai.com/

Aby těch cloudových služeb nebylo málo, plánuje se spuštění podobného systému OTOY. Ten by měl být více zaměřený na aplikace, kde se hodí mít obrovský výpočetní výkon, jako třeba při práci s videem. To jen potvrzuje mé dřívější domněnky o konci éry klasických desktopových systémů a jejich aplikací.

neděle 25. září 2011

Airfoil - Streamujte zvuk ze svého Macu či PC bezdrátově

Chcete se zbavit všech otravných drátů a plně využít potenciál domácí bezdrátové sítě? Chcete přehrávat zvuk ze svého laptopu na jiném počítači, ke kterému máte připojené reproduktory? Přináším Vám tip jak toto realizovat za pár stovek korun. Aplikace Airfoil udělá veškerou těžkou práci za na pár kliknutí.

Jednoduše nainstalujte Airfoil na jednom z počítačů. A na druhém počítači nainstalujte a spusťte Airfoil speaker. Pokud jsou oba počítače ve stejné síti, okamžitě se zobrazí v seznamu dostupných zařízení. Pak už jen stačí vybrat aplikaci, nebo zvukové zařízení, jehož zvuk chceme přehrávat, klepnout na tlačítko connect a máte hotovo. Jednodušeji už to ani nejde.

Předem upozorňuji, že je toto vhodné spíše pro přehrávání zvuku samotného, než nějakého videa či filmu, protože má aplikace docela velký buffer (jenž nejde nastavit), takže pocítíte přibližně dvou sekundové zpoždění zvuku. Při přehrávání videa (např. přes program VLC) se doporučuje nastavit zpoždění obrazu na hodnotu 2.7s , ale nejlepší bude, když si to sami vyzkoušíte. 

Oficiální stránka: rogueamoeba.com/store/

Pokud by někdo nechtěl investovat do samotné aplikace Airfoil, nebo mu natolik vadilo zpoždění zvuku, může zkusit rozchodit PulseAudio server (Měl by umět fungovat na všech platformách) na obou stranách a nastudovat si materiály k tomu, jak jej správně nastavit. (pak by mělo být možné snížit tento lag na pár stovek milisekund) Pokud se toto někomu povede dřív než mě, budu velice rád, když se s námi podělíte o detailní postup.