Kod

Dlaczego Clean Marger Matter w projektowanie stron internetowych?

Ponieważ sieć jest zmieniającym się i ciągle ewoluującym organizmem, ważne jest, aby budować witryny, które mogą rosnąć wraz z nią i łatwo jeździć prądem, zamiast utonąć, gdy zbliża się nowa fala.

Czyste oznaczanie i budowanie przy pomocy standardów internetowych nie tylko pomaga w tym, ale także oszczędza czas i pieniądze na dłuższą metę.

Wraz z rozwojem sieci rośnie wraz z nią wykorzystywana technologia. Choć HTML istnieje już od dłuższego czasu, zyskał sporo pomocników po drodze.

Najpierw JavaScript, potem CSS, XML i później AJAX. Szerokie zastosowanie HTML 5 jest tuż za rogiem, Firefox, Safari, Opera i Chrome już korzystają z prawie pełnego wsparcia HTML 5 (powolne dziecko w bloku, Internet Explorer, pozostaje w tyle jak zwykle).

W tym artykule omówimy podstawy standardów internetowych, ich znaczenie, znaczenie dla Ciebie i kilka ważnych wskazówek, które pomogą Ci rozwiązać ten ważny i często zaniedbywany problem.

Co to znaczy mieć "czysty" znacznik?

Mówiąc najprościej, oznacza to brak bałaganu, zgodność ze standardami oraz używanie tagów i struktur każdego języka do ich zamierzonego celu.

Niekomplikowany kod HTML powoduje rzadkie korzystanie z tagów, eliminuje zbędne treści i realizuje swoje zadanie z niewielkim znaczeniem, jeśli to konieczne . Pozwala uniknąć niepotrzebnych atrybutów, takich jak wbudowany styl CSS, i pozostawia każdy zorganizowany i uporządkowany dokument.

Podobnie bezproblemowy kod CSS powinien unikać powtarzania się, wykorzystywać dziedzictwo (pamiętaj, CSS oznacza Cascading Style Sheet) i ponownie używaj klas, gdy tylko jest to możliwe.

Zgodność ze standardami oznacza, że ​​twoje strony sprawdzają zgodność ze standardami określonymi przez W3C dla HTML, CSS i XML. Oznacza to korzystanie z darmowych walidatorów W3C w celu sprawdzania błędów, ich korygowania i testowania do momentu, aż uzyskasz maksymalnie 100% poprawności .

Czemu miało by mi zależeć? To działa, czy to za mało?

Każdy projekt ma agresywny termin i każdy klient chce, aby jego strona została uruchomiona wczoraj. Jako programiści i projektanci stron internetowych jesteśmy pod ciągłą presją, aby pracować szybciej i wydajniej.

Łatwo wpaść w pułapkę myślenia szybko musi oznaczać niechlujstwo , a czysty, zgodny ze standardami markup zabiera więcej czasu. Łatwo jest po prostu powiedzieć "działa i to się liczy".

Jasne, działa ... na razie, dla ciebie. A co z przyszłym rokiem, a może za trzy lata? A co z nowymi przeglądarkami? A co z ułatwieniami dostępu?

Czy naprawdę sądzisz, że największe wyszukiwarki będą stosować specjalne, niechlujne metody kodowania? Są wybredne, a jeśli nie spełniasz standardów, kopiesz ranking wyszukiwania w twarz .

A co z następnym biednym sokiem, który musi edytować te strony, które utworzyłeś? Co się stanie, jeśli zostaniesz potrącony przez autobus, wyjdziesz z plecakiem na Alaskę lub zostaniesz uprowadzony przez kosmitów? Ktoś inny musi odebrać miejsce, w którym skończyłeś, a on będzie patrzył na twój kod, próbując zrozumieć. Czy będzie to łatwe, czy może sprawi mu ból głowy i sprawi, że przeklnie twoje imię?

Zrób to poprawnie za pierwszym razem. To nie jest tylko irytująca, ojcowska lekcja życia. Pozwoli ci to zaoszczędzić czas i pieniądze, a także sprawi, że ci, którzy Cię śledzą, będą mieli łatwiejszy czas.

Możesz pomyśleć, że szybsze jest wstawianie wbudowanego CSS zamiast poprawnego dodawania nowej klasy do arkusza stylów. I możesz pomyśleć, że szybciej wrzucić to, co HTML możesz wypluć, nie biorąc pod uwagę ogólnej struktury dokumentu.

Kiedy przyjdzie czas na zaktualizowanie tego dokumentu później lub przeprojektowanie całej witryny, spędzisz znacznie więcej czasu nadrabiając niechlujny kod, niż kiedykolwiek zaoszczędzony, pędzisz przez niego w pierwszej kolejności. Gdy utworzysz nowy arkusz stylów, te wredne, dodane do linii style powracają, by Cię prześladować, a będziesz spędzał wiele godzin na ich tropieniu i rozbieraniu.

Rozszerzalność, dostępność, tłumaczenie i przyszłe sprawdzanie

Przeglądanie na urządzeniach mobilnych rośnie jak Godzilla na sterydach atomowych. Zamiast być spadkobiercą do uzależnienia od Blackberry 5 lat temu, dziś wszyscy używają telefonu do surfowania po Internecie.

Technologia asystująca - czytniki ekranu dla niewidomych i alternatywnych urządzeń do obsługi osób niepełnosprawnych - jest powszechna i nie chcesz stracić sprzedaży lub zrazić ruchu tylko dlatego, że nie wziąłeś tego pod uwagę.

Twoja strona może zostać przetłumaczona na pół tuzina języków, ponieważ czytelnicy z całego świata znajdą Twoje treści. Dzięki do Archiwum internetowe , Pamięć podręczna Google i inne, strony, które publikujesz dzisiaj, będą dostępne przez długi czas, nawet po tym, jak zostaną usunięte z Twojej witryny na żywo.

Czyste znaczniki i zgodność ze standardami znacznie ułatwią działanie witryn w każdym z tych scenariuszy.

Za I przeciw:

  • Używaj tagów zgodnie z ich przeznaczeniem. Na przykład: h1 jest pierwszym elementem najwyższego poziomu na stronie, a następnie h2, h3 i tak dalej. Na stronie powinien znajdować się tylko jeden znacznik h1.
  • Podyktuj swoje klasy i identyfikatory CSS za pomocą znaczących haseł i zadaj sobie pytanie, czy ktoś inny będzie wiedział, co robi klasa / ID z samej nazwy. Która konwencja nazewnicza ma więcej sensu: # box12 lub # comment-footer?
  • Zrób dobry użytek z dziedziczenia CSS. Na przykład: jeśli ustawisz czcionkę na kontenerze, nie musisz określać jej ponownie dla każdego elementu potomnego, chyba że ten element podrzędny musi używać innej czcionki. Dzięki temu arkusze stylów będą chude i szybkie do załadowania.
  • Sprawdź poprawność kodu HTML, CSS i XML i popraw jak najwięcej błędów. Zwróć także uwagę na generowane ostrzeżenia.
  • DOKONUJĄ podwójne sprawdzenie WYSIWYG wygenerowany kod i w razie potrzeby oczyścić. Są znani z wypluwania nieporęcznych, nadmiarowych znaczników z mnóstwem niepotrzebnych, nieważnych śmieci.
  • NIE STOSOWAĆ inline style lub dodatkowych tagów i atrybutów tylko dlatego, że jesteś w pośpiechu.
  • NIE DOPUSZCZAJ DO " DZIAŁA". To, że strona się wyświetla, nie oznacza, że ​​znaczniki pod maską są zgodne ze standardami, są bezproblemowe lub są przyjazne dla wyszukiwarek.

Dalsze lektury i zasoby


Napisany specjalnie dla WDD przez Jeffa Couturiera.

Czy podążacie za standardami internetowymi w swoich witrynach? Dlaczego lub dlaczego nie? Podziel się z nami swoimi komentarzami.

projekt standardy internetowe oczyść markę