Советы

Тестирование

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

Пример 1
Посмотрите на код документа:

<HTML>
 <HEAD>
  <META http-equiv="Content-Type"
      content="text/html; charset=windows-1251">
  <TITLE>Тестирование<TITLE>
 </HEAD>
 <BODY>
  <P>Этот текст вы не увидите на экране.
 </BODY>
</HTML>

Браузеры IE, NN-6 покажут чистый экран. Браузер NN-4 выведет в левый верхний угол странную загогулину, а NN-3 запишет на экран текст вместе с тегами и совсем уж неожиданными прямоугольниками. Посмотрите.

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

Пример 2

<HTML>
 <HEAD>
  <META http-equiv="Content-Type"
      content="text/html; charset="windows-1251">
  <TITLE>Тестирование</TITLE>
 </HEAD>
 <BODY>
  <P>В NN-3 и NN-4 этот текст непрерывно мерцает.
 </BODY>
</HTML>

Браузеры IE, NN-6 “не замечают” ошибки. У браузеров NN-3 и NN-4 начинается нервный тик. Посмотрите.

Следующий пример связан с использованием пустой табличной клетки.

Пример 3
Кажется, что в этом коде все замечательно:

<HTML>
 <HEAD>
  <META http-equiv="Content-Type"
      content="text/html; charset=windows-1251">
  <TITLE>Тестирование</TITLE>
 </HEAD>
 <BODY>
  <TABLE border=1>
    <TR>
      <TD>1 клетка</TD>
      <TD> </TD>
      <TD>3 клетка</TD>
    </TR>
  </TABLE>
 </BODY>
</HTML>

Но браузеры, словно сговорились! Ни один из них не показывают клетку с пробелом. Посмотрите.

Приходится записывать так:

<HTML>
 <HEAD>
  <META http-equiv="Content-Type"
      content="text/html; charset=windows-1251">
  <TITLE>Тестирование</TITLE>
 </HEAD>
 <BODY>
  <TABLE border=1>
    <TR>
      <TD>1 клетка</TD>
      <TD>&nbsp;</TD>
      <TD>3 клетка</TD>
    </TR>
  </TABLE>
 </BODY>
</HTML>

Теперь все браузеры довольны.

Давайте попробуем “забыть” закрыть табличный тег.

Пример 4

<HTML>
 <HEAD>
  <META http-equiv="Content-Type"
      content="text/html; charset=windows-1251">
  <TITLE>Тестирование</TITLE>
 </HEAD>
 <BODY>
  <TABLE border=1>
    <TR>
      <TD>1 клетка</TD>
      <TD>&nbsp;</TD>
      <TD>3 клетка</TD>
    </TR>
 </BODY>
</HTML>

Браузеры IE и NN-6 показывает таблицу по-прежнему хорошо, а браузеры NN-3 и NN-4 не показывают ее вовсе. Посмотрите.

Поведение браузеров NN-3 и NN-4 мне представляется более правильным, но было бы еще лучше, если бы они выдавали подходящую случаю диагностику.

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

Как тестировать сайт

  1. Проверьте сайт, внимательно просматривая его своими измученными глазками.

  2. Проверьте грамматику, используя редактор со встроенной проверкой (например, Word).

  3. Перенесите сайт на другое место жесткого диска. Эта акция поможет отловить все абсолютно заданные ссылки — на новом месте они работать не будут. Рекомендация особенно полезна любителям визуального редактирования.

  4. Включите смотрелку, например, ACDSee в каталоге с картинками. Сравните реальные размеры картинок с теми, которые заданы в тегах IMG. Для быстрой проверки воспользуйтесь режимом поиска выражения “IMG” в текстовом редакторе. При работе на рабочем столе постоянно открыты три приложения: браузер, текстовый редактор, ACDSee.

  5. Для каждой страницы подсчитайте ее килобайтный вес. Суммируются: картинки, стилевые и скриптовые файлы, сам HTML-файл. Если в итоге получилось более 34 килобайт — попробуйте еще немного ужать графику и текстовые файлы (убрать лишние кавычки, окружающие значения атрибутов, комментарии). Комментарии в скриптах и стилевых таблицах остаются в вашей локальной копии, а на сервер поступает “рафинированный” продукт.

  6. Внимательно просмотрите все каталоги сайта и уберите из них все лишнее (черновики, картинки, которые не вошли в сайт, резервные файлы, архивы, случайные файлы).

  7. Загрузите сайт в IE и проверьте его работу в разных по размеру окошках. Всегда ли внешний вид сайта соответствует вашим ожиданиям? Убедитесь, что все иллюстрации показываются и информационные картинки имеют alt-надписи. Проверьте работу всех ссылок.

  8. Загрузите сайт в NN и проведите аналогичное тестирование в разных по размеру окнах.

  9. Поместите сайт на сервер и проведите тестирование в “полевых” условиях. Если регистровая дисциплина имен строго не выдержана, это сразу проявится в неработающих ссылках и отсутствии графики на страницах. Если вы не сами размещаете файлы на сервере, то пошлите ответственному лицу запаковку, которая не испортит имена файлов и каталогов. Рекомендуется пользоваться архиватором WinZip.

  10. Передайте сайт на тестирование специальной бригаде, которая не принимала участие в его создании. Тестирующая бригада должна внимательно проверить сайт, учитывая все пункты “критериев” (приводятся ниже). Все замечания тестирующая бригада должна записать в отдельный файл для предъявления разработчикам.

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

  12. Разработчики дорабатывают сайт, после чего цикл тестирования повторяется.

Критерии оценки сайта

Сайт оценивается по формуле:

B = B1 + B2 + B3 + B4

Здесь Bi — оценки (от 0 до 5 баллов) по следующим категориям:

B1 — дизайн
B2 — HTML-программирование
B3 — содержание
B4 — грамматика

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

Список погрешностей

Дизайн

Отсутствие заголовка сайта. 0.1
Фон, заданный картинкой, на котором текст не читается. 0.5
Фон, заданный картинкой, на котором “плитки” плохо стыкуются. 0.1
Цветовая палитра, утомляющая глаз. 0.5
Слишком большое число цветов. 0.1
Обилие декоративных элементов, не несущих функциональной нагрузки. 0.1
Отсутствие выравнивания. 0.5
Отсутствие единого стиля оформления страниц. 0.1
Отсутствие навигационных элементов или неудобная навигация. 0.1
Выделение стилем типичным для ссылок. 0.1
Многочисленные выделения одного и того же информационного элемента. 0.1
Слишком большие массивы выделений. 0.1
Отсутствие анти-алиасинга или анти-алиасинг, не соответствующий фону страницы. 0.1
Движущиеся и мерцающие надписи. 0.5
Агрессивная GIF-анимация. 0.5
Отсутствие alt-значений в информационных иллюстрациях. 0.1
Разрушение единого информационного элемента при изменении размера окна браузера (например, заголовка, навигационной панели, группы управляющих кнопок). 0.1
Горизонтальная протяжка в окне 640x480. 0.1
Более двух разных шрифтов (гарнитур). 0.1
Прижатость элементов друг к другу. 0.1
Сайт, издающий звуки. 0.5
Сайт, построенный на фреймах. 0.1
Страницы по загрузочному размеру большие 36k 0.5
Использование дефиса вместо тире, дюймов место кавычек, буквы N вместо номера. 0.1
Неработающая ссылка или картинка. 0.1
“Хвостатая” ссылка. 0.1
Другие погрешности. 0.1-1.0

HTML-программирование

Отсутствие тега TITLE. 0.5
Отсутствие одного из атрибутов bgcolor, text, link, alink, vlink в теге BODY. 0.5
Отсутствие лесенки на теговом каркасе. 0.5
Нарушение правил читаемости (должно быть: название тегов заглавными буквами, названия атрибутов и их значений — малыми). 0.5
Строки длиннее 80 символов. 0.5
Нарушение вложенности тегов, отсутствие обязательных закрывающих тегов, неверные названия тегов, атрибутов и их значений. 0.5
Лишние теги, фрагменты, которые можно исключить из программы без изменения внешнего вида документа и функционирования приложения. 0.5
Не указаны атрибуты width и height в теге IMG. 0.5
Не оптимизированная графика, неверные значения атрибутов width, height. 0.5
Отсутствие указаний alt="" во вспомогательной графике. 0.5
Программирование шрифта при помощи атрибута face тега FONT. 0.5
Другие ошибки. 0.1-1.0

Содержание

Работа полностью забраковывается, если содержит:

Содержание не соответствует теме сайта. 1.0
Отсутствует раздел “ссылки”. 1.0
Авторский материал без ссылок на автора. 1.0
Погрешности стиля. 0.5
Неудачная структура сайта. 0.5
Неудачный подбор материала. 0.5
Слишком длинные ссылки, многословные невыразительные разделы меню. 0.5
Другие ошибки. 0.1-1.0

Грамматика

Точки в коротких заголовках (а длинных заголовков быть не должно). 1.0
Неверное употребление пробелов со знаками препинания. 1.0
Отсутствие пробела после знаков препинания. 1.0
Другие грамматические ошибки. 1.0

Приведенные критерии носят, конечно, учебный характер (они использовались в роботландских конкурсах; оценки за “дизайн” и “HTML-программирование” шли с двойным весом). Однако, представляется разумным вооружить ими любых начинающих тестеров.


[содержание] [советы] [авторское право] [специальные символы]       Иван Сидоров kurs@robotland.pereslavl.ru