Archive for the ‘Jak dělám weby’ Category

Pro svůj nový projekt infosit.cz a staronový projekt o dárcích darem.info jsem se rozhodl vytvořit systém pro vytváření webů na jednotlivých subdoménách. Po nějaké době jsem zjistil, že je možné aktivovat takový systém přímo ve wordpressu od verze 3.0. V tomto článku popíšu jak na to a s jakými problémy jsem se setkal.

Ze všeho nejdřív je nutné otevřít soubor wp-config.php a napsat do něj nový parametr:

define('WP_ALLOW_MULTISITE', true);

Po té se v administraci wordpressu v části nástroje zobrazí nová položka „Síť webů“. Po kliknutí se nám zobrazí možnosti, jestli chceme vytvořit síť jako subdomény nebo jako podadresáře. Dále název sítě a administrátorský email. V našem případě si zvolíme sítě na subdoméně. A název zvolíme infosíť.

Stránka s nastavením sítě webů

Stránka s nastavením sítě webů

Po kliknutí na „instalovat“ se síť nainstaluje a vypíšou se další požadavky, které se musí splnit, jinak síť nebude funkční.

  1. Vytvořit soubor blogs.dir v adresáři wp-content
  2. Upravit soubor wp-config.php
  3. Upravit soubor .htaccess

Jak soubory upravit je popsáno na stránce, která se zobrazí po instalaci.

Stránka po instalaci sítě

Stránka po instalaci sítě

Zásadní problém nastává, když web není umístěn v kořeni webu, tak jak wordpress předpokládá, ale používáte mod_rewrite k podstrčení adresáře s wordpressem. V takovém případě budou tyto úpravy špatné a wordpressová síť nebude fungovat.

Jak to změnit?

V dalším textu budu předpokládat správné nastavení .htaccess v nadřazených adresářích, tak že wordpress bude zobrazen na adrese infosit.cz a taky na všech subdoménách *.infosit.cz.

Soubor .htaccess je vygenerován špatně protože wordpress jej generoval jakoby se nacházel v podadresáři, ale my jej zobrazujeme jako hlavní doménu a síť chceme na subdoménách. Proto jej upravíme následovně:

RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]

# uploaded files
RewriteRule ^files/(.+) wp-includes/ms-files.php?file=$1 [L]

RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule . index.php [L]

Jediné co se změní, bude položka RewriteBase.

V dalším kroku musíme změnit soubor wp-config. Stejně jako v předchozím případě změna spočívá pouze v odstranění nadbytečné cesty k instalaci wordpressu.

define( 'MULTISITE', true );
define( 'SUBDOMAIN_INSTALL', true);
$base = '/';
define( 'DOMAIN_CURRENT_SITE', 'www.infosit.cz' );
define( 'PATH_CURRENT_SITE', '/');
define( 'SITE_ID_CURRENT_SITE', 1 );
define( 'BLOG_ID_CURRENT_SITE', 1 );

Položka administrace webů

Položka administrace webů

Tento kód pak přidáme do souboru wp-config.php.

Po té co všechno uložíte, můžete obnovit stránku a budete vyzváni k novému přihlášení. Když ale kliknete na možnost administrace webů (vpravo nahoře u uživatelského účtu), budete nemile překvapení, protože web se vám nejspíš zacyklí.

K tomu aby vše fungovalo na 100% je nutná poslední úprava v databázi. Přihlásime se do phpMyAdmina a vybereme databázi s WordPressem. Najdeme tabulku wp_blogs, kterou si zobrazíme.

Položka blogu v wp_blogs

Položka blogu v wp_blogs

Ve sloupci patch je opět přebytečná cesta, kterou je třeba odstranit. Klikneme na „upravit“ a v kolonce patch ponecháme pouze lomítko „/“, zbytek odstraníme.

Editace položky patch

Editace položky patch

Kliknutím na tlačítko proveď, uložíme změny. Nyní by už síť měla běžet naprosto bez problémů, proto Vám přeji hodně štěstí při vytváření nových a zajímavých webů.

V případě, že máte wordpress v kořeni webu, pak tento návod nebudete potřebovat. Já jsem se s tímto problémem setkal na hostingu wedos, kdy web není v kořeni webu, ale je vždy podstrčen pomocí htaccess. Samozřejmě že je možné web nahrát přímo do kořene a používat jej tam v tom je hosting wedos upravdu univerzální ale mi vyhovuje právě to podstrkávání, protože tak mám mnohem volnější ruku při vytváření subdomén nebo aliasů.

Jak aktivovat síť webů přímo na stránkách wordpressu můžete najít zde.

SEO

Když mám práci týkající se SEO optimalizace webu často slýchávám věty typu: Chceme, aby byl náš eshop na prvním místě ve vyhledávání. Už se ale málokdy stane, že by se někdo zajímalo na jaké slova a ještě méně často se stane, že by se někdo zajímal o to, kdo skutečně na webové stránky přijde. Jestli jen uživatel nebo zákazník. Mnoho jednotlivců ale i firem dělající SEO této nevědomosti také zneužívá. Zabývat se pouze vyhledávači a pozicemi je chyba.

Pojďme se teď podívat na jednoduchou logiku, z níž je zcela zřejmé, že optimalizace pro vyhledávače je (s trochou nadsázky) skoro zbytečná.

  1. Idea zadavatele: Chceme být první ve vyhledávačích.
  2. Jak na to? … Optimalizujeme pro vyhledávače.
  3. Použijeme magické SEO a dáme vyhledávačům, co chtějí.
  4. Budeme na prvních místech ve vyhledávání.

Všimli jste si, že zde vůbec nejsou zmínění zákazníci, ale celé se to točí okolo vyhledávačů? Teď se na to podíváme ze strany jakéhokoli vyhledávače, který chce uspokojit své uživatele. Idea je jednoduchá. Spokojený uživatel => vracející se uživatel => ziskový uživatel.

  1. Idea: Chceme mít spokojené uživatele.
  2. Jak na to? … Nabídneme uživatelům stránky, kde najdou co chtějí.
  3. Nechceme stránky, kde jsou uživatelé nespokojení.
  4. Stránky, kde se uživatelům nelíbí, budou mít menší váhu.

Co z toho vyplývá?

  • Při optimalizaci webů chceme uspokojit vyhledávače.
  • Vyhledávače chtějí uspokojit své uživatele (lidi co hledají).
  • Stačí optimalizovat tak aby byli spokojení uživatelé, a vyhledávače si vás najdou sami.

Teď si možná říkáte „Tak fajn budu dělat vše pro své zákazníky a mám po starostech“. To je správně, ale samo o sobě to nestačí. Zároveň také musíte dělat vše i pro své potencionální zákazníky. Ano, uživatelé Vás musí na internetu najít ale musí u vás najít přesně to, co zvenku prezentujete. Správné cílení je základ.

Jak z hlediska SEO na spokojené uživatele?

Nejprve je třeba si uvědomit, co vlastně na svých webových stránkách nabízíte a zjistit si jakým způsobem to lidé na webu vyhledávají. Když toto zjistíte, pak je podle toho dobré upravit strukturu webu a na tyto fráze optimalizovat. Je důležité si uvědomit, že lidé, kteří přijdou na váš web, musí dostat přesně to, co vyhledávali, pokud to nedostanou, pak odchází. Nemá smysl lákat uživatele na něco, co na webu není. Pokud máte na webu co nabídnout a má obsah webu pro uživatele na internetu svou hodnotu, pak je to kvalitní základ pro SEO optimalizaci. Ta je pak jen prostředek jak svou hodnotu prodat. seo optimalizace může být je jen tak dobrá jak dobrý je samotný web. Pokud máte být nejlepší, pak musíte nabídnout víc než ostatní.

 

SEO

Mnoho lidí si stále ještě myslí, že samotným vytvořením webové stránky jsou automaticky „na internetu“. To je ovšem pravda pouze z části. Webová stránka sice na internetu bude, ale dostanou se na ní pouze ti, co znají její adresu, nikdo jiný. K tomu aby byla k nalezení, se musí stát součástí většího celku a spojit se s ostatními stránkami na internetu.

Internet jako velká pavučina

Né nadarmo se ve zkratce www vyskytuje slovo web (pavučina). Představte si běžnou pavučinu, ta má své cesty a své uzly. Pokud se přeruší nějaká cesta, pak je daný uzel hůře dostupný a pokud se přeruší všechny cesty, pak uzel v podstatě přestane existovat. Stejně tak funguje internet. Každá webová stránka představuje uzel a každý odkaz na internetu představuje cestu. Pavouk pak představuje běžného uživatele, který může chodit pouze po cestách. Čím víc cest vede k Vašemu uzlu (Vaší stránce), tím lépe je v pavučině (v internetu) dostupný a pavouk (uživatel) se k němu snáze dostane. Čím méně cest k němu vede tím to má pavouk (uživatel) komplikovanější.

Pokud vytvoříte novou webovou stránku, pak k ní nevede žádná cesta a uživatel se k ní nemůže nijak dostat. A pokud ani neví, že existuje, pak ani neví, že se na ní chce dostat. A právě tento problém řeší SEO optimalizace. Základem SEO optimalizace je vytvoření dostatečného množství cest aby byla Vaše stránka dostupná jak pro vyhledávače, tak pro běžné uživatele.

Závěrem

V případě webových stránek není tato pavučina vůbec jednoduchá a obsahuje spoustu cest k různým cílům. Navíc do hry vstupují další prvky jako je zaměření stránek, typ stránek, kvalitní obsah, klíčová slova a spousta dalších faktorů, o kterých si povíme příště. Tento článek měl jen ukázat proč je SEO optimalizace tak důležitá.

Můžete mít web nabitý spousty funkcemi, navržený od nejlepšího UX specialisty, můžete jej mít od nejlepšího webdesignéra světa, můžete mít texty napsané od nejlepší copywritera, ale pokud nepůjde na internetu najít, pak je vám k ničemu.

Objednáním webových stránek u mě je SEO optimalizace základ.

Stín pod elementem

Stín pod elementem

Dnes se opět budeme věnovat možnostem CSS3 a knihovně PIE. V minlých článcích jsme si pověděli jak vytvořit kulaté rohy, na co si dát u knihovny PIE pozor a jak vytvářet lineární přechody. Dnes si povíme jak na stíny pod blokovými elementy.

Dříve se pro vytvoření stínů využívaly obrázky na pozadí, které vypadaly jako stín. Poměrně obtížně se tak řešily případy, kdy na pozadí byl přechod nebo nějaký vzorek. Zjednodušení přinesly PNG obrázky a jejich poloprůhlednost, se kterou však byly vždy problémy v internet exploreru. V CSS3 je možné vytvořit stín pod blokovým elementem jednoduchým příkazem:

box-shadow: #666 0px 2px 3px;

Jednotlivé části příkazu znamenají následující:

box-shadow: barva-stínu posunutí-ve-směru-x posunutí-ve-směru-y šířka-rozmazání;

Stejně jako tomu bylo u definice kulatých rohů i u lineárního přechodu na pozadí, tak ani zde není tato vlastnost standardně podporována a je nutno využít vendor prefixy jednotlivých prohlížečů. V případě internet exploreru opět využijeme knihovnu PIE. Celý zápis fungující ve všech webových prohlížečích bude vypadat takto:

-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
behavior: url(/PIE.htc);

Soubor PIE.htc si můžete stáhnout na oficiálních stránkách a musí být umístěn v kořenovém adresáři daného webu. Jak na knihovnu PIE se můžete dočíst v článku o kulatých rozích nebo v dalších článcích o PIE zde.

Vykreslení stínu, kulatých rohů a přechodu na pozadí je samozřejmě možné libovolně kombinovat. V případě problémů si zkuste přečíst článek na co si dát u PIE pozor.

 

Lineární přechod

Lineární přechod

Další článek o možnostech CSS3 a knihovně PIE, které ulehčí běžnému kodérovi práci, je zde. Dnes se budeme věnovat lineárním přechodům a to konkrétně lineárním přechodům směrem shora dolů. Bez CSS3 bylo nutné vytvářet lineární přechody na pozadí pomocí obrázků. Zkrátka a dobře se přechod nakreslil, zúžil na jeden pixel, vložil do CSS jako obrázek na pozadí a nastavilo se opakování v potřebné ose. V CSS3 nyní existuje příkaz linear-gradient, který vás od této činnosti oprostí.

Stejně jako tomu bylo i u kulatých rohů, tak ani zde není tento příkaz přímo podporován a je nutno využít vendor prefixů. Zápis v moderních prohlížečích pak vypadá takto:

background-color:#E9E9E9;
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#f1f1f1), to(#e1e1e1));
background-image: -moz-linear-gradient(#f1f1f1, #e1e1e1);
background-image: linear-gradient(#f1f1f1, #e1e1e1);

První barva vždy určuje barvu na začátku přechodu (nahoře) a druhá na konci (dole). Pro případ, že by nějaký prohlížeč příkaz neznal, pak je na začátku definována jednoduchá barva, která bude v takovém případě zobrazena. Přechod se vždy roztáhne od začátku elementu po jeho konec. Tímto zápisem se zbavíme všech kliček pomocí obrázků a vytvoříme přechod jediným řádkem v CSS souboru.

Jak by to bylo jednoduché, kdyby opět nenastal problém jménem Internet explorer, který ani jednu konstrukci nepodporuje. A v IE9 není ani možné využít knihovnu PIE, protože tam vykreslování přechodu nefunguje. V zásadě existují 2 řešení. Jedno snazší a druhé složitější. A proč se učit i to složitější? Protože to snazší má určité omezení.

  1. Použijeme příkaz filter.
  2. Využijeme podpory svg obrázků u IE9.

Příkaz filter

Definice přechodu pomocí příkazu filter vypadá následovně:

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a1d2d8',endColorstr='#ebecfc');

Stejně jako v předchozím případě bude první barva nahoře a druhá dole. Celá definice přechodu fungující ve všech běžně používaných prohlížečích pak vypadá takto:

background-color:#E9E9E9;
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#a1d2d8), to(#ebecfc)); /* Chrome a Safari*/
background-image: -webkit-linear-gradient(#a1d2d8, #ebecfc); /* Chrome a Safari*/
background-image: -moz-linear-gradient(#a1d2d8, #ebecfc); /* Opera */
background-image: -o-linear-gradient(#a1d2d8, #ebecfc); /* Opera */
background-image: -ms-linear-gradient(#a1d2d8, #ebecfc); /* pro IE10 */
background-image: linear-gradient(#a1d2d8, #ebecfc); /* CSS3 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a1d2d8',endColorstr='#ebecfc'); /* IE9 a starší*/
zoom:1; /* Bez zoomu se přechod v IE nezobrazí */

Zdá se vám, že je tam toho hodně? A to je ta snazší varianta řešení, a jak jsem psal výše, tak má bohužel své omezení. Pokud chcete na elementu současně s přechodem definovat i zoblené rohy, pak se pozadí stejně vždy vykreslí jako obdélník. Toto řešení je tak určené jen pro případy, kdy chcete definovat přechod na pozadí elementu, který má ostré rohy. Typicky jde např. o pozadí celého webu.

Jaký je problém při použití kulatých rohů?

Do verze 8 internet exploreru není potřeba nic řešit a stačí vykreslit jak přechod, tak kulaté rohy pomocí knihovny PIE jednoduchým příkazem:

/* Příkazy pouze pro IE */
border-radius:5px;
-pie-background: linear-gradient(#a1d2d8, #ebecfc);
behavior: url(/PIE.htc);

Jak na knihovnu PIE se můžete dočíst v předchozím článku o kulatých rozích nebo v dalších článcích o PIE zde.

Bohužel tento zápis nevykreslí pozadí v IE9 a při použití předchozího filtru se přes kulaté rohy vykreslí obdélník s přechodem, který už má ale rohy ostré. Pokud je přechod jen nepatrný, pak se můžete smířit s tím že v IE9 prostě nebude a nemusíte to dále řešit. Pokud je však přechod výrazný a je třeba ho mít na stránce, pak na to musíte jít jinak.

Řešením je SVG obrázek na pozadí

Internet explorer 9 již naštěstí podporuje SVG obrázky, které dále využijeme. Hned na začátku si vytvoříme jednoduchý obrázek, který nám pak poslouží jako pozadí. Obrázek si vytvoříme tak, že si otevřeme jakýkoli textový editor a vložíme do něj následující definici:











Soubor pak uložíme např. jako pozadi.svg. Jednotlivými příkazy se nebudu dále zabývat. Pro nás jsou důležité pouze atributy stop-color v elementech stop, které definují barvy přechodu.

Všimněte si, že barvy jsou zde definovány obráceně. Nahoře bude barva, která je definována jako druhá a dole bude ta, která je definovaná jako první. Vzhledem k tomu, že IE8 a starší pracují s PIE normálně, vytvoříme si nový css soubor jen pro IE9, který vložíme do HTML pomocí komentářové podmínky.



V souboru ie9.css se budou nacházet pouze definice pro internet explorer 9. Pro všechny ostatní prohlížeče bude sloužit soubor style.css. Celá definice pak bude vypadat takto:




Dejme tomu, že budeme formátovat element

, kterému definujeme kulaté rohy a přechod na pozadí. Stylopist v jednotlivých souborech, pak bude vypadat následovně:

/* soubor style.css */
div.ukazka{
/* definice kulatých rohů */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
/* definice pozadí */
background-color:#E9E9E9; /* barva pro jistotu */
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#a1d2d8), to(#ebecfc)); /* chrome a safari */
background-image: -webkit-linear-gradient(#a1d2d8, #ebecfc); /* chrome a safari */
background-image: -moz-linear-gradient(#a1d2d8, #ebecfc); /* Firefox a vše na Gecku */
background-image: -o-linear-gradient(#a1d2d8, #ebecfc); /* Opera */
background-image: -ms-linear-gradient(#a1d2d8, #ebecfc); /* IE10 */
background-image: linear-gradient(#a1d2d8, #ebecfc); /* CSS3 */
-pie-background: linear-gradient(#a1d2d8, #ebecfc); /* IE8 a starší */
behavior: url('/PIE.htc'); /* IE8 a starší */
}
/* soubor ie9.css */
div.ukazka{
background-image: url('pozadi.svg');
}

Tento kód je sice na první pohled komplikovanější, ale funguje napříč všemi běžně používanými prohlížeči a je možné běžně používat kulaté rohy u všech elementů. Pokud máte tento kód a kód svg souboru někde uložený pak stačí jen použít copy and paste, změnit barvy a nemusíte používat obrázky jako přechod na pozadí. Výsledný přechod se také na rozdíl od obrázku vždy natáhne na celou výšku elementu.

Na co si dát pozor?

Vždy dávejte definici pozadí do background-image a jistěte jej klasickou barvou background-color pro případ, že by se přechod nevykreslil. Pokud dáte přechod pouze do definice background, může se stát, že prohlížeč, který tento zápis nechápe, přepíše také dříve definované background-color na transparent. Tím pak celé jištění nemá smysl.

Samozřejmě je také třeba dodržovat určitá pravidla aby knihovna PIE vždy fungovala správně.

 

Logo PIE

Logo PIE

Knihovna PIE je šikovný pomocník pro každého kodéra. Umožňuje běžně používat CSS3 příkazy pro zakulacení rohů, lineární přechody a stín pod blokovými elementy i v internet exploreru. Díky tomu nám všem ulehčuje práci.

Při používání knihovny je však potřeba dodržovat několik zásad aby vše fungovalo. Adresa k souboru PIE.htc by měla být absolutní. Já běžně umisťuji tento soubor do kořenového adresáře webu a používám zápis:

behavior: url(/PIE.htc);

Je samozřejmě jedno, kde přesně bude soubor umístěn. Pokud se na něj však odkážete relativně, nemusí vše fungovat tak jak má. Přiznám se, že nevím přesně proč tomu tak je. Domnívám se ale, že při relativním zápisu je adresa souboru vzata vůči aktuálně zobrazené stránce a ne vůči souboru se stylopisem jak by se dalo očekávat. Při použití Cool URL, které se dnes běžně používá je to značně omezující. Absolutní zápis adresy to ale vše vyřeší.

Druhým problémem, na který jsem narazil je, že knihovna funguje ale „je nějaká pokažená“. Například jsem nadefinoval přechod na pozadí a najednou se dívám, že blok, který měl pozadí obsahovat celý zmizel. Později jsem přišel na to, že elementy, na kterých chcete tyto efekty použít je nutné napozicovat. Teď Vás jistě napadá nebude něco absolutně pozicovat jen proto, abych mohl mít gradient na pozadí. Finta je v tom, že pozicování nemusí být absolutní, ale může být klidně i relativní. V konečném důsledku stačí do stylopisu připsat jediný řádek:

position:relative;

A najednou vše funguje jak má.

Knihovnu PIE jsem si zvykl běžně používat, protože značně ulehčuje práci při kódování. Například při vytváření lineárního přechodu to není ani tak markantní ale ušetřený čas se výrazně projeví na kulatých rozích nebo na stínech pod elementy, kde bylo vždy třeba obalit elementy několika divy s patřičnými obrázky na pozadí, které neměli žádný další účel. Kromě toho se také ušetří nějaké pár http spojení pro přenos obrázků, které by jinak tyto efekty simulovaly.

Kulaté rohy

Kulaté rohy na webových stránkách nešly nikdy přímo vytvořit a vždy bylo nutné nějakým způsobem tento nedostatek obejít. Nejčastější řešení spočívalo ve využití obrázku na pozadí, ve kterém byly kulaté rohy nakreslené. Vhodným nastylováním vznikl efekt, že je sám prvek kulatý. Druhou možností, se kterou jsem se setkal bylo vytvoření kulatých rohů pomocí javascriptu. Ten fungoval na principu, že kolem elementu, který měl mít kulaté rohy, vytvořil tolik dalších div-ů, kolik bylo potřeba a napozicoval je tak, že vytvořily kulatý roh.

V CSS3 nyní existuje vlastnost border-radius, která libovolnému blokovému elementu vytvoří kulaté rohy bez nejrůznějších obezliček. Jehho syntaxe je border-radius:horní-levý horní-pravý dolní-pravý dolní-levý; Případně pokud chcete mít pro všechny rohy stejný poloměr stačí zadat např. border-radius:5px; Problém je v tom, že specifikace CSS3 ještě není dokončena a tak tento příkaz není přímo podporován. Moderní webové prohlížeče jej však umožňují použít díky vendor prefixům.

Tento zápis umožní zaoblit rohy ve všech moderních prohlížečích:

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;

Problém však nastává u internet exploreru, který tyto příkazy nepodporuje. Řešením je však PIE. Pomocí knihovny PIE je možné používat určité vlastnosti CSS3 i v IE. Jedná se o htc soubor, který se vloží do CSS stylopisu pomocí příkazu behavior. Kompletní zápis pro všechny prohlížeče pak vypadá následovně.

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
behavior: url(/PIE.htc);

Soubor PIE.htc si můžete stáhnout na oficiálních stránkách a musí být umístěn v kořenovém adresáři daného webu.

Tento zápis pak zaoblí rohy v Internet exploreru, Mozille Firefox, Webkitu, Google Chrome a nejnovější Opeře. To znamená, že web používající tento zápis se zobrazí korektně nejméně v 95% prohlížečů. Zbývající prohlížeče zobrazí rohy klasicky hranaté, což kromě estetického dojmu nemá žádný další vliv na funkčnost nebo přístupnost. Proto nemá moc smysl se zbývajícími 5ti procenty příliš zabývat.

Ve specifikaci jsou pak popsány mnohem širší možnosti zápisu, ty však nemusí být ještě podporovány všemi prohlížeči a nejsou podporovány ani knihovnou PIE. Běžně se však používají pouze obyčejné kulaté rohy, kde mají všechny stejný poloměr. Specifikaci si můžete prohlédnout zde.

Dále si také přečtěte článek na co si dát u knihovny PIE pozor nebo další články o knihovně PIE.