Spravte si vlastné tričko

napísal , 13 Mar 2011

Trieko

Ako lepšie povedať svetu čo si myslíte, ako keď si to budete hrdo niesť na hrudi? Pokiaľ radi kreslíte, môžete takto zaujímavým spôsobom využiť svoje obrázky.

Vytoriť si vlastné tričko je napodiv relatívne jednoduché a nenákladné. Keďže existuje kopec spôsobov ako na to a každý má svoje špecifiká, rozhodol som sa spraviť menší prehľad a popísať moje skúsenosti s každým z nich.

First things first

Ako to vlastne celé prebieha?
Buď si zvolíte jednoduchú cestu, skúsite nejaký generátor tričiek a poštou vám prijde mačka vo vreci™tričko, ktoré ste nechali na pospas danej firme alebo druhá možnosť, ak chcete mať všetko podľa seba:

  • zoženiete/nakreslíte obrázok s vysokým rozlíšením (aspoň 150 dpi, ideálne 300 alebo vektory)
  • zanesiete ho do firmy, ktorá robí potlač, vyberiete si typ trička, spôsob, farby, atď.
  • počkáte pár dní
  • máte tričká

Bude vás to stáť od 10 až po 30€ aj s tričkom, pričom cena sa skôr pohybuje pri tej dolnej hranici a niektoré spôsoby potlače sú závislé od množstva. Teraz k jednotlivým metódam, ich výhodám a vlastnostiam.

7 dôvodov prečo je Illustrator na prd

napísal , 15 Feb 2011

No dobre, Illustrator určite nie je úplne "na prd", veď sa v ňom dajú robiť pekné obrázočky. :) Existuje však kopec nedotiahnutých detailov, kvôli ktorým sa jeho používanie miestami mení na zápas s vašou trpezlivosťou.

Najzaujímavejším na tom všetkom je, že Photoshop má každú vec, ktorú teraz spomeniem, spravenú úplne v poriadku. Pozoruhodné je to z dôvodu, že oba programy sú v Adobe vyvíjané súbežne už 20 rokov, do značnej miery kopírujú svoj interface a filozofia ovládania je celkovo veľmi podobná.

S každým jedným na nervy lezúcim detailom som sa stretol nespočetne veľakrát. Po prvých pár desiatkach som zažíval rôzne pocity typu FFFFFFFFUUUUUUUUU, po stovke som si chyby začal zapisovať a teraz ich ukážem celému svetu:D, aby ste vedeli čomu sa vyhnúť pri návrhu UI aplikácií, ak chcete, aby vaši používatelia neprišli o veškeré duševné zdravie.

1. Zoomovanie s kolieskom iba s ALTom

Illustrator zooming and mouse wheel

Keď pohýbete v Illustrátore s kolieskom myši, plocha sa posunie hore/dole o zodpovedajúci počet pixelov. NAČO BY TOTO KOMU KEDY BOLO?? Kto by sa už len chcel posúvať po pixeloch, keď stačí stlačit medzerník a ťahať? Seriously...

Horšie je, že kým vo Photoshope môžete zoomovanie s kolieskom zapnúť, v Illustratore sa autori, ako vidíte na obrázku, na to akosi vykašlali. Zoomovať sa dá našťastie podržaním ALTu, ale z toho vyplýva jedna veľmi nepekná vlastnosť (okrem toho, že musíte zbytočne stláčať ALT:) :

2. Po zoomovaní je 50% šanca, že nebudú fungovať skratky

Illustrator keyboard shorcuts won't work after zooming

Keďže ste na zoomovanie potrebovali ALT, podľa toho, či ste zoomovali nepárny alebo párny počet razov, zostane/nezostane označené horné menu. Ak je označené, nefungujú, pochopiteľne, klávesové skratky. Čiže keď si po zoomovaní chcete vybrať napríklad základný select tool (skratka v), rozbalí sa namiesto toho menu View.

Toto je podľa mňa zďaleka najhoršia vec na Illustratore a nechápem ako je možné, že je prítomná aj v dnešnej 12-tej verzii. Dalo by sa argumentovať tým, že môžem používať aj zoom tool (lupu), ale neviem prečo by som si mal komplikovať život používaním ďalšieho nástroja keď mám KOLIESKO. Načo mi inak bude? Aby som si s ním točil z dlhej chvíle?

Achievement unlocked!

napísal , 25 Jan 2011

Awww, chudák náš úbohy blog, nejak sme ho v poslednej dobe ignorovali. Za to všetko môže evil škola! (a zajtra.sk ;) But we're back in business a povieme si ako v PHP spraviť nejakú riadnu sprostosť - napríklad achievement generator™.

Myšlienka za ním bola asi taká, že pokiaľ sa niekto zvykne velice chváliť nepodstatnými blbosťami a lezie s tým na nervy, pošlete mu takýto obrázok a možno to bude mať zaujímavý efekt. Pokiaľ ste za posledných pár rokov hrali nejakú novšiu hru, určite vašej pozornosti neuniklo, že vás zasypávajú kadejakými trofejami a achievementami pri každej príležitosti. (Niekoho to akože aj reálne teší? Podľa mňa je väčšina vývojárov dosť slabých psychológov, súdiac podľa toho aký majú achievementy na mňa efekt. :p)

Demo - brm achievement generator™!

Čo sa týka programovania, budeme chciet písať text na obrázok pomocou knižnice GD a odosielať ho ako PNG, plus využijeme nejaký ten URL shortener, aby vaša "obeť" nevidela čo jej to posielate. Všetko samozrejme pôjde cez AJAX.

Odoslanie formuláru cez Shift + Enter a jQuery

napísal , 30 Dec 2010

Vyskúšajte si ako to funguje.

$(function()
{
	var form = $('#form'); // zmenit podla potreby
	
	form.keydown(function(e)
	{
		if (e.keyCode == 16) form.data('shiftPressed', true);
	}).keyup(function(e)
	{
		if (e.keyCode == 16) form.data('shiftPressed', false);
	}).keypress(function(e)
	{
		if (e.keyCode == 13 && form.data('shiftPressed'))
		{	
			form.submit();
			return false; // OH NO, STOP THE ENTERS!!
		}	
	});
})

Stačí skopírovať uvedený kód a podľa potreby zmeniť riadok var form = $('#form'); Tento predpokladá formulár s id="form".

Funkcionalita sa skladá z troch častí - čo sa stane pri keydown, keyup a keypress. Kto klikne na "povedz mi o tom viac", tomu o tom bude povedané viac :)

System Shock 2 - My nightmare before xmas

napísal , 23 Dec 2010

System Shock 2
System Shock 2 (1999)
by Irrational Games & Looking Glass Studios

Keby sa ma niekto spýta aký je môj jeden najobľúbenejší film, album alebo kniha, nevedel by som mu ani za boha odpovedať. :) Pri hrách by mi však bez váhania prišiel na rozum jeden názov.

Nie že by som hral málo hier a preto si bol taký istý, skôr naopak, keby zrátam všetok čas strávený hraním, vyšplhal by sa zrejme na znepokojivo vysoké číslo. No a napriek tomu je SS2 pre mňa jasná voľba.. čím to je?

System Shock 2 je niečo, čo by som reálne označil za kultovú hru - nie je pre každého, ale komu sa páči, je veľká šanca, že bude z nej celý bez seba. :) Za jeho hlavnú zložku považujem atmosféru magnitúdy, s akou som sa doteraz nikde nestretol a ktorá tvorí spolu s unikátnym príbehom a hrateľnosťou neskutočne silný celok. Presnejšie ide o kombináciu hororovej FPS + RPG zasadenú do cyberpunkového sveta výskumnej vesmírnej lode Von Braun, na ktorú ste boli poslaní ako vojak/hacker, čo má pomôcť vyriešiť vzniknutú situáciu po tom, ako posádka vyslala núdzový signál.

Slovo hororová myslím úplne vážne a narozdiel od všetkých iných wannabe strašidelných hier je System Shock 2 jediná, kvôli ktorej som reálne nemohol spávať. Pamätám si ako som si vždy v noci hovoril, že to už na druhý deň určite nezapnem a ráno som hneď utekal k PC. :)

jQuery: 3 mini triky

napísal , 16 Dec 2010

1) zradné jQuery.submit()

.submit() je metóda, ktorá sa zavolá pri pokuse o odoslanie formuláru.

$('form').submit(function() 
{ 
	var data = $(this).serialize();
});

V data teraz máme uložený obsah formuláru, ktorý by sme mohli poslať AJAXom ďalej na spracovanie. Pretty sweet. Zrada je v tom, že submit nefunguje, ak máte vo forme element s id="submit" alebo name="submit". Takže pozor na to.

2) vytvorenie nového elementu

Chcem pridať nový div na koniec stránky. $('<div>bla</div>').appendTo('body'); je jedna možnosť. V jQuery na vytvorenie prázdneho elementu však stačí $('<div/>'). Ako druhý parameter môžem poslať object s atribútmi pre tento div. Like this:

$('<div/>', { 
	text: 'bla',
	css: {
		color: 'red'
	},
	click: function() {
		alert('gule');
	}
}).appendTo('body');

Oh btw, toto funguje od verzie 1.4. V starších sa na to ide takto: $('<div/>').text('bla').css(...)... Ale ak fungujete na staršom jQuery, tak prestaňte ;)

3) linky v novom okne pre validných

Môj pohľad na html validáciu už poznáte. Každopádne, ak chcete otvárať linky v novom okne bez toho, aby validátor protestoval, máte problém. V závislosti od doctype.

Za predpokladu, že všetkým linkom pridáte class="ext", pomôže nasledovné:

$('a.ext').attr('target', '_blank'); 

Samozrejme toto nie je jQuery špecifická finta. Point is: vyber elementy na základe class a pridaj im target="_blank".


Ďalšie jQuery tipy a (video)tutoriály nájdete v sekcii.. well.. jQuery.

PHP html/plaintext email

napísal , 12 Dec 2010

Čo to o posielaní mailov sme si povedali v našom článku Informácie o prehliadači v kontaktnom formulári (je to fakt užitočná vec, go check it out). Teraz prišiel čas podeliť sa o php funkciu, ktorá vie posielať html aj plaintext emaily. Naraz. Behold:

/**
 * odosiela multipart spravy - html aj plaintext pre hnilych klientov
 * linky pri plaintext mailoch su zamenene za samotne "href" hodnoty
 * html tagy a uderene charaktery su pri nich odstranene a "<br>" je zmenene na "\n"
 */
function send_mail($from, $subject, $body, $plaintext = NULL, $to = NULL)
{
	// ak neni zadany to, zvoli sa defaultny:
	if (!$to) $to = 'default@mail.sk';

	// zostavi html mail:
	$html  = "<html>\n";
	$html .= "<body style=\"font-family: Verdana, Geneva, sans-serif; font-size: 14px; color:#333;\">\n";
	$html .= $body;
	$html .= "</body>\n";
	$html .= "</html>\n";

	// ak neni zadany plaintext, zostavi sa z povodneho html mailu:
	if ( ! $plaintext)
	{
		// odstrani "\n" a potom nahradi "<br>" za "\n" pre plaintext:
		$body = preg_replace('/<br\\s*?\/??>/i', "\n", str_replace("\n", '', $body));

		// odstrani tagy (okrem <a>)
		$plaintext = strip_tags($body, '<a>');

		// matchne "<a>" tag a jeho "href" hodnotu:
		$pattern = '%<a\s[^>]*href=["/\'](.*)["/\']\s*>(?:.*)</a>%im';
		preg_match_all($pattern, $plaintext, $matches, PREG_SET_ORDER);

		// vymeni nazov linku za "href" hodnotu a na koniec prida medzeru 
		// (vraj to pomaha)
		foreach ($matches as $link)
		{
			$plaintext = str_replace($link[0], $link[1] . ' ', $plaintext);
		}

		// odstrani interpunkciu a prehodi html entities na text
		$plaintext = remove_accents(html_entity_decode($plaintext));

		// prida newline na konci plaintext mailu (bez toho to blbne):
		$plaintext .= "\n";
	}

	# -=-=-=- MIME BOUNDARY
	$mime_boundary = "----AWESOME----" . md5(time());

	# -=-=-=- MAIL HEADERS
	$headers  = "From: $from\n";
	$headers .= "Reply-To: $from\n";
	$headers .= "Return-Path: <default@mail.sk>\n";
	$headers .= "MIME-Version: 1.0\n";
	$headers .= "Content-Type: multipart/alternative; charset=UTF-8; boundary=\"$mime_boundary\"\n";

	# -=-=-=- TEXT EMAIL PART
	$message  = "--$mime_boundary\n";
	$message .= "Content-Type: text/plain; charset=UTF-8\n";
	$message .= "Content-Transfer-Encoding: 8bit\n\n";
	$message .= $plaintext;

	# -=-=-=- HTML EMAIL PART
	$message .= "--$mime_boundary\n";
	$message .= "Content-Type: text/html; charset=UTF-8\n";
	$message .= "Content-Transfer-Encoding: 8bit\n\n";
	$message .= $html;

	# -=-=-=- FINAL BOUNDARY
	$message .= "--$mime_boundary--\n\n";

	# -=-=-=- SEND MAIL
	$subject="=?UTF-8?B?".base64_encode($subject)."?=\n";
	$mail_sent = @mail( $to, $subject, $message, $headers );	
	
	return $mail_sent;
}

Kopírujte, prípadne si stiahnite súbor priamo: awesome_email.zip

Prečo? Nuž, HTML je v emailových klientoch podporované extrémne biedne. Niektoré ho nepodporujú vôbec, iné dokážu správu zhovadiť tak, že sa stane pre mnohých nepoužiteľná. Prudký geek z takého mailu linky vyťažiť dokáže, obyčajný Joe sa tým zaoberať nebude a váš business je ohrozený :P Niekedy to dokonca nemusí byť možné. Ak máte link v tvare <a href="http://awesome.bla/gule">haha link</a> a ono vám z toho náhodou spraví haha link? Useless. Táto funkcia pre plaintext časť emailu vytiahne adresu a zobrazí tú.

Pre väčšiu kompatibilitu odstráni aj interpunkciu a prehodí html entities na text. Keď už osekávame, tak poriadne ;) Na interpunkciu používa funkciu remove_accents, ktorú sme spomínali v článku Generovanie pekných URL. Je súčasťou toho .zipu tam hore.

$from mail, z ktorého bude správa poslaná (od koho)
$subject predmet mailu
$body text mailu
$plaintext ak chceme, môžeme plaintext pridať pridať sami, inak sa vygeneruje z $body
$to mail, na ktorý bude správa poslaná (komu)

Ak sa divíte, prečo sa mail "komu" zadáva ako posledný atribút... častejšie(?) budete chcieť, aby maily boli posielané vám. Prípadne klientom, ak robíte stránku pre klienta. Cez kontaktný formulár napríklad. A vtedy stačí napísať vašu adresu priamo do tela funkcie (namiesto default@mail.sk) a potom používať len prvé 3 atribúty.

Like this: send_mail($_POST['email'], 'Ahoj', 'Smrdí ti.');

Ak to nevyhovuje, nič vám nebráni prepísať si funkciu podľa seba :) Vráti TRUE ak sa mail podarilo odoslať, inak FALSE. Takže tak.

Enjoy. :)