Pamiętam swoje pierwsze spotkanie z jQuery – nie wiem kiedy to było, ale wyglądało to tak: zobaczyłem, a po chwili już używałem. Tak samo było z Angularem.

Co dało nam jQuery? Przede wszystkim wygodę, bo w kilku liniach można wykonać coś, co w czystym JavaScripcie wymaga już odrobinę więcej wysiłku. Podobnie dzięki AngularJS można podejść do aplikacji webowych nieco inaczej – tworząc je szybciej i wygodniej. Dodatkowo taką aplikację webową można stworzyć po prostu dobrze dzięki łatwiejszej organizacji kodu.

Pomiędzy akapitami...

Większość z Was korzysta z Google Readera, który już w poniedziałek przestanie działać - najwyższa pora aby znaleźć inne rozwiązanie dla siebie i zasubskrybować bloga raz jeszcze - ja używam teraz Feedly, serwis ten jest OK, polecam :)

Czym jest AngularJS?

AngularJS to JavaScriptowy framework stworzony przez Google, przeznaczony do szybkiego i łatwego budowania aplikacji internetowych. Całość oparta o MVW (Model View Whatever). Pojęcia takie jak JS i MVC (oraz podobne) nie muszą odstraszać, co za chwilę zobaczymy.

Dlaczego AngularJS a nie Backbone.js, Knockout, … ?

AngularJS jest łatwy do przyswojenia. Moim zdaniem jest on najlepszym rozwiązaniem na start, dla osoby dla której coś zbliżonego do MVC w JS to jeszcze abstrakcja. Angulara nie trzeba rozumieć w całości, aby zacząć coś w nim tworzyć – można go poznawać stopniowo, bezboleśnie.

HTML i JS – to zaczyna żyć, czyli "Two Way Data-Binding"

Zacznijmy od konkretnego, prostego przykładu. Mamy zmienną myVar – pojawia się ona zarówno w widoku HTML jak i w przykładowym kontrolerze.
Zmieniamy zawartość pola tekstowego – automatycznie mamy nową wartość zmiennej dostępną po 'obu stronach'. To samo dzieje się, gdy zmienimy wartość zmiennej z poziomu JavaScriptu – to jest właśnie "Two Way Data-Binding", który odgrywa w Angularze ważną rolę.

Ten obrazek podsumowuje całość.

Teraz popatrzmy na ten przykład - tu mamy coś nieco bardziej złożonego.Widok "sam reaguje" na to, co dzieje się z danymi w modelu. W drugą stronę działa to tak samo prosto.

Kodu tutaj nie ma dużo. Pomyślmy teraz nad czymś 10, lub 100 razy większym – w AngularJS skalowanie nie jest problemem.

HTML na dopalaczach

Zestaw dyrektyw, które możemy sami rozszerzać pozwala na sporo. W łatwy sposób stworzymy pętlę która odwzoruje nam dowolny obiekt w widoku (co widzieliśmy już wyżej). Do tego bez ani jednej dodatkowej linii kodu JS dodamy możliwość sortowania i filtrowania.

NgSwitch, ngShow, ngHide ułatwią nam sterowanie fragmentami widoków. NgClass zadba o to, aby dany obiekt DOM posiadał odpowiednią klasę – oczywiście automatycznie reagując na zmiany w modelu.Do tego dochodzą jeszcze filtry, które też potrafią się przydać (format daty, itd).

Więcej ciekawostek w dokumentacji, także o formularzach przy których walidacja z AngularJS jest zwyczajnie prosta.

JS na dopalaczach

Zabawa nie kończy się na dyrektywach. W AngularJS w prosty sposób opanujemy routing – czytamy adres URL w przeglądarce i na jego podstawie uruchamiamy odpowiedni fragment naszej aplikacji, przekazując przy tym oczywiście parametry.

Services, promises, dependency injection,... - w AngularJS jest co odkrywać, więcej już za chwilę.

Testowanie, testowanie, testowanie...

W AngularJs łatwo jest rozbudowywać aplikację o kolejne moduły, kod nie zapadnie się w pewnym momencie pod własnym ciężarem. Rozwój całości będzie jeszcze łatwiejszy, gdy dodamy do całości testowanie – cały framework powstał z myślą o ciągłych testach.

Teraz konkrety

Ten jeden link wystarczy: https://github.com/jmcunningham/AngularJS-Learning – kompletna baza wiedzy o AngularJS.

Jeśli ktoś potrafił opanować jQuery, to opanuje także Angulara, dzięki podejściu: "JavaScript nie musi być trudny". Problemem na początku może być to, że "myślenie w stylu jQuery" trzeba odstawić na bok, co jednak wadą nie jest po kilku chwilach.

Zachęcam do testów i zbudowania swojej pierwszej aplikacji – może być to i zwykła lista zadań wzorowana przykładem który wcześniej się pojawił. A jak to już się uda, to wiadomo: webserwisy, routing i cała reszta – wtedy zabawa z Angularem dopiero się rozkręca... :)

Na wielu stronach można znaleźć animowane pokazy slajdów (obrazy, teksty, itd) - jednak ciągle są wykorzystywane stare skrypty które używają animacji JavaScript zamiast bardziej wydajnych animacji CSS3.

Popularną wtyczką jest jQuery Cycle - to rozwiązanie niby idealne bo proste. Ale już nie dzisiaj...
Obsługa CSS3 jest już tak powszechna, że należy już bezwzględnie zapomnieć o ciężkich rotatorach.

Alternatywą jest rotat9r działający w oparciu o JS, ale gdzie główną siłą napędową jest właśnie CSS3.

Dlaczego piszę o tym rozwiązaniu?

Tak się złożyło że Krzysiek (Procek) napisał tę wtyczkę do jQuery i mogłem być jednym z pierwszych testujących :)

Coś więcej o tym rozwiązaniu?

Najlepiej jak zacytuję opis Krzyśka - przynajmniej niczego nie pomieszam :)

Najpopularniejsza wtyczka do tworzenia animowanych pokazów slajdów: "Cycle jQuery Plugin" ma wreszcie nowoczesną alternatywę. Wtyczka rotat9r (rotat9r.desi9n.pl) działa w oparciu o animacje CSS3 co daje znacznie lepsze wydajnościowo wyniki od pierwowzoru. Niezależnie od przeglądarki animacje są płynne i szybkie.

Szczególnie istotny jest fakt pełnej funkcjonalności na urządzeniach mobilnych niezależnie od systemu. Wszystkie popularne systemy (Android, iOS, Blackberry, Windows Phone) wspierają efekty, których dostarcza rotat9r.

Istotnym faktem jest to, że składnia użycia wtyczki rotat9r jest IDENTYCZNA jak w przypadku wtyczki cycle co daje możliwość podmiany biblioteki w naszym kodzie bez żadnych dodatkowych modyfikacji. Wtyczka rotat9r obsługuje większość opcji pierwowzoru, a poza tym wyposażona jest w kilka nowych efektów przejść, których ciągle przybywa.

Wtyczka rotat9r wymaga jQuery w wersji 1.9 ze względu na korzystanie z nowych elementów rdzenia jQuery. Wtyczka jest dystrybuowana w pełni za darmo, nawet do użytku komercyjnego.

Moje testy

Przeglądarki desktopowe: zarówno 'cycle' jak i 'rotat9r' spisują się dobrze. Jednak po obciążeniu procesora widać że 'rotat9r' zdecydowanie wygrywa. Ale nie ma się czemu dziwić - animacje CSS3 muszą być mniej zasobożerne.

Różnice są o wiele lepiej widoczne na urządzeniach mobilnych.
HTC Desire Z: 'cycle' z płynną animacją raczej nie ma nic wspólnego, w przeciwieństwie do 'rotat9ra'. Na iPhone 'cycle' radzi sobie dobrze, ale 'rotat9r' to już całkowita płynność.

Tak więc rotat9r swobodnie może być stosowany - nie będzie z nim problemu nawet na słabszych smartfonach.

Już zdążyłem go zastosować w kilku realizacjach i nie zauważyłem żadnych problemów z działaniem. Wdrożenie jest szybkie, a efekt taki jak ma być :)

// info dodatkowe: dawno nie pisałem na blogu, ale już jestem w trakcie migracji na WordPressa - pozostało mi tylko dokończyć szablon (oczywiście z RWD).

Wchodzimy na stronę swojego banku, podajemy numer identyfikujący klienta - gdy widzimy grafikę którą przypisaliśmy do naszego konta, to wiemy że numer identyfikacyjny podaliśmy poprawnie, więc wpisujemy hasło i logujemy się… Niby wszystko OK, prawda?

Wiele banków daje możliwość przypisania do swojego numeru klienta wybranej grafiki - co to daje?

Przede wszystkim wiemy, że ciąg cyfr który podaliśmy jest przypisany do naszego konta (bo ustawiliśmy sobie jako grafikę małego kotka, a nie przykładowo żółtą kaczuszkę). Jednak takie "ułatwienie" ma więcej minusów niż może się wydawać. Najciekawsze jest to, że banki tego nie zauważają, a ich klienci tym bardziej.

W tym wpisie pojawi się opis zagrożenia, opis przykładowego ataku, oraz sugestia poprawnego stosowania.

Po co komu ten detal?

Wspomniana wyżej możliwość weryfikacji poprawności wpisanego identyfikatora to nie wszystko. Nie chodzi tylko o naszą wygodę.

Cytat ze strony BZWBK - podstrona „Zalecenia dla użytkowników usług BZWBK24”:

Wybierz w ustawieniach logowania grafikę, którą będziesz widział na stronie do logowania po wprowadzeniu NIK. Jeśli grafika nie wyświetla się lub jest inna niż wybrałeś nie wolno korzystać z serwisu (nie wprowadzaj NIK-u i PIN-u) - w takiej sytuacji niezwłocznie skontaktuj się z Zespołem Doradców BZWBK24.

Oraz Alior Bank - podstrona "Pytania i Odpowiedzi":

Obrazek bezpieczeństwa to wybrany przez Ciebie obrazek, prezentowany podczas każdego logowania do systemu bankowości internetowej (po wpisaniu identyfikatora, a przed wpisaniem hasła). Obrazek ten ułatwia Ci rozpoznanie, że strona, na której się logujesz jest prawdziwą stroną logowania Alior Banku, a nie stroną podstawioną w celu przechwycenia danych. Pamiętaj, żeby przy każdym logowaniu sprawdzać, czy wyświetla się wybrany przez Ciebie wcześniej obrazek. W przypadku braku obrazka lub wyświetlenia innego, niż wybrany przez Ciebie, przerwij logowanie i skontaktuj się z naszym Contact Center lub oddziałem.

Pogrubienia moje.

Czyli chodzi o phishing - stara dobra metoda wykorzystująca to, że człowiek zazwyczaj jest najsłabszym ogniwem jeśli chodzi o bezpieczeństwo (nie tylko przy logowaniu do banków).

Metoda wykorzystywana nie tylko przy logowaniu?

Po udanym logowaniu do jakiegokolwiek serwisu często zobaczymy elementy które potwierdzają to, że znajdujemy się na prawdziwej, a nie na spreparowanej witrynie. Takim elementem może być chociażby tekst typu "Witaj Jan Kowalski", czy też widoczne inne nasze dane do których osoba przygotowująca spreparowaną stronę nie mogłaby mieć dostępu.

Brak takiego elementu sprawia, że szybko (przynajmniej w części przypadków) zauważa się zagrożenie – "zalogowaliśmy się na fałszywej stronie, trzeba szybko coś z tym zrobić bo moje dane trafiły w nieodpowiednie ręce".

Istotna różnica

Czym powyższe rozwiązanie różni się od zastosowania spersonalizowanego obrazka przy formularzu logowania? Spersonalizowany obrazek jest dostępny dla każdego, bez większego wysiłku.

Co musisz znać, aby poznać jaki obraz ustawiłem dla mojego identyfikatora bankowego? - jedynie sam identyfikator...

Opis ataku - przypadek 1

Załóżmy że jesteś przeciętnym użytkownikiem, chcesz zalogować się na stronie swojego banku - nie istotne jest tutaj to, czy kliknąłeś na link z maila, przeszedłeś z innej strony, czy po prostu pomyliłeś dwie litery w adresie - fakt jest taki, że znajdujesz się na fałszywej stronie która wygląda identycznie jak ta na którą patrzyłeś już wiele razy.

Podajesz swój numer klienta, enter. Na kolejnej podstronie widzisz pole do podania hasła, jednak czegoś brakuje...

Brak twojego obrazka z małym słodkim kotkiem sprawia, że stajesz się bardziej czujny - szybko zauważasz, że strona na której się znajdujesz nie posiada "tego zielonego paska z nazwą banku" przy adresie, oraz że adres zawiera przestawione litery w nazwie domeny.

Brak tego jednego elementu wyrwał cię z rutyny. Wszystko zadziałało tak jak w założeniach.

Opis ataku - przypadek 2

Znajdujesz się na spreparowanej stronie (nie zauważasz tego oczywiście - wiadomo, rutyna). Podajesz identyfikator klienta, enter. Na kolejnej podstronie pola do wprowadzenia hasła, a obok niego obrazek słodkiego, małego kotka - czyli tak jak zawsze. Wpisujesz to co zwykle, enter... Później pojawia się zdziwienie gdy z kontem dzieje się coś nieoczekiwanego.

To zbyt łatwe

Nie trzeba stosować bardziej zaawansowanych ataków aby przełamać "zabezpieczenie" spersonalizowanego obrazka.

Mamy spreparowaną stronę - wygląda ona identycznie jak prawdziwa.
Ofiara wchodzi na spreparowaną stronę i podaje swój numer klienta – po wpisaniu informacja ta jest przesyłana na serwer atakującego. Atakujący może zwyczajnie teraz zdobyć naszą grafikę ze strony banku - nie potrzebuje do tego hasła, czy też żadnych innych dodatkowych danych. Dostęp do tego elementu jest banalnie prosty – tak samo prosty jak wpisanie innego numeru przy logowaniu i podejrzenie obrazu przypisanego do wybranego przez nas numeru. Jeśli w Twojej przeglądarce widać ten obraz, to żadna metoda nie powstrzyma kogoś aby go skopiować - serwer atakującego swobodnie może udawać klienta inicjującego logowanie.

Po niewielkim wysiłku skrypt atakującego serwuje nam pobrany wcześniej obraz – ofiara nie zauważy niczego podejrzanego.

Zaufanie

Ten sposób ataku jest prosty w swoich założeniach, jednak atakujący zyskuje bardzo wiele - zaufanie swojej ofiary. Popatrzmy na kilka komentarzy:

Proste rozwiązania są najlepsze!
Zamiast tłumaczenia klientowi jak i gdzie sprawdzić, czy połączenie z bankiem jest realizowane za pomocą protokołu szyfrowanego, zamiast sprawdzania co do literki adresu strony banku, zamiast szukania i sprawdzania ważności certyfikatu – rzut okiem czy zgadza się obrazek przy NIKu. Proste i skuteczne.

Token obrazkowy - cóż; jest to w końcu odpowiedź na moje dylematy. Czy aby na pewno jestem na autoryzowanej stronie banku? Czy przypadkiem cwany hacker nie podrobił certyfikatu autentyczności czy też innych skomplikowanych świadectw zapewniających nas laików o oryginalności? Tego tak naprawdę nie wiedziałem, a z czasem nawet przestałem sprawdzać. Okazuje się że można w sposób prosty, przystępny i intuicyjny załatwić temat.

Ooooo...bardzo sprytne i pomysłowe! Często loguję się do bzwbk24 (nawet kilka razy dziennie ) i teraz będę miała pewność, że robię to w sposób całkowicie bezpieczny. Sprawdzenie certyfikatów bezpieczeństwa nie zawsze jest proste i łatwo o tym zapomnieć, a taki zmyślny detal rozwiąże ten porblem :)

Pomysł jest prosty i bardzo dobry. Nie trzeba niczego wpisywać i pamiętać dodatkowych kombinacji liczb i liter. Obrazki są ładne i każdy może wybrać coś dla siebie. No i mamy pewność, że jesteśmy na właściwej stronie.
Dobra robota!

Pozytywy i negatywy

Takie rozwiązanie chroni przed pomyłką przy podawaniu numeru klienta. Chroni także przed phishingiem - "Opis ataku - przypadek 1" powyżej. Jednak to rozwiązanie otwiera furtkę dla atakujących. Pozyskanie obrazkowego tokenu przypisanego do naszego konta nie jest trudne.

To nie jest zabezpieczenie

Coś co zabezpiecza, ale w pewnych sytuacjach może skutecznie ułatwić atak, zabezpieczeniem nie jest.

Kiedy by to miało sens? To rozwiązanie będzie działać jedynie wówczas, jeśli klientami banku będą osoby rozsądne myślące według tego algorytmu:

• Jeśli obraz nie jest prawidłowy lub nie wyświetla się, to zakończ działanie – witryna jest podejrzana
• Jeśli widzisz prawidłowy obraz to przejdź do dalszej analizy bezpieczeństwa witryny na której się znajdujesz

Większość będzie działać według tego algorytmu:

• Jeśli obraz nie jest prawidłowy lub nie wyświetla się, to zakończ działanie – witryna jest podejrzana
• Jeśli widzisz prawidłowy obraz to znaczy że jesteś na bezpiecznej witrynie, wpisuj hasło…

Jak widać w obu przypadkach pierwsza część algorytmu wygląda identycznie (do tego to rozwiązanie zostało stworzone). Druga część wygląda już niestety inaczej (to już jest efekt uboczny). Jest to rozwiązanie kierowane do osób rozsądnych, ale nie ma możliwości sprawdzenia tego, czy z tego rozwiązania będą korzystać także osoby "nierozsądne".

Inna kwestia: czy osoba zazwyczaj rozsądna w pewnych okolicznościach nie zacznie zachowywać się nierozsądnie? Zmęczenie, pośpiech, itd.? Bardzo możliwe, wykluczyć tego nie można. Czy więc warto z tego korzystać nawet wówczas, gdy uważamy się za osoby rozsądne? To już indywidualna decyzja.

Rozwiązać to inaczej?

Spersonalizowane obrazy w temacie phishingu przydają się wówczas, kiedy trafiamy na sfałszowaną stronę i obraz nie wyświetla się, lub jest inny niż oczekiwany - tylko wtedy. W innych przypadkach może tylko zaszkodzić.

Więc? Może zwyczajnie warto poinformować użytkowników o tym, że jest to jedynie drobne ułatwienie, a nie skuteczne rozwiązanie w zakresie wykrywania phishingu? Z cytatów podanych na początku jasno wynika, że Alior Bank sugeruje użytkownikom to, że mają do czynienia z czymś skutecznym w każdym przypadku. BZWBK nie mówi o tym nic, nie mówi też o tym do czego to rozwiązanie nie służy - użytkownicy wyciągną wnioski takie, jak w cytatach podanych nieco dalej w tym wpisie.

Ciekaw jestem kiedy napotkam bank, który wprost powie: "Dajemy wam fajną możliwość weryfikacji podejrzanych stron, ale pamiętajcie, że to może wykryć sfałszowane strony, ale nigdy nie zagwarantuje że jesteście na właściwiej stronie"? Jaka część użytkowników by zrozumiała sens tego, co ja opisuje w tym wpisie?

Jak mogą ulepszyć to rozwiązanie banki?

Można wyłapywać masowe wywołania pierwszego etapu logowania - ale to nie jest skuteczne rozwiązanie, jedynie kolejna przeszkoda którą można obejść. Serwowanie obrazów z unikalnymi jednorazowymi adresami, rozpoznawanie przeglądarek, itd.? Jeśli coś ma zostać wysłane do przeglądarki, to nie ma sposobu aby zablokować możliwość skopiowania danego obrazu.

Więc co dalej...?

Jak długo banki będą oszukiwać siebie samych i przy okazji użytkowników? Będzie trzeba poczekać na jakiś większy atak gdzie zostanie pokazana negatywna strona tego rozwiązania?

W tym wpisie nie omawiałem innych zabezpieczeń stosowanych przez banki - poruszyłem jedną kwestię zabezpieczeń i tego, jak może ona negatywnie wpływać na zachowania użytkowników (w tym interpretację innych możliwych do wykrycia przesłanek mówiących o ataku). Nie wspomniałem tutaj też o wadach spersonalizowanych obrazów takich jak podatność przykładowo na typowy atak "man in the middle". Nie trzeba jednak armaty na komara.

Jak to robić lepiej?

Kiedy spersonalizowany obraz może się przydać? Odpowiedź jest prosta: wtedy, kiedy jego zdobycie będzie wymagało podania wcześniej informacji, która nie może być znana atakującemu.

Popatrzy na przykładową, wieloetapową weryfikację:

• Klient podaje swój numer identyfikacyjny
• Następnie podaje kod jednorazowy (wygenerowany przykładowo przez token)
• Jeśli kod zgadza się, to pojawia się kolejny etap w którym widać spersonalizowany obraz użytkownika
• Użytkownik widząc prawidłowy obraz podaje hasło

Różnica? Przeciętny człowiek posiadający dostęp do Internetu znając nasz NIK nie może sprawdzić jaki obraz przypisaliśmy do swojego konta - potrzebne jest coś jeszcze (hasło jednorazowe).

Więc czym różni się ta wersja rozwiązania z przykładowo tekstem "Witaj Jan Kowalski" (o czym pisałem wyżej)? Tam spersonalizowany element (przykładowo tekst) został przeniesiony na koniec poprawnego logowania. Tutaj mamy widoczny spersonalizowany element widoczny w trakcie logowania.

Osoby odpowiedzialne za bezpieczeństwo banków przesunęły moment ujawnienia spersonalizowanej informacji na sam początek, co jest błędem. Nie trzeba przesuwać jednak tego etapu na sam koniec – pod udanym logowaniu. Przykład z wieloetapową weryfikacją pokazuje to chyba wystarczająco jasno.

Wielkim plusem spersonalizowanego obrazu jest to, że można wykryć próbę oszustwa zanim użytkownik poda wszystkie swoje dane do logowania. W tym przypadku zachowujemy ten plus, oraz eliminujemy największy efekt uboczny.

Wniosek z całości jest taki, że bank nie może pierwszy odsłaniać kart – użytkownik musi najpierw przedstawić coś swojego, niepublicznego.

Co z bankami teraz?

Wątpię aby coś zmieniło się pod tym względem. Usunięcie tego rozwiązania sprawi, że użytkownicy będą pytać o to "dlaczego ich bank ogranicza im dostęp do zabezpieczeń". Próba wyjaśnienia usunięcia tego rozwiązania sprawi, że pojawią się komentarze typu: "przez tyle czasu korzystaliśmy z czegoś niebezpiecznego?" – wiadomo, żadny bank raczej do tego nie dopuści.

Jedynym sensownym wyjściem jest rozbudowa zabezpieczeń tak, aby spersonalizowany obraz nie był dostępny dla każdego kto jest uzbrojony w przeglądarkę.

Sieć nie stoi w miejscu, rozwija się, ewoluuje. Coś ginie, coś powstaje, a w tle słychać ostatnie krzyki umierającego dogmatyzmu reklamowego.

Właściciel strony udostępnia treść, umieszcza reklamy i oczekuje zysku. Model prosty i znany. I tutaj pojawia się użytkownik z AdBlockiem - co z nim zrobić? Zarobić na nim? Ale jak? Dla naszych dogmatycznych 'marketingowców' pole popisu się kończy - natrafiają na mur którego nie potrafią ominąć. Jeśli kreatywność leży, to pieniędzy nie będzie.

Blokować blokujących?

Kiedyś trafiłem na stronę na której przywitał mnie komunikat typu „Wyłącz AdBlocka aby…” - kolejna strona z wyników wyszukiwania Google była już wczytana i nie miałem potrzeby czytania komunikatu do końca. To właśnie właściciel tej drugiej strony zyskał szanse na to, że zostanę stałym użytkownikiem jego strony, zainteresuję się usługami płatnymi, czy polecę daną stronę komuś innemu. Tak to działa.

Blokując blokujących ograniczasz swoje możliwości - zapamiętaj, to podstawowa zasada.

'AdBlokersi' mają znajomych

Twitter, Blip, Google+, Facebook, Wykop, itd – nawet użytkownik który nie widzi u Ciebie reklam może sprawić, że zobaczą je inni i wykonają jakąś akcję.

Jeśli nie lubisz "społecznościówek" to nie musisz ich używać – wystarczy że odwiedzający Twoją witrynę będą to robić. Możesz im to ułatwić dodając przyciski do 'lajkowania', 'plusowania', czy 'wykopywania'. Można skusić się także na jakiś społecznościowy widet. Pamiętaj jednak, aby nie robić ze swojej witryny czy bloga choinki społecznościowej, tak jak zrobił to pewien znany bloger (domyślacie się o kim mowa?).

Elementy społecznościowe nie powinny stanowić treści strony, ale być małym dodatkiem dla zainteresowanych. Odradzam korzystanie ze skryptów agregujących widety społecznościowe – po co komu na polskich stronach widgety serwisów, o których u nas praktycznie nikt nie słyszał, lub takich z korzysta maksymalnie 1% odwiedzających naszą stronę? Wybierzmy dwa, ewentualnie trzy serwisy na którym nam zależy i tylko je wykorzystujmy ‘bezpośrednio’ na naszej stronie. Przesyt jest niewskazany.

Jeśli chodzi o widgety opóźniające wczytanie strony, czy latające paski (fixed) – pierwsze należy umieścić tak, aby nie spowalniały strony, a drugie zwyczajnie usunąć.

Blokując użytkowników z AdBlockiem:

• Spowolnisz i osłabisz budowanie marki swojej strony
• Stracisz część ruchu ze serwisów społecznościowych jaki mógłby być wygenerowany dla Ciebie przez użytkowników AdBlocka (którzy będą na różne sposoby polecać Twoją stronę)
• Stracisz także część ruchu z innych kanałów, takich jak komunikatory, itd.
• Stracisz część linków przychodzących do Twojej witryny, co przełoży się w mniejszym, lub większym stopniu na pozycje w wyszukiwarkach

Każda wizyta na Twojej stronie może przełożyć się na zysk, jeśli nawet reklama na Twojej stronie do kreatywnych nie należy. Użytkownik AdBlocka klikać nie musi, wystarczy że zrobi to jego znajomy.

Tak więc czy nadal uważasz, że użytkownik z AdBlockiem to zerowy zysk dla Twojej strony?

Idźmy dalej, postaw na lepsze reklamy

Używam AdBlocka, aby blokować irytujące reklamy. Jeśli na danej stronie znajduje się reklama która nie przeszkadza w odbiorze treści, to jej nie dodaje do filtrów. Jeśli coś się rusza, gra, lub zajmuje dużą powierzchnie to trudno – wkładka reklamowa ze strony leci do kosza, tak jak wkładka reklamowa znajdują się między papierowymi stronami książki.

Podejście typu: naszpikuj stronę reklamami, wepchaj je w każde możliwe miejsce, przetnij poziomo stronę bannerem i dodaj kilka warstw z iksami, jest podejściem dogmatycznym – ilość nie przełoży się na zysk. Na świadomych użytkowników Internetu to już nie działa, a szarej masy jest coraz mniej.

Jak serwować AdBlokersom reklamy?

Koniecznie unikaj Flasha – to podstawa. Flash to jeden krok od natrętnych animacji i co gorsze, dźwięku. Chcesz może wstawić statyczny obraz bez dźwięku, ale we Flashu? Po co? Twój generator bannerów nie posiada opcji eksportowania do plików .png lub .jpg? Pobierz darmowego Gimpa i wyeliminuj Flasha na dobre. Część ludzi blokuje Flasha całkowicie (polecam: FlashBlock), więc unikając go sprawisz, że Twoja reklama zostanie wyświetlona z większym prawdopodobieństwem.

Reklamowe bannery powinny znajdować pod tą samą domeną co strona. Co najważniejsze, w adresach i nazwach plików nie powinny pojawiać się takie frazy jak reklama / banner / ads / itd – AdBlock czuwa. Twoja nienachalna, lekka reklama nie musi wpadać w filtry.

Podstawowa zasada: jeśli reklama nie będzie irytująca, to nikt nie będzie chciał jej blokować. Zablokowanie nowej reklamy wiąże się z wykonaniem określonej akcji, która pochłania nieco czasu – nikomu nie będzie chciało się specjalnie blokować Twojej reklamy, jeśli go nie zirytuje.

Korzystasz z nieinwazyjnych reklam, a AdBlock je blokuje?

Możesz zamieścić informację, że na Twojej stronie reklamy nie są irytujące – dzięki temu możesz nieco zyskać, ale raczej nie spodziewałbym się masowych reakcji na takie sugestie.

Większość użytkowników nawet nie przeczyta komunikatu, traktując go za reklamę (tak jak ja nie zwracałem uwagi przez długi czas na czerwoną ramkę z komunikatem na jednym z czytanych blogów – przykładowo zielony kolor byłby lepszy w takim przypadku).

Może lepiej pomyśleć nad czymś lepszym? Załóżmy, że masz na stronie reklamy typu A, które dają Ci określony zysk. Użytkownicy AdBlocka nie widzą reklam i nie dają Ci bezpośredniego zysku (tutaj już dla ułatwienia pomijamy korzyści pośrednie z odwiedzin AdBlokersów).

Dobrym rozwiązaniem byłoby zaserwowanie AdBlokersom reklam typu B, nawet jeśli dają Ci one mniejszy zysk bezpośredni niż te typu A. Wiadomo, średni zysk nie jest taki dobry jak ten duży, ale lepszy niż ten zerowy – trzymając się tej prostej zasady zyskasz.

To nie użytkownicy AdBlocków są 'winni'

Kto odpowiada za to, że użytkownicy posunęli się do blokowania reklam? Dogmatyczni marketingowcy z myśleniem typu: "Wepchnijmy reklamy wszędzie gdzie się da, niech będą wielkie jak nasze oczekiwane zyski".

Z Adblokersami nie należy walczyć – trzeba z nimi umieć współpracować.

Przyszłość reklamy?

Blokowanie reklam staje się coraz popularniejsze, nie unikniemy tego. Zamiast tupania nóżką i nazywania ludzi blokujących reklamy "bucami" warto pomyśleć nad rozwiązaniami, które jednocześnie będą przyjazne reklamodawcom, twórcom stron i co najważniejsze: użytkownikom. AdBlock skutecznie poprawia jakość reklamy na stronach – sieć zmienia się na plus.

A czy problemem jest to, że niektórzy nie przetrwają tych zmian? Dla mnie nie. Dinozaury wymarły jakiś czas temu, nikt ich nie opłakiwał, a puste miejsce zostało zajęte przez lepiej dostosowanych. Reklamowe dinozaury czeka to samo - "Web is Brutal".

O Google+ dużo ostatnio się mówi, wiele osób testuje już nowego Facebooka+, a jeszcze więcej osób oczekuje na to, aby obejrzeć co ta społecznościówka od Google ma w środku - co widać po długich listach komentarzy z prośbami o zaproszenia na blogach. Okazuje się, że do G+ można zerknąć przez uchylone tylne drzwi...

Mimo tego, że przynajmniej jedna osoba wysłała mi zaproszenie, dostępu do swojego konta nie miałem - nie doszło, czy może spóźniłem się? Nieważne...

Ograniczanie ilości kont to prawdopodobnie nie zabieg techniczny związany z realnym testowaniem (testowanie raczej schodzi na drugi plan). Ważniejsze dla Google wydaje się stworzenie produktu, na który będzie bardzo duży popyt - zminimalizowanie ilości aktywnych kont sprawia, że o wszystkim dużo się mówi: prośby o zaproszenia zakrywają komentarze typu "to tylko nowy Facebook". Cel osiągnięty, wszystko się kręci, G+ to produkt pożądany (mimo tego, że w większości przypadków tylko z czystej ludzkiej ciekawości).

Ograniczenie dostępu do swobodnego logowania spełnia swoje funkcje. Jednak to 'mur' który nie jest zbyt solidny, bo ma przetrwać tylko kilka, ewentualnie kilkanaście dni - gdy ludziom znudzi się proszenie o zaproszenia i wyczekiwania 'dnia pełnego otwarcia' mur zniknie, aby cisza na temat G+ nie nadeszła za szybko.

Przetestuj G+

Dla niecierpliwych istnieje możliwość przetestowania swojego konta bez zaproszeń, linków aktywacyjnych, itd.

Jak ja znalazłem tylne drzwi do swojego konta? Wystarczyło trochę poklikać...

• Znajdujemy publiczny wpis (może być ten) w którym ktoś umieści link prowadzący do 'wewnątrz G+'. Musimy być zalogowani na swoje konto Google.
• Znajdujemy szukany link: tutaj jest to plus.google.com/notifications/circle podany przez Pawła Wimmera w piątej odpowiedzi, klikamy na niego, nie kopiujemy.
• Właśnie znaleźliśmy tylne drzwi przez które możemy podglądać swoje konto w G+.

Należysz do niewielkiej grupy osób, które pomagają nam testować Google+. Gdy będziesz coś udostępniać osobom, które nie mogą jeszcze korzystać z Google+, osoby te otrzymają udostępnianą zawartość w e-mailu, ale nie będą mogły jej skomentować ani korzystać z niej jak inni użytkownicy Google+. Dołączyć do Google+ będą mogli, gdy umożliwimy dostęp do tej usługi większej liczbie użytkowników.

Jak widać na screenach bezproblemowo przetestowałem funkcję "Sparks". Można także obejrzeć inne elementy 'wnętrza' G+

Sposób przetestowałem na innych kontach Google - działa (konta te mają dostęp do 'plusowania' wyników w wyszukiwarce, nie wiem jak z innymi).

Nie jest tak kolorowo

Można powiedzieć, że w taki sposób uzyskujemy dostęp tylko do wersji 'beta' G+ - jest to, tak jak powiedziałem, tylko zerkanie przez uchylone drzwi, a nie swobodne wejście do środka. Część funkcji zwyczajnie nie będzie działać, lub będzie działać dopiero po kilku próbach.

Chcemy więcej?

Jak widać 'mur ograniczonego dostępu' nie jest idealny. Linki wewnątrz G+ są naszpikowane JS (dlatego zwykłe skopiowanie adresu do przeglądarki nie wystarczyło) - jeśli ktoś ma ochotę, to może przetestować inne adresy wewnątrz G+. Może wystarczy drobne nadpisanie fragmentu JS, lekkie zmodyfikowanie odpowiedzi serwera, lub zabawa z cookies aby nie tylko zerkać przez tylne drzwi, a również wejść do środka?

Za niedługo Google prawdopodobnie udostępni swój produkt wszystkim, ale jednak nie o to tutaj przecież chodzi - liczy się zabawa, rozgryzanie zagadki, 'dłubanie w kodzie' - racja?

Stracony czas, ryzyko bana/filtrów w Google, informatyczna adrenalina i telefony od zdziwionych klientów. Nagle w OVH zrobiło się porno i duszno. Ponad 24h z "różowym contentem" zamiast własnego bloga / portfolio / strony firmowej w dzień wolny od pracy – kto byłby zadowolony? Taką niespodziankę przyszykowała znana firma hostingowi OVH dla swoich klientów . Takie "ciekawostki" nie mogą przejść niezauważone i zaginąć w archiwach for.

Ale o co właściwie chodzi? Może zacznę od początku…
Wchodzę w środę wieczorem na tego bloga aby przejrzeć nowe komentarze – co zauważam? Odpowiedź: różowe linki… Takie zwyczajne, jak po a {color: pink;}
Wiem, że mój blog do najpiękniejszych nie należy, ale różowe linki?

Moja reakcja? Zwykłe, klasyczne "WTF". Odświeżam stronę - nic. Inna przeglądarka – dalej to samo. Po kilku próbach myślę sobie: "Ktoś mi zrobił mały żart, trudno, teraz ja jestem po tej stronie." Zmian w treści nie zauważyłem, więc myślę sobie: "pokojowe przedstawienie jakiegoś mojego błędu".

A jednak "coś" więcej.

Jednak kolejne odruchowe wciśnięcia "Ctrl + R" odsłoniły prawdę: na moim blogu są "różowe materiały" i linki do nich. Kolejne odświeżenia: treść z bloga nie pojawia się, zamiast tego pod domeną 7pl.pl znajduje się strona jakiegoś polskiego serwisu porno z "bogatą ofertą tematyczną".

Co w takiej sytuacji przychodzi na myśl?
Szybko zmieniaj hasła do FTP. Żaden program nie powinien zapisać mojego hasła, ale i tak zrzucam winę na "coś" obserwującego mnie w moim systemie.
Myślę sobie: jeśli "coś" podkradło mi hasło do FTP strony "A", to prawdopodobne jest także to, że na innych stronach też znajdują się takie atrakcje. Sprawdzam stronę "B" – leży. Strona "C" – leży. Przez myśl przechodzą mi strony klientów (teraz zauważyłem, że brakuje jakiegoś kilkuliterowego skrótu do wyrażenia emocji towarzyszącym takim sytuacjom).

Sprawdzenie kilku stron nad którymi aktualnie pracuje, a więc do których "coś" mogło mieć dostęp – tutaj wynik dla mnie pozytywny: jednak pewności nie mogłem mieć co do tego, że i one za kilka minut nie dołączą do puli "różowych stron". O pozostałe strony nie musiałem się obawiać (zmienione już hasła dostępu).

Szukanie przyczyny.

Idea "czegoś" w systemie była wtedy dla mnie najprawdopodobniejsza. Kolejne chwile zastanowień i wspólnie z Prockiem (którego blog też zamienił się w farmę porno zdjęć) odkrywamy przyczynę: OVH.

Wszystkie "zaróżowione" strony leżały na serwerach OVH –serwer wirtualny 1000gp. Nie spodziewałem się czegoś takiego po OVH – duża firma, lata doświadczeń, itd. Przecież to nie hosting z Allegro za złotówkę miesięcznie. Ale jednak. Zerknięcie na 1000gp.ovh.net potwierdziło podejrzenia - screen.

Tak więc klienci korzystający z 1000gp otrzymali bonus w postaci darmowego porno contentu w swoich domenach, bez możliwości łatwego wyłączenia tej atrakcyjnej usługi.

Co właściwie się stało?

Atak na OVH? Niekoniecznie.
Każde odświeżenie strony dawało inny rezultat: mój blog + "różowe materiały" / "różowe" strony / inne strony. Te pierwsze warianty niestety zdecydowanie przeważały, ale pojawiały się także inne strony pod moją domeną. W tym popularna w Internecie witryna ajaxload.info dzięki której można generować paski postępu, itp. Wszystkie wyświetlane strony mają wspólny mianownik: OVH.

Źródła ewentualnego ataku raczej nie można szukać u właścicieli "promowanych" różowych witryn. Ich właściciele pewnie sami zastanawiali się dlaczego na ich stronach wyświetlają się materiały konkurencji.

Wersja oficjalna?

Według Kamila Włodarczyka problem wynikał z faktu, że mechanizm loadbalancingu (przenoszenie obciążenia pomiędzy inne procesory, komputery itp.) dla jednego z klastrów wskazywał niepoprawną zawartość serwisu, co było związane z przeniesieniem maszyny. Po zmianie konfiguracji na wcześniejszą problem zniknął.

Źródło: Dziennik Interneutów

Czas trwania "usterki"? Około 28h.

Konsekwencje?

Gdy nie pilnujesz swojego hasła do FTP, to sam odpowiadasz za szkody. Tutaj mamy coś odmiennego. Ja przynajmniej przypadkowo dość szybko odkryłem "niespodziankę".

Reputacja witryny

Dzień wolny od pracy, goście wchodzą na Twoją witrynę i widzą "coś", czego nie spodziewali się. Taka sytuacja do oczekiwanych z pewnością nie należy.

Pomogłeś wykupić klientowi hosting w OVH? Do kogo zwróci się klient widząc "zmiany"?

Ja mam ponad 10 stron moich klientów, których nie przeniosłem jeszcze z 1000GP i dzisiaj zamiast świętować to dzięki OVH kibluję przy kompie.bo klienci chcą mnie zjeść...

Źródło: Andromacha – forum OVH

Ten problem jednak mnie nie dotyczył – przynajmniej tyle.

Trochę podłamani jesteśmy, na naszym portalu www.koszalin7.pl to samo, wyskakują stronki erotyczne, moherki, nauka gry na gitarze i takie tam. (…) Święto Niepodległości, u nas Marszałek na jedynce, a tutaj gołe baby. Do tego jeszcze po raz pierwszy zamieściliśmy w gazecie reklamą naszego obywatelskiego portalu, składaliśmy się na nią, a teraz ludzie wchodzą i....

Źródło: koszalin7 – forum OVH

Masz portfolio na OVH i korzystasz z 1000gp? Miałeś problem – klient raczej nie zadzwoni z pytaniem o współpracę. Nawet jeśli będzie chciał stronę w 15 odcieniach różu to i tak nie znajdzie Twoich danych kontaktowych.

Google i "lekka przebudowa" witryny

Twoja witryna ponad dobę wypełniona taką treścią (pod linkiem tylko źródło, bez zdjęć)? Mnie Googlebot odwiedził podczas "usterki", jednak udało mi się wcześniej częściowo rozwiązać problem wstawiając plik index.html zamiast plików bloga – taka podmiana spowodowała, że przez większość czasu trwania "usterki" porno-content był u mnie niewidoczny, także dla Google.
Godziny wieczorne, przed długim weekendem – raczej nie każdy będzie pamiętał o tym aby przed snem sprawdzić jeszcze to, czy na własnych stronach nie wyświetlają się przypadkiem "inne treści".
Ja w przeciwieństwie do większości pamiętałem o tym... :)

Budowa mojego bloga pozwalała na to, aby użyć sztuczki z plikiem index.html. Jednak w przypadku innych stron metoda ta mogła przysłonić jedynie stronę główną. Google pamiętało adresy podstron i mogło je odwiedzić – i wtedy Googlebot mógł się nieco zdziwić.Wątpię w to, aby algorytmy Google nie zareagowały w jakikolwiek sposób na taką dawkę podmienionej treści na stronie. W dodatku ta treść ciągle się zmieniała. Ban? Filtry? Jeśli ktoś z czytelników był "szczęśliwcem", to niech opisze w komentarzach zauważone skutki.

Metodą lepszą i skuteczniejszą niż łatanie problemu plikiem index.html było szybkie przeniesienie witryny, albo chociaż "odpięcie" domeny od serwera.
Przeniesienie nie zawsze jest łatwe. Poza tym nie każdy mógł szybko zauważyć problem, a jeśli nawet zauważył, to nie łatwo było ustalić źródło tego problemu.

Porno także na Allegro

Niektórzy klienci używali hostingu OVH do przechowywania zdjęć które były używane na aukcjach.

strona z gołymi laskami to jeszcze nic ,mi allegro skasowało 300 aukcji a trwających z laskami mam jeszcze ok 100 tych co się nie da zmienić tzn.skasować ,aukcja z torebkami a w środku gorący sex i co mam powiedzieć allegro i klientom ? że mamy święto ? i nikt nic nie robi ,na niemieckim ovh de pracują 24/7 a u nas laski fruwają po stronach i żywej duszy nie ma (…)

Źródło: dawid2003pl – forum OVH

Powyżej opisałem kilka sytuacji kiedy wpadka OVH potrafiła nieźle namieszać. Prawdopodobnie niektórzy klienci OVH nie zauważyli problemu ciesząc się weekendem.

- Cześć, dawno nie dzwoniłeś. Na mojej stronie są zdjęcia żonki które wczoraj wrzuciłem. Zerknij sobie.
- Zaraz popatrzę… O, niezła laska z niej!

Spokojnie, to tylko rutynowa awaria

Na czym polegał problem? Klient, który chciał wejść np. na stronę firmy (która była postawiona na serwerze OVH), spotkał się z miłą - bądź nie - niespodzianką. Zwykle działa to tak, że użytkownik przenoszony jest na inną stronę - tu nie było wyjątku. Pech chciał, że te strony okazały się pornograficzne. Jak to się stało, że OVH ma pod swoimi skrzydłami strony dla dorosłych?

Wchodzę na własną stronę, to powinienem widzieć swoją stronę. Wyświetlenie losowej strony nie jest problemem, a problemem natomiast jest to, że najczęściej były to strony porno? Czegoś w tym artykule na DI nie potrafię zrozumieć, chociaż się staram :)

A co z bezpieczeństwem?

Wersja oficjalna:

Zdaniem OVH problem nie wpłynął na bezpieczeństwo danych umieszczonych na serwerze FTP.

Źródło: Dziennik Interneutów

Wersja nieoficjalna?

Stworzyłem testowy plik php w którym umieściłem kod include 'style.css';. Jaki był rezultat?

W kolejnych wyświetleniach zazwyczaj widziałem własne style, jednak kilka razy zobaczyłem style porno serwisu które zostały zaincludowane zamiast moich. A co by się stało gdybym zaincludował popularne pliki konfiguracyjne? Nie sprawdzałem, bo uruchomienie skryptów powodowało, że pod moją domeną pojawiały się ponownie porno materiały. Ponowne zablokowanie przez plik index.html "chwilę" trwało.

Skończyło się, a teraz zapomnijcie też o rekompensacie

Kolejny cytat z DI:

Awaria dotyczyła zarówno usług płatnych, jak i darmowych. Użytkownicy tych pierwszych mogą liczyć na rekompensatę z powodu niedostępności serwerów, natomiast właściciele drugich (darmowych) będą musieli obejść się smakiem i przełknąć gorycz.

Rekompensata za niedostępność serwerów? A za pornosy kto odpowiada?
Niedostępność serwerów to niedostępność serwerów, a nie porno przez ponad 24h na własnej stronie, na swoich aukcjach Allegro, itd.

Dzień po usterce – udawajmy, że nie stało się nic…

Taktyka dobra? Niekoniecznie. Na polskim forum OVH w temacie porno-usterki nie odpowiedział nikt z administracji. Nie dostałem też żadnego maila z wyjaśnieniami (poza jednym, po oficjalnym zgłoszeniu "usterki" informującym mnie tylko o tym, że mogę przywrócić stronę z tworzonych automatycznie kopii).

OVH nie chce rozgłosu w takiej sprawie – wiadomo. Jednak milczenie może okazać się także bolesne. Marka OVH straciła bezpowrotnie.

Proszę księdza, naszej strony parafialnej ni e opętał Szatan. To tylko OVH – demon prędkości na rynku usług hostingowych .

Nie dało się inaczej?

Czy na wyłączenie porno-funkcji trzeba było tyle czekać? Mieliśmy dzień wolny, ale OVH przecież nie działa tylko w Polsce. Nawet jeśli przywrócenie serwera do stanu poprzedniego musiało tyle trwać, to z pewnością dało się coś zrobić z pornosami. Lepiej mieć niedziałającą stronę, niż stronę z "różową zawartością".

Gdybym teraz komukolwiek polecił usługi OVH (znajomym, klientom) to byłbym wobec nich najzwyczajniej nieuczciwy. Każdy, kto będzie mówił mi o tym, że "OVH to dobry hosting" otrzyma link do tego wpisu – takie informacje nie giną.

Czy ludzie z OVH naprawdę myślą, że taka sprawa to tylko zwykła "błahostka" porównywalna do kilkudziesięciogodzinnego padu serwera?

Krótko: dzisiaj o :visited, zmianach, 'obchodzeniu' tych zmian i o samym pomyśle wprowadzania tego typu ograniczeń. Pokażę jak zrobić dla linków ikonki dzięki którym będzie można rozróżnić linki odwiedzone, od tych nieodwiedzonych (z uwzględnieniem nowych ograniczeń).

Czekają nas zmiany (na plus i na minus) dotyczące pseudoklasy :visited związane z prywatnością. W przeglądarce Safari 5 zmiany już wprowadzono, a w Firefoksie 'nowe zasady' będą obowiązywać już za niedługo. Użytkownicy Firefoksa 4.0b1 już mogą dostrzec, że na wybranych stronach 'coś nie działa'. Kiedy miliony użytkowników Firefoksa zaktualizuje swoje przeglądarki, to już o nowym podejściu do :visited będzie trzeba pamiętać (większości nie da się już lekceważyć).

Ograniczenia są dość duże, ale nie oznacza to konieczności rezygnacji z naszej pomysłowości.

Przykładowo na archiwalnym blogu Riddla możemy obejrzeć ciekawe zastosowanie pseudoklasy :visited - linki do wybranych artykułów mają odmienny wygląd który jasno pokazuje, które z nich były przez nas czytane, a które nie (fragment widać poniżej).

Po zainstalowaniu bety Firefoksa 4 efektu już nie zobaczę. Jednak da się to rozwiązać w inny sposób - wystarczy zwykły CSS i nieco pomysłowości. Jednak zanim opiszę 'co i jak', to najpierw trochę wprowadzenia w temat nowego podejścia do :visited.

:visited - komu on właściwie przeszkadza?

Chodzi o prywatność. Tak po prostu. W sieci pojawiło się przynajmniej kilka popularnych stron, które zaczęły wykorzystywać nieprzewidzianą wcześniej właściwość :visited do tego, aby przykładowo sprawdzać czy dana osoba odwiedza strony z pewnymi konkretnymi treściami. Takie sprawdzanie nie jest trudne: wystarczy wstawić do dokumentu link i odpowiednio go ostylować. Następnie wykorzystując JS odczytać kolor / rozmiar / lub cokolwiek innego, czym różni się link odwiedzony, od tego nieodwiedzonego. Automatyzując całość można osiągnąć ciekawe rezultaty.

Internautom takie zagrania nie podobają się - wiadomo. Możliwość zobaczenia napisu typu "Oglądasz pornole w sieci" nie jest jeszcze niczym, co by miało prowadzić do takich zmian. Jednak autor strony może z taką informacją zrobić cokolwiek - to już jest problem. Tak więc słusznie podjęto się jego rozwiązania - moim zdaniem niezbyt optymalnego, ale o tym później.

Jakie ograniczenia?

Już nie będziemy mieć swobody takiej jak dawniej (przynajmniej jeśli chodzi o wybrane przeglądarki). Linki możemy stylować dowolnie, ale już tym z pseudoklasą :visited możemy jedynie zmienić kolor tekstu, kolor tła, kolor obramowania, czy też rzadziej stosowany outline-color.

Słówko 'zmienić' powyżej jest istotne - jeśli chcemy ustawić inne tło dla a:visited, to musimy je nadać wcześniej także dla 'zwykłego' a. To, że nasz link znajduje się przykładowo na białym tle (biały element pod linkiem) nie oznacza tego, że tło samego linka jest zdefiniowane.

To są jedyne możliwości jeśli chodzi o CSS (coś jeszcze?).

Elementy zagnieżdżone w <a> (czyli wszystkie a:visited element) również można stylować, ale z ograniczeniami jak powyżej.

a {
  background-image: url(image.jpg?visited=no);
}

a:visited {
  background-image: url(image.jpg?visited=yes);
}

Chyba łatwo domyślić się, że po stronie serwera dałoby się przechwycić informacje o tym, czy dany link jest linkiem odwiedzonym, czy też nie.

Zauważymy, że nie mamy do dyspozycji niczego, co mogłoby zmieniać położenie, czy rozmiar linków - możliwość takich zmian pociągnęłaby za sobą łatwość wyciągania informacji z historii dzięki sprawdzaniu zachowań elementów sąsiednich.

Konstrukcja w CSS typu a:visited + element też nie pozwoli nam na sprytne obejście ograniczeń.

Czyli mamy białą listę sposobów stylowania a:visited i nic poza tym użyć już nie możemy, bo po prostu nie zadziała. Z poziomu JS odczytując cokolwiek na temat konkretnego linku odwiedzonego dostaniemy dane takie, jak gdyby to był link nieodwiedzony - czyli żegnajcie wszystkie 'DidYouWatch...' (tu trzeba dodać, że tylko w założeniach).

I jak tu teraz tworzyć ciekawe rozwiązania z :visited?

Zakładamy, że interesuje nas zdecydowana większość użytkowników. Bazując na rozwiązaniu Riddla pokazanym wyżej, zrobiłbym to tak: przykład działający w przeglądarkach Safari 5 i Firefox 4. W innych przeglądarkach też zadziała, ale skupiam się na tych z nowymi ograniczeniami.

Nie mamy możliwości zmiany elementów graficznych (tło graficzne, obrazek, itp) dla wyróżniania elementów odwiedzonych. Nie wyklucza to jednak tego, że grafiki użyjemy w celu rozróżnienia linków odwiedzonych.

W przykładzie dla linków odwiedzonych nie zmieniałem niczego, poza kolorem tła pewnego elementu. Czyli ponownie wykorzystuje png, jego przeźroczystość i podmianę koloru. Najpierw tworzymy zwykłe menu dodając paddingami miejsce na ikonki po lewej stronie (całości opisywać dokładniej nie trzeba). Następnie do całości dodajemy trochę kodu:

li a {
	position:relative;
}

li a:before {
	content: url(icon.png);
	background-color:#E4E4E4;
	position: absolute;
	top:0;
	left:0;
	width:26px;
	height:27px;
}

li a:visited:before {
	background-color:#000;
}

Kolejno:

• Dla linków ustawiamy position:relative; dzięki czemu będziemy mogli łatwo pozycjonować ikonki
• Wykorzystując generowaną zawartość dodajemy ikonkę w png z odpowiednią 'dziurką' w środku. 'Dziurkę' maskujemy odpowiednim tłem, określamy rozmiary i ustawiamy w odpowiednim miejscu.
• Dla linków odwiedzonych zmieniamy tło pod ikonką. Ikonka pozostaje ta sama. Nowe ograniczenia nie pozwalają na jej podmianę tutaj, jednak sztuczka z 'dziurką' daje efekt podmienionej ikonki.

Wykorzystując metodę przeźroczystych plików .png można na wiele ciekawych sposobów oznaczać linki odwiedzone. Czyli ograniczenia nie są znów aż tak dotkliwe, jak mogłoby się początkowo wydawać.

Inny przykład bazujący na tym rozwiązaniu.

:visited - czy aż tak potrzebny?

Bez :visited da się żyć. Jednak bywa często przydatny. Osobiście jego braku nie zauważyłbym w przypadku 'samotnych' linków otoczonych treścią. Moim zdaniem najlepiej pamiętać o nim w przypadku skupiska linków, tym bardziej, jeśli te linki ciągle się zmieniają. Mam tu na myśli wyżej opisywaną listę linków na blogu Riddla, czy też inne skupiska linków takie jak "Najpopularniejsze" (prawa kolumna) na Joggerze - do niedawna linki tam obecne miały zmieniony kolor tła jeśli były odwiedzone, dzięki czemu łatwiej można było je dostrzec.

Dla mnie dodatkowy element dla a:visited taki jak ikonka, czy też pojawienie się określonego tła jest lepszym zaakcentowaniem różnicy, niż stosowanie 'wyblakłego' koloru.

Czy takie ograniczenia były potrzebne?

Moim zdaniem nie. Wystarczyło zastosować ograniczenia tylko dla linków wychodzących poza określoną domenę (analogicznie jak zasięg działania JS). Tak więc przykładowo ikonki na blogu Riddla działałyby nadal.

Prywatności nie dałoby się naruszyć w przypadku, kiedy z odwiedzonymi linkami wewnętrznymi moglibyśmy robić co tylko byśmy chcieli (jak do tej pory) - przecież i tak możemy poznawać które podstrony naszej witryny zostały odwiedzone dzięki innym metodom.

Czyli odebrano webmasterom coś, czego nie trzeba było odbierać. Nie widzę żadnego powodu dla którego należy ograniczać :visited wszystkim linkom. Może jest jakiś istotny powód, o którym nie wiem?

Co teraz stracimy?

Załóżmy, że mamy stronę którym linki do prac / artykułów / czy czegokolwiek innego są ułożone w taki sposób, że najpierw znajdują się linki do stron nieobejrzanych, a dopiero po nich cała reszta, z którą odwiedzający się zapoznał. Do tej pory działało to tak, że za pomocą jQuery linki były sortowane.

Drugi przykład: Na swoim blogu pod wpisami chce umieścić linki do nieczytanych przez Ciebie wpisów - zrobiłbym to ukrywając te przeczytane za pomocą CSS. Teraz już tak się nie da.

Kolejny przykład: mam portfolio ze zdjęciami - miniaturki obejrzane przyciemniam tak, aby te nieodwiedzone rzucały się w oczy.

Sposobów na wykorzystanie :visited jest wiele. Teraz nie będziemy mieli tak łatwo. Warto zwrócić uwagę, że opisywane przykłady dotyczą linków 'lokalnych' (nie wychodzących poza określoną domenę).

Przykładów kiedy funkcjonalność z linkami 'zewnętrznymi' byłaby ograniczona, będzie z pewnością mniej. Tutaj podpadłby przykładowo Jogger ze swoimi linkami do blogów.

A co zrobić jeśli koniecznie potrzebujemy zachować :visited?

Dla linków wychodzących poza domenę nie istnieje sposób całkowitej 'reaktywacji'. Dla linków 'wewnętrznych' już tak. Wystarczy wykorzystać cookies. Sposób niezbyt idealny, ale jeśli ktoś uważa, że zaznaczenie linków odwiedzonych jest ważne na jego witrynie, to bez większych problemów może takie rozwiązanie wdrożyć.

Gdy gość na stronie odwiedzi daną podstronę, to w cookies zostaje zapisana informacja o tym w postaci id strony, czy też innej cechy wyróżniającej. Dzięki temu dostaniemy listę podstron odwiedzonych. Następnie trzeba te informacje wykorzystać w przypadku konkretnych linków, np. tych z portfolio, itd przypisując im odpowiednią klasę.

Czyli w projekcie zamiast a:visited można używać a.visited.

Do zaznaczania linków rozsianych w treści taka metoda będzie bardzo nietrafiona. Tutaj swobodnie wystarczy zmiana tła, koloru tekstu, czy dodania podkreślenia (border-bottom).

Coś jeszcze?

W jednym z kolejnych wpisów opiszę (wraz przykładem) w jaki sposób wyciągnąć od gości na stronie (korzystających z Firefoksa 4) informacje na temat tego, czy odwiedzają strony 'z pewnymi treściami' - oczywiście bez ich wiedzy ;)

Jeśli znalazłeś jakieś błędy powyżej, to napisz.

Co jakiś czas w Internecie pojawiają się głosy o tym, jak to zły Gugiel nie pozwala na określone działania webmasterom, ogranicza ich swobodę, itp. Przykładowo Google nie lubi sprzedawania linków i ich wymiany gdy brak jest atrybutu nofollow w tych linkach. Przykładów można wymieniać wiele. Temat chyba wszystkim znany przynajmniej w małym stopniu.

Ja jednak nie widzę problemu w tym wszystkim. Jeśli komuś nie podobają się zasady Google, to po prostu się do nich nie stosuje. Przecież nie ma obowiązku aby to robić. Proste.

Wiem, że w tej chwili wiele osób nie zgodzi się ze mną - tak więc zanim przejdę do głównego tematu muszę coś uściślić. Popatrzmy na takie dwie sytuacje...

Mamy pewien bank Q który oferuje atrakcyjne warunki prowadzenia konta:

1. Y staje się jego klientem. Po jakimś czasie bank zwiększa wybrane opłaty kilkukrotnie korzystając z tego, że większość klientów będzie od niego już uzależniona w jakimś stopniu - numer twojego konta znajduje się w wielu instytucjach, posiadają go twoi liczni klienci, itd.

2. Z staje się klientem banku już po podwyżkach.

Który z klientów powinien mieć więcej powodów do narzekań? Czy bank miał prawo tak potraktować swoich obecnych klientów?

Można wiele o tym pisać. Tutaj chodzi tylko o jedno - w dalszej części wpisu będę pisał tylko o 'kliencie z przypadku nr 2', czyli o takim, który doskonale wie, do czego 'wchodzi'. Google swoich zasad nie ustaliło wczoraj (mam tu na myśli szczególnie jedną zasadę: nie manipulowanie wynikami).

Popatrzmy teraz jak cała sprawa wygląda od strony Google? Co by się przykładowo stało, gdyby Google zmieniło swoje zasady i nie filtrowało stron które podbijają sobie pozycję sztucznymi linkami?

Powstałby niezły chaoos - wyniki wyszukiwań zależałyby tylko od zawartości portfela właściciela, pojawiłyby się strony o niskiej jakości na pierwszych miejscach, nawet w przypadku mało popularnych fraz. Te dobre strony spadłyby gdzieś dalej, itd.

Czy 'takie coś' byłoby atrakcyjne dla użytkowników wyszukiwarki Google? Zdecydowanie nie.Google stałoby się śmietnikiem do którego nawet nie warto by było zaglądać. Spadek popularności swojego produktu jest ostatnią rzeczą o jakiej marzy jakakolwiek firma. Tak więc nie ma nic dziwnego w tym, że Google dba o jakość swojego produktu.

Relacja Google - Webmaster to taka symbioza. Google coś daje właścicielom stron (reklamę), a w zamian chce przestrzegania kilku zasad aby utrzymać jakiś tam porządek (jaki sobie ustalili).

Bycie w Google to nie jedno z podstawowych praw człowieka które należy się wszystkim.

Wyszukiwarka Google nie jest utopijnym dobrem wspólnym wszystkich internautów, czy też organizacją charytatywną, dlatego nie rozumiem 'oburzenia' które co jakiś czas gdzieś w sieci się pojawia (szczególnie na forach 'pozycjonerów'). Przypominam, że piszę o ciągle klientach typu '2'.

Tu Google. Witamy Cię w naszej piaskownicy. Tutaj otrzymasz pewne korzyści. Mamy też pewne jasno określone zasady których staramy się trzymać... Jeśli chcesz tu zostać to musisz ich przestrzegać. Nie trzymamy Cię tutaj na siłę - jeśli Ci coś nie pasuje, to wyjdź. Jeśli będziesz robił nam bałagan, to sami Cię wyprosimy.

Google ustaliło, że pozycja strony ma być uzależniona od jakości, a nie od wagi portfela właściciela i stara się tego trzymać (mniej, lub bardziej skutecznie). To jest ich zasada.

Po co ludzie kupują i sprzedają linki? Wiadomo, dla reklamy i kasy. W czym przeszkadza im atrybut nofollow w linkach? Gość na stronie nie ma pojęcia, czy klika na link z nofollow, czy też bez niego. Reklama to reklama. Link to link.

Jednak ludziom to przeszkadza? Dlaczego? A dlatego, że taki link nie jest brany pod uwagę przez Google właśnie - innych powodów już nie ma.
Czyli wiemy do czego to całe kupowanie i sprzedawanie linków się sprowadza (mówiąc oczywiście o tych, którym nofollow przeszkadza).

Gdyby nie Google to handlu linkami by nie było (inne wyszukiwarki pomijam dla uproszczenia). Ludzie sprzedają linki tylko po to, aby zmieniać wyniki Google (stąd tak im przeszkadza nofollow).

'Link bez nofollow' to 'produkt' wykreowany przez Google. Bez Google linki nieposiadające nofollow nie miałyby żadnej dodatkowej wartości, tak więc istniałby tylko 'produkt' z innym zastosowaniem zwany 'linkiem' (bez wyróżniania braku lub istnienia atrybutów rel).
'Linki bez nofollow' poza obszarem Google znaczą tyle, co Eurogąbki na Facebooku.

To 'trochę' pachnie hipokryzją - ludzie uważają, że Google ma dawać im pewne korzyści, ale jednocześnie nie może stawiać warunków tym (i tylko tym), którzy tą pewne korzyści chcą otrzymywać.

Zrozumiałbym to całe oburzenie, gdyby Google narzucało coś wszystkim webmasterom, a tak nie jest.
Webmaster może sobie sprzedawać setki płatnych linków, umieszczać te linki w kolorze tła w stopce, czy też umieszczać ukrytą poprzez CSS treść z licznymi tagami <h1>, najpopularniejszymi słowami, czy co tam ktoś może sobie tylko wyobrazić.

Jako właściciel strony oceniam z czego będę miał więcej korzyści: czy z darmowego zaistnienia w wynikach wyszukiwania pewnej komercyjnej, a nie charytatywnej firmy, czy też może ze sprzedaży płatnych linków bez nofollow, itd.

Jak ktoś ocenia, że to drugie ma dla niego większe znaczenie, to olewa Google, ale niech nie ma pretensji o to, że Google olało jego przy okazji. Takie są prawa wolnego rynku.

Jestem tego zdania, że właściciel piaskownicy ma prawo ustalać zasady jakie w niej panują (co niestety nie jest oczywistością). Gość się dostosuje, albo nie jest wpuszczany. Jak komuś nie pasują zasady, to szuka sobie innej piaskownicy, albo tworzy własną, z własnymi zasadami.

Właściciel strony musi wybrać czego chce. Zgadzasz się na pewne warunki i dostajesz pewną korzyść, albo... (wiadomo).

Gdyby 'wejście do Google' nie było czymś domyślnym, to myślę, że problem nie istniałby w takiej skali, bo ze zrozumieniem całości nie byłoby aż takich problemów.

Google nie zmusza nikogo do przestrzegania jego zasad. To ludzie chcą przestrzegać tych zasad, aby otrzymać za to pewne korzyści - pojawienie się w wyszukiwarce.

Idąc dalej mogę powiedzieć, że jeśli właściciel piaskownicy X chce domyślnie dostarczać gościom własne łopatki w kolorze niebieskim, to jest to tylko i wyłącznie jego prywatna sprawa. Nikt nie powinien zmuszać go, aby dostarczał łopatki w innych kolorach, tym bardziej, jeśli po prostu łopatkami w innych kolorach się nie zajmuje. Jeśli komuś nie pasuje kolor niebieski, to przynosi własną łopatkę.

Ale okazuje się, że 'ktoś' może zmusić właściciela piaskownicy X, aby oprócz własnych niebieskich łopatek dostarczał także łopatki konkurencji w innych kolorach. Czy to już nie jest absurdem?
Jasne że jest (a to już moje lekkie zejście z głównego tematu).

Czy z Google i jego zasadami związanymi z wyszukiwarką może być podobnie? Wszystkiego można się spodziewać. Może 'ktoś' zabroni tego, aby Google samo zarządzało swoją własną piaskownicą i 'ktoś' tym samym zmusi Google do tego, aby 'jakość strony' została zamieniona na 'jakość portfela' przy tworzeniu wyników wyszukiwania?

Mało prawdopodobne? Może. Ale z drugiej strony przypominając sobie sprawę z 'niebieskimi łopatkami'...?

Nie za bardzo lubię strony flashowe. Dzisiaj mam do tego kolejny powód. Jeśli czeka Cię posiłek, to nie czytaj tego wpisu.

Projektujesz strony www? Pamiętaj - masz do dyspozycji obszar przeglądarki, czyli tylko i wyłącznie określoną dwuwymiarową przestrzeń - nie wychodź poza nią zanim użytkownik wyraźnie nie zaznaczy, że tego chce. Czyli dźwięk na stronie www wtedy i tylko wtedy gdy ja tego chce. To nie jest trudne, wystarczy trochę się postarać.

A jeśli już chcesz pochwalić się swoją, nazwijmy to, 'kreatywnością', to rób to zawsze ze smakiem. Zawsze...

Pewna 'agencja internetowa' tego nie potrafi. Wiem, że można budować swój wizerunek na nietypowych pomysłach, ale należy robić to tak, aby potencjalny klient nie tracił ochoty na czekający go obiad.

Jeśli chcecie zwrócić na siebie uwagę, to róbcie to tak jak należy. Trzymajcie poziom.
Marketing internetowy kieruje się ciągle w stronę kiczu, braku elegancji i smaku. To co za chwilę pokaże jest idealnym tego przykładem.

Agencja Interaktywna '4Kroki' przygotowała swoją stronę oczywiście w oparciu o flash. Większość tworów nazywających się 'agencjami interaktywnymi' (AI) wybiera właśnie taki sposób prezentacji. Większość z tej większości zapomina o czymś takim, jak wersja alternatywna strony - to nic, że w rubrykach "czym się zajmujemy" znajduje się zawsze "projektowanie stron www". Przecież każdy wie, że aby projektować strony www nie trzeba umieć projektować stron www.

Czym może wyróżniać się agencja zajmująca się reklamą, tworzeniem stron www i całym tym zestawem zarezerwowanym dla tworów określanych 'agencjami interaktywnymi'?

Profesjonalne intro
Intro to nieodłączny element stron flashowych należących do AI. Można je zrobić dobrze, ale można także je zrobić źle. Dzisiaj przykład z drugiej kategorii.

Wystarczy obejrzeć intro AI 4K aby przekonać się, co mam na myśli mówiąc o marketingowym kiczu.

Kobieta 'wydalająca' kotlet poprzez usta do najprzyjemniejszych widoków nie należy. Do tego dochodzą jeszcze te dokładnie podkreślone odgłosy. Całość gwarantuje, że ochotę na posiłek można stracić łatwo.

Gdyby intro zostało usunięte / zamienione, to poniżej wstawiam film nagrany bezpośrednio z przeglądarki.

Może jakaś kolejna 'agencja interaktywna' pokusi się o stworzenie intra w stylu goatse? Jak szaleć, to do końca?
Dolna granica kiczu nie istnieje, tak więc można wykazywać się swoją 'kreatywnością' do woli - ograniczeń nie ma.