Posts tagged Apache

Optymalny kod HMTL / Hack IE

W dobie nowoczesnych przeglądarek internetowych oraz wchodzącego coraz większymi krokami HTML5 mało sensowne wydaje się zajmowanie problemami które powodują przeglądarki starsze. Jednak warto w związku z tą fazą “przejścia” do Internetu “nowej jakości” zastosować pewne sztuczki które w przyszłości pozwolą gładko przejść w tą erę.

Chciałbym także zaprezentować współczesne rozwiązywanie problemów niekompatybilności starszych przeglądarek oraz problemów jakie sprawiają – tak, żeby strona była nowoczesna, ale jednocześnie działała jeszcze na starszych przeglądarkach.

Nie będę w tej chwili poruszał kwestii HTML5 (ale o tym niedługo 🙂 ) za to chciałbym oprzeć się na obecnych popularnych technologiach i przyjrzeć się technologii odseparowania kodu który uznajemy za poprawny od kodu który musi się znaleźć aby strona działała i wyświetlała się na przeglądarkach które normalnie sobie z tym nie radzą. Postaram się także poddać subiektywnej ocenie każdą z metod. Zaczynamy:

Hacki nadmiarowe

Hacki nadmiarowe – czyli technika, która jest całkowitym zaprzeczeniem poruszanego tematu. Zakłada ona w uproszczeniu, że np w kodzie CSS tworzymy standardowy kod w postaci:

div {
    color:red;
}

Często okazuje się, że jakaś przeglądarka inaczej dziedziczy klasy CSS lub występuje jakiś inny problem (np na jednej przeglądarce linki są czerwone a na innej zielone i nie wiadomo dlaczego. Można wtedy zastosować Hacki dla przeglądarek – czyli tak zapisać kod aby tylko dana przeglądarka potrafiła go zinterpretować. Np dla przeglądarki Internet Explorer wyglądałoby to tak:

div {
    color:red;
}
div\ {
    color:green;
}
}

Tego drugiego “div’a” zinterpretuje tylko IE. Więc we wszystkich przeglądarkach div będzie miał czerwony tekst, a na IE zielony. Jest jeszcze mnóstwo technik które pozwalają uzyskać te różnice na przeglądarkach, ale ja tej metody nie polecam więc nie będę ich wypisywał. Dlaczego nie polecam tej metody?

wady:

  1. Nadmiarowość kodu współdzielona przez wszystkie przeglądarki
  2. W 99% przypadków nie jest to potrzebne ponieważ różnica wynika z błędu programisty lub niewłaściwego zaprojektowania zależności
  3. Hacki to tak naprawdę celowe zapisanie czegoś “źle” żeby wykorzystać błąd przeglądarki – w efekcie 2 minusy dalą plus

zalety:

  1. Można zrealizować bardzo prosto pewne różnice.

Hacki warunkowe

Hacki warunkowe to technika zdecydowanie bardziej odpowiednia. Pozwala ona oddzielić pewne fragmenty kodu tylko dla specyficznej wersji danej przeglądarki – np Internet Explorer w wersji 6. Dzięki temu możemy napisać stronę pod najnowsze przeglądarki i a pewne różnice skorygować za pomocą odrębnych zasad. Kod taki nie jest wtedy mieszany z prawidłowym kodem i nie jest interpretowany przez przeglądarki które działają poprawnie. Warunki zapisuje się w prosty sposób:

Można także precyzyjnie dobrać przeglądarkę:

Można także zaprzeczać wersji przegladarki

Lub jedne z najczęściej spotykanych (dla wszystkich wersji IE mniejszych niż 7)

Efektywny kod w sekcji HEAD mógłby wyglądać tak:

	
	

Zamiast tworzyć udziwnienia i mieszać kod możemy wszystkie różnice i reguły przenieść do kodu specyficznego dla danej wersji przeglądarki. Co nad to daje? W momencie gdy zostanie podjęta decyzja o zaprzestaniu wsparcia dla  danej przeglądarki wystarczy usunąć zapis warunkowy ze swojego kodu i już. Nie trzeba potem odkręcać nic więcej.

wady:

  1. Trzeba stworzyć osobny plik i jest to nadal pewna nadmiarowość, ale już tylko w obrębie przeglądarki która jest “pokrzywdzona” – najczęściej jednak na niej właśnie najmniej nam zależy i się na to godzimy<

zalety:

  1. Kod jest odseparowany. Nie tworzą się nieprawidłowości.
  2. W dowolnym momencie można dany warunek usunąć, zmienić lub dodać nowy bez wpływania na to co już działa poprawnie.
  3. W momencie decyzji i zaprzestaniu wspierania danej przeglądarki dany warunek wystarczy usunąć z kodu.

Emulacja funkcjonalności

Różnice w zasadzie działania to jedno, ale co gdy dana przeglądarka zwyczajnie nie ma danej funkcji, nie potrafi czegoś zrobić lub robi to źle? Najczęstsze problemy z przeglądarką Internet Explorer poniżej 7 to:

  1. Brak wsparcia przezroczystości plików PNG
  2. Zastosowanie elementów hover tylko na znacznikach typu a

Paradoksalnie nawet bardzo stare przeglądarki Internet Explorer mają różne ciekawe funkcje których nie mają współcześnie najnowsze przeglądarki. Te funkcje to m.in:

  1. Filters
  2. Behaviors

Filtry – IE posiada zestaw filtrów różnego typu które wprowadzają zmiany w elementach strony. Jednym z najczęściej używanych filtrów jest “gray”. Dany selektor konwertowany jest do postaci czarnobiałeł. Można w ten sposób na elemencie body stworzyć całą stronę na czarno-biały. Przydatne gdy chcemy włączyć “żałobę”. Co ciekawe żadna współczesna przeglądarka nie posiada takiej funkcji.

Behaviors – W uproszczeniu są to pewne reguły napisane za pomocą skryptu. Dzięki temu można je wykorzystać do zasymulowania pewnych zachowań których standardowo przeglądarka nie potrafi.

Rozwiązanie problemu HOVER

W tym celu można utworzyć plik HTC. Polecam plik ze strony http://www.xs4all.nl/~peterned/htc/csshover3.htc – zestaw bardzo fajnych reguł do hoverowania elementów.

Załączyć do IE można go tak

body {
	behavior:url("../htc/csshover3.htc");
}

Oczywiście korzystamy w tym celu a jakże z Hacku warunkowego, żeby nie śmiecić innym przeglądarkom. (Uwaga na ścieżkę do pliku htc bo można się naciąć – oprócz tego jeśli uruchamiasz stronę pod Apache to plik ten musi być przez niego rozumiany)

Rozwiązanie problemu PNG

To nie prawda, że IE6 nie potrafi obsłużyć przezroczystości dla plików PNG. Potrafi – ale robi to źle 🙂 Można zatem naprostować ją i użyć. Można w sieci znaleźć wiele technik do poradzenia sobie z tym problemem – np również pliki HTC z odpowiednimi funkcjami symulującymi “włączenie przezroczystości”, różne nakładki i skrypty konwertujące. Ogólnie sprowadza się to do wywołania pewnej wariancji mniej lub bardziej skomplikowanej następującej funkcji:

#logo {
	background:transparent url(/gfx/logo.png) no-repeat scroll left top;
	height:10px;
	width:10px;
}
* html #logo {
	/* Alpha transparencies hack for IE */
	background-image:none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/gfx/logo.png', sizingMethod='crop');
}

Oczywiście zastosowano tutaj brzydki Hack dla IE (na początku napisane jest * html ” co rozumie tylko IE. Zostawiłem tak celowo żeby porównać z tym co mówiłem na początku. Oczywiście idealna wersja powinna wyglądać tak, że zostanie to przeniesione do osobnego pliku css dla danej wersji IE.

Podsumowanie

Na ten temat można dużo pisać. W sieci jest niesamowita ilość informacji i rozwiązań problemów. Nie jest to miejsce by opisać je wszystkie i nie taki jest cel tego posta. Chciałbym tylko przybliżyć, że istnieją takie metody i rozwiązania i że warto z nich korzystać aby tworzyć fajny, czytelny i wydajny kod – jeśli potrzeba by strona musiała mimo wszystko działać jeszcze na starszych przeglądarkach to wyżej wspomniane techniki pozwolą na osiągnięcie tego stanu rzeczy bez modyfikowania już gotowego wydajnego kodu. Należy jednak pamiętać aby nie korzystać z tego nagminnie i najpierw samemu upewnić się, że wszystko co zostało zrobione jest poprawne (np częsty problem w różnicy wyświetlania to błąd polegający na tym, że stworzony został kontener rodzic o mniejszej szerokości niż jego element potomny – IE wtedy świetnie nadaje się to znajdowania tego typu problemów gdyż rozszerza kontenery o najszerszą długość jaką znajdzie)

Polecam także korzystanie z walidatora kodu W3C w standardzie SGML i Tidy oraz walidatora CSS. Dopiero potem czas na uzupełnianie różnic.

Pozdrawiam.

Tworzenie VHost’a w Apache

apache_logoZapraszam do lektury kursy tworzenia VHostów. Okazuje się, że wiele osób ma jednak problem z ruszeniem tego tematu dlatego postanowiłem w jak najprostszy sposób przedstawić sposób na utworzenie VHostów.

Tworzenie VHost’a w Apache

Komentarze jak zwykle mile widziane.

Pozdrawiam.

Tworzenie VHost’a w Apache

Dlaczego?

Często spotykam się z zainteresowaniem rozwiązaniami vhostów (zwłaszcza dla programistów/opiekunów wielu serwisów) jednak ciężko jest przebrnąć przez kilka kwestii. Tworzenie vhostów jest bardzo proste jednak po drodze jest parę kruczków, które mogą niejednego doprowadzić do białej gorączki. Wystarczy poznać zestaw kilku zasad i korzystanie z vhostów stanie się tylko i wyłącznie przyjemnością. Zapraszam do lektury!

o Virtual Host’ach

Bardzo często zdarza się, że mamy do dyspozycji tylko jedną maszynę a chcemy/musimy posiadać kilka serwisów (hostów). Jeśli na maszynie zainstalowany jest Apache to z pomocą przychodzi nam rozwiązanie zwane “Virtual Hosts”. Dzięki temu rozwiązaniu możemy zdefiniować w serwerze klika niezależnych hostów, działających na własnych domenach i z własną konfiguracją.

Jeśli posiadasz już zainstalowany serwer i chciałbyś stworzyć wirtualne hosty musisz wykonać 3 czynności:

  1. Stworzyć nazwę domenową
  2. Utworzyć wpis vhosta w pliku konfiguracyjnym
  3. Zmodyfikować uprawnienia

1. Nazwa domenowa

Dzięki nazwom domenowym nie musimy chodzić po stronach za pomocą adresów IP tylko za pomocą przyjaznych dla nas nazw. Nazwy te tłumaczone są przez serwery DNS na IP aby przeglądarka wiedziała gdzie ma się faktycznie połączyć. Na każdym komputerze (czy to z Windowsem czy Linuxem) można stworzyć własną uproszczoną wersję takiego serwera – a konkretnie jest to plik w którym zdefiniowane są nazwy domenowe i przypisane im konkretne IP.

W systemie Windows jest to plik: C:\Windows\System32\drivers\etc\hosts
W systemie Linux jest to plik /etc/hosts

Posiada on mniej więcej taką strukturę:

IP domena
127.0.0.1 localhost

IP 127.0.0.1 jest adresem własnego komputera. A “localhost” jest nazą domenową dla tego IP. Jeśli wpiszesz w przeglądarce “localhost” to podłączysz się sam do siebie (jeśli masz działający serwer)

Gdy wpisujesz w przeglądarkę “wp.pl” to faktycznie łączysz się z pewnym adresem IP, który “podpowiedział” serwer DNS. Jednak można wymusić aby pewne nazwy domenowe łączyły się na inne IP. Sprawdźmy to:

Otwórz wspomniany plik “hosts” i dopisz w nim na koniec taką linijkę:

74.125.43.147 onet.pl

Zapisz plik i spróbuj odwiedzić stronę onet.pl – niespodzianka? Ustawiłeś właśnie aby domena onet.pl wskazywała na IP google. Dobra jeśli już znamy zasadę działania to usuń ten wpis żebyś nie zapomniał 🙂

Zamiast tego utwórz wpis

127.0.0.1 pierwszyvhost
127.0.0.1 drugivhost

W ten sposób stworzysz drugą nazwę domenową dla własnego komputera. Tworzymy to po to, gdyż apache rozpoznaje który vhost ma uruchomić właśnie po nazwie domenowej. IP mamy tylko jedno, ale różne domeny wskazują na to samo IP i po tych nazwach właśnie apache wie co uruchomić.

2. Tworzenie vhosta

W zasadzie Apache posiada główny plik konfiguracyjny httpd.conf i to w nim powinno dokonywać się wszelkich zmian. Jednakże w zależności od dystrybucji ten plik może być podzielony na inne mniejsze pliki które zawierają konkretne rzeczy (np właśnie vhosty).

Jeśli posiadasz pakiet XAMPP to otwórz plik i przejdź na koniec:

c:\xampp\apache\conf\extra\httpd-vhosts.conf

Jeśli posiadasz zwykłą dystrybucję bądź nie ma osobnego pliku na vhosty to otwórz plik httpd.conf i przejdź na koniec

VHost składa się z pewnego bloku informacji obowiązujących w określonej strukturze drzewa. Struktura takiego podstawowego bloku przedstawia się następująco:


    ServerAdmin    [adres email administratora]
    DocumentRoot   [ścieżka do katalogu]
    ServerName     [nazwa domenowa serwera]
    ServerAlias    [alias nazwy serwera - np druga nazwa]
    ErrorLog       [plik z logami błędów]

Dopisz zatem następującą treść (nie potrzebujemy wszystkich wpisów)


    ServerAdmin adres@email.pl
    DocumentRoot C:\www\vhost1\html
    ServerName pierwszyvhost



    ServerAdmin adres@email.pl
    DocumentRoot C:\www\vhost2\html
    ServerName drugivhost

Zapisz plik. Utwórz oczywiście wymienione katalogi i wrzuć do każdego katalogu “html” jakiś plik index.html (np jeden o treści “Pierwszy vhost” a drugi o treści “Drugi vhost”) i vhosty gotowe… no cóż… prawie….

Zrestartuj serwer apache (w XAMPP musisz włączyć i wyłączyć serwer), lub w konsoli na linuxie polecenie:

/etc/init.d/httpd restart

czy tez inne odpowiednie dla Twojej dystrybucji.

Wpisz teraz w przeglądarce

http://pierwszyvhost

lub

http://drugivhost

W obu przypadkach prawdopodobnie otrzymasz komunikat “Forbidden” i teraz przechodzimy do punktu 3

3. Uprawnienia

Problem z uprawnieniami wynika z tego, że dla głównego drzewa serwera zostały ograniczone możliwości. Metodą najprostszą jest odnalezienie w pliku httpd.conf następującej sekcji:


Domyślnie znajdują się w niej opcje ustawione w taki sposób:

Options FollowSymLinks
AllowOverride None
Order deny,allow
Deny from all

Musisz zmienić je następujące:

Options FollowSymLinks
AllowOverride All
Order allow,deny
Allow from all

Zrestartuj ponownie serwer apache. Wpisz w przeglądarce:

http://pierwszyvhost

Hurra działa! (a przynajmniej powinno). Jednak gdy wpiszesz

http://drugivhost

To prawdopodobnie nie zadziała. Jest to związane z nasłuchiwaniem portów. Musisz odnaleźć opcję:

NameVirtualHost *:80

Jeśli jest zakomentowana (znajdują się przed nią znaki “#” czyli jest wyłączona) to usuń te znaki aby doprowadzić ją do postaci j/w. Ponownie musisz oczywiście zrestartować serwer. Jeśli nie masz tej opcji ani w pliku httpd-hosts.conf ani w httpd.conf to dopisz taką linijkę samodzielnie (tylko jeśli drugi host nie działa).

Po restarcie serwera drugi vhost również powinien działać.

Podsumowanie

Mam nadzieję, że przybliżyłem nieco tematykę co pozwoliło osobom zainteresowanym zrealizować swoje potrzeby. Wszelkie uwagi i wątpliwości proszę zgłaszać za pomocą poniższego narzędzia.

Pozdrawiam.

Go to Top