Wtyczki sprawiające problemy

Na moim blogu miałem kilka kwestii braku kompatybilności wtyczek. qTranslate META nie współgra z All in One SEO Pack, a teraz przyszła kolej na wtyczkę Similarity, która ma problem z samym qTranslate. Nie jest łatwo tworzyć wielojęzycznego bloga;) Jednak, jak już się domyślacie poradzimy sobie z tym.

Głównym zadaniem tego wpisu jest zachowanie na później sposobu, w jaki rozwiązałem ten problem. W przypadku aktualizacji którejś z wtyczek nie będę musiał odszukiwać poprawionych przeze mnie plików i nadpisywać nowych – po prostu sięgnę do bloga

Problem wtyczki Similarity

Korzystając z wtyczki qTranslate tytuły wpisów zapisywane są w inny sposób. Dla każdego użytego w notce języka są dodawane specjalne znaczniki (oparte na komentarzach HTML), a całość zapisywana jest do jednego pola.

<!–:pl–>PHP w trybie CGI – autentyfikacja HTTP – system logowania<!–:–><!–:en–>PHP in CGI version – HTTP Authentication – login system<!–:–>

Z powodu takiego zapisu, pobierając tytuł wpisu otrzymamy go we wszystkich językach. Niestety, użytkownik będący na stronie z językiem Polskim może nie mieć ochoty na oglądanie listy podobnych wpisów, na której, każdy wpis jest wypisany we wszystkich językach w jakich występuje. W przypadku tylko dwóch języków nie jest to jeszcze straszne, chociaż mylące. Co jeśli, ktoś tworzy większy serwis tłumaczony na dziesiątki języków?

Rozwiązanie

W przypadku tworzenia takich haków najbardziej niewdzięczną czynnością jest przerobienie czyjegoś kodu i wyłapanie w nim odpowiednich fragmentów. W przypadku takim jak ten, gdzie przyczyna niepoprawnego działania jednej z wtyczek jest znana, poszukiwanie rozwiązania jest łatwiejsze. W zasadzie wystarczy odnaleźć fragment kodu wtyczki Similarity odpowiadający za wyświetlanie linków do podobnych wpisów. Dodatkowo, można się pokusić o fragment z wtyczki qTranslate, który oczyszcza link z niepotrzebnych tłumaczeń. Dzięki takiemu połączeniu nie będzie potrzeby pisania własnego kodu, wyrażeń regularnych etc. Mając na uwadze, że konieczność wykorzystania haków do Similarity występuje tylko w przypadku korzystania z qTranslate możemy śmiało pokusić się o wtórne skorzystanie z jej kodu.

W tym przypadku mamy szczególne ułatwienie, gdyż wtyczka qTranslate uruchamiana jest przed wtyczką Similarity, zatem źródła tej pierwszej są już załadowane. Czyli utworzenie rozwiązania sprowadza się do odnalezienia i wykorzystania właściwej funkcji. Z poszukiwaniami było ciężko, na szczęście edytory pomagają śledzić kolejne wywołania funkcji. Dzięki temu już po kilkunastu przeskokach miałem odnalezioną odpowiednią funkcję z wtyczki qTranslate.

Szukana funkcja to: qtrans_useCurrentLanguageIfNotFoundUseDefaultLanguage($lang), nazywa się ciekawie

Jedyne co nam pozostaje to wywołanie tej funkcji w odpowiednim miejscu wtyczki Similarity. Dokładnie to są to 2 miejsca, (oryginalnie linia 200 i 281). Jako, że kod może zostać wywoływany w dwóch miejscach lepiej będzie utworzyć oddzielną funkcję, którą w razie konieczności zmian można zastąpić czymkolwiek innym. Interesują nas dwie linie 200 i 281 pliku similarity/similarity.php. Są to linie generujące linki do podobnych postów. W tym kodzie istotną zmienną jest $post->post_title, która odpowiada za to co użytkownik widzi na ekranie.

$impression = str_replace("{title}",$post->post_title,str_replace("{url}",get_permalink($list[$i]['post_id']),str_replace("{strength}",$list[$i]['strength'],str_replace("{link}","<a href=\"{url}\">{title}</a>",$output_template))));

Odnajdujemy miejsca utworzenia zmiennej $post (linie 143 oraz 215), dopisujemy za nimi:

// linia 143
$post = get_post($list[$i]['post_id']);
// dopisujemy:
$post->post_title = qtranslate_post_title($post->post_title);
//(..)
// linia 215
$post = get_post($list[$i]['post_id']);
// dopisujemy:
$post->post_title = qtranslate_post_title($post->post_title);

Teraz zostało nam już tyko wywołać odpowiednią funkcję z wtyczki qTranslate. Robimy to następująco:

1
2
3
4
5
6
7
8
9
10
11

/**
 * Hak poprawiający wyświetlanie podobnych linków
 * @author Vokiel | http://blog.vokiel.com/?p=598
 * @param string $title
 **/
function qtranslate_post_title($title){
	if (function_exists('qtrans_useCurrentLanguageIfNotFoundUseDefaultLanguage')){
		$title = wp_specialchars(qtrans_useCurrentLanguageIfNotFoundUseDefaultLanguage($title));
	}
	return $title;
}

Prosty warunek sprawdzający czy wymagana funkcja została zdefiniowana (załadowana), jeśli tak, to poprawiamy link, jeśli nie, to zostaje zwrócony taki jaki był. Mam nadzieje, że się komuś jeszcze przyda

Voila!

Related posts

• Pamięciożerny WordPress – memory exhausted, zbyt mały memory_limit (5)
• Optymalizacja WordPress cz 2 (1)
• Info (0)
• Eclipse Helios na Windows 7 x64 (5)
• CSS minify – combine: zmniejszanie i łączenie plików css w jeden (0)

Ostatnio, podczas przenosin dość starej aplikacji na nowy serwer natknąłem się na problem z powodu wykorzystania autentyfikacji HTTP. Problem okazał się błachy, jednak w momencie przenosin i pierwszych testów miałem problem z diagnozą przyczyn takiego stanu rzeczy.

Opis sytuacji

Na wstępie krótko opiszę sytuację, objawy jakie się pojawiły. W dalszej części pokażę sposób poradzenia sobie z problemem.

Na starym serwerze PHP działał sobie jako zwykły moduł apache. Jako, że aplikacja była pisana dawno temu, wówczas system logowania oparty na autentyfikacji HTTP wydawał się wystarczający. Tym bardziej, iż była to aplikacja intranetowa. Po przenosinach na nowy serwer okazało się, że okienko autentyfikacji nie przestawało wyskakiwać nawet po podaniu poprawnego loginu i hasła. Na pierwszy ogień poszło sprawdzenie poprawności przeniesionej bazy danych, użytkownika bazy, zawartości tabel. Okazało się, że wszystko jest ok, zatem na warsztat poszedł test systemu logowania.

System logowania oparty o autentyfikację HTTP

System logowania był bardzo prosty. Pobrane dane z $_SERVER['PHP_AUTH_USER'] oraz $_SERVER['PHP_AUTH_PW'] były porównywane z tymi w bazie danych. Jeśli autoryzacja nie przebiegała pomyślnie wyświetlany był odpowiedni komunikat i po trzech sekundach strona była odświeżana z ponownym wyświetleniem okienka autentyfikacji.

Skrócony na potrzeby przykładu plik index.php.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<?php
if (empty($_SERVER['PHP_AUTH_USER'])) {
	header('WWW-Authenticate: Basic realm="Logowanie"');
	header('HTTP/1.0 401 Unauthorized');
	sleep(3);
	exit;
}else {
	DEFINE ('LOGINSALT','TESTOWYSALTLOGOWANIA');
 
	require_once 'class/db/db.class.php';
	require_once 'class/login.class.php';
 
	$login_string = md5($_SERVER['PHP_AUTH_USER'].LOGINSALT.md5($_SERVER['PHP_AUTH_PW']));
	$logowanie = new login($login_string);
	$logowanie->login();
	if ($logowanie->isLogged()){
		// ok
	} else {
		include 'notLogged.php';
		sleep(3);
		header('WWW-Authenticate: Basic realm="Logowanie"');
		header('HTTP/1.0 401 Unauthorized');
		exit;
	}
}
?>

Jak widać jest to bardzo proste, wręcz banalne rozwiązanie. Z tą różnicą względem podstawowych systemów opartych na .htpasswds, że dane użytkowników są przechowywane w bazie danych.

Sama klasa logowania też jest bardzo prosta. Jednak w tym wypadku, doskonale spełniała swoje założenia. Wersja odchudzona:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68

<?php
/**
 * Klasa logowania
 *
 * @param string $login_string - Ciąg danych logowania md5(login+salt+md5(hasło))
 */
class login{
	/**
	 * Ciąg logowania
	 *
	 * @var string
	 */
	private $_login_string;
	/**
	 * Stan zalogowania
	 *
	 * @var bool $_logged
	 */
	private $_logged = false;
	/**
	 * Id zalogowanego użytkownika
	 *
	 * @var int
	 */
	private $_id;
	/**
	 * Konstruktor klasy logowania
	 *
	 * @param string $login_string
	 */
	public function __construct($login_string){
		$this->_login_string = $login_string;
	}
	/**
	 * Logowanie użytkownika
	 *
	 * @return bool
	 */
	public function login(){
		$db = new db_class(DB_HOST,DB_LOGIN,DB_PASS,DB_NAME);
		$query = "SELECT `ID` FROM `LISTA_USR` WHERE md5(CONCAT(`LOGIN`,'".LOGINSALT."',`PASS`))='".$this->_login_string."' ;";
		$db->sqlQuery($query);
		if ($db->sqlNumRows()>0){
			$row = $db->getRow();
			$this->_id = $row['ID'];
			$this->_logged = true;
			return true;
		}
		return false;
	}
	/**
	 * Sprawdzenie czy zalogowany
	 *
	 * @return bool $this->_logged
	 */
	public function isLogged(){
		return $this->_logged;
	}
	/**
	 * Pobranie ID zalogowanego użytkownika
	 *
	 * @return int $this->_id;
	 */
	public function getUsrId(){
		return $this->_id;
	}
}
?>

Rozwiązanie proste jak budowa cepa. Nie ma się tu nad czym rozwodzić. Niestety w trybie CGI się nie sprawdza, gdyż w zmiennej $_SERVER nie ma zmiennych $_SERVER['PHP_AUTH_USER'] oraz $_SERVER['PHP_AUTH_PW'].

Rozwiązanie

Rozwiązaniem na brak wymaganych zmiennych okazał się odpowiedni wpis w .htaccess, który tworzył nową zmienną w tablicy $_SERVER, do której przypisywał ciąg logowania .

RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization},L]

Teraz wystarczyło tylko obsłużyć ten ciąg po stronie PHP. Dane zapisane do zmiennej $_SERVER['REDIRECT_HTTP_AUTHORIZATION'] są kodowane przy wykorzystaniu base64. W celu wydobycia loginu i hasła, trzeba pobrać fragment tego zmiennej, zdekodować i rozbić po znaku dwukropka.

1
2
3

<?php
list($_SERVER['PHP_AUTH_USER'], $_SERVER['PHP_AUTH_PW']) = explode(':', base64_decode(substr($_SERVER['HTTP_AUTHORIZATION'], 6)));
?>

To by było na tyle. Strona się uruchomiła, login i hasło zostało przyjęte, użytkownik zalogowany. Ale, ale… Byłoby zbyt prosto. Po kliknięciu na dowolny odnośnik (było wykorzystane przepisywanie adresów) w oczy rzucał się błąd 404.

Okazało się, że nasza regułka włączająca autentyfikację HTTP była zbyt zachłanna i przyjmowała na siebie całą pracę, nie dopuszczając innych regułek do pracy.

W związku z tym trzeba było opracować inne rozwiązanie, takie, które dawało obsługę przyjaznych adresów oraz $_SERVER['PHP_AUTH_USER'] i $_SERVER['PHP_AUTH_PW']

Finalne rozwiązanie

Jak człowiek siądzie i pomyśli, to wymyśli. Pierwszy pomysł był dobry, ale zabrakło w nim podstawowej rzeczy, warunku, dla którego miał być aktywowany. Poza tym umieszczenie go na początku pliku .htaccess też nie było mądre. Po przeniesieniu reguły na koniec pliku, oraz dodaniu odpowiedniego warunku wszystko zaczęło działać jak należy.

RewriteCond %{HTTP:Authorization} ^(.*)
RewriteRule ^(.*) - [E=HTTP_AUTHORIZATION:%1]

Dodatkowo należało przerobić skrypt wyciągający nazwę użytkownika i hasło ze zmiennej $_SERVER['REDIRECT_HTTP_AUTHORIZATION'], gdyż poprzedni skrypt rozsypywał się, gdy użytkownik miał hasło zawierające znak dwukropka.

1
2
3
4
5
6
7
8

<?php
if(isset($_SERVER['REDIRECT_HTTP_AUTHORIZATION']) && empty($_SERVER['PHP_AUTH_USER'])) {
    $auth_params = explode(":" , base64_decode(substr($_SERVER['REDIRECT_HTTP_AUTHORIZATION'], 6)));
    $_SERVER['PHP_AUTH_USER'] = $auth_params[0];
    unset($auth_params[0]);
    $_SERVER['PHP_AUTH_PW'] = implode('',$auth_params);
}
?>

Podsumowanie

Jak się okazało, obeszło się bez przepisywania systemu logowania na zwykły formularz. Poza tym nie zawsze należy wierzyć temu co jest napisane w manualu:

Uwierzytelnianie HTTP jest obsługiwana przez PHP tylko wtedy, gdy PHP pracuje jako moduł Apache’a, nie jest dostępna w trybie CGI.

Czyba czas najwyższy przepisać część działających aplikacji na „dobry”, działający w różnych konfiguracjach system logowania. Systemy oparte na autentyfikację HTTP są dobre dla wbudowanych rozwiązań (routery, zarządzalne switch’e, etc), zwykłe aplikacje powinny mieć normalny system uwierzytelniania i autoryzacji.

Related posts

• Pamięciożerny WordPress – memory exhausted, zbyt mały memory_limit (5)
• Info (0)
• CSS minify – combine: zmniejszanie i łączenie plików css w jeden (0)
• Wtyczka Similarity współpracująca z qTranslate (0)
• The Small Calendar – jQuery + PHP w praktyce (5)

23 czerwca 2010 r nastąpiło wydanie nowej wersji Eclipse 3.6 Helios . Owo wydanie jest największym z dotychczasowych wydań: 39 różnych zespołów projektowych, 33 miliony linii kodu, 490 commiterów. Eclipse udostępnia 12 różnych projektów, dla różnych typów programistów. W tym oczywiście dla programistów PHP – czyli Eclipse for PHP Developers . Czemu o tym piszę? Przede wszystkim dlatego, że Eclipse PDT jest moim ulubionym IDE, jest tym, na którym pracuję zawodowo, do którego jestem bardzo przyzwyczajony (dotychczas Eclipse Galileo).

Nowości w Eclipse Helios

Helios wprowadza wiele nowości, część z nich, z punktu widzenia web developera nie ma większego znaczenia. Jednak warto mieć na uwadze zaangażowanie twórców, różnorodność tworzonych rozwiązań, ilość zaangażowanych developerów.

1. Lepsze wsparcie dla Linuxa

Ostatnie badania wskazały na rosnący udział systemu spod znaku pingwina w ogólnej liczbie developerów korzystających z tego IDE. Twórcy Eclipse wyszli im naprzeciw wprowadzając szereg usprawnień dedykowanych pod systemy z tej kategorii. Stworzony został Linux Tools Project , który ma na celu ułatwienie pracy przy programowaniu w C/C++. Zintegrowano m.in. GNU Autotools, Valgrind, OProfile, RPM, SystemTap, GCov, GProf, LTTng, etc.

2. Eclipse Marketplace Client

Eclipse Marketplace

Jest to klient zapewniający developerom dostęp do czegoś w rodzaju „app-store” z tą różnicą, że dotyczy wtyczek. Daje możliwość łatwego przeglądania i instalowania nowych plug-in’ów. Będzie dostępnych ponad 100 wtyczek w jednym katalogu, co ma znacznie ułatwić i usprawnić ich wybieranie i dodawanie do programu.

3. Wsparcie dla Git’a

Pojawiło się długo oczekiwane wsparcie dla Git’a (popularnego rozproszonego systemu kontroli wersji). Wprowadzone zostało w projektach EGit oraz JGit. Nowe wydanie EGit 0.8 zawiera nowy widok repozytoriów Git’a, wsparcie dla „fast forward merging” oraz tagowania. JGit 0.8 – które jest wykorzystywane w EGicie dla połączeń z repozytoriami Git pokazało duży skok wydajności aż do 50% podczas pracy z dużymi repozytoriami.

4. Nowości w Web Tools Platform

WTP wprowadza wsparcie dla tworzenia, uruchamiania i debugowania aplikacji napisanych pod najnowsze specyfikacje Java EE (Java EE 6) włączając Servlet 3.0, JPA 2.0, JSF 2.0, and EJB 3.1.

5. Poprawione wsparcie dla JSDT

Framework w JSDT

Ulepszone wsparcie dla JSDT dla programistów JavaScript. W tym framework debugera JavaScript, który umożliwia integrację debugerów JavaScript, takich jak Rhino i Firebug oraz korzystanie z nich bezpośrednio w IDE. Został utworzony nowy pakiet Eclipse IDE for JavaScript Web Developers , który ma na celu ułatwienie programistom JavaScript odszukania, zainstalowania i korzystania z IDE na bazie Eclipse.

6. Eclipse Xtext 1.0

Popularny framework do tworzenia DSL, wprowadza 80 nowych funkcji, w tym lepszą wydajność i skalowalność do 30 razy lepszą niż w poprzednich wersjach. Nowa funkcja indeksowania w pamięci umożliwia rozwój bardziej zaawansowanych technologii DSL w Xtext. Framework dostarcza wszystkich potrzebnych w programowaniu funkcji – koloryzacji składni, walidacji kodu, formatowania czy autouzupełniania.

7. Acceleo 3.0

Nowe wydanie Acceleo implementuje model specyfikacji OMG (MTL) oraz zapewnia funkcje wymagane przez generator kodu IDE.

8. Usprawnienia źródeł

W tej części zawiera się wiele drobniejszych zmian, które jednak mogą znacznie wpływać na komfort pracy. Są to:

Open resource path relative

1. Wirtualne foldery – foldery nie istniejące fizycznie w systemie plików. Tworzone są jedynie dla aktualnego obszaru roboczego.
2. Drap and drop – obsługa przeciągania plików z eksploratora systemowego. Poza tym istnieje możliwość otwierania plików z linii komend. Wydaje się, że to nic wielkiego, jednak w połączeniu ze specjalnie do tego przygotowanym API ficzer staje się bardzo funkcjonalny.
3. Uniksowe prawa dostępu – dostępne są pełne uniksowe prawa dostępu do zasobów.
4. Remote System Explorer – framework, który pozwala pracować na różnorodnych zewnętrznych źródłach, tak, jakby były umieszczone w lokalnej lokalizacji. Daje możliwość pracy m.in. poprzez wykorzystanie zdalnych plików SSH, FTP; zdalnego dostępu do powłoki; zdalnej obsługi procesów przez agentów dstore; czy zdalnego debugowania przy pomocy CDT/gdb
5. Filtrowanie wyszukiwania – daje możliwość wyszukiwania w źródłach przy uwzględnieniu masek, znaków specjalnych etc. (patrz screen: Open resource path relative)

Start z Eclipse

Rozpoczęcie pracy z Eclipse, dla osób nie posiadających doświadczenia z tym IDE:

Pobranie

Start z Eclipse najlepiej rozpocząć od strony pobierania, z której można pobrać wybraną wersję (Eclipse for PHP Developers, Eclipse IDE for JavaScript Web Developers czy Eclipse for RCP and RAP Developers oraz wiele innych).

Pluginy

Kolejnym bardzo ważnym elementem są pluginy. Pluginy w Eclipse mogą znacznie rozszerzać funkcjonalność IDE. Właściwie każda dedykowana wersja czy to do PHP, czy C++ opiera się na pluginach. Nowością w tej wersji, jak już wspomniałem wcześniej, jest Eclipse Marketplace, drugim, głównym, miejscem do wyszukiwania wtyczek jest strona eclipse-plugins.info.

Dalsza nauka

Poza tym wartymi uwagi są książki, tutoriale, FAQ oraz wiki. W razie problemów warto przejrzeć forum, na którym możemy spotkać się z innymi użytkownikami, ich rozwiązaniami. Na koniec, rozwiązanie dla najbardziej zawziętych i wytrwałych – dokumentacja

Rozwijanie

Kolejnym etapem zaznajomienia się z tą platformą może być partycypacja w jej tworzeniu. Przede wszystkim każdy może zgłaszać odnalezione przez siebie luki i błędy oraz pomagać innym użytkownikom na forum.

Instalacja na Windows 7

Pierwotnie cały wpis miał dotyczyć tylko tego aspektu. Jednak w związku z tym, iż w większości wpisów na tym blogu opisuję poruszane tematy w miarę kompleksowo, trudno mi było poprzestać na tak krótkim wpisie.

Pierwsza próba uruchomienia nowego Eclipse, na niedawno postawionym Windows 7 zakończyła się niepowodzeniem. Okazało się, że Eclipse nie widzi zainstalowanego w systemie środowiska uruchomieniowego javy (JRE). Jego przeinstalowanie, restart systemu na nic się nie zdało. Eclipse może pracować na różnych wersjach maszyn wirtualnych javy – oficjalnie rekomendowaną jest 1.5. Dla developerów kodujących w javie proponuje się wykorzystanie JDK zamiast JRE.

Aby zainstalować nowe Eclipse Helios (nowa instalacja, nie aktualizacja) należy pobrać wybraną wersję ze strony eclipse. W moim przypadku (Win7 x64) pobrałem adekwatną, 64 bitową wersję Eclipse for PHP Developers. Następnie należy wypakować ją do wybranego katalogu – u mnie był to katalog eclipse zlokalizowany w c:\Program Files\ (z racji wersji x64).

Na koniec pozostało poinformowanie IDE o istnieniu JRE poprzez dopisanie ścieżki w pliku konfiguracyjnym. Plik ten eclipse.ini zlokalizowany w katalogu głównym programu:
c:\Program Files\eclipse\eclipse.ini powinien zawierać następujące linie:

-vm
c:/Program Files/Java/jre1.5.0_22/bin/javaw.exe

Całość mojego startowego pliku konfiguracyjnego wygląda następująco:

-startup
plugins/org.eclipse.equinox.launcher_1.1.0.v20100507.jar
--launcher.library
plugins/org.eclipse.equinox.launcher.win32.win32.x86_64_1.1.0.v20100503
-product
org.eclipse.epp.package.php.product
--launcher.defaultAction
openFile
--launcher.XXMaxPermSize
256M
-showsplash
org.eclipse.platform
--launcher.XXMaxPermSize
256m
--launcher.defaultAction
openFile
-vm
c:/Program Files/Java/jre1.5.0_22/bin/javaw.exe
-vmargs
-Dosgi.requiredJavaVersion=1.5
-Xms40m
-Xmx512m

Related posts

• Info (0)
• Pamięciożerny WordPress – memory exhausted, zbyt mały memory_limit (5)
• Wtyczka Similarity współpracująca z qTranslate (0)
• The Small Calendar – jQuery + PHP w praktyce (5)
• Optymalizacja WordPress cz 2 (1)

źródło: 2010.confidence.org.pl

W dniach 25-26.05 2010 w Krakowie odbyła się konferencja CONFidence, w której miałem przyjemność uczestniczyć. Konferencja odbyła się już ósmy raz (od 2005r.). Skupia czołówkę światowej klasy specjalistów. W trakcie tej dwudniowego spotkania odbyło się wiele prezentacji opisujących nowe, nieujawniane dotychczas wyniki badań. CONFidence to nie tylko konferencja, to także profesjonalne warsztaty, panele dyskusyjne, konkursy, Fight Club, Hackers for Charity Roulette, CONFidence Speed Breaking oraz wiele innych.

Tematy konferencji obejmowały wiele aspektów bezpieczeństwa, w tym także bezpieczeństwa aplikacji internetowych, o czym w dalszej części wpisu.

Słowem wstępu

źródło: www.krakow.come2europe.eu

Na wstępie chciałbym zauważyć, że przygotowanie konferencji było na bardzo wysokim poziomie. Obsługa, lokalizacja (Kino Kijów), zaplecze, a przede wszystkim prelegenci.

Zabytkowe kamienice Krakowa, mnogość pubów w piwniczkach (genialny Społem Pub), konkursy polegające na zdobywaniu kolejnych i kolejnych tworzyły ciekawą mieszanką.

Generalnie mam bardzo pozytywne wrażenia. Wróćmy do tematu – bezpieczeństwa.

Agenda

Konferencja skupiła ponad 30 specjalistów. Rozłożenie tej grupy zaledwie na 2 dni konferencji spowodowało konieczność utworzenia dwóch równoległych bloków. Niestety, trzeba było wybierać na które prezentacje się idzie, a które omija. Pełna agenda dostępna jest na stronie CONFidence – Agenda

Wybrane prezentacje, o których chcę wspomnieć

1. Anonimowość, prywatność i współpraca z TORem w rzeczywistym świecie – Jacob Appelbaum
2. Bezpieczeństwo jest „do bani” – Eddie Schwartz
3. Dobrze znane luki w ludzkim mózgu i zachowaniu – powszechne błędy administratorów – Wojciech Bojdol
4. Dan Kaminsky
5. Teraźniejszość i przyszłość wielowarstwowych ataków sieciowych i XSSQLI – Mario Heiderich

Powyżej prezentują listę tylko tych wybranych, współgrających z tematyką bloga. Oczywiście ciekawych wystąpień było dużo więcej, jak chociażby prezentacja: „Nie możecie nas zatrzymać: najnowsze trendy w technikach exploit” – Alexey Sintsov. Czy Ataki na telefonię komórkową i sposoby zapobiegania im – jak bezpieczeństwo zmieni sytuację na rynku telefonii komórkowej – Tam Hanna

Prezentacje

Anonimowość, prywatność i współpraca z TORem w rzeczywistym świecie – Jacob Appelbaum

Temat tego wystąpienia nie jest ściśle związany z tematyką bloga, jednak warto o nim wspomnieć. TOR jest projektem i otwartą siecią, wykorzystywanym przeciwko cenzurze, dającym ludziom na całym świecie możliwość dostępu do treści nie filtrowanych przez rządy. Pomaga chronić użytkowników przed inwigilacją, która zagraża anonimowości, prywatności, prowadzeniu poufnych interesów i osobistej komunikacji. Niestety, często u nas kojarzony jest przez wielu ludzi jako siedlisko zła, pedofilii. Być może za sprawą wypowiedzi kilku nieznających tematu polityków.

Z punktu widzenia web developera, korzystanie przez odwiedzających z TOR’a powoduje trudności w zbieraniu statystyk odwiedzin. Większość statystyk opisujących źródła odwiedzin będą zakłamane. Jeśli na domiar tego, użytkownicy będą korzystać ze specjalnie przygotowanych przeglądarek, traking takich osób będzie niemożliwy, bądź gromadzone statystyki będą zakłamane.

Bezpieczeństwo jest „do bani” – Eddie Schwartz

Świetna prezentacja, raczej nie związana z projektowaniem aplikacji www. Skupia się na bezpieczeństwie systemów, sieci. Sposób przedstawienia tematu oraz sam autor (Eddie Schwartz jest głównym oficerem ds. bezpieczeństwa w NetWitness i ma 25 lat doświadczenia w dziedzinie bezpieczeństwa informacji i prywatności), zrobiły na mnie duże wrażenie.

Dobrze znane luki w ludzkim mózgu i zachowaniu – powszechne błędy administratorów – Wojciech Bojdol

Prezentacja dająca spojrzenie z trochę innej strony – psychologicznej. Temat dość ciekawy, rzeczy, o których większość się nawet nie zastanawia. Na prezentacji zostały przedstawione błędy wynikające z wad ludzkiej percepcji, lekceważenie niepomyślnych informacji, nie dopuszczanie informacji sprzecznych z naszym zdaniem, iluzje pamięciowe, iluzja nieomylności. Moim zdaniem warte uwagi kwestie, nie tylko z punktu widzenia bezpieczeństwa systemów, sieci. Programiści też czasem myślą, że są nieomylni, że skoro mają 5 lat doświadczenia to wiedzą najlepiej jak rozwiazać dane zagadnienie, wydają się nie widzieć oznak problemów, błędów. Ma to swoje odzwierciedlenie później w jakości powstałego kodu, czy to aplikacji stacjonarnej, czy webowej.

Dan Kaminsky

Dan Kaminsky jest znaną postacią w kwestiach bezpieczeństwa. Trzeba przyznać, że poza wiedzą jest bardzo ciekawą osobowością. Jego wystąpienie poruszało tematykę bezpiecznego tworzenia aplikacji internetowych. Wiele miejsca zostało poświęcone tematyce SQL-Injection, z tym, że z innego, niż powszechnie, punktu widzenia. Dan skupił się na takim przygotowaniu narzędzi, aby programiści z łatwością mogli z nich korzystać. Jak zauważył na wstępie, większość luk pojawia się ponieważ developerzy są leniwi. Przykładowo, pomimo, że istnieje w PDO bindowanie parametrów i tak wielu programistów woli podstawiać zmienne bezpośrednio do zapytania.

$query = "SELECT * FROM `TABELA` WHERE `POLE` like $pole OR `POLE2` like $pole2";

Powyższy zapis jest wygodniejszy w stosowaniu, niż ten poniżej. W dodatku zawiera się w jednej linii, nie w trzech.

$stmt = $this->_db->prepare("SELECT * FROM `TABELA` WHERE `POLE` like :pole OR `POLE2` like :pole2");
$stmt->bindParam(':pole', $pole, PDO::PARAM_STR);
$stmt->bindParam(':pole2', $pole2, PDO::PARAM_STR);

W związku z tym, proponuje stworzenie takich narzędzi, które spowodują, że programiści będą tworzyć aplikacje w najszybszy dla nich sposób, z tym, że będą one bezpieczne.

Teraźniejszość i przyszłość wielowarstwowych ataków sieciowych i XSSQLI – Mario Heiderich

Moim zdaniem najlepsza prezentacja (dla web developera) z całej konferencji. Mario Heiderich jest niezależnym konsultantem ds. bezpieczeństwa i trenerem, mieszka w Kolonii, a także pracuje dla szerokiej gamy firm niemieckich i międzynarodowych. W wolnym czasie Mario lubi spędzać dużo czas z oknem konsoli Firebug. Zakres poruszonych kwestii jest bardzo szeroki, wstęp do prezentacji wygąda następująco:

1. Co się stało z bezpieczeństwem aplikacji www?
2. XSS, wstrzykiwanie SQL, Auth i path traversal
3. Mamy obecnie niesamowite rzeczy! NoScript, the IE8 and Chromium XSS filter and CSP
4. Użytkownicy muszą być bezpieczniejszi niż kiedykolwiek!
5. WWW się nie zmieniło?
6. Nie było żadego HTML5 i następnego pokolenia przeglądarek?

Mario zaprezentował bardzo dużo różnorodnych luk, niestety zabezpieczenie się przed większością z nich możliwe jest tylko poprzez wyłączenie JavaScript. Oczywiście, w obecnej sytuacji, tak radykalny krok spowoduje pojawienie się utrudnień w korzystaniu z aplikacji webowych, niektóre z nich całkowicie unieruchomi. W związku z tym, pozostaje nam czekać na aktualizacje przeglądarek. W gestii ich producentów pozostaje napisanie takich silników, które uniemożliwią przeprowadzenie takich ataków

Przykładowo, osoby dysponujące przeglądarką z zainstalowanym firebugiem (lub inną konsolą js) polecam przetestowanie kilku poniższych kawałków kodu

top[(Number.MAX_VALUE/45268).toString(36).slice(15,19)]((Number.MAX_VALUE/99808).toString(36).slice(71,76)+'("XSS")')

ω=[[Ṫ,Ŕ,,É,,Á,Ĺ,Ś,,,Ó,Ḃ]=!''+[!{}]+{}][Ś+Ó+Ŕ+Ṫ],ω()[Á+Ĺ+É+Ŕ+Ṫ](Ó+ω()[Ḃ+Ṫ+Ó+Á]('Á«)'))

Ten kod to szaleństwo! Sprawdźcie demo na stronie Mario’s: http://heideri.ch/jso/what??? (działa tylko w IE)

1;--<?f><l￦:!!:x\
/style=`b&#x5c;65h\0061vIo\r/ĸ
:url(#def&#x61ult#time2)\ö/';'`￦/onb
egin=
&#x5bμ=\u00&#054;1le&#114t&#40&#x31)&#
x5d&#x2f/&#xyŧ\>

Lub zaprezentowanego ataku XSSQLI (atak XSS poprzez wykorzystanie SQL Injection)

SELECT UpdateXML(concat( 0x3c,'script',0x3e,'alert(1)',0x3c,'/script',0x3e),'/x', 0);

Obszerniejsza relacja z prezentacji Mario w kolejnym wpisie.

Related posts

• Info (0)
• The Small Calendar (0)
• The Small Calendar – Windows gadżet (3)
• The Small Calendar – jQuery + PHP w praktyce (5)
• Śledzik na nasza-klasa.pl – Metoda na usunięcie (2)

Pierwsze kroki

Platforma gadżetów Windows jest frameworkiem dla tworzenia i hostowania mini-aplikacji. Tworzenie aplikacji odbywa się niemalże tak samo, jak zwykłych stron internetowych. Do wykorzystania są technologie (x)HTML, CSS, JavaScript, JScript, VBscript. Oczywiście dołączanie gotowych bibliotek jest możliwe, w tym przykładzie pokażę jak łatwo można skorzystać z biblioteki jQuery.

Katalog przechowywania

Gadżety są przechowywane w konkretnym katalogu. Rozpoczynając tworzenie nowego gadżetu katalog najlepiej utworzyć smodzielnie (później, po zakończeniu prac utworzony gadżet będzie się sam instalował). Folder przechowywania gadżetów w Windows 7: %localappdata%\Microsoft\Windows Sidebar\Gadgets\. Czyli dla użytkownika Vokiel będzie to np: C:\Users\Vokiel\AppData\Local\Microsoft\Windows Sidebar\Gadgets\. W tym katalogu należy utworzyć folder dla danego gadżetu, nazwę kończąc na .gadget. W naszym przypadku będzie to TheSmallCalendar.gadget.

The Small Calendar Gadżet - Folder lokalizacji

Manifest

Plik gadget.xml opisuje zawartość paczki, czyli gadżetu. Zawiera podstawowe informacje na temat dodatku, które później widoczne są na ekranie gadżetów.

Tworzony przeze mnie kalendarz zawiera następujący opis:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
  <name>The Small Calendar</name>
  <namespace>vokiel.widgets</namespace>
  <version>1.0.2</version>
  <author name="Vokiel">
    <info url="http://blog.vokiel.com/the-small-calendar-jquery-php-w-praktyce" />
    <logo src="img/icon.png" />
  </author>
  <copyright>&#169; Vokiel | vokiel.com</copyright>
  <description>To jest mały kalendarz, który pozwala sprawdzić dzień tygodnia dla wybranej daty. Ten kalendarz jest inny niż wszystkie, posiada tylko jeden blok dni!</description>
  <icons>
    <icon height="48" width="48" src="img/TheSmallCalendar_48x48.png" />
  </icons>
  <hosts>
    <host name="sidebar">
      <base type="HTML" apiVersion="1.0.0" src="TheSmallCalendar.html" />
      <permissions>Full</permissions>
      <platform minPlatformVersion="1.0" />
      <defaultImage src="img/TheSmallCalendar_48x48.png" />
    </host>
  </hosts>
</gadget>

Opisywanie szczegółów zawartości tego pliku nie jest konieczne, znaczniki XML są tak dobrane, iż same w sobie są dostatecznym opisem. Najważniejszą rzeczą w tym pliku jest wskazanie pliku głównego gadżetu, w tym przypadku jest to TheSmallCalendar.html, ten plik zostanie otwarty przy starcie aplikacji.

Wynik opisu zawartego w powyższym listingu kodu przedstawia się następująco:

The Small Calendar Gadżet - Ekran gadżetów

Dokładny opis, które pola odnoszą się do jakich elementów przedstawia screen pochodzący ze źródła – czyli Microsoftu

The Small Calendar Gadżet - Elementy manifestu

Struktura plików

Aby zachować porządek utwórzmy następującą strukturę plików:

The Small Calendar Gadżet - Struktura katalogów

W katalogu css będziemy przechowywać zewnętrzne arkusze stylów (dla strony głównej gadżetu oraz dla strony z ustawieniami). Następnie w katalogu img elementy graficzne, a w folderze js – jak się nie trudno domyśleć: pliki z zawartością JavaScript – najważniejsze w naszej aplikacji. Katalogi pochodzące od nazw języków posłużą do przechowywania wersji językowych dla tłumaczeń.

Wersje językowe

Jak wspomniałem powyżej, możliwym jest utworzenie katalogów tłumaczeń na inne języki. Za sprawą genialnej obsługi tłumaczeń po stronie systemu, kwestia jest tu bardzo prosta. System poszukuje plików przeszukując katalogi według ustalonej kolejności. Zaczynając od pełnej nazwy lokalizacji, np.: en-us, pl_pl; następnie jeśli nie zostanie znaleziona, przechodzi do poszukiwań katalogu ze skróconą nazwą, np.: en, pl; jeśli to zawiedzie, przeszuka główny katalog gadżetu. Poszukiwana wersja językowa jest oczywiście tą, jaka została ustawiona w systemie. Zatem jeśli uruchamiamy komputer z polską wersją językową Windowsa, system uruchamiając gadżety będzie poszukiwał plików językowych w następującej kolejności: pl_PL -> pl -> katalog główny.

Ważnym zaznaczenia jest fakt, iż możliwe jest utworzenie różnych wersji językowych dla plików opisujących gadżet.

Wykorzystanie w praktyce tłumaczeń jest banalenie proste. Tworzymy zmienne w JavaScript, którym przypisujemy wartości tłumaczeń odpowiednio dla danego języka, następnie tłumaczenia te zapisujemy do odpowiednich katalogów. Dalej w kodzie jawnie z nich korzystamy, bez konieczności wywoływania odpowiedniego pliku z tłumaczeniem – tym zajmie się za nas system.

Plik pl\local.js

var lng = {};
lng.legend_year = 'Ustawienia daty';
lng.label_year = 'Rok';

Plik en\local.js

var lng = {};
lng.legend_year = 'Date settings';
lng.label_year = 'Year';

Użycie dalej w kodzie sprowadza się do wywołania zmiennych:

$('#legend_year').html(lng.legend_year);

System.Gadget

Gadżety miałyby niewielką przydatność dyby nie możliwość zapisu ustawień. Możliwość dostosowania ich do użytkownika otwiera wiele możliwości, w połączeniu z ajaxem – niemal niezliczone. Dostępne są gadżety dające możliwość podglądu twittera, dodawania nowych wpisów, śledzenia stanu pogody w wybranym mieście itd. Wszystko to ze względu na możliwość zapisu preferencji użytkownika.

Zadanie to odbywa się przy wykorzystaniu dwóch (czterech) najważniejszych metod.
Są to: System.Gadget.Settings.writeString("NazwaZmiennej", "Wartosc");
oraz System.Gadget.Settings.readString("NazwaZmiennej"); oraz ich odpowiedników próbujących odgadnąć typ danych, tj: .read() i .write(). Dzięki tym metodom mamy możliwość zapisu ustawień, które mogą zostać odczytane po restarcie komputera.

Oczywiście System.Gadget to nie tylko ustawienia. Obiekt System.Gadget jest o wiele bardziej złożony . Wykorzystamy z niego tylko podstawowe metody, będą to:

1. System.Gadget.settingsUI – włączenie funkcjonalności ustawień, wskazanie pliku ustawień
2. System.Gadget.onShowSettings – wskazanie funkcji uruchamianej po kliknięciu opcji ustawień
3. System.Gadget.onSettingsClosing – wskazanie funkcji uruchamianej przy zamykaniu opcji ustawień
4. System.Gadget.onSettingsClosed – wskazanie funcji uruchamianej po zamknięciu opcji ustawień
5. System.Gadget.version – pobranie numeru wersji gadżetu

Start z JavaScript

Wykorzystując powyższe metody z obiektu System.Gadget stworzymy ogólny zarys gadżetu, system przepływu danych i akcji. Plik główny gadżetu js\TheSmallCalendar.js

1
2
3
4
5
6
7
8
9
10
11
12

/**
 * włączenie funkcjonalności ustawień, wskazanie pliku ustawień
 */
System.Gadget.settingsUI = "Settings.html";
/**
 * wskazanie funcji uruchamianej po zamknięciu opcji ustawień
 */
System.Gadget.onSettingsClosed = SettingsClosed;
/**
 * wskazanie funkcji uruchamianej po kliknięciu opcji ustawień
 */
System.Gadget.onShowSettings = SettingsShow;

Następnie dlegacja funkcji w pliku js\settings.js

1
2
3
4

/**
 * wskazanie funkcji uruchamianej przy zamykaniu opcji ustawień
 */
System.Gadget.onSettingsClosing = SettingsClosing;

Mając zarys wydelegowanych funkcji przejdziemy do głównej części – tj. tworzenia gadżetu The Small Calendar

The Small Calendar

The Small Calendar Gadget będzie zawierał dwa pliki html (główny + plik ustawień), dla każdej z tych stron zostanie utworzony oddzielny plik z ostylowaniem CSS oraz pliki js.

Pliki HTML

Pierwszy plik, główny gadżetu będzie bardzo prosty, praktycznie niemalże pusty, a to ze względu, iż treść zostanie wygenerowana dynamicznie przy pomocy javascript. Utwórzmy zatem prostą strukturę strony html, dołączając zewnętrzny arkusz styli CSS oraz pliki JavaScript. Jak widać na poniższym listingu mamy tylko jeden element głównego dokumentu: div z określonym id. Do niego to właśnie wpiszemy nasz kalendarz. Dołączonych plików js jest aż 4, są to: biblioteka jQuery, plik z domyślnymi ustawieniami, plik językowy (Windows sam przeszuka katalogi w poszukiwaniu tłumaczeń), ostatni plik to nasz główny rdzeń aplikacji.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="MSThemeCompatible" content="yes" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/TheSmallCalendar.css" rel="stylesheet" type="text/css" />
</head>
<body onload="Init();">
    <div id="vokiel_small_calendar"></div>
    <script src="js/jquery-1.4.2.min.js" type="text/javascript" language="javascript" charset="utf-8"></script>
    <script src="js/defaults.js" type="text/javascript" language="javascript" charset="utf-8"></script>
    <script src="local.js" type="text/javascript" language="javascript" charset="utf-8"></script>
    <script src="js/TheSmallCalendar.js" type="text/javascript" language="javascript" charset="utf-8"></script>
</body>
</html>

Style CSS są znane z poprzedniego wpisu, zostały tylko nieznacznie dostosowane do gadżetu. Ważną informacją jest konieczność zdefiniowania wielkości dokumentu. W przeciwnym razie nasz gadżet nie będzie widoczny.

body{
    width: 284px;
    height: 295px;
    font-size: 10px;
    border: 1px solid #F0F0F0;
}

Ustawienia

Temat ustawień jest również bardzo prosty. Polega na utworzeniu strony z formularzem, w którym można zdefiniować wybrane opcje. Przy kliknięciu w ustawienia wywoływana jest funkcja dołączona do akcji onload dla body (w naszym przypadku jest to InitSettings()). Funkcja ta odczytuje zapisane wartości zmiennych System.Gadget.Settings.readString() (jeśli nie zostały ustawione pobiera domyślne), następnie wpisuje je do pól formularza. W tym gadżecie, w celu większej przejrzystości, funkcję zdefiniowałem bezpośrednio w kodzie html. Lepszym rozwiązaniem byłoby przypisanie jej do eventów.

document.onreadystatechange = function(){
    if(document.readyState=="complete"){
        // kod
    }
}

Po zmianie ustawień i kliknięciu przycisku potwierdzającego wywoływana jest funkcja wydelegowana dla
System.Gadget.onSettingsClosing, w niej ustawiania odczytywane są z pól formularza, sprawdzane, następnie zapisywane w systemie System.Gadget.Settings.writeString().

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="MSThemeCompatible" content="yes" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="css/settings.css" rel="stylesheet" type="text/css" />
</head>
<body onload="InitSettings();">
    <fieldset>
        <legend id="legend_year"></legend>
        <label for="year" id="label_year"></label>
        <div>
            <input type="text" name="year" id="year" maxlength="4" accept="0123456789" value=""/>
        </div>
    </fieldset>
    <fieldset id="fieldset_colors">
        <legend id="legend_color"></legend>
        <label for="color_31" id="label_color_31"></label>
        <div>
            <span>#</span><input type="text" name="color_31" id="color_31" maxlength="6" accept="0123456789ABCDEF" value=""/>
        </div>
        <label for="color_30" id="label_color_30"></label>
        <div>
            <span>#</span><input type="text" name="color_30" id="color_30" maxlength="6" accept="0123456789ABCDEF" value=""/>
        </div>
        <label for="color_2829" id="label_color_2829"></label>
        <div>
            <span>#</span><input type="text" name="color_2829" id="color_2829" maxlength="6" accept="0123456789ABCDEF" value=""/>
        </div>
    </fieldset>
    <small id="author_url"></small><small id="ver"></small>
 
    <script src="js/jquery-1.4.2.min.js" type="text/javascript" language="javascript" charset="utf-8"></script>
    <script src="js/defaults.js" type="text/javascript" language="javascript" charset="utf-8"></script>
    <script src="local.js" type="text/javascript" language="javascript"></script>
    <script src="js/settings.js" type="text/javascript" language="javascript"></script>
</body>
</html>

Jak widać na listingu powyżej, strona z ustawieniami posiada 4 edytowalne pola. Są to: rok, kolory tła dla miesięcy z podziałem wg ilości dni w danym miesiącu (31,30,28 i/lub 29). Oczywiście roszerzenie ich o kolejne jest jak najbardziej zasadne. W planie mam dodanie koloru tekstu, gdyż obecnie po zmianie tła na jasny odcień całość staje się nieczytelna. Jednak na potrzeby przykładu, wprowadzenia do tematu wystarczy nam kilka podstawowych opcji.

Panel opcji wygląda następująco:

The Small Calendar Gadżet - Ustawienia

Schemat działania

Przechodzimy do meritum tworzenia gadżetu, czyli połączenia zdobytej wiedzy w jedną, działającą całość. Być może poprzednia część wpisu wydaje się oderwana od siebie, mam nadzieję, że po tej części i zakończeniu wszystko stanie się jasne.

Schemat działania gadżetu jest dość intuicyjny.

1. Instalacja gadżetu, system korzystając z danych zawartych w pliku gadget.xml wyświetla informację o dodatku.
2. W znaczniku base znajdującego się w gałęzi hosts->host znajduje się informacja, który plik ma być uznany za główny gadżetu.
3. Przy uruchomieniu gadżetu dołączane są pliki js, w których zawarta jest domyślna konfiguracja, zapisane tłumaczenia językowe, oraz funkcje generujące treść dodatku.
4. Wywołuje się funkcja Init(); zawarta w pliku js/TheSmallCalendar.js, która odczytuje zapisane ustawienia (jeśli ich nie ma pobiera domyślne), generuje kalendarz, wpisuje go do gadżetu, koloruje kalendarz zgodnie z ustawieniami kolorów.
5. W przypadku kliknięcia ikonki opcji, system otwiera plik opcji zdefiniowany w js poprzez przypisanie
   System.Gadget.settingsUI = "Settings.html";
6. Po załadowaniu strony wywoływana jest funkcja InitSettings(), która uzupełnia etykiety o odpowiednie tłumaczenia LoadLang() oraz wpisuje zapisane/domyślne ustawienia w pola formularza LoadSettings()
7. Po zatwierdzeniu ustawień uruchamiana jest funkcja SettingsClosing(), która odczytuje zmienne wpisane w formularzu ustawień i zapisuje je do konfiguracji. Dzięki temu po restarcie sytemu ustawienia zostaną zachowane (w przypadku wyłączenia gadżetu i ponownego włączenia ustawienia są resetowane)
8. Po zamknięciu panelu ustawień, zapisaniu zmian, wywoływana jest funkcja SettingsClosed(), z pliku js przypisanego do strony głównej gadżetu. Czyli sterowanie przekazywane jest z powrotem na stronę
   TheSmallCalendar.html, wywoływana funkcja została wydelegowana przez
   System.Gadget.onSettingsClosed = SettingsClosed;
9. Uruchomiona funkcja SettingsClosed() przeładowuje kalendarz, tak jakby został pierwszy raz uruchomiony. W przypadku innych gadżetów wystarczającym może być przeładowanie jednego fragmentu gadżetu, niestety w tym zwykle niezbędne jest utworzenie kalendarza od nowa (zmiana roku).

Tworzenie paczki – .gadget

Ostatnim etapem jest utworzenie gotowej paczki, jednego pliku, instalatora gadżetu. W tym miejscu programistom z Microsoft należy się uznanie. Tworzenie takiej paczki sprowadza się do zwykłego spakowania katalogu zip’em i zmiany rozszerzenia na gadget. Oczywiście jest też inna droga, można utworzyć paczki CAB umożliwiające elektroniczne podpisanie archiwum .

Zakończenie

Stworzony gadżet, podobnie jak jego wersja on-line, zachował funkcjonalności wyboru roku, zmiany języka, reagowania na pojawienie się kursora myszy nad wybranymi częściami.

Funkcjonalności nie ubyło. Doszło kilka usprawnień. Korzystanie z gadżetu nie wymaga otwartej przeglądarki, jest poręczniejsze, szybsze. Wybór wersji językowej jest automatyczny, dzięki czemu odpada konieczność kilku dodatkowych kliknięć. Raz skonfigurowany gadżet może być stosowany przez długi czas.

Strona projektu

Zapraszam na specjalnie przygotowaną stronę projektu: http://blog.vokiel.com/thesmallcalendar/

Related posts

• The Small Calendar (0)
• The Small Calendar – jQuery + PHP w praktyce (5)
• (English) Earn Fame and Fortune in the Nettuts/Screenr Screencast Competition (1)
• Info (0)
• Śledzik na nasza-klasa.pl – Metoda na usunięcie (2)

Cel

Kalendarz w wersji oryginalnej wygląda następująco:

The Small Calendar - Grafish Design's Blog

Planowana przeze mnie wersja będzie miała:

1. Wygląd przypominający oryginał
2. Wybór roku innego niż aktualny
3. Wielojęzyczność
4. Możliwość podświetlania kolumny dat
5. Możliwość podświetlania wierszy miesięcy
6. Możliwość podświetlania dni tygodnia dla wybranych dat
7. Możliwość przenoszenia bloku dat po kliknięciu na wiersz miesiąca

Generowanie kalendarza: PHP

Do wygenerowania kalendarza posłużymy się prostą klasą, która wygeneruje nam kilka rzeczy. Po pierwsze stworzymy listę miesięcy, dla każdego z nich sprawdzimy liczbę dni, sprawdzimy dzień tygodnia dla pierwszego dnia miesiąca. Następnie stworzymy na tej podstawie tablicę, która będzie zawierała skróty nazw miesięcy (w wybranym języku), dla wybranego roku, do każdego z miesięcy przypiszemy ilość dni oraz odpowiednio posortowane skróty nazw dni tygodnia.

Klasa ta jest bardzo prosta, zatem możemy ją nazwać imitacją klasy, zbiorem funkcji opakowanych w klasę.

Lista metod:

1. public __construct – 2 parametry opcjonalne: rok, tablica z danymi języka | konstruktor
2. public setLanguage – 1 parametr: tablica z tłumaczeniami | ustawienie języka
3. public getdatesTable – 0 parametrów | tworzy tablicę dni
4. public getCalendar – 0 parametrów | pobiera tablicę z kalendarzem
5. private generateMonths – 0 parametrów | generuje miesiące
6. private generateDayNames – 0 parametrów | tworzy dni tygodnia w odpowiedniej kolejności

Kod klasy

Część po stronie serwera jest na tyle prosta, że nie wymaga większego opisu. Konstruktor może przyjmować 2 parametry: rok oraz tablicę z tłumaczeniem na inny język. Oba parametry są opcjonalne, domyślnym rokiem jest aktualny, język – polski.

Metoda setLanguage ustawia język. Kolejna, getDatesTable generuje tablicę z dniami miesięcy (1-31), oznaczając odpowiednio ilości dni wg miesięcy. getCalendar wywołuje dwie inne: generateMonths – generuję tablicę miesięcy, wraz z ważnymi danymi, oraz generateDayNames – generującą skrótowe nazwy dni tygodnia.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110

<?php
/**
 * VokielSmallCalendar class
 * @author Vokiel | http://blog.vokiel.com
 */
class VokielSmallCalendar {
	/**
	 * Selected year
	 * @var int	$year
	 */
	private $year;
	/**
	 * Shortcuts names for months
	 * @var	array $monthsShort
	 */
	private $monthsShort = array();
	/**
	 * Shortcuts names for week days
	 * @var	array	$daysShort
	 */
	private $daysShort = array();
	/**
	 * Generated months table for the calendar
	 * @var array $months
	 */
	private $months = array();
 
	/**
	 * Construct,
	 * @param	int	$year
	 * @param	array	$lang
	 */
	public function __construct($year=0,$lang=null){
		$this->year = ($year)? (int)$year : date('Y');
		if (!is_array($lang) || !is_array($lang['months']) || !is_array($lang['days'])){
			$lang = null;
		}
		$this->setLanguage($lang);
	}//end of __construct
 
	/**
	 * Setting the monts shortcuts names and days shorcuts names.
	 * Polish is default language.
	 * @param	array	$lang	Monts and days array starting from 1 = January and 1 = Monday
	 */
	public function setLanguage($lang=null){
		$this->monthsShort = (is_array($lang['months']))? $lang['months'] : array(1=>'Sty',2=>'Lut',3=>'Mar',4=>'Kwi',5=>'Maj',6=>'Cze',7=>'Lip',8=>'Sie',9=>'Wrz',10=>'Paź',11=>'Lis',12=>'Gru');
        $this->daysShort = (is_array($lang['days']))? $lang['days'] : array(1=>'Pon',2=>'Wt',3=>'Śr',4=>'Czw',5=>'Pt',6=>'Sob',7=>'Nie');
	}//end of setLanguage method
 
	/**
	 * Generating the dates table (numbers from 1 to 31)
	 * @return	string	$datesTable	Generated HTML table
	 */
	public function getDatesTable(){
		$datesTable = '<table><tbody><tr>';
		for ($i=1;$i<32;$i++){
			$class = '';
			if ($i>=28){
				if ($i == $this->months[2]['daysCount'] || $i>29){
					$class = 'class="days_'.$i.'"';
				}
			}
			$datesTable .= '<td '.$class.'>'.$i.'</td>';
			if ($i%7==0){
				$datesTable .= '</tr><tr>';
			}
		}
		$datesTable .= '</tr></tbody></table>';
		return $datesTable;
	}//end of getdatesTable method
 
	/**
	 * Getting the calendar
	 * @return	array	$this->months Array with months shortcuts names and sorted week days shortcuts names
	 */
	public function getCalendar(){
		$this->generateMonths();
		$this->generateDayNames();
		return $this->months;
	}//end of getCalendar method
 
	/**
	 * Generating months table
	 */
	private function generateMonths(){
		for ($i=1;$i<13;$i++){
			$time = mktime(0,0,0,$i,1,$this->year);
			$this->months[$i]['weekDay'] = date('N',$time);
			$this->months[$i]['montShort'] = $this->monthsShort[$i];
			$this->months[$i]['daysCount'] = date('t',$time);
		}
	}//end of generateMonths method
 
	/**
	 * Generating week day names shortcuts
	 */
	private function generateDayNames(){
		foreach ($this->months as $month => $dayStart){
			$dayStart = $dayStart['weekDay'];
			for ($i=0;$i<7;$i++){
				$day = ($dayStart+$i>7)? (-(7-$dayStart-$i)) : ($dayStart+$i);
				$this->months[$month]['weekdays'][] = $this->daysShort[$day];
				unset($this->months[$month]['weekDay']);
			}
		}
	}//end of generateDayNames method
 
}// end of VokielSmallCalendar class
?>

Obsługa kalendarza: JavaScript

W tej części zajmiemy się oskrytpowaniem kalendarza w JavaScript (korzystając z jQuery) w celu nadania mu funkcjonalności, dynamiki i użytecznosci. Z naszych założeń wynika, że musimy utworzyć kilka funkcji, które będą reagować na przesuwanie kursora myszki ponad polami kalendarza.

Kod JavaScript

Pierwsza funkcja ma za zadanie podświetlać kolumny tabel w reakcji na najazd myszy na wiersze miesięcy. Następna jej część usuwa podświetlenie po zejściu kursora myszy z danego elementu. Taki hover-rollover.

Kolejny fragment listingu odpowiada za kliknięcie na danym miesiącu, co skutkuje małą animacją. Blok z listą dni zmienia pozycję, ustawiając się tuż pod wybranym miesiącem (klikniętym).

Funkcja sendYear ma za zadanie wskazać skryptowi PHP wybrany przez użytkownika rok. Kolejne akcje są już raczej kosmetyczne: akceptowanie tylko danych liczbowych w polu roku, automatyczne wysłanie formularza po naciśnięciu klawisza enter, wyczyszczenie pola po kliknięciu klawisza esc.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

$(document).ready(function(){
	/**
	 * Actions after moving cursor over chosen month
	 * Hilights column in dates table and chosen month
	 */
	$('li:not(.daysTable) span').mouseenter(function(){
		var $this = $(this);
		var spanNr = $this.parent('li').children('span').index($this); /* nr dnia tygodnia (od zera) */
 
		$this.parent('li').addClass('hover');
 
		var tab = $this.closest('ul').find('li.daysTable table tr');
		tab.each(function(){
			$(this).find('td:eq('+spanNr+')').addClass('hover');
		});
	}).mouseleave(function(){
		var $this = $(this);
		var spanNr = $this.parent('li').children('span').index($this); /* nr dnia tygodnia (od zera) */
 
		$this.parent('li').removeClass('hover');
 
		var tab = $this.closest('ul').find('li.daysTable table tr');
		tab.each(function(){
			$(this).find('td:eq('+spanNr+')').removeClass('hover');
		});
	});
	/**
	 * Clicking on chosen month
	 * Moves table with dates just after the clicked month
	 */
	$('li:not(.datesTable)').click(function(e){
		e.preventDefault();
		var $this = $(this);
		var dt = $this.parent('ul').children('li.datesTable');
		dt.slideUp(1000,function(){
			$this.after(dt);
		}).delay(50).slideDown('normal');
 
	});
	/**
	 * Action after moving cursor over chosen day in the table of days (1-31)
	 * Hilights days over all months
	 */
	$('li.datesTable table tr td').mouseenter(function(){
		var $this = $(this);
		var tdNr = $this.parent('tr').children('td').index($this); /* nr dnia miesiaca (od zera) */
		var sp = $this.closest('ul').children('li:not(.datesTable)');
		sp.each(function(){
			$(this).find('span:eq('+tdNr+')').addClass('hover');
		});
 
		var tab = $this.closest('table tbody').children('tr');
		tab.each(function(){
			$(this).find('td:eq('+tdNr+')').addClass('hover');
		});
	}).mouseleave(function(){
		var $this = $(this);
		var tdNr = $this.parent('tr').children('td').index($this); /* nr dnia miesiaca (od zera) */
		var sp = $this.closest('ul').children('li:not(.s)');
		sp.each(function(){
			$(this).find('span:eq('+tdNr+')').removeClass('hover');
		});
 
		var tab = $this.closest('table tbody').children('tr');
		tab.each(function(){
			$(this).find('td:eq('+tdNr+')').removeClass('hover');
		});
	});
	/**
	 * Function for sending new typed year
	 */
	function sendYear(){
		var y = parseInt($('#year').val());
		if (y>1901 && y<2038){
			location.href = '?year='+y;
		}else{
			$('#year').addClass('error');
		}
	}
	/**
	 * Accept button clicked - sending new date
	 */
	$('#accept').click(function(e){
		e.preventDefault();
		sendYear();
	});
	/**
	 * Accept only numbers
	 */
	$('#year').keyup(function(e){
		$(this).val($(this).val().replace(/\D/g,''));
	});
	/**
	 * Checking key code on year field (esc, enter keys only)
	 */
	$('#year').keydown(function(e){
		if (e.keyCode==13){ /* enter - send new year */
			sendYear();
		}else if (e.keyCode==27){ /* esc - clear form */
			$(this).val("");
		}
	});
	/**
	 * Remove 'error' clas after focusing year field
	 */
	$('#year').focus(function(){
		$(this).removeClass('error');
	});
	/**
	 * Changing language
	 */
	$('#lang').change(function(){
		var url = new String(document.location);
		url.toLowerCase();
		if (url.indexOf('year') > -1) {
			if (url.indexOf('lang') > -1){
				url = url.replace(/lang(.*)/gi,'');
			}
			document.location = url + '&lang=' + $(this).find(':selected').val();
		}else{
			document.location =  '?lang=' + $(this).find(':selected').val();
		}
	});
});

Ostylowanie CSS

Style CSS nie wymagają szerokiego omówienia. Ważne jest tylko zwrócenie uwagi na kilka znaczników, które dają możliwość szczegółowego dopasowania wyglądu kalendarza do swoich potrzeb. Kolory wierszy dla miesięcy, w których liczba dni równa się 30, 31 oraz 28 lub 29 są oznaczone wybranymi klasami:
.days_31, .days_30, .days_29 lub .days_28

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

/* reset css */
@CHARSET "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	font-family: "Trebuchet MS", Tahoma, Verdana, Arial, sans-serif;
	font-size: 14px;
	overflow: auto;
}
 
#vokiel_small_calendar {
    /* width: 327px; */
    width: 427px;
    margin: 0 auto;
    background: #fff;
    overflow: auto;
}
 
#vokiel_small_calendar ul {
	border: 1px solid silver;
	padding: 0px 2px;
}
#vokiel_small_calendar ul, #vokiel_small_calendar ul li {
    list-style: none;
    overflow: auto;
}
#vokiel_small_calendar ul li{
	margin: 2px 0px;
	padding: 2px 0px;
	text-align: right;
}
#vokiel_small_calendar ul li strong{
    text-align: center;
    display: block;
    float: left;
    width: 59px;
    clear: left;
    border-right: 1px solid #fff;
}
#vokiel_small_calendar ul li span{
    display: block;
    text-align: center;
    float: left;
    width: 40px;
    border-right: 1px solid #fff;
    cursor: pointer;
}
#vokiel_small_calendar .days_31 {
	background: #46A12A;
	color: #fff;
}
#vokiel_small_calendar .days_30 {
	background: #F29400;
	color: #fff;
}
#vokiel_small_calendar .days_28, #vokiel_small_calendar .days_29 {
	background: #EA609C;
	color: #fff;
}
#vokiel_small_calendar table {
	border-collapse: collapse;
	float: right;
}
#vokiel_small_calendar table, #vokiel_small_calendar table tbody, #vokiel_small_calendar table tr{
	width: 287px;
}
#vokiel_small_calendar table tr td{
	text-align: center;
	border-right: 1px solid #fff;
	cursor: default;
}
#vokiel_small_calendar ul li.hover, #vokiel_small_calendar ul li span.hover, #vokiel_small_calendar ul li table tbody tr td.hover {
	background-color: #59ACEF;
	color: #fff;
}
#vokiel_small_calendar ul li .giveYear {
	float: right;
	width: 75px;
	text-align: center;
}
#vokiel_small_calendar ul li .giveYear #accept {
	width: 16px;
	height: 16px;
	vertical-align: middle;
}
#vokiel_small_calendar ul li .giveYear #year{
	width: 35px;
	border: 1px solid silver;
}
#vokiel_small_calendar ul li .giveYear #year.error {
	border: 1px solid red;
}
#vokiel_small_calendar ul li .giveYear p {
	font-size: 12px;
}
#vokiel_small_calendar ul li .giveYear small {
	font-size: 10px;
}

Voila

Całość została napisana przy użyciu PHP i JavaScript. Taki był pierwszy pomysł, który miał na celu zintegrować kalendarz z ważnymi wydarzeniami. Jednak nic nie stoi na przeszkodzie, aby przepisać część tworzoną w PHP na JS. Dzięki czemu otrzymalibyśmy kalendarz, który nie wymaga skryptu po stronie serwera.

W planie na bliżej nieokreśloną przyszłość mam utworzenie wersji bez udziału PHP, następnie upięcie tego w widżet opery, ewentualnie w gadżet do windy 7.

Related posts

• The Small Calendar (0)
• The Small Calendar – Windows gadżet (3)
• Info (0)
• (English) Earn Fame and Fortune in the Nettuts/Screenr Screencast Competition (1)
• PHP Date – Polskie nazwy dni i miesięcy. Funkcje date strftime (5)

W skrócie mikroformaty są umownym zestawem standardów (klas CSS i elementów języka xHTML) stosowanych w celu umożliwienia maszynom odczytania i zrozumienia większej ilości danych, które bez nich byłyby zrozumiałe tylko dla człowieka.

Charakterystyka mikroformatów

Inicjatywa stworzenia mikroformatów miała miejsce w 2005 roku. W założeniu chciano przyśpieszyć adaptację tzw. idei sematycznej sieci.

Najważniejszą informacją odnośnie mikroformatów jest to, że nie są one odrębnym językiem. Nie są też odmianą, ani częścią jakiegoś języka. Są to umowne sposoby stosowania klas CSS oraz elementów xHTML w taki sposób, aby umieścić dodatkowe informacje w sposób łatwy do odczytania dla maszyn. Wzbogacają tzw. semantykę kodowania, dzięki czemu stają się łatwiejsze do przetworzenia. Umożliwiają przenoszenie treści zawartej na witrynie do innych aplikacji, dzięki czemu rozszerza się zakres wykorzystania informacji.

Mikroformaty tylko opisują dane, same w sobie nie są ich nośnikami. Jest to ogólnie przyjęta konwencja, która pozwala zagnieżdżać dodatkowe informacje w dokumentach HTML.

Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.

Można je zastosować zarówno w HTML, xHTML, XML, RSS, ATOM. Występują w następujących atrybutach:

1. atrybut class
2. atrybut rel
3. atrybut rev

Budowa mikroformatów

Jak już wspomniałem mikroformaty opierają się na klasach CSS lub na atrybutach xHTML. Najczęściej spotykanym zastosowaniem są wizytówki (hCard), terminarz (hCalendar). W przypadku pierwszego zastosowania, całość wizytówki zawieramy w elemencie z klasą CSS o nazwie vcard. W niej zawartość elementów z odpowiednimi klasami jest interpretowana jako pola wizytówki. W przypadku kalendarza, całość umieszczamy w elemencie z przypisaną klasą vevent.
hCard jest bardziej rozbudowany (17 pozycji) od hCalendar (8 pozycji), zatem nim się zajmiemy w celu przedstawienia budowy mikroformatów. Przykładowa wizytówka może wyglądać następująco:

<div class="vcard">
    <span class="fn">Jan Dzban</span>
    <span class="additional-name">Piotr</span>
    <div class="org">Firma Jana Dzbana SP. Z O. O.</div>
    <a class="email" href="mailto:jan.kowalski@firma_jana_dzbana.pl">jan.kowalski@firma_jana_dzbana.pl</a>
    <a class="url" href="http://firma_jana_dzbana.pl">strona WWW</a>
    <div class="adr">
        <div class="street-address">Dzbanowa 666</div>
        <div class="locality">Janów</div>
        <div class="region">Mazowieckie</div>
        <div class="postal-code">00-123</div>
        <div class="country-name">Polska</div>
    </div>
    <div class="tel">0-700-123-456</div>
</div>

Przyjrzymy się szczegółom. Klasa vcard informuje, że mamy do czynienia z wizytówką (mikrofromatem hCard).
Klasa fn zawiera informację o osobie (Imię i nazwisko). Jeśli chcielibyśmy być bardziej dokładni możemy się posłużyć dwoma oddzielnymi elementami given-name i family-name, oznaczającymi odpowiednio imię i nazwisko. Dodatkowe (drugie) imię zawiera element z klasą additional-name.
Klasa org symbolizuje organizację (firmę, przedsiebiorstwo).
Kolejne klasy email i url – jak nazwa wskazuje, odpowiednio adres poczty elektronicznej, adres strony WWW.
Kolejny blok o klasie adr informuje o zawartości dotyczącej adresu. A w nim szczegółowe dane: nazwa ulicy, numer domu, miejscowość, region (województwo), kod pocztowy, kraj.
Ostatni blok zawiera informację o numerze telefonu – klasa tel.

Jak widać nazewnictwo klas jest bardzo intuicyjne, dzięki czemu podnosi nawet czytelność kodu HTML.

Microformats w praktyce – rodzaje i zastosowanie

Lista podstawowych mikroformatów jest już dość liczna, ciągle powstają nowe (17 w wersji roboczej). Poniższa lista przedstawia mikroformaty, które zostały uznane jako stabilne, otwarte formaty:

1. hCalendar – kalendarz, terminarz
2. hCard – wizytówka
3. rel-nofollow – link nie powinien wpływać na ranking strony docelowej w indeksach wyszukiwarek
4. rel-license – link do strony z licencją pod którą opublikowano odwiedzaną stronę
5. rel-tag – link do strony z danym tagiem (słowem kluczowym, tematem)
6. VoteLinks – link z informacją o ocenie strony docelowej względem aktualnej
7. XFN – relacje międzyludzkie
8. XMDP – do opisu metadanych (schematycznych opisów innych mikroformatów)
9. XOXO – definiuje nowy typ dokumentu XHTML

Możliwych zastosowań jest więcej niż mikroformatów. Wile z nich można łączyć, np przy pomocy hCalendar + hCard + Geo – możemy utworzyć informację o spotkaniu, podać wizytówkę organizatora, oznaczyć miejsce wykorzystując geolokalizację.
Łącząc mikroformaty z innymi usługami takimi jak Technorati, która przekonwertuje nasz kod HTML na format uniwersalny, umożliwiający załadowanie udostępnionych informacji do kalendarza użytkownika, dodatkowo udostępni aplikację z urządzeniami przenośnymi. Link dodajemy w postaci:

<a href="http://technorati.com/contacts/http://strona.pl/hcard.html">Dodaj wizytówkę</a>
<a href="http://technorati.com/events/http://strona.pl/hcalendar.html">Dodaj spotkanie</a>

Kolejnym przykładem może być użycie Kalendarza Google, który daje możliwość importu danych w formacie hCalendar. Pojedyncze kliknięcie w przycisk przenosi do kalendarza, wypełni formularz rejestracji nowego zdarzenia (z informacji zaczerpniętych z mikroformatu). Dzięki temu można stworzyć zaproszenia na spotkanie, umieścić je na własnej stronie, a odwiedzający będą mogli jednym kliknięciem dodać je do swoich kalendarzy.

Ikony dla mikroformatów

Aby jeszcze lepiej uwidocznić zastosowanie mikroformatów dobrą metodą jest przygotowanie zestawu ikon symbolizujących odpowiednie dane. Rozpoznawalne ikony, stosowane na wielu stronach staną się cenną informacją rozpoznawczą. Z racji tego, że idea mikroformatów jest jeszcze młoda, ikony wciąż podlegają zmianom i procesowi standaryzacji. Firma Bartelme Design udostępnia darmowy zestaw ikon (źródła dla programów Photoshop i Ilustrator) wraz z programem do tworzenia ikon. Łącząc wybrane ikonki w jeden obraz, dodając odrobinę kodu CSS możemy łatwo stworzyć przenośny zestaw CSS Sprites Microformats. Podstawowy zestaw ikon widać poniżej:

Przykłady

Kilka przykładów najbardziej popularnych mikroformatów:

hCalendar

Jest to mikroformat kalendarzy, wydarzeń, spotkań. Jego główne elementy to: podsumowanie, data rozpoczęcia (oba wymagane), nazwa, lokalizacja, data zakończenia, status, geolokalizacja itd.

<div class="vevent" id="hcalendar-Zlot-programistów-PHP">
    <a class="url" href="http://planeta.php.pl">
        <abbr class="dtstart" title="2010-01-06T07:0000">6 stycznia 2010 o godzinie 7:00</abbr>,
        <abbr class="dtend" title="2010-01-07T02:00"> godzina 2:00, 7 stycznia 2010</abbr> :
        <span class="summary">Zlot programistów PHP</span> at
        <span class="location">POLSKA</span></a>
</div>

XFN

XFN oferuje 2 typy relacji linków: my sami, inni ludzie. Relacje z innymi są podzielone na 6 kategorii: friendship, physical, professional, geographical, family, romantic.

<a rel="me" href="http://blog.vokiel.com/css-sprites-laczenie-wielu-obrazkow-w-jeden-redukcja-zadan-http">Vokiel o CSS Sprites</a>
<a href="http://anadoxin.org/blog/" rel="met friend">0xcafebabe per aspera ad astra</a>

VoteLinks

VoteLinks poprzez użycie atrybutu rev określa stosunek danej strony do linkowanej (w odróżnieniu od atrybutu rel, który określa stosunek strony linkowanej do danej).
Do wykorzystania mamy 3 opcje: vote-for, vote-against, vote-abstain , czyli: za, przeciw, neutralny (wstrzymanie się od oceny).

<p>Sprawdź stronę: <a href="http://nospor.pl" rev="vote-for">nospor.pl</a>!</p>
<p>Natomiast <a href="http://www.theworstwebsite.com/" rev="vote-against">ta strona</a> jest beznadziejna</p>

Geo

Ciekawym mikroformatem, o którym nie wspomniałem wcześniej jest Geo (jest jeszcze w wersji roboczej). Jest bardzo prosty, posiada 2 właściwości: latitude oraz longitude. Jak sama nazwa wskazuje, służy do określania geolokalizacji.

<div class="geo">GEO:
    <span class="latitude">37.386013</span>,
    <span class="longitude">-122.082932</span>
</div>

Przy zastosowaniu znacznika <abbr> wartością będzie zawartość atrybutu tittle zamiast zawartości całego znacznika (patrz przykład wyżej). Dzięki temu, możemy wyświetlić dane lokalizacyjne bardziej czytelne dla człowieka.

<div class="geo">
    <abbr class="latitude" title="37.408183">N 37° 24.491</abbr>
    <abbr class="longitude" title="-122.13855">W 122° 08.313</abbr>
</div>

Rel-license

Prosty mikrofromat, który informuje czytelnika, na jakiej licencji został udostępniony czytany przez niego tekst.

<a href="http://creativecommons.org/licenses/by/2.0/" rel="license">Strona udostępniona na zasadach licencji CC by 2.0</a>

Rel-tag, rel-nofollow

Te formaty stają się ważne dla osób zainteresowanych pozycjonowaniem stron. Rel-tag odnosi do strony o danym tagu (popularny element serwisów łeb-dwa-zero). Rel-nofollow – informuje, że dany link prowadzi do strony, z którą nie chcemy mieć wiele wspólnego. W szczególności nie chcemy aby wyszukiwarki indeksowały dany link przeglądając źródła naszej strony. Z punktu widzenia pozycjonowania, taki link jest bez wartości, nie wzmacnia pozycji danego serwisu (nie wpływa na Page Rank)

<a href="http://blog.vokiel.com/kategoria/php" rel="tag">PHP</a>
<a href="http://www.google.com" rel="nofollow">Nie wzmacniaj pozycjonera</a>

Mikroformaty i wyszukiwarki

Dla wielu osób ważną informacją jest wpływ mikroformatów na wyszukiwarki i pozycje na listach wyników wyszukiwania. Dzięki mocnemu poparciu programistów mikroformaty są już czynnie stosowane przez duże firmy. Internetowi giganci jak Yahoo!, Google aktywnie uczestniczą w popularyzacji mikroformatów. Yahoo! udostępnia obiekty hCalendar i hCard w serwisie upcoming.org, obiekty hCard na Yahoo! Local, XFN oraz Geo na witrynie Flickr. Natomiast Google używa hCard w rezultatach wyszukiwania serwisu Mapy, dzięki czemu ułatwia zapamiętywanie adresów.

Wspomniane wyżej wyszukiwarki oferują już możliwość wyszukiwania treści utworzonej według standardów licencjonowania Creative Commons przy zastosowaniu mikroformatu rel-licence. Ponieważ coraz więcej treści publikuje się z użyciem mikroformatów, wyszukiwarki będą niejako zmuszone dokonać zmian w algorytmach wyszukiwania. Ciekawym udogodnieniem jest wyszukiwarka mikroformatów udostępniona przez Technorati, która daje możliwość wyszukiwania wydarzeń, informacji kontaktowych, recenzji.

Dodatkowe informacje

Microformats: More Meaning from Your Markup
Microformats – empowering your markup for Web 2.0
Sumo! A Generic Microformats Parser For JavaScript
Microformats
Microformats – cheat-sheet
Microformats-cheat-sheet (pdf, png)
Microformats.cheatsheet.pdf

Related posts

• The Small Calendar (0)
• The Small Calendar – Windows gadżet (3)
• Info (0)
• CSS minify – combine: zmniejszanie i łączenie plików css w jeden (0)
• The Small Calendar – jQuery + PHP w praktyce (5)

CSS Sprites jest techniką łączenia wielu obrazków w jeden, których wyświetlanie następuje poprzez odpowiednie wypozycjonowanie obrazu tła. Wbrew temu co mogłaby wskazywać nazwa, nie są to małe obrazki, lecz jeden duży złożony wielu mniejszych.

Na czym polega CSS Sprites

Jak zostało wspomniane w wypisie, technika ta polega na połączeniu wielu obrazków wykorzystywanych na stronie w jeden. Wyświetlanie tych obrazków polega na ustawieniu w CSS atrybutu background-position na odpowiednią wartość „przesuwającą” cały obraz, tak aby w polu widzenia był ten właściwy. Przeglądarka pobiera cały obrazek i wyświetla jego fragmenty w odpowiednich miejscach, zamiast pobierać każdy mały obrazek oddzielnie.

Nie jest to nowa technika, właściwe można powiedzieć, że jest starsza niż sam CSS. Jej pochodzenie wywodzi się ze starych 8-bitowych gier komputerowych. Komputer wczytywał do pamięci jeden obraz, a wyświetlał tylko akurat potrzebny fragment. Było to o wiele szybsze rozwiązanie niż ciągłe pobieranie nowych obrazków.

Najczęściej wybieranym zastosowaniem CSS Sprites (często nieświadomie) jest efekt CSS Rollover polegający na podmianie obrazka tła po najechaniu kursorem.

Niedogodności i trudności w stosowaniu

Na początku wspomnę o kilku niedogodnościach związanych ze stosowaniem tego rozwiązania. Warto mieć je na uwadze, aby już od początkowych etapów tworzenia nie wpaść w pułapki, aby uniknąć konieczności przerabiania wszystkiego od początku.

Obraz całościowy CSS Sprites tworzony jest z wielu mniejszych obrazków, zwykle w programach graficznych (Adobe® Photoshop®, Gimp), zatem wszelkie zmiany w wyglądzie strony będą wymagały dokonania przeróbek w obrazku całościowym. Ma to istotne znaczenie w przypadku korzystania z usług zewnętrznych grafików.

W przypadku zastosowania elementu tła, które jest powielane po jednej ze współrzędnych element ten powinien być jedynym elementem w rzędzie/kolumnie (w zależności od osi powielania). Dobrze to widać w przypadku YouTube (na niżej załączonym obrazku).

Waga obrazka CSS Sprites może być czasem większa niż sumaryczna waga obrazków składowych (nie jest to regułą, bo przykładowo przy małych ikonkach zajmuje mniej).

Do momentu załadowania całego obrazka żadne elementy graficzne nie będą wyświetlane, jedynie formatowanie zawarte w css.

Nadmiarowość kodu HTML.
@KrzyHu dzięki za przypomnienie

Plusy techniki

Niewątpliwym plusem tej techniki jest zmniejszenie liczby żądań HTTP.
Podczas ładowania strony przeglądarka pobiera wszystkie zewnętrzne elementy (skrypty js, arkusze css, obrazki, etc). Każdy taki element jest oddzielnym żądaniem HTTP, których jednoczesna ilość jest ograniczona. Zatem czym więcej tych elementów, tym dłużej trwa ładowanie strony (nawet w przypadku szybkiego łącza). Skompletowanie całej strony, przy czystym cache, trwa o wiele dłużej niż by wskazywała na to jej waga.
Wpływa na to ilość żądań, ale także czas potrzebny na nawiązanie połączenia, przetworzenie żądania przez serwer, jednym słowem cała komunikacja. Jeśli na stronie stosujemy 30 ikon, to ich złączenie w jeden spowoduje spadek ilości żądań aż o 29 sztuk!

Stosowanie techniki CSS Rollover z wykorzystaniem CSS Sprites powoduje, że nie pojawia się „miganie” podczas podmiany obrazka. Często w przypadku stosowania „standardowego” podejścia w momencie najechania kursorem na element znika on całkowicie aż do momentu pobrania obrazka dla stanu :hover

Ewentualna zmiana kolorystyki strony, ikon, nagłówków etc pociąga za sobą zmianę tylko jednego pliku graficznego. Popularna, jeszcze nie tak dawno, zmiana kolorystki strony na odcienie szarości (żałoby narodowe) w przypadku CSS Sprites jest wręcz banalna.

Tworzenie własnego CSS Sprites

Aby nie być gołosłownym proponuję stworzenie stylu komunikatów opartego właśnie o CSS Sprites. Wynik działania będzie (przypominał) następujący:

Tworzenie obrazka CSS Sprites

Abyśmy sami nie musieli tworzyć ikonek postaramy się odszukać gotowe zestawy. Wybrałem Function Icon Set. Wymagają tylko dwóch przeróbek: dodania literki „i” do jednej z nich, oraz zmiany wielkości z 48×48px na 32x32px; Tworzymy obraz o wymiarach 128x32px, ustawiamy prowadnice co 32px, wklejamy zmniejszone ikonki, dopisujemy literkę i przy tej niebieskiej.

Tworzenie kodu HTML

Struktura komunikatów będzie następująca:

<div class="success">
    <span class="sprite_ico"></span>
    Komunikat success
 
</div>

Czemu taka konstrukcja? Otóż aby nie pokazać pozostałych ikonek musimy nadać elementowi stałą szerokość, a nie możemy zrobić tego dla samego div. Kolejne komunikaty różnią się jedynie klasą div’a.

Tworzenie kodu CSS

Najważniejsza część tworzenia CSS Sprites – odpowiednie formatowanie, które da możliwość wykorzystania jednego obrazka do wyświetlenia różnych ikon w zależności od klasy komunikatu.

div.info, div.success, div.warning, div.error {
    border: 1px solid;
    display: block;
    font-size: 14px;
    margin: 5px;
    padding: 10px;
}
div.info .sprite_ico, div.success .sprite_ico, div.warning .sprite_ico, div.error .sprite_ico {
    background: url("img/css_sprite_32.png") no-repeat;
    display: inline-block;
    height: 32px;
    margin-right: 10px;
    vertical-align: middle;
    width: 32px;
}
div.info {
    color: #00529B;
    background-color: #BDE5F8;
}
div.info .sprite_ico {
    background-position: 0px 0px;
}
div.success {
    color: #4F8A10;
    background-color: #DFF2BF;
}
div.success .sprite_ico {
    background-position: -32px 0px;
}
div.warning {
    color: #9F6000;
    background-color: #FEEFB3;
}
div.warning .sprite_ico {
    background-position: -64px 0px;
}
div.error {
    color: #D8000C;
    background-color: #FFBABA;
}
div.error .sprite_ico {
    background-position: -96px 0px;
}

Krótkie omówienie
Pierwszy blok tworzy główne ramy klas komunikatów. Drugi tworzy wspólne style dla elementów span, które będą zawierały w sobie ikonki. Tu dołączamy obrazek tła, który utworzyliśmy w poprzednim kroku. Nie podajemy pozycji obrazka, gdyż będziemy je ustawiać dla każdej klasy oddzielnie. Tutaj definiujemy tylko brak powielania obrazu tła.
Następnie w kolejnych parach tworzone są szczegóły dla danego komunikatu. Kolor czcionki, obramowania dla div, oraz pozycja tła obrazka dla ikonki(!).

div.success {
    color: #4F8A10;
    background-color: #DFF2BF;
}
div.success .sprite_ico{
    background-position: -32px 0px;
}

Najważniejszą opcją w tym kodzie, związaną z css sprites, jest background-position: -32px 0px;, która określa pozycję obrazu tła względem górnego lewego narożnika. Jest to tak jakby margines dla danego obrazu tła.

Ujemny pierwszy parametr przesunie obraz w lewo (strzałka czerwona), ujemny drugi (strzałka zielona) – do góry. Wartości dodatnie przesuną obraz odpowiednio w prawo i w dół.

Pozycję tła w poszczególnych klasach przesuwamy co 32px, tyle ile zawiera szerokość ikonki. Często dobrym rozwiązaniem jest ustawienie ikon w większych odstępach, dzięki temu nawet niedokładne wypozycjonowanie w css nie będzie widoczne, poza tym uniknie się różnic w interpretacji w poszczególnych przeglądarkach. Dla naszego przykładu układ co 32px jest wystarczający.

Voila!

Wykorzystanie CSS Sprites w tak prostym przykładzie dało nam kilka korzyści:

1. Jedno żądanie http zamiast czterech w celu pobrania ikon
2. Wszystkie ikonki w jednym miejscu – w przypadku przenosin nie zgubimy żadnej
3. Zmianę kolorystyki można dokonać edytując tylko jeden obrazek + css

Wykorzystanie CSS Sprites przez znane serwisy

Co może jeszcze przemawiać za zastosowaniem tej techniki? Wystarczy spojrzeć na serwisy z ogromną ilością odwiedzin, wiele z nich już od dawna korzysta z CSS Sprites. Są to m.in:

YouTube.com

Onet.pl

Apple.com

Pobieranie

css_sprites.zip

Related posts

• CSS minify – combine: zmniejszanie i łączenie plików css w jeden (0)
• Info (0)
• The Small Calendar (0)
• The Small Calendar – Windows gadżet (3)
• The Small Calendar – jQuery + PHP w praktyce (5)

Główne różnice

Możliwości rozwiązań

Możliwości rozwiązań może być tyle ilu programistów. Wszystko zależy od tego, czego wymagamy od projektu. Możemy skorzystać z prostego dołączania klas w jednej lokalizacji, rozbudować o większą liczbę lokalizacji, dodać możliwość zastosowania różnych postfiksów, sprawdzania czy klasa/interfejs zostały już wywołane, dodać możliwość przeszukiwania katalogów w głąb, stworzyć mapę klas i interfejsów i odwoływać się do nich jak do zwykłej tablicy. Możliwości jest na prawdę wiele.

Wersja super lite __autoload()

Jeśli mamy do czynienia z małą stroną, możemy ujednolicić nazewnictwo klas, przechowywać je w jednej lokalizacji i użyć najprostszego dołączania:

set_include_path($DOCUMENT_ROOT. 'classes');
// lub 
ini_set('include_path', $DOCUMENT_ROOT. 'classes');
function __autoload($classname) {
  require_once($classname.".class.php");
}

Jednak powyższe rozwiązanie może zostać wykorzystane tylko w bardzo prostych projektach, nie daje żadnej elastyczności, możliwości konfiguracji, zmian, narzuca szereg ograniczeń.

Wersja bardziej rozbudowana __autoload()

W przypadku korzystania chociażby z interfejsów w nazewnictwie interfejsA.interface.php poprzednia metoda już nie zadziała (zresztą nie zadziała w prawie żadnym wypadku poza podstawowym ). W pierwszej kolejności możemy rozszerzyć lokalizacje o dodatkowe katalogi:

set_include_path(
        get_include_path()
        .PATH_SEPARATOR."/classes/"
        .PATH_SEPARATOR."/interfaces/"
        .PATH_SEPARATOR."/modules/"
);

Dzięki temu pliki klas będą dołączane z wielu lokalizacji, nie tylko z jednej. Problem pojawia się w momencie próby użycia klasy, której nie ma. Rozszerzmy funkcję __autoload o dodatkowe funkcjonalności:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

function __autoload($classname){
    try {
        if (class_exists($classname, false) || interface_exists($classname, false)){
            return;
        }
        $class = explode('_', strtolower(strval($classname)));
        $deeps = count($class);
        $file = 'class';
        for ($i=0;$i<$deeps;$i++){
            $file .= '/'.$class[$i];
        }
        $file .= '.class.php';
        if (!file_exists($file) || !is_readable($file) || class_exists($classname, false) || interface_exists($classname, false)){
            throw new Exception('Class cannot be found ( ' . $classname . ' )');
        }else{
            require_once($file);
        }
    } catch (Exception $e){
        echo $e->getMessage()."\n";
    }
}

Dodaliśmy kilka funkcjonalności:

• Sprawdzanie czy klasa bądź interfejs zostały już zdefiniowane
• Następnie dodaliśmy możliwość zagnieżdżania klas w głąb katalogów. Wymaganiem tutaj postawionym jest nazewnictwo klas z użyciem dolnego podkreślenia jako separatora katalogu
  katalog_nazwaKlasy.class.php lub katalog__podkatalog_nazwaKlasy.class.php
• Sprawdzenie czy plik istnieje, czy jest możliwy do odczytu

Jednak nadal nie możemy przechwycić wyjątku blokiem try-catch, zatem przy stosowaniu tej metody wymagana jest pewność iż wszystkie wywoływane klasy mają swoje odpowiedniki w plikach.

Wersja lite spl_autoload_register()

Sam proces dołączania będzie identyczny jak wersji lite dla __autoload() z tą różnicą, że wywołanie loadera będzie inne.

1
2
3
4
5
6
7
8
9

function classLoader($classname){
    $file = $DOCUMENT_ROOT.'/class/'.$classname.'.class.php';
    if (file_exists($file) && is_readable($file) && !class_exists($classname, false)){
        require_once($file);
    }else{
        throw new Exception('Class cannot be found ( ' . $classname . ' )');
    }
}
spl_autoload_register('classLoader');

Możliwość korzystania z funkcji w spl_autoload_functions nie jest jedyną, którą mamy do dyspozycji. Równie dobrze, możemy skorzystać z klas. Prosty przykład na pokazanie zasady funkcjonowania:

class VLoader{
    public static function autoload($classname){
        // kod
    }
}
spl_autoload_register(array('VLoader', 'autoload'));

Wersja bardziej rozbudowana spl_autoload_register()

Możemy utworzyć oddzielne funkcje (metody) dla rożnych rodzajów danych. Dzięki temu, możemy dać zewnętrznym aplikacjom czy programistom możliwość utworzenia własnej funkcji automatycznego ładowania plików klas. Jest to rozwiązanie lepsze od poprzednich, nie ogranicza programistów piszących dodatki do naszej aplikacji do ścisłego przestrzegania narzuconej przez nas struktury i nazewnictwa klas.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

$extensions = array('.php','.class.php','.interface.php');
$ext = implode(',',$extensions);
spl_autoload_register(null, false);
spl_autoload_extensions($ext);
 
function classLoader($classname){
    $extensions = array('.php','.class.php','.interface.php');
    if (class_exists($classname, false)){ return; }
    $class = explode('_', strtolower(strval($classname)));
    $deeps = count($class);
    $file = $DOCUMENT_ROOT;
    for ($i=0;$i<$deeps;$i++){
        $file .= '/'.$class[$i];
    }
    foreach ($extensions as $ext){
        $fileClass = $file.$ext;
        if (file_exists($fileClass) && is_readable($fileClass) && !class_exists($classname, false)){
            require_once($fileClass);
            return true;
        }
    }
    return false;
}
spl_autoload_register('classLoader');
/* kod funckji interfaceLoader */
spl_autoload_register('interfaceLoader');

W powyższym przykładzie wyzerowaliśmy wszystkie zarejestrowane autoloadery, następnie ustawiliśmy listę rozszerzeń możliwych do dopisania do plików. Dalej zmodyfikowaliśmy lekko poprzednią funkcję do ładowania klas. Jak widać na końcu wystarczy dopisać własną funkcję, która będzie przeszukiwać wskazany katalog i dołączyć ja poprzez spl_autoload_register(). Dzięki temu, zewnętrzny programista może uzupełnić aplikację przez swoje klasy, które zostaną automatycznie dodane.

Nie jest to rozwiązanie bez wad. Wymaga napisania przez takiego programistę swojego loadera, w dodatku nastręcza trudności w jego dołączeniu. Rozwiązaniem byłoby nakazanie stworzenia funkcji loadera w oddzielnym pliku oraz umieszczenia go w określonej lokalizacji, w celu późniejszego dołączenia go do aplikacji. Co w rezultacie narzuca kolejne ograniczenia, czasem nie mniejsze niż te, których chcieliśmy uniknąć na początku.

Problemy i wymagania

Zbierając wszystkie trudności napotkane w procesie tworzenia autoloadera tworzy nam się lista problemów i wymagań, których spełnienie da nam szansę stworzenia takiego mechanizmu, który będziemy mogli z łatwością wykorzystywać w różnych projektach.

1. Uniknięcie konieczności użycia require, require_once
2. Możliwość umieszczania klas w dowolnych lokalizacjach
3. Połączenie z zewnętrznymi bibliotekami
4. Szybkość działania
5. Łatwość użycia
6. Automatyzacja procesu
7. Dołączanie tylko wymaganych klas
8. Brak bądź niewielkie ograniczenia w nazewnictwie plików

Spora ta lista Jak możemy z tego wybrnąć? Otóż wymienione w treści wpisu metody nie będą miały zastosowania do tak zaawansowanych wymagań. Przemyślmy sytuację:
Ad. 1. Łatwizna, stosując system autoloadera automatycznie pozbywamy się tej konieczności. Jeżeli tylko spełnimy ograniczenia systemu.
Ad. 2. Abyśmy mogli umieszczać klasy w wielu lokalizacjach możemy dodawać ścieżki do nich w autoloaderze, bądź utworzyć kolejne funkcje dla nowych lokalizacji. Ewentualnością może być przeskanowanie wszystkich możliwych lokalizacji w poszukiwaniu wybranego pliku.
Ad. 3. W przypadku zewnętrznych bibliotek, zwykle wystarczy wywoływać główną klasę, która już później sama dołącza potrzebne jej dodatkowe klasy, interfejsy. Tak czy inaczej, jakoś musimy się dostać do tej głównej klasy. Pół biedy, jeśli główny plik klasy jest oddzielnie, a w katalogu pozostałe pliki, możemy wtedy taką paczkę wrzucić do katalogu klas i sprawa załatwiona. Gorzej natomiast z tymi, które są porozrzucane wszystkie w jednym folderze. Wtedy musimy przemyśleć opcję dodawania listy lokalizacji.
Ad. 4. Szybkość działania jest bardzo ważnym elementem w każdym systemie, szczególnie aplikacji internetowej. W tym punkcie występuje tu w dwóch aspektach: szybkość aplikacji, szybkość pracy z danym rozwiązaniem. Drugie rozumienie nie jest takie ważne, gdyż występuje tylko w momencie pisania aplikacji, ewentualnie w procesie aktualizacji i poprawek. Natomiast szybkość działania aplikacji ma już ogromne znaczenie. Gdyby przy każdej odsłonie strony, narzut na autoloaderze wynosił 1 sec, pomnożone przez tysiące odsłon generowałoby drastyczne spadki wydajności. Zatem nacisk na szybkość działania, wydajność jest bardzo ważny. Ważniejszy niż łatwość kodowania, szybkość pisania kodu, przenośność.
Ad. 5. Łatwość użycia, implementacji, przenośności kodu. Łatwość kodowania ma znaczenie dla użyteczności klasy od strony programisty. Dobrze jeśli ten, podczas kodowania nowych części aplikacji nie musiał dodatkowo pisać dodatkowych funkcji autolodera, bądź pilnować dodawania ścieżek do już istniejących. Najwygodniejszym rozwiązaniem jest informacja, że jest stosowany autoloader i nie trzeba zajmować się dodatkowym kodem, obsługą ładowania plików.
Ad. 6. Automatyzacja w tym przypadku występuje w rozumieniu braku konieczności ręcznych zmian w kodzie, dodawania ścieżek do katalogów, dopisywania własnych funkcji dla autoloadera. Aby to osiągnąć musimy stworzyć system na tyle uniwersalny, aby był w stanie sam dostosować się do różnic w aplikacji.
Ad. 7. Może wydawać się dziwne, jednak niektórzy proponują rozwiązanie, które przeskanuje wybrane lokalizacje i dołączy wszystkie pliki, tak aby ich późniejsze wykorzystanie ograniczyć tylko do utworzenia nowego obiektu.
Ad. 8. Nazewnictwo plików powinno być czytelne i wskazujące, jeśli nie jednoznaczne. Chociażby ze względu na wygodę programowania, późniejszej kontroli plików i kodu. Zatem jakieś wymagania musimy założyć. Może to być dodanie postfiksu class.php, interface.php, nazwa klasy w nazwie pliku. Dobrze by było, gdyby można było łączyć klasy w jeden plik, aby klasy na stale związane ze sobą mogły być zapisane w jednym pliku.

Rozwiązanie

Jedynym sensownym rozwiązaniem, spełniającym powyższe, jest utworzenie mapy klas zawierających parę kluczy nazwa klasy => ścieżka
Aby sprostać wymaganiom szybkości działania mapa taka powinna być tworzona tylko w przypadku zmian w układzie plików, bądź przenosin aplikacji do nowej lokalizacji, a w pozostałym czasie należy korzystać z już utworzonej mapy. Możemy ja cachować jako zserializowaną tablicę, zapisywać jako pliki ini, czy w inny, szybki i wygodny sposób. Dzięki temu najbardziej absorbująca praca jaką jest przeszukiwanie katalogów będzie wykonana bardzo rzadko, a w przypadku uruchomienia finalnej wersji aplikacji prawdopodobnie prawie nigdy.
Kwestią do rozwiązania pozostaje tylko na jakiej zasadzie tworzona by była taka mapa.

Pomysłów jest kilka:
• Stałe nazewnictwo w formie nazwa_klasy.class.php, nazwa_interfejsu.interface.php skanowanie plików, wybieranie z nazwy członu przed .class.php lub interface.php, i zapisywanie tej nazwy do tablicy.
  Wymaga stałego nazewnictwa, po jednej klasie, interfejsie na plik.
• Przeskanowanie plików, otworzenie każdego z nich, wyszukanie w nim ciągu inicjującego klasę lub interfejs i ten ciąg doda do tablicy.
  Ma to swoje wady: konieczność otworzenia plików, przeszukania ich zawartości. Takie działanie na pewno nie wpłynie pozytywnie na czas pracy skryptu. Jednak ma też kilka zalet. Uniezależnia od konkretnego nazewnictwa, lokalizacji plików, daje możliwość umieszczenia kilku klas w jednym pliku. Warto oczywiście trzymać się jakiejś sensownej, logicznej struktury.

W drugiej części przedstawię próbę utworzenia takiego sytemu automatycznego logowania.

Related posts

• Log class – klasa loggera zdarzeń cz 3 (0)
• Log class – klasa loggera zdarzeń cz 2 (1)
• Log class – klasa loggera zdarzeń (2)
• Pamięciożerny WordPress – memory exhausted, zbyt mały memory_limit (5)
• Info (0)

Related posts

• The Small Calendar (0)
• The Small Calendar – Windows gadżet (3)
• The Small Calendar – jQuery + PHP w praktyce (5)
• Info (0)
• Śledzik na nasza-klasa.pl – Metoda na usunięcie (2)