Наверное, многие верстальщики и веб-мастера стыкались с проблемой, как проверить код своего сайта на ошибки. Конечно же, большинство знает за известные валидаторы, но я уверен, что есть определенный процент, который этого не знает и им бы это пригодилось. И вот сегодня я решил написать небольшой список неплохих инструментов для верстальщиков.
.01 Markup Validation Service
Прямая ссылка на сайт - validator.w3.org.
Самый популярный сервис для проверки вашего кода. Я считаю, что каждый верстальщик должен знать о нем. Это очень удобный инструмент, который предоставляет гибкий сервис для проверки кода. Поддерживает разные типы языков: HTML (уже есть возможность проверять HTML5), XHTML, MathML, SVG, SMIL. Свой код Вы можете проверить 3-мя способами:
- Раздел "Validate by URI". Если Ваш сайт уже выложен в Паутине, Вы можете просто вписать адрес своей странички в соответствующее поле на сервисе и оно тут же просканирует Ваш код и выдаст отчет.
- Раздел "Validate by File Upload". Если Ваш сайт только на локальном хостинге, то есть, находится только у Вас на компьютере, Вы можете загрузить файл Вашей странички на сайт проверки и он также само сделает свое дело.
- Этот способ скорее всего разрабатывался для тех ленивых верстальщиков, которым первый и второй способ не интересны)) Просто выделите свой код (Ctrl + A) и скопируйте (Ctrl + C), далее зайдите на сайте "валидатора" в раздел "Validate by Direct Input", вставьте Ваш код (Ctrl + V) и нажмите "Check".
Кстати, "Check" надо жать во всех трех разделах
.02 CSS Validation Service
Прямая ссылка на сайт - jigsaw.w3.org/css-validator.
Еще одно детище w3.org. Вслед за проверкой HTML-разметки нужно проверить правильный ли код в Вашей таблице каскадных стилей CSS. Этот инструмент идентичен "Markup Validation Service", все разделы такие же, только он проверяет Ваш CSS.
.03 Feed Validation Service
Прямая ссылка на сайт - validator.w3.org/feed.
Да да, Вы правильно поняли, проверяем синтаксис Atom или RSS каналов. Интерфейс такой же, как и в первых двух сервисах, правда тут только два раздела: "Validate by URI" и "Validate by Direct Input".
.04 Link Checker
Прямая ссылка на сайт - validator.w3.org/checklink.
Может проверим еще наши ссылки и анкоры? В этом нам поможет "Link Checker". Тут все просто, вводим URL адрес документа, выставляем галочки в настройках и жмем "Check"
.05 W3C mobileOK Checker
Прямая ссылка на сайт - validator.w3.org/mobile.
А Ваш сайт нормально отображается на мобильных девайсах? Не знаете?) Сейчас проверим! Заходим на "W3C mobileOK Checker", видим знакомые нам 3 раздела проверки, выбираем более подходящий и проверяем веб-страничку на правильное отображение на мобильных устройствах.
.06 Web Page Analyzer
Прямая ссылка на сайт - websiteoptimization.com/services/analyze.
По названию, я думаю, Вы уже поняли, что делает этот сервис. Он проводит анализ размера страницы, время и скорость загрузки, как страницы в целом, так и отдельных файлов, скриптов и рисунков. Так же дает рекомендации по улучшению оптимизации кода.
.07 Access Color
Прямая ссылка на сайт - accesskeys.org/tools/color-contrast.html.
Инструмент для проверки контрастности и яркости текста и фона. С помощью него мы можем узнать и увидеть, как будет восприниматься веб-страничка людьми с нарушенным зрением.
.08 Browsershots
Прямая ссылка на сайт - browsershots.org.
Этот сервис дает Вам возможность увидеть, как выглядит сайт в разных браузерах. Имеет гибкие настройки: можно выбирать разные версии браузеров под Windows OS, Mac OS, Linux, BSD; разрешения экрана; глубину цвета; поддержку Javascript, Java и Flash.
Правда, если Вы выбрали практически все браузеры, то ждать готовых скринов Вам придется долговато. Это, наверное, единственный минус, который я нашел в этом сервисе.
.09 NetRenderer
Прямая ссылка на сайт - ipinfo.info/netrenderer.
Инструмент позволит Вам увидеть, как выглядит Ваш сайт в IE 5.5, 6, 7 и 8. Полезная штуковина
Ну вот и все!) Надеюсь хоть какой-то сервис Вам будет полезен Если Вы знаете еще какие-нить полезные инструменты для верстальщиков, поделитесь!
