Webdesign, CMS » MyEgo.cz - Radek Hulán webzine

Na adrese www.brinvest.cz byla dokončena finální verze webové prezentace společnosti BR-INVEST, spol. s r.o. Alternativním URL tohoto webu je www.hliníkové-opláštění.cz. Prezentace je zaměřena na velké investory a firmy, nikoliv na běžnou retail klientelu, a tomu odpovídá i její pojetí. BR-INVEST, spol. s r.o. je druhým největším dodavalem hliníkového opláštění budov a interiérů v ČR.

Web www.brinvest.cz je založen na redakčním systému F-ART:CMS, s doplňkovými pluginy pro snadnou správu Referencí a pro automatické vytváření náhledů obrázků.

BLOG:CMS je již ve standardní instalaci velice "SEO" friendly (jinak řečeno, lépe už to prostě ani dělat nejde), nicméně, pokud používáte více sekcí / weblogů, je vhodné tomu přizpůsobit i vzhledy a šablony, oproti těm standardně dodávaným. Na webu AVICENNA.cz používám celkem 7 sekcí (aka blogů), 12 různých vzhledů, 16 různých šablon, a 10 různých ExtraSkinů.

Nicméně, veškeré stránky mají jednu jedinou (stejnou) hlavičku, kam se zcela automaticky dává do TITLE název produktu, název zvolené kategorie, název sekce, či jméno společnosti, vše dle potřeby.

Takovouto hlavičku můžete zcela automaticky vytvořit díky unikátnímu rysu BLOG:CMS, a to jsou podmínky ve vzhledech:

<title>
<%if(skintype,item)%>
  <%itemtitle%> :: <%blogsetting(desc)%>
<%else%>
  <%if(skintype,error)%>
    Chyba!
  <%else%>
    <%if(category)%>
      <%category(name)%> :: <%blogsetting(desc)%>
    <%else%>
      <%blogsetting(desc)%>
    <%endif%>
  <%endif%>
<%endif%>
</title>

Takováto jednoduchá sekce podmínek v hlavičce umožní, že i pro velice komplexní web, s více než 1.500 stránkami, budete mít jen jednu jedinou hlavičku, která přitom bude vždy naprosto optimální z hlediska SEO.

Dále jsem vylepšil plugin NP_PostMan, řeší pár existujících problémů (pokud jste poslali email ve formátu HTML i TEXT, publikovaly se obě části, to je teď vyřešeno tak, že se publikuje ta první), je vyřešeno nepublikování přiložených vCards, a především přidává podporu nejen pro obrázky, ale také pro přílohy.

V paremetrech pluginu si můžete specifikovat jaké přílohy mají být systémem akceptovány (například DOC, XLS, PDF), a u takovéto přílohy je automaticky rozpoznáno její jméno, příloha je uložena na server, a je vytvořen odkaz se jménem přílohy na její download.

V příloze tohoto článku, publikovaného emailem, by tak měl být odkaz na novou verzi pluginu NP_PostMan.

Příloha ke stažení: postman.zip.

Dnes byla spuštěna nová prezentace www.avicenna.cz, založená na redakčním systému F-ART:CMS. Velice rozsáhlý web AVICENNA Company je zajímavý tím, že bez jakýchkoliv investic do reklamy se během 3 měsíců dostal stabilně do TOP-20 českého internetu v sekci Zdraví, a svoji pozici stále posiluje, s denním průměrem 600 návštěvníků. 90% z těchto návštěvníků přitom tvoří přístupy z vyhledávačů, zbytek jsou čtenáři vracející se, kteří přímo zadávají URL webu.

Aby se tato pozice dále posílila, celý web se redesignoval aby byl ještě více SEO friendly (podstatný text, tedy prostřední sloupec, na začátku v XHTML, drasticky méně grafiky, lepší provázání sekcí webu, a další změny), a rovněž se doplnila sekce časopis, která má přitáhnout a hlavně udržet stálé čtenáře. Sekce časopis je založena na osvědčené technologii a layoutu, který používám na tomto webu, a který je v TOP-5 českého internetu v sekci Webzines s 3.500 návštěvníky denně (opět bez jakékoliv reklamy). Nová sekce časopis nabízí i RSS a Atom exporty článků a komentářů.

Na webu je mimořádně zajímavé i prolinkování jeho částí, pokud se díváte na produkt, můžete si jednoduše zobrazit i produkty příbuzné (v pravém menu), dole si můžete zobrazit složky tohoto produktu, z herbáře, v herbáři je zase zpětný odkaz na produkty, a dále je možné vytvářet odkazy na články o tomto produktu. Tedy špičkový servis pro čtenáře / kupujícího, který chce více informací, i pro SEO. Každý produkt je možné rovněž tisknout, poslat emailem, či exportovat do PDF, včetně obrázků produktu a loga společnosti.

Součástí webu je i rozsáhlá sekce registrace lékáren a dalších prodejních míst, do budoucna je plánováno obohatit tuto sekci ještě o velkoobchod. Celý web je mimořádně rozsáhlý, jedná se o jeden z největších webů v ČR, s více než cca 1.500 stránkami čistého textu.

Technická poznámka, pokud vidíte starou verzi prezentace, nastavte si prosím do C:\Windows\System32\Drivers\Etc\hosts toto (osobně mám již nové DNS zpropagované):

81.0.235.28 avicenna.cz www.avicenna.cz 

NP_PostMan umí publikovat články zaslané pomocí emailu nebo přímo z telefonu, pomocí MMS. Nová verze pluginu by měla podporovat lepší resampling obrázků, v případě přítomnosti GD2, popřípadě resize, pokud je instalována starší verze GD.

A teď nějaké ty obrázky na zkoušku, focené telefonem (Siemens SX1):

Zvětšit tento obrázek!

Zvětšit tento obrázek!

Plugin NP_PostMan si můžete stáhnout zde. Pokud již máte starší verzi pluginu, musíte ji nejdříve deinstalovat.

Na Windows se mi při startu spouští minimální množství služeb, pokud si člověk chce zahrát Half Life 2 či Doom 3, je to nutnost. I proto nespouštím Apache2 a MySQL 4.1 automaticky, při startu, ale tímto jednoduchým BAT souborem (s odkazem na ploše):

net start apache2
net start mysql

A podobně pro zastavení:

net stop apache2
net stop mysql 

Pro simulaci avicenna.cz na localhost:

echo 127.0.0.1 localhost > c:\windows\system32\drivers\etc\hosts
echo 127.0.0.1 avicenna.cz www.avicenna.cz >> c:\windows\system32\drivers\etc\hosts 

Následně mohu do URL browseru zadat http://www.avicenna.cz a pracuji na svém lokálním počítači, soubor c:\windows\system32\drivers\etc\hosts bude obsahovat toto:

127.0.0.1 localhost
127.0.0.1 avicenna.cz www.avicenna.cz

Rovněž je vhodné změnit DocumentRoot, pro Apache2 server, tedy soubor httpd.conf, Windows shell bohužel neobsahuje věci jako je grep, aby to šlo dělat inteligentněji, nicméně, na změnu DocumentRoot z C:\Dev\www na C:\Dev\www\avicenna postačí i toto:

copy /Y c:\Dev\prog\Apache2\conf\httpd.conf c:\Dev\prog\Apache2\conf\httpd.conf.original
echo DocumentRoot "C:\Dev\www\avicenna" >> c:\Dev\prog\Apache2\conf\httpd.conf
C:\Dev\prog\Apache2\bin\Apache.exe -w -n "Apache2" -k restart
copy /Y c:\Dev\prog\Apache2\conf\httpd.conf.original c:\Dev\prog\Apache2\conf\httpd.conf

Tento web, nebo třeba web avicenna.cz je na desítky zvolených klíčových slov v první desítce ze stovek tisíc výsledků.

Jak se toho dosahuje? Technologie je triviální, takový Petr Weida je o tom na Interval.cz schopen napsat 10 článků, ale to zjevně jen proto, aby dostal za ty triviality více bankovek, nicméně, je to ve skutečnosti jen 6 jednoduchých bodů, které je nutno dodržovat.

1. Mějte sématický, validní a dobře strukturovaný web

Používejte web, kde nadpisy mají přiřazený tag nadpisů, tedy hx a dávejte název článku do title.

Příklad?

<html>
<title>Radek Hulán</title>
<body>
	<h1>Osobní web Radka Hulána</h1>
	<h2>První článek Radka Hulána</h2>
	<p>Toto je článek...</p>
</body></html>

2. Používejte MIME typ application/xhml+xml

Pokud posíláte Váš web s DOCTYPE typu XHTML 1.0 STRICT jako text/html, tak se zpracuje jako "polévka znaků", tedy obyčejné HTML, a zobrazí se i pokud není validní. S MIME typem application/xhml+xml se ovšem u prohlížečů, které to podporují, použije XML parser. Zaručíte si tím, že Váš web bude vždy well-formed, a tudíž skvěle čitelný pro vyhledávače i prohlížeče, které nebudou muset hádat, kde jste asi co opomněli, kde končí tagy, a kde začíná už text.

MSIE musíte posílat ovšem HTML, jak na to se dozvíte v tomto článku.

3. Nepoužívejte JavaScript, Flash a obrázky pro obsah

Osobně používám hodně JavaScriptu, ale vždy jen pro aplikační stránku věci, nikdy pro generování obsahu. Stejné je to s Flashem. Vyhledávače weby kde je jen JavaScriptové menu či Flashové intro bez možnosti dostat se dál prostě nezaindexují a Vy přijdete o řadu čtenářů či klientů.

Pokud používáte JavaScript pro generování obsahu, zajistěte, aby byly veškeré informace dostupné i při jeho vypnnutí, a aby Flashové animace nebylo to jediné, co na Vašem webu je.

To samé je pochopitelně nutné chápat při práci s grafikou, sebenádhernější grafika lidi z vyhledávačů nepřitáhne, grafika se neindexuje, nikdo ji nenajde, text ovšem ano. Navíc, rozsáhlá grafika odradí od Vašich stránek lidi s pomalých připojením.

Podobně jako NAVRCHOLU.cz skript pro měření návštěvnosti je nutné přepsat pro podporu application/xhtml+xml, u TOPLIST.cz je to to samé.

Výsledek byl testován a funguje v Opeře 7.60 TP4, Firefoxu 1.0 (application/xhtml+xml), a rovněž v MSIE 6.0 (text/html).

Zde je kód pro toplist.js:

// (c) Radek HULAN, http://hulan.cz/
// This work is licensed under the Creative Commons Attribution License. 
//
// TOPLIST.cz statistics that works under XHTML 1.1 served with
// MIME type application/xhtml+xml as well as text/html MIME type.
//
//
// Usage - place this in your XHTHML 1.1 code:
//  
// 
// 

// helper functions
var isXHTML;
function createNewEle(ele){
	if(isXHTML) 
		return document.createElementNS('http://www.w3.org/1999/xhtml', ele);
	else 
		return document.createElement(ele);
};	

function toplist(){
	var ele=document.getElementById('toplist');
	if (!ele) return;
	isXHTML=/html\:/.test(document.getElementsByTagName('body')[0].nodeName);
	// toplist.cz id from title
	var id=parseInt(ele.getAttribute('title'));
	if (!id) alert('TITLE attribute does not contain your TOPLIST.cz ID!');
	var img=ele.getElementsByTagName('img');
	// set new A attributes
	ele.href='http://toplist.cz/stat/'+id;
	ele.setAttribute('title','TOPLIST.cz');
	// create IMG
	var img=ele.appendChild(createNewEle('img'));
	img.setAttribute('alt','TOPLIST.cz');
	img.setAttribute('style','width:88px;height:120px');
	img.setAttribute('src','http://toplist.cz/count.asp?id='+id
		+'&logo=bc'
		+'&http='+escape(document.referrer)
		+'&wi='+escape(window.screen.width)
		+'&he='+escape(window.screen.height)
		+'&cd='+escape(window.screen.colorDepth)
		+'&t='+escape(document.title));
}
toplist();

Použití skriptu:

Vložte tento kód do Vašeho XHTML:

Pochopitelně, číslo 64941 upravte na Vaše číslo počítadla. Kód je pochopitelně napsaný tak, že funguje i při vypnutém JavaScriptu.

V sobotu jsem se zaregistroval do statistik navrcholu.cz a dnes mi přišlo potvrzení registrace. Navrcholu.cz toho umí hodně, nicméně, jejich JavaScript pro měření byl plný write() a writeln(), takže jsem jej musel přepsat do DOM JavaScriptu, jinak by pochopitelně v XHTML 1.1 nefungoval (zabralo to 10 minut i s testováním).

Výsledek byl testován a funguje v Opeře 7.60 TP4, Firefoxu 1.0 (application/xhtml+xml), a rovněž v MSIE 6.0 (text/html).

Zde je kód pro navrcholu.js:

// (c) Radek HULAN, http://hulan.cz/
// This work is licensed under the Creative Commons Attribution License. 
//
// NAVRCHOLU.cz statistics that works under XHTML 1.1 served with
// MIME type application/xhtml+xml as well as text/html MIME type.
//
//
// Usage - place this in your XHTHML 1.1 code:
//  
// 
// 

// helper functions
var isXHTML;
function createNewEle(ele){
	if(isXHTML) 
		return document.createElementNS('http://www.w3.org/1999/xhtml', ele);
	else 
		return document.createElement(ele);
};	

// navrcholu.cz code
function navrcholu(){
	var ele=document.getElementById('navrcholu');
	if (!ele) return;
	isXHTML=/html\:/.test(document.getElementsByTagName('body')[0].nodeName);
	// navrcholu.cz id from title
	var id=parseInt(ele.getAttribute('title'));
	if (!id) alert('TITLE attribute does not contain your NAVRCHOLU.cz ID!');
	// some variables
	var n=navigator;
	var p=document;
	var c,t,b,j,m,r,y,d,x,w;
	d=x=w=j=0;
	// detect flash plugin in MSIE
	if(n.appVersion.indexOf("MSIE")>=0 && n.appVersion.indexOf("Win")>=0 && n.userAgent.indexOf("Opera")<0) {
		p.writeln("");
		p.writeln("on error resume next");
		p.writeln("For i=7 to 4 Step -1");
		p.writeln(" If IsObject(CreateObject(\"ShockwaveFlash.ShockwaveFlash.\" & i)) Then"); 
		p.writeln("   n3f8q=i");
		p.writeln("   Exit For");
		p.writeln(" End If");
		p.writeln("Next");
		p.writeln(""); 
	} else 
		eval("var n3f8q=0");
	// detect flash in other browsers
	if( n.plugins && n.plugins["Shockwave Flash"]){
		t=n.plugins["Shockwave Flash"].description;
		n3f8q=parseInt(t.charAt(t.indexOf(".")-1)); 
	}
	// get other vars
	m=(n.userAgent.substring(0,8)=="Mozilla/") ? n.userAgent.substring(8,9) : 4;
	if(m>2) j=(n.javaEnabled()) ? 1 : 0;
	r=window.top.document.referrer;
	if(m>3 && screen){
		d=screen.colorDepth;
		if(d==0) d=screen.pixelDepth;
		x=screen.width;
		w=(p.all) ? top.document.body.clientWidth:top.innerWidth; 
	}
	y=new Date();
	y.setTime(y.getTime()-31536000000);
	p.cookie="nvt=1";
	c=(p.cookie.indexOf("nvt") != -1)?1:0;
	p.cookie="nvt=1; expires="+y.toGMTString();
	// set new A attributes
	ele.href='http://navrcholu.cz/Statistika/'+id+'/';
	ele.setAttribute('title','NAVRCHOLU.cz');
	// create IMG
	var img=ele.appendChild(createNewEle('img'));
	img.setAttribute('alt','NAVRCHOLU.cz');
	img.setAttribute('style','width:80px;height:15px');
	img.setAttribute('src','http://c1.navrcholu.cz/hit?site='+id+';t=o80;'
		+'fv='+n3f8q+';js='+j+';cs='+c+';ref='+escape(r)+';cd='
		+d+';sx='+x+';wx='+w+';jss=1;r='+Math.random());
}
navrcholu();

Použití skriptu:

Vložte tento kód do Vašeho XHTML:

Pochopitelně, číslo 77391 upravte na Vaše číslo počítadla. Kód je pochopitelně napsaný tak, že funguje i při vypnutém JavaScriptu.

Doufám, že mě za tento kód, který by měl dodat navrcholu.cz, a ne já, bude třeba nabídnuta Profi statistika navrcholu.cz na rok zdarma. Přijmul bych to, a s radostí zveřejnil ;-)

Xstandard je vynikající XHTML 1.1 validní (!) WYSIWYG editor, který je ve verzi Xstandard Lite zdarma i pro komerční použití. Je to fantastický produkt, který skutečně generuje XHTML 1.1 zdrojový kód, za každé okolnosi well-formed.

Xstandard má to všem jedno omezení, je napsán jako ActiveX komponenta, a tudíž funguje jen pod Windows (nikoliv na Linuxu) za použití MSIE 5.5 a vyššího, nebo Firefoxu 1.0 / Mozilly 1.7 a vyšší. Samozřejmě, na Linuxu je možné použít projekt Wine a spustit Xstandard pod ním.

Xstandard umí automaticky dělat odstavce, seznamy, tabulky, tagy code, pre, abbr, samp, a další, jeho integrace do stávajícího prostředí je triviální, postačí zavolat object s typem application/x-xstandard, pro Firefox, nebo s clsid:0EED7206-1661-11D7-84A3-00606744831D pro MSIE.

Tento fantastický WYSIWYG editor jen nově implementován v redakčním systému F-ART:CMS. Pro stávající uživatele systému F-ART:CMS je implementace Xstadard dostupná zdarma. V systému BLOG:CMS, publikovaném v GNU GPL licenci, tato komponenta dostupná nebude.

XHTML 1.1 validní web má obrovský význam pro optimalizaci pro vyhledávače (SEO), protože validní weby s minimem markupu a převahou textu jsou roboty mnohem snázeji indexovány.

Ukázky editoru (WYSIWYG a zdrojový kód):