Time-sensitive dizajn reagujúci aj na počasie

To samozrejme ostáva a momentálne existuje 5 stavov dizajnu. 4 stavy sa nastavujú automaticky podľa času a jeden podľa počasia. Ak vonku prší dizajn stránky by sa mal nastaviť na upršanú tému . Uvidím ale ako to bude fungovať a ak to bude zbytočne spomaľovať stránku tak to nakoniec odstránim. Script čo to zisťuje som ale navrhol tak, že pre jedného užívateľa 1x za deň overí či v jeho lokalite bude pršať alebo nie a podľa toho nastaví dizajn.

Samozrejme som ale aj pridal možnosť nastavenia dizajnu kedykoľvek. pomocou tlačidiel v pravom hornom rohu. Ikonka s otáznikom značí, že dizajn sa nastaví automaticky podľa hodín a počasia. Očakávam možné problémy ale tie budem riešiť za behu.

Ak ma chcete pochváliť môžete tak urobiť v komentároch

Celý validátor pre overenie domény v ZF

class My_Validate_AvailableDomain extends Zend_Validate_Abstract
{
const NOT_AVAILABLE = 'NotAvailableDomain';
const NOT_VALID = 'NotValidDomain';
const NO_TLD = 'NoTLD';

protected $_messageTemplates =

array(
self::NOT_AVAILABLE => 'Táto doména nie je voľná! Skúste vybrať inú...',
self::NOT_VALID => 'Neplatná doména, nesprávny tvar domény!',
self::NO_TLD => 'Vyberte TLD domény! (Top Level Domains)'
);

public function isValid($value, $context = null)
{

$value = (string) $value;
$this->_setValue($value);

if(!eregi("^[a-z0-9_\-]*$", $value)) {
$this->_error(self::NOT_VALID);
return false;
}

if(isset($context['tld']) && $context['tld'] == "") {
$this->_error(self::NO_TLD);
return false;
}

###################

// ked budete pridavat domeny, musite zvysovat cislo v premennej podla poctu tld
$tlds = 32;

$tldt['co.uk'] = 1;
$tld[1]=".co.uk";
$nic[1]="whois.nic.uk";
$rep[1]="No match for";

$tldt['org.uk'] = 2;
$tld[2]=".org.uk";
$nic[2]="whois.nic.uk";
$rep[2]="No match for";

$tldt['net.uk'] = 3;
$tld[3]=".net.uk";
$nic[3]="whois.nic.uk";
$rep[3]="No match for";

$tldt['me.uk'] = 4;
$tld[4]=".me.uk";
$nic[4]="whois.nic.uk";
$rep[4]="No match for";

$tldt['com'] = 5;
$tld[5]=".com";
$nic[5]="whois.opensrs.net";
$rep[5]="Can't get information";

$tldt['net'] = 6;
$tld[6]=".net";
$nic[6]="whois.opensrs.net";
$rep[6]="Can't get information";

$tldt['org'] = 7;
$tld[7]=".org";
$nic[7]="whois.publicinterestregistry.net";
$rep[7]="Not found";

$tldt['biz'] = 8;
$tld[8]=".biz";
$nic[8]="whois.nic.biz";
$rep[8]="not found";

$tldt['info'] = 9;
$tld[9]=".info";
$nic[9]="whois.afilias.net";
$rep[9]="not found";

$tldt['cc'] = 10;
$tld[10]=".cc";
$nic[10]="whois.nic.cc";
$rep[10]="no match";

$tldt['uk.com'] = 11;
$tld[11]=".uk.com";
$nic[11]="whois.centralnic.com";
$rep[11]="no match";

$tldt['uk.net'] = 12;
$tld[12]=".uk.net";
$nic[12]="whois.centralnic.com";
$rep[12]="no match";

$tldt['name'] = 13;
$tld[13]=".name";
$nic[13]="whois.nic.name";
$rep[13]="no match";

$tldt['sk'] = 14;
$tld[14]=".sk";
$nic[14]="whois.ripe.net";
$rep[14]="Not found.";

$tldt['cz'] = 15;
$tld[15]=".cz";
$nic[15]="whois.nic.cz";
$rep[15]="No entries found.";

$tldt['eu'] = 16;
$tld[16]=".eu";
$nic[16]="whois.eu";
$rep[16]="Status:      FREE";

$tldt['at'] = 17;
$tld[17]=".at";
$nic[17]="whois.nic.at";
$rep[17]="nothing found";

$tldt['de'] = 18;
$tld[18]=".de";
$nic[18]="whois.denic.de";
$rep[18]="free";

$tldt['ru'] = 19;
$tld[19]=".ru";
$nic[19]="whois.ripn.ru";
$rep[19]="No entries found";

$tldt['tv'] = 20;
$tld[20]=".tv";
$nic[20]="whois.nic.tv";
$rep[20]="No match for";

$tldt['be'] = 21;
$tld[21]=".be";
$nic[21]="whois.geektools.com";
$rep[21]="Status:      FREE";

$tldt['ch'] = 22;
$tld[22]=".ch";
$nic[22]="whois.nic.ch";
$rep[22]="We do not have an entry";

$tldt['li'] = 23;
$tld[23]=".li";
$nic[23]="whois.nic.ch";
$rep[23]="We do not have an entry";

$tldt['lt'] = 24;
$tld[24]=".lt";
$nic[24]="whois.domreg.lt";
$rep[24]="Status:			available";

$tldt['lv'] = 25;
$tld[25]=".lv";
$nic[25]="whois.nic.lv";
$rep[25]="%ERR - Nothing found";

$tldt['se'] = 26;
$tld[26]=".se";
$nic[26]="whois.nic-se.se";
$rep[26]="not found.";

$tldt['ac'] = 27;
$tld[27]=".ac";
$nic[27]="whois.nic.ac";
$rep[27]="- Available";

$tldt['ag'] = 28;
$tld[28]=".ag";
$nic[28]="whois.nic.ag";
$rep[28]="Not found";

$tldt['cc'] = 29;
$tld[29]=".cc";
$nic[29]="whois.nic.cc";
$rep[29]="No match";

$tldt['cn'] = 30;
$tld[30]=".cn";
$nic[30]="whois.cnnic.net.cn";
$rep[30]="no matching record";

$tldt['cx'] = 31;
$tld[31]=".cx";
$nic[31]="whois.nic.cx";
$rep[31]="Status: Not Registered";

$tldt['ws'] = 32;
$tld[32]=".ws";
$nic[32]="whois.worldsite.ws";
$rep[32]="No match for";

###########################

$domainname = $value;
$texttld = $context['tld'];
$stld = $tldt[$texttld];
$domname= $domainname.'.'.$texttld; //$tldt[$stld];

$wnic=$nic[$stld];
$ns = fsockopen($wnic,43); fputs($ns,"$domname\r\n");
while(!feof($ns)) $result .= fgets($ns,128); fclose($ns);
if (eregi($rep[$stld],$result)) {
return true;
} else {
$this->_error(self::NOT_AVAILABLE);
return false;
}
}
}

Trieda validátora sa volá  My_Validate_AvailableDomain pretože je uložená v adresári library/My/Validate/AvailableDomain.php . Vytvoríme si 3 konštanty ktoré budú označovať stavy ktoré môžu nastať a popíšeme k nim chybové hlášky ktoré sa vrátia ak overenie neprebehne v poriadku, ak prebehne script vráti len true.

const NOT_AVAILABLE = 'NotAvailableDomain';
const NOT_VALID = 'NotValidDomain';
const NO_TLD = 'NoTLD';

protected $_messageTemplates =
array(
  self::NOT_AVAILABLE => 'Táto doména nie je voľná! Skúste vybrať inú...',
  self::NOT_VALID => 'Neplatná doména, nesprávny tvar domény!',
  self::NO_TLD => 'Vyberte TLD domény! (Top Level Domains)'
);

Ďalšie na rade je zoznam registrátorov podľa krajiny.  V tomto scripte si nie som istý či pobeží overenie EU domén a INFO pravdepodobne bude treba len dať inú URL adresu pre WHOIS.

Script obsahuje aj overenie tvaru domény kde ak sa nezhoduje tvar podľa regulárneho výrazu vráti to FALSE. Pokračovať bude len ak je tvar správny.

Hodnoty z formulára pre overenie

Validátor je navrhnutý tak, že preberie 2 hodnoty z formulára a to: TLD, a názov domény (pomenujme si ich domain a tld). TLD bude klasický selectbox a názov domény bude klasický input pre text. V tomto scripte sa preberajú v tomto mieste:

$domainname = $value;
$texttld = $context['tld'];
$stld = $tldt[$texttld];
$domname= $domainname.'.'.$texttld;

Zobrazenie formulára a overenie domény

Samotné volanie validátora je jednoduché, prikladám ukážku kde mám vytvorené políčka formuláru domain a tld. Pri TLD vložíme cez addMultiOption do rozbaľovátka hodnoty ktoré chceme overovať. (MOBI a EU možno nepojde, treba upraviť WHOIS)

$name = new Zend_Form_Element_Text('domain');
$name ->setLabel('Názov domény')
->setRequired(true)
->addFilter('StripTags')
->addFilter('StringTrim')
->addFilter('StringToLower')
->addValidator('NotEmpty')
->addValidator('AvailableDomain')
->addValidator('stringLength', false, array(1, 100));
$name->addPrefixPath('My_Validate', 'My/Validate/','validate');
$name->setDecorators(array('Composite','CustomHtml'));
$this->addElement($name);

$tld = new Zend_Form_Element_Select('tld');
$tld->addMultiOption('', '');
$tld->addMultiOption('sk', 'sk');
$tld->addMultiOption('cz', 'cz');
$tld->addMultiOption('com', 'com');
//$tld->addMultiOption('eu', 'eu');
$tld->addMultiOption('biz', 'biz');
$tld->addMultiOption('info', 'info');
$tld->addMultiOption('name', 'name');
$tld->addMultiOption('net', 'net');
$tld->addMultiOption('org', 'org');
//$tld->addMultiOption('mobi', 'mobi');
$tld->addMultiOption('de', 'de');
$tld->setLabel('')
->addFilter('StripTags')
->addFilter('StringTrim')
->setDecorators(array('Composite','CustomHtml'))
->addValidator('NotEmpty');
$this->addElements(array($tld));

V prípade, že overenie neprebehne script vráti hlášku podľa konštanty na začiatku scriptu. Môže to vyzerať napríklad takto.

Najdôležitejšie je mať políčka domain a tld. V políčku domain treba zavolať

$name->addPrefixPath('My_Validate', 'My/Validate/','validate');
$name->addValidator('AvailableDomain');

Ostatné prebehne automaticky pretože validátor volá obsah políčok podľa ich mena. Dúfam, že som pomohol pri vytváraní vlastného validátora pre overenie domény. Podobným spôsobom môžete vytvoriť akýkoľvek validátor pre overenie čohokoľvek. Štruktúra a spôsob ostáva, jediné čo zmeníte je vnútro tiedy kde sa niečo overuje a vracia TRUE alebo FALSE. To je celé…

Vytvoríme text

Pomocou text tool vo Photoshope vytvoríme text z ktorému neskôr dáme tieň.

Vytvoríme vstvu pre 3D efekt

Ďalšia vec je vytvorenie novej zložky pod vrstvou základného textu kde vložíme kópiu našeho textu, pozrite si obrázok… Robíme to preto, že 3d efekt budeme vytvárať do tejto zložky. Bude lepšie keď to bude oddelené lebo ak sa rozhodneme, že efekt nieje dobrý alebo ho nechceme stačí zmazať len zložku v ktorej to všetko je.

Vytvárame 3D efekt kopírovaním

Teraz nasleduje najdôležitejšia časť tutoriálu a to vytvorenie samotného 3D efektu. Ten vytvoríme tak, že budeme kopírovať našu vrstvu textu v zložke 3d efekt.

• Označte vrstvu nášho textu v zložke 3d efekt
• Duplikovaním tejto vrstvy vytvoríme veľa kópií kde každá je o 1 pixel posunutá želaným smerom, toto vytvorí 3D efekt. U nás sme vybrali Move Tool a stláčali šípku dole + ALT, takto sme vytvorili efekt ale zároveň aj veľa vrstiev ktoré ho tvoria.

• Označíme všetky vrstvy v zložke 3D efekt. Ide nám o to, že je zbytočné ich mať veľa a tak z nich urobíme len jednu vrstvu s ktorou sa nám bude ľahšie robiť.
• Klikneme pravé tlačidlo na týchto označených vrstvách a vyberieme rasterize layer. Z vektorov si vytvoríme raster ktorý potom spojíme do jedného obrázku.
• Keď máme z vrstiev rastre tak dáme zase pravé tlačidlo a vyberieme merge layers, takto si vytvoríme len jednu vrstvu ktorá tvorí náš 3D efekt

Takto máme v výsledku základnú vrstvu textu a vrstvu ktorá nám dotvára 3D efekt. Teraz je už len na Vás ako ju ďalej upravíte… Vďaka blending options viete ľahko nadefinovať týmto vrstvám vlastnosti vďaka ktorým bude text vyzerať napríklad takto:

Pre úplnú ukážku prikladám PSD súbor na stiahnutie kde uvidíte ako nastaviť blending options aby text pôsobil plastickejšie. Tutoriál: vytvorenie 3D textu vo Photoshope.

O Zend Frameworku je na internete toho popísaného veľa, nie ale všetko je zrozumiteľné hlavne pre človeka ktorý sa do toho chce dostať a nie všetkému rozumie. Jedna z takých vecí je napríklad View Helper. V podstate nutnosť pri práci so Zendom. Tento článok je laický návod na jeho použitie.

Zend Framework sa podľa mňa ťažko učí z oficiálnej príručky kde človek veľa veciam nerozumie a často potrebuje vedieť aj iné veci. Práve preto asi  urobím niečo ako mini seriál laických návodov Zend Frameworku lebo keby existovalo niečo keď som sa to snažil naučiť je sám tak by som si ušetril kopec času. Uvidíme…

Čo je View Helper?

Vzhľadom na to, že je to framework typu MCV tak logika so vzhľadom je oddelená vec, view helper je niečo medzi tým. V podstate je to ako PHP funkcia ktorá mi niečo robí (počíta niečo alebo vráti kus HTML kódu) a vracia určité hodnoty alebo kusy kódov.  Už z názvu View je používaná v pohľadoch ale dá sa použiť aj v controller, tu je to ale na zváženie lebo nie vždy je vhodné do logiky vkladať View helper ktorý mi môže narušiť tú logiku MCV frameworku. Ak teda sa už hráme, že oddeľujeme logiku od vzhľadu tak je najlepšie View helper v controlleroch používať rozumne alebo vôbec.

Kedy je to vhodné a vlastne na čo použiť View Helper?

View Helper je vhodný do miest kde určitý úkon vykonávam často prípadne existuje na každej podstránke. Tým ale nemyslím napríklad ľavý stĺpec, pravý stĺpec, pätičku alebo hlavičku. Na niečo takéto sa to síce použiť dá ale podľa mňa to nieje dobre, toto sa dá vytvoriť pomocou vlastností a možností layoutov. View helper sa pri klasickom webe hodí napríklad na generovanie odkazov na registráciu, prihlásenie, odhlásenie a výpis prihláseného užívateľa. I keď sa toto bude nachádzať na každej podstránke tak to aké odkazy sa zobrazia si vyžaduje určitý script na overenie či je užívateľ prihlásený alebo nie. Mohli by ste to dať do hlavičky kde to nejakým spôsobom overiť ale nieje to praktické. View helper to vyrieši  a do pohľadu len vložíme jeden riadok kódu ktorý nám vráti čo potrebujeme.

Vytvárame View Helper

Vytvorenie View Helperu je jednoduché v podste si len vytvoríte jednu triedu s určitým názvom, tú uložíte na určité miesto vďaka tomu, že názov triedy a jej umiestnenie v adresároch umožní to, že View Helper použijete kdekoľvek bez toho aby bolo niekde treba niečo includovať.

View Helper zavoláte v bez nutnosti includovania, to vďaka názvu triedy ktorá odkazuje na jeho umiestnenie. Toto je veľmi pohodlné, View Helper môžete zavolať aj v controller triede ale to je na zváženie, nemiešajte logiku so vzhľadom.

Jednoduchý View Helper vyzerá napríklad takto:

<?php

class Zend_View_Helper_LoggedInUser

{

  protected $_view;

  function setView($view) {

    $this->_view = $view;    

  }    

  function loggedInUser() {

    $auth = Zend_Auth:getInstance();

    if($auth-hasIdentity()) 

    {

      $logoutUrl = $this->_view->linkTo('auth/logout');

      $user = $auth->getIdentity();

      $username = $this->_view->escape(ucfirst($user->username));

      $string = 'Logged in as ' . $username . ' | <a href="' . $logoutUrl . '">Logout</a>'; 

    } else {

      $loginUrl = $this->_view->linkTo('authentification/identify');

      $string = '<a href="' . $loginUrl . '">Log In</a>';

    }

    return $string;

  }        

}

View Helper začína definíciou triedy, názov našej triedy je:

Zend_View_Helper_LoggedInUser

Prečo? Zend_View_Helper definuje umiestnenie View Helperu, ten môžeme uložiť do ľubovoľného PHP súboru… názov môže byť ľubovoľný. Avšak v adresári Views / Helpers / názov našeho View Helperu.

LoggedInUser je názov triedy, najideálnejšie je si ju nazvať tak ako budeme volať aj View Helper v pohľade.

Funkciu SetView neriešte vložte to do každého View Helperu. Ďalej nasleduje funkcia ktorá sa volá tak isto ako názov triedy a to je to kde si dáte vlastný kód ktorý niečo spraví a vráti. V našom prípade to bude overenie či je užívateľ prihlásený a ak áno tak vypíše jeho meno a zobrazí odkaz na odhlásenie. Podrobne jej kód vysvetľovať nebudem.

V jednom View Helper môžete vytvoriť aj viac funkcií kde jedna môže niečo vrátiť druhej, funguje to ako keď v jednej funkcii vložíte inú atď.

View Helper už máme, treba ho len zavolať

View Helper máme vytvorený, jeho názov je dobre vytvorený, je umiestnený v presnom adresári… teraz ho už len zavoláme na mieste kde potrebujeme. V pohľade to spravíme s kódom napríklad:

<?php echo $this->LoggedInUser(); ?>

V Controller to zavoláme trochu inak a to:

$this->view->LoggedInUser();

Toto je dúfam ľahko pochopiteľné použitie jednoduchého View Helperu…

Začneme zložitejšie a rovno celým kódom validátora:

<?php
class My_Validate_PasswordConfirmation extends Zend_Validate_Abstract
{
    const NOT_MATCH = 'notMatchPasswords'; 

    protected $_messageTemplates =  array(
        self::NOT_MATCH => 'Password are not equals'
    );  

    public function isValid($value, $context = null)
    {
        $value = (string) $value;
        $this->_setValue($value); 

        if (is_array($context)) {
            if (isset($context['password_confirm']) && ($value == $context['password_confirm']))
            {
                return true;
            }
        } elseif (is_string($context) && ($value == $context)) {
            return true;
        } 

        $this->_error(self::NOT_MATCH);
        return false;
    }
}
?>

Po kúskoch

Teraz si to rozoberieme postupne.

class My_Validate_PasswordConfirmation extends Zend_Validate_Abstract

Vytvoríme si triedu pre náš validátor… rozširujeme triedu Zend_Validate_Abstract. Meno našej triedy bude PasswordConfirmation lebo budeme overovat hodnoty dvoch políčok formulára. Teraz ale pozor na textik My_Validate_ pred názvom triedy. Nieje to tam pre srandu a určuje to v podstate miesto kde je validátor uložený. V našom prípade to je adresár library/My/Validate/.

Umiestniť si to môžete aj inde ale toto je jedno z odporúčaní, ako vidíte na obrázku tak do adresára My umiestňujete aj paginatory, vlastne decoratory ci ine dolezite triedy. Takže, teraz vieme ako zostaviť názov triedy a môžeme ísť ďalej.

const NOT_MATCH = 'notMatchPasswords';

Vytvoríme si konštantu s názvom NOT_MATCH ktorej bude priradená hláška pri nesplnení overovania (v našom prípade ak sa heslá nebudú rovnať).

V ďalšej funkcii si do premenných preberieme hodnoty inputov a v podmienke:

if (isset($context['password_confirm']) && ($value == $context['password_confirm']))

overíme či heslá sú zhodné, ak áno vrátime si TRUE, ak nie vrátime FALSE a zobrazíme $this->_error(self::NOT_MATCH); čo nám vygeneruje hlášku formulára.

Takto samozrejme môžete overovať čokoľvek… heslá, regexp, adresy, unikátne údaje.

I love Street View, je tam aj oranžový panáčik

Zväčšiť mapu

Okolo celého Googleplexu v Mountain View sa v Street View predvádzajú pracovníci Googlu… a vo vyššom rozlíšení. Ak Vás to zaujíma tak si pozrite okolie celého Googlu pretože ako sami uvidíte, ľudia z Googlu sa tam prezentujú všemožnými spôsobmi.

Ako vložiť vlastné Google Street View na vlastný web?

Je to jednoduché ale samo o sebe si to možno ani nevšimnete, postup je takýto:

Nájdeme si lokáciu ktorá podporuje street view (panáčik z obrázku je oranžový) a kliknutím a ťahaním ukážeme na mapu. Na mape sa vysvietia modré trasy na ktoré je možné panáčika položiť (pri ukazovaní na modré trasy v malom okienku vidíte náhľad danej lokácie). Ak si nájdeme miesto ktoré chceme vidieť v street view tak len panáčika pustením tlačidla umiestnime do mapy na modrú trasu a mapa sa prepne do módu zobrazenia ulice.

Po prepnutí do módu ulice klikneme vpravo hore do modrej lišty na odkaz link kde sa nám zobrazí ponuka pre vloženie embedde iframu s Google Street, ak chceme vidieť náhľad tak klikneme na “Prispôsobiť vloženú mapu a zobraziť náhľad” tam sa nám zobrazí pop-up okno s podrobnejšími nastaveniami.

Takýto HTML kód len skopírujete na svoj web a hneď si môžete vychutnať perfektné Google Street View zo svojho webu.

Google stále niečo vylepšuje a časom možno všetky Street View zábery budú vo vyšších rozlíšeniach ale momentálne je to len na určitých mestách a v určitých častiach, v ktorých tak to nezistíte… narazíte na to len náhodou.  Všimnúť si tiež ale môžete, že ŠPZ áut a tváre neznámych  ľudí sú automaticky v Street View rozmazávané.

Aká je najvhodnejšia šírka pre dnešné internetové stránky? Niekto to nerieši, pre iného je to možno problém. Ja som nikdy nejak extra neskúmal aká šírka stránky je najvhodnejšia ale dávnejšie som narazil na stránku 960.gs ktorá ma presvedčila o tom, že najvhodnejšou šírkou pre dnešné weby je 960 pixelov.

Prečo je 960 pixelov najvhodnejšie?

Hlavne preto, že číslo 960 je deliteľné 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 a 480. Na stránke 960.gs je toho samozrejme viac ale 960 Grid System Vám umožní flexibilne si rozvrhnúť a rozkúskovať jednotlivé časti webu.

Základ systému

Základ systému tvoria stĺpce v celkovej šírke 960 pixelov rozdelené na 12 a 16 stĺpčekov. 12 stĺpcový systém obsahuje stĺpce šírky 60px a 16 stĺpcový šírku 40px. Každý stĺpec obsahuje 10 pixelový margin v ľavo a pravo.

K čomu je to dobré?

Vzhľadom na tento stĺpcový systém si pri tvorbe webu môžete presne rozvrhnúť jednotlivé časti webu tak, aby vždy vyplnili vhodnú šírku a zároveň pôsobili vyvážene a pekne. Stačí že jednotlivé bloky budú mať šírku vždy podľa mriežky.

Jeden z príkladov zo stránky 960.gs ktorý to pekne znázorňuje…

960 Grid systém je podľa mňa vhodné používať i keď ja to momentálne veľmi nerobievam ale snažím sa svoje zvyky odnaučiť a držať sa niečoho takéhoto. Minimálne si tým uľahčíte robotu pretože nemusíte rozmýšľať nad šírkou jednotlivých častí Vašeho webu. Viac informácií a súborov na stiahnutie na http://www.960.gs

Vytvorenie ikony

Ikonka musí mať rozmer najlepšie 57×57 pixelov vo formáte PNG, v iPhone majú tieto ikonky zaoblené rohy a zobrazujú odlesk skla. Vy to ale neriešite, o to sa postará iPhone. Vytvorte ikonku pre svoj iPhone v nejakom grafickom editore. Ja som si vytvoril niečo takéto.

Vloženie do stránky

Do stránky len nalinkujete jeden riadok HTML kódu s cestou k obrázku, to je všetko… tento kus kódu vložiť medzi tagy HEAD.

<link rel="apple-touch-icon" href="/directory/myicon.png" />

Pridanie stránky na plochu

Pridať svoju stránku ako ikonku na plochu iPhonu je veľmi ľahké. Otvorte Safari v iPhone a zadajte nejakú URL adresu (ak chcete skúste peteroravec.sk kde to funguje), kliknite na tlačidlo + (plus) a vyberte možnosť Add to Home Screen. Ikonka sa zobrazí na ploche.

Pre premiestnenie ikonky podržte stlačenú nejakú ikonku až sa všetky ostatné začnú triasť, potom len kliknutím a ťahom popresúvajte ikonky tam kde chcete, pre uloženie stlačte tlačidlo na spodku iPhonu a pozície sa uložia.

Nebude to dlhý článok ale minimálne ako demonštrácia aplikácie pre WordPress blogy.

Použiteľná aplikácia

Aplikácia je pomerne prehľadná i keď pri písaní článku vidíte zdrojový kód, osobne by sa mi páčil nejaký WYSIWYG editor ale vzhľadom na to, že v iPhone text neoznačím by to bolo asi nepoužiteľné.

Kedy to použiť?

Nikto asi nečaká, že to nahradí konfort PC ale ako riešenie kedy napríklad niečo zaujimavé odfotíte a chcete to hneď publikovať na blogu je to fajn. (Tento článok je písaný na iPhone cez aplikáciu WordPress, fotografia priradená a odfotená z iPhonu)

Aplikáciu sťahujte z http://iphone.wordpress.org/

Čo je Zend Framework?

Zend Framework je PHP knižnica pre vývoj aplikácií v PHP. Obsahuje množstvo komponentov ktoré umožňujú vyvíjať PHP aplikácie ľahšie s udržateľnejším kódom pre budúce úpravy a vylepšenia.

Prečo Zend Framework?

• Rozsiahla dokumentácia
• Rozsiahla komunita
• Všetko v jednom, všetky Zend obsahuje všetko čo pri vývoji budete potrebovať
• Jednoduchosť vývoja
• Umožní rýchly vývoj aplikácií

Jednotlivé moduly

Zend Framework môžeme rozdeliť do šiestich modulov, tie pokrývajú všetky nástroje pre vývoj aplikácií. Sú to:

Jadro:

Zend_Controller, Zend_View, Zend_Db, Zend_Config, Zend_Filter, Zend_Validate, Zend_Registry, Zend_Acl,  Zend_Auth, Zend_Session

Internalizačné nástroje:

Zend_Date, Zend_Locale, Zend_Measure

Hypertext Transfer Protocol:

Zend_Http_Client, Zend_Http_Server, Zend_Uri

Inter-application komunikácia:

Zend_Json, Zend_XmlRpc, Zend_Soap, Zend_Rest

Web Services:

Zend_Feed, Zend_Gdata, Zend_Service_Amazon, Zend_Service_Flickr, Zend_Service_Yahoo

Pokročilé:

Zend_Cache, Zend_Search, Zend_Pdf, Zend_Mail, Zend_Mime, Zend_Measure

MCV: Model-Controller-View

Komponenty tvoriace jadro Zend Frameworku využívajú tzv. MCV (Model-controller-view) systém pre tvorbu aplikácií kde je oddelený vzhľad internetovej stránky od logiky a controllerov. Hlavné časti MCV teda tvoria: Zend_Controller (Controller), Zend_View (View) a Zend_Db (Model)

Toto je priblíženie komponentov Zend Frameworku, postupne prinesiem ďalšie články o práci s týmto Frameworkom.

Potrebovali ste z nejakého dôvodu mať na PC napríklad Internet Explorer 6 a Internet Explorer7? Problém, že?! Našťastie je tu softvér ktorý to zariadi ľahko. Pre webových vývojárov a kóderov je nutnosť mať viac verzií IE na jednom PC.

Vždy len najnovšia verzia IE

Windows a jeho IE Vám štandardne nedovolí mať viac verzií na jednom PC. Vždy bude chcieť mať nainštalovanú “najmodernejšiu”. My ale chceme dosiahnuť aby sme na PC chceli mať viacej funkčných inštalácií IE. Poslúži na to Multiple IE.

Multiple IE a rôzne verzie k nainštalovaniu

IE6 a IE7 cez Multiple IE

V prípade, že chceme mať IE7 spolu s IE6 musíme ísť na to takto. Najprv nainštalujeme IE7 tak, že si tým prepíšeme IE6. To je v pohode a neriešime to, stiahneme Multiple IE.

Link na stiahnutie Multiple IE

Inštalácie je ľahká a v nej si len vyberiete ktoré IE chcete do svojho PC nainštalovať. Neviem či to ide aj inak ale tento spôsob je určite najľahší a stojí najmenej úsilia.

Je to drobnosť ktorá ale urobí radosť a tento článok je o tom ako ju jednoducho vytvoriť.

Ako vytvoriť FavIcon?

Moderné prehliadače akceptujú aj iný typ súboru ako ICO, my však použijeme práve ICO aby nám FavIcon fungovala aj na IE6 ktorý nám to ako vždy skomplikuje.

• Ikona o rozmeroch 16×16 alebo 32×32. Keď sa povie ikona tak NIE obrázok uložený na disk s prepísanou koncovkou ale normálne vygenerovaný súbor .ICO
• Osobne odporúčam použiť rozmer 16×16 pixelov lebo do adresného riadka aj tak zobrazuje len 16×16 pixelov a ak dáte väčšiu ikonu tak ju stlačí a vznikne nepekný deformovaný obraz.
• Vytvorenie ICO súboru je možné napríklad s photoshopm ktorý ale musí mať špeciálny plugin, jednoduchšie je napríklad si FavIcon rovno nakresliť na http://www.favicon.cc/ prípadne klasický obrázok premeniť na ICO na http://www.html-kit.com/favicon/.

Ikonu máme, umiestnenie na stránku

Na umiestnenie FavIcony na stránke je potrebný jeden riadok HTML kódu:

‹link rel="shortcut icon"
href="favicon.ico" type="image/x-icon" /›

Tento kód umiestnite do hlavičky webu (medzi tagy <head></head>). Cesta musí byť správna, tam si dajte pozor, a to je celé… V moderných prehliadačoch to uvidíte hneď po refreshi.

Funguje to aj v IE6 ale…

Ak ale toto skúsite v IE6 tak pravdepodobne ikonka sa nezobrazí, to je v poriadku za to môže IE6. Ikonka sa začne zobrazovať ak si stránku pridáte do obľúbených položiek. V budúcnosti keď na túto stránku prídete tak ikonku uvidíte.

Funguje to asi takto, prídete na svoj obľúbený blog a napíšete komentár. Vyplníte svoj nick, email a text správy a odošlete. Pri príspevku sa zobrazí Váš obrázok bez toho aby ste ho nejak nahrávali alebo prepájali so svojim príspevkom. Super, nie? A najlepšie je na tom to, že to funguje všade a celosvetovo… stačí, že daný systém toto podporuje.

Keď si ale vezmeme, že každý wordpress to podporuje tak je to super vec na prezentovanie svojej identity celosvetovo. Ako teda na to?

Potrebujete sa zaregistrovať

Chodťe na stránku Gravatar.com a zaregistrujte sa. Po registrácii si naviažete na svoje emailové adresy svoj obrázok, pre rôzne emailové adresy môžete mať rôzne obrázky.

Na základe emailu sa zobrazí Gravatar

A toto je vlastne všetko, k emailu priraďte obrázok a je to!

Obrázková identita

Pri písaní príspevku Vás systém identifikuje podľa emailu ktorý zadávate pri diskusii a podľa neho stránka gravatar.com zobrazí Váš avatar.  Zaregistrujte sa a vyskúšjte si to napríklad aj na mojom blogu kde som spustil túto podporu. Extrémne jednoduché a funkčné…

All In SEO Pack – SEO plugin

URL: http://wordpress.org/extend/plugins/all-in-one-seo-pack/

SEO nieje na škodu na žiadnom webe a tak je jasné, že aj na WordPress niečo také existuje. Po inštalácii WordPressu dostanete klasickú šablónu ktorá čo sa týka SEO na tom nieje až tak zle ale veľa vecí sa dá vylepšiť. Pomocou pluginu ľahko a okamžite budete mať pod kontrolou svoje titulky a popisy k jednotlivým článkov vo WordPress.

All In SEO - WordPress Plugin

Pomocou tohoto pluginu si globálne nadefinujete titulok, popisok, kľúčové slová prípadne doplnkové údaje do každej hlavičky. Tiež si môžete nadefinovať tvary svojich titulkov. Už od “výroby” je plugin nastavený tak, že rieši napríklad duplicitné titulky pri listovaní. Všetko samozrejme môžete v administrácii upraviť podľa potreby.

WordPress Related Posts – výpis podobných článkov

URL: http://wordpress.org/extend/plugins/wordpress-23-related-posts-plugin/

Tento plugin slúži na výpisy podobných článkov ako ten ktorý momentálne čítate. Týchto pluginov je veľa ale toto bol jediný ktorý sa inštaloval ľahko a fungoval mi. Tento plugin je v celku nutnosťou by som povedal a dosť mi chýbal. V prípade, že článkov máte veľa tak sa to fakt hodí.

WordPress Related Posts si môžete všimnúť aj u mňa na blogu dole s nadpisom podobné články

Inštalácia je jednoduchá a jedine čo treba okrem aktivácie spraviť je vložiť na miesto kde chceme zobrazovať podobné články jeden riadok PHP kódu. Ja som ale pre svoje potreby musel v celku neprehľadnom kóde pluginu upraviť HTML aby som výpis mohol štýlovať podľa svojej potreby.

Penalizácia za duplicitný obsah? Neexistuje, na to je tu Supplemental Index

Ľudia sa často pýtajú či Google penalizuje nejakým spôsobom stránky s duplicitným obsahom. Tým, že na stránke máte duplicitný obsah sa nestane že by Vás Google penalizoval permanentným vyradením z indexu. Zaradí si však duplicitný obsah do svojho doplnkového indexu (Supplemental Index) .

Čo je to Supplemental Index?

V prípade, že nemôžete nájsť svoj web vo výsledkoch vyhľadávania v Google problémom môže byť, že Váš web je zaradený do Supplemental Indexu. Vtedy nieje odstránený ale je na chvoste výsledkov vyhľadávania.

Ako zistím či je môj web v Supplemental Indexe?

• Môj web je na internete krátko (to môže byť aj Sandbox)
• Zmenil som doménu a starý obsah som z Googlu neodstránil
• Obsah môjho webu je veľmi podobný ako na ostatných weboch

Ako sa dostať zo Supplemental Indexu?

Keď sa tam Váš web dostane tak máte v celku problém lebo z neho sa tak ľahko dostať nedá. Môžete ale spraviť nasledujúce veci ktoré by Vás z toho mohli dostať.

• Odkazujte na svoje stránky s čo najvyšším Pagerankom
• Tvorte jedinečné titulky a popisky (TITLE a DESCRITION)
• Tvorte jedinečný obsah (nepublikujte napríklad tlačové správy ktoré sa často kopírujú bez zmeny)

Ako zistím či moj web obsahuje duplicitný obsah? Cez Webmasters Tools aspoň duplicitné titulky

V nástroji od Googlu Webmasters Tools kde spravujete svoje weby a indexovanie v Google je nástroj ktorý zisťuje duplicitné titulky na Vašej stránke. Orem iného aj príliš dlhé alebo krátke. Ako základný nástroj pre detekciu to stačí. Nejaký komplexnejší problém s duplicitami však cez Webmaster Tools nezistíte…

Vzhľadom na to, že používam jeden hosting na ktorý mám maskované viaceré domény tak mi stačilo len maskovať doménu na sub-adresár môjho blogu. To ale spôsobí, že aj pôvodná adresa blogu bude funkčná.

Keď presuniem web na novú doménu tak všetky staré odkazy budú nefunkčné?

Áno, ak s tým nič nespravíte! Ak je to dostatočné množstvo odkazov prečo o traffic z nich prísť? Ak máte hosting s PHP a podporou modRewrite dá sa to veľmi elegantne vyriešiť. Pomocou modRewrite môžete na serveri definovať podmienku ktorá akúkoľvek URL presmeruje na novú doménu a tak nemusíte riešiť to ak nie všetko bude hneď zaindexované a ak niekto bude pristupovať zo starých výsledkov vyhľadávania bude presmerovaný na tú istú URL s novou doménou.

Ja som to vyriešil týmto kódom v .htaccess súbore:

RewriteCond %{HTTP_HOST}^blog.peteroravec.net
RewriteRule (.*) http://www.peteroravec.sk/$1 [R=301,QSA,L]

Tieto dva riadky kódu spôsobia že ak pristúpite napríklad z Googlu na starú doménu tak budete presmerovaný na novú doménu.

Čo na to povie Google?

Presmerovanie sa deje pod hlavičkou 301 takže podľa mňa je to OK. Google postupne staré odkazy odstráni i keď mu to bude trvať možno aj pár mesiacov. Treba si uvedomiť, že presúvanie webu na novú doménu sa nerobieva zrovna každý deň ale toto je riešenie ako sa to dá spraviť bezbolestne s tým, že neprídete o doterajší traffic.

A pravda je, že keď si pozerám jeho práce alebo tutoriály tak si hovorím: “ako dlho musí s tým človek robiť aby dokázal niečo také?”. Veľa jeho prác sú fotorealistické výtvory ktoré sú fakt špičkové.

Práca Berta Monroya vo Photoshope

K jeho prácam a tutoriálom som sa dostal nejak náhodne, do svojho iPodu som sťahoval video podcasty a viacmenej mi bolo jedno aké… hľadal som niečo čo budem pozerať v autobuse cestou do práce a nejak sa tam dostali. Celkom ma zaujali keď som ich začal pozerať.

Video podcast Berta Monroya sú dostupné na stránka internetovej televízie revision3.

Episode 94 – Add Magic to Photoshop

Ak to teda s Photoshopom a grafikou myslíte vážne tak sa trochu priučte a pozerajte tiež. Raz sa možno dostaneme na jeho úroveň. Takže sťahujte a pozerajte.

WP-PostRatings

URL pluginu: http://lesterchan.net/portfolio/programming/php/

Demo: http://lesterchan.net/wordpress/

Jednoducho hviezdičkovanie článkov užívateľmi, plugin len nahráte a do kódu vložíte jeden riadok kde sa následne budú zobrazovať hviezdičky pre hodnotenie článkov. Ako ochranu proti viacnásobnému hlasovaniu môžete využiť cookies, IP adresu alebo kombináciu IP adresy a Cookies.

Pri každom článku sa zobrazia ikonky pre hlasovanie

Ak chcete zobrazovať zoznam najlepších článkov prípadne článkov ktoré užívatelia najviac hviezdičkovali tak stačí aktivovať len potrebný widget ktorý je súčasťou pluginu. Ten si umiestnite kde potrebujete. Tento plugin je dobrý ak chcete vedieť aké články sa páčia návštevníkom vašeho webu a dodá mu to trošku interaktivity.

Nastaviť v administrácii môžete všetko od templatov s jazykom až po vzhľad jednotlivých ukazovateľov pre hlasovanie.

WP-Polls

URL pluginu: http://lesterchan.net/wordpress/readme/wp-polls.html

Demo (v pravom stĺpci): http://lesterchan.net/wordpress/

wp-polls plugin pre wordpress - administrácia

Od toho istého chlapíka ako plugin wp-postratings, je aj plugin WP-Polls. Čo sú klasické ajaxové ankety ktoré môžete zobrazovať ako widget alebo podľa ID. Ako zabezpečenie môžete použiť Cookies alebo IP adresu prípadne kombináciu IP a Cookies.

Pluginov na wordpress je veľa a tak časom napíšem aj o iných, zatiaľ by Vám mohli postačiť tieto dosť kvalitné.

Na čo sa dá použiť dávkové spracovanie akcií vo Photoshope?

Spracovanie akcií v dávke vo Photoshope znamená, že nejakú akciu (napríklad vami nahratú akciu práce s obrazom) program vykonáva hromadne a automaticky na veľké množstvo súborov. Medzi najjednoduchšie dávkové spracovanie môže byť napríklad hromadné zmenšovanie fotografií prípadne automaticky pridávaný vodoznak alebo copyright do vlastných fotografií. Možnosti batch funkcií sú ale veľmi obsiahle a umožňujú zautomatizovanie aj veľmi zložitých akcií s obrazom.

Čo sú akcie vo Photoshope?

Akcie vo Photoshope sú nahrané úkony s prácou s obrazom ktoré môžme stále “prehrávať” dookola na ľubovoľný obrázok. Je to vlastne zoznam úkonov ktoré ste spravili aby ste obrázok upravili do finálnej podoby.

Napríklad by sme si chceli vytvoriť akciu ktorá nám každú fotografiu otočí o 180 stupňov a zmenší o policu. V praxi to bude vyzerať tak, že si vo Photoshope otvoríte nejaký obrázok na ktorom vytvoríte akciu ktorú budete ďalej používať. Pri našej konkrétnej akcii by to mohlo vyzerať nejak takto. Spustíte nahrávanie, nástrojom pre výber označíte obrázok aby bolo Photoshopu jasné, že s ním budeme robiť a budeme naň aplikovať akcie. Ďalej použijeme nástroj na zmenšenie a otočenie, po vykonaní sa v nahrávanej akcii zobrazia  tieto úkony Pri nahrávaní sa vám vlastne zaznamenáva čo robíte tak, že sa to dá aplikovať na ľubovoľný obrázok.

Tu si ale treba uvedomiť, že možnosti akcií sú síce veľké ale obmedzené na určité nástroje a funkcie.

Čo sa s akciami vo Photoshope nedá nahrávať?

• Nahrávať sa nedajú cesty kreslené rukou pomocou nástroja pero (Pen)
• Ťahy štetcom vytvárané pomocou kresliacich nástrojov, zameriavacích a tiež nástrojov pre pridávanie odtieňu
• Voľby štetca sa nenahrávajú
• Tiež niektoré voľby použité v lište volieb, v paletách a dialogových oknách sa nemusia nahrať

Základná tvorba akcií vo Photoshope – tutoriál

Priznávam sa, bol som lenivý aby som sám napísal nejaký návod ako na to ale našiel som video na youtube ktoré to vysvetlí úplne v pohode, je v angličtine. popisuje základné vytvorenie a použitie akcie. Jedno video nahradí hromadu textov…

Ak to nepôjde tak ľahko s prvým videom, skúste aj toto

Dúfam, že článok bude prínosný a že sa naučíte pracovať s akciami, majú veľké možnosti ale práca s nimi si vyžaduje zo začiatku skúšanie typu pokus-omyl ale keď to zvládnete už sa ich nebudete vedieť vzdať.

Aký je to tabuľkový layout?

Tabuľkový layout je tvorený tagmi <table>, <td>, <tr>, a inými… Čo je na tom zlé? Práve to, že už z názvu je jasné že tabuľka je tabuľka a teda tabuľkový layout výhradne používať na zobrazovanie tabuľkových údajov.

Čo je na tom zlé keď to vyzerá oproti beztabuľkovému layoutu rovnako?

To, že tabuľky sa používali na tvorbu layoutu stránky je historicky dané tak ako sa web vyvíjal. Dnes to je síce ešte v hojnom počte používané i keď je to už zastaralí a v dnešnej dobe nevhodný spôsob tvorby layoutov.

Nevýhody tabuľkového layoutu sú:

• Neprehľadný zdrojový kód
• Viac zbytočného kódu = viac priestoru na chyby
• Viac zbytočného kódu = väčšia veľkosť súboru
• Pevne daná štruktúra ktorá sa ťažko mení
• Ak je layout tvorený tabuľkou pri zobrazovaní sa čaká kým sa nahrá obsah všetkých buniek (aj obrázkov) kým sa tabuľka zobrazí

Výhody beztabuľkového layoutu:

• Minimum zdrojového kódu
• štruktúra webu nieje priamo definovaná, nemusí byť daná tokom dokumentu (o zobrazenie štruktúry sa postará CSS)
• Ľahko udržateľný kód
• Pri beztabuľkovom layoute sa najprv zobrazí text a potom sa načítavajú obrázky (pri tabuľkách je to opačne)
• Menšia veľkosť súboru, rýchlejšie načítanie stránky

Tabuľkový layout iba na tabuľkové hodnoty

Keď objavíte možnosti beztabuľkového layoutu na tabuľky budete chcieť čo najskôr zabudnúť. Tabuľky však používajte aj naďalej (ťažko povedať ako to bude v novej verzii HTML5 či XHTML2) ale len pre zobrazenie tabuľkových hodnôt.

Pri beztabuľkovom layoute nahradia tabuľky tagy DIV a SPAN