BBProject.net » html http://www.bbproject.net Programowanie, webmastering, informatyka Tue, 01 Mar 2011 20:35:37 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 AJAX w jQuery dla początkujących http://www.bbproject.net/2010/04/ajax-w-jquery-dla-poczatkujacych/ http://www.bbproject.net/2010/04/ajax-w-jquery-dla-poczatkujacych/#comments Sun, 18 Apr 2010 19:10:40 +0000 M@ster http://www.bbproject.net/?p=288 Szybki i lekki kurs dla początkujących pod tytułem: AJAX w jQuery. Innymi słowy, jak przy pomocy tej biblioteki załadować dynamiczną treść bez przeładowania strony.

Wszystko czego będziemy potrzebować to biblioteka jQuery, dobre chęci oraz szczypta zapału. Przechodzimy na stronę jquery.com i pobieramy najnowszą wersję skryptu.

Ja na potrzeby tego wpisu stworzyłem sobie dwa pliki, pierwszy będący główną stroną która będzie korzystać z techniki AJAX, oraz drugą zawierającą ładowane treści – obie jako skrypty PHP, aby nie było zbyt nudno. Ok, przechodzimy do działania.

Pierwszym krokiem będzie dołączenie do dokumenty biblioteki jQuery w sekcji head strony:

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

Najprostszy przypadek

Czyli zwyczajne załadowanie zawartości innego pliku html/php bez przeładowania strony.

Dodam do naszej strony dwie warstwy, jedną która będzie przyjmować ładowane treści, i drugą z przyciskiem wywołującym zdarzenie.

<div id="box"></div>
<div><input id="btn" type="button" value="Wyślij"></div>

Teraz pozostaje nam już tylko dodanie akcji do przycisku.

$(document).ready(function(){
  $('#btn').click(function(){
    $('#box').load('data.php');
  });
});

Może czas na wyjaśnienie powyższego kodu. Pierwsza linia przypisuje zdarzeniu załadowania strony funkcję w której określamy co ma się dziać. Jest to wymagane podczas używania jQuery (i nie tylko), aby mieć pewność że struktura dokumentu widziana przez przeglądarkę jest kompletna. Kolejno elementowi o identyfikatorze btn przypisujemy zdarzenie kliknięcia w którym do elementu box ładujemy przy pomocy funkcji .load dane z pliku data.php.

W data.php umieściłem zwyczajowy tekst, równie dobrze może to być plik html. Przy tak przygotowanym kodzie, kliknięcie przycisku „Wyślij” powinno skutkować pojawieniem się nad nim treści zawartej w zewnętrznym pliku.

Kompletny kod całego dokumentu wygląda następująco:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $('#btn').click(function(){
          $('#box').load('data.php');
        });
      });
    </script>
  </head>
  <body>
    <div id="box"></div>
    <div><input id="btn" type="button" value="Wyślij"></div>
  </body>
</html>

Przekazywanie parametrów

Jeśli powyższy przypadek chcielibyśmy wzbogacić o przekazanie jakichś parametrów do wywoływanego pliku data.php, musimy rozbudować nieco funkcję .load.

$('#box').load('data.php', {index: 4, str: 'abc'});

Drugi parametr określa tablicę par klucz: wartość. Dane te są przesyłane metodą POST, zatem mamy do nich łatwy dostęp w docelowym skrypcie php. Przykładowa zawartość data.php:

Index: <?php echo $_POST['index']; ?><br>
Ciąg znaków: <?php echo $_POST['str']; ?>

Tym sposobem możemy wpływać na to co ma zostać załadowane. Podawane dane możemy odczytać z pola tekstowe lub innych zmiennych – wszystko zależy od naszej inwencji oraz umiejętności pisania w JavaScript.

Wysyłanie formularzy

Ostatnim punktem będzie wysłanie formularza. Można by oczywiście skorzystać z powyższej metody kopiując zawartości pól formy, jednak było by to mało wygodne. My skorzystamy z funkcji .serializeArray.

Zmodyfikowałem zawartość dokumentu wzbogacając go o prosty formularz z dwoma polami:

<div id="box"></div>
<div>
  <form id="form">
    Pole 1: <input type="text" name="pole1"><br>
    Pole 2: <input type="text" name="pole2"><br>
    <input id="btn" type="button" value="Wyślij">
  </form>
</div>

Kolejno modyfikujemy kod JavaScript:

$('#box').load('data.php', $('#form').serializeArray());

Tym sposobem, do pliku data.php zostanie przekazana zawartość pól formularza o identyfikatorze form. Co z nimi zrobimy, zależy już od nas.

Podsumowanie

Mam nadzieję iż chociaż troszkę pomogłem osobą które po raz pierwszy próbowały użyć technologii AJAX przy pomocy jQuery. Bardziej zaawansowanym polecam zapoznanie się z resztą funkcji dostępnych w jQuery, które dają większe możliwości manipulacji danymi i tym co się dzieje podczas wywołania asynchronicznego.

]]> http://www.bbproject.net/2010/04/ajax-w-jquery-dla-poczatkujacych/feed/ 2 Co zrobić gdy reklama blokuje wyświetlanie strony? http://www.bbproject.net/2010/03/co-zrobic-gdy-reklama-blokuje-wyswietlanie-strony/ http://www.bbproject.net/2010/03/co-zrobic-gdy-reklama-blokuje-wyswietlanie-strony/#comments Tue, 09 Mar 2010 06:07:39 +0000 M@ster http://www.bbproject.net/?p=220 Otwieramy stronę internetową, widzimy nagłówek i czekamy… czekamy… po chwili pojawia się reklama a za nią interesująca nas treść. Brzmi znajomo?

Zdecydowana większość systemów reklamowych opiera się na załączaniu zewnętrznego kodu JavaScript, który w przypadku wolnego serwera dostawcy reklam, może powodować niepotrzebne spowalnianie ładowania się naszej strony. O ile w sytuacji takich gigantów jak Google AdSense nie mamy się o co martwić, to przy korzystaniu z usług innych podmiotów czy też systemów pośredniczących (np.: OpenX), może warto zastanowić się jak pozbyć się tego problemu i nie opóźniać pokazania treści tylko przez reklamę. Zniecierpliwiony użytkownik naszej witryny może ją po prostu opuścić zanim zdąży cokolwiek zobaczyć.

Przedstawione rozwiązanie problemu jest stricte teoretyczne, gdyż docelowa implementacja zależy od konkretnego przypadku, a osoby które zajmują się tworzeniem stron internetowych na pewno będą wiedziały jak przenieść to na własny grunt.

Załóżmy hipotetyczną budowę naszej witryny w następującej postaci:

nagłówek
reklama
treść

Przykładowy kod takiej witryny mógł by wyglądać w następujący sposób:

<div id="header"></div>
<div id="advert"></div>
<div id="content"></div>

Jeśli nie chcemy aby warstwa reklamowa blokowała pojawienie się treści, wystarczy że przeniesiemy ją na sam koniec. Ktoś powie – ok, ale w tym wypadku reklama powędruje na dół strony. Musimy zatem zastosować pewną sztuczkę. Mianowicie, zwiększamy dolny margines warstwy nagłówka o wartość wysokości sekcji reklamowej, tak aby powstała pusta luka. Z kolei warstwę z reklamą, pozycjonujemy w sposób absolutny (position: absolute;) przy pomocy stylów, umieszczając ja w otrzymanej wnęcę.

<div id="header" style="margin-bottom: 50px;"></div>
<div id="content"></div>
<div id="advert" style="position: absolute; top: 200px; height: 50px;"></div>

Tym sposobem, przeglądarka wyświetlając stronę, najpierw pokaże nagłówek, treść a dopiero na samym końcu reklamę – ale w odpowiednim miejscu. Jeśli ta z jakichś powodów nie będzie w stanie się wyświetlić (padnie serwer reklamy), to nie spowoduje to blokowania treści.

Oczywiście to co znajduje się pod reklamą, np.: stopka strony, nie pokaże się dopóki nie zostanie pobrana reklama, nie mniej, nie jest to tak istotny element w stosunku do treści po którą sięga odwiedzający witrynę.

Rozwiązania tego nie możemy zastosować w sytuacji w której odległość warstwy z reklamą jest zmienna w stosunku do początku strony, gdyż w tym momencie nie jesteśmy w stanie pozycjonować warstwy przy pomocy atrybutu absolute. Metodę tą stosuje z powodzeniem na dwóch swoich stronach i spisuje się znakomicie – cotozaplik.pl oraz checksum.me.

]]> http://www.bbproject.net/2010/03/co-zrobic-gdy-reklama-blokuje-wyswietlanie-strony/feed/ 0 Kodowanie polskich znaków w PHP http://www.bbproject.net/2009/12/kodowanie-polskich-znakow-w-php/ http://www.bbproject.net/2009/12/kodowanie-polskich-znakow-w-php/#comments Sat, 26 Dec 2009 11:20:25 +0000 M@ster http://www.bbproject.net/?p=93 Prawdziwym problemem dla początkujących programistów PHP, może być nie rzadko brak wyświetlania polskich znaków w skryptach PHP. Zamiast miotać się pomiędzy różnymi edytorami kodu, które w taki czy inny sposób oferują zmianę kodowania pliku, prześledźmy po kolei wszystkie etapy tej przypadłości i rozwiążmy je raz na zawsze.

Przyczyny mogą być różne, od błędnego zapisania pliku, aż po wymuszone kodowanie znaków w nagłówku HTTP. Jeśli spotkałeś się nie raz z popularnymi krzakami na swojej stronie, zamiast polskich znaków diakrytycznych, to zapraszam do przeczytania dalszej części wpisu.

Po pierwsze musimy zdecydować się na jakiś system kodowania znaków, których używamy w tworzonych plikach. W moim przypadku będzie to, obecnie najpopularniejszy, system utf-8. Nic nie stoi przeszkodzie aby używać chociażby iso-8859-2, jednakże utf-8 oferuje nam znacznie szerszy zestaw znaków i jest obsługiwany obecnie przez coraz więcej systemów docelowych (np.: przeglądarki mobilne).

Edytor

Zacznijmy od edytora w jakim tworzymy nasz skrypt. Początkowo jest to zapewne systemowy notatnik. Program ten, o ile nie wybierzemy inaczej, domyślnie zapisuje pliki w kodowaniu windows-1250. Kodowanie to obsługiwane jest wyłącznie na systemach firmy Microsoft i należy go unikać jak ognia na dzień dzisiejszy. Podczas zapisywania pliku, mamy możliwość zmiany na utf-8 na dole okna dialogowego – pole wyboru Kodowanie.

Osobiście, polecam korzystanie z narzędzi o większych możliwościach, takich jak środowiska NetBeans czy Eclipse. Mogą one wyglądać skomplikowanie dla początkującego programisty, jednakże oferują gamę udogodnień i przydatnych funkcji.

Sekcja meta

Przypuśćmy że mamy już poprawnie zapisany plik w wybranym przez nas systemie kodowania znaków. Uruchamiamy skrypt na lokalnym bądź wirtualnym serwerze a naszym oczom ukazują się znaczki o nieznanym dla nas pochodzeniu, które na pewno nie są naszymi rodzimymi ogonkami.

Drugim, często popełnianym błędem, jest brak sekcji meta strony, informującej o jej kodowaniu. Aby poprawnie zdefiniować kodowanie dokumentu HTML, używamy następującego zapisu:

<meta http-equiv="content-type" content="text/html; charset=utf-8">

…który umieszczamy między znacznikami <head>…</head>. Przykładowo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Moja strona w utf-8</title>
  </head>
  <body>
    <p>...</p>
  </body>
</html>

Co jednak zrobić jeśli wciąż nie otrzymujemy oczekiwanego efektu?

Nagłówek HTTP

Nagłówek protokołu HTTP zawiera szereg informacji przesyłanych do przeglądarki, mówiący o tym co tak właściwie jest wysyłane. Jedną z tych informacji jest kodowanie znaków dokumentu – znowu.

Problem polega na tym, iż przeglądarki wyświetlają stronę w takim kodowaniu, jakie zostało im przedstawione w nagłówku protokołu. W praktyce to co zostało zdefiniowane w sekcji meta strony nie ma znaczenia, chyba że nagłówek HTTP nie zawiera takiej informacji.

Bardzo często, parser PHP ma wymuszone wysyłanie dokumentów w jednym, określonym systemie kodowania znaków. Odpowiada za to następujący wpis w pliku konfiguracji php.ini:

default_charset = "iso-8859-1"

O ile dysponujemy własnym, lokalnie postawionym serwerem, możemy łatwo edytować bądź całkowicie wyłączyć tą linię, to w przypadku serwera wirtualnego z reguły nie posiadamy takiej władzy.

W takim wypadku musimy nadpisać sami nagłówek HTTP w skrypcie PHP. Służy do tego polecenie header. Nas interesuje oczywiście zmiana samego kodowania, inne możliwości tej komendy na razie zostawmy w spokoju. Dodajemy zatem do naszego skryptu następującą linię:

header('Content-Type: text/html; charset=utf-8');

Nie mniej musimy pamiętać o tym, że ustawienie parametru nagłówka HTTP przy pomocy w/w komendy, musi nastąpić zanim wyślemy jakiekolwiek inne dane do przeglądarki. Innymi słowy, nie może użyć polecenia echo czy też print zanim nie ustawimy nagłówka. Jak sama nazwa wskazuje, jest to nagłówek, czyli znajduje się przed docelową treścią dokumentu.

Podsumowanie

Mój docelowy plik, jaki stworzyłem na potrzeby tego wpisu, prezentuje się następująco:

<?php header('Content-Type: text/html; charset=utf-8'); ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Moja strona w utf-8</title>
  </head>
  <body>
    <p><?php echo 'ęóąśłżźćń'; ?></p>
  </body>
</html>

Jak widzimy, wymusiliśmy tutaj kodowanie utf-8 w nagłówku HTTP, sekcji meta, oraz sam plik został zapisany z poprawnym kodowaniem znaków. Tak przygotowany dokument, nie powinien sprawiać żadnych problemów w dowolnej konfiguracji serwera. W efekcie otrzymamy poprawnie zakodowane oraz wyświetlone polskie znaki diakrytyczne.

]]> http://www.bbproject.net/2009/12/kodowanie-polskich-znakow-w-php/feed/ 4 Poprawa szybkości wczytywania grafik przy pomocy stylów http://www.bbproject.net/2009/12/poprawa-szybkosci-wczytywania-grafik-przy-pomocy-stylow/ http://www.bbproject.net/2009/12/poprawa-szybkosci-wczytywania-grafik-przy-pomocy-stylow/#comments Sun, 06 Dec 2009 09:16:27 +0000 M@ster http://www.bbproject.net/?p=9 Wirtualna Polska - menuCzy zdarza się Wam czy to projektując własną stronę czy też odwiedzając cudzą, mieć do czynienia z dużą ilością drobnych grafik (np.: ikon) które to kolejno wypełniają zawartość strony? Czy nie można przyspieszyć tego procesu skoro każdy z plików to z reguły nie więcej niż 1KB? Oczywiście można.

Przyczyną tego stanu jest sposób w jaki przeglądarka pobiera kolejne zasoby dołączone do odwiedzanej strony. Łącząc wszystkie drobne grafiki w jeden większy plik, a następnie przy pomocy stylów CSS wybierając interesującą nas część, możemy znacznie przyspieszyć ładowanie takiej strony.

Jak działa przeglądarka?

Otwierając dowolną stronę www, uzyskujemy od serwera treść dokumentu HTML, to czy jest on statyczny czy generowany dynamicznie (przez np.: php) nie ma w tej chwili znaczenia, która jest parsowana i wyświetlana przez przeglądarkę. Jeśli ta napotka na swej drodze zewnętrzne zasoby w postaci stylów CSS, skryptów JavaScript czy też grafikę rozpoczyna ich pobieranie.

W czym tkwi problem?

Na nieszczęście, z uwagi na fakt iż protokół HTTP jest protokołem bezstanowym, każde pobranie zasobu poprzedzone jest otwarciem gniazda TCP, nawiązaniem połączenia, pobraniem danych oraz zamknięciem połączenia. Stwarza to pewien narzut w postaci danych oraz czasu. Jeśli mamy do czynienia z dużymi plikami, przykładowo zdjęciami, nie jest to tak istotne. Z kolei jeśli naszą stronę ozdabiają różne drobne elementy graficzne, wtedy ów narzut nie tyle przekracza rozmiar zasobu co wprowadza niepotrzebne opóźnienia, gdyż samo nawiązanie sesji TCP trwa dłużej niż pobranie piku.

Jak temu zaradzić?

Dobrym rozwiązaniem jest scalenie wszystkich elementów graficznych w jeden plik, np.: w postaci kolumny obrazków. Ktoś może powiedzieć, jaki w tym zysk skoro i tak przeglądarka musi pobrać tą samą ilość danych? Zgadza się, jednakże zyskujemy mnóstwo czasu na narzucie związanym z tworzeniem połączenia i jego kończeniem dla każdego zasobu z osobna. Co to oznacza w praktyce? Znacznie szybsze ładowanie strony. Oczywiście opłacalność zabiegu w dużej mierze zależy od ilości grafiki klasyfikującej się do scalenia.

A w praktyce?

Przejdźmy zatem do części praktycznej. O ile samo scalenie obrazków nie powinno stwarzać problemów o tyle ich późniejsze wykorzystanie może rodzić pytania. Jak „wyciąć” grafikę na której nam zależy? Oczywiście stosując odpowiednią klasę stylów kaskadowych. Najprostszym sposobem jest używanie obrazków jako tło którym jest nasz zbiorczy plik graficzny, przesunięty o żądaną ilość pikseli.

Zastosujmy teraz zdobytą wiedzę do stworzenia menu strony składającego się z etykiet tekstowych oraz ikon. Potrzebny nam będzie zestaw stosownych obrazków oraz odpowiednie style zastosowane do menu. Zacznijmy jednak od napisania samego kodu HTML:

<ul class="menu">
  <li class="home">Strona główna</li>
  <li class="mail">Kontakt</li>
  <li class="download">Pobierz</li>
  <li class="tools">Narzędzia</li>
</ul>

…kolejno arkusza stylów:

.menu
{
  list-style: none;
  color: #404040;
  font: bold 16px Arial;
}
.menu li
{
  float: left;
  height: 24px;
  line-height: 24px;
  padding: 0px 30px;
}
.home     { background: url(icons.png) 0px   0px no-repeat; }
.mail     { background: url(icons.png) 0px -24px no-repeat; }
.download { background: url(icons.png) 0px -48px no-repeat; }
.tools    { background: url(icons.png) 0px -72px no-repeat; }

…jeszcze dodajmy tylko użyty zestaw ikon:

Zestaw ikon

…i cieszmy oko gotowym menu:

Menu

Jak widać, cała zabawa polega na odpowiednim przesunięciu tła tak aby trafić w interesujący nas punkt. Każda ikona ma rozmiar 24x24px, zatem musimy wymusić wysokość elementu menu właśnie na 24px, tak aby sąsiednie obrazki nie były widoczne.

Co zrobić w sytuacji w której mamy dużo rysunków o różnych rozmiarach? Można scalać je podobnie, jednakże lepszym wyjściem jest pogrupowanie identycznych pod względem rozmiaru w osobne pliki.

]]> http://www.bbproject.net/2009/12/poprawa-szybkosci-wczytywania-grafik-przy-pomocy-stylow/feed/ 0