Тестирование сайтов или проверка сайтов на ошибки

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

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

За всем этим нужно обязательно проследить, чтобы всё нормально отображалось и работало в различных браузерах (основные в рунете это Google Chrome, Mozilla Firefox, Internet Explorer, Opera) и при стандартных разрешениях экрана с шириной экрана 1024, 1280, 1600 и 1920 пикселей.

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

 

У разработчиков сайтов в принципе есть 2 основных способа сделать сайт:

  1. Используя какую-либо систему управления сайтами (CMS), как платную (пример - 1С-Битрикс), так и бесплатную (пример - Joomla, Wordpress, Drupal).
  2. Создать сайт без использования системы управления сайтами, в виде набора определённых файлов.

Для тестирования сайтов наиболее простым в плане проверки являются сайты, созданные с помощью первого способа.

Объясняется это довольно просто - подобные системы управления сайтами используют сотни тысяч человек во многих странах мира. Разработчики всех популярных систем управления сайтами (CMS) осуществляют постоянную поддержку своих детищ, к ним стекается информация об ошибках и недочётах, найдёнными в CMS веб-мастерами. Разработчики выпускают обновления, шлифуя и улучшая свой продукт. Эти обновления позволяют быстро и без проблем всем веб-мастерам или же владельцам сайтов улучшить свою систему управления. В итоге количество ошибок на сайте, которые могут появится по вине системы управления сайтом сведено к минимуму.

Но кроме самой CMS есть и другие возможные источники проблем, при создании сайта с помощью первого способа. Давайте перечислим основные.

  • сама система управления сайтов (CMS)
  • шаблон сайта, позволяющий выбрать графическое оформление сайта по вкусу
  • различные расширения к системе управления сайтом (CMS) - компоненты, плагины, модули
  • разные скрипты, добавляемые на сайт самим веб-мастером

Если по системе управления всё нормально, то по остальным источникам проблем пройдёмся подробнее.

Шаблон сайта

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

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

Обычно, на сайте, откуда вы скачиваете шаблон для Joomla или другой CMS, в описании шаблона указывается на основе какого фреймворка он сделан. Такие сложные шаблоны тяжёлые (весят от 20 и выше мегабайт - для сравнения, простые шаблоны от 100 килобайт до примерно 2 мегабайт). И соответственно, чем сложнее устройство, тем больше шансов, что там что-то сломается или будет неправильно работать. Так и со сложными шаблонами - внимательно проверьте работоспособность всех его модулей и расширений.

Расширения к системе управления сайтом (CMS)

Разширения – различные компоненты, плагины, модули к CMS, созданные не самими разработчиками системы управления сайтом, а сторонними разработчиками. Эти разширения значительно увеличивают возможности вашей системы управления сайтом, позволяя создавать большие информационные порталы и даже социальные сети. Но именно здесь выявляются большинство ошибок при создании сайтов. Поэтому в качестве совета – внимательно выбирайте нужные вам расширения, желательно на сайте разработчика вашей CMS, лучше выбирать наиболее популярные, смотрите на отзывы и комментарии других веб-мастеров об этих расширениях. Это минимизирует шанс появления ошибок на вашем сайте.

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

Установку любого такого расширения лучше всего проверить его на тестовом сервере. Для установки локального сервера на вашем компьютере, позволяющего на нём создать и проверить ваши сайты, рекомендуем прочитать статью Локальный сервер для сайта - DENWER.

Разные скрипты

Разные скрипты, добавляемые на сайт самим веб-мастером - самым простым примером этого является установка счётчика посетителей на сайте (кстати, об установке счётчика вы можете прочитать в статье "Установка счётчика посещений на сайт"). Также это могут быть коды различных систем рекламы (контекстная реклама, баннеры , тизеры, pop-up и pop-under рекламы и т.п.) или же например возможность установить комментарии Вконтакте на вашем сайте.

Здесь вам следует быть особенно внимательным, так как иногда бывает такое, что по каким-то причинам код скрипта не получается установить стандартным для вашей CMS способоми, тогда его необходимо будет вставить в код сайта. Ещё бывает, что владелец сайта не может найти подходящее расширение для своей CMS, чтобы добавить какую либо фукцию на свой сайт (например сделать верхнее меню в виде выпадающего списка), именно поэтому он ищет и устанавливает подобные скрипты в код сайта. Во всех этих случаях вам придётся лезть в код сайта, а для этого у вас должны быть хотя бы минимальные знания в HTML и CSS.

Собственно, на этом пожалуй, основные проблемы сайтов под управлением популярных CMS заканчиваются. Чего нельзя сказать о сайтах, построенных с нуля, без использования систем управленя сайтом, так как разработчику сайта нужно будет проверять буквально всё: и дизайн, и верстку, и программирование, а также чтобы всё это, собранное вместе, корректно работало и правильно выглядело в бразерах.

Что надо для тестирования

В помощь вам для тестирования сайтов предлагаем следующее:

Браузеры.

Тестирование в основном осуществляется в следующих браузерах: Internet Explorer (8, 9), Opera, Mozilla firefox, Google Chrome. Это наиболее популярные браузеры рунета на 2012 год.

Тестируются в разрешениях с шириной экрана 1024, 1280, 1600, 1920.

Также в браузерах на основе Chromuima (Google Chrome, Яндекс.Браузер, Хром.Майл), в Опере, IE9 и Firefox (при установленном расширении Firebug) есть возможность вызвать панель разработчика при помощи клавиши F12, с помощью которой очень удобно выявлять и править ошибки сайта.

Расширения браузеров, помогающие тестированию сайтов
В Mozilla Firefox и Google Chrome:
Web Developer – расширение для разработчиков сайтов, в частности для тестирования есть полезная фукция в группе инструментов «Размеры»  собраны несколько инструментов управления размером окна браузера. Можно посмотреть размер текущего окна браузера во всплывающем окне или вывести его в заголовок браузера. Так же можно задать окну браузера произвольный размер, чтобы посмотреть на поведения данной страницы при вносимых изменениях. (В Firefox есть русская версия, в Хроме только английская)
IE Tab – расширение, позволяющее симулировать в браузере в отдельной вкладке открытие IE ( в Хроме можно настроить так, чтобы открывались разные версии IE ( 7, 8, 9))
Fireshot (Firefox) и Aviary Screen Capture (Google Chrome) – расширение, позволяющее делать скриншоты в браузере, как видимой части страницы, так и всей страницы.

Онлайн-сервисы.

validator.w3.org – проверка сайта на валидность , выявление недочётов при разработке
jigsaw.w3.org – проверка правильности CSS сайта
csslint.net – также проверка правильности CSS сайта
netrenderer.com – проверка сайта в разных разрешениях только для браузера IE разных версий, вводите адрес сайта, ставите размер отступа (в пикселях) от верхней границы сайта жмёте «проверить». Сервис показывает скриншот страницы, которую вы ввели. Скриншот делается практически мгновенно. Минус в том, что скриншот делается довольно криво – только видимой части страницы, бывает что скриншотят нижнюю часть страницы – футер, а нам надо как раз увидеть шапку сайта.
browsershots.org - проверка сайта в разных разрешениях только для множества браузеров разных версий, вводите адрес сайта, выбираете разрешение и жмете  «проверить». Сервис показывает скриншот страницы, которую вы ввели. Скриншоты делаются довольно долго, от 2 минут до часа.

Программное обеспечение для веб-дизайна

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

PHPdesiner - мощная программа для создания, редактирования, отладки, анализа и публикации веб-страниц и приложений на языке PHP. Есть бесплатная пробная версия и платная.

Adobe Photoshop - это самый мощный на сегодняшний день графический редактор. В основном работает с растровыми изображениями, однако имеет некоторые векторные инструменты. Есть бесплатная пробная версия и платная.

Gimp - абсолютно бесплатный графический редактор, аналог Adobe Photoshop, лишь ненамного уступает ему по функциональности.

 

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

Успехов вам!