Komentarze są wyłączone
18 Sierpień 2009

Popularne serwisy a poprawność kodu (x)HTML…

Co jakiś czas sprawdzam sobie, z czystej ciekawości, jak też prezentują się niektóre popularne serwisy, pod względem poprawności kodu źródłowego – czy jest on zgodny ze standardami W3C, czy też nie.
Niestety wyniki nie są zadowalające… Można nawet pokusić się o stwierdzenie, że wielu serwisom nie zależy kompletnie na tym, aby ich strony były zgodne z jakimikolwiek standardami. Na polskim „rynku” króluje niepodzielnie (od bardzo dawna) serwis gazeta.pl, który na obecną chwilę ma 443. błędy!

Stworzenie poprawnej strony internetowej naprawdę nie jest zbyt trudne. Aktualnie tworząc Abduru.pl, dokładam wszelkich starań, aby wynikowy kod xHTML był poprawnym kodem XHTML 1.1. Jednak testując najpopularniejsze serwisy pod względem poprawności kodu, dochodzę do wniosku, że… nie ma to najmniejszego sensu, gdyż ważne, aby strona nie rozjeżdżała się w okienku przeglądarki, a cała reszta jest najmniej istotna.

Z takiego założenia wychodzą zapewne „eksperci” z Gazety.pl, Wirtualnej Polski i Onetu czy Allegro. Nawet bijąca rekordy popularności Nasza-Klasa.pl nie ustrzegła się paru błędów.

Jak nasza reprezentacja wypada na tle zagranicznych serwisów?
Miłym zaskoczeniem było odkrycie przeze mnie, że serwis BBC jest wykonany prawidłowo. Był to jedyny z testowanych przeze mnie serwisów, który nie posiadał ani jednego błędu! Pozostałe serwisy były mniej lub bardziej udane…
Poniżej zamieszczam niechlubne zestawienie serwisów z uwzględnieniem ilości błędów i ostrzeżeń.

miejsce serwis ilość błędów ilość ostrzeżeń standard punkty
1. gazeta.pl 443 31 HTML 4.01 Transitional 2277
2. NYTimes 353 71 HTML 4.01 Transitional 1907
3. Onet.pl 129 10 XHTML 1.0 Transitional 665
4. TVN24 73 19 HTML 4.01 Transitional 403
5. Allegro 56 33 XHTML 1.0 Strict 346
6. CNN 51 27 HTML 4.01 Strict 309
7. Yahoo 34 8 HTML 4.01 Transitional 186
8. Nasza Klasa 12 1 HTML 4.01 Strict 62
9. Interia.pl 5 0 XHTML 1.0 Transitional 25
10. MSN 1 0 XHTML 1.0 Strict 5
11. BBC 0 0 XHTML 1.0 Strict 0

Punktacja: 5 punktów za każdy błąd, i 2 za każde ostrzeżenie

(Nie) miło mi zatem ogłosić, że zwycięzcą na najgorzej wykonaną stronę internetową, która nie jest zgodna z żadnymi(!) standardami, został reprezentant Polski – serwis Gazeta.pl.

Kolejne rozstrzygnięcie konkursu za 3. miesiące.

W konkursie nie uwzględniłem Wirtualnej Polski gdyż…

Sorry, I am unable to validate this document because on line 215 it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication.

The error was: utf8 „\xF3″ does not map to Unicode

strona nie przeszła walidacji!

Komentarze są wyłączone
17 Sierpień 2009

Tabela Ekstraklasy…

ekstraklasaTworząc kompletnie od początku Abduru.pl, które ma stać się (mam nadzieję) dość ciekawym Systemem Zarządzania Treścią, doszedłem do momentu umieszczenia tabeli naszej rodzimej Ekstraklasy. O ile wcześniej już coś podobnego zrobiłem, to jednak dalekie było to od ideału, w dodatku przy większej liczbie drużyn z tą samą ilością punktów, stosowane było sortowanie takie samo, jak w przypadku dwóch drużyn, a więc najpierw punkty w spotkaniach bezpośrednich, później różnica bramek i w końcu… bramki strzelone na wyjeździe. Tym czasem, w przypadku większej liczby drużyn, trzecim sposobem sortowania powinna być ilość strzelonych bramek.

Jeśli chodzi o tradycyjną tabelę piłkarską, to nie ma najmniejszego problemu. Całą sprawę załatwi

array_multisort

Natomiast jak rozwiązać ten problem w przypadku rozgrywek chociażby naszej Ekstraklasy?

Nauczony doświadczeniem, że nie warto wyważać otwartych drzwi rozpocząłem poszukiwania „gotowca”. Jednak… efekty były mizerne. Co prawda natrafiłem na skrypt (polskiego autora – a jakże), o dźwięcznej nazwie Tabelownik, to rozwiązanie jakie zastosował autor podwójnie mnie zraziło. Po pierwsze wykorzystywał on pętle for, zamiast while, co spowalnia działanie skryptu (może nie bardzo, ale przy dużej liczbie drużyn i spotkań, a dodatkowo pobieraniu wiadomości i innych dupereli z tabeli – znacznie), zwłaszcza, że wykorzystywana jest dość często.
Po drugie… cały mechanizm sortowania oparł o działania na bazie danych, a ja wolałem uniknąć dodatkowego, niepotrzebnego obciążenia bazy. Zawziąłem się, aby wykorzystać do tego wyłącznie PHP i… udało się.

Sortowanie odbywa się dość szybko i sprawnie.
Cały dowcip polega na „wyłapywaniu” drużyn, które mają tę samą liczbę punktów i przypisywaniu ich do tablicy o wartości… ilości punktów właśnie. Później sortuję tabelę ze wszystkimi drużynami, tak jakby nie było zasady bezpośrednich spotkań, a następnie sortuję drużyny wg. odpowiednich zasad w zależności od tego ile drużyn ma taką samą liczbę punktów. Na zakończenie całego procesu podstawiam drużyny wg. nowej kolejności do posortowanej wcześniej tabeli. Wszystko prosto, łatwo i szybko.

Poniżej zamieszczam fragment kodu, który przedstawia sposób zastosowany przeze mnie. Nie podaję całego rozwiązania, bo to byłoby zbyt proste. Całość jest tak skonstruowana, że w zależności od zmiennej przesłanej do funkcji sortowanie może być z uwzględnieniem bezpośrednich spotkań, jak i bez. W poniższym przykładzie wyciąłem także fragment, w którym podstawia się dane z bezpośrednich spotkań, sądzę, że z tym każdy sobie poradzi ;)

foreach ($teams as $key => $value ) {
	// przygotowanie do sortowania tabeli tradycyjnymi metodami: liczba punktow, roznica bramek, wieksza ilosc zdobytych
	$data[$key]	= $value['points']; // punkty
	$diff[$key] = $value['diff']; // roznica
	$goals[$key] = $value['score']; // bramki zdobyte
}
$i = 0;
while( $i<count($data) ) {
	$ii = 0;
	while( $ii < count($data) ) {
		if ( $data[$i] == $data[$ii] && $i < $ii ) {
			// tutaj pobieramy i podstawiamy wyniki z bezposredniego spotkania nr 1
			// a pozniej dla drugiego spotkania....
			$team[$data[$i]][$teams[$i]['team_id']] = $teams[$i]; // tutaj przypisujemy druzyny do tabeli
			$team[$data[$i]][$teams[$ii]['team_id']] = $teams[$ii]; // ale tak aby ich nie dublowac ;)
		}
		$ii++;
	}
	$i++;
}
array_multisort($data,SORT_DESC,SORT_NUMERIC,$diff,SORT_DESC,SORT_NUMERIC,$goals,SORT_DESC,SORT_NUMERIC,$teams); // sortowanie klasyczne
 
$i = 0;
foreach( $team as $key => $value )  {
	$points = array(); $diff = array(); $score = array(); $bw = array(); $di = array(); $pts = array(); $bz = array(); $pt=array(); $d=array(); $b=array(); $w=array(); $v = array(); // zerujemy tablice, zeby sie nie nadpisywaly
	$ile = count($value);
	if ( $ile > 2 ) { // jesli wiecej niz dwie druzyny maja taka sama liczbe punktow wtedy sortowac bedziemy po punktach w bezposrednich pojedynkach, roznicy bramek, wiekszej liczby strzelonych goli
		foreach( $value as $k => $v ) {
			$pts[$k] = $v['pts'];
			$di[$k] = $v['di'];
			$bz[$k] = $v['bz'];
			$points[$k] = $v['points'];
			$diff[$k] = $v['diff'];
			$score[$k] = $v['score'];
		}
		array_multisort($pts,SORT_DESC,SORT_NUMERIC,$di,SORT_DESC,SORT_NUMERIC,$bz,SORT_DESC,SORT_NUMERIC,$points,SORT_DESC,SORT_NUMERIC,$diff,SORT_DESC,SORT_NUMERIC,$score,SORT_DESC,SORT_NUMERIC,$value); // sortujemy
	}  
	if ( $ile == 2 )  { // jesli dwie druzyny maja taka sama liczbe punktow, wtedy sortowac bedziemy po punktach, roznicy bramek, wiekszej ilosci bramek strzelonych na wyjezdzie
		foreach ( $value as $j => $w ) {
			$pt[$j] = $w['pts'];
			$d[$j] = $w['di'];
			$b[$j] = $w['bw'];
			$points[$j] = $w['points'];
			$diff[$j] = $w['diff'];
			$score[$j] = $w['score'];
		}
		array_multisort($pt,SORT_DESC,SORT_NUMERIC,$d,SORT_DESC,SORT_NUMERIC,$b,SORT_DESC,SORT_NUMERIC,$points,SORT_DESC,SORT_NUMERIC,$diff,SORT_DESC,SORT_NUMERIC,$score,SORT_DESC,SORT_NUMERIC,$value); //sortujemy
	}
	$team[$key] = $value; // posortowane druzyny podstawiamy spowrotem do tablicy
}
$i = 0;
while( $i < count($teams) )  {
	if ( $team[$teams[$i]['points']] )  {
		$teams[$i] = array_shift($team[$teams[$i]['points']]); // a teraz podstawiamy do wczesniej posortowanej tablicy druzyny, ktore maja taka sama liczbe punktow, a ktore juz posortowalismy pod wzgledem spotkan bezposrednich, jednoczesnie pozbywamy sie tablicy $team...
	}
	$i++;
}
Komentarze są wyłączone
29 Lipiec 2009

Abduru.pl – kompletnie od początku

Abduru.plSwego czasu pisałem o tym, iż zamierzam z lekka jedynie, zmodyfikować Abduru.pl, nie wprowadzając jednak żadnych zmian w szablonie. Po ukazaniu się studioGallery, zdanie zmieniłem i od kilku dni tworzę nową wersję AbduruCMS. Ma to być System Zarządzania Treścią, jakiego jeszcze nie było. To znaczy, może i był (a może i jest), jednak ten system ma być dostosowany do tego, co mi jest najbardziej potrzebne, dlatego będzie inny niż wszystkie istniejące.

Od swojego poprzednika różnić go będzie wiele. Przede wszystkim od samego początku postawiłem na jQuery, a nie jak to miało miejsce wcześniej – Prototype. Poza tym wykorzystywać będzie system wtyczek, który zastosowałem przy tworzeniu studioGallery. Dzięki czemu, dodawanie nowych funkcjonalności będzie stosunkowo proste i nie trzeba będzie ingerować w strukturę szablonów przy ich instalowaniu.

Najważniejszą zmianą będzie ta, że… mimo iż będzie to System Zarządzania Treścią… nie uświadczy się w nim odrębnego panelu administracyjnego. Będzie on bowiem zintegrowany z szablonem witryny; coś takiego istnieje już w Abduru, jednak w obecnej wersji jest dalekie od ideału.

Abduru.plPodstawowa wersja (bez żadnych wtyczek) będzie dostępna na licencji GPL w wersji 2, i rozdawać ją będę za darmo. Dlatego (jak łatwo się domyślić) prawdziwe wodotryski będą możliwe dopiero po zainstalowaniu wtyczek, które zmienią AbduruCMS w potężne narzędzie.

Mimo iż czeka mnie jeszcze sporo pracy, to postęp jest już widoczny. Działa sporo rzeczy, a kilka nowych powstanie w najbliższym czasie. W przeciwieństwie do wcześniejszego projektu, tym razem nie zamierzam prorokować, za ile pojawi się finalna wersja, gdyż nauczony doświadczeniem, zdaję sobie sprawę, że mogą pojawiać się po drodze nieoczekiwane zdarzenia.

Komentarze są wyłączone
10 Lipiec 2009

Codehighlighting do TinyMCE

Spodobał mi się sposób kolorowania składni, jaki wykorzystuje SyntaxHighlighter, zachciało mi się na jego podstawie zrobić sobie plugin do studio Gallery, i nie byłoby problemu, jednak… jednocześnie wykorzystuję TinyMCE, a ten edytorek, albo podmieniał wklepywany kod na encje, albo nie tykał go wcale i traktował całość jako HTML, szkoda, że nie potrafił podmieniać jedynie zawartości pomiędzy tagami <pre>.

Już zaprzęgałem do dzieła moje ulubione preg_replace_callback… gdy nagle przypomniałem sobie, że na stronie SyntaxHighlighting rzucił mi się w oczy plugin do TinyMCE.

Okrężną drogą, ale trafiłem w końcu na stronę Nawafa. Stworzył on plugin, który współpracuje niemal idealnie z Tinym w wersji 3.0.
Jednak i tutaj nie wszystko przebiegało po mojej myśli…

Tak jak sądziłem, pojawił się problem ze znacznikami HTML, które Tiny przekształcał lub nie wyświetlał ich w ogóle. Kolejne poszukiwania i powstała mała poprawka do Codehighlighting. Wystarczy wyedytować plik codehighlighting.js w katalogu js i dodać na początku

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
references = {
'ą': '&#261;',  'Ą': '&#260;',  'ć': '&#263;',  'Ć': '&#262;',  'ę': '&#281;',  'Ę': '&#280;',
'ł': '&#322;',  'Ł': '&#321;',  'ń': '&#324;',  'Ń': '&#323;',  'ó': '&#243;',  'Ó': '&#211;',
'ś': '&#347;',  'Ś': '&#346;',  'ż': '&#380;',  'Ż': '&#379;',  'ź': '&#378;',  'Ź': '&#377;',
'À': '&#192;',  'Á': '&#193;',  'Â': '&#194;',  'Ã': '&#195;',  'Ä': '&#196;',  'Å': '&#197;',
'Æ': '&#198;',  'Ç': '&#199;',  'È': '&#200;',  'É': '&#201;',  'Ê': '&#202;',  'Ë': '&#203;',
'Ì': '&#204;',  'Í': '&#205;',  'Î': '&#206;',  'Ï': '&#207;',  'Ð': '&#208;',  'Ñ': '&#209;',
'Ò': '&#210;',  'Ó': '&#211;',  'Ô': '&#212;',  'Õ': '&#213;',  'Ö': '&#214;',  'Ø': '&#216;',
'Ù': '&#217;',  'Ú': '&#218;',  'Û': '&#219;',  'Ü': '&#220;',  'Ý': '&#221;',  'Þ': '&#222;',
'ß': '&#223;',  'à': '&#224;',  'á': '&#225;',  'â': '&#226;',  'ã': '&#227;',  'ä': '&#228;',
'å': '&#229;',  'æ': '&#230;',  'ç': '&#231;',  'è': '&#232;',  'é': '&#233;',  'ê': '&#234;',
'ë': '&#235;',  'ì': '&#236;',  'í': '&#237;',  'î': '&#238;',  'ï': '&#239;',  'ð': '&#240;',
'ñ': '&#241;',  'ò': '&#242;',  'ó': '&#243;',  'ô': '&#244;',  'õ': '&#245;',  'ö': '&#246;',
'ø': '&#248;',  'ù': '&#249;',  'ú': '&#250;',  'û': '&#251;',  'ü': '&#252;',  'ý': '&#253;',
'þ': '&#254;',  'ÿ': '&#255;'
};
html = {
'&': '&amp;',   '<': '&lt;',    '>': '&gt;',    '"': '&quot;',      "'": '&#39;'
}

oraz zastąpić istniejącą wartość val, następującym kodem:

28
29
30
31
32
33
34
35
36
 var val =  document.getElementById("CodeArea").value;
	 for (i in html){
                var re = new RegExp(i, "g")
                val = val.replace(re, html[i])
            }
        for (i in references){
            var re = new RegExp(i, "g")
            val = val.replace(re, references[i])
        }

Jak ktoś nie chce edytować, może sobie podmienić na ten:
codehighlighting.js
(kodowanie oczywiście w utf-8)

Komentarze są wyłączone
10 Lipiec 2009

Przeglądarka Flock i Firebug…

Flock + FirebugDzisiaj wpadła mi w ręce przeglądarka Flock, jest to Firefox po przeróbkach, głównie ukierunkowany na serwisy społecznościowe. Z nich i tak nie korzystam, więc to mnie mało cieszy, ale wygląd owej przeglądarki jest dość przyjemny, i ogólnie prezentuje się dość ciekawie. Pozostałe opcje i funkcje są niemal identyczne jak w przypadku Firefox’a.

Skoro jest tak podobna, to powinny działać także wtyczki. Działają… częściowo i nie wszystkie. Bynajmniej nie od razu. Mi najbardziej zależało na Firebug’u. Poczytałem, poszperałem i pobrałem wersję 1.4.0b7 pod Firefox’a, małe poprawki zgodnie z tym co zalecane jest na stronie Mozillazine i… Firebug działa aż miło.

Swoją drogą nie miałem go w tej wersji nawet na Firefox’ie…
Jeśli ktoś chce, może zainstalować Firebug’a pod Flocka, wystarczy zapisać poniższy link i otworzyć go w przeglądarce.

firebug-1.4.0b7-flock

[ Strona 5 z 19 ] « Pierwsza...«34567»...Ostatnia »