jQuery. Poradnik programisty jest jedną z pierwszych książek traktujących o jQuery w Polsce. Podchodząc do jej lektury miałem mieszane uczucia. Spis treści wskazywał raczej na tłumaczenie dokumentacji, a ilość stron (raptem 270) utwierdzała mnie w tym przekonaniu. Niemniej byłem ciekawy, czy książka ma coś do zaoferowania osobie, która na co dzień korzysta z tytułowej biblioteki. Bardzo mnie zastanawiała kwestia sposobu, w jaki jest ona zorganizowana. Czy autor poprzestał na przetłumaczeniu ogólnodostępnej dokumentacji, czy też odrobił pracę domową i stworzył solidny przewodnik? Wreszcie czy będzie to suchy tekst, o którym zapomnę dzień po zakończeniu lektury, czy też często będę do niej powracał, szukając rozwiązania jakiegoś problemu?

Książka została podzielona na trzy części: abecadło, interfejs API oraz wtyczki. Pierwsza część jest przeglądem możliwości jQuery, druga zawiera pełny opis biblioteki, a ostatnia w bardzo przystępny sposób prezentuje proces tworzenia wtyczek. Każda z części została dodatkowo podzielona na rozdziały, odzwierciedlające zagadnienia związane z jQuery, np. selektory, manipulacja drzewem DOM, czy AJAX. Co więcej, każdy z rozdziałów został tak przygotowany, by teoria stanowiła jak najmniejszą jego część. Po krótkim wstępie wyjaśniającym bieżące zagadnienie, autor na przykładach pokazuje praktyczne możliwości biblioteki. Przykłady te nie są oderwanymi od rzeczywistości zadaniami akademickimi (takie też się zdarzają), tylko pełnoprawnymi skryptami, które można później wykorzystać, np. wtyczka karuzela do przeglądania zdjęć.

Podczas objaśniania kilku przykładów, autor posłużył się rozszerzeniami przeglądarki Firefox i delikatnie sugerował, że każdy, kto na poważnie myśli o korzystaniu z jQuery, również powinien z nich korzystać. Mowa tutaj o rozszerzeniach Firebug, LiveHttpHeaders oraz Web Developer Toolbar.

Na początku tej recenzji podzieliłem się z wami moimi obawami w stosunku do tej książki. Czy się potwierdziły? Nie. Okazało się, że były one mocno przesadzone. Książkę mogę śmiało polecić wszystkim, którzy chcieliby zapoznać się z jQuery. Wbrew moim przewidywaniom nie jest to bezmyślnie przetłumaczona dokumentacja, tylko dobrze zaplanowana książka, płynnie przechodząca między zagadnieniami. Jeśli znacie jQuery na tyle dobrze, że nie musicie zaglądać do dokumentacji i macie na koncie kilka wtyczek, książka będzie raczej stanowiła suplement dokumentacji, niż źródło wiedzy. Nie da się nie odnieść wrażenia, że została przygotowana pod kątem osób stawiających pierwsze kroki w świecie jQuery.

Podsumowując. jQuery. Poradnik programisty jest solidną książką, która powinna znaleźć się w biblioteczce każdego, kto chciałby rozpocząć przygodę z tą biblioteką. Jeśli nadal zastanawiasz się nad wyborem biblioteki Javascript, z której będziesz korzystał, ta książka znacznie ułatwi Ci wybór.

 

Powyższa recenzja ukazała się również na łamach serwisu Software.com.pl, pod adresem http://software.com.pl/recenzja-jquery-poradnik-programisty/

Nie ma wątpliwości, że praca programisty polega na ciągłym rozwoju i doskonaleniu swoich umiejętności, szlifowaniu wiedzy, poznawaniu nowych technik i automatyzacji przestarzałych. Także i ja dbam o odwiedzających mój blog, a więc zamieszczam kolejny zbiór ciekawych i pouczających linków :-) Poniżej prezentuję kolejne darmowe artykuły i książki dla programistów, ciekawe odnośniki, mówiąc pokrótce – zasoby, [...]

Dwa tygodnie temu (15 września) Microsoft zaprezentował światu najnowszą wersję przeglądarki Internet Explorer, oznaczoną numerem 9. Obok długo wyczekiwanej obsługi aktualnych standardów oraz znacznej poprawie wydajności, zaprezentowano szereg usprawnień wprowadzonych do przeglądarki. Najciekawszym z nich jest funkcjonalność nazwana Pinned Sites.

Co to jest?

Pinned Sites jest mechanizmem pozwalającym przypinać konkretne strony internetowe do paska zadań i korzystać z nich tak, jakby to były zainstalowane na komputerze aplikacje. Pinned Sites najlepiej będzie działać w Windows 7 i na tym właśnie systemie operacyjnym się skupię.

Oczywiście kolejne miejsce, w którym trzymamy odnośniki do ulubionych stron nie byłoby niczym ciekawym, gdyby nie kilka drobiazgów, dzięki którym przypięta strona jest bardziej funkcjonalna od jej standardowej odpowiedniczki. Po pierwsze, favicon staje się ikoną widoczną na pasku zadań. Po drugie, mamy możliwość zdefiniowania najpopularniejszych zadań dostępnych z poziomu Jump List. Na koniec mamy możliwość nałożenia na ikonę w pasku zadań grafiki sygnalizującej jakieś zdarzenie, które może nas zainteresować.

Po co to wszystko?

Najlepszym przykładem zastosowania Pinned Sites będzie webmail. Po przypięciu takiej strony do paska zadań, Jump List będzie zawierał linki do skrzynki odbiorczej, nowej wiadomości oraz ustawień, a ikona będzie zmieniała się w momencie odebrania wiadomości.

Jak tworzyć Pinned Sites?

Pinned Sites nie wymagają od nas znajomości ani języka C#, ani wiedzy na temat środowiska .NET. Wszystko sprowadza się do kilku tagów meta umieszczonych w nagłówku dokumentu HTML oraz kilku prostych funkcji Javascript.

Zacznijmy od zdefiniowania ustawień aplikacji.

<html>
	<head>
		<title>pinned site</title>
		<meta name="application-name" content="pinned site example" />
		<meta name="msapplication-tooltip" content="run pinned site example" />
		<meta name="msapplication-starturl" content="pinned-apps.html" />
		<meta name="msapplication-window" content="width=800;height=600" />
		<meta name="msapplication-navbutton-color" content="red" />
	</head>
	<body>
		<div>
			hello world!
		</div>
	</body>
</html>

Dzięki pięciu widocznym powyżej znacznikom meta nasza przypięta strona zyskała kilka interesujących właściwości. Są to:

Czytaj dalej tutaj (rozwija treść wpisu)
Czytaj dalej na blogu autora...

Zwiń
Czytaj na blogu autora...

Najprawdopodobniej po przeczytaniu tytułu tego wpisu pierwszą myślą, która przyszła Ci do głowy było „wielowątkowość” i „JavaScript” razem? To musi być jakiś błąd. Pocieszę Cię jednak! To nie jest błąd i w niniejszym wpisie opiszę nową, pojawiającą się dopiero w przeglądarkach technologię – Web Workers. Umożliwia ona tworzenie wielowątkowych aplikacji z wykorzystaniem JavaScript. Aby tworzone [...]

Każda osoba, która chociaż raz musiała wycinać średnio skomplikowany layout, stawała przed dylematem "jak zaokrąglić te przeklęte rogi". Są dwie możliwości - obrazkowa oraz stylowa. W przypadku metody obrazkowej wszystkie zaokrąglenia są zapisywane jako grafika, która następnie jest osadzana w nadmiarowych elementach HTML. Podejście to jest przede wszystkim niezawodne. Każda przeglądarka identycznie wyświetli zamieszczone grafiki. Schody zaczynają się w momencie, gdy zachodzi potrzeba przebudowania wyglądu strony. Zmiana promienia, czy nawet czegoś tak błahego jak kolor obramowania, staje się w tym momencie udręką. Do pracy, w najlepszym wypadku, należy zaprząc jakiś program graficzny, w najgorszym - całego grafika ;), przez co prosta zmiana staje się wyzwaniem na dobrych kilka godzin. Drugie podejście polega na skorzystaniu z dobrodziejstw postępu, czyli z CSS. Kilkanaście znaków w pliku ze stylami może zdziałać cuda.

border-radius: 10px;

Niestety taki zapis zadziała tylko w Operze oraz Google Chrome. Nie oszukujmy się. Ilość osób, która zobaczy, że nasza strona posiada zaokrąglone rogi, jest znikoma. Co z resztą przeglądarek? Ich autorzy wprowadzili prefixy (np znany z Firefoxa -moz). Dzięki temu można wprowadzić "krągłości" w pozostałych przeglądarkach.

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

Niestety powyższe rozwiązanie nadal nie spowoduje, że większość odwiedzających naszą stronę nie zobaczy jej tak, jakbyśmy tego chcieli. Pozostaje problem z przeglądarką Internet Explorer. Dopiero wydana niedawno wersja beta oznaczona numerem 9 radzi sobie z czymś tak banalnym. Nie zmienia to jednak faktu, że większość użytkowników ma pecha i korzysta z IE6, 7 lub 8.

I tutaj dochodzimy wreszcie do meritum dzisiejszego wpisu. Niestety nie ma rozwiązania tylko "stylowego". Musimy skorzystać z pomocy Javascript i VML. Nie martwcie się jednak. Nie będziemy nic pisać, skorzystamy po prostu z gotowej biblioteki. Mowa tutaj o DD_roundies, której autorem jest ta sama osoba, która stworzyła jedyny działający fix na obrazki png w przeglądarce IE6. Jedyne dwie czynności jakie mamy do wykonania, to dołączenie pliku z biblioteką do strony oraz wywołanie metody addRule na obiekcie DD_roundies. Metoda przyjmuje trzy parametry. Pierwszym jest selektor CSS, wskazujący na interesujący nas element (wymagany), drugim wartość zaokrąglenia (wymagana). Ostatnim (opcjonalnym) parametrem jest informacja, czy zaokrąglenie ma zostać wykonane tylko w przeglądarce IE (domyślne ustawienie).

Cały kod wygląda następująco:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css">
		#some-id {
			/* przykładowe wartości */
			width: 200px;
			height: 200px;
			border: 1px solid #cccccc;
			
			
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
			border-radius: 10px;
		}
		</style>
		<script type="text/javascript" src="DD_roundies_0.0.2a-min.js"></script>
		<script type="text/javascript">
		window.onload = function() {
			DD_roundies.addRule("#some-id", "10px");
		}
		</script>
	</head>
    <body>
		<div id="some-id"></div>
	</body>
</html>

Jeśli chcecie zobaczyć na żywo jak to wygląda, zapraszam do obejrzenia dema.

Na koniec dodam jedynie, że nie jest to "ultimate solution" i na pewno znajdą się sytuacje, w których znacznie lepiej będzie zastosować obrazki. Niemniej we wszystkich moich ostatnich próbach (wprawdzie nieśmiałych i na niewielką skalę), skrypt ten spisał się na medal.

Większość developerów w ostatnich czasach zaczyna coraz częściej korzystać z CDN Google czy Microsoftu celem załadowania jQuery, Prototype czy innego frameworka do JavaScript. Jest w tym mnóstwo korzyści i sam też tak robię. Co jeśli jakimś cudem nie uda się połączyć z zewnętrznym serwerem? Strona pozostanie bez najważniejszej biblioteki, przez co reszta naszych skryptów nie [...]

Najpopularniejszym serwisem dostarczającym mapy w Internecie jest Google Maps. Nie oznacza to, że konkurencja pogodziła się z porażką na tym polu. Jedną z ciekawszych alternatyw dla Google Maps jest Bing Maps. Oprócz API dostępnego w języku Javascript programiści mogą korzystać z Silverlighta oraz usług sieciowych. Co więcej, programiści PHP również mają możliwość korzystania z map Bing. Gdyby nie jeden drobny szkopuł, Google mogłoby poważnie obawiać się konkurencji ze strony Bing Maps. Niestety mapy w wydaniu Bing nie są zlokalizowane na polski rynek i wyszukanie adresu lub trasy dojazdu graniczy z cudem.

Zanim zaczniemy

Do tworzenia aplikacji opartych o Bing Maps będzie potrzebny nam specjalny klucz. Możemy go zdobyć na stronie www.bingmapsportal.com, do której zalogujemy się korzystając z konta, np Hotmail. Po założeniu konta uzyskujemy możliwość wygenerowania klucza aplikacji, który później będziemy wykorzystywać. Jako ciekawostkę podam, iż konto utworzone w serwisie dla deweloperów Bing Maps daje nam możliwość śledzenia wykorzystania naszych map oraz dodawania własnych aplikacji do map. Ponieważ oba tematy wykraczają daleko poza ramy dzisiejszego wpisu, nie będę się nimi szerzej zajmował.

Podczas tworzenia aplikacji korzystającej z Bing Maps nie musimy od razu rejestrować klucza. Można to zrobić po zakończeniu prac, dzięki czemu statystyki nie będą zawierały testowych odsłon.

Pierwsza mapa

Podobnie jak w przypadku swojego konkurenta, Bing Maps również wymaga zewnętrznego skryptu, z którego będą ładowane klasy. Adresem tym jest

http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3

gdzie 6.3 oznacza numer wersji, z której chcemy skorzystać.

Kompletny kod, który wyświetli mapę, wygląda następująco.

<html>
	<head>
		<title>Pierwsza mapa</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<script type="text/javascript" src=http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3></script>
		<script type="text/javascript">
		var map = null;
		function GetMap()
		{
			map = new VEMap("mapa");
			map.LoadMap();
		}
		</script>
	</head>
	<body onload="GetMap();">
		<div id="mapa" style="position: relative; width: 600px; height: 400px;"></div>
	</body>
</html>

Uruchomienie powyższego kodu spowoduje wyświetlenie domyślnej mapy o rozmiarze zdefiniowanym w atrybucie style.

zobacz przykład

Czytaj dalej tutaj (rozwija treść wpisu)
Czytaj dalej na blogu autora...

Zwiń
Czytaj na blogu autora...