W poprzedniej serii poświęconej Adobe AIR opisałem czym jest technologia Adobe AIR, przestawiłem podstawowe techniki programowania przy jej użyciu oraz zaproponowałem IDE, które wspiera tworzenie aplikacji AIR. Dzisiejszy i kilka kolejnych wpisów poświęconych Adobe AIR, będzie skupiało się na praktycznym zastosowaniu API do tworzenia aplikacji. Obiecałem, że będzie to drag and drop upload i

Czym są “Chochliki (skrzaty) CSS” ? Do czego służą? Jak możemy je wykorzystać? Jakie korzyści płyną z ich zastosowania? Jakie są ograniczenia, trudności w stosowaniu?

CSS Sprites jest techniką łączenia wielu obrazków w jeden, których wyświetlanie następuje poprzez odpowiednie wypozycjonowanie obrazu tła. Wbrew temu co mogłaby wskazywać nazwa, nie są to małe obrazki, lecz jeden duży złożony wielu mniejszych.

ŹródłaDemo

Na czym polega CSS Sprites

Jak zostało wspomniane w wypisie, technika ta polega na połączeniu wielu obrazków wykorzystywanych na stronie w jeden. Wyświetlanie tych obrazków polega na ustawieniu w CSS atrybutu background-position na odpowiednią wartość “przesuwającą” cały obraz, tak aby w polu widzenia był ten właściwy. Przeglądarka pobiera cały obrazek i wyświetla jego fragmenty w odpowiednich miejscach, zamiast pobierać każdy mały obrazek oddzielnie.

Nie jest to nowa technika, właściwe można powiedzieć, że jest starsza niż sam CSS. Jej pochodzenie wywodzi się ze starych 8-bitowych gier komputerowych. Komputer wczytywał do pamięci jeden obraz, a wyświetlał tylko akurat potrzebny fragment. Było to o wiele szybsze rozwiązanie niż ciągłe pobieranie nowych obrazków.

Najczęściej wybieranym zastosowaniem CSS Sprites (często nieświadomie) jest efekt CSS Rollover polegający na podmianie obrazka tła po najechaniu kursorem.

 

Niedogodności i trudności w stosowaniu

Na początku wspomnę o kilku niedogodnościach związanych ze stosowaniem tego rozwiązania. Warto mieć je na uwadze, aby już od początkowych etapów tworzenia nie wpaść w pułapki, aby uniknąć konieczności przerabiania wszystkiego od początku.

Obraz całościowy CSS Sprites tworzony jest z wielu mniejszych obrazków, zwykle w programach graficznych (Adobe® Photoshop®, Gimp), zatem wszelkie zmiany w wyglądzie strony będą wymagały dokonania przeróbek w obrazku całościowym. Ma to istotne znaczenie w przypadku korzystania z usług zewnętrznych grafików.

W przypadku zastosowania elementu tła, które jest powielane po jednej ze współrzędnych element ten powinien być jedynym elementem w rzędzie/kolumnie (w zależności od osi powielania). Dobrze to widać w przypadku YouTube (na niżej załączonym obrazku).

Waga obrazka CSS Sprites może być czasem większa niż sumaryczna waga obrazków składowych (nie jest to regułą, bo przykładowo przy małych ikonkach zajmuje mniej).

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

Zwiń
Czytaj na blogu autora...

Google Chrome jest jedną z najlepszych, jeśli nie najlepszą, przeglądarką internetową. Niestety mimo swojej szybkości i niezawodności, nie może podbić rynku, na którym króluje IE wraz z Firefox-em. W chwili obecnej jest to około 3% (według informacji z serwisu ranking.pl).Google postanowiło to zmienić i otworzyło dla deweloperów Google chrome extensions (oczywiście w wersji beta). Jest to miejsce

Przygotowałem się na kilka godzin pracy, a okazało się, że udało się wszystko zrobić w 15 minut. Większość poprawek to była zmiana nazw metod.

Otrzymałem dzisiaj zaproszenie do Google Wave. Nie zastanawiając się długo, przebrnąłem przez formalności (10 sekund roboty) i zacząłem testować nową usługę. Google Wave jest zupełnie nowym sposobem komunikacji w sieci. Nie jest to chat, forum ani poczta. Wave łączy te trzy kanały ze sobą w jednej usłudze. Po zalogowaniu się na konto, ujrzymy aplikację przypominającą nieco klienta pocztowego z

Tworzenie dużych aplikacji na lokalnej maszynie, a następnie ich przetestowanie przez wysłaniem do repozytorium, stanowiło problem, gdy dochodziło się do przetestowania funkcjonalności polegającej na wysłaniu maila. Użytkownicy linuxa są w lepszej sytuacji – wystarczy, że postawią sobie sendmail-a lub postfix-a i mogą wysyłać maile. Sytuacja przedstawia się znacznie gorzej w przypadku okienek.

W tym wpisie pragnę przedstawić kilka użytecznych rozwiązań dla programistów korzystających z biblioteki Open Power Template. Posiada ona wiele narzędzi ogólnego przeznaczenia, których zastosowanie w tworzeniu np. systemu stronicowania może nie być takie oczywiste na pierwszy rzut oka. Zapraszam do lektury.