Archiwum

Posty oznaczone ‘divy’

Standardy stron internetowych

Czerwiec 13th, 2009 end Brak komentarzy

Nie tylko ja się zajmuję tworzeniem stron internetowych, jak też całych portali – takich ludzi jest mnóstwo. Chcę tutaj napisać o jakości i pewnych wymaganiach, które klienci powinni przestrzegać. Więc jeżeli jesteś klientem, zamawiasz u kogokolwiek stronę internetową to poświęć chwilę, by przeczytać ten krótki artykulik. Oczywiście, jeżeli zamawiasz stronę niskobudżetową – nie spodziewaj się by wszystkie warunki dobrej strony zostały spełnione. Zanim zamówisz stronę, upewnij się w jakich standardach będzie ona wykonana! Odpowiedni poziom kodu strony jest wymagany m.in. do jej dobrego wypozycjonowania!

Standard xHTML

Aktualnie w internecie obowiązuje standard xHTML. HTML to naprawdę już trochę przestarzały standard. Po czym rozpoznać, w jakim standardzie wykonana jest strona? Zerknij w kod strony, w pierwszej linijce powinna być deklaracja DOCTYPE, która określa w jakim standardzie strona została wykonana. Przykładowa deklaracja kodu xHTML:

<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN” „http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Można z niej wyczytać, iż strona kodowana jest w xHTML 1.0, w wersji przepisowej. Można też spotkać deklarację xHTML Strict – czyli restrykcyjną. Nie będę się tutaj rozwodził, która wersja jest lepsza, osobiście sam zawsze korzystam z transitional. Jeżeli spotkasz deklarację xHTML 1.1 – również jest dobrze. W treści tego artykułu pisząc o kodzie HTML mam na myśli oczywiście kod xHTML, jednak z przyzwyczajenia piszę bez początkowego ‘x’ ;)

Jeżeli sprawdzając stronę nie odnajdziesz na początku jej kodu deklaracji to może naprawdę źle wróżyć…

Divy, nie tabelki!

Wiele dawnych webmasterów tworzyło strony, w których treść była w tabelkach, które określały wygląd strony. Dość często można było również spotkać dodatkowo ramki. Te czasy to już przeszłość, teraz nowoczesna strona internetowa opiera się o ‘divy’. Czym właściwie są te divy? Najprościej rzecz ujmując są to pola, które można dowolnie formatować i pozycjonować na stronie internetowej, przy użyciu CSS (o którym jest mowa w dalszej części tekstu). Jeżeli nie znasz się na kodzie HTML, może być Ci ciężko określić, czy strona oparta jest o tabelki, czy o divy – jednak spróbuj zajrzeć w kod, i sprawdź, czy przypadkiem na każdej podstronie nie przeważają tabelki (tabelka to tag <table>). Jeżeli na stronie nie będzie żadnych danych tabelarycznych, a zobaczysz w kodzie tabelki, możesz śmiało pytać o to swojego webmastera ;)

Poprawny kod xHTML

To nie Ty masz znać kod HTML, a osoba która Ci wykonuje stronę, więc jak sprawdzić czy wszystko jest poprawnie? W3C (World Wide Web Consortium) udostępnia bezpłatnie na swojej stronie internetowej walidator kodu pod adresem http://validator.w3.org/. Dowiesz się czy strona jest wykonana w pełni poprawnie, czy są na niej błędy. Śmiało, możesz do osoby wykonującej dla Ciebie stronę napisać, że strona nie parsuje się poprawnie w walidatorze kodu na w3c i oczekiwać na poprawę kodu. Jak chcesz, możesz również sprawdzić w nim każdą podstronę, nie tylko stronę główną – bo może zdarzyć się tak, że tylko strona główna będzie wykonana w pełni poprawnie, a na podstronach pojawią się już błędy.

Kaskadowe arkusze stylów CSS

Kiedyś strony byłe formatowane w jednym pliku, przez używanie tagu FONT i pokrewnych. Aktualnie nie korzysta się już z takiego rozwiązania, za wygląd strony odpowiada CSS.

Jak to działa?
Strona HTML zawiera informacje n/t zawartości strony, oraz określa czym ma być który element strony. Natomiast CSS określa wygląd każdego z tych elementów. Edytując styl CSS w nowoczesnej stronie powinieneś być w stanie dowolnie zmieniać wygląd strony. Może trochę ciężko to brzmi, jednak jest to proste i sprowadza się do tego, że kod HTML powinien się ograniczać do treści strony, okraszonej prostymi tagami, typu h1, p, div, pomiędzy którymi zawiera się treść strony.

Dość często można spotkać kod CSS w statycznej stronie internetowej wpleciony w kod HTML, czyli tagi okraszone atrybutem style, w którym jest opisany wygląd danego elementu. To nie jest dobre rozwiązanie, to nie o to tu chodzi.

Jeżeli zobaczysz plik CSS oddzielony od kodu HTML, i tylko podpięty w nagłówku, możesz być zadowolony. Będziesz mógł dowolnie, z łatwością zmieniać wygląd strony. Zmieniając parametry wyglądu w jednym pliku CSS efekt od razu będzie widoczny na wszystkich podstronach serwisu. Prawda, że tak jest dużo łatwiej, niż modyfikować każdy plik HTML z osobna? :)

Kod CSS też ma swoje zasady, i tak samo jak w przypadku kodu HTML można sprawdzić jego poprawność, dzięki W3C i darmowemu narzędziu, udostępnionemu na ich stronie – http://jigsaw.w3.org/css-validator/. Wpisujemy tam adres naszej strony, a walidator sam pobierze z niej kod CSS, i wyświetli nam informacje na temat jego poprawności.

Różne przeglądarki internetowe

Według danych zbieranych przez serwis ranking.pl około 40% polaków korzysta z przeglądarki Firefox, drugie tyle wykorzystuje przeglądarkę Internet Explorer. W pozostałych 20% mamy jeszcze użytkowników Opery, Chroma, Safari i innych przeglądarek. Można właściwie zapytać, co to ma do rzeczy? Ano ma – prawie każda przeglądarka, ma swój silnik, który analizuje nasz bezbłędny kod xHTML i CSS i wyświetla zgodnie ze swoim ‘widzimisie’. Strona zazwyczaj wygląda dobrze i tak samo pod przeglądarkami takimi jak Opera, Firefox, czy Chrome, jednak niestety możemy spotkać się z kompletnym rozwaleniem strony gdy otworzymy ją w przeglądarce Internet Explorer, która niestety narzuca sobie swoje standardy. Cóż – życie webmastera nie jest łatwe. Strona niedość że powinna być w pełni poprawnym kodem xHTML i CSS, to jeszcze musi się wyświetlać poprawnie w każdej przeglądarce internetowej. Warto ją sprawdzić przynajmniej w ‘podstawowej trójce’, czyli przeglądarkach Opera, Firefox i Internet Explorer.

Podsumowanie…

Tworzyć strony internetowe w dzisiejszych czasach może każdy. Istnieje wiele prostych w obsłudze programów do tego celu. Nawet popularne edytory tekstu oferują funkcję zapisu pliku jako stronę internetową. Jednak nie osiągniemy w ten sposób jakości kodu, jaka jest mile widziana w dzisiejszym internecie. Jeżeli masz więc swoją stronę internetową, sprawdź ją teraz pod kątem standardów opisanych w tym artykule ;)