Предыдущий ролик Следующий ролик  

Видео урок: Тестирование сайтов

Основы веб-дизайна

В процессе обучения веб-дизайну вы должны почти сразу выработать привычку как можно раньше и чаще тестировать все, что вы разрабатываете. Необходимо тестировать сайты не только в процессе разработки, но и после публикации их в сети интернет. Тестирование сайтов в процессе разработки позволяет быстро находить ошибки и предотвращать их перерастание в более крупные проблемы. Давайте рассмотрим парочку методов тестирования сайтов. Итак, на данный момент страница index.htm моего сайта desolve.org открыта в редакторе кода Brackets.

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

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

Если сохранить этот код и вернуться на страницу нашего сайта, то можно увидеть, что теперь все в порядке. Вроде как в порядке. Обратите внимание, что цвет текста в некоторых местах розовый. Я этого не хотел. Может быть кто-то устанавливает такой цвет текста на время проведения месячника по борьбе с раком груди, что весьма эксцентрично. Но, возможно, сейчас мне такой цвет не нужен. Таким образом, вам приходится множество раз обследовать код и искать в нем ошибки. Опять же этот курс не посвящен редактору Brackets. В нем не рассказывается, как пользоваться каким-то конкретным инструментом. Brackets - просто один из используемых мною редакторов кода.

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

Итак, в настоящий момент я пользуюсь браузером Chrome. Но на самом деле абсолютно не важно, с каким браузером вы работаете: Internet Explorer, Firefox, Opera, Safari. Во всех этих браузерах есть инструменты, аналогичные тому, который я сейчас продемонстрирую. Если я, находясь в браузере Chrome, захочу узнать, почему цвет этого текста розовый, я могу нажать по этому тексту. Можно нажать по нему правой кнопкой мыши и выбрать пункт "Inspect Element" (Просмотр кода элемента). В результате на экране появится вот такая панель. Можно ее немного расширить. Готово. Это так называемая "Панель инструментов для веб-разработчика" (webdev tool). В Chrome - это WebKit Inspector, в Firefox - Firebug. В браузере Internet Explorer используется собственная версия. В Opera - это Dragonfly.

Таким образом, во всех этих браузерах есть аналогичные инструменты. Мне нужно выяснить, почему текст выделен розовым цветом. Для этого мне нужно всего лишь взглянуть в правую часть панели, в раздел "Styles" (Стили). Если спуститься немного вниз, то можно увидеть, что атрибуту color установлено значение "pink". Задается это правило для элемента body. Ага, интересно. Помимо этого чуть раньше устанавливается значение еще одного атрибута color. Итак, если снять вот эту отметку и немного прокрутить нашу страницу, то можно увидеть, что это как раз тот цвет, который мне и нужен. Итак, я выяснил, что вот этот конкретный элемент или правило является причиной моих проблем. Вернемся в редактор Brackets и откроем файл main.css. Найдем в нем правило для элемента body и удалим вот эту строку.

Сохраним изменения. Если снова вернуться к режиму предварительного просмотра, то мы уже не увидим розовый текст. Итак, в большинстве случаев для того чтобы действительно разобраться в том, что происходит на странице, и исследовать код, можно воспользоваться встроенными в браузеры инструментами. Например, WebKit Inspector, инструментами веб-разработчика браузера Internet Explorer, и т.д. В браузерах есть еще множество других полезных инструментов. Есть, например, консоли ошибок JavaScript. С помощью этих инструментов можно выполнять различные виды тестирования. Осмелюсь предположить, что в настоящий момент, на данном этапе развития веб-разработки, именно эти инструменты в первую очередь используются для тестирования сайтов, поиска ошибок и выяснения причин возникновения тех или иных явлений.

Но есть еще и другие варианты тестирования. Можно воспользоваться некоторыми бесплатными сервисами. Загрузим прямо в этой вкладке W3C Markup Validation Service - сервис проверки разметки веб-документов. Каждому разработчику всегда хочется писать только корректный код. Чуть позднее мы поговорим о том, почему так важны веб-стандарты, и почему нужно стараться писать понятный, соответствующий стандартам код. Но чтобы проверить, соответствует ли написанный вами код стандартам, можно воспользоваться и таким сервисом, как этот. Давайте проверим сайт desolve.org. Естественно, проверять нужно только действующие сайты.

Локальные сайты можно проверять разными способами, но этот сайт опубликован в сети интернет. Подождите. Ошибки в моем коде? Вы шутите. Надо выяснить, в чем дело. Итак, обнаружено 5 ошибок и одно предупреждение. Хм, давайте посмотрим. Если прокрутить страницу вниз, то можно увидеть, в каких местах были обнаружены ошибки. Тут даже сообщается номер строки. Классно! Итак, здесь говорится о том, что в этом контексте элемент hgroup не разрешается использовать в качестве дочернего для элемента header. К сожалению, не так давно элемент hgroup был удален из спецификации HTML5. Я расстроен.

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

Как видите, W3C - слегка капризный сервис. Я сам должен решать, устранять эти ошибки или нет. Таким образом, в большинстве случаев после запуска подобного сервиса будет обнаружено несколько ошибок, и вам придется самому решать, избавляться от этих ошибок или оставить все, как есть. В моем случае эти ошибки не вызовут никаких проблем. Они никак не повлияют на скорость загрузки страницы или на ее отображение, поэтому можно оставить все, как есть. Или можно вернуться в редактор кода и немножко подправить код. Компания Google предоставляет вам множество других инструментов.

Я покажу вам только один из них, но на самом деле Google разработала целую серию так называемых "инструментов для веб-мастеров" (webmaster tools). Вы можете здесь зарегистрироваться. С помощью этих инструментов можно выполнить множество задач. На самом деле мне больше всего нравится инструмент PageSpeed Insights. Фактически, если зайти в поисковик Google и ввести в строке поиска "Google Web Development Tools", вам будет предоставлен целый список инструментов, с помощью которых можно запускать сайты и тестировать их, определять, достаточно ли они оптимизированы. Итак, у нас есть сайт desolve.org. Проанализируем его. Опять же не забывайте, что анализировать нужно только сайты, опубликованные в сети интернет.

Эти инструменты не предназначены для анализа локальных сайтов. Я получаю некоторые оценки. Оценка для мобильных устройств - 80 из 100, а для стационарных - 95 из 100. Очень даже хорошо. Как видите, со стационарными устройствами дела обстоят очень даже хорошо. А вот над мобильными устройствами можно немножко поработать. Просматривая эту информацию, я стараюсь понять, что из этого может привести к возникновению проблем. Что касается скорости, мне советуют удалить из так называемой "above-the-fold" (верхней) части страницы код JavaScript и CSS, блокирующий отображение. Что это означает? Если нажать на ссылку "Show how to fix" (Как исправить?), то можно увидеть краткий обзор того, что мне стоит сделать.

Здесь говорится о том, что я подключил вот этот скрипт modernizr.custom.js не в нижней части страницы, как это положено, а в верхней. Поэтому, когда страница начинает отображаться, JavaScript блокирует ее отображение до тех пор, пока не загрузится этот скрипт. Та же ситуация и с файлом main.css. Как видите, я могу, например, отдать предпочтение видимому контенту и расположить его первым, могу оптимизировать изображения, сократить количество скриптов. Итак, это все, что я при желании могу исправить.

Мне нравится, что эти инструменты дают множество рекомендаций в зависимости от того, что происходит на вашем сайте. Эти инструменты хорошо использовать в рамках обучения. Не ждите, что сможете должным образом оптимизировать свои сайты сразу после того, как вы в первый раз воспользуетесь подобным сервисом. Они имеют скорее познавательную ценность. Обратитесь к подобному инструменту, выясните, что происходит с сайтом, а потом уже можете самостоятельно принимать обоснованные решения, устранять эти недостатки или нет. Я хочу показать вам еще кое-что - страницу Google Analytics. Итак, что же дает вам Google Analytics? По сути, вы регистрируетесь, размещаете небольшой фрагмент кода JavaScript в своем файле, и после этого Google начнет следить за конкретной страницей. Начнет отслеживать, кто посещает эту страницу, что эти пользователи делают на странице.

Благодаря Google Analytics вы можете получить много полезной информации. Но это абсолютно добровольное решение. Вы не обязаны использовать Google Analytics. Она не оказывает особого влияния на производительность вашего сайта, зато предоставляет множество полезной информации о том, кто пользуется вашим сайтом, и для чего. Вы не обязаны тестировать сайт с помощью Google Analytics, но благодаря этой системе можно понять, каким образом люди используют ваш сайт. А если они используют его не так, как вы задумали, то, возможно, это говорит о какой-то ошибке, которую можно исправить. Намного сложнее тестировать динамические сайты, для которых используются такие языки, как PHP и Ruby.

В таких случаях необходимо устанавливать локальную среду разработки и тестирования с помощью таких приложений, как MAMP и WAMP. После установки таких сред можно тестировать сайты с помощью локального сервера. Тестирование с помощью локального сервера полезно не только для динамических сайтов, но и для сайтов всех остальных типов. Поскольку невозможно предугадать, как будет работать сайт на сервере, если не запустить его на этом сервере. Установка таких сред отнимает немного времени. А если вы сможете подстроить ее под свой собственный веб-хостинг, то получите совершенную среду для тестирования.