m1chu.eu - another devblog » Webmastering

Szybka porada: jak zmusić Internet Explorer 8 i Firefox 2 do obsługi HTML 5? (#1)

m1chu — Tue, 24 Aug 2010 20:38:47 +0000

Sieć została ogarnięta szałem najnowszej, piątej wersji języka HTML. Jak to zazwyczaj bywa słabo z jej obsługą radzi sobie Internet Explorer. We wszystkich wydanych wersjach pojawia się problem z parsowaniem elementów języka HTML 5, a co za tym idzie nie ma domyślnie możliwości ich poprawnego ostylowania. Podobny problem w przeszłości występował w Firefoksie 2.

Zarys problemu

Załóżmy więc, że tworzymy nowy projekt i jesteśmy na etapie dodawania nagłówka oraz stopki dokumentu.




    
    Obsługa HTML 5 z CSS
    


    Nagłówek
    Stopka

Nadaliśmy powyżej kilka atrybutów stylów pozycjonujących elementy oraz nadających im odpowiedni wygląd. Po przetestowaniu w Internet Explorerze i alternatywnych przeglądarkach zobaczymy jednak różne wyniki.

Wynik w Firefoksie 4.

Wynik w Internet Explorerze 8.

Internet Explorer – rozwiązanie pierwsze

Aby pozbyć się tego problemu należy do sekcji head wstawić:

Internet Explorer – rozwiązanie drugie

Dla każdej wersji Internet Explorera można także dodać do dokumentu HTML (w sekcję head) zewnętrzny kod JavaScript, dzięki któremu osiągniemy wyżej opisany skutek.

Firefox 2

Niespełna jeden procent internautów nadal używa drugiej odsłony popularnego lisa. Zarówno on, jak i wszystkie przeglądarki oparte na silniku Gecko pre 1.9b5 (np. Camino 1.x) posiadają błąd parsowania dzięki któremu w przypadku otwarcia nowego znacznika każdy nieznany, wcześniej otwarty zostanie automatycznie zamknięty.

Rozważmy więc przykładowy kod.


    Nagłówek
    
        Stopka

Przeglądarki oparte na omawianej wersji silnika Gecko przeparsują go w następujący sposób:

Nagłówek

Stopka

Aby rozpocząć modyfikacje należy wykonać dwie rzeczy:

Wykonać przekierowanie przykładowo za pomocą mod_rewrite lub PHP tak, aby Firefox 2 uważał analizowany dokument jako XHTML

RewriteCond %{REQUEST_URI} \.html$
RewriteCond %{HTTP_USER_AGENT} rv:1\.(([1-8]|9pre|9a|9b[0-4])\.[0-9.]+).*Gecko
RewriteRule .* - [T=application/xhtml+xml]

if (preg_match('/rv:1\.(([1-8]|9pre|9a|9b[0-4])\.[0-9.]+).*Gecko/', $_SERVER['HTTP_USER_AGENT'])) {
  header('Content-type: application/xhtml+xml');
}

Dodać atrybut xmlns do znacznika html

W tym wypadku należy jednak pamiętać o tym, że XML jest wrażliwy na encje HTML-owe. Przykładowo więc używanie ⋅ należy zaniechać na rzecz ⋅.

Następnym razem dowiecie się…

jak stworzyć wielokolumnową treść w CSS3?

HTML 5: obsługa elementów AUDIO i VIDEO

m1chu — Fri, 19 Mar 2010 21:14:33 +0000

Serwisów oferujących przeglądanie zasobów multimedialnych nie brakuje w sieci. Do niedawna jednak wszystkie oparte były o wykorzystanie możliwości znaczników object lub niepoprawnego embed. Problem w tym, że rozwiązania te opierały się o wtyczki firm trzecich, takie jak QuickTime, czy Flash. HTML 5 standaryzuje osadzanie plików muzycznych i filmów.

Kwestia dźwiękowa: element AUDIO

Jedna z najbardziej, od dawna oczekiwanych możliwości w HTML 5. Pozwala na natywne odtwarzanie utworów muzycznych w przeglądarce. Określana znacznikiem audio.

Wg. specyfikacji może przyjmować pięć atrybutów:

autoplay – określa czy odtwarzać automatycznie dźwięk, gdy zostanie on załadowany,
controls – określa czy wyświetlić odtwarzacz w standardowym układzie,
loop – określa czy powtarzać odtwarzanie,
preload – wyznacza, czy załadować zasobów w trakcie ładowania strony,
src – adres URL do pierwotnego, ładowanego źródła.

Korzystając z powyższych informacji możemy otrzymać następujący przykład:

W praktyce pojawi się jednak problem, związany z implementacją różnych wersji kodeków w przeglądarkach (np. Vorbis, Advanced Audio Coding, MPEG-1 Audio Layer 3). Z tego powodu, trzeba aktualnie definiować dodatkowe zasoby w tagu source. Obsługuje on atrybuty:

media – zdefiniowanie typu zasobu. Domyślnie odpowiada wszystkim typom mediów,
src – adres URL do pierwotnego, ładowanego źródła,
type – definiuje typ zasobu, pozwalając na określenie przeglądarce, czy może odtworzyć go, bez konieczności pobierania. Musi być pod postacią prawidłowego typu MIME. Opcjonalnie, wewnątrz niego można zdefiniować parametr codecs, określający jak zakodowany jest zasób.

Na wypadek niekompatybilnej przeglądarki można wewnątrz elementu audio wstawić alternatywną wiadomość, bądź plik Flash z autorskim odtwarzaczem.



	
	
	
	
	
	
	
	Twoja przeglądarka nie obsługuje HTML 5.

W rozwiązaniu powyższego problemu pomóc może także użycie możliwości JavaScriptu i metod/atrybutów/zdarzeń dostępnych w API. Pozwalają one na manipulację na obsługiwanych plikach. Niestety skorzystanie z możliwości obiektu Audio nie będzie możliwe w jakiejkolwiek wersji IE.

buffered – określa ilość oraz początkowy i końcowy czas zbuforowanego zasobu,
canPlayType(typ_MIME) – zwraca informacje na temat tego, czy dany typ obsługiwany jest przez klienta. Możliwe wyniki to: no, maybe, probably,
currentTime – pozwala na ustawienie lub pobranie aktualnego czasu odtwarzania,
duration – wyświetla czas trwania utworu. W wypadku nie załadowania go, zwraca NaN (Not a Number),
ended – zwraca prawdę, jeżeli zakończono odtwarzanie (w przód),
loop – wartość logiczna, pozwalająca na zapętlanie dźwięku,
muted – zwraca lub ustawia, czy kanały audio są wyciszone,
pause() – pauzuje odtwarzanie,
paused – przetrzymuje informacje o tym, czy element jest spauzowany,
play() – wznawia odtwarzanie,
played – przetrzymuje informacje o odtwarzanym elemencie,
volume – zwraca lub ustawia głośność dźwięku w zakresie od 0.0…0.1.

Przykład:

Przykład z użyciem new Audio():

var obj = new Audio('');
alert(!!(obj.canPlayType));

Kwestia filmowa: element VIDEO

Drugi, ważny element HTML 5. Oparty o znacznik video. Przyjmuje te same atrybuty co audio, a ponadto:

height – określa wysokość okna playera,
poster – adres URL alternatywnej grafiki, wyświetlanej jeżeli domyślny zasób nie będzie dostępny,
width – określa szerokość okna odtwarzacza.

Tak oto możemy stworzyć podstawowy przykład użycia:

Ponownie, w praktyce, powinno się zdefiniować kilka, różnych źródeł plików, w celu obsługi odtwarzacza przez większą ilość przeglądarek.



	
	
	
	
	
	
	
	Twoja przeglądarka nie obsługuje HTML 5.

W odtwarzaczu wyświetlane są dwa filmy (Elephants Dream, Big Buck Bunny) na licencji zezwalającej na rozprowadzanie kopii w trybie online.

Obróbka

Zarówno w przypadku jednego, jak i drugiego elementu możemy je stylować.

audio, video {
	width: 480px;
	height: 320px;
}

Kompatybilność

Kodek (kontener)	Android	Chrome >= 3.0	Firefox >= 3.5	Iphone	Opera >= 10.5	Safari >= 4
Theora video (Ogg/.ogv)	x	✓	✓	x	✓	x
Vorbis audio (Ogg/.ogg)	x	✓	✓	x	✓	x
H.264 video (MP4/.mp4)	✓	✓	x	✓	x	✓
AAC audio (MP4/.mp3)	✓	✓	x	✓	x	✓
WAV audio (WAV/.wav)	-	-	✓	-	✓	✓

Wzorzec projektowania wtyczek jQuery na bazie metod i funkcji

m1chu — Sat, 06 Mar 2010 18:17:32 +0000

Praca z jQuery prędzej, czy później wymusza na nas kompleksowe tworzenie rozwiązań wykonywanych po stronie użytkownika. Metody filtrujące, animacje, czy efekty na galeriach zdjęć łatwiej będzie osiągnąć i rozwijać posługując się, łączącymi się na wtyczki, mechanizmami metod i funkcji, dostępnymi w frameworku.

Metoda, a funkcja?

Podstawowa różnica pomiędzy nimi polega na tym, że operują na innych obiektach. Każda nowa metoda musi być dołączona do prototypu jQuery.fn, a funkcja po prostu do obiektu jQuery.

/* metoda */
jQuery.fn.nazwa = function() {
	[...]
};

/* funkcja */
jQuery.nazwa = function() {
	[...]
};

W praktyce powoduje to, że do metody odwołujemy się operując na jakimś elemencie, identyfikatorze, bądź na klasie znajdującej się na stronie internetowej, a w przypadku funkcji, po prostu ją wywołujemy w celu wykonania jakieś akcji.

/* wywołanie: metoda */
$(element).nazwa();

/* wywołanie: funkcja */
var x = $.nazwa();
alert(x);

Obydwie możemy parametryzować. Argumentem może być zwykła zmienna, dowolnego, obsługiwanego przez JavaScript typu lub obiekt przechowujący zbiór pól o konkretnym przeznaczeniu.

/* metoda z parametrem */
jQuery.fn.nazwa = function(options) {
	[...]
};

/* funkcja z parametrem */
jQuery.nazwa = function(options) {
	[...]
};

Umowne zasady tworzenia pluginów

Twórcy jQuery, poprzez dokumentację, podpowiadają jakimi zasadami należy się kierować, aby poprawnie tworzyć wtyczki. Mianowicie:

Terminologie funkcja, metoda, czy klasa są stosowanie umownie, z racji specyfiki przeznaczenia każdego z tych elementów. Fraza metoda jest w powyższym wypadku synonimem całego pojęcia wtyczki.
Nazwy plików powinny być formowane następująco: jquery.[nazwa_wtyczki].js. Przykładowo: jquery.nazwa.js.
W metodach this jest referencją do aktualnie przetwarzanego obiektu jQuery.
Powinno się dołączać wtyczkę do obiektu nadrzędnego poprzez jQuery, a nie $, co użytkownikom zwiększa pole manewru we wprowadzaniu zmian z użyciem jQuery.noConflict().
W celu uniknięcia problemów z poprawnością kodu po jego wcześniejszej kompresji, wszelkie metody oraz funkcje powinny kończyć się znakiem średnika (;).
Użycie .each pozwala na bezproblemową iteracje po wszystkich elementach na których operujemy w metodzie.
Metoda domyślnie musi zwracać wartość.

.each(function(indeks, element)) – przenosi się po każdym elemencie drzewa DOM, będących częścią obiektu jQuery, za każdym razem wykonując funkcję określoną jako parametr opisywanej metody.

Przykład:


	play
	the
	game

$('ol').each(function(i, e) {
	// e == this
	// e jest warte użycia w konkretnych zagnieżdżeniach, kiedy to this nie zawsze wskazuje na aktualnie analizowany element pętli
	$(e).html('' + $(this).text() + '');
});

Przekazywanie parametrów w celu kontrolowania zachowań wtyczki

Czym byłby plugin bez możliwości prostej parametryzacji określonych zachowań? W celu ułatwienia zrozumienia ich tworzenia postaramy się stworzyć bardzo prosty tester poprawności wpisywanych do pola danych (np. o identyfikatorze #nick). Sprawdzimy w nich, czy wprowadzony tekst będzie odpowiadał odpowiedniemu wzorcowi wyrażenia regularnego i będzie wystarczająco długi. Ponadto określimy do jakiego elementu zwrócić informację na wypadek niespełnienia wcześniej wymienionych kryteriów. Warto więc będzie zdefiniować na stałe wartości tych opcji oraz dać przyszłym jej użytkownikom możliwość nadpisania ich w argumentach wywoływanej metody.

jQuery.extend([ tryb_rekursywny ,] obiekt_rozszerzany, obiekt_1_rozszerzający [, ... obiekt_n_rozszerzający]) – łączenie dwóch lub kilku właściwości obiektów do osobnego.

tryb_rekursywny – przyjmuje wartości logiczne (true/false) w celu wykonania rekursywnego łączenia,
obiekt_rozszerzany – element nadpisywany (w celu uniknięcia należy pozostawić puste),
obiekt_x_rozszerzający – elementy łączone.

Załóżmy więc, że nazwiemy naszą wtyczkę filtrate, a domyślne dane będziemy przetrzymywać w obiekcie defaults.

jQuery.fn.filtrate = function() {
	var defaults = {
		length:		6, // minimalna długość wprowadzanego tekstu
		regexp:		/[0-9a-z]/gi, // kryterium wprowadzanych znaków
		returnto:	'footer' // informacja o błędzie zostanie zwrócona do tego elementu
	};

	alert(defaults.regexp); // przykładowe użycie
};

Za pomocą parametru options przekażemy spersonalizowane dane konfiguracyjne.

jQuery.fn.filtrate = function(options) {
	var defaults = {
			length:		6, // minimalna długość wprowadzanego tekstu
			regexp:		/[0-9a-z]/gi, // kryterium wprowadzanych znaków
			returnto:	'footer' // informacja o błędzie zostanie zwrócona do tego elementu
	}; 

	// rozszerzenie domyślnej konfiguracji
	var options = $.extend(defaults, options);

	alert(options.regexp); // przykładowe użycie
};

Propozycje wywołań metody z użyciem argumentów.

$('#nick').filtrate({length: 3});
// lub
$('#nick').filtrate({
	regexp: /[0-9]/gi,
	length: 3
});

Do ustawień nie ma jednak publicznego dostępu. Możemy co prawda skonfigurować je przy wywoływaniu wtyczki, ale nie bezpośrednio, np. później. W tym celu należy przenieść domyślne wartości do własności składowej metody oraz połączyć wprowadzane i predefiniowane dane bez modyfikacji tych drugich.

jQuery.fn.filtrate = function(options) {
	// rozszerzenie domyślnej konfiguracji bez jej nadpisywania (pierwszy argument pusty)
	var options = $.extend({}, $.fn.filtrate.defaults, options);

	alert(options.regexp); // przykładowe użycie
};

$.fn.filtrate.defaults = {
	length:		6, // minimalna długość wprowadzanego tekstu
	regexp:		/[0-9a-z]/gi, // kryterium wprowadzanych znaków
	returnto:	'footer' // informacja o błędzie zostanie zwrócona do tego elementu
};

Zewnętrzny programista ma teraz szansę wykonania ustawień przed i po wywołaniu wtyczki, a także bez konieczności robienia tego w bloku jQuery(document).ready(function() [...]);.

// nadpisanie długości spoza parametru
$.fn.filtrate.defaults.length = 3;
$('#nick').filtrate({regexp: /[0-9]/gi});

Prywatne funkcje – ukrywamy poszczególne elementy

Nie każda partia kodu powinna być dostępna do bezpośredniego wywołania przez użytkownika wtyczki. Przykładem może być tutaj funkcja użytkowa, stworzona stricte do celów danej metody. Aby tego dokonać, należy opleść całą definicję pluginu w funkcję zamykającą (closure) oraz po za samą metodą użyć standardowej formy tworzenia funkcji w JavaScript. Metodologia tworzenia funkcji w jQuery nie zda tutaj prawidłowego rezultatu. Dostęp będzie nadal publiczny.

(function($) { // start: closure
	$.fn.filtrate = function() {
		$.logs(1); // ostrzeżenie z zawartością '1'

		logs(1); // ostrzeżenie z zawartością '1'
	};		

	function logs($obj) {
    	alert($obj);
  	};

	$.logs = function($obj) {
		alert($obj);
	};
})(jQuery); // end: closure

jQuery(document).ready(function() {
	$('#nick').filtrate();

	$.logs(1); // ostrzeżenie z zawartością '1'
	logs(1); // brak dostępu do tej funkcji z zewnątrz
});

Wywoływanie funkcji oraz innych metod we wtyczce

Zaistnieć może także sytuacja przeciwna do powyższej. Z różnych powodów możemy chcieć skorzystać z publicznie dostępnej metody, zaimplementowanej wewnątrz wtyczki, którą tworzymy lub z funkcji przedstawionych na początku artykułu.

[...]
        
        	Wpisz swój script nick
            Wpisz swój a href nick
        
[...]

Mamy przykładowy zestaw paragrafów, z których będziemy chcieli wykluczyć pewny ciąg znaków. Ponieważ będziemy sprawdzać więcej elementów niż jeden, skorzystamy z wcześniej wymienionej metody iteracyjnej .each(), a następnie pobierzemy ich zawartości, usuniemy stosowną frazę (korzystając z osobnej funkcji/metody) i zwrócimy wynik do znacznika je zawierającego.

jQuery.fn.filtrate = function(options) {
	var defaults = {
		erase:	 	/a href/g, // tekst do usunięcia
		usemethod:	true // pomocnicze, użycie metody lub funkcji
	};
	// rozszerzenie domyślnej konfiguracji
	var options = $.extend(defaults, options);

	return this.each(function() {
		var context = $(this).html(); // pobranie zawartości elementu
		switch (options.usemethod) // dodany w celach naukowych ;]
		{
			case false:
				context = $.cleanup(context, options.erase); // wywołanie funkcji
				break;
			default:
				context = $.fn.filtrate.cleanup(context, options.erase); // wywołanie metody
				break;
		}
		$(this).html(context); // zapisanie zmodyfikowanej zawartości elementu
	});
};		

// metoda zaimplementowana we wtyczce
jQuery.fn.filtrate.cleanup = function(context, erase) {
	return context.replace(erase, ''); // usunięcie frazy z ciągu
};

// osobna funkcja
jQuery.cleanup = function(context, erase) {
	return context.replace(erase, ''); // usunięcie frazy z ciągu
};

jQuery(document).ready(function() {
	// tryb wywoływania z metody
	$('footer p').filtrate({erase: /script/g});

	// tryb wywoływania spoza metody
	return $('footer p').each(function() {
		var context = $(this).html();
		context = $.fn.filtrate.cleanup(context, /a href/g);
		context = $.cleanup(context, /script/g);
		$(this).html(context);
	});
});

Osiągamy postawiony cel

Na podstawie powyższych rad możemy osiągnąć postawiony sobie cel – tester poprawności wpisywanych danych do pola typu input. Rozwiązanie będzie zezwalać na testowanie wielu pól naraz.

[...]
    	
			
			
        
[...]

Wywołanie odbywać się będzie w momencie zwolnienia przycisku klawiatury.

jQuery(document).ready(function() {
	$('input').keyup(function() {
		$('input').filtrate({regexp: /[a-z]/g});
	});
});

W przestrzeni funkcji zawierającej wtyczkę znajdzie się prywatna funkcja logująca akcje oraz dwie publiczne metody implementowane w pluginie. Pierwsza z nich będzie sprawdzać poprawność wpisywanego tekstu pod względem zadanego wzorca, a druga długość wprowadzonego ciągu znaków.

	// metoda testująca poprawność wpisanych znaków
	$.fn.filtrate.preg_match = function(pattern, subject) {
		var subject_splited = subject.split(''); // utworzenie tablicy znaków
		for ( i=0; i < subject_splited.length; ++i ) // iteracja po każdym ze znaków
		{
			// jeżeli którykolwiek znak nie będzie odpowiadał wzorcowi metoda zwraca fałsz
			if ( subject_splited[i].match(new RegExp(pattern)) == null )
			{
				return false;
			}
		}
		return true; // wszystkie znaki są odpowiednie, prawda - jedziemy dalej ;]
	};

	// metoda porównująca długości ciągów
	$.fn.filtrate.strlen_compare = function(string, min_length) {
		var length = string.length;
		if ( length < 1 ) // tekst nie został wpisany
		{
			return false;
		}
		else if ( length < min_length ) // tekst krótszej długości niż wymagana
		{
			return min_length - length;
		}
		return true; // tekst odpowiedniej długości
	};

	// funkcja prywatna, logująca akcje
	function log_alerts(returnto, text)
	{
		// jeżeli nie podano tekstu do wypisania, czyścimy zawartość znacznika przetrzymującego ostrzeżenia i informacje
		if ( text == undefined )
		{
			$(returnto).html('');
			return;
		}

		// dodanie nowego akapitu z zwróconą treścią do podanego znacznika
		$('' + text + '').appendTo(returnto);
	}

Domyślne opcje ustawimy poza wtyczką. W niej samej, dla każdego wskazanego elementu strony, sprawdzimy najpierw warunek długości, a gdy zostanie spełniony, także zawartości.

(function($) { // start: closure
	$.fn.filtrate = function(options) {
		// rozszerzenie domyslnej konfiguracji bez jej nadpisywania (pierwszy argument pusty)
		var options = $.extend({}, $.fn.filtrate.defaults, options);

		var context, strlen_compared_result;

		// czyszczenie znacznika zawierającego informacje o stanie pól
		log_alerts(options.returnto);

		// sprawdzenie każdego elementu
		return this.each(function(i) {
			context = $(this);

			// testowanie długości
			strlen_compared_result = $.fn.filtrate.strlen_compare(context.val(), options.length);
			switch (strlen_compared_result)
			{
				case false: // w wypadku niewpisania tekstu
					// logowanie akcji
					log_alerts(options.returnto, 'Pole ' + context.attr('id') + ' jest puste');
					return true;
					break;
				case true: // w wypadku odpowiedniej długości tekstu
					// puste
					break;
				default: // w wypadku za krótkiego tekstu zwracany jest: tekst + wymagana długość + ilość brakujących znaków
					log_alerts(options.returnto, 'Pole ' + context.attr('id') + ' zawiera za mało znaków (minimum: ' + options.length + ' / brakuje: ' + strlen_compared_result + ')');
					return true;
					break;
			}

			// testowanie typów znaków znajdujących się w tekście
			switch ($.fn.filtrate.preg_match(options.regexp, context.val()))
			{
				case false: // w wypadku pojawienia się niedozwolonych znaków
					log_alerts(options.returnto, 'Pole ' + context.attr('id') + ' zawiera niedozwolone znaki');
					return true;
					break;
				default: // w wypadku poprawnego sformowania tekstu
					log_alerts(options.returnto, 'Pole ' + context.attr('id') + ' jest prawidłowo wypełnione');
					break;
			}
		});
	};

	$.fn.filtrate.defaults = {
		length:	 6, // minimalna dlugosc wprowadzanego tekstu
		regexp:	 /[0-9a-z]/gi, // kryterium wprowadzanych znaków
		returnto:   'footer' // informacja o bledzie zostanie zwrócona do tego elementu
	};

	// pozostałe dwie metody + prywatna funkcja
})(jQuery); // end: closure

Przykład ten powinien przybliżyć kwestię wcześniej poruszone w artykule. Na jego podstawie udostępniłem także testową stronę oraz gotowe pliki do pobrania.

15 przydatnych wyrażeń regularnych w PHP

m1chu — Tue, 13 Oct 2009 20:23:51 +0000

W pewnym stadium zaawansowania wyrażenia regularne stają się potężnym narzędziem każdego programisty PHP (i nie tylko). A to dlatego, że pozwalają na wykonywanie operacji, których często nie sposób dokonać w prosty sposób przy pomocy standardowych funkcji zawartych w tym języku. Walidacja zawartości zmiennych, czy podmienianie specyficznej części ich zawartości – na to pozwalają wyrażenia regularne. 15-ście przykładowych, najbardziej niezbędnych dla każdego web developera, skompletowałem w dalszej części artykułu. Do Waszej dyspozycji oddaję także prosty serwis sprawdzający poprawność wprowadzanych wzorców.

1. Walidacja adresu e-mail opartego na hoście

Wzorzec:

/^([a-z0-9]{1})([^\s\t\.@]*)((\.[^\s\t\.@]+)*)@([a-z0-9]{1})((([a-z0-9-]*[-]{2})|([a-z0-9])*|([a-z0-9-]*[-]{1}[a-z0-9]+))*)((\.[a-z0-9](([a-z0-9-]*[-]{2})|([a-z0-9]*)|([a-z0-9-]*[-]{1}[a-z0-9]+))+)*)\.([a-z0-9]{2,6})([.]?)$/Diu

Opis:

Wyrażenie ma za zadanie sprawdzać, czy wprowadzony przez użytkownika adres e-mail ma poprawną formę. Aby test zakończył się sukcesem muszą zostać spełnione następujące warunki:

nazwa użytkownika musi zaczynać się od znaku litery lub cyfry, nie może zawierać spacji, tabulatorów, aty, za to mogą się znajdować w nim kropki, pod warunkiem, że nie występują jedna, po drugiej,
po nazwie użytkownika musi pojawiać się znak małpy,
domena, podobnie jak nazwa użytkownika, musi rozpoczynać się od litery, bądź cyfry, po czym do znaków dozwolonych dochodzą - oraz ., pod warunkiem, że pierwszy z wcześniej wymienionych znaków nie znajduje się na początku lub na końcu nazwy subdomeny (wyjątkiem są dwa myślniki na jej końcu odpowiadające często prefiksom xn--), a drugi nie jest poprzedzany swoim odpowiednikiem. TLD może mieć długość od dwóch do sześciu znaków,
domena może być zakończona kropką,
rozwiązanie nie sprawdza jak długi jest wprowadzony adres e-mail.

Strona testowa:

Tutaj.

Tekst spełniający warunki:

2.a_a-d@n-do.x-d.pl

Tekst nie spełniający warunków:

2.a_a-d@n-do.x-d.v-.pl (część domeny kończąca się nieprawidłowym znakiem)

Uwagi:

Jeżeli rozwiązanie w jakimkolwiek stopniu zawiedzie można pokusić się o użycie wyrażenia z ostatniej aktualizacji pliku logical_filters.c ze źródeł PHP.

Rozwiązanie oparte o wyrażenie regularne:

$email = trim('adres@domena.pl');
if ( !preg_match('/^([a-z0-9]{1})([^\s\t\.@]*)((\.[^\s\t\.@]+)*)@([a-z0-9]{1})((([a-z0-9-]*[-]{2})|([a-z0-9])*|([a-z0-9-]*[-]{1}[a-z0-9]+))*)((\.[a-z0-9](([a-z0-9-]*[-]{2})|([a-z0-9]*)|([a-z0-9-]*[-]{1}[a-z0-9]+))+)*)\.([a-z0-9]{2,6})([.]?)$/Diu', $email) )
{
	print 'Nieprawidłowy adres e-mail';
}

Rozwiązanie oparte o filter_var (PHP >= 5.2):

$email = trim('adres@domena.pl');
if ( (bool)filter_var($email, FILTER_VALIDATE_EMAIL) === false )
{
	print 'Nieprawidłowy adres e-mail';
}

2. Walidacja adresu e-mail opartego na hoście lub IPv4 serwera

Wzorzec:

/^([a-z0-9]{1})([^\s\t\.@]*)((\.[^\s\t\.@]+)*)@((([a-z0-9]{1})((([a-z0-9-]*[-]{2})|([a-z0-9])*|([a-z0-9-]*[-]{1}[a-z0-9]+))*)((\.[a-z0-9](([a-z0-9-]*[-]{2})|([a-z0-9]*)|([a-z0-9-]*[-]{1}[a-z0-9]+))+)*)\.([a-z0-9]{2,6})([.]?))|((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])))$/Diu

Opis:

Wyrażenie ma za zadanie sprawdzać, czy wprowadzony przez użytkownika adres e-mail ma poprawną formę. Aby test zakończył się sukcesem muszą zostać spełnione warunki z poprzedniego punktu oraz:

po znaku @ musi się pojawić opisany już wcześniej prawidłowo sformowany host lub adres IPv4 serwera w postaci czterech, dziesiętnych oktetów.

Strona testowa:

Tutaj.

Tekst spełniający warunki:

2.a_a-d@64.64.100.100

Tekst nie spełniający warunków:

2.a_a-d@64.64.256.100 (trzeci oktet jest po za zakresem)

Uwagi:

Jeżeli rozwiązanie w jakimkolwiek stopniu zawiedzie można pokusić się o użycie wyrażenia z ostatniej aktualizacji pliku logical_filters.c ze źródeł PHP.

Rozwiązanie oparte o wyrażenie regularne:

$email = trim('adres@85.64.100.100');
if ( !preg_match('/^([a-z0-9]{1})([^\s\t\.@]*)((\.[^\s\t\.@]+)*)@((([a-z0-9]{1})((([a-z0-9-]*[-]{2})|([a-z0-9])*|([a-z0-9-]*[-]{1}[a-z0-9]+))*)((\.[a-z0-9](([a-z0-9-]*[-]{2})|([a-z0-9]*)|([a-z0-9-]*[-]{1}[a-z0-9]+))+)*)\.([a-z0-9]{2,6})([.]?))|((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])))$/Diu', $email) )
{
	print 'Nieprawidłowy adres e-mail';
}

Rozwiązanie oparte o filter_var (PHP >= 5.2):

$email = trim('adres@domena.pl');
if ( (bool)filter_var($email, FILTER_VALIDATE_EMAIL) === false )
{
	print 'Nieprawidłowy adres e-mail';
}

3. Prosta weryfikacja adresu URL

Wzorzec:

/^(http|ftp)([s]{0,1}):\/\/([a-z0-9]{1})((([a-z0-9-]*[-]{2})|([a-z0-9])*|([a-z0-9-]*[-]{1}[a-z0-9]+))*)((\.[a-z0-9](([a-z0-9-]*[-]{2})|([a-z0-9]*)|([a-z0-9-]*[-]{1}[a-z0-9]+))+)*)(\.([a-z0-9]{2,6})){0,1}((:[0-9]){0}|(:[1-9]{1}[0-9]*))\//iu

Opis:

Zweryfikować, czy użytkownik wprowadził adres URL, wg wzoru:

protokół://adres_serwera:port/

dozwolone protokoły: http, https, ftp, ftps,
adres serwera w formie serwera lokalnego, subdomen, domeny i rozszerzenia,
port jest opcjonalny,
dalsze wprowadzone dane (jak Query String) nie są sprawdzane,
konstrukcja jest przeznaczona do sprawdzanie adresów opartych na IPv4.

Strona testowa:

Tutaj.

Tekst spełniający warunki:

http://m1chu.eu/

Tekst nie spełniający warunków:

htt://adres.com/temp/ (nieprawidłowy schemat)

Rozwiązanie oparte o wyrażenie regularne:

$url = trim('http://m1chu.eu');
if ( !preg_match('/^(http|ftp)([s]{0,1}):\/\/([a-z0-9]{1})((([a-z0-9-]*[-]{2})|([a-z0-9])*|([a-z0-9-]*[-]{1}[a-z0-9]+))*)((\.[a-z0-9](([a-z0-9-]*[-]{2})|([a-z0-9]*)|([a-z0-9-]*[-]{1}[a-z0-9]+))+)*)(\.([a-z0-9]{2,6})){0,1}((:[0-9]){0}|(:[1-9]{1}[0-9]*))\//iu', $url) )
{
	print 'Nieprawidłowy adres URL';
}

4. Wycinanie hosta z portem z adresu URL

Wzorzec:

/^(http|ftp)([s]{0,1}):\/\/((.*)\.[a-z0-9]{2,6}|((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]))){0,1}((:[0-9]){0}|(:[1-9]{1}[0-9]*))\//iu

Opis:

Pobrać host wraz z portem (jeżeli został podany) z URI. Pozostałe zasady są tożsame z wymienionymi w poprzednim punkcie.

Strona testowa:

Tutaj.

Tekst spełniający warunki:

http://m1chu.eu:80/ (zwróci: m1chu.eu:80)

Tekst nie spełniający warunków:

htt://adres.com/temp/ (nieprawidłowy schemat)

Rozwiązanie oparte o wyrażenie regularne:

$url = trim('ftps://stro.eu:1000/file.exe');
if ( preg_match('/^(http|ftp)([s]{0,1}):\/\/((.*)\.[a-z0-9]{2,6}|((\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5]))){0,1}((:[0-9]){0}|(:[1-9]{1}[0-9]*))\//iu', $url, $matches) )
{
	// $matches[3] - nazwa serwera z domeną lub adres IPv4
	// $matches[10] - port
	print $matches[3] . ':' . $matches[10];
}

5. Sprawdzanie adresu IP (protokół IPv4)

Wzorzec:

/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/Du

Opis:

Wykryć poprawność wprowadzonego w formie dziesiętnych oktetów IP (w wersji czwartej protokołu).

Strona testowa:

Tutaj.

Tekst spełniający warunki:

0.0.0.0

Tekst nie spełniający warunków:

101.256.0.1 (drugi oktet poza zakresem)

Rozwiązanie oparte o wyrażenie regularne:

$ipv4 = trim('192.168.0.1');
if ( !preg_match('/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/Du', $ipv4) )
{
	print 'Nieprawidłowy adres IPv4';
}

Rozwiązanie oparte o filter_var (PHP >= 5.2):

$ipv4 = trim('192.168.0.1');
if ( (bool)filter_var($ipv4, FILTER_VALIDATE_IP, FILTER_FLAG_IPV4) === false )
{
	print 'Nieprawidłowy adres IPv4';
}

6. Sprawdzamy adres IP z wykluczeniem puli prywatnych adresów (protokół IPv4)

Wzorzec:

/^([1-9]{1}[1-9]{0,1}|1\d([1-6]{1}|[8-9]{1})|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-4])$/Du

Opis:

Wykryć poprawność wprowadzonego IP (w wersji czwartej protokołu) z wykluczeniem części prywatnych i zastrzeżonych pul. Metoda nie dotyczy masek podsieci. Objęte wyjątki:

10.0.0.0 – 10.255.255.255,
0.0.0.0 – 0.255.255.255,
255.255.255.255,
127.0.0.0 – 127.255.255.255.

Strona testowa:

Tutaj.

Tekst spełniający warunki:

192.168.0.136

Tekst nie spełniający warunków:

0.0.0.0 (adres prywatny)

Uwagi:

Stosując funkcję ze zbioru filter_* odrzucone zostaną wszystkie zakresy adresów prywatnych i zastrzeżonych (np. 255.255.255.x).

Rozwiązanie oparte o wyrażenie regularne:

$ipv4 = trim('68.78.205.0');
if ( !preg_match('/^([1-9]{1}[1-9]{0,1}|1\d([1-6]{1}|[8-9]{1})|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-4])$/Du', $ipv4) )
{
	print 'Nieprawidłowy adres IPv4';
}

Rozwiązanie oparte o filter_var (PHP >= 5.2):

$ipv4 = trim('68.78.205.0');
if ( (bool)filter_var($ipv4, FILTER_VALIDATE_IP, FILTER_FLAG_IPV4 | FILTER_FLAG_NO_PRIV_RANGE | FILTER_FLAG_NO_RES_RANGE) === false )
{
	print 'Nieprawidłowy adres IPv4';
}

7. Sprawdzamy adres IP (protokół IPv6 i IPv4)

Wzorzec:

/^((([0-9A-Fa-f]{1,4}:){7}(([0-9A-Fa-f]{1,4})|:))|(([0-9A-Fa-f]{1,4}:){6}(:|((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})|(:[0-9A-Fa-f]{1,4})))|(([0-9A-Fa-f]{1,4}:){5}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(([0-9A-Fa-f]{1,4}:){4}(:[0-9A-Fa-f]{1,4}){0,1}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(([0-9A-Fa-f]{1,4}:){3}(:[0-9A-Fa-f]{1,4}){0,2}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(([0-9A-Fa-f]{1,4}:){2}(:[0-9A-Fa-f]{1,4}){0,3}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(([0-9A-Fa-f]{1,4}:)(:[0-9A-Fa-f]{1,4}){0,4}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(:(:[0-9A-Fa-f]{1,4}){0,5}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})))(%.+)?$/Du

Opis:

Wykryć poprawność wprowadzonego IP (w wersji szóstej i czwartej protokołu).

Strona testowa:

Tutaj.

Tekst spełniający warunki:

fe80:0:0:0:0204:61ff:254.157.241.86

Tekst nie spełniający warunków:

2001:::db8:: (błędna notacja)

Uwagi:

Stosując funkcję ze zbioru filter_* odrzucone zostaną wszelkie adresy IPv4. W przedstawionym wyrażeniu regularnym adresy z tej wersji są akceptowane zarówno występując samotnie, jak i w postaci sekwencji czterech ostatnich bajtów w IPv6 (np. :247.125.68.4).

Rozwiązanie oparte o wyrażenie regularne:

$ipv6 = trim('fe80::204:61ff:fe9d:f156');
if ( !preg_match('/^((([0-9A-Fa-f]{1,4}:){7}(([0-9A-Fa-f]{1,4})|:))|(([0-9A-Fa-f]{1,4}:){6}(:|((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})|(:[0-9A-Fa-f]{1,4})))|(([0-9A-Fa-f]{1,4}:){5}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(([0-9A-Fa-f]{1,4}:){4}(:[0-9A-Fa-f]{1,4}){0,1}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(([0-9A-Fa-f]{1,4}:){3}(:[0-9A-Fa-f]{1,4}){0,2}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(([0-9A-Fa-f]{1,4}:){2}(:[0-9A-Fa-f]{1,4}){0,3}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(([0-9A-Fa-f]{1,4}:)(:[0-9A-Fa-f]{1,4}){0,4}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(:(:[0-9A-Fa-f]{1,4}){0,5}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})))(%.+)?$/Du', $ipv6) )
{
	print 'Nieprawidłowy adres IPv6/IPv4';
}

Rozwiązanie oparte o filter_var (PHP >= 5.2):

$ipv6 = trim('fe80::204:61ff:fe9d:f156');
if ( (bool)filter_var($ipv6, FILTER_VALIDATE_IP, FILTER_FLAG_IPV6) === false )
{
	print 'Nieprawidłowy adres IPv6';
}

8. Wykrywanie kolorów RGB w postaci szesnastkowej

Wzorzec:

/^#?[0-9a-f]{3}(?:[0-9a-f]{3})?$/Diu

Opis:

Sprawdzić, czy wprowadzone dane są szesnastkowymi odpowiednikami zapisu kolorów modelu RGB.

Strona testowa:

Tutaj.

Tekst spełniający warunki:

#ff0000

Tekst nie spełniający warunków:

#a0hfg1 (g i h nie są znakami używanymi przy zapisie heksadecymalnym)

Rozwiązanie oparte o wyrażenie regularne:

$hex = trim('#0F15a2');
if ( !preg_match('/^#?[0-9a-f]{3}(?:[0-9a-f]{3})?$/Diu', $hex) )
{
	print 'Nieprawidłowy kod szesnastkowy koloru!';
}

9. Proste sprawdzenie nazwy użytkownika

Wzorzec:

/^([a-z0-9]{1})([a-z0-9_-]{2,11})$/Diu

Opis:

Wprowadzone dane muszą rozpoczynać się od znaku alfanumerycznego. Kolejne znaki mogą być ponadto myślnikiem lub podkreśleniem. Długość tekstu nie może być większa niż 12ście znaków.

Strona testowa:

Brak.

Tekst spełniający warunki:

m1chu

Tekst nie spełniający warunków:

_nick (pierwszy znak nie jest cyfrą, ani literą)

Rozwiązanie oparte o wyrażenie regularne:

$username = trim('m1chu');
if ( !preg_match('/^([a-z0-9]{1})([a-z0-9_-]{2,11})$/Diu', $username) )
{
	print 'Nieprawidłowa nazwa użytkownika!';
}

10. Proste sprawdzenie hasła użytkownika

Wzorzec:

/^(?=[a-z0-9_#@%\*-]*?[A-Z])(?=[a-z0-9_#@%\*-]*?[a-z])(?=[a-z0-9_#@%\*-]*?[0-9])([a-z0-9_#@%\*-]{8,24})$/Diu

Opis:

Wpisane hasło użytkownika musi mieć od ośmiu, do dwudziestu czterech znaków, pośród których musi być co najmniej jedna wielka litera, jedna mała i jedna cyfra. Dodatkowo dozwolone są: _, #, @, %, * i -.

Strona testowa:

Brak.

Tekst spełniający warunki:

1xY#n6%2V

Tekst nie spełniający warunków:

@1bbd2 (za krótki ciąg, brak wielkiej litery)

Rozwiązanie oparte o wyrażenie regularne:

$password = trim('To#jEst@_haSL-o%usera*');
if ( !preg_match('/^(?=[a-z0-9_#@%\*-]*?[A-Z])(?=[a-z0-9_#@%\*-]*?[a-z])(?=[a-z0-9_#@%\*-]*?[0-9])([a-z0-9_#@%\*-]{8,24})$/Diu', $password) )
{
	print 'Nieprawidłowa nazwa użytkownika!';
}

11. Zaznaczanie frazy w tekście

Wzorzec:

/\b(fraza)\b/iu

Opis:

Zamienianie podanej frazy na inną lub wystylowanie jej formy. Przydatna funkcja w wyszukiwarkach.

Strona testowa:

Brak.

Działanie:

szukana_fraza -> szukana_fraza

Rozwiązanie oparte o wyrażenie regularne:

$text = 'Wyszukane frazy: wyrażenia, regularne, preg_match, preg_replace';
$find = 'regularne';
print preg_replace('/\b(' . $find . ')\b/iu', '\\1', $text);

Rozwiązanie oparte o str_ireplace:

$text = 'Wyszukane frazy: wyrażenia, regularne, preg_match, preg_replace';
$find = 'regularne';
print str_ireplace($find, '' . $find . '', $text);

12. Zamiana tekstowych emotikon na graficzne

Opis:

Podmiana tekstowych uśmieszków na ich odpowiedniki graficzne. Wersja z użyciem str_ireplace.

Strona testowa:

Brak.

Rozwiązanie oparte o wbudowaną funkcję PHP:

$text_format = array(
	array(';)', ';-)', 'x)', ';]', ';-]'),
	array(':)', ':-)', '=)', ':]', ':-]'),
	array(':(', ':-(', '=(', ':[', ':-['),
	array(';(', ';-(', 'x(', ';[', ';-['),
	array(':P', ':-P', '=P'),
	array(':D', ':-D', '=D'),
	array(':*', ':-*', '=*'),
	array(':O', ':-O', '=O'),
	array(':/', ':-/', '=/')
	);

$image_format = array(
	'wink.png',
	'smile.png',
	'sad.png',
	'cry.png',
	'tongue.png',
	'bigsmile.png',
	'kiss.png',
	'surprise.png',
	'grimace.png'
	);

$text = 'To jest przykładowy tekst ;] Prawda, że fajny? :-D Pogrymasiłbym trochę =/, ale po co? :) Także do zobaczenia :*';

foreach ( $text_format as $key => $val )
{
	$text = str_ireplace($val, '', $text);
}

print $text;

13. Zamiana BBCode na HTML

Wzorzec przykładowy:

/\[b\](.*?)\[\/b\]/Dius

Opis:

Podmiana BBCode poprzez kod HTML. Funkcjonalność znana z forów internetowych.

Strona testowa:

Brak.

Działanie:

[i]pochylenie[/i] -> pochylenie

Uwagi:

W komercyjnych projektach należy skorzystać z bardziej zaawansowanych klas do obsługi tego problemu. Pozwoli to uniknąć np. problemu z nieprawidłowym zagnieżdżeniem kilku tagów BBCode w sobie.

Rozwiązanie oparte o wyrażenie regularne:

function bbcode2html($code) {
	$search = array(
        '/\[b\](.*?)\[\/b\]/Dius',
        '/\[i\](.*?)\[\/i\]/Dius',
        '/\[u\](.*?)\[\/u\]/Dius',
        '/\[s\](.*?)\[\/s\]/Dius',
        '/\[img\=(.*?)\](.*?)\[\/img\]/Dius',
        '/\[img\](.*?)\[\/img\]/Dius',
        '/\[url\](.*?)\[\/url\]/Dius',
        '/\[url\=(.*?)\](.*?)\[\/url\]/Dius',
        '/\[color\=(#?([a-f0-9]{6}|[a-f0-9]{3}))\](.*?)\[\/color\]/Dius',
        '/\[size\=([1-9]{1}[0-9]{0,2})(px|pt|em)\](.*?)\[\/size\]/Dius',
    	'/\[font\=([a-z0-9\s"]+)\](.*?)\[\/font\]/Dius',
    );

	$replace = array(
        '\\1',
        '\\1',
        '\\1',
        '\\1',
        '',
        '',
        '\\1',
        '\\2',
        '\\2',
        '\\3',
    	'\\2'
    );

	return preg_replace($search, $replace, $code);
}

14. Sprawdzenie poprawności wprowadzonego kodu pocztowego

Wzorzec:

/^[0-9]{2}-?[0-9]{3}$/Du

Opis:

Testowanie poprawności wpisanego kodu pocztowego (w formacie używanym w Polsce). Dozwolone są wersje z myślnikiem pomiędzy drugą i trzecią cyfrą, oraz bez niego.

Strona testowa:

Brak.

Tekst spełniający warunki:

62-150

Tekst nie spełniający warunków:

611-10

Rozwiązanie oparte o wyrażenie regularne:

$postcode = '61-610';
if ( !preg_match('/^[0-9]{2}-?[0-9]{3}$/Du', $postcode) )
{
	print 'Nieprawidłowy kod pocztowy';
}

15. Operowanie na znacznikach XML/XHTML

Wzorzec:

/<([a-z]+)([\s]{1}[^=]+[=]{1}[^<]+)*(?:>(.*)<\/\1>|\s+\/>)/u

Opis:

Sprawdzenie znaczników XML/XHTML oraz pobranie treści znajdującej się pomiędzy nimi.

Strona testowa:

Brak.

Rozwiązanie oparte o wyrażenie regularne:

$tag = 'm1chu.eu - another devblog';
if ( !preg_match_all('/<([a-z]+)([\s]{1}[^=]+[=]{1}[^<]+)*(?:>(.*)<\/\1>|\s+\/>)/u', $tag, $matches, PREG_PATTERN_ORDER) )
{
	print 'Nieprawidłowa konstrukcja znacznika';
}
else {
	print_r($matches); // print_r($matches[3]) - lista treści zawieranych w tagach
}

Słowem zakończenia

Starałem się jak najdokładniej sprawdzić powyższe wzorce. Nie mniej jednak, jak to zwykle bywa, mogą się w nich znaleźć błędy. Jeżeli ktoś takowe znajdzie, ma jakieś pytania, czy lepsze propozycje to proszę o komentarze pod wpisem.

Jak wspomniałem na wstępie, uruchomiłem serwis pozwalający na sprawdzanie wyrażeń regularnych względem podanego tekstu. Jest on aktualnie w fazie testów, więc mogą występować błędy w jego działaniu. Po zakończeniu wprowadzania poprawek baza wpisów zostanie wyczyszczona do zera. Można go testować, a w przyszłości korzystać pod dwoma adresami:

regexp.pl (adres główny)
regexp.m1chu.eu (adres alternatywny)

Pod względem danych sesyjnych obydwa adresy działają niezależnie. Zapraszam do testowania i wyrażania swojego zdania na moim blogu, w komentarzach tego artykułu.

Jak wyizolować liczbę subskrybentów RSS korzystając z FeedBurner’a?

m1chu — Sun, 15 Feb 2009 12:55:53 +0000

W niezbędniku prawie każdego blogera leży możliwość menadżerowania swoimi kanałami RSS, bądź Atom. Któż z nas nie zna FeedBurner’a?. Zestawu narzędzi ułatwiających nam, czy to udostępnianie użytkownikom możliwości subskrypcji treści naszej strony, czy po prostu możliwość przejrzenia lub zamieszczenia statystyk w naszym serwisie. Pomimo dostarczonego API nie znajdziemy jednak bezpośrednio w panelu FeedBurner’a kodu pozwalającego na umieszczenie samej liczby subskrybentów bloga. I rozwiązanie tego, pozornie błahego problemu postaram się Wam dziś przedstawić…

Stary, dobry FeedBurner.com…

Niespełna dwa lata temu słynny serwis zajmujący się obsługą kanałów RSS został przejęty za sto milionów dolarów przez Google. Pomimo tego, że minęło aż tyle czasu wielu blogerów nadal korzysta z zasobów starego, wysłużonego, pierwotnego FeedBurner’a. I co może wydawać się dziwne, to właśnie oni mają najbardziej ułatwioną sytuację.

Zarówno stara, jak i nowa odsłona serwisu oferują usługę FeedCount dostępną z poziomu menu Publicize. Pozwala ona na dobranie typu wbudowanego tła wyświetlającego ilość subskrybentów (statyczne, bądź animowane) oraz na dobranie jego barwy i koloru tekstu. Wraz z ustawieniem tych parametrów otrzymujemy kod HTML do wstawienia na naszą stronę. I tu rodzi się problem. Prócz kilku stylistycznych zmian wygląd tychże „chickletów” jest zawsze taki sam i najczęściej nijak pasuje do designu naszego bloga. Co zrobić jeżeli np. chcemy wraz z tekstem przycisku odnoszącego użytkowników do wygenerowanego kanału wstawić także ilość osób śledzących naszą stronę?

Rozwiązanie zaprezentuje na podstawie użytkowania platformy WordPress (oczywiście ilość subskrybentów – opierając się na dalszym tekście – można zamieścić w każdym innym systemie zarządzania treścią, bądź nawet na własnej, prywatnej stronie). W takim wypadku wystarczy zainteresować się wtyczkami FeedSmith 2.3 (polska wersja) (wg. developerów WordPress’a kompatybilną ze wszystkimi wersjami 2.x) i Feed Count 1.2 (polska wersja). Pierwsza z nich niezbędna jest do obsługi kanału RSS przez serwis FeedBurner.

Jej instalacja oraz rejestracja w serwisie jest niezbędna do działania drugiej z nich. Jak wykonuje się instalacje wtyczek? Wystarczy wyodrębnić z archiwum odpowiednie pliki (w naszym pierwszym przypadku będzie to FeedBurner_FeedSmith_Plugin.php, w drugim feedcount.php) i umieścić je w katalogu wp-content/plugins/ systemu WordPress. Następnie wtyczki należy zaktywować w panelu administratora (Wtyczki / Nazwa wtyczki / Włącz).

Obydwa pluginy należy dodatkowo skonfigurować w zakładce Ustawienia. Pierwszy z nich swoje opcje ukrywa w podmenu FeedBurner. Zobaczycie tam dwa pola do uzupełnienia, jedno wymagane, drugie opcjonalne. Pierwsze z nich to pełny odnośnik do feedu strony w serwisie FeedBurner (i dla starej odsłony, i dla nowej na serwerach Google), a drugi to link do kanału RSS komentarzy.

Konfiguracja wtyczki FeedSmith w panelu.

Co do drugiego rozszerzenia to działa ono dla wersji 2.x WordPress’a, z tymże przy najnowszej 2.7x może sprawiać problemy natury zwracania wyniku w postaci N/A zamiast poprawnej wartości.

Konfiguracja wtyczki Feed Count w panelu.

Rozszerzenie to także należy dodatkowo skonfigurować. Robimy to w panelu poprzez menu Ustawienia / Feed Count. W jej opcjach trzeba podać co najmniej adres kanału (Feed Url) w postaci nazwy kanału na FeedBurner’ze, częstość aktualizowania ilości subskrybentów (Update interval) oraz częstość aktualizacji po wystąpieniu błędu (Update interval (recovery)). Pozostałe pola nie są wymagane. Link url to adres odnośnika pojawiającego się na zwróconej przez skrypt ilości osób śledzących stronę. Before za to jest treścią pojawiającą się przed liczbą w.w. użytkowników, a After to treść po.

Po wykonaniu konfiguracji należy jeszcze w strukturze szablonu strony dodać odpowiedni kod.

Wstawić go musimy w miejscu w którym chcemy wyświetlać wystylizowaną liczbę użytkowników RSS (plugin ten nie zwraca tylko liczby otaczając ją poprzez dodatkowe tagi HTML). Oczywiście możemy go modyfikować. Jeżeli chcielibyście np. wyświetlić go w odnośniku (w header.php) o nazwie RSS w dodatkowych nawiasach to możecie to zrobić w następujący sposób:

No i ostatecznie musicie w panelu FeedBurner’a (nie wtyczki, a profilu w serwisie w którym zakładaliście konto) zezwolić wtyczce na działanie z API tegoż serwisu. Wystarczy wejść do zakładki Publicize, a następnie do menu Awareness API i zaktywować tą funkcjonalność.

Wtyczka Feed Count 1.2 dla Google FeedBurner!

Jeżeli zdecydowaliście się jednak na migracje z starych serwerów serwisu, na ultraszybkie i megafajne klastry Google, a wcześniej trafnie stosowaliście w.w. metodę do wyodrębniania liczby użytkowników to prawdopodobnie będzie ona także działać po przejściu na feedburner.google.com.

Trzeba jednak w takim wypadku dokonać pewnych, małych zmian w kodzie wyżej opisywanej wtyczki Feed Count. W tym celu edytujemy plik feedcount.php (np. poprzez Notepad++ lub ZendStudio). Przechodzimy w okolice 41 linii w celu odnalezienia następującego kodu.

		  'map_fc_queryurl' =>'http://api.feedburner.com/awareness/1.0/GetFeedData?uri=',

Co można zauważyć element tablicy o nazwie przed => wskazuje na adres dostępowy do API, ale feedburner.com. A my przecież chcemy korzystać już z API Google. W tym celu należy tą linijkę zmienić niżej wymienionym kodem, po czym zapisać plik i ponownie wysłać go na serwer.

		  'map_fc_queryurl' =>'https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=',

C… bombki strzelił! Jedyne co otrzymuje w wyniku to ten niewdzięczny „N/A”…

Po pierwsze musicie sprawdzić czy biblioteka cURL (Client URL Library Functions) jest dostępna w konfiguracjach Waszych serwerów (jako pakiet PHP). W tym celu wystarczy stworzyć jakikolwiek plik o rozszerzeniu .php, wypełnić go poniższym kodem i wywołać na hipotetycznie problematycznym serwerze.

W wylistowanych wynikach wystarczy poszukać wpisu cURL support i sprawdzić, czy jego flaga ustawiona jest na enabled. Jeżeli nie, to właśnie znaleźliście przyczynę problemu. Powyższa, kluczowa dla nas wtyczka oparta jest na tym libie, a co za tym idzie jego brak powoduje niemożność poprawnego wykonania kodu tego rozszerzenia.

Diagnoza problemu: cURL…

Kiedy zawodzą dostępne już rozwiązania najlepszym sposobem na pozbycie się własnego problemu jest… napisanie indywidualnej solucji. Niestety to wiążę się najczęściej z jedną z dwóch rzeczy. Albo z posiadaniem konkretnej wiedzy odnośnie danego problemu, albo z wydatkiem związanym z opłaceniem osoby która rozwiąże Waszą dolegliwość.

Jeżeli dotarliście do tego punktu tzn. że nadal nie uzyskaliście pożądanego efektu. Pora więc właśnie na w.w. sposób, z tymże ja dla Was przygotuję go w stu procentach… za friko :] Mógłbym Wam zaprezentować kilkulinijkowy sposób, bo praktycznie do tego ogranicza się rozwiązanie – pytanie po co? Blog ten ma uczyć, dlatego postaram się Wam przedstawić dwie metody pobierania potrzebnych nam danych które po lekkim tuningu złożą się w jedną, w pełni funkcjonalną wtyczkę napisaną specjalnie na potrzeby tego artykułu. I w gruncie rzeczy będzie to najbardziej optymalne rozwiązanie ze wszystkich tutaj przedstawionych…

Przypadek numer jeden: brak możności użytkowania cURL’a. Jak to w życiu bywa, jak nie da wejść się jednym oknem, trzeba próbować drugim. Sposobów jest wiele, ja wybiorę użycie funkcji file_get_contents. Zaimplementowana jest ona w PHP od wersji 4.3 i dodatkowo do jej działania konfiguracja serwera musi zezwalać na zdalne (z zewnętrznych źródeł) pobieranie plików. Trik który zastosujemy ogranicza się kolejno do:

pobrania danych z adresu FeedBurner’a korzystając z udostępnionego przez niego API,
sprawdzenia czy odebrane dane są poprawne (pod kątem poprawności adresu i ewentualnych wyjątków),
wyszukanie frazy circulation=" w posiadanym buforze. Kod który pobraliśmy wcześniej musi być w formacie XML, a co za tym idzie składa się on ze znaczników i parametrów. Właśnie parametr circulation zawiera w sobie wartość będącą ilością subskrybentów,
jeżeli fraza nie zostanie znaleziona, zwrócenie błędu,
w przeciwnym razie pobranie ciągu od pozycji wyszukiwanej wyżej frazy + 13 znaków (długość szukanego słowa), aż do znalezienia następnego cudzysłowia (bez niego).

Kiedy problemem nie jest jednak cURL…

SimpleXMLElement – klasa rozszerzenia SimpleXML dostarczająca prosty zestaw narzędzi do konwersji XML na obiekt na którym można operować poprzez użycie selektorów.

Przykład:


	raz
	dwa

$xml = new SimpleXMLElement(XML);
$found = $xml->xpath('parent/children'); // wyszukiwanie potomka w drzewie dokumentu XML (argument w postaci np. rodzic/potomek/potomek_potomka/itp.)
print_r($found); // wypisanie tablicy wyników

Plugin FeedCount nie zawsze działa na WordPress’ie 2.7x. Nie pytajcie dlaczego. Szczerze? Nie wiem i nie chciało mi się dociekać co jest tego powodem. Postanowiłem jakiś czas temu spotykając się z tą przypadłością po prostu stworzyć bardziej uproszczony kod, niż ten z popularnej wtyczki. Jak wygląda jego schemat krokowy? Po kolei:

inicjalizacja cURL,
ustawienie opcji transferu biblioteki (zwracanie zawartości bez wypisywania jej na ekran oraz wprowadzenie adresu docelowego),
wykonanie zadania, po czym zniszczenie sesji połączenia,
sprawdzenie, czy nie występuje znacznik nadrzędny err z parametrem code o wartości 1 (oznaka zwrócenia błędu, najczęściej nieodnalezienia pliku),
jeżeli powyższy punkt nie okaże się prawdą to utworzenie obiektu SimpleXMLElement i wyszukanie zawartości wyżej już wspomnianego atrybutu circulation.

err['code'] == '1' ) // sprawdzenie wystąpienia błędu
{
	print 'n/d';
}
print $xml->feed->entry['circulation']; // pobranie ilości subskrybentów
?>

Aby bardziej wyjaśnić działanie powyższej partii kodu posłużę się przykładowymi danymi, jakie mogą zostać pobrane.

Można z niego wywnioskować, że odpowiednio operując na klasie SimpleXMLElement moglibyśmy uzyskać identyfikator konta, jego część adresu zwaną w tym artykule po prostu nazwą, datę utworzenia, ilość osób śledzących RSS’a, liczbę kliknięć oraz ściągnięć. Działanie powyższej klasy jest proste. Z kodu XML tworzymy obiekt po którym możemy przesuwać się za pomocą zwyczajnych selektorów. Przykładowo jeżeli chcielibyśmy wyłuskać z powyższego przykładu identyfikator (id) zrobilibyśmy to w następujący sposób:

print $xml->feed['id'];

Pierwszy, główny element rsp jest pomijany w instancji obiektu.

Zasada działania SimpleXMLElement na podstawie kodu pobierania liczby subskrybentów.

Autorska wtyczka finalnym rozwiązaniem naszego problemu!

I tak oto dochodząc do meritum przedstawiam Wam rozszerzenie uproszczone, ale za to bardziej wzbogacone o trzy, moim zdaniem niezbędne funkcjonalności. Easy Feed Counter posiada możliwość łatwej instalacji i konfiguracji poprzez panel administratora. Proces wdrażania tego pluginu jest adekwatny do dodawania opisywanego wcześniej FeedCount (jest także dokładnie opisany w linku powyżej w repozytorium modyfikacji). Pozwala on na ustawienie serwera feedów, metody pobierania statystyk oraz wpisanie nazwy konta kanału RSS na FeedBurner’ze. Opcjonalnie możecie także dodać konto komentarzy na tym serwisie, o ile takowe posiadacie.

Rezultaty działania wtyczki.

Rozwiązanie to ma także jeden wielki, dodatkowy atut. Nie formatuje jak inne pluginy zwracanej treści, a ogranicza się do podania wartości (liczby użytkowników), bądź kodu błędu (n/d). To pozwala na szersze modyfikacje położenia bądź wyglądu wyników po wywołaniu funkcji easyfeedcounter_get([opcjonalny: parametr]) bez dodatkowej ingerencji w sam kod rozszerzenia.

Bardziej skrupulatne objaśnienie, opisane krok po kroku znajdziecie w moim repozytorium. W przypadku wątpliwości dotyczących tematu, bądź instalacji tego tworu proszę śmiało pytać :]

Efekt graficznego podświetlenia w jQuery i Prototype z Scriptaculous

m1chu — Mon, 09 Feb 2009 12:45:54 +0000

Jedni nie korzystają z nich wcale, niektórzy tylko po to aby zwiększyć funkcjonalność tworzonych przez siebie stron, a u jeszcze innych zauważalny jest przepych tego typu rozwiązań. Biblioteki programistyczne języka JavaScript, bo o ich wykorzystaniu tu mowa to źródło bardzo różnorodnych, nie tylko funkcjonalnych, ale także estetycznych efektów. Sieć aż kipi od dobrych i słabych, lepiej oraz słabiej wytłumaczonych przykładów użycia możliwości MooTools, jQuery, Prototype z Scriptaculous, czy innych mniej powszechnych frameworków.

Jednym z takich efektów jest możliwość stworzenia animowanego, graficznego podświetlenia pojawiającego się np. nad grafiką wywołującą animację. Interaktywność taka została opisana na NetTuts z wykorzystaniem MooTools. My osiągniemy taki wynik dzięki zastosowaniu jQuery (w jednym przykładzie) oraz dodatkowo także za pomocą Prototype wraz z Scriptaculous (w drugim przykładzie).

Oczekiwany efekt.

Krok 1: Za co się chwycić na początku…

Na początek musisz wiedzieć w jakim celu potrzebny jest Ci prezentowany w tym artykule efekt. Menu? Wyświetlanie dodatkowych informacji w graficznej liście produktów? Czy może szybki, animowany splash? Wybór jest Twój i podług niego będziesz musiał zaopatrzyć się w dodatkowe, niezbędne elementy do wykonania podświetlenia.

Chodzi tu mianowicie o grafiki, których musi być dwa razy więcej niż elementów podatnych na działanie mechanizmu. Powiedzmy, jeżeli chcemy w pięcioelementowym menu zastosować w każdym zdarzenie po najechaniu myszką zgodne z przesłaniem tego artykułu to potrzebujemy dziesięciu grafik. Pięć opisujących przyciski menu i drugie tyle będące „treścią” pojawiającą się po podświetleniu.

Po uporaniu się z wizualną częścią problemu oraz strony internetowej możemy ruszyć krok dalej.

Krok 2: Zaopatrujemy się w jQuery i/lub Prototype i Scriptaculous!

jQuery to aktualnie najpopularniejsza biblioteka. I najłatwiej ją skatalogować w czeluścia własnego projektu. Wystarczy ze strony głównej pobrać wersję 1.3.1 production/Minified i umieścić ją w obrębie plików tworzonego przez nas przykładu (niezbędny będzie tylko plik jquery-1.3.1.min.js).

Z Prototype sprawa jest ciut bardziej skomplikowana, bo prócz standardowego frameworka musimy pobrać także dodatkowy interfejs w postaci Scriptaculous, dzięki któremu uzyskamy dostęp do efektu pozwalającego na dynamiczne zmienianie właściwości CSS elementów strony. Ściągamy więc wersję 1.6.0.3 pierwszej biblioteki, oraz paczkę z wersją 1.8.2 drugiej. Z obydwu wyodrębniamy pliki i w ramach folderu tworzonego przez nas projektu umieszczamy tylko prototype.js oraz effects.js (z drugiego archiwum).

W przypadku tego artykułu umownie pliki związane z frameworkami będą znajdować się w podkatalogu javascript folderu głównego. Obydwa przykłady (dotyczące, jeden jQuery, a drugi Prototype z Scriptaculous) będą oczywiście wykonywane w osobnych plikach znajdujących się w dwóch różnych katalogach.

Przykładowe rozdzielenie implementacji przykładów na dwa katalogi. W naszym przypadku pliki .js znajdują się dodatkowo w podkatalogu javascript.

Krok 3: Tworzymy strukturę XHTML

Atutem naszego rozwiązania jest kompatybilność z serwowaniem dokumentu XHTML w postaci application/xhtml+xml, czego bardzo często brakuje w przypadku efektów opartych na bibliotekach JS. Z racji tego także, że i w przypadku Prototype i jQuery struktura strony pozostaje niezmienna to obojętnie który framework wykorzystujesz poniższe tłumaczenie i partie kodu będą prawidłowe.

Z powodu tego w jaki sposób będziemy wysyłać treść strony posłużymy się małą częścią kodu PHP, a co za tym idzie plik korzystający z naszego mechanizmu musi mieć też takie rozszerzenie (no chyba, że serwer jest inaczej skonfigurowany, ale to już problematyka do rozwiązania na inny temat).

'."\r\n";
	print ''."\r\n";
}
else // wysłanie dokumentu jako text/html dla przeglądarek nie obsługujących typu zawartości pliku z powyższego warunku, np. dla IE
{
	header("Content-Type: text/html; charset=utf-8");
	print ''."\r\n";
}
?>

Poniżej dodajemy uniwersalny układ strony. Ważnym ułatwieniem jest możliwość tworzenia odnośników z elementów graficznych podatnych mechanizmowi, a także fakt, że nie korzystamy w nim z tagów img, a efektu zbliżonego do sliding-doors w celu wyświetlania obrazów.



	
  	
  	
	Product highlighter

Krok 4: Stylizujemy strukturę strony za pomocą CSS

Posługując się metodami pozycjonowania elementów dostępnymi w kaskadowym arkuszu stylów możemy operując na elementach o identyfikatorach siteContainer, pageContainer, highlightsContainer oraz divach potomnych ułożyć i wystylizować wygląd, w tym położenie jak na wyżej zamieszczonym filmiku (screenie) obrazującym wykonanie zadania z tego artykułu.

Do wszystkich bloków kodu CSS odwołujących się do tagów zawierających identyfikatory grafik zostały dodane także właściwości background z adresem pliku tła.

W naszym przypadku poniższy kod zapisujemy do pliku stylesheet.css.

/* ustawienia domyślne dla ciała strony (w poprawnie wysyłanym XHTML jest to html+body, a nie tylko body) */
html, body {
	margin: 0px;
	padding: 0px;
	background: #000 url('bg.png') repeat-x;
}

#siteContainer {
	margin: 150px auto 0px auto; /* marginesy - wyśrodkowanie poziome */
	width: 573px;
	height: 345px;
	position: relative; /* relatywna pozycja, kontener */
	background: transparent url('container.png') no-repeat top left;
}
#pageContainer {
	position: absolute; /* pozycja względem #siteContainer */
	z-index: 5; /* ponad ciałem strony i pod #highlightsContainer */
	top: 128px;
	left: 0px;
}
#highlightsContainer {
	position: absolute; /* pozycja względem #siteContainer */
	z-index: 10; /* ponad pozostałymi elementami */
	left: 178px;
	top: 30px;
}
/* ustawienie w linii wraz z zmianą wyglądu kursora */
#pageContainer > div {
	float: left;
	cursor: pointer;
}
/* rozmiary klikalnych divów potomnych znajdujących się w kontenerze listy grafik podatnych na działanie mechanizmu */
#pageContainer > div a {
	width: 178px;
	height: 178px;
	display: block;
}
#page1 {
	margin-right: 19px; /* prawy margines - odstęp od kolejnego diva */
}
#page1 a {
	background: url('icon_1.png') no-repeat; /* tło grafiki podatnej na działanie efektu */
}
#page2 {
	margin-right: 20px; /* prawy margines - odstęp od kolejnego diva */
}
#page2 a {
	background: url('icon_2.png') no-repeat; /* tło grafiki podatnej na działanie efektu */
}
#page3 a {
	background: url('icon_3.png') no-repeat; /* tło grafiki podatnej na działanie efektu */
}

/* rozmiary wszystkich potomków typu div kontenera zawierającego podświetlenia */
#highlightsContainer > div {
	position: absolute;
	width: 222px;
	height: 101px;
	display: block;
}
/* pliki tła w pojawiających się podświetleniach */
#highlight1 {
	background: transparent url('highlights_1.png') no-repeat;
}
#highlight2 {
	background: transparent url('highlights_2.png') no-repeat;
}
#highlight3 {
	background: transparent url('highlights_3.png') no-repeat;
}

Krok 5a: Dodajemy jQuery do dokumentu

Tego, czego zabrakło dotychczasowo w naszym dokumencie to załączenie bibliotek oraz pliku .js w którym będzie znajdować się kod animujący pożądany przez nas efekt.

Dla jQuery w sekcji head należy dodać pliki jquery-1.3.1.min.js oraz product-highlighter.js (który umownie będzie zawierał dodatkowy kod).

Krok 5b: Dodajemy Prototype z Scriptaculous do dokumentu

Tym razem musimy dodać jeden plik więcej. Bibliotekę (prototype.js), jej dodatkowy interfejs, a dokładniej plik zawierający obiekt Effect (effects.js) oraz jak w powyższym przypadku plik z naszym kodem animacji (product-highlighter.js).

Krok 6a: Implementujemy kod animacji z użyciem jQuery

Jak to bywa w przypadku tego frameworka, aby jakieś zdarzenie działało poprawnie powinno się je umieszczać w funkcji $(document).ready(), której zawartość zostanie załadowana w momencie załadowania drzewa dokumentu.

$(document).ready(function() {
	[kod]
});

W [kod] musimy przypisać (do tablicy) wg. klasy wszystkie grafiki wyświetlane podczas podświetlenia, ustawić parametry podstawowe CSS oraz stworzyć sprawdzanie w pętli, czy dana grafika o klasie .pages nie jest najechana przez kursor i w zależności o danego trybu (kursor na/kursor poza) wykonać pożądaną animacji (wyłonienie dodatkowego tła / zanikanie dodatkowego tła).

Poniższy kod umieszczamy w pliku product-highlighter.js.

$(document).ready(function() {
	// tablica elementów o klasie .highlights
	var highlights = $('.highlights');

	// ustawienie pełnej przezroczystości elementów pojawiających się w czasie najechania myszką na obiekty podatne efektowi oraz widzialności ich kontenera
	$('.highlights').css('opacity', 0);
	$('#highlightsContainer').css('visibility', 'visible');

	// sprawdzanie każdego elementu podatnego mechanizmowi
	$('.pages').each(function(i) {
		// jeżeli na danym elemencie znajduje się kursor
		$(this).mouseover(function() {
			// wykonanie animacji grafiki wyłanianej i przypisanej do najechanego elementu (margines o 15px w górę i brak przezroczystości w czasie 0,5 sekundy)
			$(highlights[i]).animate({
				opacity: 1,
				marginTop: '-15px'
			}, 500);
		}).mouseout(function(){ // jeżeli na danym elemencie nie znajduje się już kursor
			$(highlights[i]).animate({
				opacity: 0,
				marginTop: '-0px'
			}, 500);
		});
	});
});

Należy jeszcze wyjaśnić dokładniej w jaki sposób działa $(highlights[i]).animate(). Mianowicie przy każdej iteracji pętli $('.pages').each() przekazuje ona do parametru function(i) aktualny numer elementu na którym się znajduje. Ponieważ w id pageContainer znaczniki potomne muszą być posegregowane i musi być ich tyle samo co obiektów graficznych w highlightsContainer to jeżeli kursor znajduje się na pierwszym podatnym na efekt obrazie to w podświetleniu wyłania się także pierwsza grafika. Wszystko to dzięki wyłuskaniu jej z tablicy highlights poprzez parametr i.

Krok 6b: Implementujemy kod animacji z użyciem Prototype z Scriptaculous

Event.observe – uchwyt rejestrujący zdarzenie na drzewie dokumentu. Funkcja obiektu składającego się na bibliotekę Prototype. Posiada cztery argumenty:

element – obserwowany element DOM, mogący być referencją do niego bądź jego identyfikatorem,
nazwaZdarzenia – standaryzowana wg. DOM Level 2 Events nazwa zdarzenia, np. load,
uchwyt – uchwyt w postaci funkcji.

Przykład:

Prototype

Event.observe('test', 'click', function() {
	[kod]
});

Podobnie w Prototype obserwujemy zdarzenie, ale tym razem załadowania całej strony w celu późniejszej obserwacji aktywności kursora na wybranych elementach aktywnych. Można oczywiście podobnie jak w poprzednim podpunkcie wykonać obserwacje zdarzeń wraz z załadowanie DOM (drzewa dokumentu) poprzez użycie document.observe('dom:loaded', function() {}). To tylko kwestia osobistego wyboru.

Event.observe(window, 'load', function() {
	[kod]
});

Dalsze postępowanie jest adekwatne do tego opisanego w przypadku zastosowania jQuery. Z tymże, tablicę elementów o danej klasie pobiera się poprzez podwójny znak dolara ($$), a najechanie oraz zjechanie kursorem poza zadany obszar rozpoznaje się także poprzez obiekt Event i metodę observe(). Do animacji służy funkcja Morph instancji Effect z pliku effects.js interfejsu Scriptaculous.

Event.observe(window, 'load', function() {
	var highlights = $$('.highlights'); // utworzenie tablicy

	$$('.highlights').invoke('setStyle', { opacity: 0 }); // ustawienie stylu przezroczystości
	$$('#highlightsContainer').invoke('setStyle', { visibility: 'visible' }); // widzialność kontenera

	$$('.pages').each(function(v, i) { // pętla
		Event.observe(v, 'mouseover', function() { // zdarzenie wykonywane w momencie pojawienia się kursora na elemencie
			new Effect.Morph(highlights[i], { // animacja
				style: 'opacity: 1; margin-top: -15px;',
				duration: 0.5 // czas 0,5 sekundy
			});
		});
		Event.observe(v, 'mouseout', function() { // zdarzenie wykonywane w momencie wyjechania kursorem poza element
			new Effect.Morph(highlights[i], {
				style: 'opacity: 0; margin-top: 0px;',
				duration: 0.5
			});
		});
	});
});

Tym razem do funkcji w $$('.pages').each() przekazywane są dwa parametry: v i i. Pierwszy z nich jest odpowiednikiem this i wskazuje na aktualnie przetwarzany element tablicy znaczników o klasie .pages. Drugi to numer pokazujący który z kolei tag jest aktualnie sprawdzany. Inaczej pisząc jego zadanie jest równoznaczne do działania parametru i w przykładzie z jQuery.

Effect.Morph – metoda interfejsu Scriptaculous >= 1.7. Pozwala na animacyjną zmianę właściwości CSS elementu. Przyjmuje jeden podstawowy argument style zawierający w sobie właściwości i wartości CSS w formie oryginalnej bądź w postaci Camel-Case, czyli bez spacji i znaków specjalnych pomiędzy kilkoma członami nazwy właściwości. Opcjonalnie można dodawać kolejne parametry rdzenia obiektu Effect, takie jak duration (czas animacji), czy transition (rodzaj animacji, wymaga Effect.Transitions).

Przykład:

new Effect.Morph('div_id', {
	style: {
		background-color: '#000',
		color: '#fff'
	},
	duration: 0.5,
	transition: Effect.Transitions.spring
});

Demonstracja wyników…

Stworzyłem dwa gotowe przykłady, których analiza pozwoli Wam jeszcze bardziej zrozumieć jak stworzyć ten efekt. Pierwszy, za pomocą jQuery. Drugi, za pomocą Prototype z Scriptaculous.

Jeżeli chcecie dowiedzieć się więcej o tych bibliotekach to zapraszam do ich dokumentacji (Prototype, jQuery).

Pozycjonujemy za pomocą kaskadowego arkusza stylów (CSS)

m1chu — Wed, 07 Jan 2009 23:14:44 +0000

Pozycjonowanie najczęściej kojarzy się wszystkim z optymalizacją stron w taki sposób, aby uzyskać jak najwyższe miejsce w wyszukiwarkach, pod zadanymi frazami. W skrócie – z SEO (Search Engine Optimization). W procesie tworzenia stron internetowych, a dokładniej w trakcie opisywania formy wyświetlania strony poprzez arkusz stylów pojęcie te przyjmuje zgoła inne znaczenie. A mianowicie jest to metoda tworzenia układu strony poprzez użycie właściwości position. Za namową kilku użytkowników Vivee przedstawię dziś na czym właśnie ta metoda polega…

Właściwością CSS określającą położenie elementów w oknie przeglądarki jest position. Może ona przyjąć pięć wartości działających zgodnie w przeglądarkach od wersji Mozilla Firefox 0.1+, Opera 4.0+, Safari 3 oraz IE 7. Wszystkie są zgodne z specyfikacją CSS 2.0+:

static – wartość domyślna przyjmowana kiedy dla danego obiektu nie zostanie przypisana żadna wartość position. Wartość ta określa standardowe, statyczne rozmieszczenie fragmentów strony – tzn., od góry do dołu i od lewej do prawej. Można je w łatwy sposób umieszczać szeregowo tworząc z nich elementy liniowe (za pomocą display: inline;), a także równolegle, jeden pod drugim tworząc z nich elementy blokowe (display: block;).
relative – powoduje zastosowanie pozycjonowania relatywnego względem elementu nadrzędnego. Obiekt może zmienić pozycję za pomocą dodatkowych właściwości left i top, nie mniej jednak elementy sąsiadujące zachowywać się będą tak jakby on nadal był na swoim pierwotnym miejscu. W praktyce jednak dodatkowych właściwości się najczęściej nie używa, gdyż rozwarstwiają one stronę tworząc kilka osobnych układów. Najczęściej stosowane w połączeniu z pozycjonowaniem absolutnym (absolute), gdzie element relatywny jest kontenerem (obiektem zawierającym, rodzicem), a absolutny jego zawartością.
absolute – blok rozmieszczany jest absolutnie względem elementu nadrzędnego, którym domyślnie jest body. Kontenerem nadrzędnym może zostać każdy fragment z nadaną wartością position inną niż static. Wymaga nadania dodatkowych właściwości left i/lub right i/lub top i/lub bottom. Obiekt z taką wartością jest wyrzucany z biegu dokumentu (tworzona jest nowa warstwa).
fixed – pozycjonowanie względem okna przeglądarki. Wymaga nadania dodatkowych właściwości left i/lub right i/lub top i/lub bottom.
inherit – przejmuje wartość rodzica.

Dodatkowe, wyżej wspomniane właściwości to:

left przyjmująca wartość będącą odległością od lewej krawędzi elementu nadrzędnego.
bottom – wartość jako odległość od dolnej krawędzi elementu nadrzędnego.
right – odległość od prawej krawędzi kontenera.
top – odległość od górnej krawędzi kontenera.

Przykład:

#absolutnieSpozycjonowanyElement {
	position: absolute;
	width: 150px;
	height: 150px;
	left: 150px;
	top: 150px;
}

Spoglądamy kątem oka na statyczne pozycjonowanie…

Najprostszym przykładem zobrazowania tego przykładu będzie utworzenie dwóch szeregowych elementów, a pod nimi jeszcze jednego o szerokości dwóch powyższych.

Na takim edukacyjnym szablonie będziemy opierać się we wszystkich metodach. W tej tradycyjnej, statycznie aby uzyskać powyższy efekt musimy #left i #right wyświetlić liniowo (w tym wypadku display: inline;, ale w innych może to być np. display: table-cell;, itp.), a #bottom blokowo (display: block;).

#left
#right
#bottom

Moglibyśmy dwa pierwsze tagi div umieścić w jednym innym, który byłby blokiem. W praktyce się to przydaje, w przedstawianej teorii nie ma jednak takiej potrzeby. Ponieważ jednak #left i #right są fragmentami liniowymi to nadane im szerokości w arkuszu nie będą odpowiadać realnie wyświetlanym rozmiarom. Z tego powodu skorzystamy z właściwości float.

float – tworzy obiekty pływające w celu otoczenia ich przez tekst, bądź tworzenia szeregu kolumn w układzie strony, co wywołane jest własnością przyklejającą obiekty do siebie względem lewej lub prawej krawędzi (CSS2+). Powoduje ona utworzenie nowego biegu dokumentu przez elementy z nadanym float przez co nie mogą się one na siebie nakładać. Posiada następujące wartości:

left – umieszcza obiekt przyklejając go z lewej strony.
right – umieszcza element przyklejając go z prawej strony.
none – wartość domyślna, element nie jest pływający.

W takim wypadku jednak stworzenie z #bottom obiektu blokowego nie spowoduje przeniesienia go do nowej linii. Musimy wprowadzić elementy z float z powrotem do biegu dokumenty, do czego służy clear.

clear definiuje położenie nowego akapitu. Rozwijane od CSS1+. Przyjmuje wartości:

none – domyślna flaga, nie powoduje zmian.
left – następna linia znajdzie się za elementami położonymi z lewej strony (w poruszanym temacie: float: left;).
right – kolejna linia znajdzie się za elementami położonymi z prawej strony (float: right;).
both – nastąpi bezprecedensowe przejście do nowej linii (bez znaczenia na wartość float).
inherit – przejmuje wartość rodzica.

No i ostatecznie nadając margines szerokości i wysokości 50 pikseli otrzymujemy finalny kod prezentujący układ jak na obrazku:

* { /* usuniecie marginesow i paddingu */
	margin: 0px;
	padding: 0px;
}
html, body {
	color: #DEDBD1;
	font-size: 12px;
	font-family: Verdana, Tahoma, Arial;
	background-color: #F6F7EE;
}
body {
	margin: 50px; /* ustawienie marginesu na 50px */
}
div#left {
	width: 198px; /* szerokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	height: 148px; /* wysokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	display: inline; /* liniowy element */
	float: left; /* stworzenie elementu plywajacego z lewej strony */
	border: 1px solid #DEDBD1;
	background-color: #F6F7EE;
}
div#right {
	height: 148px; /* wysokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	width: 198px; /* szerokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	float: left; /* stworzenie elementu plywajacego z lewej strony */
	display: inline; /* liniowy element */
	border: 1px solid #DEDBD1;
	background-color: #F6F7EE;
}
div#bottom {
	width: 398px; /* szerokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	display: block; /* element blokowy */
	height: 148px; /* wysokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	border: 1px solid #DEDBD1;
	clear: left; /* usuniecie oplywania dla float: left;, przejscie do nowej linii */
	background-color: #F6F7EE;
}

I oto rezultat, jaki otrzymamy po złożeniu całego kodu.

Position relative i position absolute!

Ponieważ najczęściej, albo korzysta się z samotnego position: absolute; lub z łączenia position: relative; z position: absolute; to zajmiemy się tymi dwoma przypadkami, tylko i wyłącznie.

Jak już wspomniałem standardowym kontenerem części układu strony z nadanym position: absolute; jest ciało strony (body). Przykładowo:

div#pozycjonowanieAbsolutne {
	position: absolute /* wzgledem body */
	left: 10%; /* 10% szerokosci ciala strony zostanie odsuniety div o tym identyfikatorze */
	top: 500px;
}

Spowoduje to umieszczenie na nowej warstwie (po za biegiem statycznym dokumentu) div w odległości 500 pikseli od górnej krawędzi ciała strony i 10 procent szerokości body od jego lewej krawędzi.

Tego typu model rozmieszczania elementów ma jeden dodatkowy atut. Pozwala na rozciąganie oraz przycinanie pozycjonowanych w taki sposób obiektów.

Pierwszą funkcjonalność otrzymamy operując na dodatkowych właściwościach określających położenie obiektu. Wystarczy podać wartości left i right, aby dokonać rozszerzenia i/lub nadać top i bottom w celu dokonania wydłużenia. Przykładowy kod:

div {
	position: absolute; /* rozmieszczanie absolutne wzgledem relatywnego, nadrzednego rodzica */
	left: 50px; right: 50px; /* rozszerzenie: 50px od lewej krawedzi, az do 50px z prawej krawedzi rodzica */
	bottom: 10%; top: 15%; /* wydłuzenie od gornej odleglosci 10% dlugosci ciala strony, do dolnej krawedzi oddalonej o 15% dlugosci strony */
}

clip – określa widoczną przestrzeń o kształtach prostokątnych. Zgodne z CSS2+. Parametry:

auto – domyślny, cały element jest widoczny.
rect(top, right, bottom, left) – określa krawędzie widoczności obiektu. Wg. specyfikacji wartością jest shape(wartości), ale zarówno w CSS2 i CSS2.1 został zaimplementowany tylko kształt prostokąta (rect).
inherit – przejmuje wartość rodzica.

Przykład:

#e {
	position: absolute;
	clip: rect(0px, 10px, 10px, 0px); /* kwadrat o krawedziach 10x10px */
}

Zobrazowanie:

Drugą funkcjonalność otrzymamy poprzez użycie clip. Chcąc absolutny fragment skrócić według rozmiarów x, y o połowę patrząc z punktu 0 możemy posłużyć się następującym kodem:

div {
	position: absolute; /* rozmieszczanie absolutne wzgledem relatywnego, nadrzednego rodzica */
	left: 50px;
	bottom: 10%;
	width: 300px; /* szerokosc */
	height: 500px; /* wysokosc */
	/*
		top: 		krawedz gorna przyciecia w miejscu krawedzi gornej div;
		right: 		krawedz prawa przyciecia w polowie szerokosci div;
		bottom:		krawedz dolna przyciecia w polowie wysokosci div;
		left:		krawedz lewa przyciecia w miejscu krawedzi lewej div;
	*/
	clip: rect(0px, 150px, 250px, 0px);
}

Pora przejść do konteneryzacji elementów absolutnie ustawianych w ciele dokumentu. Jak już wspomniałem służy do tego position: relative; które należy ustawić na rodzicu będącym dzieckiem body lub innego obiektu potomnego ciała dokumentu.


	#left
	#right

#bottom

Będziemy starali się osiągnąć rezultat jak w przykładzie tradycyjnego ułożenia strony. Posłuży nam do tego powyższa struktura, która różni się tylko tym, że pierwsze dwa (w poprzednim paragrafie liniowe) elementy div opatrzyliśmy w jeden kontener (który będzie pozycjonowany relatywnie w tym przypadku).

* { /* usuniecie marginesow i paddingu */
	margin: 0px;
	padding: 0px;
}
html, body {
	color: #DEDBD1;
	font-size: 12px;
	font-family: Verdana, Tahoma, Arial;
	background-color: #F6F7EE;
}
div:first-child { /* :first-child - klasa okreslajaca pierwszy element div u danego rodzica */
	position: relative; /* pozycjonowanie relatywne */
	width: 450px; /* szerokosc potomkow + left */
	height: 200px; /* wysokosc potomkow + top */
}
div#left {
	position: absolute; /* pozycjonowanie absolutne wzgledem relatywnego, nadrzednego rodzica */
	left: 50px; /* odleglosc od lewej krawedzi diva - rodzica */
	top: 50px; /* odleglosc od gornej krawedzi diva - rodzica */
	width: 198px; /* szerokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	height: 148px; /* wysokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	border: 1px solid #DEDBD1;
	background-color: #F6F7EE;
}
div#right {
	position: absolute; /* pozycjonowanie absolutne wzgledem relatywnego, nadrzednego rodzica */
	left: 250px; /* odleglosc od lewej krawedzi diva - rodzica, szerokosc div#left + left div#left */
	top: 50px; /* odleglosc od gornej krawedzi diva - rodzica, wysokosc div#left + top div#left */
	height: 148px; /* wysokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	width: 198px; /* szerokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	border: 1px solid #DEDBD1;
	background-color: #F6F7EE;
}
div#bottom {
	position: absolute; /* pozycjonowanie absolutne wzgledem ciala strony */
	left: 50px;
	top: 200px; /* odleglosc od gornej krawedzi body, wysokosc rodzica div#left */
	width: 398px; /* szerokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	height: 148px; /* wysokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	border: 1px solid #DEDBD1;
	background-color: #F6F7EE;
}

Porzuciliśmy typy wyświetlania (display) oraz opływanie (float) w tym listingu, które są zbyteczne w tak prostym rozmieszczeniu, a zarazem przy zastosowaniu w.w. metod umieszczania.

Obiektowi nadrzędnemu, poprzez klasę :first-child nadany jest typ i rozmiary. W blokach jemu potomnych nadane są typy absolutne, rozmiary oraz odległości od lewej i górnej krawędzi. W przypadku #right przesunięcie w prawo w postaci left jest sumą odległości przesunięcia #left i szerokości tego diva (wraz z grubością obramowania). Efekt… identyczny :]

Dla #bottom nie ma już kontenera. W tym wypadku chciałem pokazać jak rozmieszczać absolutnie z rodzicem w postaci ciała strony. Tym razem to pozycja od górnej krawędzi body jest równa wysokości relatywnego elementu zawierającego #left i #right.

Co należy pamiętać, że elementy tabel nie mogą być relatywne, a absolutne pozycjonowanie nie działa względem ich treści.

Tworzymy nieruchomą stopkę za pomocą rozmieszczenia ustalonego (fixed)

Za pomocą position: absolute; możemy umieścić stopkę na dole nieprzewijalnej strony stosując atrybuty left / right i bottom. W przypadku tradycyjnej, statycznej metody możemy stopkę umieścić w dolnych częściach każdej odpowiednio układając bloki, jeden nad drugim. Niekiedy jednak może zdarzyć się, że chcielibyśmy takowy „footer” przykleić do dolnej krawędzi okna przeglądarki bez względu, czy treść strony możemy przewijać, czy nie. O tego typu rzeczy pytali właśnie czytelnicy…

Rozmieszczanie ustalone, oznaczane jako position: fixed; działa podobnie jak absolutne, tylko że umiejscawiane obiekty są przyklejane do okna przeglądarki. Bez względu, czy mamy możliwość przewijania treści strony to one zawsze pozostają w stałym miejscu na ekranie. Typ ten jest także podatny na rozciąganie (left i right oraz bottom i top) i przycinanie (clip).

#left
#right
#bottom
#footer
#down

Dodałem dodatkowo elementy o id footer, aby pokazać w jaki sposób można przykleić stopkę, a także down dzięki któremu w przykładzie będzie można przewijać przeglądany dokument.

* { /* usuniecie marginesow i paddingu */
	margin: 0px;
	padding: 0px;
}
html, body {
	color: #DEDBD1;
	font-size: 12px;
	font-family: Verdana, Tahoma, Arial;
	background-color: #F6F7EE;
}
div#left {
	position: fixed; /* pozycjonowanie ustalone względem okna przeglądarki */
	left: 50px; /* odleglosc od lewej krawedzi diva - rodzica */
	top: 50px; /* odleglosc od gornej krawedzi diva - rodzica */
	width: 198px; /* szerokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	height: 148px; /* wysokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	border: 1px solid #DEDBD1;
	background-color: #F6F7EE;
}
div#right {
	position: fixed; /* pozycjonowanie ustalone */
	left: 250px; /* odleglosc od lewej krawedzi diva - rodzica, szerokosc div#left + left div#left */
	top: 50px; /* odleglosc od gornej krawedzi diva - rodzica, wysokosc div#left + top div#left */
	height: 148px; /* wysokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	width: 198px; /* szerokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	border: 1px solid #DEDBD1;
	background-color: #F6F7EE;
}
div#bottom {
	position: fixed; /* pozycjonowanie ustalone */
	left: 50px;
	top: 200px; /* odleglosc od gornej krawedzi body, wysokosc rodzica div#left */
	width: 398px; /* szerokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	height: 148px; /* wysokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	border: 1px solid #DEDBD1;
	background-color: #F6F7EE;
}
div#footer {
	position: fixed; /* pozycjonowanie ustalone */
	left: 50px; right: 50px; /* rozciagniecie */
	bottom: 0px; /* odleglosc od gornej krawedzi body, wysokosc rodzica div#left */
	height: 50px; /* wysokosc -2 px z powodu nadania obramowania o szerokosci 1px */
	border: 1px solid #DEDBD1;
	border-bottom: 0px;
	background-color: #F6F7EE;
}
div#down {
	position: absolute;
	left: 50px;
	top: 2500px;
}

Jeżeli przewiniecie stronę w dół, a później w górę zauważycie, że elementy nie zanikają i nie pojawiają się. To cecha tej metody. I praktycznie jedyna różnica względem position: absolute;, bo użycie w arkuszu jest jak widać prawie identyczne.

Ważnym jest także, aby usunąć wszelkie marginesy i paddingi z wbudowanych elementów drzewa dokumentu. Chodzi tutaj o html i body. Jeżeli tego nie zrobimy to w różnych przeglądarkach możemy otrzymać różny wynik przykładów, a w przyszłości tworzonych przez nas stron. Jedne fragmenty mogą zaczynać się w innym miejscu niż inne, pomimo że np. nadaliśmy wszystkim ten sam odstęp od lewej (left) i górnej (top) krawędzi kontenera. W swoich paragrafach robiłem to za pomocą *.

* { /* usuniecie marginesow i paddingu */
	margin: 0px;
	padding: 0px;
}

A gdybyśmy to tak wszystko połączyli…

To w jednym z najprostszych, tworzonych czysto do nauki przykładów otrzymalibyśmy coś takiego. Zapraszam do źródła i miłego czytania :]

——————————
(*) zamiast frazy element w tekście zostały użyte także ogólne synonimy obiekt i fragment.
(**) zamiast frazy pozycjonowanie użyto w tekście także synonimu rozmieszczenie.