DeBlog

Nakład pracy spowodował, że nieboraczka Natalia wpadła w sidła szaleństwa. Jedynie pies-egzorcysta może jej pomóc!

Pyczuś!

Ostatnimi czasy po raz kolejny, przy okazji tworzenia serwisu narciarskiego, musiałem stworzyć obsługę mapki z krajami. Same linki do poszczególnych krajów same w sobie nie stanowią żadnego problemu. Pojawia się on w momencie gdy dany kraj po najechaniu na jego terytorium, ma się podświetlić.

Przykład:
http://blog.desmart.com/wp-content/uploads/2008/mapa/

Rozwiązanie:

HTML:

JS (wymaga biblioteki
mootools):

Opis:

Obiekt JS dodaje do każdego z elementów <area> akcje mouseover i mouseout. Po najechaniu na kraj pobierany jest jego id które umożliwia ustawienie odpowiedniej classy elementowi #hover_el. W plikach css zdefiniowane są pozycje x i y, grafiki z podświetlonymi poszczególnymi krajami oraz ich rozmiary. Dzięki temu element #hover_el pojawia się w odpowiednim miejscu. Event mouseout służy tak naprawdę tylko do usuwania jakiegokolwiek zaznaczenia, gdy użytkownik wyjedzie poza mapkę.

Do rozwiązania pozostał jeszcze jeden problem. Element #hover_el jest divem więc nijak nie zmusimy go aby był poligonem (zawsze będzie prostokątem). Przesuwając więc kursor z jednego kraju o nieregularnym kształcie na inny nierzadko mogliśmy spotkać się z sytuacja gdy podświetlenie nie znikało z poprzedniego kraju, ponieważ kursor wciąż znajdował się na aktywowanym elemencie. Oto przykład:

Przedstawiony powyżej kod posiada już obejście tego problemu. Nakłada on mapę odsyłaczy nie na sam plik z mapą ale na przeźroczystego gifa:

<img src=”/images/blank.gif” id=”big_map_europe_dot” usemap=”#map-europe” alt=”"/>

który znajduje się na samej górze, pod nim przemieszczany jest #hover_el a na samym dole wyświetlana jest mapa.

Takim oto sposobem możemy cieszyć oko funkcjonalną mapą europy :)

Dzisiaj miałem dość ciekawą sytuację, której rozwiązanie zajęło mi dobre 20 minut. Otóż na linki nałożyłem event onClick. Po kliknięciu na nie odczytywałem z atrybutu ‘href’ co tam w nich jest (dodam, że każdy url miał href’a - “#cos”), usuwałem hash’a i wykonywałem jakąś czynność w zależności od tego co zawierał.

Usuwanie hasha wykonywałem całkiem banalnie. Najpierw za pomocą metody Mootoolsowej pobierałem atrybut ‘href’ (metodą getAttribute) i później już tylko zamieniałem:
href.replace(/#/, '');

Oczywiście Firefox łykał to wszystko bardzo ładnie. Niestety IE7 już nie. Co się okazało ? IE wstawiało do atrybutu href pełen adres przez co zamiast mieć tam “#foo” miałem “http://serwer.com/#foo”. Jak łatwo można się domyślić nie byłem w stanie wyłapać tylko tego co jest za hashem, dlatego trzeba było nieco zmodyfikować pattern na coś takiego:
href.replace(/.*#/, '');

Teraz wszystko gra i efekt jest dokładnie taki jaki miał być :) Dziwne są cuda IE :P

PS. sprawdziłem sobie na innej stronce podobny mechanizm, ale w surowym JSie. Wszystko wskazuje na to, że to JSowe frameworki same wycinają pełną nazwę hosta. Na stronie
jogger.pl odpaliłem z konsoli JS Firebuga taki kod:
document.getElementsByClassName('next')[0].href

Wynikiem był pełen URL, wraz z nazwą hosta. Natomiast wykorzystany na tamtej stronie
jQuery zwracał jedynie wartości od hash’a do końca linii.

Znamy już w miarę dobrze
sIFRa używaliśmy go przy okazji np. strony
GetZZZ. Dzisiaj znalazłem podobne
rozwiązanie które nazywa się FaceLift.

Generuje on obrazki z różnymi czcionkami w locie po stronie serwera czyli PHP + GD a nie jak sIFR po stronie przeglądarki (Flash). Na pewno jest łatwiejszy w implementacji jednak nigdzie nie doczytałem informacji o obsłudze UTFa. Jakiś czas temu próbowałem za pomocą GD zrobić parę polskich “krzaków” ale niestety nie wyszło mi to :(

Być może było to winą niepoprawnej czcionki (która nie miała w sobie znaków z puli UTF8) -  nie badałem tego tak dokładnie. Innym problemem z generowaniem obrazków po stronie serwera jest jego obciążenie. Oczywiście wygenerowany obrazek jest cachowany po stronie serwera (a więc napis jest generowany tylko raz) pozostaje jednak problem, że nadal wszystkie takie obrazki są przetwarzane przez PHP.

W przypadku “zwykłego” pobierania obrazków jest on serwowany bezpośrednio przez Apache’a, w przypadku generowanego niestety zawsze uruchamiany jest PHP co dodatkowo obciąża serwer (niewiele ale jednak). Rozwiązaniem jest nasz pomysł z wcześniejszym sprawdzaniem (przed wygenerowaniem strony) czy dany obrazek znajduje sie w cache’u i wygenerowanie URLa bezpośrednio do obrazka zanjdującego sie w cacheu.

Podejrzewam, że nie wszyscy wiedzą, że Firebug ma małą pomocną funkcjonalność “poboczną”, którą niedawno przypadkiem odkryłem. Jak wiadomo, gdyby nie Firebug to debugowanie zapytań ajaxowych byłoby w ogóle masakrą. Dzięki FB jakoś dajemy radę. Można sobie w funkcji zrobić var_dump’a, albo print_r’a i w konsoli FB wyłuskać wynik. Ale ze względu na wyświetlenie w konsoli html’a jako tekstu, var_dump praktycznie odpadał. Ale jeżeli ktoś czuje się bardziej związany emocjonalnie z var_dump’em ;) to w końcu dochodzimy do tego co znalazłem - jeżeli w odpowiedzi na zapytanie w konsoli FB mamy wysyp kodu html, można na nim kliknąć MMB/wałkiem, a Firefox otworzy nam go w nowej karcie, zinterpretowanego i pokolorowanego :)

That’s all, folks :) Mała rzecz, a cieszy ;)

ps. Tylko że nie zawsze to działa… ;P

Dzisiaj z rana znaleźliśmy fajny sposób na debugowanie kodu w php. Instaluje się jako dodatek do firebuga, dzięki czemu można wyświetlić zawartość zmiennej czy tablicy bez ingerencji w układ strony i otwierania popupów. Bibliotekę można znaleźć na
http://www.firephp.org.

Składa się ona z 2 modułów:

• wtyczki do firefoxa, integrującej się z
  firebugiem,
• funkcji / klasy napisanej w php którą trzeba podłączyć do swojego kodu php

potem wystarczy już tylko:

i już w zakładce console wyświetli się odpowiedni string :)

dokładny opis i możliwości znajdziecie bezpośrednio na
stronie wtyczki

Ponad tydzień temu 6 czerwca w stolicy gościliśmy pracowników Adobe, którzy przybyli do Nas szerzyć swoją “nową, rewolucyjną” technologię. Miałem przyjemność uczestniczenia w tej konferencji, którą oceniam jako na prawdę udaną!

Przede wszystkim należy docenić Ewangelistów z Adobe, którzy wkładają w to co robią bardzo dużo serca. Byli świetnie przygotowani, potrafili przedstawić prezentowany temat w bardzo przystępny, nie rzadko zabawny sposób. Po każdej z 2 - 3 prezentacji odbywała się krótka przerwa podczas której można było wrzucić coś do żołądka, wchłonąć trochę kofeiny z redbulla, pograć na Xboxie lub Wii, czy też co uważam za najcenniejsze porozmawiać z prelegentami z Adobe na osobności.

I tak dzięki temu udało mi się wyciągnąć nieco informacji:

• jeszcze w tym roku powinniśmy spodziewać się wersji stabilnej środowiska w wersji dla Linuxa,
• podobnie możemy oczekiwać aktualizacji używanej w środowisku wersji Webkita,
• developerzy usilnie myślą nad możliwością uruchamiania innych programów z poziomu aplikacji AIR

Każdy do którego się zwróciłem starał się pomóc. Jeżeli nie znał odpowiedzi na zadane pytanie, wskazywał odpowiednią osobę do której mogłem się zwrócić.

Osobiście najbardziej zainteresował mnie sam Flex. Postanowiłem sobie że poznam go bliżej, co powinno być łatwiejsze dzięki gadżetom który otrzymał każdy z przybyłych. W których znalazła się między innymi ściągawka z API Flexowego. Każdy miał również możliwość wygrania Flex Builder 3 Professional i innych cennych fantów. Mi niestety zabrakło szczęścia :)

Każdy z ewangelistów posiada swojego bloga. Myślę że warto je na bieżąco śledzić. Ich adresy można znaleźć na stronach
onAIR. Dokładny zapis wideo, ma być dostępny na
http://onair.adobe.com/ w ciągu 2 tygodni. Za to już teraz można oglądać
zdjęcia umieszczone przez Mike’a Chambersa.

dokładną relację z konferencji można przeczytać na blogu
http://adobers.org/spotkania/adobe-on-air-tour-warsaw-2008

Ostatnio internet przysłał do nas link do strony, na której znajdowała się oferta (jedna z tych nie do odmówienia) skryptu powiększającego pewne miejsce na obrazku - i wszystko to dla jednorazowego wykorzystania za jedyne 25 funtów! (
http://www.magictoolbox.com/magiczoom) Jako, że nie miałem drobnych w kieszeni a potrzebowałem podobnego efektu, zamknąłem przeglądarkę i odbyłem niesamowitą przygodę po ciemnej stronie kodu - JavaScript z MooTools. Efektem tego był taki kod
ImageZoom.js.

Continue reading “ImageZoom - fajny sposób prezentacji zdjęć”

Wczoraj na
Ajaxianie pojawiła się krótka notka o sposobie na szybkie sprawdzenie który z elementów nie jest odpowiednio “wyclearowany”. Feature wydaje się być o tyle fajny, że pod IE6 czasem ciężko stwierdzić dlaczego layout się rozjeżdża, a Developer Toolbar przy zainstalowanym Multiple Ie działa tylko w IE7…

Jako że w naszej pracy głównie używamy biblioteki
mootools, postanowiłem nieco zmienić przedstawioną wersję tak by z współpracowała z nią a nie z
jQuery. A oto rezultat:

Bookmarklet - wystarczy wejść na stronę i wkleić tę linie do pasku adresu po czym kliknąć enter, lub jak sama nazwa wskazuje dodać do zakładek :)

Deweloperzy
Mootools - bardzo wydajnego i efektywnego frameworka JavaScript od ponad pół roku w pocie czoła pracują nad nową wersją 1.2. Już przed wypuszczeniem pierwszej wersji beta było wiadomo że

Some parts of MooTools 1.2 aren’t immediately compatible with those found in MooTools 1.1
…

Od poprzedniej wersji zostały wprowadzone zmiany dość niskopoziomowe takie jak tworzenie klas czy ich dziedziczenie.

Aby jednak umożliwić osobom wykorzystującym obecną wersję stabilną korzystanie z dobrodziejstw nowej, ulepszonej postanowiono udostępnić również wersję która będzie zapewniała zgodność z wersją 1.11.

Ostatnio postanowiliśmy sprawdzić jak nasze aplikacje działają z nową wersją MooTools. Jako, że serwis
baltic4you.pl jest ściśle powiązany z JavaScriptem (oparty jest w sporej części na tym frameworku) to testy zostały przeprowadzone właśnie na nim. Dodatkowo został sprawdzony DeForm - nasz system do tworzenia formularzy.

Na pierwszy ogień poszła wersja bez kompatybilności i… zgodnie z oczekiwaniami stworzona wcześniej aplikacja wysypała się zanim cokolwiek zdążyło się wykonać. Kolejna próba to test z wersją zapewniającą zgodność. Jednak jak się okazało “zgodność” to nie do końca odpowiednie słowo :).

Generalnie większość funkcjonalności działa poprawnie jednak niektóre generują błędy tak więc zmiana wersji okazuje się na dzień dzisiejszy nieco kłopotliwa. Stwierdziliśmy. że z problemem zmierzymy się dopiero gdy zostanie opublikowany Mootools 1.2 stable, by mieć pewność, że generowane błędy nie powstają z winy frameworka.

Na pewno możecie oczekiwać relacji z tego wydarzenia ;) A będzie się działo…