Romych в 06:27, 8 травня 2020

2020-05-08T06:27:47Z

Нова сторінка

[[Новые требования к качеству сайтов]]

* [https://web-standards.ru/articles/six-things-i-check/ Помимо автоматизированного тестирования доступности: шесть вещей, которые я проверяю на каждом своём сайте] — Веб-стандарты

Требования к HTML коду сайтов, создаваемых в студии «Зина дизайн».

Инструменты проверки: Mozilla Firefox 3 с плагинами [[Web Developer]] и [http://users.skynet.be/mgueury/mozilla/index.html HTML Validator].

== 1. Кроссбраузерность ==

# Сайт одинаково, насколько это возможно, выглядит в браузерах, и страницы сайта выглядят так, как в утвержденном эскизе дизайна:
#* [ ] Internet Explorer 7
#* [ ] Internet Explorer 8
#* [ ] Mozilla Firefox 3
#* [ ] Opera 9
#* [ ] Apple Safari 3
#* [ ] Google Chrome 4

Одной строкой: Internet Explorer 7+, Mozilla Firefox 3+, Opera 9+, Apple Safari 3+, Google Chrome.

Об [[Internet Explorer 6]]

== 2. Корректный XHTML ==

# [ ] Проверка на http://validator.w3.org/ (Ctrl+Shift+A в плагине «Web Developer») не находит ни одной ошибки.

== 3. Доступность (accessibility) ==

# [ ] Кодировка страницы UTF-8 и явно указана в <head>: <pre><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></pre>
# [ ] Картинки имеют минимально возможный вес и максимально возможное качество.
# [ ] У всех картинок есть альтернативный текст (Графика → Показать вместо изображений атрибут Alt). Если изображение не является содержательным, значение атрибута пустое (alt="").
# [ ] Областям с фоновым изображением назначен соответствующий цвет фона (Графика → Скрыть фоновые изображения).
# [ ] Основной шрифт имеет относительный размер (задан в % или em, но не в px или pt).
# [ ] У основного текста или области контента задан <code>max-width</code>.
# [ ] Есть версия для печати:
#* Обязательно — путем подстановки CSS файла при посылке на принтер
#* Желательно — в виде отдельной ссылки «Версия для печати» возле заголовка страницы.

== 4. Семантика кода ==

Код XHTML логичный и красивый.

# При отключенных таблицах стилей (Ctrl+Shift+S в плагине «Web Developer») страница выглядит понятно:
#* [ ] заголовки (размечены h1-h4)
#* [ ] навигация (размечены списками)
# Иерархия заголовков (Инфо → Оглавление документа, Information → View Document Outline):
#* [ ] h1 только один на страницу
#* [ ] структура заголовков ниспадающая, последовательная, без пропусков.
# [ ] <title> осмысленно заполнен и совпадает с h1.
# [ ] Используются контекстонезависимые теги, например: <nowiki><strong></nowiki> вместо <nowiki><b></nowiki>, <nowiki><em></nowiki> вместо <nowiki><i></nowiki>, тэги <q>, <acronym> и т. п.
# [ ] Исходный код (Ctrl+U) не перегружен таблицами и дивами.
# [ ] Таблицы используются обоснованно:
#* Контуры → Контур таблиц → Таблицы
#* Инфо → Показать вложенные таблицы
# [ ] Обрабатывать текст Типографом http://www.typograf.ru/

== 5. Форматирование исходного кода ==

# [ ] Иерархия кода выделена отступами в виде 4 пробелов и пустыми строками.
# [ ] Все оформление вынесено в таблицы стилей в отдельные CSS файлы.
# [ ] Изображения лежат в папке <code>images</code>, CSS файлы в папке <code>css</code>.
# [ ] Используется <code>reset.css</code>: http://zina.local/css/zcss/reset.css
# [ ] Формат имён классов и картинок: '''причастиеПрилагательныеСуществительное''' на английском, без транслита. Слова выделяются заглавными буквами, первый символ всегда строчная буква. Пример: '''shortNews''', '''mainMenu'''.
# [ ] Имена привязаны к смыслу/значению, а не к оформлению. Пример:
#* Неправильно: '''leftColumnWithGrayBorderAtTop''' (привязано к оформлению)
#* Правильно: '''secondaryContent''' (привязно к смыслу блока)
# [ ] Иерархия блоков и элементов блока поддерживается иерархией селекторов. Нежелательно «клонирование имён», например для news: newsDate, newsHead, newsBody.
# [ ] Назначение тегу нескольких классов предпочтительнее «обёрток» и клонирования имён.
# [ ] Стили записаны в компактном виде: '''margin:10px 5px 0 5px;''' вместо '''margin-bottom:5px; margin-left:5px; margin-top:10px;'''
# [ ] Последнее свойство в описании класса завершается точкой с запятой.
# [ ] Порядок модификаторов для ссылок: '''l'''ink, '''v'''isited, '''h'''over, '''a'''ctive ('''l'''o'''v'''e-'''ha''').

== 6. Адреса разделов и страниц ==

# [ ] Все разделы и страницы имеют адреса URL:
#* [ ] английские
#* [ ] подходящие по смыслу
#* [ ] короткие
# [ ] Все страницы разделов имеют адреса, отображающие вложенность. Например, страница «Руководство», находящаяся в разделе «О компании», должна иметь примерно такой адрес: <code>/company/management</code>

== См. также ==

* [[Новые требования к сайтам]]
* [[Копирайты]]
* [[Internet Explorer 6]]
* http://promodev.ru/checklist/

[[Категория:CSS]]
[[Категория:Требования]]

Чеклист HTML - Історія редагувань

Romych в 06:27, 8 травня 2020