Webdesign

Na Interval.cz vyšel můj článek Zend’s PHP 5 Coding Contest - učíme se PHP z chyb ostatních. Doporučuji jej k přečtení, dívám se v něm na 5 nejhorších aplikací této soutěže, a je to psané docela zajímavým stylem.

Na Interval.cz vyšel můj článek Zend’s PHP 5 Coding Contest - trochu méně teorie a více praxe, který popisuje hned 6 užitečných aplikací z této soutěže.

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

Narazil jsem na takový pěkný článek, který popisuje, co by měl WEB ROKU 2005 obsahovat.

Web roku 2005 musí obsahovat a podporovat:

• nabízet pravidelně aktualizované informace (blogy, redakční systémy, atd.)
• zvýšit efektivnost nabízení informací (RSS, ATOM, WAP, Mobilní XHTML, atd.)
• alternativní metody distribuce informací (emailové newslettery, RSS, del.icio.us, atd.)
• zlepšené systémy notifikace a alertů (ping, TrackBack, email alerty, atd.)
• možnost feedbacku od uživatelů webu (komentáře, fórum, atd.)
• optimalizovaný výkon a přístupnost (CSS, XHTML, atd.)
• více cest pro získání informací (více-úrovňová navigace, hledání, atd.)
• inteligentní systém-2-systém komunikaci (XML, SOAP, atd.)
• kolaborativní spolupráce a dokumentace (Wiki, blogy, atd.)
• podpora založená na požadavcích uživatelů (uživatelsky řízené FAQs, atd.)

Zajímavé je, že špičkový redakční systém F-ART:CMS obsahuje veškeré tyto komponenty, a dokonce mnohé další.

F-ART:CMS je snadná a inteligentní cesta k dokonalému webu v roce 2005.

Pro uživatele s nižšími požadavky je dostupná i jeho GNU GPL verze nazvaná BLOG:CMS.

Na Interval.cz vyšel můj článek Zend’s PHP 5 Coding Contest - PRADO framework, který rozhodně doporučuji k přečtení, pokud PRADO neznáte.

Ivana Bednářová pokračuje ve druhém díle svého seriálu zaměřeného na tvorbu grafiky pro webovou prezentaci. První díl tohoto článku naleznete zde. Ke konci je rovněž k dispozici PSD soubor ke stažení k Vašemu testování 🙂

Můžeme se pustit do druhého dílu vytváření grafiky pro Hotel HORNÍK. V dnešním díle přidáme textové podklady, texty, další grafické doplnění a celý design uzavřeme.

V prvním díle jsme tedy vytvořili hlavičku a z jedné vlnovky i patičku webu. Dále pokračujeme vytvořením podkladů pro textové části, tzn. Hlavní obsah a menu (obr. 25).

Zvětšit obr. 25

Captcha - completely automated public turing test to tell computers and humans apart, neboli řešení odpovědi na praktickou otázku “jak rozpoznat člověka od robota”. Na internetu to až tak jednoduché totiž není…

Toto rozpoznávání se hodí pro komentářový spam, a realizuje se poměrně jednoduše, a to obrázkem, na kterém jsou písmena pomíchaná s pozadím, které je nečitelné pro robota, ale průměrný člověk je přesto schopen napsat, že na uvedeném obrázku je text GCL564. Spamovací robot nikoliv.

Pokud to chcete uvidět i Vy, musíte se odhlásit, pro registrované čtenáře kontrolu na roboty dělat nebudu. Věřím Vám, že jste z masa a kostí.

Tento plugin je i v poslední verzi BLOG:CMS, vyžaduje ovšem podporu GD2 a Freetype 2.1.9.

Používám na svém webu dlouhodobě navigaci, která mi na jiných (nejen českých) webech chybí. Jsou jím odkazy ve formě <link rel='typ odkazu' href='odkaz' />., které se dají použít nejen pro vložení CSS stylesheetu, ale i pro mnohé další informace o aktuální stránce a o webu samotném.

Touto formou je možné do XHTML kódu vložit například odkazy na předchozí či další článek, autora článku, root webu, první a poslední článek, nebo třeba na předchozí, další, první a poslední archív, prostě dle kontextu, či odkaz na stránky s nápovědou, a mnohé další.

Opera nativně a Firefox s rozšířením Link Toolbar umí tyto odkazy zobrazit ve stavové liště, podobně jako RSS zdroje, a rapidně tak usnadnit navigaci na webu, a to nejen pro handicapované čtenáře.

BLOG:CMS veškeré tyto odkazy generuje automaticky, a takto vypadá jejich příklad pro hyperlinky:

Pro RSS a Atom:

A pro ostatní prvky, jako je stylesheet, ikonka webu a záložka: