Wojciech Wierzgacz http://www.wojtekww.net Portfolio, porady, linki i pomysły związane z kodowaniem witryn internetowych Sat, 21 May 2011 22:28:55 +0000 en hourly 1 http://wordpress.org/?v=3.1.2 Nie męcz grafika http://www.wojtekww.net/ksztalty-css/ http://www.wojtekww.net/ksztalty-css/#comments Fri, 20 May 2011 09:01:15 +0000 Wojciech Wierzgacz http://www.wojtekww.net/?p=332 Zaczynając od kwadratu a kończąc na sercu, symbolu nieskończoności – przedstawiam kształy jakie można uzyskać tylko przy pomocy css

Kwadrat

#kwadrat { width: 100px; height: 100px; background: #F8DEC7;}

Prostoką†

#rectangle { width: 200px; height: 100px; background: #F8DEC7; }

Okrąg

#okrag { width: 100px; height: 100px; background: #F8DEC7; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; }

Owal

#owal { width: 200px; height: 100px; background: #F8DEC7; -moz-border-radius: 100px / 50px; -webkit-border-radius: 100px / 50px; border-radius: 100px / 50px; }

Trójkąt #1

#trojkat1 { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #F8DEC7; }

Trójkąt #2

#trojkat2 { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #F8DEC7; }

Trójkąt #3

#trojkat3 { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid #F8DEC7; border-bottom: 50px solid transparent; }

Trójkąt #4

#trojkat4 { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid #F8DEC7; border-bottom: 50px solid transparent; }

Trójkąt #5

#trojkat5 { width: 0; height: 0; border-top: 100px solid #F8DEC7; border-right: 100px solid transparent; }

Trójkąt #6

Trójkąt a#7

#trojkat7 { width: 0; height: 0; border-bottom: 100px solid #F8DEC7; border-right: 100px solid transparent; }

Trójkąt #8

#trojkat8 { width: 0; height: 0; border-bottom: 100px solid #F8DEC7; border-left: 100px solid transparent; }

Równoległobok

#rownoleglobok { width: 150px; height: 100px; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); background: #F8DEC7; }

Trapez

#trapez { border-bottom: 100px solid #F8DEC7; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px; }

Gwiazda 6-ramienna

#gwiazda6 { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #F8DEC7; position: relative; } #gwiazda6:after { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #F8DEC7; position: absolute; content: ""; top: 30px; left: -50px; }

Gwiazda 5-ramienna

#gwiazda5{ margin: 50px 0; position: relative; display: block; color: #F8DEC7; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid #F8DEC7; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); } #gwiazda5:before { border-bottom: 80px solid #F8DEC7; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top: -45px; left: -65px; display: block; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); } #gwiazda5:after { position: absolute; display: block; color: #F8DEC7; top: 3px; left: -105px; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid #F8DEC7; border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); content: ''; }

Pięciokąt

#pieciokat { position: relative; width: 54px; border-width: 50px 18px 0; border-style: solid; border-color: #F8DEC7 transparent; } #pieciokat:before { content: ""; position: absolute; height: 0; width: 0; top: -85px; left: -18px; border-width: 0 45px 35px; border-style: solid; border-color: transparent transparent #F8DEC7; }

Sześciokąt

#szesciokat { width: 100px; height: 55px; background: #F8DEC7; position: relative; } #szesciokat:before { content: ""; position: absolute; top: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid #F8DEC7; } #szesciokat:after { content: ""; position: absolute; bottom: -25px; left: 0; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 25px solid #F8DEC7; }

Ośmiokąt

#osmiokat { width: 100px; height: 100px; background: #F8DEC7; position: relative; } #osmiokat:before { content: ""; position: absolute; top: 0; left: 0; border-bottom: 29px solid #F8DEC7; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0; } #osmiokat:after { content: ""; position: absolute; bottom: 0; left: 0; border-top: 29px solid #F8DEC7; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0; }

Serce

#serce { position: relative; width: 100px; height: 90px; } #serce:before, #serce:after { position: absolute; content: ""; left: 50px; top: 0; width: 50px; height: 80px; background: #F8DEC7; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; } #serce:after { left: 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -o-transform-origin: 100% 100%; transform-origin :100% 100%; }

Symbol nieskończonosci

#nieskonczonosc { position: relative; width: 212px; height: 100px; } #nieskonczonosc:before, #nieskonczonosc:after { content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 20px solid #F8DEC7; -moz-border-radius: 50px 50px 0 50px; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #nieskonczonosc:after { left: auto; right: 0; -moz-border-radius: 50px 50px 50px 0; border-radius: 50px 50px 50px 0; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); }
]]> http://www.wojtekww.net/ksztalty-css/feed/ 0 Zend helper: Ile czasu upłynęło od daty http://www.wojtekww.net/zend-helper-ile-czasu-uplynelo-od-daty/ http://www.wojtekww.net/zend-helper-ile-czasu-uplynelo-od-daty/#comments Mon, 18 Apr 2011 11:52:14 +0000 Wojciech Wierzgacz http://www.wojtekww.net/?p=323 zendKlasa helpera która oblicza lie czasu upłynęło od jakiejś daty i zwraca wynik w odpowiednich jednostkach (sek, min, godz, dni).

class Zend_View_Helper_timePassed {
    public function timePassed($timestamp) {
        if(empty($timestamp)) {
            return "NA";
        } else {
            $difference = time() - $timestamp;
        if ($difference < 120) {
            $rtnval = $difference . "sek";
        } elseif ($difference < 7200) {
            $rtnval = round(($difference / 60), 0) . "min";
        } elseif ($difference < 172800) {
            $rtnval = round(($difference / 3600), 0) . "godz";
        } elseif ($difference < 168739200) {
            $rtnval = round(($difference / 86400), 0) . "dni";
        } else {
            $rtnval = "NA";
        }
        return $rtnval;
        }
    }
}

Wywołuje się ją w widoku w ten sposób:

$this->timePassed($timestamp);
]]> http://www.wojtekww.net/zend-helper-ile-czasu-uplynelo-od-daty/feed/ 0 Instalacja PEAR na Mac OSX Snow Leopard http://www.wojtekww.net/instalacja-pear-na-mac-osx-snow-leopard/ http://www.wojtekww.net/instalacja-pear-na-mac-osx-snow-leopard/#comments Tue, 12 Apr 2011 15:09:43 +0000 Wojciech Wierzgacz http://www.wojtekww.net/?p=318 pear

Fama głosi iż wcześniejsze wersje OSX miały preinstalowanego PEAR. Niestety na systemach Leopard i Snow Leopard musimy zainstalować go sami. Na szczęście proces jest ten szybki i banalnie prosty.

Ściągamy i instalujemy najnowszą wersję poprzez wpisanie tych komend do lini poleceń (Terminal)
curl http://pear.php.net/go-pear.phar > go-pear.phar
sudo php -q go-pear.php

W tym miejscu zmieniamy miejsce instalacji (1. Installation base ($prefix)) na /usr/local i naciskamy enter
Na tym etapie mamy już zainstalowanego PEAR`a musimy jednak wskazać do niego ścieżkę w pliku php.ini wykonując następujące kroki:

&lt;code&gt;
sudo cp /etc/php.ini.default /etc/php.ini
mate /etc/php.ini

</code>
(do edycji tego pliku możemy użyć oczywiście dowolnego edytora w moim przypadku mate)

i zmieniamy linie:

;include_path = ".:/php/includes"

na:

include_path = ".:/usr/share/pear"

Na koniec restart Apacha i wszystko śmiga :)

Nie wierzysz? możesz to sprawdzić prostym skryptem php

 
]]> http://www.wojtekww.net/instalacja-pear-na-mac-osx-snow-leopard/feed/ 0 Firefox i dowcip z rel next http://www.wojtekww.net/firefox-i-dowcip-z-rel-next/ http://www.wojtekww.net/firefox-i-dowcip-z-rel-next/#comments Fri, 23 Jul 2010 08:04:01 +0000 Wojciech Wierzgacz http://www.wojtekww.net/?p=295 Firefox

WordPress podwaja wpisy w bazie danych?

Przy okazji pisania własnych statystyk na wordpressie natrafiłem na ciekawy problem.  Statystyki odwiedzin poszczególnych stron zliczane były poprawnie ale z jakiegoś, kryptomagicznego powodu ciasteczka i wpisy w bazie pojawiały się dodatkowo zawsze dla następnego postu.

Tak więc przy okazji odwiedzin postu A statystyki leciały do góry również dla postu B. Myślę sobie, pewnie gdzieś przez przypadek robię drugi przebieg ale z kolei skąd niby zawsze, trafnie, skrypt dostawał ID następnego postu.  Utworzyłem w ramach testu post, którego ID różniło się od ID poprzedniego o kilka punktów i o dziwo i wchodząc na przed ostatni, ostatniemu też statystyki były zliczane. W każdym razie, jak się okazało, wszyscy wiemy, że firefox stara się być najszybszą przeglądarką ever i nawet jej to wychodzi a to przez pewne ciekawe zagranie. Ustawiając w nagłówku:

<LINK rel="prev" href="poprzednia_strona.html">
<LINK rel="next" href="nastepna_strona.html">

Co wordpress lubi z automatu robić (też się stara być super fajny)

Ułatwiamy nie tylko nawigację użytkownikom ale pomagamy firefoxowi być super szybkim! :) Po załadowaniu strony, w tle FF cachuję ‘następną’ stronę, co w moim przypadku prowadziło do błędnego zliczania statystyk

]]> http://www.wojtekww.net/firefox-i-dowcip-z-rel-next/feed/ 0 header(„Location…”) & exit http://www.wojtekww.net/headerlocation-exit/ http://www.wojtekww.net/headerlocation-exit/#comments Tue, 06 Jul 2010 11:58:10 +0000 Wojciech Wierzgacz http://www.wojtekww.net/?p=291 Przerywanie wykonywania skryptu zaraz po header(„Location…”) (czy w wordpressie po wywołaniu funkcji wp_redirect(…)) jest rzeczą niezbędną. Przesłanie nagłówka (header) jest tylko prośbą do przeglądarki żeby przeszła do innej strony, nie przerywa to w żaden sposób wykonywania dalszej części skryptu, co w wielu przypadkach może mieć okropne skutki.

Pamiętajmy, żeby zawsze skorzystać z funkcji die() lub exit zaraz po przeslaniu naglowka.

]]> http://www.wojtekww.net/headerlocation-exit/feed/ 0 Kompresja – gzip http://www.wojtekww.net/kompresja-gzip/ http://www.wojtekww.net/kompresja-gzip/#comments Tue, 20 Apr 2010 23:48:10 +0000 Wojciech Wierzgacz http://www.wojtekww.net/?p=254 Wprowadzenie

Szybkość wczytywania stron w znacznym stopniu możemy przyspieszyć korzystając z kompresji.  Jako webdeveloperzy nie mamy wpływu na szybkość połączenia czy trasę jaka musza pokonać pakiety pomiędzy serwerem www  a osoba odwiedzającą stronę. Możemy jednak, przyspieszyć ten proces poprzez zmniejszenie rozmiaru danych które zostają wysłane.

Począwszy od HTTP/1.1 przeglądarki internetowe obsługują kompresje poprzez nagłówek Accept-Encoding

Accept-Encoding: gzip, deflate

Jeśli serwer www zobaczy taki nagłówek w odpowiedzi do klienta może przesłać dane w formie skompresowanej. Informuje o tym przeglądarkę poprzez zamieszczenie nagłówka Content-Encoding

 Content-Encoding: gzip

Gzip jest najpopularniejszym sposobem kompresji, drugim najczęściej spotykanym, jednak mniej wydajnym jest deflate. Pierwsza metoda kompresji, zmniejsza rozmiar przesyłanych informacji o okolo 70%.

Każdy kij ma dwa końce.

Jeśli serwujemy skompresowana wersje strony, niektóre przeglądarki mogą wyświetlić ja nie do końca tak jak byśmy tego chcieli. Na pocieszenie, jak się zapewne domyślasz chodzi wyłącznie o starsze, wychodzące już z użycia wersje tych programów.

Co należy kompresowac?

Przede wszystkim wszystkie pliki HTML.  Style, oraz skrypty również nie zaszkodzi poddać kompresji. Pomijamy natomiast grafikę czy dokumenty pdf gdyż one już są skompresowane, poddając je dodatkowej nie tylko marnujemy niepotrzebnie zasoby serwera, ale ponosimy ryzyko ze plik będzie zajmował więcej.

Jak się za to zabrać?

Sa dwa sposoby w jaki możemy ten proces zrealizować.

Poprzez plik .htaccess, umieszczając:

# Kompresuje wszystkie pliki html i tekstowe
AddOutputFilterByType DEFLATE text/html text/plain text/xml

# Lub kompresuj wszystkie pliki z danym rozszerzeniem

SetOutputFilter DEFLATE

W tym przykładzie użyłem metody kompresji deflate

Możemy również kazać php serwować skompresowana wersje pliku. Rozszerzenie pliku który kompresujemy musimy zmienić na .php żeby serwer wiedział co z tym zrobić
Na samym początku pliku umieszczamy:

 if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start();

Tym razem jako metodę kompresji wybrałem gzip.

Oczywiście jeśli przeglądarka nie obsługuje kompresji, wysłana zostanie zwykła wersja.

Na koniec narzędzie online, którym możemy sprawdzić czy nasza strona faktycznie została skompresowana.

]]> http://www.wojtekww.net/kompresja-gzip/feed/ 1 Coś o Expires i Cache-Control Header http://www.wojtekww.net/expires-i-cache-control/ http://www.wojtekww.net/expires-i-cache-control/#comments Mon, 19 Apr 2010 17:40:15 +0000 Wojciech Wierzgacz http://www.wojtekww.net/?p=249 Dwie najważniejsze zasady:

  1. Dla elementów statycznych ustawiamy nagłówek Expires na daleki w przyszłość
  2. Dla treści dynamicznej korzystamy z Cache-Control (wszystkie najpopularniejsze przeglądarki posiadają pamieć podręczną w której przechowują strony – dlaczego z tego nie skorzystać?


Strony internetowe są bardzo często bogate w wszelkiego rodzaju dodatki mające na celu uatrakcyjnić jej wygląd. Pliki css, js, obrazki, flash – elementów tego typu w dzisiejszym internecie przybywa. Użytkownik wchodząc na stronę po raz pierwszy ‘musi’ dokonać pewnej liczby zapytań HTTP, ale ostawiając odpowiednie ‘Expires’ powodujemy ze strona staje się cachowalna. Dzięki czemu, ten sam użytkownik, który własnie odwiedził nasza stronę po raz pierwszy, wchodząc na kolejne podstrony pobiera już mniej danych, ponieważ sprytna przeglądarką pobiera teraz część elementów nie z internetu a z własnej pamięci podręcznej. Tego nagłówka najczęściej używa się obrazków jednak powinniśmy go stosować również dla stylów, skryptów i elementów flash.

Przegladarki internetowe i serwery proxy używają pamięci podręcznej żeby zredukować liczbę i wielkość zapytan HTTP, przyczyniają się tym samym do szybszego ładowania sie stron. Serwer www uzywa naglowka Expires w odpowiedzi HTTP aby powiedziec klientowi który z elementów może być przechowywany lokalnie.
Jeśli serwerem z którego korzystasz jest Apache polecam użycie dyrektywy ExpiresDefault. Ustawiamy nia Expires relatywnie do aktualnej daty, np:

ExpiresDefault „access plus 5 years”

Musisz pamiętać, ze używając dalko wysuniętych w przyszłość wartości, należy za każdym razem, kiedy chcesz zmienić pewien element (np poprawić coś w pliku css, czy wgrać nowy obrazek) zmienić mu nazwę! Tylko wtedy przeglądarka czy serwer proxy pobiorą go ponownie.

]]> http://www.wojtekww.net/expires-i-cache-control/feed/ 0 Firebug nie tylko dla Firefoxa http://www.wojtekww.net/firebug-nie-tylko-dla-firefoxa/ http://www.wojtekww.net/firebug-nie-tylko-dla-firefoxa/#comments Mon, 29 Mar 2010 10:42:17 +0000 Wojciech Wierzgacz http://www.wojtekww.net/?p=234 firebugBez wątpienia wszyscy doceniamy plugin do firefoxa – firebug.  Mało tego, niejednokrotnie wznosiliśmy modły do sił wyższych aby stworzyły coś podobnego dla Internet Explorera. No więc… zostały wysłuchane :)

Firebug Lite jest odpowiedzią (przetestuj jak działa)

Trochę mu jeszcze brakuję do klasycznego Firebuga, nie mniej jednak działa na każdej przeglądarce, czy to Opera, Chrome czy Internet Explorer. Instalacja jest banalnie prosta chociaż bardzo nietypowa. Nie instalujemy programu ani jako dodatek do przeglądarki, ani jako osobny program na komputerze tylko jako rozszerzenie strony, na której chcemy z niego korzystać. Tak więc dodajemy deklaracje:

<script type='text/javascript'
src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>

i uruchamiamy to cudo wchodząc pod ten adres. Koniec.

Na stronie projektu Firebug Lite możemy przeczytać jak dodatkowo  go skonfigurować (w moim przykładzie zmieniłem jedynie wysokość). Działa naprawdę fajnie, chociaż możliwości względem pierwowzoru ma okrojone, nie przeszkadza to w niczym. Dostałem w końcu narzędzie, którego od bardzo dawna potrzebowałem (ie developer tools? no way) za co Twórcą projektu bardzo dziękuje.

]]> http://www.wojtekww.net/firebug-nie-tylko-dla-firefoxa/feed/ 0 Import dużych baz danych MySQL http://www.wojtekww.net/import-duzych-baz-danych-mysql/ http://www.wojtekww.net/import-duzych-baz-danych-mysql/#comments Mon, 15 Mar 2010 22:05:22 +0000 Wojciech Wierzgacz http://www.wojtekww.net/?p=208 Niedawno stanąłem przed problemem „Jak zaimportować dużą bazę danych (~250MB)”. Z oczywistych przyczyn nie możemy posłużyć się samym phpmyadmin`em, ponieważ blik jest za duży.
Rozwiązanie naszego problemu podzielę na dwie części, w zależności od tego czy mamy dostęp do linii poleceń czy tylko do phpmyadmin`a

Linia poleceń

Najlepiej, najprościej, najszybciej sprawę załatwimy mając dostęp do interpretera mysql.

Najpierw zalogujmy się

mysql -u root

Na wszelki wypadek, jeśli plik dump nie uwzględnia wyboru bazy zrobimy to sami

USE `baza`

i na sam koniec poleceniem ‘source’ wskazujemy plik dump, który chcemy  zaimportować

source `sciezka/do/dump.sql`

BigDump

Jeśli jesteśmy zdani wyłącznie na phpmyadmin`a, a co za tym idzie jesteśmy ograniczeni limitami: rozmiaru wysyłanego pliku, czasem wykonywania skryptu czy nawet działamy w trybie bezpiecznym (safe mode) jesteśmy zmuszeni do podzielenia pliku na mniejsze części. Zrobić to samemu? Dzięki Alexey Ozerov, który napisał TEN fantastyczny skrypt, mamy możliwość zautomatyzowania całego procesu.

Konkrety:

  1. Pobieramy, rozpakowujemy oraz edytujemy w pliku bigdump.php informacje n/t połączenia z bazą danych do której importu będziemy dokonywać.
  2. Jeśli nasz plik dump.sql nie usuwa tabel przed tworzeniem nowych, zróbmy to sami używając klasycznie phpmyadmin
  3. Tworzymy katalog roboczy na serwerze (np. dump/)
  4. Wysyłamy plik/pliki dump (*.sql lub *.gz) oraz bigdump.php przez klienta ftp do utworzonego wcześniej katalogu
  5. Uruchamiamy bigdump.php przez przegladarke (http://wwww.twojastrona.pl/dump/bigdump.php) gdzie będziemy mogli wybrać, który z wysłanych przez nas zrzutów bazy chcemy zaimportować
  6. Musimy mieć uruchomioną obsługę javascript żeby skrypt po każdej wysłanej porcji restartował się sam.
  7. Na koniec warto dla bezpieczeństwa posprzątać po sobie czyli USUWAMY cały katalog dump/

Na koniec problemy z którymi się spotkałem

  1. Podczas eksportowania bazy odznaczamy ‘Rozszerzone dodania’  (Extended imports) – skrypt sobie z tym nie radzi
  2. W pliku bigdump.php należy dostosować zmienną $db_connection_char_set do kodowania użytego w pliku dump.sql

Więcej informacji na temat samego skryptu jak i sposoby rozwiązywania najczęstszych problemów znajdziemy na stronie domowej BigDump

Mam nadzieję, że pomogłem :)

]]> http://www.wojtekww.net/import-duzych-baz-danych-mysql/feed/ 2 Jak zmniejszyć ilość zapytań HTTP http://www.wojtekww.net/jak-zmniejszyc-ilosc-zapytan-http/ http://www.wojtekww.net/jak-zmniejszyc-ilosc-zapytan-http/#comments Mon, 18 Jan 2010 14:40:10 +0000 Wojciech Wierzgacz http://www.wojtekww.net/?p=193 Jednym z najważniejszych elementów optymalizacji serwisów www jest ograniczenie ilości zapytań HTTP jakie generują. Opóźnienie pomiędzy poszczególnymi zapytaniami oraz ograniczenia przeglądarek co do ilości zapytań wysyłanych równolegle w znacznym stopniu wpływają na wydajność a przede wszystkim czas potrzebny do w pełni załadowania strony.

Biorąc pod uwagę CSS oraz JavaScript sprawa jest prosta: wystarczy połączyć wszystkie pliki danego typu w jeden, skompresowany (polecam YUI Compressor)

Pozostaje nam więc tylko grafika. Bez wątpienia rozmiar obrazków oraz ich ilość wpływa w znacznym stopniu na prędkość ładowania strony dlatego dalszą część artykułu poświecę właśnie im.

CSS Sprites

Polega to na łączeniu części obrazków na stronie w jeden plik a następnie używając

background-position

kontrolujemy która część tego obrazka wyświetlana jest w konkretnym miejscu. Dzięki temu zamiast wielu zapytań HTTP dla małych plików mamy tylko jedno dla dużego. Z tej metody korzysta np serwis Yahoo! (lista ikon, zamieszczona po lewej stronie, jest zrealizowana właśnie w ten sposób).

Świetnym narzędziem analizującym dla nas stronę pod kątem, które obrazki możemy połączyć tworząc sprite jest spriteme. Aplikacja ta robi nawet więcej – pozwala nam od razu wygenerować spirte!
Korzystanie z tej techniki niesie ze sobą pewne niedogodności. Jedną z nich jest, w zależności od projektu strony, niemożność połączenia niektórych obrazków w jeden z powodu ich powtarzalności na stronie (background-repeat) czy używania ich w innych miejscach. Takich narzędzi, jak wymienione wyżej, jest znacznie więcej. Ostatecznie jednak nic nie zastąpi Twojego doświadczenia i wiedzy, tak więc najpewniej skończysz na dostrajaniu CSS Sprites i CSS samemu.
Oczywiście nie zawsze powinniśmy korzystać z tych technik. Nie w każdych warunkach jeden duży obrazek okazuje się lepszy od kilku małych, ale jest to materiał na następny artykuł, dlatego póki co odsyłam do zewnętrznego źródła: na początek post vladmiria To Sprite Or Not To Sprite.
Podsumowując: Sprite`y CSS są świetnym rozwiązaniem pomagającym nam zredukować liczbę zapytań HTTP Request; powinniśmy z nich korzystać z rozwagą, mając na uwadze to, że nie istnieje złoty środek i wszystko ma swoje jasne oraz ciemne strony.

base64-encoded Data URIs

Dotarliśmy do bardzo interesującego zagadnienia base64-encoded Data URIs. W tym paragrafie skupię się wyłącznie na konkretach, dlatego dla bardziej szczegółowego opisu odsyłam do publikacji jednego z czołowych programistów frontend firmy Yahoo! Nicholasa C. Zakas Data URIs explained

W praktyce oznacza to, że w kodzie HTML lub pliku CSS możemy mieć zakodowaną treść, nie jak w klasyczny sposób używając odnośnik do pliku, co oznacza, że całkowicie eliminujemy dodatkowe zapytanie HTTP. Dzięki temu możemy mieć stronę pełną grafiki nie używając na nie żadnego dodatkowego zapytania!

Zobaczmy na przykładzie:
Gumiś

Zazwyczaj robimy to tak

.gumis {
background: url(gumis.jpeg);
}

Base64 Data URI jako tło

.gumis {
    background: url(data:image/jpeg;base64, /9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5Ojf/2wBDAQoKCg0MDRoPDxo3JR8lNzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzf/wAARCABnAGADASIAAhEBAxEB/8QAHAAAAgIDAQEAAAAAAAAAAAAABgcABAEFCAMC/8QAORAAAgEDAgQDBgQFAwUAAAAAAQIDBAURACEGEjFBEyJRBxRhcYGRIzJCoRVSYnLBM0OCc7Hh8PH/xAAaAQACAwEBAAAAAAAAAAAAAAADBQACBAYB/8QALREAAQMDAwMCBQUBAAAAAAAAAQACAwQRIQUSMUFRcRNhIjKhwfAGFYGx0eH/2gAMAwEAAhEDEQA/AHhqampqKKampoS9oXHFLwbQxEw+811TnwIObAwMZZj2AyPmfqQSKJ8rwxguSvCQMlFjEKCWIAAySe2lJx17X0pJZaDhYRTuBhq5vMgP9C/q+Z2+B66XXEXtE4lv8csFXXmKllGGpqZQiEehP5iPmdCu56/trq9O/TwY7fVZ9h9/8QHy3+VEkvHvFctT7w1+rg/MGwknKm39I8uPhjRRwx7Yr1b5BHfEFzpyd3wElT5EDB+RH10tEClwGblGdz1xosruGqOqulDQ2KfxGmRmkbxA4RRjDkjoCCf2wN9adSdpcD2QTxW3A2LW8W7kfndewxySfKV0ZYL7buIbalfaqhZoG2PZkburDqD/AO9NbLXPsPDV+4XpqmayXWX8RPxkgYxsyqc7DuRv0OdyO+4ylxrPeUqTVzvICG5zM2W/5A53G2xGuFq5Y4pSI7lvQnCe02kSTMJ3C/b8suqNTS44O9qNLcpYqG9xJR1LkKk6sTE57A53U/MkfEaY+o14cLhL5oJIH7JBYrOprGpqyCs6Vnto4QkvUlBcqKZRVLmm8KQ4Vxh5Bg9jsw+ORuMaaWqtyoILjStT1AblyGVlOGRh0IPqP/u2jU88lPKJYzYhSzTh3C5et/CFyqq2GFuRFlAYsDzFV33wPiMYz10wqHg2y22mBMayS7ZqKkK/2U+UfY/XV6skpLZNfKieZ4IoRM5ljUc5MbLFGMdDl2JPY59Nbfh6oE9wpJ3BLGgeoSNd8sfDzj5BiB/drZU6rVVDdrnWHYYWxjIIw5zRci3PuqlPSR+G0csNPJFsUYRqAynsQBj6jY6q01nprdXVdbbqOKOSSnVAieUMwLE/AZ8uqvBd4lvdrmrJYIqbnqZOSGIEKg2JAB32Yt8PTbpv3UOpUjYjHXGsIe4AgHBW5m17Q6y0ttpqlbjHMwc4jYTzOMGQnGAPqCfQDYddLC8zwx8QV8ESgRCqkVCvQeY7f40fceNdqC1+/WqvmjiTCTx4DHlY4DBiMggkDr3B7aVtso5Ljc6Sij3kqZ0iXc9WYD/Om9FpEVZTSTSuwAbdwRm5/hBl1KSlnbsHnsR2V9hzKQDjI666Y4KqRV8KWqcTSzc1MuXmxzkgYIOOuCCM98aTvtC4Cn4bmSqtENRUWor52xztC3TfHY9QcdyOwyaexO8LU2SotMjDxKOQvGMjeNySfs3Nn5jXMQAxvLSt2qysq6Zs0fQ59r/9TI1NAnEd7ulDV1kk0lRTR07/AIEcKZWRcDDE4OcnOc7D99Zi4mu0lRNAZabMKoJWEB2cgHCjm6Y33z+YY6a2WSRtO9wBCOtDnGVdU0y2+np3eNKmdllkQ4OFjZgoPbJA+gOvfh6+/wAS5oKkRrUKgkVoieSVNvMM9NyMjJxkb76xxM9sq6JqeorIkqI3DwlfO6SL0PKMk9SCPQkd9RUaNkgDglFxEZpmq6J4TFb5S8KBEAEo5kZ98HfxF6Dfp65JzZ7U7W6gqZ/FpLjFGSpRiRESCu6sSPy4yvrn0BFKy3MnxPdmWKSZiWgmyQJF8pZMEZHl7egJwcg0W4sv0dYab+G0LxvGksNS8jplWJBHIM8xUhhsRnAO2dXC3TOMga1rR5HXz4V9AlFHVF6fw2hmCzsg5+aR+Ug5G7c3iLuRnffVlWDKGXOCMjIwdVYaarpeHZxcnaW43Ss53ygQjJUAcoOwWKPOO2MazNXRrN4EX41SQSIkPpjOT0Ubjr69NeIkEjnD4kP+0m4RUvDklMSPGq2CIud8BgzH9gPqNK+yXSost4pLnR8vjUsgkUMNm7EH4EEj66a3E/C1Jf6GKWRqqnuqLgzEiSE/0cgOQoOcEAnfcHsED2ccUS+aioErYeblEtPUIVz8QSCD8CAddZotRQNpXQzOALuQcfVKq71HS7rWHRdF8OXuj4hs9Pc6B8xTLup6xt3U/EHb/wAaxJw9aZLkly9xjjrUfn8eLMbsf6ipHMPUHOe+hn2S8J3HhWz1SXV0E1VMJBBG/MIwFxuemT3x6DfR1rlqlkbZXNjN2g4K8a5wCE+NeK7TaCbVdKWrqRVQEusCggISV3JI32PT00A2C6S3G+3AU8iiAIGBeP8AEkAYqjkA45io83b8uw0X8f8ABlfxBcI6+gqKcGOARGGXK5wzNkMAf5sY2+ek5JzwXKVZKgqYnaIpvjmGARnp2JzrC+V7H5GFspyG5BymdQwUawR0kckdSaRRG2SrMu36gOhOM69qmT3aH8GMGR2VI4wMc7k4A++5+GTpdcLwwzcXWamUlUknwViYrtkZxj66YHH1PHYFgeCpmeT3OpeLxSuRL+HGrDAHQSv+51JKgiB0jRnp56LT643bAMnhCF1vUVvqp6KjK1sETEmSVP8AcyS3KB+nPTv16jBJNb0udjggE08qpMombmAdIZW3ePJBKjJBG+55u/UD4cpUqr9baYj8NqhMj+lfNj7Lp0jrv0PXXN1esT0b4233Yzfr0WvVaKGmc2Fgza5PcoMuVZTo3vVyqeZ+TlHO+fL1wqjbsOg3190kLRyUV3dwKSqgMaIAMRBirIWPq2CD2B5R13K3aUVEslSFVDO7SkKMfmJP+dHHCF0kuFpFlcHkpw3isRs8LflT6ksD8E+Om8lVUvkjEI65HtbOfZWm0d1LCyfdcn6XRR89fKPUUdT77byq1arjBOFmH8j/AA9D1XOR3BxFGIk5FLFR05mJwPnrMMVXXu0Fqj8SbODMf9KE56se+P5Rkn0A3DhAkLNvx8I8tlbFcrfTV0GfCqIlkUHqARnB+I6as6rW2hhttvp6KmBEMEYjTJycAd9WdVSReNbUpR0c9VLtHDG0jb42UZP/AG1zP55Jo53DGSTMkrE/qK9/30/+PpjBwbeCOXL0zRebp5/J9/NpDnqT8dY6t3AWqnHJR37FZYY7pd6Z408dgssb8o5gufMM9ceZPtpf3ysq7tX1NZVTFqmSUsTk4Azsv9oG2PTRD7Oqv3LjqiPPyJUDwn64PMrADb+oR6tcdcHXKhv9RNQ0c1TR1krSxNBGX5CxyysANtyceox6HApNzoRboU40V0DKp7ZrDcMXQ7wpVJBxJbZHyuKgKQe3MCn282nQMZGdKmx8NmqjSetdoGlj56PB/URlXJHQjZgOu2exGq68U8Q0zGGWvmWSMlXSRVYqw2IyRnSHVNJlmLZBYdMrfWU/7jUn0HA2A56+PzwtNLTmjnlpW/NBI0R+akr/AI1tuFrvDaK5/eW5Y6kxoWwTjBPp/dnPw+OtVVzzVlVLU1MrPNK3M7bDJ+QA15Kiruo39ep++mcMjoyHHlPX0rpqVsMmDYZ9wm9HPHK7RowLKobbcFSNiPUds+utzwN77HU3CAlWoBIZFOMckrMSUH/HDH0LbfBScP2OauqIKidnpaDxEWSoB5W5CwB5Pv16D9tdB0NJBQUkNJSRiKCFAkaDooAwNOI5DI25FlxWrRsgcImu3Hv2XvqampoiTLwrqSCvo5qSqjEkEyFHQ9wdc93q2y2e6VVvqWy9O/Lz/wAy9Vb6gg/f010XoU4z4JpuKJqedqk0s0SlHdYw3iL1AO46HJ+pHfQJ4vUGOUWKTYc8Jc+zfhue+XyG5Sh46GhkD84JHOwIZV+pCk/AAfq2ZlTxbB43h0dOJ4zkB3k5OffcqMEkbHc4B7bb62tutFNbLOlsogUhSMqG6sSerH1JJJ0sUins4FpnlRLg9T7v4gUDMaqxR1U528NNuoDZ64IJIowxtkWMNlkO5W7f4T08tE1PJGtO5RI5iCTGD+GcgnO2BnPVT0OtdeeFYLjP7xHUyQzkBWLDnVgPXoc42znpjrrfRxiMAAscDGWYkn76+8Z29dXc1rhY8JtC50RDmGxHVBsfAVWbBR3t6tBSTJ4soWIloojur4zuOXBP8ue+DrbW7ha20RDujVMg/VNggfJRt986YvBmH4NseRsbdAMH/proVqKE2a4yWzzeAF8WkYj/AGiccme5Q4H9rJ3zoTII2nAQo9WqZzslf9v6WvvPNPRVNDTJ4lQ8JwuwCg7AknYdDj5dNEEPGjxPFU1604t0kojeRco1OS3LlsncBsA9MbntrQo2ayoWkUfnBqJSc+blACKPUDHwGe5Jxra6011XBTUNKVNbUzvIYyWZGdmJOR2RObm5vVVHfBOgzsa4Fzk5AQQCNwdTXjSQCmpIacEsIo1QE98DGvbVUqU1NTU1FFNVbhbqO4w+FW08cy9uYbr8QeoOw3HpqamootFU8JPyMKK6TREnI8aJZeUenYn5kk6lJwiRj+I3OapX9SRxrCG+BIy32I1NTURPWktbcUSxRRwxJFCixxooVEQYCgbAAdhrV8R2g3WkQwsiVlO3iQO3TOMFW78rDY/Q9QNTU1FQEg3CGLfYrv4j05t/uiBi3jzTq6sWJJI5SWO57hfp00UWOxwWkSSB2nqpv9WdwASB0UD9KjsPqckk6mpqIkkz3izitrqampqIS//Z);

Jak widzicie drugi sposób zostawia w pliku CSS bardzo dużo znaków, ale piękno jego tkwi w tym, że obrazek jest wstawiany ‘inline’ kompletnie eliminując potrzebę dodatkowego zapytania! Rozmiary pliku CSS oczywiście znacząco wzrosną, ale takie rozwiązanie jest zdecydowanie lepsze niż duża liczba zapytań HTTP. Dodatkowo jeśli skompresujesz style gzip`em ogólny rozmiar będzie porównywalny.

Wspierane przeglądarki

  • Firefox 2+
  • Safari – wszystkie wersje
  • Google Chrome – wszystkie wersje
  • Opera 7.2+
  • Internet Explorer 8+

Internet Explorer…

Jak widzicie Internet Explorer wspiera Data URI, jednak… co już stało się tradycją firmy Microsoft niczego nie robią do końca. Tak jak w tym przypadku IE8 wspiera jedynie data URI mniejsze niż 32kB, co może wydawać się dużo, jednak przy większych obrazkach jest zdecydowanie niewystarczające.
Co w takim razie z poprzednimi wersjami? Na szczęście obsługują MHTML co jest alternatywą umożliwiającą osiągnięcie tych samych rezultatów przy starszych wersjach. Stoyan Stefanov, również pracownik Yahoo!, opisał to zagadnienie w artykule MHTML – when you need data: URIs in IE7 and under i pokrewny problem w Vista oraz Windows 7 Data URIs, MHTML and IE7/Win7/Vista blues

Narzędzia

Istnieje spora liczba programów konsolowych do konwertowania obrazków do formatu base64-encoded, istnieją również narzędzia online takie jak to, jednak konwertowanie wszystkiego ręcznie, a następnie wklejanie tego do pliku może doprowadzić nas do białej gorączki – na szczęście powstało narzędzie które robi to wszystko za nas. Mowa o CSSEmbed autorstwa Nicholasa Zakas. Podajemy na wejściu plik CSS, program analizując go zamienia wszystkie odnośniki do plików graficznych i koduje je Base64. To oznacza że cały proces trwa bardzo krótko i jest robiony za nas. Wystarczy pobrać program z w/w strony, umieścić go gdziekolwiek (dla wygody w tym samym katalogu co plik CSS) i uruchomić go poleceniem

java -jar cssembed-0.3.2.jar styles.css &gt; styles-base64.css

Zostanie utworzony nowy plik o nazwie „styles-based64.css”. Narzędzie obsługuje również konwersje do MHTML.

Strony generujące duży ruch

Nie ma co się zastanawiać wystarczy zobaczyć te przykłady
google (zdjęcia ptaków) czy przycisk search na stronie Yahoo!

]]> http://www.wojtekww.net/jak-zmniejszyc-ilosc-zapytan-http/feed/ 0