WordCamp Poznań 2011

Stowarzyszenie ABSOLWENCI NA WALIZKACH w swoim kanale na Youtube.com umieściło nowe nagrania z zeszłorocznego WordCamp’a. To już druga seria nagrań z tej konferencji, w tej pojawiło się także moje wystąpienie. W pierwszej serii pojawiły się prezentacje czterech prelegentów: Arek Stęplowski, Michał Maćkowiak, Maciej Kuchnik, Magdalena Bród. Druga okazała się trochę bardziej rozbudowana: Szymon Skulimowski, Marcin Wolak, Marcin Pietrzak, Bartosz Bilicki, Paweł Pela oraz Robert Mikołajuk.

Zapraszam do zapoznania się z moją relacją z tego wydarzenia, a także do obejrzenia nagrań z wielu ciekawych wystąpień.

Moje wystąpienie

Tematem mojej prezentacji było tworzenie wtyczek, główne punkty to m.in:

• Wstęp o WordPress i o sile wtyczek
• Podstawy wtyczek
• Organizacja pracy, zasady tworzenia, podstawowe błędy
• Praktyczny przykład tworzenia wtyczki od podstaw
• Integracja z panelem administracyjnym

Moje wystąpienia (playlista)

Hardware

Ze sprzętem zawsze mam problem, bo podchodzę do wyboru bardzo pragmatycznie. Porównuję konfiguracje, parametry, nadaje im wagi, wybieram konkretny model w wyniku długotrwałych porównań. Tak też było ostatnim razem, ważna była wielkość matrycy, i7 ze wsparciem dla AES i wirtualizacji, szybki dysk, niska cena . Excel w ruch i voila, wybrałem ASUS’a:
ASUS X43S: 14″, i7-2670QM, 2,26GHz, 8GB RAM, 750 GB SATA 7200 obr., Radeon HD 6730M 2048 MB DDR3 (pamieć własna).
Dlaczego nie Apple? Nie chcę zaczynać flame, ale jakoś nie czuję, żeby MacOSX był wart 3 000zł.

W zestawie myszka bezprzewodowa Logitech M525 oraz monitor Philips Brilliance 225PL – z możliwością ustawienia w „trzech wymiarach”, bez dodatkowej klawiatury – brak miejsca na biurku, ale już nie tak długo ulegnie to zmianie.

Do tego stary laptop ma Win7 x64 do testów pod Windowsem.

Telefon – Nokia e52. Smartfony jakoś mnie nie przekonują, z założenia telefon ma służyć do dzwonienia i pisania sms. Ten ma jeszcze bardzo dobrą nawigację, Opera mobile do szybkiego sprawdzenia czegoś na necie (Wi-Fi), putty w razie konieczności nagłej interwencji na serwerze, czytnik kodów QR, własna appka typu ToDoList (html+javascript). Możliwości duże, telefon mały, bateria trzyma do dwóch tygodni.

Software

• system operacyjny – Linux Fedora 16, poprzednio Windows 7 oraz Linux Mint, wcześniej jeszcze czysty Debian. Debian nadal stoi na VM, jeden Mint na najstarszym Laptopie.
• application stack – PHP 5.3, Apache2, MySQL – HeidiSQL (wine) – tak jak zauważył Radek Heidi jest po prostu świetne, czasem jeszcze MySQL Workbench
• framework – Kohana
• IDE – Eclipse, jakoś NetBeans nie przypadł mi do gustu, przyzwyczajenie wygrywa, PHPStorm w testach trial’a wypadło bardzo dobrze, prawdopodobnie niedługo kupię
• edytor tekstowy – genialny, niezastąpiony Notepad++, w konsoli nano
• IM – Pidgin, z kilkoma wtyczkami jest na prawdę przyjazny, poza XMPP obsługuje też Twitter’a, IRC’a, no i Gadu-Gadu, do tego Skype – ten linuxowy jest taki świetnie minimalistyczny, o niebo przyjaźniejszy niż na Win
• launcher – po prostu ALT+F2
• przeglądarka – główna Opera – subiektywnie od dawien-dawna jest najwygodniejsza do codziennej pracy, poza tym wiadomo: Firefox, Chrome, Krusader, IE8 na VM z WinXP, IE9 na drugim laptopie z Win7
• terminal – standardowy z ustawionymi kolorami, bash
• menadżer pakietów – yum oraz apper
• VM – VirtualBox, chociaż powoli rozglądam się za alternatywą, bo VBox potrafi być irytujący
• FTP – FileZilla, Krusader, w niektórych przypadkach SSHFS
• mail – Thunderbird, dla niektórych kont webowy GMail, wcześniej TheBat
• muzyka – Amarok, ale brakuje mi prostego Winampa czy ALSong
• video – VLC, MPlayer, najbardziej przywiązany byłem do SubEdit’a oraz Media Player Classic
• pakiet biurowy - LibreOffice, na Win Office 2007 – co by nie mówić, jest to świetny program
• prezentacje – generalnie nie robię , ostatnio na Wordcamp’a w HTML+CSS – engine z Google, poza tym Impress lub PowerPoint

Z rzeczy , o których Radek nie pisał:

• monitoring serwera - munin, phpmemcached. Dodatkowo jeśli mogę to tu podpiąc – conky rysujący najważniejsze rzeczy na bieżąco
• zarządzanie projektami – repozytorium git i svn, spięte razem z Redmine
• manager plików - krusader lub mc, na Win – TotalCommander. Nie wyobrażam sobie pracy pomiędzy okienkami
• grafika – Photoshop, FastStone Image Viewer, Gwenview
• rss – czytnik Google, wcześniej w Operze
• snippets – JCC (jCodeCollector), opisowe – Gnote
• ważne dane - TrueCrypt

Podsumowanie

Jeśli chcecie poznać jakieś szczegóły, sposoby pracy czy interesuje Was coś więcej – piszcie śmiało w komentarzach.
Przekazuję piłeczkę dalej, kto następny chętny do opisania swojego środowiska pracy?

src: http://http.cdnlayer.com

Ochrona własnego adresu poczty elektronicznej stała się „oczywistą oczywistością”. Niezliczone spam-boty przeczesują Internet w poszukiwaniu adresów email, które później zalewane są falą niechcianej poczty. Niestety często jesteśmy zmuszeni udostępnić swój adres. Wpisany zwykłym tekstem, a tym bardziej dodany do linku z mailto stanie się bardzo szybko łupem spamerów. O ile na formę upublicznienia adresu w obcych serwisach zwykle nie mamy wpływu, o tyle mamy w przypadku własnych. Jako, że potrzeba jest matką wynalazku, postanowiłem stworzyć własne rozwiązanie. Połączenie CSS i JavaScript przyniosło oczekiwany skutek.

Założenia protectEmails

Tworząc założenia starałem się patrzeć na problem możliwie z wielu stron. Najważniejszymi punktami są:

1. Czytelność dla użytkownika końcowego
2. Ochrona przed podstawowymi mechanizmami spam-botów
3. Łatwość modyfikacji wyglądu
4. Prostota w stosowaniu

Czytelność dla użytkownika końcowego

Przede wszystkim chciałem uniknąć rozwiązań typu info [at] example.com, które poza tym, że już dawno nie chronią przed botami, to dodatkowo są męczące dla użytkowników. Wszystkie odmiany tego rozwiązania charakteryzują się tą samą trudnością w pozyskaniu maila przez odwiedzającego stronę – podmiana fragmentów, łatwość pomyłki. Tworząc swoje rozwiązanie, chciałem, aby adres email był widoczny w zwykłej formie, po prostu jako info@example.com.

Dodatkowo, uważam, że ważne jest też zachowanie standardowej funkcjonalności linku, który otwiera domyślny program pocztowy klienta.

Ochrona przed podstawowymi mechanizmami spam-botów

Rozwiązanie musi być w jakiś sposób unikatowe, tak aby standardowe funkcje spamerów nie były w stanie takiego adresu wyłuskać. Oczywiście, nie da się zabezpieczyć w 100%, zawsze znajdzie się ktoś, kto napisze dedykowane rozwiązanie. Jednak dużą część automatów można wyeliminować.

Poszukując gotowych rozwiązań spotkałem się z dużą ilością pseudo-zabezpieczeń. Nie dość, że utrudniają one życie użytkownikom, to dodatkowo wystawiają adresy na pastwę botów, np.:

<a href="mailto:info@example.com">info [ at ] example.com</a>

<a href="mailto:info@example.com">info [ at ] example [dot] com</a>

Lub po prostu utrudniają życie, np.:

<span class="email">info [ at ] example [dot] com</spam>

W przypadku powyższego istnieją rozwiązania oparte na JavaScript, które na podstawie klasy modyfikują znacznik span, przerabiając go na klikalny adres email. Jest to dość dobre rozwiązanie z jednym mankamentem – adres jest czytelny dla botów.

Łatwość modyfikacji wyglądu

Oczywiście chroniony adres musi być w pełni modyfikowalny przy pomocy CSS, zatem odpadają dziwne rozwiązania oparte na obrazkach zamiast znaku @. Chciałem też uniknąć dużego zagnieżdżania znaczników, jak w proponowanym przez niektórych rozwiązaniu:

<a href="mailto:info@example.com">
    <span class="n">info</span><span class="at">@</span><span class="d">example.com</span>
</a>

Czy modyfikacji powyższego, poprzez zamianę kolejności znaczników i taką modyfikację CSS, aby elementy zostały ustawione w odpowiedniej kolejności:

<a href="mailto:info@example.com">
    <span class="at">@</span><span class="n">info</span><span class="d">example.com</span>
</a>

Prostota w stosowaniu

Wraz z wzrostem bezpieczeństwa zwykle rośnie też poziom skomplikowania, co niestety, przekłada się na utrudnienia w stosowaniu. Niestety te rozwiązanie nie zadziała w powiązaniu ze standardowymi edytorami WYSIWYG. Oczywiście nic nie stoi na przeszkodzie, aby dopisać odpowiednie modyfikacje.

W obecnej wersji wstawienie zabezpieczonego adresu email sprowadza się w zasadzie do dwóch zadań: wpisanie znacznika z adresem oraz podpięcia pluginu (oczywiście pamiętając do dołączeniu biblioteki jQuery):

<span data-user="admin" data-domain="example.com" class="protect-emails" />

$(document).ready(function(){
    $('span').filter('.protect-emails').protectEmails();
});

Chcąc uniezależnić się od JavaScript lub zachować jedynie podstawową funkcjonalność, należy też załączyć odpowiedni fragment CSS (domyślnie plugin dodaje go sam):

.protect-emails:after {  content: attr(data-user) '@' attr(data-domain); }

Zasada działania

Pierwsza część rozwiązania skupia się na zaprezentowaniu adresu użytkownikowi, nawet jeśli JavaScript jest wyłączony. Dzieje się to za pomocą prostego zabiegu wykorzystującego CSS, a dokładnie właściwości content wspartej wykorzystaniem attr

Dzięki ustawieniu odpowiedniego ostylowania, element html, który domyślnie nic nie wyświetla, pokazuje użytkownikowi poprawnie wyglądający email:

<span data-user="admin" data-domain="example.com" class="protect-emails" />

.protect-emails:after {
    content: attr(data-user) '@' attr(data-domain);
}

Przykład 1:

Kolejnym elementem jest dodanie „klikalności”. Jest to już rozwiązanie oparte na JavaScript. Nie ma tu czego opisywać, po prostu dla wybranej akcji hover czy click skrypt podmienia znacznik span.

Przykład 2:

Korzyści

• Niewątpliwie największą korzyścią jest ukrycie adresu email przed botami, przynajmniej do czasu, stworzenia dedykowanego rozwiązania . Nawet jeśli takie powstanie, wtyczkę można łatwo przerobić pod własne unikalne rozwiążanie.
• Zachowuje się pierwotną funkcjonalność.
• Adres jest czytelny dla użytkowników nawet w przypadku wyłączonego JavaScript. Można go skopiować, wkleić w programie pocztowym, nie trzeba przepisywać [at] na @
• Dwuetapowe zabezpieczenie może być wykorzystane tylko w części, zapewniając podstawowy poziom ochrony.

Poznań, 14 stycznia 2012 r – konferencja meet.js summit, choć minął już tydzień od tego wydarzenia, ja wciąż jestem pod wrażeniem. Konferencja była niejako podsumowaniem lokalnych spotkań meet.js. Są to niekomercyjne meetup’y front-endowców, na których prezentowane są prelekcje na tematy webowe (front-endowe), jts HTML, JS, CSS.

Organizacja

Konferencję zorganizowali Damian Wielgosik wraz z GTUG Poznań oraz Startup-It.pl. Obsługa uczestników przebiegała szybko i sprawnie, technicy pod ręką, wszyscy chętni do pomocy. Chylę czoła za jakość organizacji tego darmowego(!) eventu.

Miejsce: Centrum Wykładowe Politechnki Poznańskiej – duży, przestronny, nowoczesny budynek, sale wykładowe, sporo wolnego miejsca na korytarzach. Dzięki temu prezentacje na były łatwiejsze w odbiorze, a duża przestrzeń na korytarzach spokojnie pomieściła te ponad 250 osób. Nawet podczas przerw kawowych czy lunchu.

Gadżety: dużym zaskoczeniem była duża ilość gadżetów i nagród. Sponsorzy spisali się świetnie. Były naklejki meet.js i Front-Trends, smycze od Mozilli oraz Allegro Group, zniżki 10€ na konferencję Front-Trends 2012. Poza tym do zgarnięcia były kubki i koszulki Google, naklejki HTML5, koszulki Mozilli, Nodejitsu i HTML5, pendrive’y i smycze Nokii. Każdy dostał koszulkę, przy tym wartym wspomnienia jest, że można było zaprojektować własną lub zaproponować tekst do chmurki z komiksu. Wykazując się taką inwencją brało się udział w konkursie, w którym główną nagrodą był iPod!

To nie koniec, były ciastka, a do nich kawa i/lub herbata (woda dla unikających używek ). Był też lunch (3 dania do wyboru), tak jak reszta – darmowy. Po całodniowej konferencji nastąpiło zasłużone afterparty (dzięki Cognifide), na którym każdy z uczestników otrzymał kupony do wykorzystania w barze.

Przebieg i prezentacje

Całość rozpoczęła się od 10 rano (rejestracja od 9) a zakończyła następnego dnia w godzinach porannych w Alcatraz Club. Prezentacje były przeplatane z przerwami kawowymi oraz lunch’em. Był zatem czas na zmianę sali oraz przygotowanie dawki kofeiny.

Z racji dużej liczby prezentacji (18) całość została podzielona na 2 ścieżki. Osobiście nie przepadam za takimi rozwiązaniami bo czasem jest bardzo trudno się zdecydować, którą prelekcję wybrać. Z tego względu nie uczestniczyłem we wszystkich w których bym chciał. Na szczęście całość wystąpień była nagrywana, zatem jest szansa, że zobaczę te, które niestety ominąłem.

Prelekcje były różne, na różnym poziomie przygotowania merytorycznego i technicznego oraz językowego (wszystkie po angielsku). Niektórzy wypadli świetnie, inni nieco gorzej.

Po tygodniu, mocno w pamięci zostały prezentacje, m.in:

• Marek Stępień: The Web is Open. Let’s keep it that way – ciekawie o inicjatywie Open Web
• Andrzej Mazur: CSS4 and the future of CSS – o nowinkach w przyszłych specyfikacjach CSS
• Kamil Trebunia: Game design patterns – live coding (oparty na revertach commitów), plus świetne komentarze Now we have more time to enjoy the children dying., Dying is something you can subscribe to
• Lukas Nowacki: Team building and development practices – o ulepszaniu programowania w stylu Tarantino jak przystało na prawdziwych reservoir devs
• Aleksander Dąbrowski: Write once – use twice (Back & Front) – o nie duplikowaniu, o nieduplikowaniu kodu
• Zef Hemel: Avoiding JavaScript Pitfalls Through Tree Hugging – o przytulaniu się do drzewa
• Bartosz Szopka: CSS 3D Transforms – za pomocą CSS 3D transforms – impress.js jest na prawdę impressive
• Patrick H. Lauke: HTML5 multimedia – browser-native video, audio and canvas – o audio i viedeo z niesamowitymi demami z wykorzystaniem kamery internetowej, elementu video i JavaScript

Podsumowanie

Bardzo szybko zebrane prezentacje są do obejrzenia na profilu G+ GTUG’a, z niecierpliwością czekam na nagrania.

Świetna impreza, miła atmosfera, sporo znajomych osób. Oczywiście była reprezentacja forum.kohanaphp.pl – pzdr @mck, @nrm). Był też @chemikpl, którego poznałem osobiście na ostatnim WordCamp’ie i inni. Kolejny raz pojawiły się okazje do osobistego poznania tych, których kojarzyło się z neta, pozdr @wokiebpl, @singlespl oraz @end3r.

Inne relacje: end3r, ferrante, pavelloz, michalbe, jPortal.pl, ChemikPIL

Przygotowanie na najwyższym poziomie, pomimo iż cała impreza była darmowa. Jeszcze raz, wielkie brawa.

WordCamp Poznań 2011

W dniach 9-10 grudnia w Poznaniu odbyła się kolejna konferencja z serii WordCamp. Jak sama nazwa wskazuje jest to konferencja poświęcona WordPressowi. WordCampy są organizowane na całym świecie przez użytkowników WordPressa i dla użytkowników WordPressa. Poznańska edycja była organizowana przy aprobacie WordCamp Central co niosło ze sobą kilka korzyści, ale też ogrom więcej pracy, z czym dzielnie poradził sobie Paweł. Grono zainteresowanych było bardzo duże. Tematy prelekcji zróżnicowane, każdy mógł znaleźć coś dla siebie.

Tym razem, uczestniczyłem w konferencji jako prelegent. W długiej, nudnej, mocno technicznej prezentacji opowiedziałem o tworzeniu wtyczek: Tworzenie wtyczek – oszczędzaj swój czas (o tym w dalszej części).

Organizacja

Organizacyjnie event przygotowany był świetnie. Biorąc pod uwagę cenę wejściówki (40zł) poziom przerósł moje oczekiwania. Był pakiet dla każdego uczestnika, poza tym kawa, herbata, ciastka, woda i soki. Oczywiście nie zabrakło niespodzianek – pizza każdego dnia, RedBulle i middle-party w klubie Charyzma – gdzie Paweł przekazał uczestnikom multum kuponów na alko w barze.

Technicznie też było dobrze, jeden projektor trochę niedomagał, ale były dwa, więc to nie był żaden problem, nagłośnienie w porządku, baterie w mikrofonach wymieniane na bieżąco. Jako, że całość odbywała się na uczelnianej sali wykładowej warunki do prezentacji były bardzo dobre.

Nie obyło się bez losowania nagród w postaci książek, zniżek (99%), licencji na wtyczki.

Przebieg

Impreza rozpoczęła się właściwie w czwartek od preparty, dzięki której mogliśmy się dobrze zintegrować. The Brothers Pub było idealnym wyborem, niepowtarzalny klimat, niesamowita Orzechówka (Jurek Ty to potrafisz namówić ), a te ciastka…

Następnego dnia wystartowaliśmy z prezentacjami. Ich przebieg możecie prześledzić w Agendzie. Prelekcje były różne, na różnym poziomie, skierowane do różnych odbiorców, na pewno każdy znalazł taką, która go zainteresowała.

Przerwy po każdym wykładzie dawały szansę omówienia tematu na świeżo, dopytania się o szczegóły, wymiany poglądów.

Po zakończeniu pierwszego dnia przyszedł czas na relaks i zabawę w świetnym gronie w klubie Charyzma. Nauczeni doświadczeniem, nie mogliśmy zakończyć wieczoru bez Orzechówki.

Następnego dnia, pomimo tego, że zaplanowaną godzina rozpoczęcia była 10, z racji bardzo udanego wieczoru nie była możliwa do zrealizowania. Na szczęście większość dała radę dotrzeć na 10:30, zatem udało się rozpocząć bez większych opóźnień.

Prezentacje

Wśród wielu interesujących prezentacji kilka szczególnie zwróciło moją uwagę. Ciekawa prezentacja Arka Informacja Rulez!, która natchnęła mnie kilkoma pomysłami na wtyczki (jeśli jeszcze nie istnieją). Bardzo podobała mi się prezentacja Michała o błędach HTML5, wyróżniała się profesjonalnym przygotowaniem i przeprowadzeniem, przy okazji dała mi motywację, aby wreszcie przepisać swojego bloga na html5. Ogromny zestaw wtyczek przedstawiła Magda w swojej prezentacji o optymalizacji i pozycjonowaniu (czekam na slajdy). Na koniec dnia praktyczne informacje przedstawione w dwóch prezentacjach: o szablonach-dzieciach oraz o frameworkach w WordPress dały wiedzę o tym jak pracować wydajniej i szybciej.

Drugiego dnia najbardziej do gustu przypadła mi prezentacja Pawła o zarabianiu na WordPressie. Dużo praktycznej, popartej doświadczeniem wiedzy o pracy freelancera i młodego przedsiębiorcy. Świetnie przeprowadzona, bardzo motywująca. Bartek przypomniał o tym, że strona oparta na WordPress to nie tylko unikalny front-end, ale także mocno kastomizowany panel administracyjny. Dobrym dopełnieniem mojej prezentacji było wystąpienie Konrada o lukach bezpieczeństwa.

Moje wystąpnie

Tematem mojej prezentacji było tworzenie wtyczek. W planie prezentacji był krótki wstęp o samym WordPress, o tym, że to właśnie system wtyczek jest jedną z głównych przyczyn jego funkcjonalności. Następnie pokazałem czym są wtyczki oraz na czym się opierają. Przed stworzeniem pierwszej wtyczki zaprezentowałem kilka ważnych rzeczy z zakresu organizacji pracy nad wtyczkami, zasad tworzenia, kilka zdań o podstawowych błędach. Dalej, pokazałem jak tworzyć wtyczki od podstaw, przechodząc przez najprostszą aktywność, aż do bardziej zaawansowanych integracji wtyczki z WordPressem. Pokazałem jak zaszczepić wtyczkę w kilku miejscach admin-panelu (kokpit, adminbar, menu, contextual help). Pokazałem jak obsłużyć bazę danych oraz system ustawień. Na koniec, po połączeniu wszystkich elementów, powstała dedykowana konferencji wtyczka.

Mam nadzieję, że prezentacja była ciekawa, interesująca. Czekam na komentarze, opinie, propozycje usprawnień.

Oczywiście udostępniam całą prezentację wraz z poszczególnymi etapami tworzenia wtyczki. Samą prezentację najlepiej przeglądać korzystając z przeglądarki wspierającej CSS3, w innych działanie może nie być do końca takie, jak powinno.

Test przecięć

Do wykonania testu przecięć potrzebna będzie tablica ze współrzędnymi badanego punktu, oraz tablica współrzędnych (podanych w kolejności) wierzchołków wielokąta. Tablice te przekażemy w konstruktorze.
Ważną rzeczą jest sprawdzenie czy ostatni i pierwszy element tablicy wierzchołków jest taki sam, czyli czy figura się zamyka. Jeśli nie to w konstruktorze uzupełniamy tablicę kopię pierwszego elementu.

Kolejnym etapem jest sprawdzenie czy punkt należy do do jednego z boków wielokąta.
Jeśli powyższe sprawdzenie się nie powiedzie rozpoczynamy właściwą część, tj. sprawdzenie przecięć. W tym celu tworzymy półprostą, tutaj równoległą do osi OX, rozpoczynającą się w sprawdzanym przez nas punkcie, a kończącą się w dowolnym punkcie poza ostatnim punktem wielokąta (najbardziej wysuniętym w kierunku grotu osi OX).

Po utworzeniu półprostej przechodzimy do właściwego badania przecięć. W pierwszej kolejności pod młotek idzie sprawdzenie zawierania się półprostej w jednym z boków wielokąta (rys. 3, rys. 4 w poprzednim wpisie). Aby to sprawdzić musimy przetestować czy kolejne 2 punkty wielokąta należą do tej półprostej. Jeśli tak się zdarzy to sprawdzamy, z którym przypadkiem mamy do czynienia (czy punkty leżą po tej samej, czy po przeciwnych stronach półprostej). Jeśli po przeciwnej – zwiększamy licznik przecięć.

Jeśli półprosta nie zawiera się w boku wielokąta trzeba sprawdzić czy przypadkiem nie przecina jego wierzchołka. Aby to osiągnąć sprawdzamy czy wierzchołek zawiera się w półprostej a zarazem czy poprzedni i następny już nie. Jeśli sprawdzanie się powiedzie to pozostaje rozpoznać, z którą wersją mamy do czynienia (rys. 5, rys. 6 w poprzednim wpisie). W zależności od wyniku, albo zwiększamy licznik przecięć, albo nie. Jeśli natomiast warunek zawierania się wierzchołka nie zostanie spełniony sprawdzamy czy bok wielokąta przecina półprostą, a zarazem poprzedni wierzchołek jej nie przecina, jak również następny.

inPolygon.class.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
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184

/**
 * @author Robert *Vokiel* Mikołajuk vokiel@vokiel.com http://blog.vokiel.com
 * @copyright (c) 2011 Robert Mikołajuk
 */
class inPolygon {
	/**
	 * @var	array	$point	Współrzędne prawdzanego punktu
	 */
	protected $point;
	/**
	 * @var	array	$raypoint	Punkt końcowy półprostej od $this->point równoległej do osi OX
	 */
	protected $raypoint;
	/**
	 * @var	array	$polygon	Tablica współrzędnych punktów
	 */
	protected $polygon;
	/**
	 * @var	int	$crosses	Liczba przecięć odcinków
	 */
	protected $crosses = 0;
 
	/**
	 *
	 * @param array $point
	 * @param array $polygon
	 */
	public function __construct($point,$polygon){
		$this->point = $point;
		$this->raypoint = array('x' => ($point['x']+1), 'y' => $point['y']);
		$this->polygon = $polygon;
 
		// jeśli ostatni element nie jest tożsamy z pierwszym, dodajemy go na końcu tablicy
		if ( $this->polygon[0] != $this->polygon[count($this->polygon)-1]){
			array_push($this->polygon,$this->polygon[0]);
		}
	}
 
	/**
	 * Sprawdzenie czy punkt zawiera się w obszarze
	 * @return bool
	 */
	public function check(){
		// sprawdzenie czy punkt nie należy do jednego z boków wielokąta
		for ($i=0; $i<count($this->polygon); $i++){
			if ( $this->pointCrossEdge($this->polygon[$i],$this->polygon[$i+1],$this->point) ){
				return true;
			}
		}
		if ( $this->setRaypoint() ){
			$this->edgeCross();
		}
		if ($this->crosses % 2 == 1){
			return true;
		}
		return false;
	}
 
	/**
	 * Wyznaczenie punktów półprostej równoległej do osi OX
	 * Współrzędna X punktu P1 musi być większa od największej wpsółrzędnej X wśród wszystkich wierzchołków wielokąta
	 */
	protected function setRaypoint(){
		for ($i=0; $i<count($this->polygon); $i++){
			if ( $this->polygon[$i]['x'] > $this->raypoint['x'] ){
				$this->raypoint['x'] = $this->polygon[$i]['x'];
			}
		}
		$this->raypoint['x'] = $this->raypoint['x']+1;
		return true;
	}
 
	/**
	 * Wyliczenie ilości przecięć półprostej przez odcinki boków wielokąta
	 * Półprosta zostaje przeprowadzona od badanego punktu w prawo,
	 * aż za najbardziej wysunięty w prawo punkt wielokąta
	 */
	protected function edgeCross() {
		// wstawienie na koniec tablicy punktów wielokąta drugiego wierzchołka - dla ułatwienia obliczeń
		array_push($this->polygon,$this->polygon[1]);
		for ($i=1; $i<(count($this->polygon)-1); $i++){
			// Prosta P-P1 zawiera się w boku wielokąta W($i,$i+1) 
			if ($this->pointCrossEdge($this->point, $this->raypoint, $this->polygon[ $i ]) &&
				!$this->pointCrossEdge($this->point, $this->raypoint, $this->polygon[ ($i+1) ])
			){
				// Punkt wcześniejszy wielokątea i dalszy leżą po przeciwnej stronie prostej P-P1 - ilość przecięć: 1
				if ($this->sng( $this->det( $this->point, $this->polygon[ $i ], $this->polygon[ ($i-1) ] ) ) !=
					$this->sng( $this->det( $this->point, $this->polygon[ $i ], $this->polygon[ ($i+1) ]))
				){
					$this->crosses++;
				}
			} else { // Prosta P-P1 nie zawiera się w boku wielokąta
				// Prosta P-P1 zawiera wierzchołek W($i)
				if ($this->pointCrossEdge( $this->point, $this->raypoint, $this->polygon[ $i ] ) &&
					$this->pointCrossEdge( $this->point, $this->raypoint, $this->polygon[ ($i-1) ] ) &&
					!$this->pointCrossEdge( $this->point, $this->raypoint, $this->polygon[ ($i+1) ] )
				){
					// Sprawdzenie położenia wierzhołków sąsiadujących z wierzchołkiem W($i)
					if ($this->sng( $this->det( $this->point, array('x'=>($this->point['x']+1),'y'=>$this->point['y']), $this->polygon[ ($i-1) ] ) ) !==
						$this->sng( $this->det( $this->point, array('x'=>($this->point['x']+1),'y'=>$this->point['y']), $this->polygon[ ($i+1) ] ) )
					){
						$this->crosses++;
					}
				} else {
					// Sprawdzenie czy prosta P-P1 przecina bok wilokąta W($i,$i+1)
					if ( $this->edgeCrossEdge( $this->polygon[ $i ], $this->polygon[ ($i+1) ], $this->point, $this->raypoint) &&
						(!$this->pointCrossEdge( $this->point, $this->raypoint, $this->polygon[ ($i-1) ] ) ||
							(
								!$this->pointCrossEdge( $this->point, $this->raypoint, $this->polygon[ ($i-2) ] ) &&
								!$this->pointCrossEdge( $this->point, $this->raypoint, $this->polygon[ ($i-3) ] )
							) && (
								$this->sng( $this->det( $this->point, array('x'=>($this->point['x']+1),'y'=>$this->point['y']), $this->polygon[ ($i-1) ] ) ) !==
								$this->sng( $this->det( $this->point, array('x'=>($this->point['x']+1),'y'=>$this->point['y']), $this->polygon[ ($i-2) ] ) )
							)
						) && !$this->pointCrossEdge( $this->point, $this->raypoint, $this->polygon[ ($i+1) ] )
					){
						$this->crosses++;
					}
				}
			}
		}
	}
 
	/**
	 *
	 * Sprawdzenie czy $check_point należy do odcinka ($start_point|$stop_point)
	 * @param array $start_point	Punkt startowy odcinka
	 * @param array $stop_point 	Punkt końcowy odcinka
	 * @param array $check_point	Sprawdzany punkt
	 */
	protected function pointCrossEdge($start_point,$stop_point,$check_point){
		return $this->det($start_point, $stop_point, $check_point) == 0 &&
			min( $start_point['x'], $stop_point['x'] ) <= $check_point['x'] &&
			$check_point['x'] <= max( $start_point['x'], $stop_point['x'] ) &&
			min ( $start_point['y'], $stop_point['y'] ) <= $check_point['y'] &&
			$check_point['y'] <= max( $start_point['y'], $stop_point['y'] );
	}
 
	/**
	 * Sprawdzenie czy odcinki $start_point_1-$stop_point_1 i $start_point_2-$stop_point_2 przecinają się
	 * @param array $start_point_1	Punkt startowy pierwszego odcinka
	 * @param array $stop_point_1	Punkt końcowy pierwszego odcinka
	 * @param array $start_point_2	Punkt startowy drugiego odcinka
	 * @param array $stop_point_2	Punkt końcowy drugiego odcinka
	 */
	protected function edgeCrossEdge($start_point_1,$stop_point_1,$start_point_2,$stop_point_2){
		return ($this->sng( $this->det($start_point_1,$stop_point_1,$start_point_2) ) != $this->sng( $this->det($start_point_1,$stop_point_1,$stop_point_2) ) &&
				$this->sng( $this->det($start_point_2,$stop_point_2,$start_point_1) ) != $this->sng( $this->det($start_point_2,$stop_point_2,$stop_point_1) ) ||
				$this->pointCrossEdge($start_point_1,$stop_point_1,$start_point_2) ||
				$this->pointCrossEdge($start_point_1,$stop_point_1,$stop_point_2) ||
				$this->pointCrossEdge($start_point_2,$stop_point_2,$start_point_1) ||
				$this->pointCrossEdge($start_point_2,$stop_point_2,$stop_point_1)
		);
	}
 
	/**
	 * Wyznacznik macierzy kwadratowej stopnia 3
	 * @param array $start_point
	 * @param array $stop_point
	 * @param array $check_point
	 */
	protected function det($start_point,$stop_point,$check_point){
		return $start_point['x'] * ( $stop_point['y'] - $check_point['y'] ) + $stop_point['x'] * ( $check_point['y'] - $start_point['y'] ) + $check_point['x'] * ( $start_point['y'] - $stop_point['y']);
		/* druga metoda
		return ($start_point['x'] * $stop_point['y'] + $stop_point['x'] * $check_point['y'] + $check_point['x'] * $start_point['y'] - $check_point['x'] * $stop_point['y'] - $start_point['x'] * $check_point['y'] - $stop_point['x'] * $start_point['y']);
		*/
	}
 
	/**
	 * Określenie znaku liczby
	 * @param int $x	Liczba
	 * @return int $x
	 */
	protected function sng($x){
		if ( $x == 0 ){
			return 0;
		} else if ( $x > 0){
			return 1;
		} else {
			return -1;
		}
	}
 
}// end of inPolygon class

Na koniec przydałoby się napisać jakieś demo. Wkrótce się pojawi.

Geofencing

Ostatnio mam dość mało czasu na pisanie na blogu. Jest to związane przede wszystkim z lenistwem, a w drugiej mierze z mojego udziału w jednym, ciekawym projekcie. Z owym projektem wiąże się dzisiejszy wpis. W aplikacji tej zaplanowaliśmy ciekawą funkcjonalność: geofencing, czyli:

Geofencing is a term utilized primarily in the corporate world that refers to the practice of limiting mobile employees to a specific geographic location by tracking their whereabouts via the technology of a global positioning system (GPS).

W telegraficznym skrócie polega to na wyznaczeniu bezpiecznego obszaru, po którym może poruszać się urządzenie z zainstalowanym modułem GPS.

Zastosowań jest wiele, począwszy od śledzenia pracowników, po zabezpieczenia przesyłek. Przy wszystkich zastosowaniach pojawia się ta sama potrzeba sprawdzenia, czy raportowany z urządzenia GPS punkt znajduje się w obrębie zdefiniowanego obszaru, czy jest już poza nim. Możliwości sprawdzenia przynależności punktu do wielokąta jest wiele.

Przynależność do figury prostej

W najprostszym przypadku prostokąta sprowadza się do prostego, matematycznego porównania współrzędnych wierzchołków i sprawdzanego punktu. Nie wymaga skomplikowanych obliczeń, tym bardziej geometrycznych. Niestety sposób mało przydatny w realnym zastosowaniu. Kazać użytkownikom rysować prostokąty wzdłuż trasy Warszawa – Moskwa może kwalifikować się na nagrodę Worst UX. Dzielenie narysowanego skomplikowanego wielokąta na małe prostokąty, następnie sprawdzanie przynależności punktu do każdego z nich też nie wydaje się optymalnym rozwiązaniem.

Metody dla dowolnego wielokąta

Przeszukując otchłanie Internetu można napotkać rozważania nad różnymi metodami na rozwiązanie tego zagadnienia. Kilka z nich zebrał Eric Haines w artykule Point in Polygon Strategies.

źródło: erich.realtimerendering.com

Suma kątów

Ta metoda polega na zliczeniu sumy kątów liczonych od sprawdzanego punktu do poszczególnych wierzchołków z bokiem wychodzącym z tego wierzchołka. Jeśli suma tych kątów będzie bliska zeru to punkt będzie poza wielokątem, w przeciwnym wypadku będzie do niego należał. Niestety z powodu wykorzystania funkcji trygonometrycznych, konieczności wyznaczenia prostej od każdego wierzchołka do szukanego punktu i wyliczenia dla nich kątów, jest to metoda bardzo powolna.

Metoda trójkątów

źródło: erich.realtimerendering.com

Kolejna, dość obciążająca metoda, polega na podzieleniu wielokąta na trójkąty składowe. Następnie sprawdza się dla każdego z tak utworzonych trójkątów, czy punkt leży w jego obrębie. Jeśli mamy do czynienia z wielokątem wypukłym pierwsze trafienie automatycznie przerywa proces sprawdzania. W celu przyśpieszenia algorytmu można posortować utworzone trójkąty względem wielkości powierzchni lub długości boków. Zwiększy to szansę na wcześniejsze trafienie dopasowania, zmniejszając przy tym liczbę powtórzeń pętli.
Dla wielokątów niewypukłych należy przejść przez wszystkie trójkąty, przy tym zliczyć trafienia. Jeśli ich liczba jest nieparzysta, oznacza to, że punkt zawiera się w obrębie figury.

CC-BY-SA-3.0,2.5,2.0,1.0; GNU by Wojciech mula

BSP-tree

Za pomocą tej metody można opisywać wielokąty i szybko stwierdzać przynależność punktu. Proces tworzenia jest niestety dość wolny, zatem powinno się je stosować, gdy występuje sprawdzanie wielu punktów do jednego wielokąta.
Korzystając z tej metody bada się, po której stronie linii na której leży odcinek zapisany w węźle znajduje się testowany punkt. W zależności od tego sprawdza się lewe, bądź prawe poddrzewo. Badanie rozpoczyna się od korzenia. Procedura kończy się wraz z natknięciem się na puste wskazanie.

Test przecięć

W związku z tym postanowiłem sprawdzić czy istnieje już gotowe rozwiązanie w PHP. Takowego nie znalazłem, ale pojawiło się kilka artykułów, które pomogły mi zweryfikować moją metodę.

Wielokąt wypukły

Jeśli mamy do czynienia z wielokątem wypukłym jest troszeczkę łatwiej. Wystarczy poprowadzić półprostą ze sprawdzanego punktu w wybranym kierunku do punktu położonego poza ostatnim, najdalej wysuniętym w tym kierunku, wierzchołkiem wielokąta. Następnie wystarczy policzyć ilość przecięć półprostej z bokami figury (rys. 2). Jeśli liczba ta będzie nieparzysta – punkt znajduje się wewnątrz wielokąta, jeśli parzysta lub jest równa 0 – punkt znajduje się poza wielokątem.

Dowolny wielokąt

W przypadku dowolnego wielokąta trzeba liczyć się z pojawieniem się figury wklęsłej (najprawdopodobniej takie będą pojawiały się najczęściej). Tutaj postępowanie jest trochę inne.

W pierwszej kolejności dobrze jest sprawdzić, czy sprawdzany punkt należy do jednego z boków lub wierzchołków figury. Jeśli nie, to należy poprowadzić półprostą, równoległa do którejś osi (np OX), poprowadzonej ze sprawdzanego punktu, do punktu położonego poza ostatnim, najdalej wysuniętym w kierunku grotu osi, wierzchołkiem wielokąta. Sprawdzany punkt będzie leżał wewnątrz wielokąta, jeśli przeprowadzona z niego półprosta przecina jego boki nieparzystą ilość razy.

Przy wielokątach wklęsłych należy rozpatrzyć kilka szczególnych przypadków:

Półprosta zawiera się w jednym z boków wielokąta

W drugiej sytuacji (rys. obok), gdy linie przez które przechodzi półprosta będą po jej przeciwnych stronach zliczamy takie przecięcia jako jedno.
Tutaj podobnie jak powyżej, jeśli wierzchołki dążą do połączenia obejmując sprawdzany punkt w obręb wielokąta (w naszym przypadku po lewej stronie sprawdzanego punktu), to otrzymujemy nieparzystą liczbę przecięć. Jeśli natomiast złączą się poza punktem (w naszym przypadku po stronie grotu osi OX), to nastąpi przynajmniej jeszcze jedno przecięcie, zatem suma przecięć będzie parzysta – punkt poza wielokątem.

Półprosta przechodzi przez wierzchołek wielokąta

Implementacja

Kiedy mamy już wszystko przemyślane, można przystąpić do implementacji rozwiązania w PHP. Jako, że ten wpis jest już i tak bardzo długi, rozwiązanie przeniosłem do kolejnego: Klasa PHP rozwiązująca problem przynależności punktu do wielokąta.

PHPCon Poland

PHPCon Poland to ogólnopolskie spotkanie konferencyjne programistów i entuzjastów języka PHP, organizowane siłami wolontariuszy internetowych z całego kraju pod egidą zarządu stowarzyszenia Polska Grupa Użytkowników Linuxa (PLUG). Jej celem jest integracja środowisk osób związanych z PHP oraz środowiska biznesowego zainteresowanego praktycznym wykorzystaniem tego języka w projektach komercyjnych.

PHPCon PL to świetna okazja, by nawiązać nowe kontakty, wymienić doświadczenia i pomysły na przyszłość. Impreza ta jest skierowana zarówno dla profesjonalistów, jak i osób, które dopiero od jakiegoś czasu zajmują się PHP. Dzięki zróżnicowanej agendzie, konferencja daje możliwość ugruntowania lub poszerzenia swojej wiedzy w wybranych tematach.

PHPCon PL ma tak jak co roku charakter niekomercyjnego spotkania sympatyków PLUG. Dla osób, które z różnych przyczyn potrzebują faktury, odbywa się – już zupełnie komercyjnie – spotkanie o tej samej nazwie, w tym samym miejscu i czasie, ale organizowane i fakturowane przez firmę obsługującą klientów biznesowych.

PHPCon Poland 2011

Przygotowania do PHPCon ruszyły pełną parą. To już druga edycja konferencji PHPCon PL. Na blogu Mateusza Kamińskiego oraz u Przemka „eRiza” Pawliczuka oraz u Tomka „ZyXa” Jędrzejewskiego możecie poczytać jak było w roku 2010.

Co nam przyniesie tegoroczna edycja? Przede wszystkim warto wspomnieć o gościu specjalnym, którym w tym roku jest Lorna ‘LornaJane’ Mitchell. LornaJane jest znaną konsultantką PHP, webdeveloperką, publikatorką i prelegentką z Leeds w UK.

Czas i miejsce

PHPCon 2011 odbędzie się w dniach 21 – 23 października w miejscowości Mąchocice Kapitulne (rejon Gór Świętokrzyskich). Miejscem wystąpień będzie położony niedaleko Kielc Hotel Przedwiośnie ***.
Zapisy uczestników zostaną otwarte po 15 lipca.

Call For Papers

Do 15 lipca zbierane są propozycje wystąpień. W związku z tym, organizatorzy zachęcają wszystkich, którzy mają ciekawy temat do zaprezentowania, do zgłoszenia swojej propozycji. Najciekawsze są oczywiście tematy nietuzinkowe, trudne do znalezienia w podręcznikach czy internecie. Są już pierwsze zgłoszenia z zagranicy, zatem można się spodziewać, że w tym roku poziom merytoryczny będzie na pewno wyższy, niż w roku ubiegłym.
CFP można nadsyłać korzystając z formularza propozycji prelekcji na stronie http://www.phpcon.pl/2011/pl/aglista

Do tych co wybierają się na PHP Con 2011 – do zobaczenia w październiku!

CSS Is Awesome by Steven Frank (http://stevenf.tumblr.com/)

Pisząc aplikacje internetowe najczęściej opieramy się na podstawowych, często występujących selektorach CSS. Są to głównie selektory id, atrybutu class oraz potomka, plus pseudo-selektory, np :hover. Pliki .css w wielu projektach są pisane dość zachowawczo. Warto zatem zapoznać się z większą liczbą możliwości, które czasami mogą usprawnić pisanie reguł, ograniczych ich ilość, zmniejszyć objętość kodu.

Najczęściej stosowane selektory

1. Uniwersalny
2. Typu
3. Identyfikatora
4. Klasy

Łączniki, selektory atrybutów

1. Potomek
2. Dziecko
3. Rodzeństwo
4. Selektor atrybutu

Pseudo-klasy, pseudo-elementy

1. Pseudo-klasa :first-child
2. Pseudo-klasy linków :link i :visited
3. Dynamiczne pseudo-klasy :hover, :acitve, :focus
4. Pseudo-klasy języka :lang
5. Pseudo-elementy :first-line, :first-letter, :before i :after

Najczęściej stosowane selektory

Uniwersalny

Selektor uniwersalny pasuje do wszystkich elementów (każdego typu), zastosowany najprostszy metaznak * (asterisk) oznaczający dowolne dopasowanie.

Jeśli selektor uniwersalny jest jednym z kilku składników wyrażenia, to można go pominąć. *.mojaklasa będzie równoważne z .mojaklasa.

Obecnie stosuje się go najczęściej w przypadku dyrektyw resetujących Reset CSS.

* {margin: 0; padding: 0; border: 0;}

<strong>Ten element zostanie dopasowany</strong>
<div>Ten element też zostanie dopasowany</div>

Typu

Selektor typu dopasowuje elementy drzewa DOM po nazwie. Wybiera wszystkie elementy danego typu w całym drzewie dokumnetu.

div {margin: 10px; padding: 10px; border: 1px solid silver;}

<div>Ten element zostanie dopasowany</div>
<strong>Ten element nie zostanie dopasowany</strong>

Identyfikatora

Selektor identyfikatora poprzedza się znakiem #. Pobiera on element o id równym podanemu ciągowi znaków po #. Z definicji w dokumencie może występować tylko jeden element o danym id. Zatem selektor identyfikatora pobiera tylko jeden element.

#identyfikator { margin: 10px;}

<strong id="identyfikator">Ten element zostanie dopasowany</strong>
<div>Ten element nie zostanie dopasowany</div>

Klasy

Selektor klasy w przeciwieństwie do selektora identyfikatora nie musi być unikalny, zatem swoim zasięgiem może obejmować więcej niż jeden element. Dopasowuje elementy na podstawie atrybutu class. Selektor poprzedza się znakiem . Jest niezależny od typu czy identyfikatora.

.klasa { margin: 10px;}

<strong class="klasa">Ten element zostanie dopasowany</strong>
<div>Ten element nie zostanie dopasowany</div>

Wartym uwagi jest fakt łączenia kilku selektorów klasy dla jednego elementu. Działanie to ma na celu wyłuskanie tylko tych elementów, które zawierają wszystkie z podanych klas.

.zolty.niebieski { color: green;}

<strong class="zolty niebieski">Ten element zostanie dopasowany</strong>
<strong class="zolty">Ten element nie zostanie dopasowany</strong>
<strong class="niebieski">Ten element nie zostanie dopasowany</strong>

Łączniki, selektory atrybutów

Wszystkie poniższe selektory z wyjątkiem ostatniego są przez niektórych określane łącznikami, czyli selektorami powstałymi poprzez połączenie ze sobą dwóch lub więcej selektorów podstawowych.

Łączenie następuje poprzez zastosowanie znaków białych (spacje) znaku > oraz +.

Potomek

Selektor potomka jest bardzo często stosowany. Zdarza się, że zastosowany selektor potomka jest uznawany po prostu za następujące po sobie selektory typu. Selektor ten oddziela selektory typu znakiem białym, pobiera elementy, które są potomkami elemenu pasującego do poprzedniego selektora. Jest przy tym niezależny od klas i identyfikatorów, zatem przy jego pomocy można ostylować wiele elementów bez dodawania zbytecznych atrybutów. Oczywiście istnieje możliwość łączenia selektorów typu wraz z selektorami klas i identyfikatorów.

Poniższy przykład dopasuje element p będący potomkiem elementu div.

div p {color: #ff0000; }

<div>
 
Ten element zostanie dopasowany
<ul>
	<li>
 
Ten element też zostanie dopasowany</li>
</ul>
</div>

Dziecko

Selektor dziecka bywa często niedoceniany lub mylony z selektorem potomka. Różnica wbrew pozorom jest znacząca: selektor dziecka odnosi się tylko do bezpośredniego potomka. Znakiem stosowanym w tym selektorze jest >.

div > p {color: #ff0000;}

<div>
 
Ten element zostanie dopasowany
<ul>
	<li>
 
Ten element nie zostanie dopasowany</li>
</ul>
</div>

Rodzeństwo

Selektor rodzeństwa lub inaczej zwany selektorem sąsiednim tworzony jest poprzez zastosowanie znaku + jako łącznika. Dopasowuje on element, który jest rodzeństwem pierwszego podanego elementu (oba mają tego samego rodzica), pierwszy z nich występuje przed drugim. Stosuje się go jako pseudo-klasę, którą można by nazwać :second-child

li + li {coloer: #ff0000; }

<div>
<ul>
	<li>Ten element nie zostanie dopasowany</li>
	<li>Ten element zostanie dopasowany</li>
</ul>
</div>

Selektor atrybutu

Selektor atrybuty jest zbliżony do selektora identyfikatora i klasy, z tego powodu znajduje się w tej grupie. Dopasowuje on elementy na podstawie wartości wybranych atrybutów lub po prostu ich występowania. Możliwości dopasowania są 4.

Dopasowuje elementy, które posiadają dany atrybut, bez znaczenia jego zawartości:

a[href] {text-decoration: underline;}

<a href="http://blog.vokiel.com">Ten element zostanie dopasowany</a>
<a id="tennie">Ten element nie zostanie dopasowany</a>

Dopasowuje elementy, które posiadają dany atrybut, a jego wartość jest zgodna z określoną:

a[rel=follow] {text-decoration: underline;}

<a rel="follow" href="http://blog.vokiel.com">Ten element zostanie dopasowany</a>
<a rel="nofollow" href="http://google.pl">Ten element nie zostanie dopasowany</a>

Dopasowuje elementy, które posiadają dany atrybut, a jedną z jego wartości oddzielonych spacjami jest ta podana. Różni się od = tym, że nie sprawdza dokładnego dopasowania całej wartości atrybutu, a wyszukuje w wartościach oddzielonych spacjami:

a[rel~=copyleft] {text-decoration: underline;}

<a rel="copyright copyleft copyeditor" href="http://blog.vokiel.com">Ten element zostanie dopasowany</a>
<a rel="copyright" href="http://google.pl">Ten element nie zostanie dopasowany</a>

Dopasowuje elementy, które posiadają dany atrybut, a jego wartość jest listą wartości rozdzielonych znakiem minus. Lista ta rozpoczyna się podaną wartością. Stosuje się do dopasowania kodów języka, określonych w atrybucie lang (zobacz :lang.

p[lang|=en] {text-decoration: underline;}

Ten element zostanie dopasowany
 
Ten element zostanie dopasowany
 
Ten element zostanie dopasowany
 
Ten element nie zostanie dopasowany

Pseudo-klasy, pseudo-elementy

Jak sama nazwa wskazuje pseudo-klasy i pseudo-elementy są pesudo selektorami. Nie dopasowują elementów na podstawie nazwy, atrybutów czy też zawartości. Ich dopasowanie odbywa się niejawnie. Mają one za zadanie dać możliwość wyboru elementów, bez konieczności opakowywanie ich w dodatkowe atrybuty.

Pseudo-klasa :first-child

Dopasowuje element, który jest pierwszym dzieckiem innego elementu. Zastosowań tej pseudo-klasy może być bardzo wiele. Często mając różnego rodzaju listy chcemy wyszczególnić pierwszy element, tworząc menu na liście zdarza się, że pierwszy element ma być delikatnie inaczej ostylowany, czy pierwszy paragraf w tekście.

li:first-child { border-left: 1px solid silver; }

<ul>
	<li>Ten element zostanie dopasowany</li>
	<li>Ten element nie zostanie dopasowany</li>
</ul>

Wraz z CSS3 doszły nowe pseudo-elementy: :last-child oraz :nth-child

Pseudo-klasy linków :link i :visited

Do tej kategorii zalicza się dwie pseudo-klasy: :link oraz :visited. Ich ostylowanie zależy od przeglądarki, pierwszy z nich oznacza linki, które jeszcze nie zostały odwiedzone przez klienta, drugi oznacza te, które już klient odwiedził.

:link {color: #blue;}

:visited {color: #navy;}

Dynamiczne pseudo-klasy :hover, :acitve, :focus

Dynamiczne pseudo-klasy, jak sama nazwa wskazuje, są nadawane dynamiczne podczas wykrywania interakcji z użytkownikiem. Obsługują takie akcje jak: najechanie kursorem myszy na element :hover, aktywność danego elementu – w przypadku użycia myszki oznazcza, że przycisk został naciśnięty ale jeszcze nie zwolniony. Ostani z trójki: :focus obowiązuje dla aktywnego elementu, czyli np pola formularza, w którym aktualnie znajduje się kursor myszy oczekujący na wpisywane przez użytkownika znaki.

a:hover{ text-decoration: underline; }

<a href="http://blog.vokiel.com">Ten element zostanie podkreślony po najechaniu na niego kursorem myszki.</a>

a:active{ font-weight: bold; }

<pre lang="html"><a href="http://blog.vokiel.com">Ten element zostanie pogrubiony po wciśnięciu klawisza myszki (do czasu zwolnienia).</a>

input:focus{ background: #ff0000; }

<input type="text" value="Tło zrobi się czerwone po umieszczeniu kursora w jego wnętrzu" />

Pseudo-klasy języka :lang

Tą pseudo-klasą oznacza się elementy zawierające tekst w innym języku. Umożliwa inne ostylowanie elementów w zależności od języka. Często stosuje się do ustawienia cudzysłowów. Dopasowanie odbywa się podobnie jak w przypadku selektora atrybuty użytego z tyldą (nie tylko dokładne dopasowanie, ale także wyszukanie w ciągu). Identyfikator języka nie musi być poprawną nazwą języka, ale musi być wypełniony.

:lang(fr) > p { quotes: '« ' ' »' }

:lang(de) > p { quotes: '»' '«' '\2039' '\203A' }

Pseudo-elementy :first-line, :first-letter, :before i :after

Pseudo-elementy zachowują się jak zwykłe znaczniki CSS – dają możliwość ostylowania części zawartosci elementów na podstawie właściwości, których określenie następuje dynamicznie. Pierwszy z nich :first-line odnosi się do zawartości pierwszej linii danego paragrafu. Ważną informacją w tym miejscu jest lista ograniczeń, ten pseudo-element może zmieniać tylko niektóre parametry: font-, color-, background-, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height.

p:first-line {font-weight: bold;}

Ta pierwsza linia będzie pogrubiona,
następne już nie, bo nie zostaną objęte
znacznikiem :first-line

Jeśli pierwszy wiersz miałby zostać rozbity na kilka linii, a chcielibyśmy aby całe pierwsze zdanie było inaczej ostylowane możemy posiłkować się dodaniem pseudo-atrybutu w kodzie, dla danego elementu:

Ta pierwsza linia będzie pogrubiona,
aż do tego miejsca, następne już nie bo nie zostaną
objęte znacznikiem :first-line

Należy przy tym uważać na znaki rozpoczynające nowe linie. Przykładowo w kodzie poniżej, żadne znaki nie zostaną odmiennie ostylowane, ponieważ pierwsza linia nie ma zawartości:

Nic tu nie zostanie odmiennie ostylowane,
tym bardziej następne linie.

Kolejny :first-letter działa analogicznie do poprzedniego, z tą różnicą, że daje możliwość ostylowania pierwszej litery zamiast pierwszej linii. Stosowanie tego pseudo-elementu zostało ogranioczne do elementów blokowych (block, list-item, table-cell, table-catpion, inline-block). Dodatkowo istnieje podobne ograniczenie jak w przypadku first-line: zmiany ostylowania mogą obejmować: font-, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, float, margin-, padding-, border-, color-, background-

p:first-letter {font-size: 26px;}

Tylko pierwsza literka T z tego paragrafu będzie powiększona do rozmiru 26px.

Pseudo-selektory :before i :after są używane do wstawiania wygenerowanej treści przed lub za wybrany element.

blockquote:before {content: "Cytat:";}

<blockquote>
Ten cały cytat zostanie poprzedzony słowem "Cytat:".</blockquote>

a[href~=http]:after { background: url("outgoing.png") no-repeat center right;}

<a href="http://blog.vokiel.com">Ten link dostanie ikonkę na końcu</a>
<a href="#selektor-uniwersalny">Ten już nie</a>