Готовый сайт обязательно должен пройти процедуры проверок. Основные — это кроссбраузерная проверка , проверка корректного отображения веб-страниц в разных разрешениях экрана и проверка на валидность (валидность CSS и валидность HTML).

Проверка сайта в различных разрешениях экрана

При создании сайта веб-мастеру необходимо проверить, как выглядит его детище в наиболее часто используемых юзерами браузерах. Некоторые разработчики начинают задумываться об этой проверке, когда сайт практически готов. Если обнаруживаются какие-либо накладки на этом этапе, то многое приходится переделывать — фактически, делать двойную работу.

В интернете есть специальные сервисы, позволяющие избежать таких неприятных ситуаций. Один из них, позволяющий просмотреть ваш сайт (или любой другой) в разных разрешениях — ViewLike.Us

Этот сервис, с одной стороны, очень простой, а с другой — очень мощный и в тоже время. Бесплатно и без регистрации вы сможете просмотреть любой сайт в разных разрешениях, начиная от мобильной версии и заканчивая широкоформатными мониторами с разрешением экрана 1920х1200.

Помимо сайтов, уже размещенных в сети интернет, этот же сервис можно использовать и для локального сайта.

Кроссбраузерная проверка

Количество браузеров, в которых пользователи просматривают веб-страницы, сегодня довольно велико. А если прибавить к этому тот факт. что у каждого браузера существует по несколько версий, то количество возможных вариаций, как будет выглядеть ваш сайт, увеличивается в разы.

Возможностей кроссбраузерной проверки несколько. Можно открыть сайт во всех установленных на компьютере браузерах и посмотреть, как ведет себя сайт. Но велика вероятность того, что у разработчика не будет всех версий всех браузеров.

Еще один способ — поднять несколько виртуальных машин, на которых можно будет досконально протестировать (к примеру, подвигать границу окна, поскроллить и уж тем более посмотреть, как работает JS).

Если же разработчик хочет увидеть сайт в целом, посмотреть, не «криво» ли он просто взглянуть на сайт и понять, все ли с ним в порядке в целом. Либо предоставить такую возможность заказчику.

В интернете также существуют сервисы, способные облегчить жизнь разработчику. Один из них — browsershots.org.

Browsershots — пожалуй, самый популярный сервис для тестирования кроссбраузерности. Позволяет делать скриншоты вашего сайта практически во всех видах браузеров. При настройке можно выбрать как виды движков (WebKit или Gecko), так и виды операционных систем (Linux, Windows, Mac OS X или BSD). Так же в настройках есть выбор разрешения экрана, присутствие установленного javascript, flash, java и другие виды параметров. Единственный минус этого сервиса — довольно долго приходится ждать, когда будут сгенерированы все скриншоты. Время ожидания — до 2-х часов в некоторых браузерах, которые, правда, не так распространены, как, к примеру, Internet Explorer, Mozilla Firefox, Google Chrome и Opera.

Проверка на валидность

Проверка html на валидность

Для проверки веб-страниц на наличие ошибок и замечаний существует множество путей и способов. Их условно делят на онлайновые и локальные. Онлайновые предназначены для проверки страниц с помощью браузера через Интернет, а локальные используются для проверки документов на текущем компьютере. Рассмотрим популярные методы валидации документов.

validator.w3.org

По адресу http://validator.w3.org располагается, пожалуй, самый распространенный инструмент для проверки отдельных страниц на валидность. Этот сайт предлагает три способа проверки: по адресу, локального файла и введенного в форму кода.

Проверка по адресу

Если ваш сайт уже опубликован в Интернете, то любую страницу можно проверить, вводя в текстовое поле ее адрес (рис. 1).

Рис. 1. Форма для ввода адреса документа

Введя, к примеру, http://htmlbook.ru в форме «Validate by URI» (валидация по адресу) и нажав кнопку «Check» (проверить), веб-мастер получит сообщение о том, валидный документ или нет.

Хотя в текстовом поле вводится адрес сайта, проверяется не сайт целиком, а только одна главная страница.

В процессе работы валидатор проверяет HTML-код страницы и в случае отсутствия ошибок докладывает о валидности документа (рис. 2).

Рис. 2. Отчет о проверке и валидности веб-страницы

Если же обнаружены ошибки, выводится уведомление о том, что страница не валидна и список ошибок с указанием строк, где встречаются ошибки (рис. 3).

Рис. 3. Отчет о проверке и вывод ошибок

Проверка локальных файлов

Документы, еще не выложенные в интернет, можно проверить с помощью формы «Validate by File Upload» (валидация загруженных файлов). Вы увидите следующее:

Рис. 4. Форма ввода пути к локальному файлу для его проверки

Вначале следует указать путь к HTML-файлу, после чего нажать кнопку «Check». Файл будет загружен на сервер и проверен на ошибки.

Использование формы для ввода кода

В некоторых случаях требуется проверить код без сохранения его в отдельный файл. В этом случае пригодится форма для прямого набора текста и отправки его на сервер для валидации (рис. 5).

Рис. 5. Форма для ввода HTML-кода

Расширение HTML Validator для браузера Firefox

Firefox — один из самых популярных браузеров. Это обусловлено наличием для него большого количества разнообразных расширений. В том числе, и для валидации документа прямо в браузере. Программа HTML Validator построена по той же технологии, что и валидатор W3C, но не требует подключения к Интернету.

Скачать ее можно, например, по адресу http://users.skynet.be/mgueury/mozilla/

После скачивания файла установить расширение можно несколькими способами.

1. Через менеджер расширений

Запустите Firefox и откройте меню Инструменты > Расширения. Перетащите мышью загруженный файл (он имеет расширение xpi) в открывшееся окно. Далее расширение будет установлено автоматически.

2. С помощью открытия файла

Выберите в меню Firefox пункт Файл > Открыть файл... и укажите путь к файлу с расширением, дальнейшие действия браузер выполнит сам.

3. Копирование файла в папку extension

Откройте папку на диске, где установлен Firefox (к примеру c:\Program Files\Mozilla Firefox) и найдите в ней подпапку extension, в которую скопируйте расширение. После запуска браузера дальнейшая установка пройдет самостоятельно.

Все приведенные методы установки требуют перезагрузки браузера после установки расширения. Работа HTML Validator начинается сразу же после повторного запуска Firefox.

HTML Validator начинает свою работу сразу же при запуске браузера и открытии веб-страницы. Результат проверки можно увидеть в строке состояния, в ее правом нижнем углу в виде небольшой картинки.

Виды картинок, отображаемых при проверке документа

Кружок с галочкой показывает, что документ валидный, желтый треугольник с восклицательным знаком — по коду имеются замечания, которые могут быть исправлены автоматически. А красный кружок с крестиком предупреждает, что есть серьезные ошибки.

Просмотреть все ошибки можно двояко. Во-первых, заглянуть в HTML-код документа через меню Вид > Исходный код страницы или щелкнуть правой кнопкой и в контекстном меню выбрать Просмотр исходного кода страницы.

Контекстное меню с пунктом выбора исходного кода

Окно исходного кода веб-страницы разделено на три части, где верхний блок содержит собственно HTML-код. В левом нижнем блоке отображается список ошибок и замечаний или информационные сообщения в случае валидного документа. Правый нижний блок предназначен для подробных подсказок о текущих замечаниях.

Результат работы расширения HTML Validator

Проверка CSS на валидность

CSS (от англ. Cascading Style Sheets) – это специальная технология, призванная описывать внешний вид документа языком разметки. С помощью CSS можно легко выполнить верстку, не загромождая код самого документа, что значительно ускоряет скорость загрузки.

Для проверки CSS существует очень полезный сервис, который находится по адресу http://www.w3.org. Это услуга, предоставляемая компанией W3C. При переходе на данный сервис по ссылке http://jigsaw.w3.org/css-validator/ вы увидите новое окно, которое будет выглядеть следующим образом:

Весь интерфейс сервиса проверки русифицирован. Кроме того, есть возможность выбора языка из 18 доступных. Внизу страницы имеется примечание, которое гласит о необходимости проверки кода HTML на валидность. Только вместе, оба абсолютно правильных кода гарантируют корректность документа. В окне присутствуют вкладки, предлагающие проверить на выбор:

- URI

- Загруженный файл

- Набранный текст

Настроек проверки как таковых нет, но сервис предлагает нам сгенерированный валидный код таблицы стилей, который будет отображен после списка всех ошибок и предупреждений:

Его можно изучить, сравнить с исходным вариантом, выявить методы исправления ошибок и предупреждений, а после принять меры по их устранению.