webrebel zaklady programovania a oop objektovo orientované programovanie

Dojmy z TEDx Prague

napísal , 22 Nov 2010

TEDxPrague

TED je pozoruhodná konferencia "o nápadoch", ktorá sa každoročne koná v Kalifornii. Heslo TEDu "Ideas worth spreading" je asi najvýstižnejšou definíciou, pretože témy prednášok sú tak rôznorodé ako málokde. Celá konferencia je skutočne o nápadoch hodných šírenia, ktoré môžu zmeniť vás, vaše vnímanie, ľudí, rôzne oblasti výskumu a možno aj celý svet.

Väčšina prednášok je natoľko inšpiratívna, že sú z nich zverejňované videá (TED talks), ktoré v súčasnosti dosahujú hranicu okolo 300 miliónov pozretí. TED ale nie je len o prednáškach, je predovšetkým o zaujímavých ľuďoch a otvorenej atmosfére. Medzi blokmi prednášok je priestor na diskusiu, v ktorom sa môžete rozprávať so všetkými účastníkmi o čom chcete a aby to bolo jednoduchšie, každý má menovku s tromi témami, ktoré ho zaujímajú.

Problém je, že účastníkov môže byť len limitovaný počet a aj cena lístka je pre väčšinu ľudí úplne nereálna - $6000. Preto vznikol formát TEDx (x = independently organized TED event), ktorý spočíva v tom, že dobrovoľníci môžu organizovať menšie lokálne "polooficiálne" konferencie, ktoré sa nesú v duchu veľkého TEDu a podliehajú zopár jeho pravidlám (hlavne čo sa týka formátu a konceptu). Takáto dobrovoľníkmi organizovaná konferencia bola zrovna predvčerom v Prahe.

Po výborných zážitkoch z jarného TEDx Bratislava som neváhal ani minútu a hneď kupoval lístok na pražský TEDx. Bratislavský TEDx mal neuveriteľne príjemnú a inšpiratívnu atmosféru a bol tak dobre organizovaný, že som ani nečakal, že ho može aktuálny pražský prekonať. Nuž, popravde sa vôbec nedokážem rozhodnúť ktorý bol lepší :), iba viem, že na žiadny iný event sa mi neoplatilo ísť viac na ako tieto dva.

Na pražskom TEDx-e (s podtitulom ReSTART - začněme jinak) sa zišlo 450 ľudí, prednášalo cca 20 speakerov a bol štruktúrovaný do troch blokov prednášok na témy Rekreace a znovu(s)tvoření, Naděje - děti a vzdělávání a Recyklace civilizace a hodnot. V každom bloku boli speakeri z Česka aj zahraničia a púšťalo sa jedno video TEDtalk.

Užitočné CSS tipy a triky

napísal , 15 Nov 2010

Nedávno sme si ukázali esenciálne css tipy a triky, teda veci, ktoré potrebujete vedieť. Dnes si ukážeme užitočné css tipy a triky, teda veci, ktoré je fajn vedieť.

CSS reset

Čo: CSS reset je CSSko obsahujúce nastavenia, ktoré pomáhajú zabezpečiť kompatibilitu prehliadačov.

Prečo: veci, ktorým presne neurčíte ako majú vyzerať, prehliadač vykreslí podľa vlastného uváženia. A každý z nich môže uvažovať inak. Medzery medzi <p> môžu byť rôzne, veľkosti písma v <h1>...<h6> môžu byť rôzne, niektoré prehliadače môžu okolo obrázkov zobrazovať border atď. Použitím CSS resetu vytvoríte pre všetky prehliadače rovnakú štartovaciu pozíciu.

rozdiely v renderovani
<p> v <div>, firefox má odsadenie, IE nie... zdroj obrázku

Ako: toto Eric Meyer's Reset (prípadne upravenú verziu) hodíte do svojho HTML pred ostatné CSSká, prípadne stačí skopírovať kód na začiatok svojho CSS súboru.

Čo dodať: Existujú aj resety od iných autorov, tento je však zrejme najpoužívanejší. Je to obyčajné CSS a je teda dobrý nápad si ho upraviť podľa vlastnej potreby. Nie vždy budete používať všetky elementy, ktorých štýly sú "resetované", takže ich môžete kľudne z resetu odstrániť a vo všeobecnosti si to upraviť ako len chcete.

Môžno si práve hovoríte "Toto je všetko pekné a fajn, ale..." a ja to plne chápem. Možno vám vyhovuje spôsob, akým prehliadače vykresľujú veci. Možno vám nevadí, že niektoré veci vyzerajú v IE trochu ináč. Možno máte dojem, že je to plno zbytočného kódu a že ak vám aj niečo bude prekážať, upravíte si to sami. A to je v poriadku. Je však dobré vedieť, že možnosť ako CSS reset existuje.

Informácie o prehliadači v kontaktnom formulári

napísal , 14 Nov 2010

Kompatibilita prehliadačov je stále lepšia, ale ešte stále sa môže veľmi ľahko stať, že návštevníkom vašej stánky bude blbnúť nejaký prvok. Hlavne pokiaľ je určená netechnickým ľudom, ktorých absolútne netrápi, či majú nový prehliadač, prípadne čo to ten prehliadač vôbec je.

Pri troche šťastia sa vám pôjdu niektorí ľudia posťažovať, že im niečo nefunguje, napíšu napríklad cez kontaktný formulár a vy sa budete ako správny developer snažiť opraviť chybu. Pokiaľ vám všetko fungovalo, daný človek musí mať určite iný prehliadač. Ale aký? ..no to sa od netechnického človeka dozviete veľmi ťažko :p

A tu prichádza na rad tento malý tip.

Do kontaktného formulára (a v postate hocikde, kde je šanca, že sa používatelia môžu na vašu stránku sťažovať:) pridajte takéto skryté pole a ušetríte si kopu starostí:

<?php
	$dbg = (count($_COOKIE) ? 'cookies: on' : 'COOKIES: OFF!').', '
		.'browser: '.$_SERVER['HTTP_USER_AGENT'].', '
		.'ip: '.$_SERVER['REMOTE_ADDR'].', '
		.'js: OFF!';
?>
<input type="hidden" name="extra" id="extra" value="<?=$dbg?>">
<script>
$(function()
{
	$("#extra").val( 
		$("#extra").val().replace("JS: OFF!","JS: on")
		+"; resolution: " + screen.width+"x"+screen.height
		+", document: "+window.innerWidth+"x"+window.innerHeight 
	);
});
</script>

Vďaka tomuto políčku budete hneď po kontaktovaní vedieť aký ma človek prehliadač, IP adresu, rozlíšenie displaya, veľkosť okna browsera a či má zapnuté cookies a Javascript. Podľa potreby môžete pridať kontrolu Flashu, Javy, premenných zo $_SESSION a kadečoho iného. Kontrola cookies cez PHP funguje samozrejme iba v prípade, že ich používate. ..ale pokiaľ ich nepoužívate, asi vás ani nebude trápiť, či používateľovi fungujú :)

Pre lepšiu predstavu - výstup vyzera približne takto:

cookies: on, browser: Opera/9.80 (Windows NT 6.1; U; en) Presto/2.6.30 Version/10.63, IP: 78.98.13.37, JS: on; resolution: 1600x900, document: 1600x815

Aby sme neobišli bez nejakých tých zrád, tak Opera/9.80 je v skutočnosti 10.xx a Windows NT 6.1 je Windows 7 :)

Kontaktný formulár by mal aj niekoho kontaktovať, na čo sa dá použiť PHPčková funkcia mail(), ktorej ale treba trocha pomôcť, aby sa v maile zobrazoval správny odosielateľ a diakritika.

$header = "MIME-Version: 1.0\n"
	."Content-type: text/plain; charset=UTF-8\n"
	."From: vasa@stranka.sk\n"
	."Reply-to: ".$_POST['email']."\n";

$predmet = '=?UTF-8?B?'.base64_encode('[kontaktný formulár] správa od: '.$_POST['meno']).'?=';

$sprava = $_POST['sprava']."\n-------------------\n".$_POST['extra'];

mail("sem.chcem.dostavat@maily.sk", $predmet, $sprava, $header);

V takomto prípade v pohode stačí plaintextový mail. Ak ale chcete byť fancy, k dispozícií sú HTML maily o ktorých si povieme nabudúce. :)

Esenciálne CSS tipy a triky

napísal , 8 Nov 2010

CSS je slušný bordel. Nie že by sa s ním nedalo pracovať, avšak aby ho dizajnér donútil vypľuť zo seba ako-tak-modernú stránku, potrebuje poznať riadnu dávku trikov, odžubov a čiernej mágie.

V tomto článku predstavíme problémy, s ktorými sa web-človek bežne stretáva, ukážeme si riešenia a nakoniec možno prihodíme pár užitočných tipov a možno aj trikov. Ak budete poslúchať. ;)

Predtým ale odporúčam mrknúť na HTML inline a block elementy. Článok tiež predpokladá aspoň základnú znalosť CSS. Ak také nemáte, nevadí, zastavíte sa neskôr :) Ok? Let's go.

Horizontálne centrovanie

Na zarovnanie textu na stred máme text-align: center; ale pre block elementy (ako <div>) nič podobné neexistuje. Čo je problém v dobe, kedy je väčšina stránok na stred obrazovky.

Riešenie: nastaviť centrovanému elementu pevnú šírku a margin: 0px auto;

centrovanie cez margin

V tomto prípade bude #box2 zhora a zdola odsadený o 15px a zo strán o "auto", čo prehliadač chápe tak, že ho má hodiť na stred rodiča - čiže do stredu divu #container.

Ako vypnúť rozťahovanie obrazu na ATI a Win7

napísal , 4 Nov 2010

Ak máte grafickú kartu od ATI/AMD a skúšali ste na nej niekedy použiť iné ako natívne rozlíšenie displaya, či už pri hrách alebo pri pripájaní na HDTV, určite ste mali tú česť zistiť, že miera idiocie ovládačov týchto kariet je vskutku kolosálna. Problém je dokonca už len nainštalovať najnovšiu verziu Catalystov na notebook a za "dobre odvedenú" prácu musím ATI uznať, že boli odjakživa špecialisti na hádzanie klackov pod nohy.

Dúfajúc, že ušetrím pár ľudí od hodín strávených hľadaním ako ojekabátiť zákerné ovládače, píšem tento post, kde sa dozviete ako prinútiť kartu, aby obraz vždy zostal v pomere strán, aby na HDTV nebol zmenšený a aby ste ich vôbec nainštalovali. :)

Rozťahovanie obrazu a overscan s ATI ovládačmi

All fixed!

Upload progressbar s PHP a jQuery

napísal , 1 Nov 2010

upload progressbar

Pri uploadovaní cez HTML formulár, hlavne ak sa jedná o veľké súbory, môže byť problém, že používateľ nevie aká časť zo súboru sa uploadla, či sa súbor vôbec uploaduje a prinajhoršom si myslí, že sa vôbec nič nedeje a nervózne kliká na submit. Ešte horšie ako zvýšená záťaž na server, ktorú generuje, je riziko, že sa na celú stránku vyserie, lebo si myslí, že nefunguje. :)

V tomto tutoriale si povieme ako za pomoci PHPčka a jQuery jednoducho vytvoriť progress bar, ktorý sa priebežne obnovuje podľa množstva prenesených dát z uploadovaných súborov a snáď pomôže predísť úniku netrpezlivých používateľov zo stránky.

Aby ste vedeli o čom je reč, tu si môžete pozrieť demo.

všetko je na webe

napísal , 31 Oct 2010

Všetko je na webe je výber z toho, čo za uplynulý týždeň priliezlo cez reader a twitter.

"Chceš vidieť budúcnosť hrania? Kúp si PC!", hlása veliteľ štúdia Irrational Games, ktoré sa nás najbližšie chystá odrovnať pripravovaným BioShock Infinite. Vo svojej úvahe Ken Levine vyzdvihuje otvorenosť platformy či fakt, že v konečnom dôsledku každý vývojár pochádza z PC prostredia.

Toto je jeden z obsiahlejších článkov o prokrastinácii (nie je ich v poslednej dobe na nete nejak moc?). Rozoberá netflix, marshmallows, rozmýšľanie nad rozmýšľaním a stránka sa volá "You Are Not So Smart. A Celebration of Self Delusion." ;) So yeah.. vyhnite sa tomu, čo by ste mali robiť a prečítajte si článok o tom, prečo ste sa práve vyhli tomu, čo by ste mali robiť.