Dawid Pośliński » przeglądarki http://blog.poslinski.net Code is poetry. Mon, 06 Sep 2010 18:23:14 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Warto odwiedzić #2 http://blog.poslinski.net/warto-odwiedzic-2/ http://blog.poslinski.net/warto-odwiedzic-2/#comments Sun, 05 Apr 2009 08:37:30 +0000 Dawid Pośliński http://blog.poslinski.net/?p=136 wartood2Kolejna porcja linków, do ciekawych miejsc, które warto odwiedzić.

Często rodzi się problem, testowania na różnych przeglądarkach witryny www, a szczególnie pod kątem Internet Explorer, rozwiązanie pokazane tutaj, pozwoli zainstalować na każdym komputerze nawet IE 3.0, co niestety w normalny sposób, nie jest możliwe.
Jeżeli jednak, potrzebujemy sporadycznie sprawdzić jak wyświetla się strona, zachęcam ponownie do skorzystania z http://browsershots.org (które notabene, przeszło niedawno małą transformację).

Tworzenie strony www w oparciu o ASP.NET MVC – Darmowy eBook (dodatkowe info). Szczególnie przydatny teraz, gdy 1.0 ujrzało wreszcie światło dzienne. W dodatku źródła framework’a zostały otwarte.

Multi-Touch na Windows 7? – Opis How-To + wideo.

Czynniki sukcesu w biznesie – Autor wpisu opowiada o wrażeniach z wykładu Profesora Romana Kluski, na tegorocznym SFI.

Steve’a Ballmera nie da się nie lubić – Słów kilka na temat obecnego CEO Microsoft’u i nie tylko.

6 niezaprzeczalnie wymiatających narzędzi webmastera – Kilka bardzo interesujący rozwiązań bazujących na jQuery (dzięki Bartek).

Szachy i komputery – Omówienie problemu przetwarzania ruchów przez komputer w szachach. Na szczególną uwagę zasługuje rozdział: silne i słabe strony silników – przykłady.

ie6.pl – Na koniec coś co pomoże programistom, ale i użytkownikom pracować wydajniej i bezpieczniej, czyli „odstaw Internet Explorer 6 do lamusa”.

]]> http://blog.poslinski.net/warto-odwiedzic-2/feed/ 3 jQuery: find() http://blog.poslinski.net/jquery-find/ http://blog.poslinski.net/jquery-find/#comments Sun, 30 Nov 2008 19:03:27 +0000 Dawid Pośliński http://blog.poslinski.net/?p=35 jQuery to świetny framework JavaScript. Jeżeli jeszcze nie mieliście okazji z nim pracować, mam nadzieje, że poniższa publikacja, zachęci Was, do skorzystania z tego właśnie rozwiązania. Cechuje go bowiem szybkość, optymalizacja kodu, mająca na celu dostosowanie go pod jak największą liczbę przeglądarek, a także, co pewnie wielu zainteresuje najbardziej – prostota tworzenia złożonych rozwiązań.

W dzisiejszym artykule skupimy się na bardzo przydatnej metodzie find().

Jeżeli nie miałeś wcześniej do czynienia z tym frameworkiem, zachęcam do zapoznania się z podstawami selektorów, korzystając z oficjalnego API na temat selectorów, lub też z przygotowanego przez Bartosza Medonia kursu podstaw jQuery. Ta wiedza znacznie ułatwi pojmowanie zamieszczonych tutaj rozwiązań.

Najlepiej zajmijmy się jakimś konkretnym przykładem zastosowania tej metody. Na większości stron, jednym z podstawowych elementów służących do nawigacji jest menu. Spróbujemy stworzyć własne animowane menu, korzystając z minimalnej ilości elementów i działające pod każdą przeglądarka obsługującą JavaScript.

1. Przygotowanie elementów

Zacznijmy od stworzenia pustego dokumentu html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Menu</title>
</head>
<body>
</body>
</html>

Następnie pobieramy najnowszą wersję jQuery z oficjalnej strony projektu ( production ) i kopiujemy do folderu z naszym plikiem html.

Wewnątrz tego dokumentu, przydałaby się jakaś przykładowa treść, oraz nasze menu. Wykorzystajmy do tego tagi div oraz span. Oczywiście pozycje w naszym menu, powinny być linkami, zatem umieścimy je w bloku a. Całość umieścimy wewnątrz bloku div o id=menu. Dodany również plik z jQuery wykorzystując tag script. Całość powinna wyglądać mniej więcej tak:

<div id="menu">
<div>
<a href="#">#1 Menu</a>
<span>
<a href="#">#1.1 Menu</a>
<a href="#">#1.2 Menu</a>
<a href="#">#1.3 Menu</a>
</span>
</div>
<div>
<a href="#">#2 Menu</a>
<span>
<a href="#">#2.1 Menu</a>
<a href="#">#2.2 Menu</a>
<a href="#">#2.3 Menu</a>
<a href="#">#2.4 Menu</a>
<a href="#">#2.5 Menu</a>
</span>
</div>
<div>
<a href="#">#3 Menu</a>
<span>
<a href="#">#3.1 Menu</a>
<a href="#">#3.2 Menu</a>
<a href="#">#3.3 Menu</a>
<a href="#">#3.4 Menu</a>
</span>
</div>
<div>
<a href="#">#4 Menu</a>
<span>
<a href="#">#4.1 Menu</a>
<a href="#">#4.2 Menu</a>
</span>
</div>
</div><!-- end #menu -->
Jakaś tam przykładowa treść. Jakaś tam przykładowa treść.
Jakaś tam przykładowa treść. Jakaś tam przykładowa treść.
Jakaś tam przykładowa treść. Jakaś tam przykładowa treść.
Jakaś tam przykładowa treść. Jakaś tam przykładowa treść.
Jakaś tam przykładowa treść. Jakaś tam przykładowa treść.
<script type="text/javascript" src="jquery.js"></script>

Specjalnie umieściłem wiele pozycji w menu, aby pokazać jak łatwym, będzie odwołanie się do wielu z nich z poziomu jQuery, w zależności od tego, na który blok najedziemy myszką.

2. Zdefiniowanie wyglądu menu (css)

W tym dziale, zdefiniujemy wygląd wykorzystanych w pliku html, bloków kodu. Ja przygotowałem sobie, następujący fragment kodu ze stylem, umieszczony w sekcji head:

<style type="text/css">
<!--
* { margin: 0px; padding: 0px; }
a { text-decoration: none; font: 20px Georgia, "Times New Roman", Times, serif; }
html, body { margin: 10px; }

#menu { top: 0px; float: left; width: 100%; }
#menu div { position: relative; float: left; }
#menu div a:active, #menu div a:link, #menu div a:visited { display: block; position: relative; vertical-align: middle; background: #ccc; color: #fff; padding: 5px 10px; width: 150px; }
#menu div a:hover { background: #999; }
#menu div span { display: none;  position: absolute; top: 100%; left: 0; float: none; }
#menu div span a:active, #menu div span a:link, #menu div span a:visited { position: relative; display: block; float: left; top: 0px; background: #ddd; color: #fff; padding: 5px 10px; width: 150px; }
#menu div span a:hover { background: #999; }
-->
</style>

W naszym przykładzie tworzymy tylko proste dwupoziomowe menu, ale nic nie stoi na przeszkodzie, aby zmodyfikować je i dostosować do dowolnej ilości poziomów.

Jeśli już jesteśmy przy tej kwestii, warto również zapoznać się z frameworkiem do tworzenia css’owego menu.

3. Gwóźdź programu – find.

Tym oto sposobem, mamy przygotowaną całą stronę do implementacji kodu JavaScript. Wiemy także, o czym mowa, mówiąc selektor. W naszym przypadku, przykład jest dość prosty, albowiem mamy tylko 4 menu główne, ale nie trudno sobie wyobrazić, iż może być ich więcej, a każde z nich może mieć wiele rozgałęzień. To dyskwalifikuje metodę pętli, również wyklucza metodę brute-force, uwzględniającą przeanalizowanie wszystkich przypadków osobno. Jednak dzięki metodzie find, problem sprowadza się do jednej, bardzo czytelnej lini kodu, która zrealizuje za nas całe zadanie. Dobrze jest, aby nasz kod JavaScript znajdował się w $(document).ready, co zagwarantuje nam, odwoływanie się do niego, dopiero po załadowaniu strony, wszystkich zewnętrznych skryptów, stylów i innych plików.

<script type="text/javascript">
<!--
// <![CDATA[
$(document).ready(function(){
	$("#menu div").hover(
		function() {
			$(this).find("span").css({opacity:0.98}).slideToggle("fast");
		},
		function() {
			$(this).find("span").slideToggle("fast");
		}
	);
});
// ]]>
-->
</script>

Powyższy kod zalecam umieścić po znaczniku script, w którym odwołujemy się do jQuery, na dole strony.

W głównym selektorze, odwołujemy się do znacznika od id=”menu”, wewnątrz którego znajduje się znacznik div. Metoda .hover(), oznacza zdarzenie najechania myszki, na wybrany element i jako parametry, przyjmuje jedną lub 2 funkcje, które są realizowane podczas zainicjowania tego zdarzenia. Druga funkcja jest opcjonalna i jest wykonywana wówczas, gdy opuścimy kursorem obszar naszego elementu. Postarałem się tak przedstawić kod, aby obie funkcje były przejrzyste dla czytelnika, ale zalecam minimalizację kodu w funkcjonujących projektach.

Przeanalizujmy teraz kod wewnątrz funkcji. Znowu wykorzystujemy tutaj selektor, tym razem odwołujemy się od obiektu, w którym się znajdujemy. Każdy selektor jQuery zwraca obiekt, do którego możemy się odnieść przez klauzulę this. Jednak jeśli chcemy, wewnątrz elementu, odnieść się do elementu znajdującego się wewnątrz danego elementu, wykorzystujemy metodę find, która wyszukuje i zwraca wszystkie pasujące elementy. Należy o tym pamiętać, ponieważ jeśli chcemy odnieść się do jakiegoś konkretnego elementu, należało by zastosować na przykład klasę i odwołać się po przez .find(„.classNazwa”). Oczywiście, wewnątrz find, możemy również odnosić się do bardziej skomplikowanej struktury elementów, tak samo jak w selektorach jQuery.

Pierwsza funkcja jak widać, modyfikuje zwracany przez metodę find obiekt, i zmienia jego przeźroczystość, następnie, korzystając z metody slideToggle(), zainicjowana zostaje animacja, w tym przypadku, jest to animacja „zjeżdżania” na dół, o czym decyduje parametr display ustawiony na none w ustawieniach css elementu ( element jest niewidoczny, więc slide jedyne co może wykonać to pokazanie go ).

W przypadku drugiej funkcji, wszystko wygląda bardzo podobnie, z tą różnicą, że nie musimy już modyfikować opacity, albowiem zostało ono już zmienione. Zrobiliśmy to po przez jQuery, m.in. dlatego, ponieważ w css, nie było by to możliwe, w taki sposób, aby uzyskać pełną zgodność z validatorem w3c, a także, aby przeźroczystość wyświetlana była prawidłowo, na wszystkich nowoczesnych przeglądarkach obsługujących JavaScript.

4. Podsumowanie

Celem tego artykułu, nie było nauczenie się tworzenia animowanego menu, lecz, poznanie wielu ciekawych kwestii dotyczących metody find(), a także samego jQuery. Możliwości jakie niesie, są ogromne i mam nadzieje, że po lekturze tego artykułu, zyska ono kilku entuzjastów.

Natomiast efekt naszej pracy, możemy zobaczyć w demonstracji.

]]> http://blog.poslinski.net/jquery-find/feed/ 1 Przydatne narzędzia http://blog.poslinski.net/przydatne-narzedzia/ http://blog.poslinski.net/przydatne-narzedzia/#comments Fri, 21 Nov 2008 20:41:58 +0000 Dawid Pośliński http://blog.poslinski.net/?p=6 Każdy webmaster ma swoje „przekonania”, a także upodobania, dotyczące narzędzi z których korzysta.

Część pracy wykonuje niepotrzebnie sam, w momencie gdy mógłby skorzystać z naprawdę świetnych, przetestowanych i sprawnych rozwiązań.

Poniżej przedstawię część moich ulubionych narzędzi, bez których praca była by mniej przyjemna.

Edytor kodu

Osobiście skłaniam się do najprostszych rozwiązań, ale nie wyobrażam sobie pracy bez takich funkcji jak np. kolorowanie składni. Obecnie na rynku każdy zaawansowany kombajn posiada szereg funkcji takich jak automatyczne wcięcia, kolorowanie składni, automatyczne zamykanie tagów, ja polecam mały prosty programik notepad2, nawiązujący do windowsowego notatnika. Posiada schematy kolorowania składni najbardziej popularnych języków. Pozwala na czytelne wyświetlanie bloków kodu, ze względu na wcięcia i odpowiednią ich prezentację. Jest ekstremalnie szybki i banalny w obsłudze.


Strona www

Poprawne wyświetlanie na większości przeglądarek

Każdy webmaster boryka się z tym problemem. Pomijam przyczyny różnic w wyświetlaniu stron, oraz jakie przeglądarki sprawiają najwięcej problemów, albowiem na pewno będzie jeszcze okazja wrócić do tego tematu, ale klienta, nie interesują te kwestie. „Ma być dobrze” i to się liczy. Trudno jest sobie wyobrazić, iż zainstalujemy na komputerze 20 przeglądarek pod dwudziestoma systemami. Ale nie musimy wcale tego robić. Jeżeli chcemy zobaczyć jak wygląda nasza przeglądarka na innym O/S’ie oraz pod inną przeglądarką, także w zależności od tego czy jest włączona javascript lub też zadana jest konkretna rozdzielczość, wystarczy, że skorzystamy z BrowserShots.

Po kilkunastu do kilkudziesięciu minutach, serwis wygeneruje obrazy według zadanych przez nas kryteriów. Istnieje również komercyjna wersja tego narzędzia, w której jesteśmy obsługiwani „po za” kolejką.


Strona www

Dobieranie czcionki

Przy każdej stronie zastanawiamy się jaką czcionkę wybrać. Najlepiej, aby można było porównywać kilka krojów pisma ze sobą, w różnych jego ustawieniach. Z pomocą przychodzi serwis TypeTester.org, który pozwala nie tylko porównywać, ale i generować „w locie”, gotowy plik css z wybranymi przez nas ustawieniami. Osobiście, wole samodzielnie to wykonać, ale sam fakt, porównywania różnych czcionek już jest godny uwagi.


Strona www

Podsumowanie

To tylko część narzędzi wymyślonych przez webmasterów dla webmasterów. Dlatego na pewno jeszcze wrócimy do tego tematu.

]]> http://blog.poslinski.net/przydatne-narzedzia/feed/ 0