Sie
5
2010
 

Przeczytaj jak przesłonić obiekt FLASH innym elementem. Obiekt SWF na dowolnej z warstw – absolutne pozycjonowanie elementu. Użycie parametru wmode.

FLASH - pozycjonowanie absolutne CSS z-index

Prócz Firefoxa przeglądarki domyślnie przesuwają obiekt FLASH na szczyt stosu. Nie pomoże nawet absolutne pozycjonowanie (position: absolute) i właściwość z-index użyte na elemencie, którym chcesz przesłonić obiekt SWF. Obiekt FLASH będzie nadal widoczny.

Rozwiązanie

Po pierwsze do elementu, opisującego FLASH-a, dodaj parametr wmode. Po drugie, do elementu embed, dodaj atrybut wmode o wartości opaque. Zobacz na przykład poniżej:

<object width="300" height="200">
   <param name="movie" value="banner.swf">
   <param name="wmode" value="opaque">
   <embed src="banner.swf" wmode="opaque" width="300" height="200">
   </embed>
</object>

Voila! Teraz możesz już przesłaniać obiekt FLASH za pomocą CSS i absolutnego pozycjonowania. Rozwiązanie działa na wszystkich przeglądarkach.

Znasz inne, lepsze rozwiązanie? Użyłeś powyższego? Podziel się w komentarzu!

Lip
12
2010
 

Integracja dwóch systemów za pomocą odpowiedniego interfejsu to łatwiejsze rozwiązanie niż pisanie jednego systemu, spełniającego wszystkie wymagania w stu procentach. Czytaj dalej, aby dowiedzieć się jak zintegrować dwa popularne CMS-y: Joomla! i Wordpress.

j2wp logoZałóżmy, że chcesz publikować aktualności z życia Twojej firmy zarówno na blogu, jak i na stronie firmowej. Dlaczego masz za każdym razem ręcznie kopiować teksty? Chcesz to robić automatycznie. Chcesz to robić zdalnie.

Joomla to WordPress plugin

Jak? Z pomocą przychodzi mój autorski plugin do Joomli. Na początek zapoznaj się z wymaganiami dotyczącymi serwera i pobierz plugin j2wp, służący do zdalnej publikacji na Wordpresie. Następnie zainstaluj go standardowym instalatorem wtyczek systemu Joomla! (zrzut ekranu poniżej).

Instalacja wtyczki Joomla to WordPress - j2wp

Krok 1: Instalacja wtyczki Joomla to WordPress

Następnie przejdź do ustawień wtyczek (pluginów), znajdź na liście nazwę System – j2wp. Kliknij na nazwę, aby wyświetlić ustawienia.

Aktywacja pluginu Joomla to WordPress - j2wp

Krok 2: Aktywacja pluginu Joomla to WordPress

Przedostatni krok, to zapisanie ustawień, pozwalających Joomli na publikację treści. Przykładowe ustawienia poniżej:

Konfigruracja pluginu j2wp

Krok 3: Konfiguracja wtyczki j2wp (dane serwera i użytkownika WordPress)

Ostatni krok, to włączenie w Wordpresie zdalnej publikacji protokołem XML-RPC.

Konfiguracja WordPressa

Krok 4: Konfiguracja WordPressa (włączenie XML-RPC)

Voila! To już koniec. Przetestuj wtyczkę, publikując artykuł na Joomli w wybranej przez siebie kategorii (o ile zaznaczyłeś jedną). Wpis powinien się pojawić na blogu w postaci wpisu (lub ewentualnie szkicu, w zależności od ustawień).

Wymagania serwera

Do poprawnego działania pluginu j2wp konieczne są włączone rozszerzenia PHP: php_curl i php_xmlrpc. Aby je włączyć, odszukaj swój plik php.ini i odkomentuj (usuń średnik przed linijką) powyższe nazwami rozszerzeń. W przypadku, gdy nie masz możliwości edycji pliku php.ini (hosting), skontaktuj się z administratorem – on się tym zajmie.

Plugin przetestowany dla Joomla w wersji 1.5.17 i WordPress 3.0.0 (choć wcześniejsze także powinny działać).

Feedback

Jeżeli pobrałeś wtyczkę, napisz jak się sprawuje. Masz jakieś problemy? Postaram się je rozwiązać – napisz w komentarzu.

Lip
5
2010
 

Opis mikroformatu hCalendar, służącego do zapisu wydarzeń w Internecie. Dowiedz się jak go stosować. Zobacz przykłady i pobierz gotowy arkusz stylów.

hCalendar - mikroformat przykładyCiąg dalszy cyklu o najpopularniejszych mikroformatach. Dotychczas poznałeś format hCard, teraz czas na hCalendar.

hCalendar – hIstoria

Format hCalendar powstał, aby wyszukiwanie informacji o wydarzeniach było jeszcze prostsze. Algorytmy wyszukiwarek będą mogły z dużym prawdopodobieństwem odpowiedzieć np. na zapytanie kiedy i gdzie odbywa się koncert Madonny? To nie wszystko! Dzięki hCalendar wymiana danych o wydarzeniach będzie jeszcze prostsza. Zaznaczenie myszą fragmentu strony opartej o hCalendar, kliknięcie prawym przyciskiem i zapisz wydarzenie w komórce to jeszcze przyszłość. Jak daleka? Zobaczymy!

hCalendar – opis mikroformatu

Użycie mikroformatu jest naprawdę proste. Wystarczy użyć odpowiednich klas CSS do opisania danych. Nazwy klas są naprawdę intuicyjne. Zobacz na ten przykład użycia hCalendar:

<div class="vevent">
   <abbr title="2010-09-06T08:0000" class="dtstart">6 Września 2010,  8:00</abbr> :
   <abbr title="2010-09-08T22:00" class="dtend">8 Września 2010,  22:00</abbr> :
   <span class="summary">Konferencja hCalendar2010</span> w
   <span class="location">Poznań, Plac Wolności 4</span>
   <div class="description">Konferencja wokół zagadnień semantycznego Internetu. Przedstawienie mikroformatów takich jak hCard, hCalendar.</div>
   <div class="tags">Tagi:
   <a href="http://eventful.com/events/tags/konferencja" rel="tag">konferencja</a>
   <a href="http://eventful.com/events/tags/web%20design" rel="tag"> web design</a>
   </div>
</div>

Oczywiście nie musisz pamiętać wszystkich pól i klas. Skorzystaj z generatora on-line hCalendar.

hCalendar – jak to wygląda?

Format specyfikuje jedynie odpowiednie elementy HTML opisane klasami CSS. To wszystko. Dlatego forma prezentacji jest całkowicie dowolna. Zobacz powyższy przykład w wersji live:

Konferencja hCalendar2010
Poznań, Plac Wolności 4

Od 6 Września 2010, 8:00
do 8 Września 2010, 22:00

Konferencja wokół zagadnień semantycznego Internetu. Przedstawienie mikroformatów takich jak hCard, hCalendar.

Chcesz skorzystać z powyższego szablonu dla hCalendar? Pobierz plik CSS layoutu hCalendar.

Korzystasz już z formatu hCalendar? Znasz inne mikroformaty? Chcesz się dowiedzieć więcej na ten temat? Napisz w komentarzu!

Cze
21
2010
 

Optymalizacja szybkości wczytywania strony. Włączenie kompresji gzip plików na serwerze Apache. Przyspiesz swoją stronę!

gzip - kompresja plików po stronie serweraMetod na przyspieszenie strony jest co najmniej kilkanaście. Najbardziej oczywistą wydaje się być kompresja. Ta ma wiele wariantów. Można kompresować kod, minimalizując liczbę instrukcji czy usuwając powielone fragmenty. Takie podejście opisałem we wpisie dotyczącym kompresji JavaScript i CSS. Można także kompresować grafikę i elementy multimedialne. Można – wreszcie – kompresować pliki po stronie serwera.

GZIP – czy warto?

Kod HTML, CSS, JavaScript i jakikolwiek inny kod sztucznego języka jest doskonałym materiałem do kompresji. Wszystko przez powtarzające się ciągi (znaczniki HTML, słowa kluczowe np. function), które łatwo poddają się kompresji. Kompresja rzędu 50% nie jest niczym nadzwyczajnym. To dwa razy szybsze wczytywanie strony. To dwa razy mniejsze zużycie transferu!

Obsługa GZIP przez przeglądarkę

Jeżeli nasz serwer ma przesyłać skompresowane pliki, przeglądarka musi się na to zgodzić. To, czy serwer prześle pliki spakowane GZIP-em, zależy od nagłówka otrzymanego przez przeglądarkę. W założeniu:

  • przeglądarka wysyła żądanie GET z nagłówkiem Accept-Encoding: gzip, deflate
  • serwer sprawdza czy kompresja jest dostępna i czy żądany zasób (plik) istnieje
  • serwer kompresuje plik i odsyła do klienta
  • przeglądarka dekompresuje stronę i wyświetla ją użytkownikowi

GZIP – jak to włączyć?

Apache posiada dwa moduły kompresujące pliki – mod_gzip i mod_deflate. Skorzystamy z tego drugiego, który jest łatwiejszy w konfiguracji. Odszukaj plik .htaccess w głównym folderze swojej strony i skopiuj do niego:
# kompresja plikow tekstowych, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

Voila!

A co z kompresją grafiki?

Dlaczego kompresujemy tylko tekst? Do tego gzip nadaje się najlepiej. Pliki multimediów i grafiki powinny być skompresowane przed umieszczeniem na serwerze.

Używasz kompresji na stronie? Znasz inne, lepsze sposoby na zwiększenie wydajności strony? Podziel się nimi w komentarzu!

 

Blog łączący web design i tworzenie stron. Webdesign a optymalizacja stron. Projektowanie stron internetowych z wykorzystaniem php, javascript. Tworzenie stron www.