'

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

Понравилась презентация – покажи это...





Слайд 0

Тестирование вёрстки Рекомендации для разработчиков и QA по тестированию XHTML/CSS/JS прототипов Алексей Рыбаков Разработчик интерфейсов alex@flack.ru


Слайд 1

Содержание 1). Соответствие реализации дизайн-прототипам 2). Браузеры 3). Разрешение экрана 4). Доступность 4.1). Навигация по сайту с отключенной графикой 4.2). Навигация по сайту с отключенным javascript’ом или flash’ем 4.3). Размер шрифта 5). Формы 5.1). Работоспособность 5.2). Доступность 6). Соответствие стандартам 6.1). Автоматизация валидации 7). Идеальный баг-репорт


Слайд 2

Соответствие дизайну Цвета Шрифты Размеры и отступы элементов Поведение при изменении размеров окна браузера Поведение ссылок (hover, visited, etc.) Качество нарезки графики


Слайд 3

Браузеры Градация по уровням поддержки Первый уровень — полное соответствие макетам во всех сайтах уровня, полную доступность всей представленной информации. Также дефектами считаются js-ошибки (включая консоль). Приоритет — максимальный. Второй уровень — допускает пропуск несущественных ошибок в оформлении и акцентирован на полную доступность всей информации, представленной на сайте. Приоритет — средний.


Слайд 4

Браузеры Первый уровень: Internet Explorer 5.0 Internet Explorer 5.5 Internet Explorer 6.0 Internet Explorer 7.0 Opera 9 Firefox 2 Safari 2 Второй уровень: Opera 7.5, 8.5 Netscape 8 Mozilla 1.7.8 Konqueror 3.5


Слайд 5

Браузеры Старые версии браузеров можно найти по следующим адресам: http://releases.mozilla.org/pub/mozilla.org/firefox/releases/ (Firefox) http://releases.mozilla.org/pub/mozilla.org/mozilla/releases/ (Mozilla) http://arc.opera.com/pub/opera/win/ (Opera) http://browser.netscape.com/ns8/download/archive.jsp (Netscape) http://tredosoft.com/Multiple_IE (Internet Explorer) http://www.michelf.com/projects/multi-safari/ (Safari)


Слайд 6

Разрешение экрана Размеры и отступы элементов Поведение текста (неудачные переносы, etc.) Поведение графики (коллажи, etc.) Заданная минимальная ширина макета Приоритет — от среднего до максимального.


Слайд 7

Доступность Навигация по сайту с отключенной графикой Зарезервированное под изображения пространство Возможность навигации (графические меню) Наличие осмысленного альтернативного текста для изображений, несущих информацию Приоритет — от среднего до максимального.


Слайд 8

Доступность


Слайд 9

Доступность


Слайд 10

Доступность Навигация по сайту с отключенным javascript’ом или flash’ем Возможность работы с формами Возможность навигации (попапы, etc.) Доступность всей информации Сохранение целостности макета Приоритет — от среднего до максимального.


Слайд 11

Доступность Размер шрифта Минимальное представление текста в виде графики Целостность макета при увеличении размера шрифта: до «Largest» в Internet Explorer На два шага по «CTRL-+» в Firefox Приоритет — средний.


Слайд 12

Формы Работоспособность Валидация полей Возможность использования и отправки форм Приоритет — максимальный.


Слайд 13

Формы Доступность Работоспособность label’ов Работа с клавиатуры Приоритет — низкий.


Слайд 14

Автоматизация валидации Технические требования Apache Ant 1.6.5 или выше wget validate.xml validate.cmd папка /dtd


Слайд 15

Автоматизация валидации Запуск validate http://your.url.here


Слайд 16

Автоматизация валидации Результат Файл _errors.txt [xmlvalidate] C:\1\site\contact\index.html:38:84: Attribute "name" must be declared for element type "form". [xmlvalidate] C:\1\site\contact\index.html:66:50: Element type "select" must be followed by either attribute specifications, ">" or "/>". [xmlvalidate] C:\1\site\introduce\benefits.asp.html:25:86: Attribute "alt" is required and must be specified for element type "img". [xmlvalidate] C:\1\site\introduce\benefits.asp.html:26:295: Invalid byte 1 of 1-byte UTF-8 sequence. etc.


Слайд 17

Идеальный баг-репорт Структура Название репорта Контент-навигация. Некорректное поведение фонового изображения пункта списка при увеличении шрифта Тактико-технические характеристики Downloads page — Firefox 2.0.0.2 — 1280*1024 — Text size: 2x«Ctrl-+» Скриншот Приоритет Средний


×

HTML:





Ссылка: