3 spôsoby vloženia like buttonu na svoje stránky

Iframe

Tlačidlo sa vkladá cez tag iframe. Pôvodný spôsob a najmenej prispôsobiteľný. Výhoda je, že nie je potrebné vkladať do svojej stránky potrebné scripty aby sa button zobrazil. Tým ale, že je to iframe teda obdĺžnik ktorý zaberá nejaké miesto a obsah sa naťahuje z externej stránky nie je možné aby si iframe sám zabral toľko miesta koľko potrebuje. Ak nemáte znalosti javascriptu, HTML a facebook API tak siahnite po tomto riešení, je najjednoduchšie a najmenej prácne. Iframe verzia LIKE buttonu funguje len bez tlačidla send (odškrtnite ho).

XFBL tagy

Tlačidlo sa do HTML stránky vkladá cez tzv. XFBL tagy (značkovací jazyk od FB, niečo ako HTML len to zobrazuje elementy FB). Je potrebné do stránky vložiť  javascript of Facebooku s potrebným ID aplikácie aby bola daná stránka ako aplikácia.

HTML5 implementácia

Ak už používate na svojich stránkach HTML5 doctype tak je to jasná voľba. XFBML postupne vytlačí HTML5 spôsob. Výhoda je tá, že FB komponenty vložené cez HTML5 sú validné (narozdiel od XFBML) .Je potrebné do stránky vložiť  javascript of Facebooku s potrebným ID aplikácie aby bola daná stránka ako aplikácia.

Ako vygenerovať LIKE button?

Potrebný kód pre vloženie stránky si vygenerujte tu: http://developers.facebook.com/docs/reference/plugins/like/. Tu si dajte pozor na jednu vec! Ak použijete vloženie cez iframe je potrebné do parametra URL vygenerovať absolútnu URL adresu stránky ktorú chcete lajknuť.

Ak používate PHP môžete to spraviť napríklad takto:

<?php
function curPageURL() { 
$pageURL = 'http';  if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}  $pageURL .= "://";  if ($_SERVER["SERVER_PORT"] != "80") {   $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];  } else {   $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];  }  
return $pageURL; 
} ?>

<iframe style="overflow: hidden; width: 450px; height: 80px;" src="//www.facebook.com/plugins/like.php?href=<?php echo curPageURL(); ?>&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=80&amp;appId=40809102898" frameborder="0" scrolling="no" width="320" height="240"></iframe>

Pri iframe verzii si do parametra href "vyechujeme" funkciu curPageURL() a tak si zabezpečíme, že lajkovať budeme vždy aktuálnu verziu URL. Ak použijete XFBML verziu tak tá parameter URL nepotrebuje lebo defaultne použije stránku na ktorej bolo stlačené tlačidlo. Ak potrebujete z akejkoľvek URL lajkovať inú stránku tak stačí do parametra href podsunúť ľubovoľnú URL.

Ako podstrčiť vzhľad lajknutia na Facebooku?

Facebook používa Open Graph Protocol čo v jednoduchosti dokáže z webu urobiť objekt v rámci sociálnej siete. Teda sa dajú nad ním vykonávať akcie užívateľov na FB (čítanie, komentovanie, atď...). K čomu je to dobré? Nateraz na to aby sme si prispôsobili vzhľad našej stránky ak ju niekto vyzdieľa či lajkne na facebooku.

Ako podstrčiť vzhľad lajknutia?

To je našťastie úplne jednoduché a spočíva v umiestnení OpenGraph meta tagov do hlavičky stránky. Napríklad by to mohlo vyzerať pri webe takto.

<meta property="og:title" content="Vytvárame Facebook aplikácie I. dôležité zmeny z konferencie f8"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://www.peteroravec.sk/vytvarame-facebook-aplikacie-a-dolezite-zmeny-z-konferencie-f8"/>
<meta property="og:image" content="http://www.peteroravec.sk/wp-content/uploads/2011/10/facebookpic1.jpg"/>
<meta property="og:site_name" content="Peter Oravec Blog"/>
<meta property="fb:admins" content="XXXXXXXXXXXXX"/>

V políčku fb:admins dajte ID uyivatela ktorý má byť adminom. Ak použijete na stránke napríklad modul na komentovanie tak nastavením svojho ID vo fb:admins budete môcť moderovať komentáre.

Ako si overiť ako bude vyzerať môj lajk?

Keď sme si vymysleli meta tagy, textíky, popisky a všetko máme umiestnené v hlavičke HTML stránky by sa zišlo nejak overiť ako bude vyzerať náš like v skutočnosti a či neobsahuje chyby. Existuje nástroj ktorý sa volá Facebook Debugger (alebo aj Facebook Linter). Nájdete ho na tejto adrese: http://developers.facebook.com/tools/debug.

Tu jednoducho zadajte URL adresu článku (už FB objekt v Open Graph). Zobrazia sa informácie tak ako si ich Facebok dokáže vytiahnuť zo stránky a ako ich aj reálne vidí. Ak to nemáte dobre spravené tak Vás upozorní čo je nastavené zle (väčšinou typy a povinné polia).

FIX: Facebook nevididí moje zmeny na stránke (v tagoch)?!

S týmto "problémom" sa určite stretnete... Ako sa hráte s openGraphom a testujete si ako Váš like bude vyzerať sa môžete ľahko dostať do situácie, že lajknutý odkaz na webe má neaktuálne údaje. Tým, že FB má obrovskú návštevnosť tak tieto údaje ktoré sa nemenia často cachuje a obnovuje ich zriedka. Ak sa Vám stane, že lajk nesedí s aktuálnymi údajmi z debuggera je tomu ľahká pomoc.

Chodťe do Facebook debuggera a znovu dávajte overiť URL ktorá sa na Facebooku javí ako neaktuálna. Ak by toto nepomohlo tak pridajte k url adrese ľubovoľný parameter aby si skontroloval FB ako keby nový odkaz ktorý ešte nepozná... napríklad takto: http://www.peteroravec.sk/vytvarame-facebook-aplikacie-ii-ake-aplikacie-sa-daju-vytvorit-s-facebook-api?nieco Na koniec sme pridali otáznik s názvol ľubovoľného parametra. Link smeruje na to isté miesto len pre FB je nový a teda by ho mal preindexovať nanovo. Vačšinou tento postup pomôže.

Ten Open Graph je nevalidný! Dá sa to vyriešiť?

Ako náhle dáte do hlavičky stránky meta tagy tak rýchlo zistíte, že sú nevalidné. Ak si zakladáte na validite kódu tak pre XHTML sa to dá ľahko vyriešiť. Jednoducho zmeňte doctype svojej stránky na XHTML + RDFa a meta tagy open graphu prejdu validáciou. Môže to vyzerať napríklad takto:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="sk">

Dá sa ale zvalidovať HTML5? Implementácia FB v HTML5 (tagy) je validná ale bohužiať v čase písania tohoto článku je RDFa v HTML5 stále v štádiu vývoja takže to nespravíte. Ale časom to bude. Či to je alebo nieje validné je v podstate jedno. Fungovať to bude a to je dôležité.

Zhrnutie

Moje odporúčanie je: ak o weboch a javascripte neviete nič a potrebujete na webe like button tak použite iframe variantu. Ak používate už HTML5 používajte HTML5 implementáciu a kašlite na validitu. Ak ovládate javascript a rozumiete webom a nepoužívate HTML5 použite XFBL implemntáciu. Open graph meta tagy budete potrebovať všade takže postup je rovnaký. Jediný spôsob ako to mať validné (meta tagy open graph) je použitie XHTML + RDFa.

Ak sa Vám aj toto zdá zložité tak použite generátor open graphu ktorý si nájdete na webe. jeden je napríklad tu: http://www.metataggenerator.org/open-graph-meta-tags/. Open Graph ale nie je len o peknom lajku. To si ale vyžaduje už znalosť technológie, koho to zaujíma viac informácií je tu: https://developers.facebook.com/docs/opengraph/

Facebook Open Graph zahŕňa množstvo iných možností ale o tom možno nabudúce.

Podobné články

• 22. Október 2011 -- Vytvárame Facebook aplikácie II. Aké aplikácie sa dajú vytvoriť s Facebook API?
• 22. Október 2011 -- Vytvárame Facebook aplikácie I. dôležité zmeny z konferencie f8
• 20. September 2008 -- Zend Framework pre PHP

Facebook SDK a jeho nástroje

Facebook aktuálne obsahuje 4 SDK pre vývoj aplikácií a to konkrétne tieto:

• Javascript SDK - umožňuje prístup ku všetkým vlastnostiam Graph API a dialógovým oknám. Poskytuje bohatú funkcionalitu na strane klienta s možnosťami renderovania XFBML verzií sociálnych pluginov.
• PHP SDK - poskytuje prístup k Facebook platforme cez PHP. Pomáha pri integrácii Facebook autentifikácie a Graph API vo weboch fungujúcich na PHP.
• iOS SDK (iPhone & iPad) - obsahuje triedy pre vývoj Facebook aplikácii v Objective-C. Toto SDK je open source a poskytuje dialógové okná, prihlasovania a prístup k údajom Graph API.
• Android SDK - obsahuje triedy pre vývoj Facebook aplikácii pre platformu Android. Toto SDK je open source a poskytuje dialógové okná, prihlasovania a prístup k údajom Graph API.

Typy webových aplikácií

Konkrétne by sa dali webové aplikácie rozdeliť na približne 4 typy:

Statická FB záložka

Statická záložka na fanpage - je to klasická záložka ktorá obsahuje nejaký statický obsah a neposkytuje žiadnu FB funkčnosť. Je to len HTML kód natiahnutý do FB záloložky. Môže to vyzerať napríklad takto. Kedysi sa to dalo vytvárať cez tzv. FBML tagy ktoré ale Facebook už zrušil.

Takže ak už chcete natiahnuť obsah do FB tak musí byť uložený externe na nejakom webe a do záložky sa len natiahne. Záložky na FB používajú hlavne firmy ktoré na FB chcú propagovať svoje produkty či zobrazovať nejaký obsah. Aj keď je to len statický obsah ktorý nič nerobí aby ste ho mohli zobraziť ako záložku musí to byť FB aplikácia.

Facebook záložka s použitím FB API

Tým, že Facebook zrušil FBML tak akýkoľvek obsah záložky musí byť už iframe aplikácia a tak je možné do statickej záložky preniesť funkčnosť ako do klasickej FB aplikácie. Jediný rozdel je, že beží v záložke a v strednom páse na FB ktorá má šírku 520px. Takúto aplikáciu si môžete pozrieť napríklad tu. Je to klasická HTML stránka ktorá pomocou FB API vyvoláva share okno pre zdieľanie na nástenku. Môžete tu ale pomocou Javascript API alebo PHP API urobiť čokoľvek.

Facebook aplikácia s použitím FB API

Toto je tiež len externá stránka kde je nejaký obsah (do FB sa to len externe načítava cez iframe) ale môžeme tu použiť funckie API ako napríklad share na wall, like niečoho, prípadne si táto aplikácia vytiahne cez API potrebné údaje ktoré potrebuje (musíte aplikáciu potvrdiť).

Po najnovších zmenách sa tieto aplikácie prehrávajú v iframe ktorý už nemá len 760 pixelov ale už sa vie aj layout rozťahovať na 100%. Bude možné teda vytvárať aj rozmerovo veľké aplikácie ktoré sa doteraz nedali v layoute Facebooku vytvárať. Štandardne sa takto zobrazujú rôzne hry ktoré sú napríklad celé vo flashi ale pre rôzne akcie vyvolávajú okno pre zdieľanie na stenu a podobne.

Weby autentifikované a prepojené cez Facebook API

Doteraz to nie je až tak viditeľné ale s nástupom nového Timeline profilu a trendu pretvárania webov na sociálne objekty Open Graph protokolu bude prepojenie klasického webu s FB možno úplne bežnou vecou ako je dnes LIKE button. To, že FB záložky a aplikácie sa do Facebooku naťahujú externe znamená, že vedia fungovať aj bez nutnosti byť na priamo FB aby ste ich mohli používať.

Pekná ukážka použitia FB API je možnosť sa registrovať cez svoje FB konto na weboch ako napríklad IMDB (databáza filmov). Ak sa ale prihlásite cez FB stránka by mohla cez API pristupovať k rôznym údajom (napríklad aké filmy sa Vám páčia) ktoré jej povolíte, napríklad by si vedela zistiť filmy ktoré sa Vám páčia z Vašeho profilu. Tento trend už nastupuje a napríklad nový partner Facebooku Spotify už umožnuje použitie služby len cez FB konto. :-/

Sociálne pluginy

Sociálne pluginy prinesú užívateľom FB skúsenosť na základe jedného riadku HTML kódu na Vašej stránke. Asi najznámejší je LIKE button ktorý je dnes skoro všade. Pluginov je ale o dosť viac. Dokonca som na tomto blogu vložil aj klasické FB komentáre cez jeden z pluginov. S príchodom Timeline profilu budeme ponovom stále častejšie vidieť tlačidlo "Add to my timeline" ktoré nás pripraví o dosť súkromia. :-/Na základe jedného povolenia bude môcť publikovať čo čítate prípadne akúkoľvek inú činnosť.

Použití FB API je samozrejme viac, toto bolo približné zhrnutie pre lepšiu predstavu aké aplikácie je možné vytvárať. Ak chcete začať tak skočte rovno sem.

Podobné články

• 22. Október 2011 -- Vytvárame Facebook aplikácie I. dôležité zmeny z konferencie f8
• 25. Január 2012 -- Vytvárame Facebook aplikácie III. Ako vytvoriť pekný LIKE z Vašeho webu

Facebook sa v poslednej dobe dosť zásadne zmenil (stále mení) a nastavil trend v ktorom sa každá naša činnosť na webe bude môcť odraziť vo FB v podobe novej časovej osi Timeline ktorá zaznamenáva náš život.

Na jednej strane strata súkromia na druhej (možno nepríjemný) nastupujúci trend nových webových aplikácií na internete.

O čom bude tento seriál?

Vysvetlíme si, čo všetko sa dá a nedá vytvoriť na FB platforme a ukážeme si ako s pomocou FB dosiahnuť lepšiu návštevnosť a lepšie predaje na svojich stránkach. Ukážeme si, že FB nie je len platformou pre mini otravné FB aplikácie ale že môže byť použitý aj pri solídnych veľkých aplikáciách kde využijeme možnosti FB API naplno.

Ako sa mení Facebook od konferencie f8?

V San Franciscu sa 22.9.2011 konala konferencia f8 kde boli predstavené veľké novinky v platforme Facebook. Konkrétne sú 2 veľké a množstvo malých ktoré sa postupne budú sprístupňovať. Aktuálne je to ale zmes zmien pre developerov (staré API sa prestávajú používať, nutnosť certifikátov pre aplikácie, atď...) a vylepšení ktoré postupne FB zavádza. (ak chcete nový layout skúste si nastaviť anglický jazyk).

Timeline profil

Facebook postupne zmení každému jeho klasický profil na niečo v podobe časovej osi ktorá bude môcť ukázať život kohokoľvek usporiadaný chronologicky. Prvá vec čo ma napadla keď som si ho aktivoval (ako ho aktivovať už teraz) bolo, že sa tam dosť strácam. Pôsobí to dosť neprehľadne a po prvom spustení to obsahuje množstvo obsahu ktorý je potrebne schovať (hide from timeline). Čo mi ale vadí viac, je že facebook znemožnil určité úkony v profile a už jednoducho nemáte plnú kontrolu nad tým kto čo vidí a komu čo publikujete.

Napríklad predtým ak ste niekomu napísali na jeho nástenku tak samozrejme FB toto vypublikoval do Vašeho profilu v štýle "XY napísal na nástenku užívateľa..." Ak ste ale túto aktivitu chceli schovať aby to napríklad všetci nevedeli ale informácia tam ostala stačilo otvoriť svoj profil a jednoducho túto hlášku z neho vymazať. Správa v profile užívateľa ktorému ste písali ostala a nikto o tom nemusel vedieť.

V novom profile ale už nemáte inú možnosť po kliknutí na príspevok ako ho len vymazať. Zrazu všetci vedia, že ste niekomu písali na nástenku. Toto sa vzťahuje aj na komentáre. Ak už komentujete všetci priatelia vedia čo a komu a neschováte sa.

Nový typ aplikácií ktoré Vám môžu zobrať súkromie

S novým profilom prichádza aj zmenený layout facebooku do ktorého pribudol tzv. ticker v pravom stĺpci kde sa nachádza aj chat. Tam sa zobrazujú rôzne akcie Vašich priateľov. V strednom stĺpci sa zobrazujú už len tie najdôležitejšie kde niektoré môžete určiť ako dôležité a budú sa nejakým spôsobom topovať.  Čo je ale dôležité teraz bude môcť Facebook publikovať akúkoľvek akciu ktorú v nejakej aplikácii vykonáte.

Napríklad,

• v kuchárskej aplikácii by to mohlo vyzerať napríklad takto: "XY uvaril párky pomocou aplikácie Varenie na FB"
• portál s bulvárom by mohol publikovať správy ako: "XY si prečítal tento článok (link)"
• portál s hrami by mohol publikovať niečo ako: "XY práve dohral hru AB"
• internetový obchod zase rovno vypublikuje čo ste si kúpili: "XY si kúpila novú kabelku pomocou aplikácie Obchod"
• prípadne portál na sťahovanie by mohol rovno začať publikovať: "XY si práve stiahol hru pomocou aplikácie Stahovac"

Kam to smeruje?

Tu ale nastáva jeden obrovský problém s ktorým platforma časom bude musieť počítať. Strata súkromia a toho čo sa bude v rámci Vašeho profilu na FB diať na základe kliku na jedno jediné tlačidlo. Možno to znie hrozivo ale momentálne to tak skutočne vyzerá. Že ak dáte povolenie aplikácii raz tak už nemáte možnosť rozhodovať čo, ako a kedy bude robiť. Buď ju zakážete úplne alebo budete tolerovať čo Vám v profile zobrazí. Je tu obrovský priestor pre špekulantov, spamerov a hackerov.

Celkovo zmeny ktoré Facebook robí sú pre jeho platformu posun vpred a umožní tvorbu nových druhov aplikácií okrem toho si ešte viac na seba naviaže partnerov ako napríklad Spotify. Daňou za to bude strata súkromia ak sa FB nebude správne používať.

Podobné články

• 22. Október 2011 -- Vytvárame Facebook aplikácie II. Aké aplikácie sa dajú vytvoriť s Facebook API?
• 25. Január 2012 -- Vytvárame Facebook aplikácie III. Ako vytvoriť pekný LIKE z Vašeho webu

Tiež sa tu prejavila značná rozdielnosť v rýchlosti renderovania tejto fotogalérie.

V posledných verziách Chromu, Firefoxu a Opera prehliadača nebol s podporou CSS3 rotation žiadny problém i keď je potrebné ich zapísať pomocou prefixu pre konkrétny prehliadač. Ako sa ukázalo Internet Explorer (vôbec som nečakal, že mi to uľahčí) nepodporuje nič poriadne z CSS3 a tak som musel siahnuť po jeho vlastných (hnusných) riešeniach aby som docielil "požadovaný" efekt.

Rotácia elementov

Pomocou CSS3 môžete naklopiť ľubovoľný HTML element (DIV, text, obrázky, formuláre. celé stránky) do rôzneho uhlu. Vzhľadom na to, že reálna podpora CSS3 ešte hodnú dobu nebude už dnes môžeme želaný efekt docieliť CSS zápismi pre jednotlivé rendrovacie enginy konkrétneho prehliadača. Pre moje použie som si vystačil s otočením alementov len pod uhlom a nie aj do priestoru.

Pre bežné moderné prehliadače je to možné zapísať takto:

-webkit-transform: rotate(-25deg); /* zápis pre Chrome a Safari */
-moz-transform: rotate(-25deg);    /* zápis pre Firefox */
-o-transform:rotate(-25deg);       /* zápis pre Operu od verzie 9 */
rotation: -25deg;                  /* štandardný zápis, zatiaľ nepodporovaný */

Internet Explorer a rotácia objektov

Na otočenie elementov v IE môžete použiť 2 spôsoby. Ak potrebujete pootočiť element vždy o 90 stupňov tak použite nasledujúci zápis:

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

• 0 - bez otočenia
• 1 - otočené o 90 stupňov
• 2 - otočené o 180 stupňov
• 3 - otočené o 270 stupňov

V prípadoch kedy potrebujete niečo otočiť o 90 stupňov v IE je táto možnosť určite jednoduchšia ako nasledujúca.

Otočenie elementov v IE o ľubovoľný uhol? Ufff... ale dá sa to!

Na moju galériu som potreboval aby fotografie boli pootáčané v ľubovoľnom uhle. Dalo by sa to spraviť tak, že si vytvorím už pootáčané obrázky v PNG ale veľkosť takýchto obrázkov bez kompresie by bola veľmi veľká a nikto by nečakal tak dlho aby sa mu stránka natiahla. Všetky ostatné prehlaidače sa dali ľahko vyriešiť a jediný oriešok (alebo radšej orech) na rozlúsknutie bol už len IE.

Pre otočenie elementov v IE existuje filter s názvom: progid:DXImageTransform.Microsoft.Matrix. Ten okrem otáčania umožňuje aj naklápanie v priestore a scaling. Ako je zvykom tak syntax Microsoft filtrov pre IE je tak ťažkopádny, že si ho proste nezapamätáte ani za nič. Na prvý pohľad tam ani nie je nič logické a napríklad také otočenie elementu o 45° vy sa zapísalo nejak takto:

-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=-0.70710678, M21=0.70710678, M22=0.70710678,sizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=-0.70710678, M21=0.70710678, M22=0.70710678,sizingMethod='auto expand');

Ako vypočítať hodnoty pre otočenie?

Najjednoduchšie je použiť CSS Matrix Rotation generátor ktorý Vám vygeneruje CSS pre otočenie elementu pre všetky prehliadače. Viac informácií o parametroch filtra nájdete na Microsoftackej stránke.

Výkon prehliadača a antialiasing

Ak si pozriete moju galériu na peteroravec.com v rôznych prehliadačoch tak rýchlo zistíte, že rýchlosť stránky je rôzna (i keď aplikovaných efektov je veľa). V Google Chrome (verzia 5.0.375.125 beta) je galéria rýchla ale má strašne zubaté hrany obrázkov. V ostatných prehliadačoch sú hrany ostré a pekné ale aj rýchlosť sa tu mení. U mňa na PC (quad core 2,4GB) vo Firefoxe presun fotiek myšou mierne seká. V Opere a IE to ide lepšie.

Tieto nedostatky dúfam vyrieši podpora GPU ktorá má byť vo Firefoxe 3.7 a najnovšom IE9. Uvidíme do budúcnosti.

I keď sme si teraz ukázali ako dosiahnuť určitý efekt vo všetkých prehlidačoch nie je to ideálne riešenie a chce to pevné nervy. Obávam sa ale, že na časy kedy už nebudeme riešiť podporu CSS3 si počkáme aspoň 5 rokov kým sa svet nezbaví IE6, IE7 a IE8. V prípade, že sa Vám podobné riešeni nepáči pozrite si otáčanie elementov založené na Javascripte a Jquery. http://code.google.com/p/jqueryrotate/

Podobné články

• 22. November 2008 -- Najvhodnejšia šírka webu? 960 Grid system
• 5. September 2008 -- Ako vytvoriť ikonku v adresnom riadku prehliadača – FavIcon
• 28. August 2008 -- Internet Explorer 6 je brzda internetu
• 16. Júl 2008 -- Prečo používať beztabuľkový layout v HTML? Tabuľkový sa už nenosí!
• 14. Júl 2008 -- Ako horizontálne vycentrovať obsah – DIV na stred v CSS?

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

Podobné články

• 22. Október 2008 -- Oživil som blog, všimli ste si?
• 22. Január 2011 -- biOrb Life Square 30, imidžové akvárium do obývačky (recenzia)
• 16. August 2008 -- Prosím všetkých blogerov…

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;
}
}
}

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)'
);

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));

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');

Podobné články

• 18. Február 2009 -- Zend Framework po lopate: Použitie View Helperu
• 23. Január 2009 -- Ako vytvoriť vlastný validátor pre Zend Framework: overenie hesiel
• 20. September 2008 -- Zend Framework pre PHP
• 7. August 2008 -- Ako presunúť web na novú doménu a neprísť o návštevnosť z Google
• 14. Marec 2008 -- PHP5 a MySQL5 na localhoste? S Wampserverom nič ľahšie…

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.

Podobné články

• 18. Február 2009 -- Zend Framework po lopate: Použitie View Helperu
• 6. August 2008 -- PixelPerfect: Bert Monroy a jeho super video podcasty na Revision3
• 16. Júl 2008 -- Photoshop Batch – spracovanie obrázkov v dávke

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;

  }        

}

Zend_View_Helper_LoggedInUser

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(); ?>

$this->view->LoggedInUser();

Podobné články

• 21. Marec 2010 -- Zend Framework: validátor voľnej domény
• 23. Január 2009 -- Ako vytvoriť vlastný validátor pre Zend Framework: overenie hesiel
• 20. September 2008 -- Zend Framework pre PHP
• 27. Apríl 2009 -- Tutoriál: 3D text vo Photoshope
• 7. August 2008 -- Ako presunúť web na novú doménu a neprísť o návštevnosť z Google

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

<pre>&lt;?php
class My_Validate_PasswordConfirmation extends Zend_Validate_Abstract
{
    const NOT_MATCH = 'notMatchPasswords'; 

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

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

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

        $this-&gt;_error(self::NOT_MATCH);
        return false;
    }
}
?&gt;</pre>

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.

Podobné články

• 21. Marec 2010 -- Zend Framework: validátor voľnej domény
• 18. Február 2009 -- Zend Framework po lopate: Použitie View Helperu
• 20. September 2008 -- Zend Framework pre PHP
• 7. August 2008 -- Ako presunúť web na novú doménu a neprísť o návštevnosť z Google
• 14. Marec 2008 -- PHP5 a MySQL5 na localhoste? S Wampserverom nič ľahšie…

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é.

Podobné články

• 9. Február 2010 -- Užívateľská recenzia Motorola Milestone
• 25. November 2009 -- Mám 10 pozvánok do Google Wave! Chce niekto?
• 17. Február 2009 -- Google Sync: synchronizujte kontakty a kalendár s Push technológiou
• 1. November 2008 -- Google Analytics a nové vylepšenia
• 26. September 2008 -- Google Moderator, vylepšite svoj projekt s touto službou

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

Podobné články

• 16. Júl 2008 -- Prečo používať beztabuľkový layout v HTML? Tabuľkový sa už nenosí!
• 10. August 2010 -- CSS3 v praxi: rotácia elementov pre všetky prehliadače (IE5.5+)
• 5. September 2008 -- Ako vytvoriť ikonku v adresnom riadku prehliadača – FavIcon

Vytvorenie ikony

Ikonka musí mať rozmer najlepšie 57x57 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.

Podobné články

• 20. Jún 2009 -- Problémy s Apple iPhone OS 3.0 Update: jedno veľké sklamanie alebo ako po update nič nefungovalo!
• 18. Jún 2009 -- Vypnutie dátových prenosov v Apple iPhone bez Jailbreaku
• 21. Marec 2009 -- Pustý hrad, bicyklovanie a náš prvý pokus o geocaching s iPhonom 3G
• 17. Február 2009 -- Google Sync: synchronizujte kontakty a kalendár s Push technológiou
• 31. December 2008 -- Sim City 3000 pre iPhone je tu… príjemné prekvapenie!

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/

Podobné články

• 21. Marec 2009 -- Pustý hrad, bicyklovanie a náš prvý pokus o geocaching s iPhonom 3G
• 31. December 2008 -- Sim City 3000 pre iPhone je tu… príjemné prekvapenie!
• 10. Október 2008 -- Perfektné závody Asphalt4 Elite Racing na iPhone
• 8. Október 2008 -- Kvalitný IM pre iPhone: Beejive
• 20. Jún 2009 -- Problémy s Apple iPhone OS 3.0 Update: jedno veľké sklamanie alebo ako po update nič nefungovalo!

Č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.

Podobné články

• 21. Marec 2010 -- Zend Framework: validátor voľnej domény
• 18. Február 2009 -- Zend Framework po lopate: Použitie View Helperu
• 23. Január 2009 -- Ako vytvoriť vlastný validátor pre Zend Framework: overenie hesiel
• 25. Január 2012 -- Vytvárame Facebook aplikácie III. Ako vytvoriť pekný LIKE z Vašeho webu
• 7. August 2008 -- Ako presunúť web na novú doménu a neprísť o návštevnosť z Google

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.

Podobné články

• 28. August 2008 -- Internet Explorer 6 je brzda internetu
• 18. Jún 2009 -- Vypnutie dátových prenosov v Apple iPhone bez Jailbreaku
• 17. Máj 2009 -- Dropbox: synchronizácia súborov a adresárov s priateľmi a viacerými PC
• 26. September 2008 -- Google Moderator, vylepšite svoj projekt s touto službou
• 31. Január 2007 -- Herná legenda: Fallout

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 16x16 alebo 32x32. 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 16x16 pixelov lebo do adresného riadka aj tak zobrazuje len 16x16 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.

Podobné články

• 10. August 2010 -- CSS3 v praxi: rotácia elementov pre všetky prehliadače (IE5.5+)
• 22. November 2008 -- Najvhodnejšia šírka webu? 960 Grid system
• 16. Júl 2008 -- Prečo používať beztabuľkový layout v HTML? Tabuľkový sa už nenosí!

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é...

Podobné články

• 17. Júl 2008 -- Perfektný Google Calendar a pripomienkovanie aj cez SMS

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.

Podobné články

• 1. August 2008 -- Najlepšie pluginy pre Wordpress (1.časť)
• 9. Október 2008 -- Wordpress aplikácia pre Váš iPhone

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...

Podobné články

• 9. Február 2010 -- Užívateľská recenzia Motorola Milestone
• 25. November 2009 -- Mám 10 pozvánok do Google Wave! Chce niekto?
• 17. Február 2009 -- Google Sync: synchronizujte kontakty a kalendár s Push technológiou
• 6. December 2008 -- Google team sa predvádza v Google Maps
• 1. November 2008 -- Google Analytics a nové vylepšenia

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.

Podobné články

• 21. Marec 2010 -- Zend Framework: validátor voľnej domény
• 9. Február 2010 -- Užívateľská recenzia Motorola Milestone
• 25. November 2009 -- Mám 10 pozvánok do Google Wave! Chce niekto?
• 18. Február 2009 -- Zend Framework po lopate: Použitie View Helperu
• 17. Február 2009 -- Google Sync: synchronizujte kontakty a kalendár s Push technológiou