Kolejna część natchnień wartych uwagi, a pierwsza dotycząca przeglądu tegorocznych startupów. Poniżej przedstawiam 21 ciekawych i godnych uwagi pozycji…

Śledzi osoby surfujące po stronie internetowej.

Społecznościowy menedżer zadań.

Telewizyjna przeglądarka internetowa.

Video-chat z losowymi użytkownikami.

Aplikacja do zarządzania projektami.

Organizator skrzynek e-mail.

Serwis oferujący skrypt Twitteropodobny.

Pozwala na stworzenie aplikacji mobilnej.

Umożliwia znalezienie najlepszych miejsc do pracy w delegacji.

Internetowy kalendarz z możliwością współdzielenia jego pól.

Kreator wirtualnej szkoły.

Piłka nożna na żywo.

Usługa badająca aktywność użytkownika i na jej podstawie dobierająca odpowiednią dla niego treść.

Sprzedaż i kupno biznesu.

Usługa, podobnie jak powyższa, pozwala na kupno i sprzedaż serwisów internetowych.

Platforma dyskusji na temat ulubionych programów telewizyjnych.

Aplikacja monitorująca stan komputera.

Serwis oferujący ulubione fragmenty filmowe.

Silnik wyszukiwarki dla sklepów internetowych.

Platforma grupowych zakupów.

Nauka o reklamach w formie zabawy.

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:

<!-- domyślny układ, startuje automatycznie, jedno źródło -->
<audio src="test.ogg" controls autoplay></audio>

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.

<!-- domyślny układ, startuje automatycznie, wiele źródeł -->
<audio controls autoplay>
	<!-- Firefox ge 3.5, Chrome ge 3 beta, Opera ge 10.5 -->
	<source src="test.ogg" type="audio/ogg; codecs=vorbis">
	<!-- Safari ge 4, Chrome ge 3 beta -->
	<source src="test.mp3">
	<!-- Opera ge 10.5, Firefox ge 3.5 -->
	<source src="test.wav">
</audio>

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

<!-- domyślny układ, startuje automatycznie, wiele źródeł -->
<audio controls autoplay>
	<!-- Firefox ge 3.5, Chrome ge 3 beta, Opera ge 10.5 -->
	<source src="test.ogg" type="audio/ogg; codecs=vorbis">
	<!-- Safari ge 4, Chrome ge 3 beta -->
	<source src="test.mp3">
	<!-- Opera ge 10.5, Firefox ge 3.5 -->
	<source src="test.wav">
	<!-- alternatywny wynik -->
	Twoja przeglądarka nie obsługuje HTML 5.
</audio>

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:

<p>
	<button type="button" onclick="stop();">Stop</button>
	<button type="button" onclick="lour();">Wycisz</button>
</p>

<script type="text/javascript">
var element = document.getElementById("audio"); /* pobranie elementu */
function stop() { /* funkcja zatrzymująca */
	if ( !!(element.canPlayType) != false ) {
		element.currentTime = 0; /* ustawienie czasu na początek */
		element.pause(); /* pauza */
	}
}
function lour() { /* funkcja wyciszająca */
	if ( !!(element.canPlayType) != false ) {
		element.volume = 0; /* głośność na zero */
	}
}
</script>

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:

<!-- buforowanie zasobu w trakcie ładowania strony, jeden plik -->
<video src="test.mp4" preload></video>

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

<!-- domyślny układ, buforuje przy ładowaniu, wiele źródeł -->
<video controls preload>
	<!-- Firefox ge 3.5, Chrome ge 3 beta, Opera ge 10.5 -->
	<source src="test.ogv" type="audio/ogg; codecs='theora, vorbis'">
	<!-- Safari ge 4, Chrome ge 3 beta -->
	<source src="test.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'">
	<!-- mobilne -->
	<source src="video.3gp" type="video/3gpp; codecs='mp4v.20.8, samr'">
	<!-- alternatywny wynik -->
	Twoja przeglądarka nie obsługuje HTML 5.
</video>

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ść

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:

1. 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.
2. Nazwy plików powinny być formowane następująco: jquery.[nazwa_wtyczki].js. Przykładowo: jquery.nazwa.js.
3. W metodach this jest referencją do aktualnie przetwarzanego obiektu jQuery.
4. 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().
5. 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 (;).
6. Użycie .each pozwala na bezproblemową iteracje po wszystkich elementach na których operujemy w metodzie.
7. Metoda domyślnie musi zwracać wartość.

<ol>
	<li>play</li>
	<li>the</li>
	<li>game</li>
</ol>

$('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('<strong>' + $(this).text() + '</strong>');
});

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.

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.

[...]
        <footer>
        	<p>Wpisz swój script nick</p>
            <p>Wpisz swój a href nick</p>
        </footer>
[...]

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.

[...]
    	<header>
			<p><input type="text" id="nick"></p>
			<p><input type="text" id="nick_second"></p>
        </header>
[...]

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
		$('<p>' + text + '</p>').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 <strong>' + context.attr('id') + '</strong> 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 <strong>' + context.attr('id') + '</strong> 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 <strong>' + context.attr('id') + '</strong> zawiera niedozwolone znaki');
					return true;
					break;
				default: // w wypadku poprawnego sformowania tekstu
					log_alerts(options.returnto, 'Pole <strong>' + context.attr('id') + '</strong> 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.

Dobrze skonstruowany serwis internetowy bazujących na technologii Flash to nie tylko dużo pracy, ale często także oszałamiający efekt. Zbiór motywujących i wartych uwagi przedstawiam dziś w dalszej części tego wpisu.

Sarasota – v5 Design – pokaz krajobrazu z nastrojowym podkładem dźwiękowym.

Interaktywna podróż po epokach.

Modernistyczna strona web developerów.

Przykład dobrze wyglądającego portfolio graphic designera.

Przykład rozwiązania bazującego na technologii Flash z motywem w postaci użytego tła.

Interaktywność i akcja zależna od ruchu myszki.

Konfiguracja wtyczki FeedSmith w panelu.

Efekt oparty o przenoszenie użytkownika pomiędzy scenami.

Wkomponowanie w strukturę elementy filmowych.

Klasyka tematu.

Portfolio z rodzimego rynku.

Strona polskiej firmy specjalizującej się w wyburzeniach.

Podziękowania dla dzi3ciola za wykonanie grafiki wstępnej.

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

$email = 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):

$email = 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', '<strong>\\1</strong>', $text);

Rozwiązanie oparte o str_ireplace:

$text = 'Wyszukane frazy: wyrażenia, regularne, preg_match, preg_replace';
$find = 'regularne';
print str_ireplace($find, '<strong>' . $find . '</strong>', $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, '<img src="smiles/' . $image_format[$key] . '" alt="' . $image_format[$key] . '" />', $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(
        '<strong>\\1</strong>',
        '<em>\\1</em>',
        '<span style="text-decoration: underline;">\\1</u>',
        '<strike>\\1</strike>',
        '<img src="\\2" alt="\\1" />',
        '<img src="\\1" alt="" />',
        '<a href="\\1">\\1</a>',
        '<a href="\\1">\\2</a>',
        '<span style="color: \\1;">\\2</span>',
        '<span style="font-size: \\1\\2;">\\3</span>',
    	'<span style="font-family: \\1;">\\2</span>'
    );

	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 = '<a href="http://m1chu.eu/" title="m1chu.eu - another devblog">m1chu.eu</a> - <strong>another devblog</strong>';
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:

1. regexp.pl (adres główny)
2. 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.

Mówi się, że pierwsze razy niekiedy bolą. Ten pomimo, że długi był w gruncie rzeczy miły, przyjemny, wręcz zabawny. Po ponad miesięcznym maratonie organizacyjno-roboczym zakończyliśmy wraz z dotarciem do punktu kulminacyjnego drogę pierwszego etapu wyprawy – finału polskiej edycji Imagine Cup 2009. I ten dziewiczy rejs, oczyma czwórki pasjonatów postaram się dzisiaj przedstawić…

Warszawa, 12 maja, anno Domini 2009!

Siedząc pełni entuzjazmu kilka godzin w pociągu relacji Berlin – Poznań – Warszawa nie podejrzewaliśmy, że będzie to pierwszy, a zarazem ostatni dzień euforii, połączonej ze stresem związanym z wyzwaniem jakie nas czekało. Sesja plakatowa, czyli pierwsze starcie z jury, a potem możliwość prezentacji projektu na scenie głównej – takie było założenie. Przynajmniej moje. Nie żadne minimum, bo ono zostało już w naszych oczach osiągnięte. Po prostu cel…

OneStepEarth – nasze rozwiązanie pomagające w walce z nadmierną emisją dwutlenku węgla.

Cofnijmy się o niespełna rok wstecz…

Nie załamując rąk po tym jak w zeszłorocznej edycji z powodów terminowych pomyłek nie wystartowaliśmy, tym razem postanowiliśmy bardziej skrupulatnie przygotować się do konkursu. Skompletowaliśmy na nowo team w postaci jednej kobiety i trzech jurnych facetów. Patrycję – studentkę Uniwersytetu im. Adama Mickiewicza oraz Bartosza (Doss), Tomasza (Tomaj) i mnie na co dzień uczęszczających na Politechnikę Poznańską. I tak oto zapoznając się z tematem tegorocznej edycji Imagine Cup zabraliśmy się do pracy, która w przyszłości miała nas kosztować dużo nerwów, potu, ale i nie mniej satysfakcji przeplatanej z odrobiną niedosytu. Kategoria Projektowania Oprogramowania stanęła przed nami otworem…

Wyobraź sobie świat, w którym technologia pomaga rozwiązać najtrudniejsze problemy ludzkości

Temat powyższy podparty był osmioma milenijnymi celami rozwoju stworzonymi przez Organizację Narodów Zjednoczonych. Zlikwidowanie problemu głodu i energii, rozwój (terytorialny) edukacji, równość płci, zdrowie dzieci i matek w ciąży, walka z HIV/AIDS, ekorozwój środowiska i światowe partnerstwo – tych fraz powinno dotyczyć rozwiązanie i chociażby pośrednio się do któregoś z nich przyczyniać.

Co by nie było, że organizatorzy nie mieli poczucia humoru. Nazwa sali, gdzie prezentowaliśmy się w pierwszy dzień.

Jak przyznali poszczególni członkowie komisji – nam się udało wstrzelić i w jeden z powyższych celów, i w samą popularność problemu który poruszaliśmy. Jakby nie patrzeć to właśnie jego dobranie zajęło nam najwięcej czasu. Na tyle długo, że zaczęliśmy go realizować dopiero po uzyskaniu wyników przejścia do drugiej rundy, gdzieś na początku lutego.

Praktyka czyni mistrza!

Myśleć, kombinować, puszczać wodze wyobraźni można długo. Nawet trzy, cztery miesiące – tak jak to było w naszym wypadku. I to na jeden temat. Piękna sprawa przeplatana komfortową sytuacją, prawda? Problem pojawia się dopiero wtedy, gdy trzeba zrealizować swoje fantazje. A jeszcze bardziej się on potęguje, gdy nie wszystkie scenariusze, konspekty, aspekty teoretyczne programu są opracowane i często w czasie pracy trzeba improwizować, dopóki nie otrzyma się prawidłowych źródeł, danych na których ma być oparty odpowiedni element naszego produktu.

Interoperacyjność, czyli w kontekście informatycznym możliwość przekazywania danych w różnej formie pomiędzy różnymi aplikacjami, platformami, czy urządzeniami.

Dwa miesiące ciężkiej pracy, wyszukiwania niezbędnych podstaw informacyjnych oraz przełożenie ich na nasze potrzeby, walka z interfejsem przy użyciu przede wszystkim WPF’a i w końcu implementacja naszych założeń w programie pisanym w C# z danymi kolekcjonowanymi w bazie MSSQL dały swój wymierny rezultat. Nie poszliśmy w interoperacyjność, lenistwo oraz walka z czasem (na własne życzenie) i ograniczeniami związanymi ze studiowaniem zawężały nam znacznie możliwości. Nie odbyło się jednak bez walki do samego końca. Jeszcze dwa dni przed upłynięciem terminu zdawania prac walczyliśmy z wynikami naszych wypocin tak, aby zredukować ilość błędów do niezbędnego minimum oraz, aby z jak najlepszej strony zaprezentować to co stworzyliśmy.

Kiedy finały krajowe stanęły otworem…

Ogarnęło mnie przede wszystkim zaskoczenie. Duże. Jestem z reguły realistą, a co za tym idzie bardzo często także pesymistą. Żyjemy przecież w Polsce. Tu nawet nie biją za darmo, bo w ramach pakietu “darmowy oklep” ukradną ci komórkę. Pomijając tę dygresję oraz falę radości jaka nas opanowała mieliśmy przed sobą jeszcze kawał, ponad tygodniowej roboty. Nie tylko technicznej, ale także marketingowej i prezentacyjnej. Na szczęście w tym ostatnim pomogli nam sami organizatorzy poprzez zaproszenie na tego typu szkolenie. Co logicznie myśląc wiązało się z kolejną, jednodniową wycieczką do Warszawy.

Stanowisko numer pięć – zawartość stolików sesji plakatowej.

Będąc już na sesji plakatowej nie sposób było nie dostrzec, że nasze stanowisko jest ciut ubogie. Dwa notebooki, ciut rekwizytów, flipchart i dwa stoliki wraz z odrobiną gastronomii. No niestety, nikt nie wpadł na to, aby brać ze sobą dodatkowy sprzęt elektroniczny, czy inne interaktywne urządzenia. Był za to plakat, ulotki, chęci, dużo stresu i wraz z każdą kolejną godziną coraz więcej zmęczenia. Sędziowie chodzili w dwu i trzyosobowych grupach, którym kolejno trzeba było wytłumaczyć problematykę i zasady działania naszego rozwiązania.

Jak to wygląda w praktyce? W skrócie. Większość z członków jury to biznesmeni, dyrektorzy, menedżerowie i kilka osób związanych z technicznymi stronami rozwiązań. Część nastawiona jest na biznes, część na aspekty technologiczne. Jedni z chęcią posłuchają o tym jak działa aplikacja, a inni nie zrozumieją, bądź po prostu nie chcą słuchać na czym to wszystko w praktyce polega. Dla mnie niestety jest to jeden z negatywów Imagine Cup. W finałach jego specyfika z konkursu programistycznego zmienia się w sporym stopniu w marketingowo-biznesowy. Uogólniając należy sprzedać wszystko. Program, siebie i najlepiej stanowisko które prezentujemy także :]

Imagine Cup 2009 – gramy na emocjach na sesji plakatowej. Jak się bawić to się bawić, prawda? ;]

Bardziej wyważoną i pozytywną opinię na ten temat ma za to Tomaj:

Kilka słów o jury. Większość z nich sprawiała wrażenie prawdziwych biznesmenów. Pisząc ?prawdziwych? mam na myśli takich, którzy zachowują uśmiech na twarzy i nie dadzą po sobie poznać, że nie są zainteresowani tym, co do nich mówisz, lub, że wiedzą, że wciskasz im kompletny kit. Mam na myśli takich, którzy traktują Cię jak partnera, z którym można dobić interesu. Wyglądem i zachowaniem przystawali do zajmowanego przez siebie stanowiska. Specjalnie użyłem na początku sformułowania ?większość z nich?, bo zawsze znajdzie się czarna owca i każdy z finalistów na pewno doskonale wie o kogo chodzi ;). Okazało się również ? ku naszemu wielkiemu zaskoczeniu ? że większość jurorów znała się na programowaniu. I to całkiem nieźle! Pytania o technologie, w których wykonaliśmy nasz program trochę nas więc zaskoczyły.

Ex aequo pozycja szósta!

Nam się nie udało wygrać. Zajęliśmy chlubne, szóste miejsce. Biorąc pod uwagę, że cała druga piątka takie zajęła – nie jest źle. Nie wiem, czy to z powodu, aby nie robić nikomu “przykrości”, czy po prostu dlatego, że niby walka była w miarę wyrównana. To czego jestem pewien, bo osobiście usłyszałem, to fakt, że poziom konkursu poszedł w górę. I podejrzewam, że w przyszłym roku ta tendencja będzie się utrzymywać.

Doss: z mojej perspektywy, mogę powiedzieć, że te wielkie projekty, wspaniałe rozwiązania i niedoścignione w geniuszu pomysły tworzą normalni ludzie, z którymi można pograć w kręgle, wypić piwo, a potem biegać bez spodni po pokoju ;) . Owszem, poziom konkursu (przynajmniej u nas w Polsce) był wysoki, aczkolwiek za skandal uważam fakt, że nie dostaliśmy się do pierwszej piątki ;P. Widać gdzie ludzie naprawdę mają dbanie o środowisko ;) . Żeby nie było, że przemawia przeze mnie gorycz porażki, powiem, że mój faworyt do wygrania zajął dopiero 4rte miejsce, przegrywając z konkurencją której program ma swój odpowiednik na necie w wersji 10 ;P. Niestety, nikt z jury nie sprawdził czy tamten “przełomowy” projekt nie istnieje już gdzieś w sieci…

Czego możemy narcystycznie sobie pogratulować? Na pewno interfejsu wychwalanego najczęściej przez oceniające nas osoby. I tu podziękowania dla Tomaja, odwaliłeś kawał dobrej roboty. Pomimo, że dla mnie osobiście temat który chcieliśmy zrealizować rok wcześniej był bardziej “chwytliwy” pod względem wykonania to także tegoroczna problematyka emisji dwutlenku węgla której się podjęliśmy w gruncie rzeczy była na czasie i jak to stwierdził jeden z sędziów “dobrze ugruntowana w milenijnych celach”.

Wśród ścisłej, finałowej piątki rywalizacja była jeszcze bardziej ostra. Prezentacje były konkretne, no może prócz jednej w której zdenerwowanie zabrało ewidentnie górę nad rozwagą. Zdarza się. Pewnie dlatego, że wśród publiki siedział menedżer konkursu rangi ogólnoświatowej – Joe Wilson (który nawiasem mówiąc przeprowadził bardzo żywe podsumowanie całej edycji, typowo w amerykańskim stylu). Jeżeli chodzi o wykonanie ich pomysłów – wybraliśmy sobie prawie zgodnie w grupie domniemanego zwycięzce, nie mniej jednak realizacje i możliwości praktycznie wszystkich teamów były na tyle profesjonalne i zaawansowane, że wybór ten był niezwykle trudny. Kogo wskazywaliśmy? Nie zdradzę, nie mniej jednak nie byli to zwycięzcy wybrani przez grupę sędziów. A żeby ostatecznie choć ciut zobrazować poziom konkursu mogę dodać, że w żadnym wypadku nie było wstydem “przegrać” z taką “piątką” jakiej nie udało się pokonać w tym roku…

Joe Wilson w trakcie prezentacji.

Focus… focus… focus…

Trzy słowa najczęściej powtarzane przez Joego w trakcie jego wystąpienia. Tłumacząc niedosłownie – “nie poddawać się, pracować, spełniać swoje cele”. Tak o to motywowali nas organizatorzy, przedstawiciele Microsoftu i Instytutu Wzornictwa Przemysłowego do dalszej pracy, do dalszego współzawodnictwa w przyszłych latach. Myślę, że skutecznie, a efekty będziemy mogli zaprezentować już… za rok :]

Tomaj: cały finał odbywał się w Instytucie Wzornictwa, który wywarł na mnie bardzo pozytywne wrażenie. O ile z zewnątrz wygląda on zupełnie przeciętnie, o tyle wnętrza zaprojektowane są niekonwencjonalnie, modernistycznie, troszkę w kierunku minimalistycznym, z pomysłem i ze smakiem. W różnych miejscach natknąć się można na małe ekspozycje, dzięki którym cały budynek nabiera charakteru i klimatu.

Reasumując…

Zdradziliśmy i tak za dużo. Ktoś teraz może pomyśleć… “idioci, zdradzają szczegóły możliwe, że przyszłej konkurencji!”. Może i tak, może i nie. Kto nie był, a chciałby spróbować – na pewno będzie miał przez ten wpis jakiś pogląd na to jak działają te całe konkursowe trybiki. My takiej szansy i informacji nie mieliśmy. Nie zdradziliśmy żadnych bardzo ważnych konkretów, bo fakt jest taki, że doświadczenia chętni nabędą dopiero na miejscu (a i faktycznie ten krok do przodu przed “nowymi” musimy mieć ;]). Więc albo Wam się uda i się wstrzelicie z projektem, albo wrócicie z bagażem pożytecznych wiadomości i prawdopodobnie bakcylem na start w kolejnej edycji. Grunt to podejść do współzawodnictwa z uśmiechem, przymrużeniem oka, żartem – i to, zostawiając powagę w domach udało nam się chyba osiągnąć :]

Tomaj: atmosfera całego przedsięwzięcia pt. Imagine Cup była niezwykle przyjazna dla każdego uczestnika, widać było, że organizatorzy dołożyli wiele starań, by zapewnić wszystkim poczucie komfortu i miło spędzonego czasu. Tutaj moje ukłony w stronę osoby Piotra Kramka ? głównego koordynatora i gościa ?od wszystkiego? – dobrze poinformowany, uczynny, miły, sympatyczny, słowem: pełen profesjonalizm. Nie mogę też nie wspomnieć oczywiście o przemiłych paniach w rejestracji, które pozwalały na chwilę zapomnieć o stresie związanym z sesją plakatową.

Ukłony powyższe są jak najbardziej na miejscu. Piotr – przynajmniej ze służbowego punktu widzenia to człowiek z poczuciem humoru i przede wszystkim nastawiony frontem do uczestników. Pewna przeciwwaga do obciążenia psychicznego kreowanego przez jurorów. Jak awansuje na jakieś wyższe stanowisko do przyszłego roku to miejcie, wszyscy przyszli i początkujący finaliści miejcie świadomość, że nie spotkaliście człowieka “na poziomie”, solidnie nakręcającego “ten biznes”.

I na koniec co dobrze zauważył Tomek:

Na szczególną uwagę zasługuje również impreza zorganizowana w klubie HulaKula ostatniego dnia. Widać było, że naprawdę zadbali o zapewnienie rozrywki dla nas ? rezerwacja na 20 torów do kręgli, 5 stołów bilardowych, wino i piwo za damkę (co prawda na pół z wodą, ale zawsze :P), zakąski wszelkiej maści ? po prostu pyszności. Szkoda, że zamknięto nam klub godzinę przed czasem (małe niedomówienie z menadżerem klubu) ale żalu chyba nikt do nikogo nie ma (na pewno nie ja), bo bawiliśmy się przednio ;).

Można tak relacjonować, opowiadać bardzo długo wchodząc to w coraz większe szczególiki. Spytacie czy warto? Warto, chociażby dlatego, że prócz pracy, presji i doświadczenia które się otrzyma na swoje barki, można także się dobrze bawić i rozluźnić. Osobiście pierwszy raz w życiu miałem okazję zagrać w kręgle i pewnie przez te wydarzenia nie będzie to ostatni ;]

Doss: pomijając moje drobne, wcześniejsze narzekanie, uważam, że IC jest bardzo dobrą inicjatywą, która naprawdę może zmienić świat. Nie przez to, że ktoś z nas napisze program, który niszczy połączenia w serwerach terrorystów, ale dzięki aktywowaniu ludzi (studentów – tak, to też ludzie) z całego świata – na pokazaniu im, że pomimo iż są tak młodzi, ich talent i praca (plus odrobina szczęścia) mogą okazać się wystarczające by małymi krokami budować lepszy świat.

Bo świat należy do nas – i to nie jest pusty frazes. Problem w tym, że tak niewielu w to wierzy, zapominamy, że tylko Ci co wierzą w to, osiągają sukcesy. Kto wie, czy w Tobie też nie siedzi osoba z potencjałem, który powali innych na kolana?

Moje przesłanie i lekcja z tego konkursu – wykorzystujcie swoje talenty najlepiej jak możecie, byście nigdy nie zarzucili sobie, że nawet nie spróbowaliście uczynić swojego świata lepszym.

I tym miłym akcentem, wraz z symbolicznym do zobaczenia dla współzawodników oraz jurorów, i podziękowaniem dla współpracowników uciekam w oczekiwaniu na miejmy nadzieję przyszłoroczne, kolejne, finałowe spotkanie… :]

Są takie kierunki związane z szeroko pojętą informatyką w których trzeba mieć ponadprzeciętne umiejętności. Wymagana jest pasja, szeroka i aktualna wiedza, wyostrzone zmysły – związane z tworzeniem grafiki, dźwięku, czy optymalnego kodu. Po prostu trzeba być dobrym. Bardzo dobrym w tym co się robi.

Takie jest moje osobiste zdanie. I do takich subkultur zaliczam demoscenę oplatającą rzeszę twórców m.in. intr i dem (opatrzonych w podkłady dźwiękowe, grafikę dwu- i trójwymiarową oraz najczęściej generowane drogą programowania dynamicznie efekty). Przykładowe piękno tych ostatnich postaram się Wam dziś zaprezentować w pierwszym wpisie dotyczącym “inspiracji internetu”.

fr-025: the.popular.demo wykonany przez Farbrausch

Dump fr-025: the.popular.demo.

Within Epsilon wykonany przez team Pyrotech

Dump Within Epsilon.

Stargazer wykonany przez grupy Orb i Andromeda

Dump Stargazer.

Lifeforce wykonany przez grupę ASD

Dump Lifeforce.

fr-041: debris wykonany przez team Farbrausch

Dump fr-041: debris.

Final Audition wykonany przez grupę Plastic (.pl) – akcent z Polski

Dump Final Audition.

Rzutem na mate…

To tylko kropla w morzu dostępnych dem. Jedna z partii które pojawią się w przyszłości na blogu wśród innych, godnych uwagi aspektów wirtualnego świata. Może zainspiruje to niektórych z Was do cięższej pracy, a osiągnięcia porównywalne do tych powyżej pewnie z biegiem czasu same przyjdą… :]