Всем привет. Сегодня мы поговорим об очень важном процессе, про который часто забывают, — проверке сайта. Я имею в виду проверку кода. Почему стоит проверять код? Я называю браузеры чрезмерно
заботливыми папашами разработчиков. Часто вы пишете код, затем делаете перерыв, проверяете его, все выглядит прекрасно. Потом пишете еще, проверяете. Все прекрасно. Вы предполагаете, что код правильный,
потому что страница хорошо выглядит. Но проблема в том, что браузеры
запрограммированы искать и исправлять ошибки. Однако не все браузеры одинаково
исправляют такие ошибки. Также важно помнить, что не все
читают вашу страницу с помощью обычного браузера. Ваша страница постепенно будет становиться
сложнее, а эти скрытые проблемы, скрытые ошибки, которые браузер прячет,
превратятся в кошмар для людей, которые попытаются зайти
на сайт с другого ПО. Есть три подхода к проверке кода на правильность. Первый — проверка URI, или URL-адреса. Второй — проверка по имени файла.
Это значит, что вместо URL-адреса вы можете загрузить файл и проверить его. Третий — это ручной ввод. Давайте быстренько разберем пример. Сайт, который я буду
использовать,— средство проверки. Отлично. Посмотрите. Сначала нужно ввести
в адресную строку браузера validator.w3.org. Как вы помните, W3 — это ассоциация, которая разрабатывает общепринятые стандарты. Вот три варианта проверки. Проверка по URI, загрузка файла и ручной ввод. Это в каком-то плане важный выбор. Некоторые из вас не собираются
покупать доменное имя, в этом случае вы не сможете указать URL-адрес. Вы не сможете ввести C://, это так не работает, вы не сможете указать
локальную папку на компьютере. Поэтому я покажу пример
проверки путем ручного ввода. Давайте сначала посмотрим
на страницу, которую мы будем проверять. Здесь у меня фото города Аштабула с видом на пляж. Страница выглядит хорошо,
как можно заметить. На первый взгляд никаких проблем. Давайте посмотрим, что будет,
если я проверю этот код. Если хотите сделать это быстрее,
вот простое сочетание клавиш: Я нажму Ctrl+A и Ctrl+C. Вернусь сюда, вставлю код и нажму «Проверить». Вроде выглядит хорошо, но средство проверки сразу указывает на ошибку:
отдельно стоящий закрывающий тег. И это относится к тегу section. Как правило, средства проверки дают подсказку, в какой строке вы допустили ошибку.
Вернемся к коду. Если я спущусь до строки 25... Упс! Повыше. Нет, все еще не оно. Очень длинные строки. О, все правильно. Как видите, я случайно
вставила тег </section> дважды. На самом деле я хотела вставить закрывающий тег здесь
и открывающий тег здесь. Давайте это исправим. Сохраню, скопирую снова и попробуем
проверить заново. Перезагружу страницу. Вернусь. Посмотрим, повезет ли на этот раз. Хорошо, хорошо. Никаких ошибок и предупреждений,
так что могу просто снова выгрузить страницу. Это самый простой способ проверить правильность синтаксиса кода. Я привела весьма простой пример,
всего с одной ошибкой. Зачастую же средство проверки выявляет
огромное количество ошибок. Но, поверьте, не стоит паниковать, когда вы с этим столкнетесь. Причина заключается в том, что ошибки множатся. Средство проверки путается. Если вы допускаете ошибку в начале кода,
она выливается в целую кучу ошибок. Поэтому стоит исправлять сначала первую ошибку,
обнаруженную средством проверки. Когда вы ее исправите, высока вероятность, что 52 обнаруженные ошибки превратятся в 12 или 11. Также есть вероятность того, что,
когда вы исправите ошибку, средство проверки найдет еще 20 или 30 ошибок. Но, опять же, исправляйте их постепенно. Если ошибка, которую выдало средство проверки,
не слишком понятна, вы можете поискать в Интернете
и на разных форумах. Уверяю, другие люди уже сталкивались с такими же ошибками. Давайте вернемся к средству проверки и проверим код по URI. Выберите любимый сайт и вставьте его адрес. Я не стану вставлять свой сайт,
потому что он пройдет проверку. Я вставлю http://www.umsi.umich.edu, чтобы мой начальник на меня позлился,
когда я ему покажу, что его сайт не прошел проверку. Вы сразу видите,
что найдена куча ошибок. Не важно, какой сайт вы укажете,
особенно если он очень известный, вы увидите, что на таких сайтах много ошибок, что сайт не прошел проверку. Поэтому давайте сделаем так,
чтобы ваши сайты были лучше. Одно дело проверять синтаксис. Но совсем другое — проверять доступность. Мы уже говорили о том,
как важно делать сайты доступными для как можно
большего числа людей. Доступность можно проверить, например, на сайте wave.webaim.org. Это сайт именно для проверки доступности. Давайте снова проверим наш код. Захожу в браузер и перехожу
на сайт Wave. Здесь нельзя загрузить код в виде файла или просто вставить код. Нужно указать URL-адрес. Я проверю тот же код, который мы уже проверяли, с пляжами. Вставляю его сюда. Как видите, никаких ошибок,
но парочка предупреждений. Предупреждения просто указывают на то, что альтернативный текст не оптимален. Кроме того, есть предупреждение об
избыточной ссылке, т.е. одна ссылка указана два раза. Пока что все прекрасно в плане синтаксиса, а доступность в плане семантики
на высоком уровне. Что хорошо в проверке доступности — это то, что она указывает на вещи, о которых вы не задумывались, но, к сожалению, она работает только
с размещенными веб-страницами. Проверенные сайты всегда более надежны и доступны в сравнении с непроверенными сайтами. Ваша задача как программиста — посетить все эти сайты проверки и исправить
код в соответствии со стандартами. Если вы не пишете код, важно также проверять те сайты, на которых вы чаще всего бываете. Это даст почувствовать,
насколько важным разработчики считают обеспечение доступности сайта. Удачи.