Назначение
Приложение предназначено для проверки сайтов (гипертекстовых
приложений) и обучения на типичных ошибках. В ходе проверки
автоматически формируется отчет, содержащий замечания проверяющего,
детальные и общие оценки (см. раздел Система оценок сайта).
Как сохранить отчёт
Когда проверка закончена, нужно сохранить её со страницы Отчёт по
следующему алгоритму:
1.
2.
3.
4.
Выделите страницу (например, аккордом Ctrl+A).
Запомните страницу в буфере обмена (например, Ctrl+C).
Вставьте запомненную страницу в Блокнот (например, Ctrl+V).
Удалите все начальные строки, оставив первой строку с текстом: «Тип
отчёта…».
5. Сохраните отчёт из Блокнота на диск.
Наcтройки
Вы можете настроить приложение, заменив константы в файле option.js:
// Параметры, которые можно настраивать
// -----------------------------------var Rows = 4;
// Число строк в поле комментария
var Cols = 80;
// Число символов в строке комментария
var Marker = "| "; // Начало строки комментария
var CookieDay = 15; // Число дней хранения проверки
Таким образом, можно расширить поле ввода комментария к погрешности
до удобных размеров, изменить маркер начала строки комментария (или
отказаться от него), изменить срок хранения проверки на жёстком диске
компьютера (см. раздел Как сохранить незаконченную проверку)
Замечание. Внесение исправлений в файл option.js нужно выполнять перед
запуском приложения.
Рекомендации по коллективной проверке
Сценарий 1
На рабочем месте руководителя открыт АРМ «Проверка сайта» и
проверяемая работа. Все члены команды (студенты) проверяют одну и ту
же работу на своих рабочих местах и сообщают руководителю о найденных
погрешностях. Ошибки коллективно обсуждаются и заносятся в АРМ,
открытый на рабочем месте руководителя.
Когда проверка одной работы закончена, коллектив приступает к проверке
следующей работы.
Замечание 1. Полезно держать открытые АРМы и на рабочих местах студентов.
Студенты используют АРМ как справочник по ошибкам. Они отмечают у себя
найденные ошибки, но могут не записывать комментарии (для ускорения
проверки). Комментарии записываются только на АРМе руководителя: в нем
формируется общий отчетный файл.
Замечание 2. Рекомендуется проверку каждой работы выполнять поэтапно:
привлекательность
дизайн
кодирование
содержание
грамматика
То есть сначала коллективно оценивается привлекательность, затем проверяется
дизайн, потом кодирование и так далее. Проверили одну работу, отдохнули,
проверили следующую.
Сценарий 2
Одна, две работы проверяются по сценарию 1 (обучение проверке), затем
команда разбивается на группы и в каждой группе руководитель назначает
старшего. Проверяемые работы распределяются по группам. Внутри
группы работа идет по сценарию 1, роль руководителя играет старший в
группе.
Сценарий 3
Одна, две работы проверяются по сценарию 1 (обучение проверке), затем
учащиеся (студенты) дома в удобное для них время самостоятельно
проверяют назначенные им работы и возвращают отчёты руководителю не
позднее следующего занятия. Зафиксированные каждым проверяющим
ошибки коллективно обсуждаются и заносятся руководителем в общий
АРМ.
Порядок работы с АРМ
1. Выставляется оценка за «привлекательность» и записывается
комментарий, в котором обязательно указываются положительные
стороны проверяемой работы.
2. Работа проверяется по всем остальным категориям (дизайн,
кодирование, содержание, грамматика). Прочитав в АРМе очередной
пункт с описанием ошибки, проводится проверка работы на предмет
обнаружения в ней этой ошибки. Обнаруженная ошибка отмечается
галочкой. Выбирается штраф (если он варьируется) и обязательно
записывается комментарий по правилу УДП.
Правило УДП
1. Указать адрес или адреса ошибок
2. Доказать, что это ошибка
3. Показать или подсказать правильное решение
3. На странице Отчёт, ввод данных по Enter или по экранной
кнопке Плюс, вводятся:
o название проверяемой работы (название сайта);
o четыре цифры номера проверяемой работы;
o две последние цифры номера проверяющей команды.
4. Страница с отчетом через буфер обмена ОС копируется в файл с
именем nn_mmmm.txt*.
—————————————————
* В имени файла: nn — номер проверяющей (своей) команды, mmmm — номер
проверяемой работы.
Как сохранить незаконченную проверку
Текущую проверку можно сохранить, а впоследствии автоматически
восстановить данные на всех страницах АРМ для продолжения работы.
Сохранение
Сохранение проверки выполняется по кнопке
на странице Отчет.
Восстановление
Восстановление проверки выполняется по кнопке
Пояснения и рекомендации
на странице Отчет.
Задавать имя файла и указывать папку хранения нельзя.
Проверка сохраняется в специальной папке операционной системы,
которая содержит набор cookie-файлов. Эти файлы предназначены для
хранения настроечных данных, паролей и другой информации, которую
сайты записывают на компьютер пользователя в безопасном режиме.
Именно безопасностью продиктованы все ограничения, связанные с этим
способом хранения данных, как и невозможность записывать на компьютер
пользователя файлы в обычном режиме (представьте, что сайтзлоумышленник записывает на диск команду, которая при следующем
запуске компьютера форматирует жёсткий диск).
Ниже приводится список дополнительных ограничений, связанных с
механизмом сохранения cookie-данных.
Сохранить можно только одну проверку. При записи второй проверки,
первая удаляется.
Восстановить проверку можно не позже срока истечения хранения
данных, указанных в настроечном файле option.js (см. Настройки).
Восстановить проверку можно только при запуске АРМ из той же
самой папки, из которой он был запущен в сеансе сохранения
проверки.
Сохранить можно только такую проверку, в которой каждый
подраздел на страницах содержит комментариев общим объёмом не
более 3 000 знаков (примерно).
Учитывая все эти ограничения, рекомендуется выполнять проверку сайта в
одном сеансе работы.
Если это невозможно, перед автоматическим сохранением проверки
запишите данные со страницы Отчет в обычный текстовый файл через
буфер обмена ОС. Если cookie-автоматика подведёт, можно будет
восстановить данные из обычного файла (копируя их по очереди в АРМ
через буфер обмена).
Система оценок сайта
На странице Отчет итоговые оценки формируются параллельно по двум
нормативным системам: балльной и процентной.
Балльная система
Сайт оценивается по формуле:
B = B0 + n*(B1 + B2) + B3 + B4
Множитель n равен «2» на конкурсе первого семестра, и равен «1» на
конкурсе второго семестра курса 42.
Числа Bi — это оценки (от 0 до 5 баллов) по следующим категориям:
— привлекательность
B1 — дизайн
B2 — кодирование
B3 — содержание
B4 — грамматика
B0
Оценка B0 за привлекательность выставляется проверяющим на
одноимённой странице по следующему ориентировочному критерию:
Оценка 5 — работа производит отличное впечатление.
Оценка 4 — хорошая работа.
Оценка 3 — средняя работа.
Оценка 2 — слабая работа.
Оценка 1 — очень слабая работа.
Оценки B1-B4 формируются приложением автоматически: из максимального
балла 5 вычитаются штрафные очки, указанные проверяющим на
соответствующих страницах. Отрицательная оценка «округляется» до нуля.
На странице Отчет оценки Bi записываются в виде:
привлекательность (оценка: B )
дизайн (оценка: n*B )
кодирование (оценка: n*B )
содержание (оценка: B )
грамматика (оценка: B )
0
1
2
3
4
Итоговый набор балльных оценок записывается на странице Отчет в виде
«Строка оценок для куратора». Пример такой строки показан ниже:
1201 3.2 4.4 3.8 4.0 2.8 15 =18.2
Эта строка означает, что команда 15 оценила работу 1201 на 18.2 балла.
Число 3.2 соответствует оценке за привлекательность B5.
Числа 4.4 3.8 4.0 2.8 соответствуют оценкам n*B1, n*B2, B3, B4.
Процентная система
Оценка за работу записывается на странице Отчет в виде:
Балл: 52.8
Максимальный балл: 67.8
Сумма штрафов: 15.0
Процент: 77.88%
Эта запись означает, что из возможных 67.8 штрафных баллов
проверяющий снял 15 баллов. Таким образом, работа оценивается числом
77.88 по 100 балльной системе (проверенная работа оказалась на 22.12%
хуже «идеальной» работы, не имеющей ни одной погрешности).
Обоснование системы штрафов
Штрафные баллы, которыми АРМ предлагает оценивать каждую
конкретную погрешность, являются отражением субъективного авторского
мнения, в основе которого лежит опыт роботландских турниров и желание
уравновесить баллы по каждой категории проверки.
Скажем, в категории Дизайн список возможных погрешностей существенно
превышает аналогичный список в категории Грамматика. Именно поэтому
штрафные баллы за неверную грамматику крупнее штрафных баллов за
ошибки дизайна.
В принципе, вы можете легко изменить величины этих штрафов в
файле data422.js.
Например, если заменить строку:
new item("Страницы не имеют геометрического каркаса",
0.5, "./design/hgm01.htm"),
на строку:
new item("Страницы не имеют геометрического каркаса",
0.2, "./design/hgm01.htm"),
то максимальный штраф за погрешность «Страницы не имеют
геометрического каркаса» будет снижен со значения 0.5 до величины 0.2.
При обучении на курсе 42 Роботландского университета такие
изменения делать запрещается.
Отсутствие единого стиля оформления страниц
На разных страницах используются разные дизайнерские приемы для
показа содержимого.
Что писать в замечаниях
Адрес и описание ошибки.
Советы по исправлению.
Примеры
Разный вид заголовочной части страниц (логотип, название сайта,
заголовок страницы).
Разные виды навигационных элементов и их расположения на страницах.
Отсутствие логотипа
Что писать в замечаниях
Адрес и описание ошибки.
Советы по исправлению.
Описание погрешности
Логотип — своего рода пиктограмма сайта.
Логотип, как правило, выполняют в графическом виде и размещают в левом
верхнем углу каждой страницы сайта. Получается, что логотипом, как
печатью, штампуют все страницы.
Пиктограмма — небольшое легко узнаваемое изображение, служащее для
идентификации файла, программы, сайта и т. п. Картинка изображения должна
быть простой, состоящей из трёх-пяти элементов, формирующих единый образ.
В качестве картинки можно использовать текст (название сайта) оформленный
нестандартным образом.
На всех страницах, кроме Главной, логотип должен быть ссылкой
на Главную (общепринятое интерфейсное правило).
Так как логотип является пиктограммой, то к его изображению применимы
правила, принятые для пиктограмм:
Изображение должно быть связано с содержимым сайта.
Условное, запоминающееся изображение.
Минимум деталей.
Небольшой размер.
Логотип — это пиктограмма сайта по смыслу слова и по интерфейсной
нагрузке этого навигационно-идентифицирующего средства. Нехорошо в
качестве логотипа помещать миниатюру с фотографией школы.
Обязательным правилом должно быть снабжение логотипа и заголовка
сайта (если он выполнен в графике) соответствующими alt-надписями
(и title-надписями). Тогда их увидят те, кто выключил графику, услышат
те, кто пользуется голосовыми браузерами, почувствуют те, кто пользуется
мониторами Брайля, а также сетевые роботы. Вообще, любой текст,
«замурованный» в графику, должен иметь alt-надпись, буквально его
повторяющую.
На вторых страницах в качестве alt-надписи на логотипе может быть текст
«На Главную». На Главной странице — «Логотип сайта „Название“».
Логотип и заголовок сайта должны поддерживать друг друга или даже
быть одной картинкой. Но последнее является исключением, а не общим
правилом.
Обоснование
Посмотрим в левый верхний угол окна текстового редактора и других
приложений. Мы видим логотип продукта!
Логотип в левом верхнем углу приложения Блокнот
Вот откуда, вероятно, логотипы появились на сайтах, вот чем определилось
их место. Это такое место, которое видно при любом размере окна.
Кроме того, логотип стал на сайтах общепринятым навигационным
средством — переходом на Главную страницу.
Многих людей раздражают сайты, в которых верхний левый угол не
чувствителен к мышиному щелчку (на вторых страницах). Нельзя лишать
пользователя привычного интерфейсного действия.
Большинство хороших сайтов в Интернете имеют логотип.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Отсутствие названия сайта
Что писать в замечаниях
Указание на ошибку.
Советы по исправлению.
Описание погрешности
Название сайта, как и логотип, является инвариантным (постоянным)
элементом каждой страницы сайта.
Название сайта размещают в самом верху каждой страницы справа от
логотипа.
Логотип и название сайта на каждой странице однозначно говорят
пользователю о его положении во всемирной сети. Листая страницы,
пользователь цепляется за название и логотип как за дорожный знак,
указывающий на зону одного интернетовского узла.
Постоянные элементы страницы (к которым, кроме названия сайта и
логотипа, относится ещё и главное меню) должны крепко держать своё
место на экране и не смещаться при листании страниц.
Заголовок сайта может быть выполнен в графическом виде. В этом
случае alt-надпись должна в точности повторять текст заголовка.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Отсутствие заголовка страницы
Что писать в замечаниях
Адрес и описание ошибки.
Советы по исправлению ошибки.
Описание погрешности
Заголовок страницы должен располагаться ниже заголовка сайта или ниже
горизонтального меню, если оно имеется под заголовком сайта.
Заголовок страницы отвечает на вопрос посетителя: «Где я?»
Если заголовок страницы выполнен в графическом виде, то altнадпись должна в точности повторять текст заголовка.
Заголовок окна должен повторять заголовок страницы.
Заголовок страницы соответствует элементу H1. Других элементов H1 в коде
страницы быть не должно — подзаголовки должны оформляться
элементами Hn с n больше единицы в соответствие с иерархией содержания
страницы.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Название окна не совпадает с заголовком страницы
Что писать в замечаниях
Адрес ошибки.
Советы по исправлению.
Описание погрешности
Заголовок окна должен повторять заголовок страницы.
Это очень удобно, когда окна с сайтами свёрнуты в кнопки
на Панели задач или отображаются в браузере корешками вкладок среди
других загруженных страниц. На этих кнопках, вкладках пользователь
видит заголовки страниц и может выбрать ту которая ему интересна
(нужна).
Вкладки браузера
Заголовок окна заносится в папку Избранных cайтов, если пользователь
решит запомнить ссылку на текущую страницу.
Заголовок окна — дополнительная подсказка пользователю о его текущем
положении на сайте.
Иногда в состав заголовка окна включают и название сайта. В таком случае
название страницы рекомендуется записывать первым, чтобы
пользователь увидел его даже в очень узких окнах и смог прочитать, если
веб-страница свёрнута в кнопку на Панели задач или прячется среди
вкладок других страниц.
Примеры
О гимназии
(заголовок страницы О гимназии)
О гимназии < Гимназия 29
(заголовок страницы О гимназии)
Базовое < Образование < Гимназия 29
(заголовок страницы Базовое)
Углубленное < Образование < Гимназия 29
(заголовок страницы Углубленное)
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Наложение многочисленных выделений на
один информационный элемент
Что писать в замечаниях
Адрес и описание ошибки.
Советы по исправлению ошибки.
Описание погрешности
Для выделения используют:
шрифт;
размер шрифта;
цвет (не рекомендуется);
курсив;
жирность.
Но не всё сразу! Очень важно не «пережать» выделение, иначе оно будет
«бить» по глазам читателя.
Это пример
ужасного выделения.
НЕ СЛЕДУЕТ ВЫДЕЛЯТЬ ТЕКСТ ПРОПИСНЫМИ БУКВАМИ. ЧТЕНИЕ ТАКОГО
ФРАГМЕНТА ВЕСЬМА ЗАТРУДНИТЕЛЬНО.
Выделять цветом и (или) подчеркиванием не рекомендуется. Ведь так
традиционно выделяются ссылки.
Это выделение очень похоже на ссылку.
А это практически неотличимо от ссылки.
Не надо дополнительно выделять гиперссылки.
В них уже два выделения (цвет, подчеркивание). Накладывать третье
(размер), четвертое (жирность), пятое (курсив) совсем ни к чему.
Никогда не используйте для выделений обычного текста теги Hn. Эти теги
предназначены для выделения только заголовков.
Ещё несколько примеров плохих выделений:
Программа, которая позволяет смотреть
гипертекстовые документы,
называется БРАУЗЕРОМ.
Курсив, жирность,
заглавные буквы.
Программа, которая позволяет смотреть
гипертекстовые документы,
называется браузером.
Шрифт, размер, цвет.
Программа, которая позволяет смотреть
гипертекстовые документы,
называется б р а у з е р о м.
Разрядка, подчёркивание и
цвет (похожие на
гиперссылку).
Как выделять правильно
Самое лучшее выделение — курсив. Оно мягкое, не утомляет глаза:
Программа, которая позволяет смотреть гипертекстовые документы,
называется браузером.
Если курсивное начертание кажется слишком слабым, используют
повышенную жирность:
Программа, которая позволяет смотреть гипертекстовые документы,
называется браузером.
Особый случай — заголовки. Обычно их выделяют жирностью и
повышенным кеглем. Иногда дополнительно рубленым шрифтом.
Размер заголовка играет важную роль — он задает иерархическую
структуру текста и кодируется при помощи тега Hn:
Заголовок H1
Заголовок H2
Заголовок H3
Заголовок H4
Заголовок H5
Заголовок H6
Дополнительные правила
При выделении текстовых фрагментов пользуйтесь следующими
правилами:
кавычки должны быть того же начертания и цвета, что и
заключенный в них текст;
скобки, заключающие выделенный фрагмент, должны иметь
начертание и цвет основного текста;
знаки препинания, следующие за выделенным фрагментом, должны
иметь начертание и цвет основного текста.
Единообразие выделений
Решите, что именно вы будете выделять в вашем гипертекстовом
приложении (на сайте).
Если вы решили выделять новые термины курсивом, так и делайте до
конца приложения. Не переходите время от времени на жирность или цвет.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Слишком большой массив выделения
Что писать в замечаниях
Адрес и описание ошибки.
Советы по исправлению ошибки.
Описание погрешности
Каждое написанное слово кажется важным. Поэтому выделить хочется всё.
Но когда выделений слишком много, получается обратный эффект:
внимание привлекает невыделенное место:
В этом тексте выделены все слова, кроме слова липучка. Но именно это
слово и привлекает внимание!
Рекомендации по выделениям
Среди всех способов выделений самое употребительное — курсив:
В этом тексте курсивом выделено слово мягкость. Курсивное выделение,
действительно, не нагружает чрезмерно глаза пользователя.
Выделение жирностью используют для установки сильных акцентов.
«Жирное» слово пользователь прочитает сразу, перед чтением всего текста,
так оно бросается в глаза:
В этом тексте жирностью выделено слово магнит. Это слово притягивает
внимание пользователя.
Ко всем остальным способам выделения нужно относиться с большой
осторожностью: легко пустить петуха. Особенно, когда один фрагмент
выделяется несколькими способами сразу.
Особый случай — заголовки. Часто их выделяют жирностью, повышенным
кеглем и дополнительно рубленым шрифтом.
Размер заголовка играет важную роль — он задает иерархическую
структуру текста и кодируется при помощи тега Hn:
Заголовок H1
Заголовок H2
Заголовок H3
Заголовок H4
Заголовок H5
Заголовок H6
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Слишком большой массив выделения
Что писать в замечаниях
Адрес и описание ошибки.
Советы по исправлению ошибки.
Описание погрешности
Каждое написанное слово кажется важным. Поэтому выделить хочется всё.
Но когда выделений слишком много, получается обратный эффект:
внимание привлекает невыделенное место:
В этом тексте выделены все слова, кроме слова липучка. Но именно это
слово и привлекает внимание!
Рекомендации по выделениям
Среди всех способов выделений самое употребительное — курсив:
В этом тексте курсивом выделено слово мягкость. Курсивное выделение,
действительно, не нагружает чрезмерно глаза пользователя.
Выделение жирностью используют для установки сильных акцентов.
«Жирное» слово пользователь прочитает сразу, перед чтением всего текста,
так оно бросается в глаза:
В этом тексте жирностью выделено слово магнит. Это слово притягивает
внимание пользователя.
Ко всем остальным способам выделения нужно относиться с большой
осторожностью: легко пустить петуха. Особенно, когда один фрагмент
выделяется несколькими способами сразу.
Особый случай — заголовки. Часто их выделяют жирностью, повышенным
кеглем и дополнительно рубленым шрифтом.
Размер заголовка играет важную роль — он задает иерархическую
структуру текста и кодируется при помощи тега Hn:
Заголовок H1
Заголовок H2
Заголовок H3
Заголовок H4
Заголовок H5
Заголовок H6
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Выделение стилем, типичным для ссылок
Что писать в замечаниях
Погрешность отмечается, если текстовый фрагмент выделен стилем,
выбранным на сайте для ссылок: совпадение цвета и (или) подчёркивание.
Укажите:
Адрес ошибки.
Советы по исправлению.
Описание погрешности
Выделять синим цветом и (или) подчеркиванием категорически не
рекомендуется. Ведь так традиционно выделяются ссылки.
Это выделение очень похоже на ссылку.
И это выделение похоже на ссылку.
А это практически не отличимо от ссылки.
Следует отметить, что в современном дизайне ссылки часто выделяют
цветом, а подчеркивание появляется на время зависания над ссылкой
курсора. Поэтому любое цветовое выделение будет похоже на ссылку.
Это выделение тоже похоже на ссылку.
Вывод: на сайтах следует избегать цветовых выделений.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Более двух разных шрифтов (гарнитур)
Что писать в замечаниях
Адрес и описание ошибки.
Советы по исправлению ошибки.
Исключения
Исключением является запись программных кодов. Их принято выводить
моноширинным шрифтом, таким как Courier. В этом случае
моноширинный шрифт может быть третьим шрифтом на странице.
Описание погрешности
Нормально, когда на странице всего один шрифт. При этом лучше не
задавать шрифт специально, а положиться на умолчание браузера. Как
правило, браузер будет выводить текст пропорциональным серифным (с
засечками) шрифтом Times New Roman.
Для заголовков можно использовать рубленый (без засечек) шрифт, такой
как Arial.
Следует отметить, что не все шрифты хорошо сочетаются друг с другом.
Шрифты Times и Arial отлично сочетаются. Именно поэтому они были
выбраны в качестве основных шрифтов Windows.
Дизайнеры на экране (и в книгах) стараются не использовать более
2 шрифтов.
Исключением является только запись на экран (страницу книги)
программных кодов. Их принято выводить моноширинным шрифтом,
таким как Courier (третий шрифт стандартного шрифтового
набора Windows).
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Очень большие абзацы
Что писать в замечаниях
Адрес и описание ошибки.
Советы по исправлению ошибки.
Описание погрешности
Длинные абзацы всегда читать сложно, особенно, если это не
художественное, а техническое изложение.
Читать с экрана труднее, чем со страниц бумажной книги. Поэтому
экранные абзацы должны быть очень короткими.
Не рекомендуется записывать абзацы длиннее 4-5 строк в расчёте на 80символьные строки. Ниже представлен абзац именно такой длины
(Г. Х. Андерсен, «Дюймовочка»).
А старая жаба сидела внизу, в тине, и убирала свое жилище тростником и
желтыми кувшинками — надо же было приукрасить все для молодой
невестки! Потом она поплыла со своим безобразным сынком к листу, где
сидела Дюймовочка, чтобы взять прежде всего её хорошенькую кроватку и
поставить в спальне невесты.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Отсутствие навигационных элементов или неудобная
навигация
Что писать в замечаниях
Название страницы (или имя файла) с ошибкой.
Описание ошибки.
Советы по исправлению ошибки.
Описание погрешности
Отсутствие навигационных элементов
Навигация на странице отсутствует, если на ней нет никаких элементов,
позволяющих перейти на другие страницы того же сайта. При этом
навигационные кнопки браузера Вперед/Назад, внутристраничные
ссылки и ссылки на другие сайты (внешние ссылки) в расчёт не берутся.
Погрешность отмечается, если на сайте существует хотя бы одна такая
страница.
Неудобная навигация
Навигация является удобной, если на любой странице сайта можно легко
ответить на три вопроса.
Где я? Пользователь однозначно понимает, где внутри сайта он
находится.
Куда я могу пойти? С каждой страницы есть возможность попасть на
любую другую, минуя Главную.
Где меню? Пользователю не приходится прокручивать страницу для
доступа к навигационным элементам.
Где я
На этот вопрос помогают ответить следующие элементы сайта.
Логотип и название — они называют сайт.
Заголовок страницы, заголовок окна и позиция меню, которая не
является ссылкой — отмечают страницу сайта.
Пример
начало образование история традиции ссылки
Пользователь на странице история.
Путь от Главной к текущей странице в иерархическом дереве сайта,
если сайт имеет более 2 уровней (принимая за первый уровень
страницу Главная). Приём называется «хлебные крошки».
Пример
начало [образование] история традиции ссылки
начало
образование
базовое
Пользователь на странице базовое. Эта страница является потомком
страницы образование.
Куда я могу пойти
Пример
начало [образование] история традиции ссылки
базовое дополнительное домашнее
начало
образование
дополнительное
Пользователь на странице дополнительное. Можно пойти к
братьям базовое и домашнее. Можно вернуться к предку образование или
к любым его братьям.
Где меню
Пользователь не должен испытывать проблем с доступом к навигационным
элементам.
Меню обязано быть в начале страницы, чтобы пользователю было удобно
пролистывать сайт.
Меню полезно и в конце страницы. Пользователь может продолжить путь,
не прокручивая страницу в начало. Если в шаблоне дублирование меню в
конце страницы не предусмотрено, то вместо него обязательно должна
быть ссылка вверх, для перемещения к началу страницы без прокрутки.
Если страница длинная, то ссылка вверх полезна после каждого раздела.
Как можно кодировать ссылку вверх
Ссылку вверх можно задать так:
<A href="#" >вверх</A>
Или при помощи явного перехода на тег, помеченный идентификатором:
<BODY id="top">
...
<A href="#top" >вверх</A>
Эти способы добавляют заданные переходы в историю переходов браузера,
и по кнопке НАЗАД браузер будет возвращать пользователя к
ссылке вверх, а не на предыдущую страницу, что особенно неприятно,
когда переходов вверх было выполнено несколько.
Чтобы браузер по кнопке НАЗАД перемещал пользователя на предыдущую
страницу, можно кодировать ссылку вверх при помощи такого простого
скрипта:
<A href="javascript:void(0)"
onclick="window.scroll(0,0)">вверх</A>
Ссылка, расположенная ниже, закодирована именно так:
вверх
Дополнительное замечание
Особая рекомендация относится к записи пунктов меню.
Совершенно необходимо, чтобы меню на разных страницах
имело одинаковые пункты, записанные в одном и том же порядке.
Единственное отличие — разные пункты, не являющиеся ссылками (они
относятся к текущим страницам).
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Работает ссылка на текущую страницу
Что писать в замечаниях
Название страницы (или имя файла) с ошибкой.
Описание ошибки.
Советы по исправлению ошибки.
Описание погрешности
Зачем нужна ссылка, ведущая в то же самое место?
Такая ссылка здорово путает пользователя. Он перестаёт понимать, где
находится, когда щелкает по ней и видит начало страницы, на которой он
вроде бы только что был.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Логотип не является ссылкой на Главную на вторых
страницах
Что писать в замечаниях
Название страницы (или имя файла) с ошибкой.
Советы по исправлению ошибки.
Описание погрешности
Логотип должен быть ссылкой на Главную на всех страницах,
кроме Главной.
Это общепринятое интерфейсное правило.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
На страницах отсутствует информация об авторах с
электронным почтовым адресом
Что писать в замечаниях
Название страницы (или имя файла) с ошибкой.
Описание ошибки.
Советы по исправлению ошибки.
Описание погрешности
Такую информацию нужно размещать на каждой странице сайта, а не
только на специальной, авторской.
Пользователь должен иметь возможность получить имя автора и связаться
с ним на любой странице, не занимаясь для этого поиском специальных
страниц.
Электронный почтовый адрес должен ссылкой (чтобы открыть почтовый
клиент) и может быть прописан в явном виде (чтобы пользователь мог
скопировать адрес через буфер обмена ОС).
Пример
© 2020 А. Дуванов kurs@robotland.pereslavl.ru
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Проблемный стиль записи адреса электропочты и (или)
внешней ссылки
Что писать в замечаниях
Название страницы (или имя файла) ошибкой.
Описание ошибки.
Советы по исправлению ошибки.
Описание погрешности
Удобно, когда внешние ссылки и почтовые адреса прописаны в явном
виде — пользователь может копировать их через буфер обмена ОС.
Кроме того, явно записанные внешние ссылки будут отличаться от ссылок
внутри сайта (внутренних ссылок), что помогает ориентированию
пользователя.
Ниже приводятся примеры (внешние ссылки заглушены).
Пример 1
Роботландия
www.robotlandia.ru
Сайт предприятия «Роботландия». Традиционно поставляет для школы:
o
o
Программно-методические продукты
Дистанционное обучение
Российский общеобразовательный портал
www.school.edu.ru
Образовательные ресурсы для учеников, учителей, родителей, администраторов. Учебные,
научно-популярные, познавательные и другие материалы по основным школьным
дисциплинам. Вопросы здоровья и психологии школьников.
Пример 2
© 2005 А. Дуванов kurs@robotland.pereslavl.ru
Длинные ссылки
Ссылки на сетевые ресурсы могут быть очень длинными и совершенно не
читаемыми. Размещение таких ссылок на сайте в явном виде способно
испортить дизайн страницы, поэтому не рекомендуется.
Если принято решение, не записывать внешние ссылки явным образом, всё
равно необходимо принять меры, позволяющие визуально отличить
внешнюю ссылку от внутренней. Можно, например, снабжать каждую
внешнюю ссылку специальной пиктограммой (как в расположенном ниже
примере).
Роботландия
Сайт предприятия «Роботландия». Традиционно поставляет для школы:
Программно-методические продукты
Дистанционное обучение
Класс off для внешней ссылки здесь задан так:
/* Оформление внешней ссылки */
A.off
{
background: url(pic/off.gif) no-repeat center right;
padding-right: 11px;
margin-right: 2px;
}
Картинка off.gif выводися как фон ссылки (url(pic/off.gif)) без повторения
(no-repeat) по центру справа (center right).
Распространён ещё один способ записи длинных ссылок.
В качестве значения атрибута href указывается реальный адрес статьи, а в
видимой на странице ссылке адрес главной страницы сайта.
Пример
Что видно на странице
Статью «Роботландский университет» можно прочитать на сайте robotlandia.ru
Как закодировано
Статью &ldquo;Роботландский университет&rdquo;
можно прочитать на сайте
<A
href="http://robotlandia.ru/длинная_ссылка.htm">robotlandia.ru</A
>
Можно скопировать адрес главной страницы сайта и поиском найти статью
по её названию.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Неработающие ссылки
Величина штрафа
Минимальный штраф 0.1 назначается, когда в коде HTML всех файлов сайта
имеется одна неработающая ссылка.
Максимальный штраф 0.5 назначается, когда в коде HTML всех файлов
сайта не менее 5 неработающих ссылок.
Штраф из диапазона 0.2–0.4 назначается по усмотрению проверяющих для
промежуточных ситуаций по отношению к двум крайним, описанным
выше.
Исключения
Одна и та же ошибка в блоке кода, повторяющемся в разных файлах,
считается одной ошибкой в шаблоне.
Неработающая, из-за несоблюдения регистра в имени папки и (или) файла,
не считается ошибкой, если она уже учтена в пункте:
Кодирование > Ошибки > Ошибка регистра в именах папок и файлов
Что писать в замечаниях
Название страницы (или имя файла) ошибкой.
Неработающая ссылка.
Рекомендации по исправлению ошибки.
Пояснения
Понятно, что все ссылки на сайте, внешние (в том числе почтовые адреса) и
внутренние должны работать.
С внешними ссылками, конечно, проблем гораздо больше. Интернет очень
подвижен, каждый день в нём появляются новые сайты, а старые исчезают.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Макет страниц не имеет геометрического каркаса
Величина штрафа
Погрешность штрафуется числом из диапазона 0.1–0.5 в зависимости от
степени визуальной анархии на экране.
Что писать в замечаниях
Адрес и описание ошибки.
Рекомендации по исправлению.
Пояснение
Наиболее «тяжелая» ошибка, свойственная многим работам начинающих
дизайнеров, — отсутствие геометрической концепции на страницах сайта.
Страница заполняется информационными «пятнами», которые не
связываются в одно целое.
На иллюстрации, представленной ниже, показана начальная страница
сайта, поступившего на конкурс Роботландского университета. Девчата
прислали очень интересную работу и по содержанию, и по структуре.
Написали интересные тексты, но не сумели организовать визуальный образ
на странице.
Отсутствие геометрического «каркаса»
Главная причина неудачи: отсутствие геометрического «каркаса».
На странице могут присутствовать все необходимые элементы, все они
могут быть выполнены неплохо, но если нет геометрической основы, образ
страницы разваливается на части.
Каркас страницы сооружают при помощи явно нарисованных или неявно
присутствующих вертикалей, горизонталей, прямоугольников,
треугольников, эллипсов и других геометрических фигур.
Конечно, научить правильным композиционным решениям совсем не
просто. Но можно дать простую рекомендацию.
Нарисуйте страницу сначала на обычном листе бумаге, используя
карандаш, линейку, циркуль. Рисуйте просто геометрию: линии,
прямоугольники, дуги… Не забывайте про симметрию и баланс.
Когда получится задуманный геометрический образ, начните помещать в
него информационные элементы-модули. Каждому модулю в правилах CSS
назначьте временный фон яркого цвета и настраивайте свойства так, чтобы
их форма, размер и положение поддерживали задуманную композицию.
Когда элементы займут свои места, подумайте над цветовым решением,
текстурой и информационным содержанием.
Посмотрите, прищурив глаза, на страницу как на целое. Если все блоки
модулей укладываются в задуманную геометрическую фигуру, значит, всё
хорошо.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Отсутствие выравнивания или неудачное выравнивание
визуальных блоков страницы
Величина штрафа
Погрешность штрафуется числом из диапазона 0.1–0.5 в зависимости от
числа нарушений: 0.1 за нарушения выравнивание одного типа.
Например, красные строки в абзацах (0.1), центрированные списки
(0.1), центрированные позиции вертикального меню (0.1), разнобой
выравнивания заголовков таблиц (0.1), разнобой выравнивания картинок
(0.1). Итого: 0.5.
Что писать в замечаниях
Адрес и описание ошибки.
Рекомендации по исправлению.
Пояснение
Выравнивание — один их китов качественного дизайна!
Абстрактная прямая лежит в основе многих визуальных построений. Если
прямую, соединяющую разные элементы на странице, провести не удается,
то, за редкими исключениями, такой дизайн воспринимается как явная
ошибка.
В конкурсных работах особенно выделяются нарушения выравнивания
в центрированных списках. Неприятные ощущения от таких конструкций в
несколько раз усиливаются присутствием списочных маркеров. Эти
маркеры словно точки на одной прямой хочется расположить в красивый
вертикальный столбик.
Посмотрите на такой список:
o
o
o
o
волк
жираф великолепный
тигр ученый
лось сохатый
А теперь на такой:
волк
жираф великолепный
o тигр ученый
o лось сохатый
o
o
Последний список получен центрированием. Разница заметна, правда?
(Даже в браузерах Microsoft, в которых маркеры списка не центрируются.)
В современном дизайне отдается большее предпочтение заголовкам,
которые не центрированы, а выровнены по краю (преимущественно по
левому).
Правый текстовый край браузер ломает, как хочет. И дизайнеры стремятся
компенсировать этот визуальный излом максимально ровным левым
краем.
В силу этого абзацы желательно делать без красных строк и отделять их
друг от друга пустыми строчками (P, а не BR).
Картинки можно выравнивать в тексте по центру, по левому краю или по
правому. Можно чередовать выравнивание (слева-справа). В последнем
случае нарушение чередования не допустимо.
В текстовых блоках можно частично компенсировать неровность правого края, если
включить автоперенос по слогам добавлением CSS-свойства hyphens — дефис.
Перенос в словах выполняется и оформляется правильно в браузерах IE 10-11, Edge
и Firefox. Браузеры Chromium поддерживают это свойство только в Android и Mak. В
Windows у них это пока не получается. Но это пока.
Если вы создаёте сайт не только для контрольной работы, но и на более долгий
срок, то для подравнивания правого края текстовых блоков добавляйте правило
переносов ко всем элементам, содержащим абзацы с многострочным текстом.
Ниже приводится соответствующее CSS-правило в двух разных вариантах записи.
Разработчику рекомендуется придерживаться в своих кодах какой-либо одной
нотации.
Первый вариант записи
P, BLOCKQUOTE, DD...
{
-ms-hyphens: auto;
/* для IE + Edge */
-webkit-hyphens: auto; /* для Chromium
*/
hyphens: auto;
*/
/* для Firefox
}
Второй вариант записи
p, blockquote, dd... {
-ms-hyphens: auto;
/* для IE + Edge */
-webkit-hyphens: auto; /* для Chromium
*/
hyphens: auto;
*/
/* для Firefox
}
При этом для некоторых абзацев перенос, возможно, придётся отключать
(...hyphens: none).
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Горизонтальная прокрутка в окне шириной 1024
Величина штрафа
Штраф небольшой горизонтальной прокрутки (менее 1/8 ширины окна) на
одной странице — 0.1.
Штраф значительной горизонтальной прокрутки (более 1/3 ширины окна)
на большей части страниц — 0.5.
Для других случаев проверяющий выбирает промежуточный штраф из
диапазона 0.1–0.5.
Что писать в замечаниях
Адрес и описание ошибки.
Рекомендации по исправлению.
Пояснение
Вертикальная прокрутка — обычное дело при просмотре страниц сайта.
Очень мало сайтов в Сети, содержимое страниц которых, настолько мало,
что помещается в браузере на одной экранной странице.
Но когда к вертикальной прокрутке добавляется горизонтальная, это
становится проблемой для пользователя.
Специалисты Nielsen Norman Group (NNG), изучая проблему веб-юзабилити,
отметили любопытный феномен, наблюдающийся в течение нескольких последних
лет: горизонтальная прокрутка остается проблемой для пользователей настольных
компьютеров. Даже с широким внедрением мобильных устройств, где жесты
используются для просмотра веб-контента методом скольжения пальца (свайпинг,
от англ. swipe), пользователи десктопов в большинстве не приемлют
горизонтальную прокрутку web-страниц. (lpgenerator.ru)
Число пользователей, которые смотрят в Интернет через небольшой
монитор шириной 1024 пикселов, возможно, невелико.
Но многие открывают приложение (в том числе и браузер) не на полный
экран, а в окне меньшего размера (шириной примерно в 1024 пикселов).
Работать с окнами, которые видны на Рабочем столе, гораздо удобнее, чем
с пиктограммами на Панели задач. Можно переключаться из окна в окно,
щелкая по видимым частям приложений.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Разрушение единого информационного блока при
изменении размера окна браузера
Что писать в замечаниях
Адрес и описание ошибки.
Рекомендации по исправлению.
Пояснение
У Сидорова на экране сайт выглядел вполне прилично:
Сайт в широком окне
Когда Мячиков посмотрел на сайт в окне меньшей ширины, то увидел
неприглядную картину:
Сайт в узком окне
Для предохранения разрыва строки можно использовать неразрывный
пробел между отдельными её элементами (код &nbsp;).
Неразрывный пробел не спасёт, если в строке есть дефис – браузер может
разорвать строку по этому знаку. И тогда лучше использовать стилевое
свойство white-space:nowrap.
Создайте правило nobr:
.nobr
{
white-space:nowrap;
}
И всякий раз, когда потребуется, используйте класс nobr.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Постоянные блоки (заголовки, меню, логотип и т. п.) плохо
держат свое место на экране при переходах со страницы
на страницу
Что писать в замечаниях
Адрес и описание ошибки.
Рекомендации по исправлению.
Пояснение
К постоянным элементам относятся в первую очередь:
логотип;
название сайта;
навигационные меню.
Лишние сдвиги на экране утомляют глаза пользователя.
Необоснованные сдвиги создают ощущение беспорядка.
И главное, постоянные элементы играют роль интерфейсных линеек,
обрамляющих рабочее окно, поэтому их смещение воспринимается как
явная погрешность разработчика.
Пример этой ошибки демонстрируется ниже:
Постоянные элементы плохо держат свое место
Вертикальное меню сместилось вниз и вправо. Название сайта и
горизонтальное меню сместились вниз, при этом расстояние между
заголовком и меню увеличилось.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Отдельные блоки плотно прижаты друг к другу
Что писать в замечаниях
Адрес и описание ошибки.
Рекомендации по исправлению.
Пояснение
Одна из распространенных ошибок начинающих —
«удушение» информационных элементов на экране путем слишком
тесного их расположения.
Практическая рекомендация: оставляйте между текстом и картинкой,
текстом и табличными гранями по 10 пикселов.
Таблица
Пример из конкурсной работы:
Это мы!
Рассказ о нашей команде.
Cоветы
Ермиков Федор предлагает воспользоваться кратким
справочником, который был составлен по учебнику HTMLконструирование.
Полезные
ссылки
Их немного, но они нам помогают.
Афоризмы
Личная страничка Скляровой Насти.
Фразмочки
Работа Горошковой Елены.
Табличная разлиновка всегда сомнительна, но если уж она есть, то текст не
должен слишком тесно прижиматься к граням таблицы. Обязательно
нужны промежутки (одинаковые на протяжение всего сайта в подобных
местах).
Промежуток легко образуется, если задать нужные значения
атрибутам cellspacing и cellpadding в открывающем теге элемента TABLE.
(Атрибут cellspacing задаёт расстояние между ячейками таблицы,
атрибут cellpadding — расстояние между содержимым ячейки и рамкой
ячейки.)
Для образования полей вокруг элемента, помещенного в ячейку, таблицу
можно кодировать, например, так:
<TABLE cellspacing=0 cellpadding=10 другие атрибуты>
Это мы!
Рассказ о нашей команде.
Cоветы
Ермиков Федор предлагает воспользоваться кратким
справочником, который был составлен по учебнику HTMLконструирование.
Полезные
ссылки
Их немного, но они нам помогают.
Афоризмы
Личная страничка Скляровой Насти.
Фразмочки
Работа Горошковой Елены.
Замечание
Всегда явно задавайте в таблице значения атрибутов cellspacing и cellpadding.
Если они будут опущены, браузер установит значения по умолчанию,
причем умолчания у разных браузеров свои. Не следует доверять браузеру
делать такие вещи по своему усмотрению. Ещё лучше использовать вместо
табличных атрибутов соответствующие CSS-свойства.
Картинки
Второй способ «удушения» информационного элемента, который
пользуется успехом на роботландском конкурсе Проба пера — перекрытие
кислорода тексту при помощи прижатия его к картинке.
Иван пошел в лес за грибами. Стоял чудесный день сентября.
Иван пошел в лес не один, он взял с собой собаку, которая любила
лесные прогулки. Под высокой стройной березой Иван нашел
сразу три молодых гриба. Собака от радости носилась вокруг хозяина, и
хвост её совершал колебательные движения, что означало высшую степень
собачьего восторга.
Этот фрагмент задается следующим кодом:
<P>
<IMG> src="pic/title1.gif"
style="width:93px;height:64px"
align="left"
alt="Сидоров">
Иван пошел в лес за грибами. Стоял чудесный день
сентября. Иван пошел в лес не один, он взял с собой
собаку, которая любила лесные прогулки. Под высокой
стройной березой Иван нашел сразу три молодых гриба.
Собака от радости носилась вокруг хозяина, и хвост её
совершал колебательные движения, что означало высшую
степень собачьего восторга.
</P>
Вы видите, как текст «душит» Сидорова, прижимаясь к нему вплотную.
Напишите теперь:
<IMG src="pic/title1.gif"
style="width:93px;height:64px; padding: 0 10px 10px 0"
align="left"
alt="Сидоров">
Вы увидите, как Сидоров дышит полной грудью:
Иван пошел в лес за грибами. Стоял чудесный день сентября.
Иван пошел в лес не один, он взял с собой собаку, которая любила
лесные прогулки. Под высокой стройной березой Иван нашел
сразу три молодых гриба. Собака от радости носилась вокруг хозяина, и
хвост её совершал колебательные движения, что означало высшую степень
собачьего восторга.
Свободу Сидорову обеспечило CSS-свойство
padding: 0 10px 10px 0
Заметим, что отступ в 10 пикселов назначен здесь только справа и снизу, а
слева и сверху картинка осталась выровненной по тексту (что очень
правильно).
Если на страницах сайта предполагается размещать много однотипно
расположенных картинок, все CSS-свойства (кроме размеров) лучше
описывать в отдельном CSS-файле, связывая описание с
элементами IMG селектором класса.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Текст плохо читается на выбранном фоне
Величина штрафа
За погрешность назначается штраф из диапазона 0.1–0.5 в зависимости от
степени агрессивности фона, на который выведен текст.
Очень важно, чтобы фон оставался именно фоном, а не отвлекал внимание
пользователя от главных элементов документа, не мешал читать текст.
Что писать в замечаниях
Адрес и описание ошибки.
Рекомендации по исправлению.
Пояснение
На шершавом фоне текст всегда читается хуже, чем на гладком:
Шершавый фон
Когда фоновая картинка кажется необходимой, текст надо выводить в
гладкие области:
Справа текст выведен в гладкую область
Можно сохранить сюжет фоновой картины или фотографии и почти не
потерять в качестве восприятия текста, если назначить заливке блока под
текстом полупрозрачность. Однако это хорошо работает только для
крупного текста.
В CSS есть для этого специальное свойство с именем opacity (англ. –
непрозрачность). Это свойство может принимать значения от 1 (по
умолчанию) до 0 (полная прозрачность).
Фон подложки под текст прозрачен на 30%
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Цветовая палитра, утомляющая глаза
Величина штрафа
За погрешность назначается штраф из диапазона 0.1–0.5 в зависимости от
степени дискомфорта просмотра страницы.
Что писать в замечаниях
Адрес и описание ошибки.
Рекомендации по исправлению.
Примеры
Плохо:
Очень плохо:
Цвета радуги
Давайте посмотрим на тоновую палитру, склеенную в кольцо:
Можно заметить, что в радуге преобладают 6 цветов: три RGB-цвета —
красный, зелёный, синий и три CMY-цвета, расположенные точно между
ними — голубой, пурпурный, жёлтый. Вспомним соотношения между этими
цветами:
синий + зелёный = голубой
красный + синий = пурпурный
красный + зелёный = жёлтый
Цвета, расположенные в верхней половине кольца относятся
к тёплым цветам, а в нижней — к холодным.
Считается, что тёплый цвет приближает предмет, привлекая к нему
внимание. Холодный — отдаляет, успокаивает.
Рекомендации по работе с цветом
Человеческий глаз устроен таким образом, что одни и те же цвета могут
восприниматься по-разному.
При уменьшении площади, которую занимает цвет, оттенки становятся
малоразличимы, и цвета визуально «теряют» насыщенность. Это особенно
хорошо заметно на цветных текстах:
Практическая рекомендация: для объектов с маленькими закрашенными
площадями нужно выбирать яркие цвета (6 основных цветов на радуге
плюс белый и чёрный цвета), а для сложных цветов со слабонасыщенным
тоном — использовать большие площади.
Чёрные и белые цвета «не терпят» примесей в небольших количествах.
Лучше использовать их в «натуральном» виде. К белому можно добавлять
немного «синьки»:
Чёрный и белый цвет являются особыми цветами. Их нет в радуге, а в то же
время любой цвет превращается в чёрный при уменьшении яркости до
нуля и в белый при увеличении яркости до максимального значения. Эти
цвета наиболее часто используются в дизайне, так как они хорошо
сочетаются с большинством других цветов.
Если вы чувствуете себя не совсем уверенно в цветовом пространстве —
возьмите за основу чёрный и белый цвета, добавьте к ним красный — эта
палитра вас не подведёт:
Цвета, расположенные рядом выглядят несколько иначе, чем взятые по
отдельности, кроме того, вид цвета зависит от площади, которую он
занимает.
Например, маленький объект тускло-синего цвета внутри большого яркозелёного приобретает зелёный оттенок:
На границах цвета меняют свой вид. Тёмный цвет рядом со светлым
становится ещё темнее, а светлый — ярче:
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Графика не оптимизирована
Величина штрафа
Максимальный штраф 0.5 назначается за одну или несколько картинок,
килобайтный вес которых можно уменьшить на 50% без изменения
геометрического размера и визуальной потери качества.
Штраф не назначается за возможность уменьшения килобайтного веса
картинки менее 10%.
В остальных случаях штраф назначается из расчета 0.1 за каждые 10%.
Штрафы по картинкам суммируются, но результирующий штраф не должен
превышать 0.5.
Что писать в замечаниях
Имя картинки, которую можно оптимизировать без потери качества.
Пример оптимизации (сравнение килобайтного размера картинки до
и после оптимизации, оптимизированная картинка прилагается
отдельным файлом).
Пояснение
Посещаемость сайта (при прочих равных условиях) тем выше, чем быстрее
он просматривается. Пользователь любит быстрое обслуживание и не хочет
тратить лишние деньги.
Пересылка картинки стоит времени и денег, а значит, важно приложить
усилия для уменьшения её килобайтного «веса».
Первое, что можно сделать, это уменьшить геометрические размеры
изображения.
Когда картинка уменьшена до оптимальных геометрических размеров,
можно сохранить её в формате, в котором предусмотрено сжатие.
Важное замечание. Если для исходной картинки нужно получить уменьшенную
копию в новом формате (GIF, PNG или JPEG), то сначала выполните
масштабирование, и только потом преобразование формата — результат будет
лучшего качества.
В формате JPEG реализовано сжатие с потерями (часть цветов изображения
просто отбрасывается).
Формат GIF реализует сжатие без потерь (если в GIF-палитре используются
все цвета исходной картинки).
На практике запись картинки и в формате JPEG, и в формате GIF почти
всегда приводит к потерям графической информации. Для JPEG потери
определяются параметром сжатия, а для GIF — размером палитры, число
цветов в которой редко совпадает с числом цветов исходного изображения.
Потеря графической информации не всегда означает визуальное
ухудшение качества изображения, но может в десятки раз уменьшить
размер графического файла. Именно поэтому важно уметь на практике
выбрать правильный формат, установив в нём нужный параметр,
отвечающий за соотношение качество картинки/размер файла.
Для оптимизации растровой графики можно использовать бесплатный
редактор Paint.net. В этом редакторе при сохранении изображения можно
управлять параметром Качество, контролируя визуальный образ и размер
файла.
Наивысшее качество при очень большом размере файла
Наихудшее качество при маленьком размере файла
Подбираем приемлемое соотношение качество картинки/размер файла и
сохраняем графический файл.
Не уменьшайте картинку браузером
Эта ошибка довольно популярна у начинающих сайтостроителей!
Когда-то в конкурсах Роботландского Университета было принято
ограничение в 100 килобайт для запаковки одной работы (учебного сайта).
По этому поводу приходили возмущенные письма: как можно уложить сайт
в такой крошечный объем?
Одна из работ с «запредельным» (по тем временам) весом в 600 килобайт
была внимательно изучена. Посмотрели в браузере и были удивлены:
картинок не так много, почему такой большой вес?
Разгадка скрывалась в неумелой работе с графикой. Одна из картинок
весила 173 килобайта (на странице их было несколько), имела размер
800x600, а на экран выводилась элементом:
<IMG src="pic.jpg" width="106" height="112">
Когда картинку уменьшили в графическом редакторе до нужного размера
106x112, она стала весить 13 килобайт.
Посмотрите на эти картинки:
Картинка слева «весит» 97 277 килобайт, справа — 9 070 килобайт (источник: namonitore.ru)
Картинки на странице имеют одинаковый геометрический размер 300x255,
но килобайтный вес у второй — в 10 раз меньше.
Дело в том, что исходный размер изображения был 800х600. В первом
случае он был изменён при помощи размерных атрибутов тега IMG,
поэтому «вес» картинки остался исходным — 97 277 килобайт.
Во втором случае картинка была предварительно уменьшена до нужных
размеров в графическом редакторе, и получилась существенная
килобайтная экономия.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Плохо стыкуются плитки фона
Что писать в замечаниях
Адрес и описание ошибки.
Рекомендации по исправлению.
Пояснение
Чтобы фоновый «паркет» смотрелся красиво, необходима визуальная
стыковка плиточек между собой. Это надо учитывать при создании
фоновой иллюстрации.
Фоновый «паркет»
Плитка
Плохая стыковка плиточек
Очень плохая стыковка плиточек
Хорошая стыковка простых плиточек
Хорошая стыковка сложных плиточек
Ещё один пример хорошей стыковки фоновых плиточек по горизонтали:
Отличная стыковка по горизонтали
Плиточка, показанная ниже, тиражируется только по горизонтали при
помощи CSS-свойства background: repeat-x url(pic/repeat-x.png).
С фоновыми картинками нужно обращаться очень осторожно. Если нет
уверенности, что паркет улучшает восприятие документа, лучше
использовать одноцветную заливку: на гладком фоне текст всегда читается
лучше.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Неудачное повторение фоновой картинки в широких окнах
Что писать в замечаниях
Адрес и описание ошибки.
Рекомендации по исправлению.
Пояснение
В узком окне сайт смотрится нормально:
Фон страниц на нём образован при помощи фоновой «плиточки»:
У разработчика небольшой монитор и он даже не подозревает, что на
экранах с высоким разрешением с сайтом происходит катастрофа:
Что произошло? Ширина окна превысила ширину фоновой плиточки и
браузер стал повторять её по горизонтали.
Избежать подобной неприятности можно двумя путями.
Первый способ рекомендует конструировать плиточку, ширина которой
превосходит разумную ширину окна пользователя. Но возникают
проблемы с определением этой самой «разумной» ширины. Не так давно
трудно было себе представить экраны с шириной большей 1280 пикселов.
Сейчас никого не удивишь монитором с горизонтальным разрешением
1600 пикселов.
Второй способ не зависит от разрешения экрана. Он будет работать в
окнах любого размера. Суть его в том, чтобы разрешить браузеру повторять
фоновую плиточку только по вертикали, а по горизонтали запретить.
Такое указание можно задать при помощи CSS-свойства background:
<BODY style="background: #fbeee7 repeat-y url(pic/fon.gif);">
Значение repeat-y разрешает повторение фоновой картинки fon.gif, только
по вертикали, а значение #fbeee7 задаёт цвет справа от плиточки.
Замечание. Безусловно гораздо лучше записывать BODY без всяких атрибутов, а все
свойства этого элемента описывать в отдельном CSS-файле.
Теперь в качестве фоновой картинки можно использовать совсем короткое
изображение:
Высоту такой фоновой картинки нужно делать, конечно, в один пиксел. На
иллюстрации плиточка показана высокой для наглядности.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Излишне большое количество цветов
При оценке сайта по параметру «число используемых цветов» учитываются
в первую очередь цвета фона, текста и цвета заголовков и логотипа.
Ошибкой считается использование более четырёх цветов.
Цвета на отдельных иллюстрациях и фотографиях в расчёт не берутся (но
надо заботиться о том, чтобы эти иллюстрации и фотографии
«вписывались» в страницу и не смотрелись «заплатами»).
Что писать в замечаниях
Адрес и описание ошибки.
Рекомендации по исправлению.
Пояснение
Опытные дизайнеры ограничивают цветовой спектр страницы очень
небольшим набором цветов (не больше четырех).
Что понимать под цветом (тоном), а что под оттенком?
Давайте посмотрим на тоновую палитру, склеенную в кольцо:
Тоновая палитра, склеенная в кольцо
Можно заметить, что в радуге преобладают 6 цветов: три RGB-цвета —
красный, зелёный, синий и три CMY-цвета, расположенные точно между
ними — голубой, пурпурный, жёлтый. Соотношения между этими цветами:
синий + зелёный = голубой
красный + синий = пурпурный
красный + зелёный = жёлтый
Таким образом, можно говорить о 8 основных цветах (тонах), рассматривая
остальные, как оттенки.
Цвета RGB-палитры (красный, зелёный, синий):
Цвета CMY-палитры (голубой, пурпурный, жёлтый):
Чёрный и белый:
Чёрный и белый цвет являются особыми цветами. Их нет в радуге, а в то же
время любой цвет превращается в чёрный при уменьшении яркости до
нуля и в белый при увеличении яркости до максимального значения.
Чёрный и белый цвет принято считать отдельными базовыми цветами,
несмотря на то, что они являются вариантами любого цвета по яркости.
В одной из конкурсных работ «Сквозь огонь и воду» фон страниц был
выполнен в виде цветовой растяжки от жёлтого к синему:
Возникает вопрос: сколько цветов здесь использовано?
Три цвета. Посмотрите на тоновую палитру: растяжка захватывает три
базовых цвета: желтый, зелёный, синий.
Ниже показана растяжка от белого к синему:
Здесь использовано два базовых цвета (хотя, на самом деле, цвет один, и он
«растянут» по яркости).
Дополнительные рекомендации
Цвет принадлежит к базовым строительным материалам дизайна.
Обращаться с цветом нужно очень осторожно. Легко ошибиться и
представить на обозрение заляпанную цветными пятнами страницу,
вызывающую раздражение, как опрокинутый на пол набор красок.
При подборе цветов нужно исходить из двух важнейших принципов:
единства и контраста. Единство — это фундамент композиции, скелет
страницы. Контраст — это способ расстановки акцентов, выделений.
Принцип единства требует, чтобы цвета были как можно ближе друг к
другу, в простейшем случае просто совпадали.
Очень много прекрасных профессиональных страниц построено вообще в
одном цвете. Светлый оттенок этого цвета используется для фона,
темный — для текста, более насыщенные оттенки — для выделений.
Однако, для проектирования дизайна в одном цвете нужен солидный опыт.
Слишком близкие, но не совпадающие цвета, могут раздражать и делать
страницу скучной.
Новичкам лучше пользоваться проверенной практикой рекомендацией —
как можно меньше цветов на странице, но выбранные цвета должны быть
контрастными.
Белый и черный цвета отлично сочетаются с большинством других.
Красный цвет прекрасно сочетается с черным и белым.
Вам трудно оценить сочетаемость цветов? И вам не хочется рисковать? Вот
вам совет дизайнера Роджера Блэка:
Первый цвет — белый.
Второй цвет — черный.
Третий цвет — красный.
Прогулка
Папа пошел в лес за грибами.
Белый цвет — для фона, черный — для текста, красный — для заголовков.
Этот джентельменский набор дополняет классический набор для ссылок:
синий — цвет неотработанной ссылки
красный — цвет активной ссылки
пурпурный — цвет отработанной ссылки
Соответствующие стилевые правила могут быть заданы так:
BODY
{
background-color:white;
color:black;
}
A
{text-decoration:none;}
A:link
{color:blue}
A:visited {color:purple}
A:hover
{color:red;text-decoration:underline}
A:active
{color:red}
Давайте ещё раз посмотрим на тоновую палитру, склеенную в кольцо:
Тоновая палитра, склеенная в кольцо
Цвета, расположенные в верхней половине кольца, относятся
к тёплым цветам, а в нижней — к холодным.
Считается, что тёплый цвет приближает предмет, привлекая к нему
внимание. Холодный — отдаляет, успокаивает.
Человеческий глаз устроен таким образом, что одни и те же цвета могут
восприниматься по-разному.
При уменьшении площади, которую занимает цвет, оттенки становятся
малоразличимы, и цвета визуально «теряют» насыщенность. Это особенно
хорошо заметно на цветных текстах:
Оттенки зависят от площади
Практическая рекомендация: для объектов с маленькими закрашенными
площадями нужно выбирать яркие цвета (6 основных цветов на радуге
плюс белый и чёрный цвета), а для сложных цветов со слабонасыщенным
тоном — использовать большие площади.
Рекомендации по выбору цветов
Чёрные и белые цвета «не терпят» примесей в небольших количествах.
Лучше использовать их в «натуральном» виде. К белому можно добавлять
немного «синьки»:
Чёрные и белые цвета не терпят примесей
Чёрный и белый цвета наиболее часто используются в дизайне, так как они
хорошо сочетаются с большинством других цветов.
Если вы чувствуете себя не совсем уверенно в цветовом пространстве —
возьмите за основу чёрный и белый цвета, добавьте к ним красный — эта
палитра вас не подведёт:
Чёрный+белый+красный
Цвета, расположенные рядом, выглядят несколько иначе, чем взятые по
отдельности, кроме того, вид цвета зависит от площади, которую он
занимает.
Например, маленький объект тускло-синего цвета внутри большого яркозелёного приобретает зелёный оттенок:
Вид цвета зависит от цвета соседа и площади
На границах цвета меняют свой вид. Тёмный цвет рядом со светлым
становится ещё темнее, а светлый — ярче:
На границах цвета меняют свой вид
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Страница перегружена декоративными фрагментами, не
несущими функциональной нагрузки
Что писать в замечаниях
Адрес и описание ошибки.
Рекомендации по исправлению.
Пояснение
Начинающий дизайнер стремится украсить сайт многочисленными
«побрякушками», навешивая их на страницу, как на новогоднюю ёлку.
Особенно много стараний прикладывается к начальной странице: вроде как
и непонятно, что на ней писать, ведь вся нужная информация содержится в
разделах.
Раз записывать нечего, соорудим плакат с приглашением и украсим его
декоративным обрамлением. Заодно возьмём пару красивых картинок,
чтобы заполнить свободное пространство:
Обилие декоративных элементов, не несущих функциональной нагрузки
Так не надо делать!
Нужно стараться проектировать сайт так, чтобы все элементы оформления
были функциональны, работали на пользователя:
Все элементы оформления функциональны
Логотип и заголовок идентифицируют сайт и являются его украшением.
Логотип, кроме того, — важное навигационное средство.
Вместо картинок «для настроения» лучше поместить ссылки на последние
новинки сайта (например, на новые выпущенные учебники). И красиво и
функционально.
Лозунгов и приглашений на страницах вообще быть не должно (они
вызывают недоверие к авторам, подобно самой плохой рекламе). Лучше
написать краткую информацию о содержимом сайта, короткие анонсы
важных страниц и последних новостей.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Иллюстрации не вписываются в страницу, смотрятся как
заплаты
Что писать в замечаниях
Адрес и описание ошибки.
Рекомендации по исправлению.
Пояснение
Посмотрите на эту картинку. Замечательная обезьянка,
правда? Но, что-то в этой иллюстрации не так. Не вписывается она в
страницу, смотрится как «заплата». Причина в том, что фон, на котором
нарисовано животное, отличается от фона страницы, вступает с ним в
противоречие.
Что же делать? Есть два противоположных рецепта. Можно отделить
картинку от страничного фона, а можно, наоборот, попытаться слить с ним.
Отделение
Выделим картинку при помощи рамки. Смотрится гораздо
лучше! Именно так поступают художники, когда размещают на стенах свои
шедевры. Они заключают холсты в декоративное обрамление.
Используя «строгие» рамки, не увлекайтесь их толщиной, а то
картинки будут напоминать траурные портреты.
Для «толстых» рамок лучше использовать декоративное
обрамление. Оно, конечно, должно соответствовать общему стилю
страницы.
Картинка эффектно «всплывает« над страницей при помощи
тени.
Соединение
Иллюстрацию можно «подружить» с фоном страницы,
растушевывая ее края.
Кардинальный способ соединения фона картинки с фоном
страницы — полное их совпадение. Смотрится великолепно!
Картинки со сложным фоном
Это, как правило, фотографии и сканированные изображения.
Показательный пример — фрагмент сканированной
фотографии: типичная «заплатка» на странице!
Та же иллюстрация, после небольшой обработки в
графическом редакторе дружит со страничным фоном.
На страницу часто приходится помещать
фрагмент экранного изображения.
Если при вырезании элемента немного
«размыть» края , иллюстрация смотрится гораздо лучше.
На фронтах бумажной продукции
Проблема совмещения иллюстрации с фоном страницы актуальна не
только для экрана. Посмотрите, как это делают дизайнеры в газетах.
Газета «Труд-7». Фотография выделяется при помощи
тонкой рамки.
Газета «Совершенно секретно». Иллюстрация
«приподнимается» над страницей при помощи тени.
Газета «Информатика». Фон картинки совпадает с фоном
страницы.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Явные погрешности в качестве графического материала
Что писать в замечаниях
Адрес и описание ошибки.
Рекомендации по исправлению.
Пояснение
Среди явных погрешностей в графике, подготовленной для размещения на
страницах сайта, наиболее распространены:
погрешности масштабирования;
погрешности чрезмерного сжатия.
Погрешности масштабирования
Эти погрешности возникают при изменении размеров растровой картинки.
Ниже представлены примеры, взятые из конкурсных работ (фрагменты
заголовков, логотипы). На иллюстрациях хорошо видны увеличенные
пиксельные ступеньки:
Погрешности масштабирования
Погрешность возникает при неверном указании значений размерных
атрибутов тега IMG и при увеличении размеров картинки в графическом
редакторе.
Типичный случай: текст, изначально записанный слишком мелким кеглем,
растягивается, и на нём появляются ступеньки.
Качество картинки страдает дополнительно, если не используется режим
редактора Сглаживание (антиалиасинг).
Антиалиасинг в приведённой выше иллюстрации отсутствует во всех
примерах, кроме рисунка логотипа с птицей. Птица была испорчена
размерными атрибутами тега IMG. В «натуральную» величину она
смотрится очень хорошо:
Рисунок логотипа одной из работ Роботландского университета
Рекомендации
Самое лучшее — использовать для подготовки графики векторный
графический редактор, такой как бесплатный Inkscape.
Векторная графика масштабируется без искажений, а сохранять
изображения нужного размера можно в растровом формате GIF, PNG или
JPEG.
И не надо забывать про антиалиасинг.
Погрешности чрезмерного сжатия
Картинки, предназначенные для Web, конечно, надо оптимизировать.
Однако, эта оптимизация не должна наносить явный ущерб качеству
изображения.
Ниже приведены примеры, взятые из конкурсных работ. Хорошо видны
цветовые ореолы по контуру и другой цветовой шум. Это результат
чрезмерного JPEG-сжатия.
Погрешности чрезмерного JPEG-сжатия
Для всех приведённых выше рисунков (кроме фотографии) гораздо лучше
подошёл бы формат GIF: файлы были бы гораздо меньше, а качество
изображения существенно лучше.
О форматах GIF и JPEG, а также о том, как правильно формат выбрать,
читайте ниже.
Графические Web-форматы
Формат GIF
В Интернете популярен формат GIF (Graphic Interchange Format, формат
обмена графическими данными). Вот как он устроен:
Заголовок начинается с текста «GIF89a» — признака GIF-формата, затем
указывается ширина, высота картинки и некоторая другая информация.
За заголовком следует палитра — 24-битные коды цветов, которые
используются в рисунке. Максимальное число цветов, которое может
хранить палитра GIF — 256.
Пусть, например, нужно сохранить в формате GIF изображения флажка:
Для этого флажка будет построена такая палитра:
Само изображение кодируется, как и в формате BMP по строкам, но вместо
кода цвета указывается номер этого цвета в построенной палитре. Для
четырёх цветов в качестве такого номера достаточно использовать две
двоичные цифры:
Флажок будет закодирован следующим образом:
Конечно, в файле эта таблица превращается в список двухбитных кодов.
При этом первые 20 бит кодируют первую строку изображения,
вторые 20 — вторую и так далее.
Когда в картинке использовано более 256 цветов, то графический редактор
перед записью картинки в файл заменяет в ней «лишние» цвета близкими
из 256-цветной палитры. Картинка, конечно, записывается с искажением.
При использовании GIF с 256-цветной палитрой ухудшение качества часто
практически незаметно:
Для этой картинки качество остается приемлемым и при GIF с палитрой в
32 цвета, и даже при 16 цветах:
Когда число цветов уменьшается до 4 или 2, качество изображения
становится слишком низким:
Формат JPEG
Еще один графический формат очень популярен в Интернет — формат JPEG
(файлы с расширением jpg или jpeg).
Сокращение JPEG возникло от названия группы, которая разработала этот
формат: Joint Photographic Experts Group, Объединенная группа экспертов по
машинной обработке фотографических изображений.
Формат JPEG содержит 24-битную информацию о цвете пикселя, но при
формировании графического файла используется метод сжатия, при
котором часть цветов просто отбрасывается:
Используя сжатие с потерями, JPEG способен уплотнить графические
данные от 10 до 20 раз без видимой потери качества.
Посмотрите на приведенную ниже иллюстрацию. Размер файла,
записанного в формате JPEG, в 6 раз меньше размера файла, записанного в
формате GIF при одинаковом качестве изображения:
Даже очень сильное JPEG-сжатие исходного изображения сохраняет много
цветов картинки, чего нельзя сказать про GIF-файл того же размера:
Какой формат выбрать
JPEG хорош для больших изображений, для фотографий и рисунков,
имеющих плавные цветовые переходы.
Для маленьких изображений, для картинок с четкими цветовыми
границами и однотонными областями формат GIF подходит лучше.
На приведенной ниже иллюстрации изображение в формате JPEG имеет
явные погрешности, а размер файла в 4 раза больше, чем у рисунка в
формате GIF:
Ниже приведён пример ещё одной картинки, для которой формат GIF
предпочтительнее формата JPEG (исходный файл в формате BMP имеет
размер 128 214 байт):
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Отсутствие антиалиасинга или не соответствие его фону
страницы
Что писать в замечаниях
Адрес и описание ошибки.
Рекомендации по исправлению.
Пояснение
Разрешение экрана монитора очень низкое — 96 dpi. Графические точки, из
которых собирается изображение (пикселы), видны невооружённым глазом
и на линиях заметны пиксельные ступеньки — алиасинг.
Ниже показан пример алиасинга на изображении букв текстовой надписи:
Алиасинг
Эта же надпись в 4-кратном увеличении:
Алиасинг в 4-кратном увеличении
Если по ступенчатой границе пустить пикселы, имеющие переходный
(средний) цвет между цветом объекта и цветом фона, то ступеньки
сглаживаются и визуально становятся незаметными. Посмотрите на ту же
надпись, выполненную с использованием антиалиасинга (или
режима сглаживания). Пикселные изломы теперь не видны:
Антиалиасинг
Та же картинка в 4-кратном увеличении:
Антиалиасинг в 4-кратном увеличении
Алиасинг неприятен не только на контурах букв, но и на любых линиях,
которые не являются горизонталями и вертикалями:
Линии с алиасингом и с антиалиасингом
Режим антиалиасинга нужно устанавливать в графическом редакторе перед
сохранением картинок.
Понятно, что цвет пикселов антиалиасинга, сглаживающих контуры,
зависит от двух цветов: цвета рисунка и цвета фона. Не учитывать этот
факт — типичная ошибка новичка.
Петр Мячиков написал заголовок РОБОТ на белом фоне с антиалиасингом и
сохранил свой рисунок на диске в виде прозрачного GIF. Потом он поместил
надпись на страницу с серым фоном и был неприятно удивлен «рваными»
краями букв:
— Наверное, я всё же забыл в графическом редакторе включить
сглаживание, — подумал Петр и, чтобы удостовериться, посмотрел на
рисунок в 4-кратном увеличении:
Антиалиасинг есть, но для белого фона! Подмена серым свела на нет все
усилия графического редактора.
Урок пошел Петру на пользу. Рисовать с антиалиасингом надо на том самом
фоне, который собираешься подкладывать под картинку на гипертекстовой
странице. Вот, пожалуйста, тот же прозрачный GIF, нарисованный на сером:
А вот, та же картинка в 4-кратном увеличении. Здесь антиалиасинг
правильный:
Ещё одна распространенная ошибка. Вы берете прозрачный GIF из какойнибудь интернетовской бесплатной коллекции. На белом фоне он
смотрится просто чудесно. Помещаете на свой фон и видите грязные края.
Понятно в чем дело?
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Отсутствие alt-значений в информационных
иллюстрациях
Что писать в замечаниях
Имя файла с обнаруженной ошибкой.
Строка содержащая IMG без атрибута alt.
Пояснение
Текст, который является значением атрибута alt (альтернативный текст),
часто опускают при кодировании тега IMG, а совершенно напрасно!
Пользователь может гулять по Интернет с «потушенными фарами» —
отключенной в настройках браузера графикой. Зачем он так делает? Ради
экономии своих денег и времени, ведь толстая графика бьет и по тому, и по
другому. (Сегодня, правда, в эпоху безлимитного скоростного Интернета
это не так актуально.)
Если атрибут alt проигнорирован, пользователь не увидит никаких
сообщений о том, какую роль играет картинка на странице.
Если alt наполнен содержанием, пользователь прочитает сообщение,
записанное в прямоугольник, замещающий картинку, а в некоторых
браузерах увидит тот же текст, наведя мышиный курсор на место картинки
(хотя для этой цели служит атрибут title).
Существуют браузеры, которые вообще не поддерживают графики,
например, текстовый браузер Lynx. Голосовой браузер pwWebSpeek
предназначен для слепых людей. Такие люди не увидят картинки, но хотя
бы получат о ней представление, услышав ее описание.
Существуют браузеры, использующие тактильный ввод-вывод по азбуке
Брайля. Другие пользователи работают с Web по телефону. Так, например,
устроена система Web-on-Call Voice Browser. В последнее время становится
модным иметь в автомобиле бортовой компьютер с интернет-связью. Так
как глаза пользователя заняты дорогой, к браузеру подключают речевой
синтезатор.
Поисковые Интернет-узлы запускают в сеть свои роботы, для
сбора информации. Картинки роботы не видят, а вот alt-тексты читают с
удовольствием.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Неверное (неинформативное) содержание alt-надписи
Имя файла с обнаруженной ошибкой.
Строка содержащая IMG с неинформативным содержанием
атрибута alt.
Предложение по содержанию alt-надписи.
Пояснение
Понятно, что мало написать какой-то текст в качестве значения
атрибута alt. Сообщение нужно тщательно продумать, принимая во
внимание, что пользователь будет читать или слышать его, не видя
изображения.
Сообщение «Это картинка» совсем не годится для альтернативного текста.
Текст «Фото школьного здания. Четырехэтажная кирпичная постройка
с липовой аллеей.» хорошо подходит для изображения, которое любят
размещать на главной странице школьные сайты.
Представьте, что человек не видит картинки, а только слушает
альтернативный текст. Слова «Это картинка» вызовут раздражение.
Короткое «Школа» — информативнее, а текст с липовой аллеей вызовет
ещё и положительную ассоциацию:
Если картинка большая, то и альтернативное сообщение может быть
достаточно большим. А вот на маленьких картинках длинные тексты, как
правило, обрезаются:
Вот еще несколько правил записи альтернативного текста.
Для пустых картинок-распорок и декоративной графики необходимо
указывать alt="". Дело в том, что по стандарту HTML у атрибута alt нет
определенного значения. Это означает, что браузеры вправе помещать
в альтернативный текст всё, что угодно.
Если заголовок или другой текст на странице выполнен в графике, то
альтернативный текст должен в точности его повторять.
Если картинки используются как маркеры списка, записывайте
в alt последовательную цифровую нумерацию. (Значение «маркер»
гораздо хуже.)
Если картинка используются вместо линии,
записывайте alt="разделитель". (Представьте, что для имитации
разделения записано atl="*************". Речевой браузер будет нудно
повторять: «символ звездочка, символ звездочка…»)
Если графическая кнопка используется для навигации,
заключайте alt-значение в квадратные скобки — это один из
принятых способов оформления текстовых меню.
(Пример: alt="[начало]").
Часто на web-страницах неверно используют атрибут alt как всплывающую
подсказку для сообщения пользователю дополнительной информации.
Для этой цели предназначен атрибут title. Если в теге IMG записаны оба
атрибута, то значение alt записывается на место картинки, а
значения title всплывает на экран при наезде мышиным курсором.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Наличие движущихся и мерцающих надписей
Величина штрафа
Рекомендуется штраф 0.5 за наличие на сайте единственной движущейся и
(или) мерцающей надписи.
Что писать в замечаниях
Адрес и описание ошибки.
Рекомендации по исправлению.
Пояснение
Самое ужасное, что только можно придумать на странице — это
движущиеся и мерцающие надписи.
Такого воздействия на свои глаза практически не переносит никто, это
раздражает всех, ну и, конечно, отдает любительством на уровне детского
сада.
Лучше по-хорошему, хлопайте в ладоши мне! Лучше по-хорошему, хлопайте в ладоши мне! Лучше похорошему, хлопайте в ладоши мне! Лучше по-хорошему, хлопайте в ладоши мне!
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Наличие агрессивной анимации
Величина штрафа
Штраф от 0.1 до 0.5 в зависимости от количества анимированных
элементов и помех, которые они создают пользователю.
Единственный зайчик, помещённый ниже в текст для «развлечения»,
штрафуется величиной 0.5.
Что писать в замечаниях
Адрес и описание ошибки.
Рекомендации по исправлению.
Пояснение
Движение — сильный раздражитель. На экране — это самый заметный
способ выделения элемента гипертекстовой страницы.
Проведите такой эксперимент. Попробуйте прочитать текст,
рядом с которым беспрерывно в цикле анимируется какойнибудь зайчик-попрыгайчик. Вы сразу оцените воздействие
анимации на ваши глазные рецепторы. Зайчик с периферии
вашего внимания упорно скачет в ее центр. Сосредоточиться
на тексте невозможно. Колбочки и палочки беснуются
вместе с зайчиком!
Пользователь приходит на сайт за информацией, а уходит с прыгающими
зайчиками в глазах! Вам это нужно?
Вы скажете, но ведь красиво! Пользователь должен этим насладиться!
Пользователь нам ничего не должен. Он приходит на сайт за информацией,
а милые зайчики хороши тогда, когда не мешают.
Анимация не будет мешать восприятию информации, если она:
не прокручивается в бесконечном цикле;
запускается и отключается по желанию пользователя.
Вы можете сказать, что в сети полно анимированных банеров, которые
кричат на нас с экрана «Кликни меня!»
Но в сети вообще очень мало по-настоящему качественных работ, а
потом — как часто вы поддаетесь на соблазн и «кликаете» то, что вам так
упорно навязывают? Сеть — очень демократичный институт, здесь каждый,
вооружась браузером, делает только то, что ему действительно нужно,
игнорируя сайты, приводящие к бесполезным потерям времени и денег.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Сайт неправильно работает в некоторых браузерах
Величина штрафа
Когда в одном из популярных браузеров сайт не отображается вовсе, или в
нём не работают навигационные средства, назначается максимальный
штраф 0.5.
При визуальных погрешностях, которые всё же позволяют читать сайт и
перемещаться по его страницам, назначается штраф из диапазона 0.1–0.4 в
зависимости от степени возникших искажений и неудобств в управлении
сайтом.
Что писать в замечаниях
Укажите название браузера и приложите снимки экрана с фрагментами
страниц, на которых имеются визуальные погрешности. Постарайтесь
определить их причину — проверьте коды HTML и CSS и предложите
варианты исправлений.
Пояснение
Сайт должен нормально работать в современных браузерах.
Проверяйте работу в браузерах:
Microsoft Internet Explorer
Microsoft Edge
Google Chrome
FireFox
Opera
Яндекс.Браузер
Считаем, что сайт работает «нормально», если:
информация располагается на экране в правильном (не
перемешанном) порядке,
навигационные средства работают.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Заимствование элементов оформления сайта без ссылок
на автора
Величина штрафа
Рекомендуемый штраф — 0.5 балла. Штраф меньшей величины будет
демонстрировать вашу лояльность к юридически наказуемому деянию.
Что писать в замечаниях
Адрес и описание ошибки.
Рекомендации по исправлению.
Пояснение
Вам понравился этот смешной человечек с зонтиком? И вы уже
подумали, что ему будет хорошо на вашем сайте? Нет ничего проще!
Щелчок правой кнопкой, «Сохранить рисунок как…», и картинка
прописана на вашем винчестере, а потом и на вашем сайте.
Не надо так поступать! Это плохо по двум причинам.
Во-первых, у картинки есть автор и вы присваиваете чужой труд, а
попросту — крадёте.
Во-вторых, даже если вы сделаете ссылку на автора (в данном случае
Александр Русс из Роботландии), ваш сайт проиграет в оригинальности:
каждая картинка создаётся под определенные нужды, имеет стилевые
особенности, характерные для родного сайта. Пользователь увидит, что
картинка «притянута за уши» — значит, у дизайнера не хватило таланта
придумать собственную графику.
В Интернетовских архивах вас поджидает море самой разной «бесплатной»
графики. Это либо откровенный мусор, либо набившие оскомину шаблоны,
либо добротные, но ворованные рисунки. Последним пользоваться нельзя,
если вы не хотите попасть в дурную компанию. Использование мусора и
штампов тоже не даст плюсов.
Посмотрите на логотип конкурсной
работы «Шесть плюс одна» (автор Григорьев Вячеслав). Насколько рисунок
смотрится интереснее Интернетовских стереотипов! Сразу видно, что это
авторская графика, сделанная специально под нужды этого конкретного
сайта.
Если вам хочется взять картинку из Интернета для украшения сайта —
ударьте себя по рукам. Это особое «нет» для серьёзного дизайнера.
Не умеете рисовать? Возьмите фотоаппарат, снимите то, что нужно,
отсканируйте, обработайте в Фотошопе. Привлеките знакомого художника
(не забудьте только указать его авторство).
У вас нет знакомого художника? Нет фотоаппарата, сканера? Делайте сайт
без картинок. Пусть украшением будут «зацементированные» в графике
надписи.
Не нравится? Откажитесь от изготовления сайта, пусть это делают другие.
Авторство даже в малом нужно уважать, и оно охраняется законом, то есть
помимо этических проблем могут возникнуть проблемы юридические.
Авторское право распространяется не только на иллюстрации, но и на
тексты, стиль и даже на подбор цветов.
Конечно, авторское право на отдельный цвет никому не принадлежит. А вот
сочетание цветов — это уже объект авторского права (исключая
классические варианты). Иными словами, нельзя взять, да и скопировать к
себе содержимое элемента BODY с чужого сайта.
Вы, наверное, и сами знаете, что подобрать цвета даже в безопасной
палитре (216 цветов) не так просто. А что говорить о подборе хорошо
сочетаемых цветов в 16-миллионной палитре 24-битных мониторов!
Как указывать авторство
Указывать авторство желательно явным образом в основном тексте
(пример 2) или в подрисуночной надписи (пример 1).
Если по каким-либо весомым причинам сделать явное указание трудно
(например, сообщить авторство логотипа), то можно указывать авторство в
alt-надписи (и/или в атрибуте title) рисунка (пример 3).
Для публикации на своих страницах авторских фрагментов, одной ссылки
на автора недостаточно. Нужно ещё получить у автора разрешение на
такую публикацию (пример 1).
В случаях, когда установить авторство сложно, нужно указывать хотя бы
источник, откуда позаимствована иллюстрация (пример 2).
Пример 1. Указание авторства в подрисуночной надписи
Четвёртый урок книги «Рисуем на компьютере» (автор А. А. Дуванов)
начинается с Васиных фантазий:
— Над крышами летали мухи величиной со слона. Лошадей держали в домах
заместо собачек. В лесу росли гигантские травы, а берёзы и осины зеленели на
подоконниках. Дети в этой стране рождались большими, как великаны. С возрастом
они уменьшались в размерах, пока не исчезали вовсе…
Рассказ сопровождается рисунком:
Иллюстрация из книги А. А. Дуванова «Азы информатики. Рисуем на компьютере». Автор рисунка
А. А. Дуванов, автор персонажей А. А. Русс. Публикация с разрешения авторов.
Пример 2. Указание авторства в основном тексте
Репродукция картины Леонардо да Винчи «Мадонна
с младенцем (Мадонна Литта)». Картина написана в 1491 году, холст, масло.
Хранится в Эрмитаже. Иллюстрация с сайта vinci.ru.
Пример 3. Указание авторства в alt- и title-надписи
Петька и мухи
Цыплёнок Петька любит клевать сонных мух. Стоит мухе немного заснуть — Петька тут как тут.
Клюк!
Муха не успеет даже составить завещание. Только возьмёт она в руки перо — клюк!
А бумагу она не успевает даже вынуть из своего бумажного бюро. Клюк!
Вот какой удалец паршивец Петька.
© 2005 Вася Кук kuk@robotland.pereslavl.ru
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Нарушение правила записи тегов HTML
Величина штрафа
Минимальный штраф 0.1 назначается, когда в коде HTML всех файлов сайта
имена тегов одного элемента содержат строчные буквы.
Максимальный штраф 0.5 назначается, когда в коде HTML всех файлов
обнаружено не менее пяти имён тегов, содержащих строчные буквы.
Штраф из диапазона 0.2–0.4 назначается по усмотрению проверяющих для
промежуточных ситуаций по отношению к двум крайним, описанным
выше.
Исключения
Открывающий и закрывающий теги одного элемента считаются одной
ошибкой.
Одна и та же ошибка в блоке кода, повторяющемся в разных файлах,
считается одной ошибкой в шаблоне.
Что писать в замечаниях
Имя файла с ошибкой.
Номер строки и копия тега (без атрибутов) записанного с ошибкой.
Правильно записанный тег.
Пояснение
Записывайте имена тегов прописными символами (в верхнем регистре), а
имена атрибутов и их значения — строчными (в нижнем регистре).
Синтаксис языка HTML 5 требует запись всех кодов HTML строчными (в
нижнем регистре) символами. Но это требование не строгое, браузеры
допускают запись прописными, и на этом построена сформулированная
выше рекомендация. В чём её смысл?
Дело в том, что имена тегов, записанные прописными, будут выделяться на
фоне большинства строчных букв кода и контента. Это облегчает контроль
за построением кода.
Если валидатор кода HTML будет выдавать ошибку, связанную с использованием
верхнего регистра в коде, игнорируйте её.
Пример записи кода с учётом описанной рекомендации
<!DOCTYPE html>
<HTML lang="ru">
<HEAD>
<META charset="utf-8">
<TITLE>Клавиша Enter</TITLE>
</HEAD>
<BODY>
<H1>Клавиша Enter</H1>
<P>
Вася так торопился, что нечаянно нажал
<EM>Enter</EM> в середине строки. А строка
взяла, да разрезалась на две части:
</P>
<P>
<IMG class="img_size"
src="pic/0402.gif"
alt="Enter разрезает строку">
</P>
</BODY>
</HTML>
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Нарушение правила записи атрибутов HTML
Величина штрафа
Минимальный штраф 0.1 назначается, когда в коде HTML всех файлов
сайта, имя одного атрибута или его стандартного значения записано не
строчными буквами или без кавычек.
Максимальный штраф 0.5 назначается, когда в коде HTML всех файлов
сайта обнаружено не менее 5 атрибутов, записанных с ошибками.
Штраф из диапазона 0.2–0.4 назначается по усмотрению проверяющих для
промежуточных ситуаций по отношению к двум крайним, описанным
выше.
Исключения
Одна и та же ошибка в блоке кода, повторяющемся в разных файлах,
считается одной ошибкой в шаблоне.
Что писать в замечаниях
Имя файла с ошибкой.
Номер строки и копия тега с атрибутом записанным с ошибкой.
Тег с правильно записанным атрибутом.
Пояснение
Задача атрибутов — уточнение и расширение свойств элементов.
Если допустимый атрибут для элемента явно не записан, браузер
подставляет значение, заданное в нём по умолчанию.
Порядок атрибутов не имеет значения и на результат отображения
элемента не влияет.
Атрибут состоит из двух частей: имя атрибута и его значение.
1. Имя атрибута и его типовое значение, кроме текстовых ("alt" и "title")
записывается строчными буквами (в нижнем регистре).
2. Между атрибутом и значением без пробелов добавляется знак
равенства "=".
3. Любое значение атрибута записывается в одиночных машинописных
кавычках.
4. Разделителем между атрибутами является пробел перед началом
каждого.
Некоторые атрибуты применяются без значений (например, disabled,
controls, loop, autoplay), хотя для таких атрибутов можно записывать пустое
значение ("") или повторять в качестве значения имя самого атрибута
(например, controls="controls").
Пример записи атрибутов
<IMG·id="logo"·src="img/logo.png"·alt="Логотип">
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Отсутствие структурной лесенки в коде HTML
Величина штрафа
Минимальный штраф 0.1 назначается, когда в коде HTML всех файлов сайта
у одного или обоих тегов одного блочного элемента нет структурных
отступов (лесенки на теговом каркасе) или присутствующие отступы не
отражают иерархию (вложенность) конструкций кода HTML.
Максимальный штраф 0.5 назначается, когда в коде HTML всех файлов
сайта у одного или обоих тегов не менее чем у 5 блочных элементов нет
структурных отступов (лесенки на теговом каркасе) или присутствующие
отступы не отражают иерархию (вложенность) конструкций кода HTML.
Штраф из диапазона 0.2–0.4 назначается по усмотрению проверяющих для
промежуточных ситуаций по отношению к двум крайним, описанным
выше.
Исключения
Ошибочный структурный отступ обоих тегов одного блочного элемента
считается одной ошибкой.
Ошибочный структурный отступ одного или обоих тегов блочного
элемента в структурной лесенке, при условии правильного построения
структуры дочерних элементов по отношению к нему, считается одной
ошибкой.
Одна и та же ошибка в блоке кода, повторяющемся в разных файлах,
считается одной ошибкой в шаблоне.
Что писать в замечаниях
Имя файла с обнаруженной ошибкой.
Номер строки или диапазон строк с ошибкой.
Укажите реальное и правильное количество структурных отступов.
Пояснение
Структурная лесенка на теговом каркасе — один из элементов
рекомендуемого стиля записи гипертекста. Структурная лесенка должна
повторять иерархическую структуру блочных элементов: каждый потомок
смещается вправо по отношению к телу своего родителя.
Ниже показан пример правильно размеченной структурной лесенки:
1|<HTML>
2|··<HEAD>
3|····<TITLE>Заголовок окна</TITLE>
4|··</HEAD>
5|··<BODY>
6|····<H1>Заголовок страницы</H1>
7|····<TABLE>
8|······<CAPTION>Заголовок таблицы</CAPTION>
9|······<TR>
10|········<TD>Первая ячейка в первой строке</TD>
11|········<TD>Вторая ячейка в первой строке</TD>
12|······</TR>
13|······<TR>
14|········<TD>Первая ячейка во второй строке</TD>
15|········<TD>Вторая ячейка во второй строке</TD>
16|······</TR>
17|····</TABLE>
18|····<P>
19|Пример кода с добавленным изображением
20|<IMG id="уникальность" class="для_типового_оформления"
21|·····src="pic/0711t.jpg"
22|·····alt="описание_отсутствующего_изображения"
23|·····title="при_необходимости_всплывающая_подсказка">.
24|У элемента <B>IMG</B> только <I>два обязательных</I>
атрибута:
25|&laquo;src&raquo;&nbsp;&mdash; ссылка на файл с
изображением и
26|&laquo;alt&raquo;&nbsp;&mdash;описание изображения.
27|····</P>
28|··</BODY>
29|</HTML>
Структурная лесенка
Лесенка строится с использованием структурных отступов, отмеченных в
примере красными точками. Один структурный отступ равен двум
пробелам (··).
Открывающий тег блочного элемента записывается с учётом структурного
отступа — сдвиг вправо на 2 пробела относительно уровня вложенности
его родительского элемента. В примере: строки 2→3, 5→6, 5→18 и другие.
Закрывающий тег блочного элемента записывается в другой строке строго
под открывающим тегом с тем же количеством структурных отступов. В
примере: строки 2–4, 5–28, 7–17, 18–27 и другие.
Текст и строчные элементы записываются согласно требованиям РУ в
отдельные строки между тегами. Запись всегда начинается от левого края
строки и имеет длину 80 символов. Не более. В примере строки 19–26.
Запись строчных элементов в примере:
тег элемента IMG строки 20–23
теги элемента I в строке 24
Многострочные блочные элементы
Согласно требованиям РУ строки текста со строчными элементами нужно
записывать от левого края, а теги с учётом структурных отступов в
отдельных строках перед и после строк с текстом. Так легче
определить наличие и правильность записи структурной лесенки. В
примере строки 18–27.
Блочные элементы с коротким текстом
Если полная длина элемента с его структурными отступами, открывающим
и закрывающим тегами и контентом, не превышает 80 символов, такой
элемент можно записывать и в одну строку. В примере строки 3, 6, 10 и
другие. Иначе он многострочный.
Тег с несколькими атрибутами
Когда полная длина открывающего тега со структурными отступами,
именем и атрибутами превышает 80 символов, часть атрибутов можно
записывать в отдельных строках.
Отступ таких атрибутов нужно выравнивать по началу атрибута,
следующего за именем тега. Открывающий тег строчного элемента с
атрибутами в несколько строк, удобнее записывать от края новой строки. В
примере: строки 21–23.
Зачем нужна лесенка
Записывать коды нужно так, чтобы смысл конструкций был максимально
понятен. Для такой рекомендации есть ряд веских причин.
Ясно написанный код легче отлаживать, то есть проводить обычный
цикл опытов «посмотрел результат в браузере — подправил
программу в текстовом редакторе». Ведь в понятно написанных кодах
легче найти соответствие экранного изображения командам, которые
это изображение строят.
Понятные коды легче сопровождать, то есть вносить в них изменения
по прошествии какого-то времени. Программисты по собственному
опыту знают, что через месяц после написания программы автор
начисто забывает, где, что и зачем он писал в её исходных строках.
Также всегда существует вероятность того, что ваш код будет
модифицировать кто-то другой.
Пользователь, просматривая документ, всегда может заглянуть на
вашу программистскую кухню. Для этого достаточно щёлкнуть
соответствующую позицию в контекстном меню браузера (в разных
браузерах эта позиция называется немного по-разному: «Просмотреть
источник», «Исходный код страницы», «Просмотр кода страницы»). И
все то, что вы считали интимным, предстанет перед
любопытствующим взором. Понятно, что о вас, как о программисте,
будет сложено соответствующее мнение.
Наконец, известно, что хорошо работают только понятно написанные
программы, внешний вид которых вызывает чувство эстетического
удовольствия.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Использование нестандартных элементов HTML
Величина штрафа
Минимальный штраф 0.1 назначается при наличии в коде HTML всех
файлов сайта одного элемента, не входящего в список стандартных HTML 5.
Максимальный штраф 0.5 назначается при наличии в коде HTML всех
файлов сайта от 5 и более элементов, не входящих в список стандартных
HTML 5.
Штраф из диапазона 0.2–0.4 назначается по усмотрению проверяющих для
промежуточных ситуаций по отношению к двум крайним, описанным
выше.
Исключения
Одна и та же ошибка в блоке кода, повторяющемся в разных файлах,
считается одной ошибкой в шаблоне.
Что писать в замечаниях
Имя файла с обнаруженной ошибкой.
Номер строки и имя найденного в этой строке элемента, не входящего
в список стандартных элементов HTML 5 (без атрибутов).
Предложение замены ошибочного элемента на подходящий
семантический элемент HTML 5.
Пояснение
Стандарт HTML 5 предоставил новые семантические элементы для
структурирования, группировки контента и разметки текстового
содержимого. Они улучшили структуру веб-страницы,
добавив смысловое значение контенту.
Семантика — раздел языкознания, изучающий лексические значения слов,
выражений и изменения этих значений в зависимости от контента.
Контент — информационно значимое наполнение ресурса: содержание книги,
статьи, сайта и т. п.
Основная задача семантических элементов HTML 5 — формирование,
структурирование и оформление контента. Согласно стандарту HTML 5 все
элементы HTML сгруппированы по похожим характеристикам в несколько
разделов ключевых категорий основного потока.
Можно познакомиться с текущим списком элементов HTML 5 на странице
сайта unionlik.ru и более не используйте элементы не входящие в него.
Устаревшие элементы
Устаревшими элементами, в спецификации HTML 5 являются:
APPLET и OBJECT (вместо них следует использовать элемент EMBED)
ACRONYM (вместо него следует использовать элемент ABBR)
BGSOUND (вместо него следует использовать элемент AUDIO)
DIR (вместо него следует использовать элемент UL)
FRAME, FRAMESET, NOFRAMES (вместо них следует использовать
элемент IFRAME)
ISINDEX (вместо него следует использовать связку
элементов FORM и INPUT)
LISTING и XMP (вместо них следует использовать
элементы PRE или CODE)
NEXTID
NOEMBED
PLAINTEXT (вместо него следует использовать элемент PRE)
STRIKE (вместо него следует использовать элемент S)
Вместо элементов
форматирования: BASEFONT, BIG, BLINK, CENTER, FONT, MARQUEE, MULTICO
L, NOBR, SPACER, TT и U, следует использовать CSS-свойства.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Использование нестандартных атрибутов HTML
Величина штрафа
Минимальный штраф 0.1 назначается, когда в коде HTML всех файлов сайта
в открывающем теге одного элемента имеется атрибут, не входящий в
список допустимых атрибутов HTML 5.
Максимальный штраф 0.5 назначается, когда в коде HTML всех файлов
сайта в открывающем теге не менее 5 элементов имеются «неправильные»
атрибуты.
Штраф из диапазона 0.2–0.4 назначается по усмотрению проверяющих для
промежуточных ситуаций по отношению к двум крайним, описанным
выше.
Исключения
Одна и та же ошибка в блоке кода, повторяющемся в разных файлах,
считается одной ошибкой в шаблоне.
Что писать в замечаниях
Имя файла с обнаруженной ошибкой.
Номер строки и тег элемента с ошибочным атрибутом.
Свойство CSS, созданное для замены устаревшего атрибута.
Пояснение
Причина, по которой W3C отменяет некоторые элементы и атрибуты —
продвижение стратегии отделения содержимого документа (HTML) от его
внешний вида (CSS) и поведения (JavaScript).
Такие атрибуты как align , bgcolor, border и другие атрибуты для
оформления внешнего вида исключены из стандарта HTML 5.
Неудобство таких атрибутов очевидно — они расположены в открывающем
теге элемента и действуют только на него. Если в других элементах
понадобится такое же оформление, атрибут придётся тиражировать во
многих местах кода.
Если же потребуется изменить добавленный в атрибуте цвет фона,
отказаться от назначенных границ или изменить выравнивание строк,
придётся выполнить серьёзную работу — редактировать множество
элементов.
Работа по изменению внешнего вида блоков веб-страницы сведётся к
минимуму, если вместо визуальных атрибутов применять аналогичные
свойства CSS, записанные во внешних стилевых правилах (в отдельном CSSфайле).
Достаточно в одном правиле изменить стиль выравнивания свойством textalign, цвет фона — свойством background-color, стиль границы —
свойством border и все страницы сайта сразу преобразятся.
На странице справочника webref.ru/html/attr/common смотрите список
универсальных атрибутов для большинства элементов, вошедшего в
стандарт. У некоторых элементов дополнительно имеются свои
индивидуальные атрибуты (см. webref.ru/html).
Устаревшие атрибуты
Устаревшими атрибутами можно считать все атрибуты которые можно
заменить CSS стилями. Прежде всего это относится к визуальному
представлению элементов на экране (цвет текста и фона, границы,
размеры, выравнивание…).
В нижеприведённой таблице дополнительно представлены специфические
устаревшие атрибуты по отдельным элементам.
Элемент Список устаревших атрибутов
A
charset, coords, shape, methods, name, rev, urn
AREA
nohref
BODY
alink, bgcolor, link, marginbottom, marginheight, marginleft, marginright,
margintop, marginwidth, text, vlink
BR
clear
EMBED
name
HEAD
profile
HTML
version
IFRAME
longdesc
IMG
border, longdesc, lowsrc, name, width, height
INPUT
usemap
LINK
charset, methods, rev, target, urn
META
scheme
OPTION
name
OBJECT
archive, classid, code, codebase, codetype, declare, standby
PARAM
type, valuetype
SCRIPT
event, for, language
TABLE
datapagesize
TD и TH
abbr, axis
Также запрещён атрибут datasrc для всех элементов.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Использование несемантических элементов HTML
Величина штрафа
Минимальный штраф 0.1 назначается, когда в коде HTML всех файлов сайта
присутствует один элемент DIV или SPAN.
Максимальный штраф 0.5 назначается, когда в коде HTML всех файлов
сайта не менее 5 элементов DIV или SPAN.
Штраф из диапазона 0.2–0.4 назначается по усмотрению проверяющих для
промежуточных ситуаций по отношению к двум крайним, описанным
выше.
Исключения
Отмеченную ошибку можно оспорить, предоставив аргументированные
объяснения, что по смыслу выделенного фрагмента семантического
элемента с подходящей ролью нет.
Одна и та же ошибка в блоке кода, повторяющемся в разных файлах,
считается одной ошибкой в шаблоне.
Что писать в замечаниях
Имя файла с ошибкой.
Номер строки и открывающий тег (без атрибутов) несемантического
элемента.
Комментарий с предложением подходящего семантического элемента.
Пояснение
При построении кода HTML рекомендуется использовать семантические (то
есть смысловые) элементы, вместо «безликих» элементов DIV и SPAN.
Стандарт HTML 5 предоставил новые элементы для структурирования,
группировки контента и разметки текстового содержимого. Семантические
элементы улучшили структуру веб-страницы, добавив смысловое
значение контенту.
Заканчивается эпоха универсального Интернета. На смену недавнему
Web 2.0 пришёл другой — Web 3.0, или же просто «Семантический Веб».
Semantic Web позволяет поисковым роботам
интерпретировать информацию в Вебе наравне с людьми. Искать не
только конкретные слова или словосочетания, не только ключевые фразы,
но и текст, интерпретируя его по контенту.
Разработчик, создавая семантическими элементами HTML веб-страницу,
предоставляет поисковым роботам смысловой анализ контента, а
голосовым браузерам — варианты интонаций чтения текста.
Несемантические элементы DIV и SPAN ничего не сообщают о роли их
контента и применяются только для группировки блочных и строчных
элементов с целью оформления и управления ими. Для других целей
использовать их не рекомендуется.
Здесь список и назначенные роли всех элементов HTML 5
А ниже в двух таблицах приводятся новые семантические элементы HTML 5
(отдельно блочные, отдельно строчные).
Новые семантические блочные элементы HTML 5
Элемент
Описание
HEADER
Группирует вводные и навигационные элементы. Может содержать
заголовки, оборачивать содержание раздела страницы, форму
поиска или логотип. В HTML-документе может содержаться
одновременно несколько элементов HEADER и они могут
располагаться в любой части страницы.
NAV
Предназначен для создания блока навигации веб-страницы или
всего веб-сайта, при этом не обязательно должен находиться
внутри HEADER. На странице может быть несколько элементов NAV.
Не заменяет элементы UL или OL, он просто их обрамляет. Не все
группы ссылок на странице должны быть обёрнуты NAV, этот
элемент предназначен в первую очередь для разделов, которые
состоят из главных навигационных блоков.
ARTICLE
Используется для группировки записей — публикаций, статей,
записей блога, комментариев. Представляет собой независимый
обособленный блок, предназначенный для многократного
использования, как правило, начинается с заголовка. Может
дублироваться на других страницах сайта и содержать внутри другие
элементы ARTICLE, которые по содержанию имеют близкое
отношение к содержанию внешней статьи. Если на странице
присутствует только одна статья с заголовком и текстовым
содержимым, она не нуждается в обёртке элементом ARTICLE.
SECTION
Элемент представляет собой универсальный раздел документа.
Группирует тематическое содержимое и обычно содержит заголовок.
Не является блоком-оберткой, для этих целей уместнее
использовать элемент DIV. В качестве содержимого может
выступать оглавление, разделы научных публикаций, программа
мероприятия. Домашняя страница сайта также может быть поделена
на секции — блок вводной информации, новости и контакты.
ASIDE
Группирует содержимое, связанное с окружающим его контентом
напрямую, но которое можно счесть отдельным (т. е., удаление этого
блока не повлияет на понимание основного содержимого). Чаще
всего элемент позиционируется как боковая колонка (как в книгах) и
включает в себя группу элементов: NAV, цифровые данные, цитаты,
рекламные блоки, архивные записи.
FOOTER
Представляет собой нижний колонтитул содержащей его секции или
корневого элемента. Обычно содержит информацию об авторе
статьи, данные о копирайте и т. д. Если используется как колонтитул
всей страницы, содержимое дополняется сведениями об авторских
правах, ссылками на условия использования,
контактную информацию, ссылками на связанное содержимое и т. п.
В одном веб-документе может быть несколько элементов FOOTER.
Как каждая страница, так и каждая статья может иметь свой
элемент FOOTER, более того, FOOTER можно поместить в
элемент BLOCKQUOTE, чтобы указать источник цитирования.
ADDRESS
Используется для определения контактной информации
автора/владельца документа или статьи. Для обозначения автора
документа элемент размещают внутри элемента BODY, для
отображения автора статьи — внутри элемента ARTICLE. По
умолчанию обычно отображается курсивом.
MAIN
Элемент MAIN представляет основное содержимое документа
(содержимое элемента BODY). Контент, находящийся внутри
элемента, должен быть уникальным и не повторяться во всех
документах сайта, таких как навигационные ссылки, информация о
копирайте, логотипы, формы поиска (в случае, если форма поиска
является основной функцией документа).
Элемент MAIN не может быть потомком таких элементов
как ARTICLE, ASIDE, FOOTER, HEADER или NAV.
FIGURE
Элемент FIGURE представляет автономный контент (необязательно
с заголовком), являющийся самостоятельным элементом основного
потока. Элемент может быть перемещён из основного содержимого
документа в боковую колонку или приложение, не затрагивая поток
документа. С помощью элемента FIGURE можно добавлять краткие
характеристики к иллюстрациям, фотографиям, диаграммам,
фрагментам кода и т. д..
FIGCAPTION Элемент FIGCAPTION — потомок элемента FIGURE. Содержит
заголовок или подпись. По ширине равен ширине элемента FIGURE,
высота по умолчанию равна 18px.
Описание заимствовано со страницы сайта html5book.ru
Новые семантические строчные элементы HTML 5
Элемент Описание
TIME
Определяет время (24 часа) или дату по григорианскому календарю с
возможным указанием времени и смещения часового пояса.
MARK
Текст, помещенный внутрь элемента MARK, выделяется (по умолчанию
жёлтым цветом). С помощью данного элемента можно отмечать важное
содержимое, а также ключевые слова.
BDI
Отделяет фрагмент текста, который должен быть изолирован от
остального текста для двунаправленного форматирования текста.
Используется для текстов, написанных одновременно на языках,
читающихся слева направо и справа налево.
Описание заимствовано со страницы сайта html5book.ru
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Строки длиннее 80 символов в кодах HTML и CSS
Величина штрафа
Минимальный штраф 0.1 назначается, когда в коде HTML и CSS всех файлов
сайта имеется одна строка, длина которой превышает 80 символов.
Максимальный штраф 0.5 назначается, когда в коде HTML и CSS всех файлов
сайта не менее 5 строк, длина которых превышает 80 символов.
Штраф из диапазона 0.2–0.4 назначается по усмотрению проверяющих для
промежуточных ситуаций по отношению к двум крайним, описанным
выше.
Исключения
Если в строке длиной 81 символ последний символ пробел, то эта запись
ошибкой не считается. Указать на лишний пробел можно, но баллы снимать
не нужно.
Если в строке имеется длинная ссылка или атрибут, которые при проверке
не удаётся сократить или разбить на фрагменты, то это ошибкой не
считается.
Одна и та же ошибка в блоке кода, повторяющемся в разных файлах,
считается одной ошибкой в шаблоне.
Что писать в замечаниях
Имя файла с обнаруженной ошибкой.
Номер строки и количество символов в ней.
Для ссылок и атрибутов копия собственного решения с сокращённой
длиной строки.
Пояснение
Если кода HTML содержит длинные строки (более 80 символов), то для их
просмотра приходится применять горизонтальную прокрутку окна
редактора, а это очень неудобно.
Проблема с длинными строками возникает также, если понадобится
распечатать код на бумаге. Длинные строки при печати разрушат структуру
кода.
Длинные атрибуты alt="..."
Иногда ограничение строки до 80 символов создаёт проблемы с длинным
описанием в атрибутах alt="...".
Если для изображения в атрибуте alt="..." требуется подробное описание,
то создайте элемент FIGURE, а IMG поместите в него вместе с
элементом FIGCAPTION в который можно помещать сколь угодно большой
текст, размеченный и блочными, и строчными элементами, а
в alt="..." оставьте короткую надпись.
<FIGURE>
<P><IMG src="image/thumb1.jpg" alt="Софийский
собор"></P>
<FIGCAPTION>
... Длинное описание Софийского собора ...
</FIGCAPTION>
</FIGURE>
Длинные атрибуты title="..."
Значение атрибута title по умолчанию должно быть записано в одну
строку. Но его можно принудительно разбить по строкам, уменьшая их
длину.
После этого обязательно проверьте на веб-странице поведение
всплывающей подсказки. Текст в ней тоже будет разбит на строки и в тех
же местах.
Вывод: длинные строки в title="..." старайтесь разбивать на строки по
смысловым фрагментам.
Длинные ссылки
Адреса страниц сайтов часто бывают очень длинными.
<A href="длинная ссылка">длинная ссылка на экране</A>
Длинную ссылку на экране можно заменить коротким названием статьи,
сайта или другим способом.
Однако в атрибуте href="..." ссылку приходится записывать одной строкой,
какой бы длинной она не получилась, иначе браузер может прочитать её с
ошибкой.
Отметим, что в Интернете имеется множество сервисов, укорачивающих
ссылки для атрибута href. Большинство таких сайтов на английском языке и
многие платные. Вот ряд популярных бесплатных сервисов на русском
языке:
Яндекс clck.ru
ВКонтакте vk.com/cc
Google goo-gl.ru
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Использование контекстных стилей CSS в коде HTML
Величина штрафа
Минимальный штраф 0.1 назначается, когда в коде HTML всех файлов сайта
имеется один элемент HTML с атрибутом style.
Максимальный штраф 0.5 назначается, когда в коде HTML всех файлов
сайта не менее 5 элементов с атрибутом style.
Штраф из диапазона 0.2–0.4 назначается по усмотрению проверяющих для
промежуточных ситуаций по отношению к двум крайним, описанным
выше.
Исключения
Одна и та же ошибка в блоке кода, повторяющемся в разных файлах,
считается одной ошибкой в шаблоне.
Что писать в замечаниях
Имя файла с обнаруженной ошибкой.
Номер строки и открывающий тег элемента вместе с присутствующим
атрибутом style.
Пояснение
Язык HTML определяет лишь структуру контента, отображаемого на вебстранице. Каждый элемент HTML может снабжаться набором свойств,
описанных на языке CSS, задающих внешний вид элемента на экране (цвет,
шрифт, положение блоков и т. п.) и его динамику. Все свойства элементов
по умолчанию настроены так, что они мало чем отличаются друг от друга.
Назначение языка CSS — не меняя семантическую роль элементов HTML
управлять внешним видом веб-страницы и поведением её отдельных
блоков.
Существуют три способа подключения стилевых описаний к HTML. Будем
называть их внешними, встроенными и контекстными стилями.
Внешние стили. Правила CSS располагаются в отдельном CSS-файле.
Стилевой файл должен быть связан с файлами HTML. Для этого в
головные части последних нужно добавить элементы LINK с указанием
имени стилевого файла.
Встроенные стили. Правила CSS располагаются в головной
части HTML-файла внутри элемента STYLE.
Контекстные стили. Правила CSS записываются в открывающем теге
элемента, в виде значения атрибута style.
Самое правильное — сохранять CSS-определения в отдельном файле с
расширением css. При этом за внешний вид сотен HTML-страниц отвечает
единственный файл. Изменения в этом файле окажут влияние сразу на все
страницы сайта, без просмотра их HTML-кода и редактирования.
Что касается контекстных стилей (записанных непосредственно в самих
элементах при помощи атрибута style), то их можно использовать для
тренировок, для изучения возможностей отдельных свойств и других
подобных действий. Но не более.
У контекстных стилей нет селекторов и их действие распространяется
только на текущий элемент. Если в коде HTML есть, например, элементы P,
которым нужно изменить цвет символов, то в атрибут style каждого из них
придётся записывать свойство color с совершенно одинаковым значением.
И самое главное. Контекстные стили не позволяют применять возможности
CSS3 в полном объёме. Поэтому использовать их в создании страниц не
рекомендуется.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Использование встроенных стилей CSS в коде HTML
Величина штрафа
Минимальный штраф 0.1 назначается, когда в HTML-коде всех файлов сайта
имеется один элемент STYLE.
Максимальный штраф 0.5 назначается, когда в коде HTML всех файлов
сайта имеется не менее 5 элементов STYLE.
Штраф из диапазона 0.2–0.4 назначается по усмотрению проверяющих для
промежуточных ситуаций по отношению к двум крайним, описанным
выше.
Исключения
При создании одностраничных сайтов использование элемента STYLE со
встроенными стилями допустимо и ошибкой не является.
Что писать в замечаниях
Имя файла с обнаруженной ошибкой.
Номер строки и открывающий тег элемента STYLE.
Пояснение
Язык HTML определяет лишь структуру контента, отображаемого на вебстранице. Каждый элемент HTML может снабжаться набором свойств,
описанных на языке CSS, задающих внешний вид элемента на экране (цвет,
шрифт, положение блоков и т. п.) и его динамику. Все свойства элементов
по умолчанию настроены так, что они мало чем отличаются друг от друга.
Назначение языка CSS — не меняя семантическую роль элементов HTML
управлять внешним видом веб-страницы и поведением её отдельных
блоков.
Существуют три способа подключения стилевых описаний к HTML. Будем
называть их внешними, встроенными и контекстными стилями.
Внешние стили. Правила CSS располагаются в отдельном CSS-файле.
Стилевой файл должен быть связан с файлами HTML. Для этого в
головные части последних нужно добавить элементы LINK с
указанием имени стилевого файла.
Встроенные стили. Правила CSS располагаются в головной
части HTML-файла внутри элемента STYLE.
Контекстные стили. Правила CSS записываются в открывающем теге
элемента, в виде значения атрибута style.
Самое правильное — сохранять CSS-определения в отдельном файле с
расширением css. При этом за внешний вид сотен HTML-страниц отвечает
единственный файл. Изменения в этом файле окажут влияние сразу на все
страницы сайта, без просмотра их HTML-кода и редактирования.
Контекстные стили (записанных непосредственно в самих элементах при
помощи атрибута style), можно использовать только для тренировок, для
изучения возможностей отдельных свойств и других подобных действий.
Встроенные стили (внутри элемента STYLE, расположенного в головной
части HTML) работают только для элементов внутри этого HTML-файла.
Поэтому их разумно использовать только при одностраничном сайте.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Нарушение правила записи селекторов и свойств в коде
CSS
Величина штрафа
Минимальный штраф 0.1 назначается, когда в коде CSS всех файлов сайта
имеется единичный один селектор или одно свойство имеет прописные
буквы.
Максимальный штраф 0.5 назначается, когда в коде CSS всех файлов сайта
не менее 5 селекторов и свойств имеют прописные буквы.
Штраф из диапазона 0.2–0.4 назначается по усмотрению проверяющих для
промежуточных ситуаций по отношению к двум крайним, описанным
выше.
Исключения
Ошибкой не являются в значении свойств:
Реальные имена шрифтов.
Имена подключаемых файлов, созданных не членами команды.
Запись шестнадцатеричного кода цвета.
Типовое значение свойства, содержащее прописные буквы.
Значение свойства (например, content: "..."), записанное автором в
виде обычного текста.
Что писать в замечаниях
Имя файла и номер строки с обнаруженной ошибкой.
Копия фрагмента, записанного с ошибкой.
Исправленная версия ошибочного фрагмента.
Пояснение
В коде CSS селекторы, свойства и бóльшая часть значений (см. Исключения)
записывается строчными (в нижнем регистре) буквами.
Структура CSS-описаний хорошо читается без дополнительных выделений
прописными буквами (в верхнем регистре).
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Отсутствие структурной лесенки в коде CSS
Величина штрафа
Минимальный штраф 0.1 назначается, когда в коде CSS всех файлов сайта
имеется одно нарушение структуры записи селектора, описания или
свойства.
Максимальный штраф 0.5 назначается, когда в коде CSS всех файлов сайта
не менее, чем в 5 строках кода имеется нарушение структуры записи
селектора, описания или свойства.
Штраф из диапазона 0.2–0.4 назначается по усмотрению проверяющих для
промежуточных ситуаций по отношению к двум крайним, описанным
выше.
Что писать в замечаниях
Имя файла с обнаруженной ошибкой.
Номер строки и селектор правила в котором обнаружена ошибка.
Скопируйте из описания правила только те строки, в которых
присутствует ошибка.
Правильное оформление структуры скопированного фрагмента.
Пояснение
Правило CSS состоит из двух элементов: селектор и описание.
Селектор всегда должен указывать на конкретный элемент HTML или
конкретную группу элементов HTML, которые должны подчиняться этому
правилу. Описание формируется парой фигурных скобок.
Вариант записи группового селектора
Некоторые CSS-правила могут одновременно относиться к разным
элементам или разным группам элементов. Чтобы не дублировать их у
одному правилу добавляют групповой селектор. Он состоит группы двух,
трёх и более отдельных селекторов. Каждый из них, кроме последнего,
должен быть записан в отдельной строке и заканчиваться запятой.
1|селектор_1, /* первый селектор */
2|селектор_2, /* второй селектор */
3|селектор_3 /* последний селектор */
Два варианта записи селекторов правил
Распространены 2 стиля записи CSS-правил.
Первый вариант
1|селектор /* селектор */
2|{ /* объявление описания */
3|··...
4|} /* конец описания и правила */
В первом варианте открывающую фигурную скобку, объявления описания,
записывают в начале строки после селектора. В гупповом правиле после
последнего селектора. Закрывающая — в начале строки, следующей за
последним свойством.
Второй вариант
1|селектор·{ /* селектор и объявление описания */
2|··...
3|} /* конец описания и правила */
Во втором варианте открывающую фигурную скобку описания записывает
через пробел после селектора. В гупповом правиле после последнего
селектора. Закрывающая — в начале строки, следующей за последним
свойством.
Каждое свойство (в любом варианте) записывается в отдельной строке со
структурным отступом в 2 пробела. Имя свойства заканчивается
двоеточием с пробелом, а значение — точкой с запятой.
Запись свойств
1|селектор
2|{ /* описание по первому варианту */
3|··имя_свойства:·значение_свойства; /* первое свойство
*/
4|··имя_свойства:·значение_свойства; /* второе свойство
*/
5|} /* конец описания и правила */
6|селектор·{ /* описание по второму варианту */
7|··имя_свойства:·значение_свойства; /* первое свойство
*/
8|··имя_свойства:·значение_свойства; /* второе свойство
*/
9|} /* конец описания и правила */
10|селектор·{·имя_свойства:·значение_свойства;·}
Красным цветом выделены обязательные символы и рекомендуемые
пробелы.
В примере стили записи правил CSS:
строки 1–5 демонстрируют первый стиль записи;
строки 6–9 демонстрируют второй стиль записи;
строка 10 особая запись в одну строку (допускается, если в правиле
записано единственное свойство).
Для записи свойств CSS выберите один из первых двух стилей записи
правил и используйте только его.
Для записи коротких правил с единственным свойством можно
использовать и третий однострочный стиль. В этом случае между
свойством и фигурными скобками нужно добавлять пробелы по одному с
каждой стороны.
Пример записи правила в одну строку
a·{·color:·blue;·}
a:hover·{·color:·red;·}
a:visited·{·color:·purple;·}
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Нарушение единого стиля записи правил CSS
Величина штрафа
Штраф 0.1 назначается, когда в CSS-кодах сайта имеются нарушения стиля
записи правил CSS.
Что писать в замечаниях
Имя файла с обнаруженной ошибкой.
Диапазон строк с обнаруженным нарушением.
Пояснение
Распространены 2 стиля записи описания.
Первый вариант
1|селектор /* селектор */
2|{ /* описание */
3| ...
4|} /* конец описания и правила */
В первом варианте фигурные скобки, содержащие описание, записываются
в первой позиции отдельных строк.
Второй вариант
1|селектор·{ /* селектор и объявление описания */
2| ...
3|} /* конец описания и правила */
Во втором варианте открывающая фигурная скобка описания записывается
через пробел после селектора. Закрывающая — в начале строки, следующей
за описанием.
Каждое свойство (в любом варианте) записывается в отдельной строке со
структурным отступом в 2 пробела. Имя свойства заканчивается
двоеточием с пробелом, а значение — точкой с запятой.
Допускается запись свойств в любом варианте, но только в одном.
Смешение стилей записи будет мешать работе с кодом, и является дурным
тоном в программировании.
Для записи коротких правил с единственным свойством можно
использовать однострочный стиль (в дополнение к любому из двух
описанных вариантов). В этом случае между свойством и фигурными
скобками нужно добавлять пробелы по одному с каждой стороны.
Пример записи правила в одну строку
a·{·color:·blue;·}
a:hover·{·color:·red;·}
a:visited·{·color:·purple;·}
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Неверные элементы
Величина штрафа
Минимальный штраф 0.1 назначается, когда в коде HTML всех файлов сайта
имеется одна ошибка в имени тега элемента HTML.
Максимальный штраф 0.5 назначается, когда в коде HTML всех файлов
сайта не менее 5 ошибок в именах тегов элементов HTML.
Штраф из диапазона 0.2–0.4 назначается по усмотрению проверяющих для
промежуточных ситуаций по отношению к двум крайним, описанным
выше.
Исключения
Одна и та же ошибка в блоке кода, повторяющемся в разных файлах,
считается одной ошибкой в шаблоне.
Что писать в замечаниях
Имя файла с обнаруженной ошибкой.
Номер строки и тег с ошибочным названием (без атрибутов).
Рекомендации по исправлению ошибки.
Пояснение
Неверные названия элементов приводят к тому, что эти элементы не будут
работать в коде.
Аварийных сообщений браузер не выдаёт.
При проверке гипертекста нельзя полагаться на браузер, равно как и
только на собственное чтение тестируемого кода. Необходимо проверять
код специальной программой валидатором (например, CSE HTML Validator
Lite).
Дополнительно можно рекомендовать следующее. Размечая контент
элементами HTML, задавайте им фоновый цвет. Он поможет визуально
понять, формируется страница «как задумано» или «как придётся». В
дальнейшей работе фоновый цвет элементов можно удалить.
Пример ошибки
Код с ошибками (ошибка в имени элемента BLOCKQUOTE и в имени
закрывающего тега BODY):
<BODY>
<BLOKQUOTE>
...
</BLOKQUOTE>
</BODI>
Правильный код:
<BODY>
<BLOCKQUOTE>
...
</BLOCKQUOTE>
</BODY>
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Неверные атрибуты
Величина штрафа
Минимальный штраф 0.1 назначается, когда в коде HTML всех файлов сайта
имеется один тег с ошибочным именем атрибута или атрибут с ошибочным
значением.
Максимальный штраф 0.5 назначается, когда в коде HTML всех файлов
сайта не менее 5 тегов с обозначенными выше ошибками.
Штраф из диапазона 0.2–0.4 назначается по усмотрению проверяющих для
промежуточных ситуаций по отношению к двум крайним, описанным
выше.
Исключения
Не считать ошибкой нестандартный атрибут, придуманный разработчиком
для использования в коде скрипта.
Одна и та же ошибка в блоке кода, повторяющемся в разных файлах,
считается одной ошибкой в шаблоне.
Что писать в замечаниях
Имя файла с обнаруженной ошибкой.
Номер строки и тег с записью ошибочного атрибута.
Рекомендации по исправлению ошибки.
Пояснение
Атрибуты записываются в открывающем теге и расширяют возможности
элемента HTML. Например, атрибут onclick описывает реакцию на
событие щелчок главной кнопкой мыши (см. Дизайн > Отсутствие
навигационных элементов... > Как можно
кодировать ссылку вверх).
Атрибуты могут уточнять свойства элемента HTML.
Например, lang указывает на конкретный язык контента текущего элемента
(см. Кодирование > Отсутствие... атрибута "lang").
Наряду с атрибутами, характерными для конкретных элементов,
существует ряд атрибутов, который можно добавлять к любым элементам,
поэтому такие атрибуты
называются глобальными (accesskey, class, contenteditable, contextmenu, dir, dragga
ble, dropzone, hidden, id, itemid, itemprop, itemref, itemscope, itemtype, lang, spellcheck, styl
e, tabindex, title).
Значение атрибута рекомендуется записывать в кавычках (двойных или
одинарных, но лучше однотипно).
Атрибутов не так много, их не трудно запомнить, но поначалу стоит
заглядывать в справочник, чтобы не допустить ошибок в записи имени
атрибута или выбора его значения.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Неправильное использование семантических элементов
HTML
Величина штрафа
Минимальный штраф 0.1 назначается, когда в коде HTML всех файлов сайта
у одного элемента HTML роль не соответствует смыслу контента,
помещённого в него.
Максимальный штраф 0.5 назначается, когда в коде HTML всех файлов
сайта обнаружено не менее пяти обозначенных ошибок.
Штраф из диапазона 0.2–0.4 назначается по усмотрению проверяющих для
промежуточных ситуаций по отношению к двум крайним, описанным
выше.
Исключения
Одна и та же ошибка в блоке кода, повторяющемся в разных файлах,
считается одной ошибкой в шаблоне.
Что писать в замечаниях
Имя файла с обнаруженной ошибкой.
Номер строки с ошибкой и открывающий тег элемента HTML (без
атрибутов), использованного не по назначению.
Рекомендации по исправлению ошибки.
Пояснение
Современное состояние гипертекстового Интернета (Web 3.0) не зря
называют «Семантический Веб». Правильно составленные страницы
позволяют поисковым роботам интерпретировать информацию на них по
смыслу, почти так, как это делают люди.
В результате страницы сайтов с кодом оформленным правильно (согласно
стандартам HTML 5) чаще попадают на первые страницы выдачи по
поисковым запросам. А неправильные — на далёкие места, куда никто
никогда не заглядывает.
Страницы составлены «правильно», если гипертекстовая разметка
отражает иерархическую структуру документа и правильно использует
семантические элементы HTML. Например, навигация погружается в
блок NAV, статья — в блок ARTICLE, боковая вспомогательная колонка — в
блок ASIDE, «подвал» — в блок FOOTER и так далее.
Если разработчик использует семантические элементы HTML не по их
прямому назначению, то полученный гипертекст нельзя назвать «умным».
Разработчик создаёт проблемы сетевым роботам и самому себе (или
коллегам) при сопровождения сайта.
Будем считать такое кодирование серьёзной ошибкой.
В качестве показательного, можно привести пример неверного
использования элементов Hn (заголовки). Эти элементы задают
иерархическую структуру содержания.
Элементом H1 нужно выделять заголовки первого уровня (этот элемент
может быть только один на странице — её название), элементом H2 —
заголовки второго уровня и так далее:
Использовать заголовки нужно очень аккуратно в соответствии с их
иерархическими уровнями в структуре документа. Не следует использовать
элементы Hn для выделения обычного текста. Они применяются только
для заголовков.
Специальные сервисные программы Интернета автоматически составляют
оглавление гипертекстового документа. Делают они это, в том числе, при
помощи сбора информации из тегов Hn. Если заголовочные элементы
обрамляют обычные тексты или не отражают иерархическую структуру
документа, оглавление будет построено неверно.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Нарушение вложенности, порядка следования, другие
ошибки
Величина штрафа
Минимальный штраф 0.1 назначается, когда в коде HTML всех файлов сайта
найдена только одна из описанных на этой странице погрешностей.
Максимальный штраф 0.5 назначается, когда в коде HTML всех файлов
сайта обнаружено не менее 5 обозначенных погрешностей.
Штраф из диапазона 0.2–0.4 назначается по усмотрению проверяющих для
промежуточных ситуаций по отношению к двум крайним, описанным
выше.
Исключения
Одна и та же ошибка в блоке кода, повторяющемся в разных файлах,
считается одной ошибкой в шаблоне.
Что писать в замечаниях
Имя файла с обнаруженной ошибкой.
Диапазон строк содержащих ошибку и её описание.
Рекомендации по исправлению ошибки.
Пояснение
Ниже отмечаются несколько характерных ошибок.
Однако перечислить все ошибки не представляется возможным! Ошибки,
обнаруженные в коде, но не описанные в АРМ, штрафуются по этому же
пункту как другие ошибки.
Нарушение вложенности элементов
Пример ошибки:
<P>
<STRONG><A
href="http://robotlandia.ru">ссылка</STRONG></A>
</P>
Правильный код:
<P>
<STRONG><A
href="http://robotlandia.ru">ссылка</A></STRONG>
</P>
Нарушение порядка следования элементов
Например, отображающие элементы вне блока BODY:
<H1>Заголовок страницы</H1>
<BODY>
...
</BODY>
Или элемент TD вне блока TR:
<TABLE>
<TD>Так нельзя!</TD>
<TR>
<TD>Клетка</TD>
</TR>
</TABLE>
Или элемент LI вне блока или блока OL:
<LI>Так нельзя!
<OL>
<LI>...
</OL>
Или множество других запрещённых вариантов.
Строчные не могут содержать блочные
Пример ошибки:
<A href="http://robotlandia.ru"><H2>ссылка</H2></A>
Правильный код:
<H2><A href="http://robotlandia.ru">ссылка</A></H2>
Внутри P не должно быть блочных
Блочные элементы могут содержать блочные и строчные элементы. Однако
блочный элемент P является исключением: внутри него можно записывать
только строчные элементы.
Пример ошибки:
<P>
<OL>
<LI>...
<LI>...
<LI>...
</OL>
</P>
Правильный код:
<OL>
<LI>...
<P>
...
</P>
<P>
...
</P>
<LI>...
<LI>...
</OL>
Отсутствие обязательных закрывающих тегов
Довольно часто при кодировании таблицы пропускается тег </TABLE>. При
этом одни браузеры всё равно показывают таблицу на экране, другие
таблицу не строят.
Пример ошибки:
<BODY>
<TABLE>
<TR>
<TD>1 клетка</TD>
<TD>2 клетка</TD>
<TD>3 клетка</TD>
</TR>
</BODY>
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Ошибки в записи правил CSS
Величина штрафа
Минимальный штраф 0.1 назначается, когда в кодах CSS сайта обнаружена
одна ошибка (не описанная в других разделах АРМ).
Максимальный штраф 0.5 назначается, когда в кодах CSS сайта обнаружено
не менее 5 ошибок (не описанная в других разделах АРМ).
Штраф из диапазона 0.2–0.4 назначается по усмотрению проверяющих для
промежуточных ситуаций по отношению к двум крайним, описанным
выше.
Что писать в замечаниях
Имя файла с обнаруженной ошибкой.
Диапазон строк содержащих ошибку и её описание.
Рекомендации по исправлению ошибки.
Пояснение
Возможны ошибки в записи имён или значений свойств CSS, нарушения
правил записи правил.
Ошибочное правило не будет выполнено. Создавая правило CSS
внимательно проверяйте его действие на странице. Записали новое
свойство — сохраните файл, переключитесь в браузер и обновите вебстраницу. Если ожидаемых изменений не произошло, то возвращайтесь к
правилу и проверьте правильность его записи.
Примеры ошибок
1. Нет закрывающей фигурной скобки:
.myclass { margin-top: 10px;
2. Забыта кавычка:
<P class="primer>Забыта кавычка</P>
3. Неправильное написание служебных слов:
bagraund-color: #666;
4. Не обозначены пиксели (обозначаются как px):
.block { width: 720; }
5. Перепутаны id селекторы и классы:
6. #primer { ... }
7. ...
<P class="primer">Привет</P>
8. Неправильно указан селектор класса:
9. my-сlass /* Не работает. Браузер будет искать ТЕГ my-class */
10. {
11.
...
}
12.
Неправильный контекстный селектор.
Предположим, в HTML записано:
<P class="nav"><A href="index.html">Главная</A></P>
И нужно задать свойства для ссылки при наведении мыши.
/* Неверно. Этот селектор означает ссылку с классом nav */
a.nav:hover {
}
/* Неверно. Этот селектор означает абзац с классом nav,
лежащий внутри ссылки (чего быть не может!)*/
a:hover p.nav {
}
/* Неверно. Ошибка в пробеле между :hover и а */
p.nav a :hover {
}
/* Правильная запись селектора */
p.nav a:hover {
13.
}
Неправильно указаны значения свойств:
14. .wrong
15. {
16.
font-family: Times New Roman; /* Шрифт должен быть в кавычках
*/
17.
color: 000;
/* Нет символа # перед кодом цвета */
18.
font-size: 12 px;
/* Пробел перед единицей измерения */
19.
line-height: 1,5;
/* Запятая вместо точки
*/
20.
margin: 0
/* Нет ; в конце строки
*/
21.
padding: 10px, 20px, 30px;
/* Перечисление через запятую
*/
}
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Ошибка регистра в именах папок и файлов
Величина штрафа
Минимальный штраф 0.1 назначается при наличии одной ссылки на файл с
ошибкой в регистре.
Максимальный штраф 0.5 назначается при наличии не менее
5 обозначенных ошибок.
Штраф из диапазона 0.2–0.4 назначается по усмотрению проверяющих для
промежуточных ситуаций по отношению к двум крайним, описанным
выше.
Исключения
Одна и та же ошибка в блоке кода, повторяющемся в разных файлах,
считается одной ошибкой в шаблоне.
Что писать в замечаниях
Имя файла с обнаруженной ошибкой.
Номер строки и ошибочная ссылка на файл.
Исправленная ссылка.
Пояснение
Большинство серверов сети работает под управлением операционной
системы Unix или Linux. В этих системах (в отличие от Windows) регистр
символов в именах файлов и папок имеет значение.
Если ссылка на файл с картинкой в теге IMG имеет вид "pic/pic.gif", а
реальный путь к файлу на диске есть "Pic/pic.gif", то под Windows ссылка
работать будет, но после переноса сайта на сервер, работающий под
управлением Unix, пользователь картинки не увидит.
Ещё пример. Если папка со стилевыми файлами названа Css, а
элемент LINK записан с атрибутом href="css/main.css", то в ОС Unix или Linux
файл со стилями к веб-странице подключен не будет.
Тоже относится и к любым другим указаниям на файлы, которые браузер
использует для отображения документа (гипертекстовые переходы, flashобъекты, музыкальные файлы, файлы со скриптами…).
Рекомендации
Чтобы не было проблем с именами файлов и папок, используйте следующие
рекомендации.
Не используйте русские буквы, пробелы и спецсимволы (кроме знака
подчёркивания вместо пробела).
Выбирайте осмысленное слово, подходящее для имени, ищите его в
русско-английском словаре или в переводчике. Таким образом будете
«подтягивать» свой английский. Это немаловажно для человека,
профессионально работающего с компьютером.
Имена всех папок и файлов (htm, gif, jpg, txt, js, css и другие)
записывайте в одном регистре (например, нижнем) латинскими
буквами.
Расширение имени файла записывайте тремя символами.
Например: jpg, а не jpeg; htm, а не html и т. д.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Кодировка файла не UTF-8
Величина штрафа
Минимальный штраф 0.1 назначается при наличии среди всех текстовых
файлов сайта (htm, css, js…) одного сохранённого не в кодировке UTF-8 или с
указанием в элементе META (для файлов htm) кодировки, отличной от UTF-8.
Максимальный штраф 0.5 назначается при наличии 5 и более
обозначенных выше погрешностей.
Штраф из диапазона 0.2–0.4 назначается по усмотрению проверяющих для
промежуточных ситуаций по отношению к двум крайним, описанным
выше.
Что писать в замечаниях
Имя файла с обнаруженной ошибкой.
Описание типа ошибки: кодировка символов в файле не UTF-8 или (и)
прописана не та кодировка в теге META (для htm-файлов).
Рекомендации по исправлению ошибки.
Пояснение
На сегодняшний день международным стандартом в WEB стала
кодировка UTF-8. Она использует переменное количество байт (от 1 до 4),
что позволяет компактно хранить и передавать символы почти всех
национальных алфавитов. Кроме того, в ней содержатся смайлики, эмодзи,
знаки валют и другие специальные символы.
Для каждого текстового файла сайта проверяем реальную кодировку
символов в этом файле. Она должна быть UTF-8.
Для каждого htm-файла дополнительно проверяем указание кодировки в
теге META. Правильная запись должна быть такой: <META charset="utf-8">
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Отсутствие в элементе HTML атрибута lang
Величина штрафа
Минимальный штраф 0.1 назначается, когда ошибка обнаружена в коде
только одной страницы.
Максимальный штраф 0.5 назначается, когда ошибка встречается в кодах 5
или более страниц.
Штраф из диапазона 0.2–0.4 назначается по усмотрению проверяющих для
промежуточных ситуаций по отношению к двум крайним, описанным
выше.
Что писать в замечаниях
Имя файла с обнаруженной ошибкой.
Пояснение
Браузеры умеют проверять тексты и подчёркивать слова с ошибками,
несмотря на то, что веб-страницы создаются по всему миру на разных
языках. Но для того, чтобы браузер корректно выполнял проверку текста,
ему нужно явно указывать язык контента веб-страницы, добавляя
атрибут lang в элемент HTML.
Кроме того, в типографике каждой страны имеются некоторые различия,
которые браузер может правильно учитывать, если разработчик не забыл
указать язык при помощи атрибута lang.
Например, в разных странах по-разному выглядят кавычки, которые, как
известно, бывают двух видов:
внешние для выделения прямой речи, цитат, названий и т. п.;
внутренние для оформления кавычек внутри кавычек.
Несколько примеров:
Атрибут lang Язык
Принятые кавычки
lang="en"
Английский
“I like ‘Web Design Course’”
lang="fr"
Французский «J'aime le cours ‹de conception Web›»
lang="de"
Немецкий
„Ich mag den ‚Webdesign-Kurs‘“
lang="ru"
Русский
«Мне нравится курс „Веб-конструирование“»
Если в атрибуте lang элемента HTML явно указан язык, браузер будет
учитывать особенности орфографической проверки и типографики этого
языка.
Атрибут lang можно добавлять и к другим элементам, если в них
присутствует текст на языке, отличным от основного языка страницы.
Пример указания языка контента
2|<HTML lang="ru"> <!-- объявление языка веб-страницы -->
...
72|······<BLOCKQUOTE lang="en"> <!-- объявление языка
цитаты -->
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Отсутствие элемента META с указанием кодировки
символов документа
Величина штрафа
Минимальный штраф 0.1 назначается, когда ошибка обнаружена в коде
только одной страницы.
Максимальный штраф 0.5 назначается, когда ошибка встречается в кодах 5
или более страниц.
Штраф из диапазона 0.2–0.4 назначается по усмотрению проверяющих для
промежуточных ситуаций по отношению к двум крайним, описанным
выше.
Что писать в замечаниях
Имя файла с обнаруженной ошибкой.
Пояснение
На сегодняшний день международным стандартом в WEB стала
кодировка UTF-8. Она использует переменное количество байт (от 1 до 4),
что позволяет компактно хранить и передавать символы почти всех
национальных алфавитов. Кроме того, в ней содержатся смайлики, эмодзи,
знаки валют и другие специальные символы.
По умолчанию браузеры ожидают символы именно в кодировке UTF-8.
Разработчик по различным причинам мог сохранить содержимое файла в
другой кодировке, например, windows-1251. Если он не указал эту кодировку в
элементе META, на экране вместо нормального текста отобразятся
букозявочки и кракозябры.
Рекомендуется:
Сохранять файлы только в кодировке UTF-8.
В блок HEAD добавлять следующий элемент META:
<META charset="utf-8">
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Отсутствие элемента TITLE или его неверное содержимое
Величина штрафа
Минимальный штраф 0.1 назначается, когда ошибка обнаружена в коде
только одной страницы.
Максимальный штраф 0.5 назначается, когда ошибка встречается в кодах 5
или более страниц.
Штраф из диапазона 0.2–0.4 назначается по усмотрению проверяющих для
промежуточных ситуаций по отношению к двум крайним, описанным
выше.
Что писать в замечаниях
Имя файла с обнаруженной ошибкой.
Верное содержимое элемента TITLE
Пояснение
Элемент TITLE (размещаемый в блоке HEAD) содержит текст, который
отображается на кнопке (или миниатюре) окна в Панели задач, на
заголовке окна или на корешке вкладки среди других открытых окон в
браузере. На кнопках, окнах и вкладках пользователь видит названия
страниц и может быстро выбрать нужную.
Поэтому наличие элемента TITLE важно для пользователя при условии,
что его текст повторяет заголовок страницы.
Пример
В коде страницы, которую вы сейчас читаете, записано:
<HEAD>
<TITLE>Отсутствие элемента TITLE или его неверное содержимое</TITLE>
</HEAD>
Поэтому мы видим этот текст на заголовке окна браузера:
Кроме того, начальная часть этого текста отображается на миниатюре окна
при наведении мышкой на значок открытого браузера в Панели задач:
Если в элементе TITLE записывать заголовок страницы (настоятельно
рекомендуется), название окна будет помогать пользователю
ориентироваться в многообразии открытых окон на Рабочем столе.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Отсуствие закрывающих тегов у элементов с парными
тегами
Величина штрафа
Максимальный штраф 0.1 назначается, когда в коде HTML всех файлов
сайта у одного элемента отсутствует закрывающий тег, описанный в
стандарте.
Максимальный штраф 0.5 назначается, когда в коде HTML всех файлов
сайта не менее, чем у 5 элементов отсутствуют закрывающие теги,
описанные в стандарте.
Штраф из диапазона 0.2–0.4 назначается по усмотрению проверяющих для
промежуточных ситуаций по отношению к двум крайним, описанным
выше.
Исключения
Одна и та же ошибка в блоке кода, повторяющемся в разных файлах,
считается одной ошибкой в шаблоне.
Что писать в замечаниях
Имя файла с обнаруженной ошибкой.
Номер строки и открывающий тег (без атрибутов) ошибочного
элемента.
Пояснение
В языке HTML 5 большинство элементов имеют парные теги для их записи
в коде. В стандарте позволительно не указывать не только некоторые
закрывающие теги отдельных элементов, но и сами элементы. Но это
только при определённых условиях.
Начальный тег <HTML> может быть опущен, если сразу за тегом не идёт
комментарий…
Закрывающий тег </HTML> также может быть опущен, если перед ним нет
комментария…
Начальный тег <HEAD> может быть опущен, если элемент HEAD пуст, или если сразу
после него идёт другой HTML-элемент…
Закрывающий тег </P> может быть опущен, если за содержимым элемента <P> сразу
следует любой из ниже перечисленных элементов: ADDRESS, ARTICLE, ASIDE,
BLOCKQUOTE, DIR, DIV, DL, FIELDSET, FOOTER, FORM, H1, H2, H3,
H4, H5,
H6, HEADER, HGROUP, HR, MENU, NAV, OL, P, PRE, SECTION, TABLE,
UL, или если больше нет содержания в элементе, в который вложен элемент <P>.
…(описание особенностей других элементов) …
Цитата из статьи
Необязательные теги HTML5-разметки
Возникает выбор:
1. Не опускать теги служебных структурных элементов и всегда
записывать закрывающие теги у элементов с парными тегами.
2. Не писать некоторые элементы и закрывающие теги, но выучить все
ограничения, при которых это разрешено.
Первый путь проще и продуктивнее, именно поэтому он и рекомендуется.
Следование этой рекомендации облегчит контроль за построением кода
HTML и предотвратит от случайных ошибок.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
В правилах CSS отсутствуют обязательные базовые
свойства
Величина штрафа
Минимальный штраф 0.1 назначается при отсутствии в коде CSS одного из
обязательных свойств.
Максимальный штраф 0.5 назначается при отсутствии в коде CSS не менее 5
обязательных свойств.
Штраф из диапазона 0.2–0.4 назначается по усмотрению проверяющих для
промежуточных ситуаций по отношению к двум крайним, описанным
выше.
Что писать в замечаниях
Перечислить каждое отсутствующее свойство из числа обязательных.
Пояснение
К обязательным относим следующие базовые свойства (определяемые для
основного содержимого страниц):
Цвет фона
Цвет символов
Шрифт
Размер шрифта
Цвет неотработанных ссылок (по ним не «ходили»)
Цвет ссылок под курсором
Цвет активных ссылок (состояние между нажатием и отпусканием
клавиши мыши)
Цвет отработанных ссылок (по ним «ходили»)
Пример записи обязательных базовых свойств
1|body { /* правило для всей
2|··background-color: white;
3|··color: black;
4|··font-family: sans-serif;
5|··font-size: 18px;
"1em") */
6|}
7|a:link·{·color: blue;·}
*/
8|a:hover·{·color: red;·}
*/
веб-страницы */
/* цвет фона */
/* цвет символов */
/* шрифт */
/* размер шрифта (значение
/* неотработанная ссылка
/* ссылка под курсором
9|a:active·{·color: ff7f00;·}
/* активная ссылка
*/
10|a:visited·{·color: purple;·} /* отработанная ссылка
*/
Если базовые свойства не заданы, браузер будет применять свойства по
умолчанию (в каждом браузере умолчания могут быть свои собственные).
Кроме того, посетитель сайта может настроить браузер по-своему.
В итоге, если базовые свойства не заданы, страница будет выглядеть совсем
не так, как планировал разработчик.
Подробнее о названных выше базовых свойствах.
Базовый размер шрифта
Базовый размер шрифта определяет величину относительной единицы
измерения под названием em. Эту единицу можно применять ко всем
элементам на странице для установки размеров по отношению к базовому.
Меняем значение в базовом размере шрифта, меняются размеры всех
частей элементов, заданные в эмах.
Если у родителя (например, базового элемента BODY) font-size задан как 20px,
и мы применяем font-size: 0.8em к дочернему элементу (например, ASIDE),
то в этом дочернем элементе font-size будет соответствовать 16px.
Проценты в размере шрифта напрямую связаны с его базовым размером по
правилу: 1em = 100%.
Цвет фона и текста
Свойство background-color для BODY нужно записывать даже в том случае, если
используется фоновая картинка.
Для этой рекомендации есть две причины:
В браузере графика может быть отключена, и фоновую картинку
пользователь не увидит.
Фоновая картинка «приходит» по сети после того, как страница
построена и заменяет фоновый цвет, заданный свойством backgroundcolor. Чтобы такая перемена не «ударила» по глазам пользователя,
нужно подбирать цвет background-color близким к доминирующему
цвету фоновой картинки.
«Удар» по глазам пользователя:
Плавный переход от гладкого фона к фактурному:
Цвета ссылок
Ссылки записываются в элементах A. Для разных состояний ссылок нужно
иметь разные правила.
Состояние ссылки определяется при помощи псевдоклассов. Псевдоклассы
привязаны к обычным селекторам и начинаются с двоеточия.
Селектор Пояснение
a:link
Селектор ссылки, которая ещё не посещалась пользователем, и над
которой нет курсора мыши.
a:hover
Селектор срабатывает, когда пользователь наводит курсор мыши на
ссылку. Псевдокласс hover можно применять к любым элементам (не
только ссылкам).
a:active
Селектор срабатывает для активного элемента. Это такое состояние
элемента, которое происходит между нажатием и отпусканием клавиши
мыши. В основном применяется к ссылкам и кнопкам (но не только).
a:visited
Селектор срабатывает, если пользователь уже выполнял переход по
ссылке.
Пример записи свойств ссылок в разных состояниях
a
a:link
a:visited
a:hover
a:active
{
{
{
{
{
text-decoration: none; }
color: blue; }
color: purple; }
color: red; text-decoration:underline; }
color: red; }
Если свойства для ссылок не заданы, браузер будет использовать значения
цветов по умолчанию. Как и в случае с цветами текста и фона, не стоит
выпускать из-под контроля эти важные параметры визуального образа
страницы.
Рекомендации по выбору цветов для ссылок
Цвет неотработанной ссылки должен быть заметным, контрастным по
отношению к остальным цветам страницы. Ведь мы хотим привлечь к
ссылке внимание пользователя. Хотим сделать так, чтобы его рука сама
потянулась к мышке, и он сделал то физическое усилие, на которое
рассчитывал проектировщик страницы.
Посещенные (отработанные) ссылки должны иметь существенно меньшую
напряженность окраски. Они должны говорить об окончании своей рабочей
смены и отдыхать. Не надо на них по-прежнему фиксировать взгляд
пользователя.
Цвет ссылки, сразу после щелчка, должен быть ещё более активным, чем
цвет неотработанной ссылки. Внимание! Я (ссылка) приступила к работе.
Документ загружается и скоро появится на вашем экране. Потерпите
немного!
В большинстве браузеров цвета ссылок по умолчанию такие:
синий — цвет неотработанной ссылки;
красный — цвет активной ссылки;
пурпурный — цвет отработанной ссылки.
И эти цвета выбраны, конечно, не случайно.
Дополнительные рекомендации
Ссылки — это особый элемент гипертекстового жанра. Ссылок как
активных элементов нет ни в книге, ни в газете. Традиционно ссылки
выделяются цветом и подчёркиванием. В силу этого:
Не подчёркивайте другие элементы на экране. Пользователь будет
пытаться выполнить «клик» на подчёркнутом и будет огорчаться, что
ничего не происходит.
По той же причине, старайтесь не выделять текстовые элементы тем
же цветом, что и ссылки. Вообще, избегайте выделения цветом. На
странице и так есть цветные пятна — ссылки. Дополнительные
цветные вкрапления приведут к пестроте. Выделять можно, используя
жирность или курсив. Заголовки выделяются специальными
командами Hn (жирность и размер).
Так как ссылка — это уже выделение текста, то:
Не записывайте как ссылку слишком большой текст. Ведь известно,
что выделить много, значит, не выделить ничего. Например, не надо
делать ссылкой фразу «посмотрите, как выглядит этот рисунок».
Лучше ссылкой сделать только одно слово: «посмотрите, как выглядит
этот рисунок».
Не выделяйте текст под ссылкой дополнительно (курсивом, размером,
жирностью). Одного выделения уже достаточно, а ссылка имеет их
целых два — цвет и подчёркивание (ужасная ссылка).
Не располагайте несколько ссылок слишком близко друг к другу.
Пользователь может подумать, что видит одну большую ссылку
(сколько здесь ссылок?).
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Не указаны размеры картинок для IMG
Величина штрафа
Минимальный штраф 0.1 назначается за одну картинку, для которой не
указаны размеры.
Максимальный штраф 0.5 назначается за пять и более ошибок.
Штраф из диапазона 0.2–0.4 назначается по усмотрению проверяющих для
промежуточных ситуаций по отношению к двум крайним, описанным
выше.
Исключения
Не считать ошибкой отсутствие размеров у фоновых картинок.
Одна и та же ошибка в блоке кода, повторяющемся в разных файлах,
считается одной ошибкой в шаблоне.
Пояснение
Размеры картинок задаём при помощи CSS-свойств width и height в
отдельном CSS-файле.
CSS-cвойства width и height задают размеры прямоугольника, в который
браузер выводит картинку. Эти размеры должны совпадать с реальными
размерами картинки. Если совпадения нет, браузер растягивает или
сжимает изображение так, чтобы оно полностью заполнило отведенное для
него место. В итоге картинка выводится с неприятными искажениями.
«Зачем указывать размеры?» — думает начинающий дизайнер. — «Неужели
браузер такой глупый, что не может прочитать размеры в самом
картиночном файле?».
Может. Но только тогда, когда файл уже загружен в компьютер.
Картинки загружаются в последнюю очередь. Сначала браузер получает по
сети текст, отображает его на экране, и пользователь приступает к чтению.
Вместо картинок на странице рисуются прямоугольники, которые
замещаются пришедшими по сети картинками. Если размеры заданы,
браузер рисует прямоугольники в этих размерах, если нет, то «почтовые
марки» — небольшие прямоугольные области.
Когда картинка приходит по сети, случается извержение вулкана с
обширным землетрясением: браузер вынужден перерисовывать экран
заново, ведь картинки «не лезут» в отведенные для них места. Если
картинок на странице много, землетрясение происходит по прибытию
каждой из них.
«Удар» по глазам пользователя:
Плавный переход:
Еще одна неприятность подстерегает пользователя, если картинки без
указания размеров погружены в таблицу. Так как браузер не знает нужных
размеров, то рисовать таблицу до прихода картинок он вообще не станет, и
пользователь засыпает у чистого экрана.
Вывод прост: нужно всегда задавать размеры картинок, и указывать
реальные размеры.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Заданы неверные размеры картинок
Величина штрафа
Минимальный штраф 0.1 назначается за один неверно прописанный размер
картинки.
Максимальный штраф 0.5 назначается за пять и более ошибок.
Штраф из диапазона 0.2–0.4 назначается по усмотрению проверяющих для
промежуточных ситуаций по отношению к двум крайним, описанным
выше.
Исключения
Одна и та же ошибка в блоке кода, повторяющемся в разных файлах,
считается одной ошибкой в шаблоне.
Не считать ошибкой процентное указание размеров картинок (с
сохранением пропорций) на сайтах с адаптивным дизайном.
В последнее время набирает обороты так
называемый адаптивный или отзывчивый веб-дизайн.
В его основе лежит резиновый макет сайта, который отображается без
горизонтальной прокрутки, как на больших широкоформатных настольных
экранах, так и на маленьких экранах мобильных телефонов.
C картинками работают так. Готовят картинку очень большого размера, ширину
указывают в процентах от области просмотра, например, 90%, а высоту auto. Таким
образом при изменении размера экрана картинка будет под экран автоматически
подстраиваться.
Такой стиль работы с картинками расходится с классическим подходом, в котором
рекомендуется указывать точные размеры картинки.
Адаптивный принцип работы с картинками стал возможен в силу существенного
повышения скорости Интернета (что позволяет быстро грузить тяжелые картинки)
и его безлимитности, когда оплата не зависит от величины трафика.
Чтобы картинка не теряла в качестве на больших экранах, её готовят для сайта в
очень больших размерах (или предусматривают несколько картинок для разных
разрешений экрана).
Что писать в замечаниях
Имя файла с обнаруженной ошибкой.
Номер строки или диапазон строк с ошибкой.
Запишите CSS-свойства с правильными размерами картинки.
Пояснение
Размеры картинки удобно задавать в самом теге IMG при помощи
атрибута style.
Пример
<IMG src="pic/0402.gif"
style="width=736px;height:400px"
alt="Описание картинки">
CSS-cвойства width и height задают размеры прямоугольника, в который
браузер выводит картинку. Эти размеры должны совпадать с реальными
размерами картинки. Если совпадения нет, браузер растягивает или
сжимает изображение так, чтобы оно полностью заполнило отведенное для
него место. В итоге картинка выводится с неприятными искажениями.
Размеры неверные, и изменены не пропорционально
Новичок часто берет большую картинку и уменьшает ее при помощи
браузера. В итоге пользователь загружает по сети лишние сотни килобайт.
Уменьшать картинку нужно графическим редактором: он делает это более
качественно и, в отличие от браузера, сокращает килобайтный вес
изображения.
Кажется, что если, наоборот, есть маленькая картинка, а на странице нужно
поместить её в увеличенном виде, то пользоваться
свойствами height и width выгодно: получаем большое изображение с малым
килобайтным весом.
Да, это так. Если, конечно, вас устраивает качество увеличения. Браузер
просто укрупняет точки маленького изображения.
Размеры картинки в коде пропорционально завышены по отношению к реальным размерам
Вот почему нужно указывать реальные размеры картинки.
Готовить графику лучше всего в векторном редакторе. Векторный рисунок
без искажений растягивается до нужного размера, а потом записывается на
диск в растровом формате GIF, JPEG или PNG. И тогда качество изображения
будет высоким.
В коде заданы размеры в точности соответствующие реальным размерам картинки
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Лишние элементы, фрагменты
Величина штрафа
Минимальный штраф 0.1 назначается, когда на всех страницах сайта
обнаружена одна обозначеная в заголовке ошибка.
Максимальный штраф 0.5 назначается, когда ошибка встречается 5 и более
раз.
Штраф из диапазона 0.2–0.4 назначается по усмотрению проверяющих для
промежуточных ситуаций по отношению к двум крайним, описанным
выше.
Исключения
Одна и та же ошибка в блоке кода, повторяющемся в разных файлах,
считается одной ошибкой в шаблоне.
Что писать в замечаниях
Имя файла с обнаруженной ошибкой.
Номер строки или диапазон строк с ошибкой.
Обоснуйте, почему отмеченный фрагмент может быть исключен из
кода без изменения внешнего вида документа и его
функционирования.
Пояснение
Появление в критериях описания данной погрешности явилось своего рода
защитой от построения гипертекстовых страниц в визуальных редакторах.
Именно визуальные редакторы, автоматически генерируя код, записывают
в него много «мусора». Не зная что желает автор, визуальный редактор
«старается» максимально предусмотреть и «собрать в один мешок» все
доступные варианты.
Легкость, с которой визуальный редактор позволяет строить HTMLстранички, заставляет начинающего вебмастера задаться
неизбежным вопросом: зачем изучать язык, если можно получать HTMLкоды без всякой головной боли?
Существуют очень продвинутые визуальные HTML-редакторы
(например, Wix). Они позволяют быстро создавать красивые сайты с
потрясающей функциональностью (правда, далеко не оптимальные).
Вы, конечно, можете пользоваться визуальными редаторами. Но не сейчас,
во время обучения! Ведь знания языков разработки (как минимум HTML,
CSS, а для продвинутых и JavaScript) и принципов построения гипертекста
просто необходимы для настоящего веб-мастера.
Вы не будете попадать в беспомощную ситуацию, когда визуальный
редактор делает что-то не то, а подправить код вручную вы не в состоянии.
Наконец, свободно владея базой построения гипертекста, вы будете
ощущать себя принятым в хорошую компанию.
HTML и CSS — это латынь гипертекстовой разработки и знать её
необходимо, хотя бы для того, чтобы понимать, о чём говорят и пишут
люди в этой области.
Ну, а визуальные редакторы, конечно, вещь полезная. Почему бы и не
использовать их, когда действительно трудно. Например, для разметки
графической карты гипертекстовыми ссылками.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Суммарный вес страницы превышает 300 КБ
Величина штрафа
Каждые лишние 20 КБ добавляют к штрафу 0.1. Общая сумма штрафа не
превышает 0.5.
Пример. На сайте три страницы:
первая весом 314 КБ (штраф 0.1);
вторая 344 КБ (штраф 0.3);
третья 300 КБ (штраф 0.0).
Величина штрафа: 0.4.
Исключения
1. Постоянные элементы (общий стилевой файл CSS, одинаковые для
всех страниц картинки, JavaScript-инварианты) учитываются только
на главной странице.
2. Не считать ошибкой превышение килобайтного веса для страниц фото
или видео галерей.
Что писать в замечаниях
Название страниц с превышением килобайтного веса, их размеры,
штрафы, суммарный штраф.
Рекомендации по снижению килобайтного веса.
Пояснение
Посещаемость сайта (при прочих равных условиях) тем выше, чем быстрее
он просматривается. Пользователь любит быстрое обслуживание и не хочет
тратить деньги на просмотр картинки «для настроения». Пользователь
ходит за картинками на специальные сайты, на обычных сайтах ему нужна
текстовая информация.
Известно, что страницы часто посещаемых сайтов небольшие. Если вам
нужны посетители, делайте страницы как можно меньше по объёму.
Что понимается под объёмом страницы? Конечно, не геометрический
размер страницы на экране, а сумма килобайтов, которые нужно загрузить
по сети для построения экранного образа. Это размер самого HTMLфайла, размер картинок, размер файлов со скриптами и стилевыми
таблицами.
Основной источник «жировых» отложений — картинки, и к ним нужно
относиться с особым вниманием. Отказаться от лишних декораций,
шершавых фонов, анимаций, уменьшить геометрические
размеры, оптимизировать графику, уменьшая Quality для JPEG и число
цветов для GIF.
Старайтесь использовать одну и ту же картинку на разных страницах.
Во-первых, такое украшение обойдётся дешевле: картинка будет
загружаться по сети только для первой страницы, а для других — из кэша
компьютера.
Во-вторых, пользователь, увидев одну и ту же картинку на всех страницах,
получит ощущение фирменности дизайна, связанности страниц друг с
другом. Пример многократного использования картинок — кнопки
навигационной панели. Уместно повторять на каждой странице логотип
сайта. При этом на внутренних страницах его надо делать ссылкой на
главную.
Известно, что задержка в 1 сек не прерывает ход мыслей пользователя.
Задержка более 10 сек раздражает и заставляет заняться другим делом. При
задержке более 20 сек, пользователь покидает сайт (как правило, навсегда).
При работе по модему со скоростью 56 Кбит/с задержка в одну секунду
возникает при приёме файла в 2 килобайта. Задержка в 10 секунд — при
приёме файла в 34 килобайт. (В этих числах учитывается время соединения
с сервером; данные взяты из книги Веб-дизайн Якоба Нильсена.)
Отсюда возникло доброе правило: если в странице более 50 килобайт,
нужно бить тревогу и принимать срочные меры.
В современном Web скорости существенно возросли, и приемлемым
объёмом сегодня можно считать страницы «весом» не более 300 килобайт.
Проверка скорости загрузки страниц сайта
В сети достаточно много сервисов при помощи которых можно оценить
скорость загрузки страниц сайта, как на экран стационарного компьютера,
так и на экран мобильного устройства.
Вот сслка на страницу, где предлагается:
20 инструментов для проверки скорости загрузки страниц сайта
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Ненормативная лексика
Величина штрафа
В соответствии с приведенной ниже классификацией, штраф назначается:
Из диапазона 0.0–1.0 по пункту 1.
Из диапазона 1.0–5.0 по пункту 2.
5.0 по пункту 3.
Пояснение
Классификация
Под ненормативной лексикой обычно понимают:
1. Лексику, выходящую за пределы нормализованного литературного
языка.
2. Лексику, направленную на то, чтобы оскорбить (ругательная лексика).
3. Лексику, обобщённо называемую матом (непристойная лексика, не
обязательно ругательная).
Лексика, выходящая за пределы нормализованного литературного
языка
В разговорной речи мы часто используем выражения, выходящие за
пределы нормализованного литературного языка («клёво», «круто»,
«гамер», «наивняк», «мобила»).
В официальных, деловых, инструктивных, описательных текстах следует
избегать подобных выражений. Они могут затруднить восприятие
материала и способны вызвать негативную реакцию читателя.
Однако, бывают ситуации, когда необходимо передать колорит
разговорной речи, и тогда использование ненормализованного
литературного языка может быть оправдано.
Ругательная лексика
Примеры ругательной лексики: «подлец», «бандит», «мошенник», «расист».
Если автору кажется, что такие выражения необходимы в тексте, то можно
избежать явного оскорбительного характера слов, заменяя их
эвфемизмами: «нехороший человек», «падшее создание»…
Непристойная лексика
Приличные люди избегают непристойных слов и в разговорной речи.
Понятно, что сайт, на котором автор позволил себе использовать мат, не
является приличным местом в сети и достоин максимального порицания.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Призывы к насилию
Величина штрафа
Рекомендуется максимальный штраф 5.0 за присутствие на страницах сайта
высказываний, которые можно расценить как призывы к насилию.
Извлечения из законодательства России
Конституция РФ
2. Не допускаются пропаганда или агитация, возбуждающие социальную,
расовую, национальную или религиозную ненависть и вражду.
Запрещается пропаганда социального, расового, национального,
религиозного или языкового превосходства.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Оскорбление чести и достоинства (страны, человека)
Величина штрафа
Рекомендуется максимальный штраф 5.0 за присутствие на страницах сайта
высказываний, задевающих честь и достоинство страны или человека.
Извлечения из законодательства России
Конституция РФ
Статья 23
1. Каждый имеет право на неприкосновенность частной жизни, личную
и семейную тайну, защиту своей чести и доброго имени.
2. Каждый имеет право на тайну переписки, телефонных переговоров,
почтовых, телеграфных и иных сообщений. Ограничение этого права
допускается только на основании судебного решения.
Статья 24
1. Сбор, хранение, использование и распространение информации о
частной жизни лица без его согласия не допускаются.
Гражданский кодекс РФ
Статья 152. Защита чести, достоинства и деловой репутации
1. Гражданин вправе требовать по суду опровержения порочащих его
честь, достоинство или деловую репутацию сведений, если
распространивший такие сведения не докажет, что они соответствуют
действительности.
2. Гражданин, в отношении которого распространены сведения,
порочащие его честь, достоинство или деловую репутацию, вправе
наряду с опровержением таких сведений требовать возмещения
убытков и морального вреда, причиненных их распространением.
Уголовный кодекс РФ
Статья 129. Клевета
1. Клевета, то есть распространение заведомо ложных сведений,
порочащих честь и достоинство другого лица или подрывающих его
репутацию, — наказывается штрафом в размере от пятидесяти до ста
минимальных размеров оплаты труда или в размере заработной
платы или иного дохода осужденного за период до одного месяца,
либо обязательными работами на срок от ста двадцати до ста
восьмидесяти часов, либо исправительными работами на срок до
одного года.
2. Клевета, содержащаяся в публичном выступлении, публично
демонстрирующемся произведении или средствах
массовой информации, — наказывается штрафом в размере от ста до
двухсот минимальных размеров оплаты труда или в размере
заработной платы или иного дохода осужденного за период от одного
до двух месяцев, либо обязательными работами на срок от ста
восьмидесяти до двухсот сорока часов, либо исправительными
работами на срок от одного года до двух лет, либо арестом на срок от
трех до шести месяцев.
3. Клевета, соединенная с обвинением лица в совершении тяжкого или
особо тяжкого преступления, — наказывается ограничением свободы
на срок до трех лет, либо арестом на срок от четырех до шести месяцев,
либо лишением свободы на срок до трех лет.
Статья 130. Оскорбление
1. Оскорбление, то есть унижение чести и достоинства другого лица,
выраженное в неприличной форме, — наказывается штрафом в
размере до ста минимальных размеров оплаты труда или в размере
заработной платы или иного дохода осужденного за период до одного
месяца, либо обязательными работами на срок до ста двадцати часов,
либо исправительными работами на срок до шести месяцев.
2. Оскорбление, содержащееся в публичном выступлении, публично
демонстрирующемся произведении или средствах
массовой информации, — наказывается штрафом в размере до
двухсот минимальных размеров оплаты труда или в размере
заработной платы или иного дохода осужденного за период до двух
месяцев, либо обязательными работами на срок до ста восьмидесяти
часов, либо исправительными работами на срок до одного года.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Пропаганда нездорового образа жизни
Величина штрафа
Рекомендуется максимальный штраф 5.0 за присутствие на страницах сайта
высказываний, пропагандирующих нездоровый образ жизни (алкоголь,
курение, наркотики…)
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Пропаганда учений, наносящих вред психике человека
Величина штрафа
Рекомендуется максимальный штраф 5.0 за пропаганду учений, наносящих
явный вред психике человека.
В первую очередь, речь идёт о пропаганде учений сатанистов, саентологов,
последователей сект «АУМ Синрикё», «Фалуньгун» и им подобных.
Кроме того, не поощряются сайты, содержание которых направлено на
кодирование сознания «прелестями реального быта» вампиров,
вурдалаков, оборотней и других отрицательных персонажей сказок, легенд
и фантастических историй (или психиатрических исследований). Бывает,
что от таких текстов даже у людей с устойчивой психикой, появляется
чувство тревоги и душевного дискомфорта.
Не очень хочется показывать подобные гнетущие тексты, но всё же приведу
одну цитату из конкурсной работы, чтобы продемонстрировать стиль
кодирования, основанный на документальной манере изложения (он
убеждает читателя в реальности описанных кровавых сцен).
В XIX веке общественность несколько раз столкнулась с вампиризмом, эти
случаи были зарегистрированы:
1827 г. Англия
К. Леггер, дама в возрасте 29 лет, выкопала труп 12-летней девочки,
выпила её кровь.
Мысль о том, что нельзя пить свернувшуюся кровь, приходит не сразу,
настолько убедительно документален стиль изложения.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Неудачная структура сайта
Величина штрафа
Структура сайта оценивается по степени её соответствия содержанию и
удобству решения пользовательских задач на сайте.
При этом оценивается именно структура сайта, а не система навигации.
Штраф выбирается из диапазона 0.1–0.5 по усмотрению проверяющего.
Пояснение
Структура сайта (его архитектура) должна помогать решать задачи, ради
которых сайт создан.
Если пользователь испытывает трудности в работе с сайтом, связанные с:
общим представлением об устройстве сайта,
поиском и потреблением услуг, предлагаемых сайтом,
то структуру сайта следует признать неудачной.
Структура сайта определяется разбиением общего содержимого на
отдельные страницы и объединением их в смысловые разделы.
Кроме того, структура сайта неразрывно связана с системой навигации.
Структура сайта с точки зрения разработчика — это запланированная
рабочая схема, на которой разработчик указывает связи между страницами
и родственные узы (потомок, предок, брат).
Структура сайта с точки зрения пользователя — это система навигации, по
которой он судит о содержимом страниц, о связях между страницами и их
родственных отношениях.
Пример 1
Структура фрагмента школьного сайта, представленная ниже, явно
неудачная:
Учителя
o Расписание уроков
Ученики
o Расписание факультативов
Страница «Расписание уроков» на схеме является потомком страницы
«Учителя», хотя в этой странице заинтересованы и ученики.
Страница «Расписание факультативов» на схеме является потомком
страницы «Ученики», хотя она полезна и учителям.
Более правильная схема может иметь вид:
Учителя
Ученики
Расписание
o Основные уроки
o Факультативы
Пример 2
Для сайта, содержащего набор равнозначных страниц, линейная схема
будет явно неудачной:
Добраться до страницы «Песни» пользователи смогут, только пройдя через
страницы «Стихи», «Рассказы» и «Рисунки«.
Для такого сайта больше подойдет иерархическая схема, в которой с
главной страницы можно напрямую попасть на любую другую:
Пример 3
Если для оформления заказа на товар (подписки на список рассылки или
получения другой услуги) пользователю необходимо последовательно
поработать на четырёх страницах, то иерархическая схема для организации
этих страниц не подходит:
Более правильной будет линейная структура, задающая
последовательность движения:
Классификация структур
Большие сайты имеют, как правило, довольно сложные архитектуры, но
можно выделить три базовых схемы, которые используют в виде
основополагающего каркаса:
линейная схема;
таблица;
иерархия.
Линейная схема
Строгая линейная организация программирует перемещение пользователя
по цепочке страниц (вперед и назад):
Для удобства ориентации и навигации, полезно на такие страницы
выводить кнопки для перемещения Вперед/Назад с названиями страницсоседей и номер текущей страницы в общей линейной последовательности:
Основная линейная структура может дополняться множеством
модификаций.
Цепочка с альтернативами
Цепочка с альтернативами имитирует интерактивность на сайте:
Это может быть сайт-вопросник, который на странице с номером 2
предлагает выбрать либо страницу 2.1 (например, если пользователь —
женщина), либо страницу 2.2 (если пользователь — мужчина). Затем
движение продолжается по основной цепочке.
Цепочка с ответвлениями
Такая структура удобна, когда узлы основной цепочки содержат
дополнительный материал, размещаемый в ответвлениях:
Цепочка с общим разделом
Обычная практика — это цепочка документов с дополнительным набором
страниц, образующих справочный раздел. В этот раздел выносятся большие
иллюстрации, длинные примеры, комментарии, толкование терминов,
литературные источники, лирические отступления.
Изучив дополнительный материал, пользователь возвращается в цепочку и
продолжает последовательное движение.
Таблица
Организация страниц в виде таблицы хорошо подходит для перемещения
по совокупностям родственных элементов в двух направлениях (по строкам
и столбцам):
В качестве примера можно привести совокупность страниц,
предлагающих информацию по цифровым фотокамерам:
Характеристики Тесты Обзоры Магазины
Canon EOS 300D
1,1
1,2
1,3
1,4
Konica Minolta A2
2,1
2,2
2,3
2,4
Nikon D70
3,1
3,2
3,3
3,4
Panasonic DMC-FZ20 4,1
4,2
4,3
4,4
Sony DSC-F828
5,2
5,3
5,4
5,1
Пользователь легко ориентируется в табличной структуре. Если он
находится, например, на странице с характеристиками камеры Nikon D70
(страница 3,1), то сдвиг «вверх» приводит его на страницу с
характеристиками «соседней» камеры Konica Minolta A2, а сдвиг «вправо»
перемещает его на страницу с описанием тестирования текущей камеры.
Ориентации пользователя должна помогать правильно разработанная
навигационная панель на каждой странице:
Иерархия
Это самая распространённая структура, которая лежит в основе
большинства сайтов в Интернет:
Ниже представлен пример возможной системы навигации на
иерархическом сайте:
Верхняя строка представляет собой меню из прямых потомков корня (сам
корень, страница «начало», также включён в это меню). Квадратными
скобками выделен предок текущей страницы — «раздел 4».
Вторая сверху навигационная строка представляет собой меню прямых
потомков страницы «раздел 4». Квадратными скобками выделен предок
текущей страницы — «раздел 4.1».
Третья сверху навигационная строка представляет собой меню прямых
потомков страницы «раздел 4.1». Текущая страница «раздел 4.1.2» ссылкой
в этом меню не является.
Последняя навигационная строка показывает путь от корня дерева к
текущей странице. Текущая (последняя) страница «раздел 4.1.2» ссылкой в
этом меню не является.
Ниже показаны страницы сайта, доступные с текущей «4.1.2», а также
пройденный пользователем путь от начальной страницы сайта.
Видим, что с любой страницы на любую другую в этой иерархии можно
попасть максимум за три щелчка.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Неудачная Главная
Главная страница является «парадным» входом, но пользователь по ссылке
или закладке может проникнуть на сайт с «чёрного» хода.
Из этого следует, что визуальный стиль Главной не должен отличаться от
стиля других страниц сайта, так же, как и навигационное оборудование. Все
страницы сайта, включая Главную, должны однозначно демонстрировать
пользователю принадлежность к одному сетевому узлу.
Но всё же, Главная страница имеет особое значение:
Большинство пользователей попадают на сайт через главный вход.
Пользователи обычно «всплывают» на Главную, чтобы по анонсам
выбрать новый раздел для просмотра.
Если Главная содержит рекламный текст («самый лучший сайт»), общие
фразы («добро пожаловать») и не содержит никакой полезной
конструктивной информации, пользователь разочаровывается.
На Главной странице должно быть:
Название сайта (повторяется на других страницах).
Логотип сайта (повторяется на других страницах).
Навигационное меню (повторяется на других страницах).
Авторская информация с email для связи (повторяется на других
страницах).
Краткое описание содержания сайта.
Анонсы материалов.
На Главной может быть:
Слоган (может повторяться на других страницах).
Новости или анонсы новостей.
Счетчик посещений.
Поиск по сайту (может повторяться на других страницах).
Слоган
Слоган — это короткая, но ёмкая фраза, которая ассоциируется с
излагаемым материалом или с автором этого материала.
Слоган обычно располагают рядом с логотипом или заголовком сайта.
Содержательно слоган должен передавать основную идею продукта и
содержать не более шести-восьми слов.
Пример
Автор сайта, на котором представлены обучающие материалы по
программированию, решил придумать слоган.
— Ага! — подумал автор. — Надо отразить особенность. А особенность моих
материалов в том, что все теоретические вопросы обязательно
подкрепляются практическими заданиями.
И автор придумал ключевую фразу: «моя голова хорошо запоминает
лишь то, что делают мои руки».
Фраза получилась длинной, и после мучительных урезаний была сокращена
до «голова помнит лишь то, что делают руки».
Анонсы новостей и материалов сайта
Главная страница в отличие от других страниц сайта предлагает не только
навигационное меню, но и краткие обзоры содержащихся на сайте
материалов. Именно поэтому Главная страница играет роль основного
навигационного узла, и пользователи охотно используют её как
мощную информационную развязку.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Содержание не соответствует теме сайта или плохо
раскрывает её
Про Фому и Ерёму
Бывает, что сайт называется «Про Фому», а в нём написано исключительно
про Ерёму.
Но такое случается редко и легко правится изменением названия сайта.
Более типична ситуация, когда на сайте написано всё же про Фому, но
читатель не может из описаний сложить внятный портрет героя, уяснить
черты его характера, понять настроение.
Пример
Структура школьного сайта в одной конкурсной работе имела вид:
Символика
o Гимн
o Форма
o Значки
o Из устава школы
Дополнительное образование
o Дополнительные предметы и блоки
o Кружки
Традиции школы
o Посвящения в гимназисты
o Олимп разума
o Виват, гимназия
Авторы
Предусмотрены факультативные разделы, содержащие описания
символики, традиций, дополнительных образовательных услуг, а основные
составляющие школьный жизни никак не отражены.
Заметим попутно, что название одних разделов слишком длинные
(«Дополнительные предметы и блоки»), других — малопонятные («Олимп
разума»). Для меню сайта такие названия подходят плохо.
После обсуждений структура сайта была переделана так:
О гимназии
Образование
Базовое
Углублённое
Профильное
Дополнительное
История
Даты
Директора
Традиции
Посвящение
Клубы
Праздники
Атрибутика
Гимн
Форма
Значки
Устав
Ссылки
Вебмастера
Получилось гораздо лучше!
Добавлены очевидно необходимые разделы: «О гимназии», «Ссылки».
Введён общий раздел «Образование», в котором наряду с дополнительными
формами, предусмотрен материал по основной, базовой линии.
Получился ли план идеального школьного сайта?
Вероятно, нет.
Идеал недостижим в принципе. Но мы прикладываем усилия для того,
чтобы подойти к нему поближе.
Школьный сайт
Прежде всего, хочется заметить, что школьный сайт — это, в первую
очередь, просто сайт. Значит, к нему применимы все законы
структурирования, наполнения, дизайна и юзабилити, которые относятся
вообще ко всем сайтам в Интернет.
Хороший школьный сайт должен быть хорошим по общим понятиям
Интернет. Но не всякая сайтовая схема подходит для школьного сайта.
Безусловно, школьный сайт имеет свою специфику, которую надо
учитывать при разработке.
Прежде чем приступать к построению школьного сайта, попробуем
ответить на следующие вопросы.
Школьный сайт: вопросы
1. Зачем нужен сайт нашей школе? Какие задачи он должен решать?
Комментарий. Ответ типа: «школьный сайт — это визитная карточка
школы» понятен, но не интересен. Большинство школ похожи друг на друга.
Как и сайты этих школ. На первой странице фото обшарпанного здания,
возможно обрамлённого несколькими зелёными кустиками. Разделы «наши
достижения», «наши дела» и тому подобные. Тексты походят на скучные
отчёты для органов народного образования.
Может быть, методисты в отделах образования будут без ума от чтения
страниц подобного рода, но обычные люди переваривают эту кашу с
трудом.
2. Какую роль будет играть сайт в образовательном процессе нашей
школы, нашего региона, страны, мира? Кто будущие пользователи
нашего сайта?
Комментарий. Можно разделить посетителей сайта на две категории: на
тех, кто учится и работает в вашей школе (внутренние пользователи) и на
сторонних людей. В идеале сайт должен быть интересен всем. Но для
внутренних пользователей могут быть специальные страницы, которые
отражают только их интересы.
3. Какой функциональностью должен обладать сайт, чтобы
удовлетворить целям, сформулированным при ответе на первый и
второй вопросы? Должна ли быть в нём интерактивность? поисковая
система? чат? книга посетителей? рассылка новостей? выписки из
расписания? журнал успеваемости? служба ответов на вопросы
(ЧАВО)? прогнозы успеваемости? служба трудоустройства
школьников? обзоры профессий? обзоры учебных заведений?
Комментарий. Как видите, прежде чем писать коды HTML, есть смысл сесть
на стул (или лечь на диван) и задуматься: голову могут посетить
интересные вопросы, способные помочь создать уникальный, безумно
интересный школьный сайт.
4. Какая структура (цепочка, таблица, иерархия) должна лечь в основу
сайта? Какие разделы (заголовки страниц и пункты меню) в ней
должны присутствовать?
Комментарий. Над названиями позиций меню (заголовками страниц)
нужно тщательно работать. Лучше всего, если каждая позиция будет
представлена одним коротким, но ёмким словом. В любом случае заголовок
не должен быть слоганом, девизом, каким-то красивым восклицанием. Он
должно однозначно подсказывать пользователю, что за ним скрывается
(быть самоочевидным).
5. Кто в нашей школе будет создавать сайт, а потом его сопровождать?
Комментарий. Создать какой-то сайт не так сложно. Сложнее
поддерживать его в злободневном состоянии. Если сайт не меняется
годами, интерес к нему небольшой.
Конечно это не означает, что нужно каждый месяц менять сайт полностью,
вплоть до дизайна. Но если в разделе «новости» записи двухгодичной
давности, это плохо.
Чем больше сайт нацелен на внутренних пользователей, тем он должен
быть динамичнее.
6. Как решится вопрос с финансовым обеспечением создания сайта, его
сопровождением, оплаты аренды пространства на сервере?
Комментарий. Вопрос не праздный. Если с финансированием есть
проблемы, затевать большой динамичный проект не стоит.
Пользователи школьного сайта
Попытаемся определить интересы потенциальных пользователей
школьного сайта. Это в большой степени определит разделы сайта и их
относительный объем (прямо пропорционален количеству интереса).
Сначала, определимся с самими пользователями. Разделим их на две
категории (внутренние и внешние):
Внутренние пользователи
o Школьные пользователи
Школьники
Учителя
Администрация школы
o Родители
o Надзирающие органы (местный отдел образования)
Внешние пользователи
o
o
o
o
Выпускники данной школы
Внутренние пользователи других школ
Образовательные среды (типа Роботландского университета)
Надзирающие органы (региональные отделы образования,
министерства)
А теперь давайте опишем возможные интересы каждой категории
пользователей.
Приведённые ниже списки не являются бесспорными и полными. Это
примерная иллюстрация, которая должна помочь разработчикам составить
план собственного школьного сайта.
Внутренние пользователи
Школьные пользователи
Школьники
Школьные новости
Расписание основных занятий
Расписание факультативов
Расписание предстоящих событий для школьников
Журнал успеваемости, статистика, прогнозы
Ответы на вопросы
Консультации по предметам
Доска почета школьников
Заметки о школьной жизни
Учебные материалы
Детские мероприятия по месту жительства
Детские мероприятия в Интернет
Будущая профессия
Справочник по телефонам и электронным адресам школьников
Общение (чат)
Сетевые конкурсы и клубы по интересам
Оценки учителям и администраторам
Ссылки на полезные Интернет-ресурсы
...
Учителя
Интересно всё, что предусмотрено для школьников. И кроме того:
Расписание событий для учителей
Педагогические заметки
Доска почета учителей
Справочник по телефонам и электронным адресам учителей
Квалификационный состав учителей
Материально-финансовое обеспечение школы
Ссылки на полезные образовательные ресурсы
...
Администрация школы
Интересно всё, что предусмотрено для школьников и учителей. И кроме
того:
Планы развития школы
Сравнительный анализ учебных заведений региона
Справочник по телефонам и электронным адресам надзирающих
органов
Нормативные документы (приказы, постановления, распоряжения…)
...
Родители
Расписание основных занятий
Расписание факультативов
Расписание предстоящих событий для школьников
Успехи детей
Материально-финансовое обеспечение школы
Успехи школы
План развития школы
Квалификационный состав учителей
Статистика успеваемости школьников
Прогноз успеваемости собственного ребёнка
Советы родителям
...
Надзирающие органы
Расписание основных занятий
Расписание факультативов
Расписание предстоящих событий для школьников
Расписание предстоящих событий для учителей
Материально-финансовое обеспечение школы
Успехи школы
План развития школы
Квалификационный состав учителей
Статистика успеваемости школьников
...
Внешние пользователи
Выпускники данной школы
Школьные новости
Расписание предстоящих событий для школьников
Заметки о школьной жизни
Ссылки на полезные Интернет-ресурсы
...
Внутренние пользователи других школ
Школьники
Заметки о школьной жизни
Учебные материалы
Будущая профессия
Ссылки на полезные Интернет-ресурсы
...
Учителя
Педагогические заметки
Квалификационный состав учителей
Статистика успеваемости школьников
Ссылки на полезные Интернет-ресурсы
...
Администрация школы
Материально-финансовое обеспечение школы
Успехи школы
План развития школы
Статистика успеваемости школьников
Квалификационный состав учителей
...
Образовательные среды (типа Роботландского университета)
Материально-финансовое обеспечение школы
Квалификационный состав учителей
Статистика успеваемости школьников
Учебные материалы
Педагогические заметки
Ссылки на полезные Интернет-ресурсы
...
Надзирающие органы (региональные отделы образования, министерства)
Материально-финансовое обеспечение школы
Статистика успеваемости школьников
Квалификационный состав учителей
...
Новые вопросы и проблемы
Приведённые оценки интересов не совсем точные и полные.
Какие мысли приходят после просмотра этих схем.
1. Есть антагонистические интересы.
Учителя не хотят показывать свою жизнь, проблемы и свою педагогику
школьникам.
Школьники хотят общаться в чате, учителя против этого из-за обычной для
чата вульгарности диалогов.
2. Большая часть информации на сайте не интересна внешним
пользователям.
3. Историческая, географическая, топологическая,
описательная информация (общая «болтология»), вероятно,
неинтересна никому.
4. Многие разделы требуют постоянного сопровождения (обновления).
Это означает, что сайт должна постоянно курировать рабочая группа,
обновляя его достаточно часто (минимум раз в неделю). Работа, требующая
от куратора проекта немалых усилий.
Интересным разделом сайта является страничка «вопрос-ответ». Но
должен быть человек, который бы постоянно курировал этот раздел:
принимал вопросы, передавал их тем, кто мог бы на них компетентно
ответить, публиковал на сайте ответы.
Каким же должен быть школьный сайт?
Высказанные выше мнения и предложенные схемы предназначены лишь
для побуждения творческой активности разработчиков. Готового рецепта
идеального школьного сайта нет ни у кого.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Разные способы выравнивания однотипных элементов (слева, справа,
по центру, по ширине).
Разные способы выделения однотипных элементов (курсив, жирность,
цвет, размер, подчёркивание, разрядка, инверсия).
Разный фон.
Разный шрифт основного текста.
Разный цвет и размер шрифта основного текста.
Стиль оформления Главной страницы (титульной, страницы входа на сайт)
может отличаться от стиля оформления других станиц.
Главная страница должна быть интересной по оформлению и содержанию,
чтобы привлечь внимание читателей, чтобы они захотели последовать на
другие страницы сайта.
Отличием Главной страницы могут быть: крупный логотип и название
сайта, большой информационной картинки, нетиповое оформление
вступительной статьи и т. п.
На остальных страницах оформление должно быть одинаковым. С целью
экономии места для основного содержания, логотип и название сайта могут
иметь уменьшенный размер. Форматирование текста должно быть
удобным для чтения.
На всех страницах (и на Главной) такие элементы как Главное
меню и Подвал должны быть оформлены одинаково, то есть отличий в
навигации быть не должно.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Отсутствует раздел Ссылки
Зачем нужны внешние ссылки
Сайт без внешних ссылок — это тупик для пользователя, путешествующего
в Интернет.
Искусственные тормоза являются плохой идеей, а за хорошие внешние
ссылки пользователь всегда скажет спасибо.
К таким ссылкам, особенно, если они содержательно прокомментированы,
доверия гораздо больше, чем к ссылкам, найденным при помощи
глобальных поисковых систем типа Yandex. Первые любовно собирал и
описывал заинтересованный человек, вторые сгенерировал бестолковый
робот.
Если пользователю понравятся ваши внешние ссылки, он будет охотно
посещать и ваш сайт. Он будет знать, что по любой теме его ждёт тропинка
к хорошему дополнительному материалу.
Дисциплина внешних ссылок
Внешние ссылки надо подбирать очень осмотрительно: лучше разместить
одну ссылку на проверенный материал, чем копировать к себе десятки
сомнительных ссылок со страниц других сайтов.
Обязательно комментируйте внешние ссылки. От ссылок с комментариями
польза гораздо больше.
Внешние ссылки могут располагаться на всех страницах сайта в контексте
излагаемых тем. Это удобно. Пользователь познакомился с материалом на
вашей странице и сразу может перейти к родственным темам на других
сайтах.
Но не менее полезна и особая страница, на которую собраны внешние
ссылки по всем темам вашего сайта. Такой страницей можно пользоваться
как справочником.
Дополнительным удобством является иерархическая структуризация
ссылок по темам.
Как оформлять внешние ссылки
Пользователь должен однозначно понимать, какая ссылка является
внутренней, а какая уводит за пределы сайта.
Кроме того, пользователь должен иметь возможность не только перейти по
внешней ссылке на другой сайт, но и бесхитростно скопировать ссылку
через буфер обмена ОС в текстовый или графический файл, чтобы
использовать по своему усмотрению (вставить в статью, на свой сайт,
послать другу).
Этого можно достичь, если прописывать внешние ссылки (и электронные
адреса) в явном виде.
Явно записанные внешние ссылки будут отличаться от ссылок внутри
сайта по внешнему виду — это поможет ориентированию пользователя.
Примеры внутренних ссылок (заглушены).
На сайте вы можете познакомиться с курсами RU,
его формами и методами обучения, прочитать мнения учителей.
В разделе история увидите, как развивается RU, а в разделе статьи найдете
список литературы, посвященной работе RU, его тематическим и
методическим материалам.
Примеры внешних ссылок (заглушены).
Роботландия
www.botik.ru/~robot
Сайт предприятия «Роботландия». Традиционно поставляет для школы:
o
o
Программно-методические продукты
Дистанционное обучение
Российский общеобразовательный портал
www.school.edu.ru
Образовательные ресурсы для учеников, учителей, родителей, администраторов. Учебные,
научно-популярные, познавательные и другие материалы по основным школьным
дисциплинам. Вопросы здоровья и психологии школьников.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Рекламный стиль изложения
Люди устают от рекламы, она вызывает недоверие, раздражение.
Когда обычный текст написан в стиле рекламы, пользователи переносят на
него те же чувства.
Якоб Нильсен в статье «Как читают web-пользователи?» (перевод
Александра Качанова) пишет:
Пользователей отпугивает «рекламная вода»; рекламный стиль письма с
использованием субъективных оценок («самый лучший в мире») очень часто можно
встретить в Web. Пользователи Web — слишком заняты, им нужны простые факты.
Кроме того, сайт теряет в доверии, если пользователи видят, что его авторы явно
всё преувеличивают.
...
Чтобы измерить эффективность действия некоторых советов, данных выше, мы
разработали пять различных версий одного и того же сайта (основная информация
одна и та же, просто выражена в различных словах, навигация та же).
Затем мы попросили пользователей выполнить с этими различными сайтами одни
и те же задачи.
Юзабилити возросла для варианта со сжатым текстом (на 58% лучше) и для
варианта с текстом, оптимизированным для просмотра (на 47% лучше).
Когда же мы объединили все три идеи вместе (сжатость, удобство просмотра и
объективность, — комментарий Дуванова), результат взлетел до небес: юзабилити
стала лучше на 124%.
Версия сайта. Рекламный стиль (контрольный пример) с использованием
«рекламной воды», которую можно встретить на многих коммерческих сайтах.
Абзац для примера
В штате Небраска расположены знаменитые на весь мир ландшафты, которые неизменно притягивают
к себе толпы людей. В 1996 году одним из самых популярных мест был Парк форта Робинсона (Fort
Robinson State Park) (355.000 посетителей), Исторический музей и парк Arbor Lodge (Arbor Lodge State
Historical Park & Museum) (100.000), Carhenge (86.598), Музей пионеров прерии (Stuhr Museum of the
Prairie Pioneer) (60.000) и исторический парк Ранчо Буффало Билла (Buffalo Bill Ranch State Historical
Park).
Версия сайта. Комбинированная версия использованы все три улучшения стиля:
сжатость, удобство просмотра и объективность.
Абзац для примера
В 1996 в штате Небраска шестью самыми посещаемыми местами были:
Парк форта Робинсона.
Исторический музей и парк Arbor Lodge Carhenge.
Музей пионеров прерии.
Исторический парк Ранчо Буффало Билла.
Улучшение юзабилити (относительно контрольного примера) — 124%.
Наша гипотеза заключается в том, что рекламный текст несёт дополнительную
эмоциональную нагрузку, и пользователям приходится тратить время на
отсеивание гипербол от реальных фактов.
Когда люди читают первый абзац «В штате Небраска расположены знаменитые на
весь мир ландшафты», первая реакция — протест: «нет, это не так». Из-за этого
замедляется чтение и ощущается отторжение от сайта.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Слишком длинные ссылки, многословные
невыразительные (несамоочевидные) разделы меню
Над названиями позиций меню нужно тщательно работать. Лучше всего,
если каждая позиция будет представлена одним коротким, но ёмким
словом. Это слово не должно быть слоганом, девизом, каким-то красивым
восклицанием. Оно должно однозначно подсказывать пользователю, что за
ним скрывается.
Пусть, например, на сайте нужно сделать спортивную страницу.
Такие названия, в качестве позиции меню, непригодны:
Наша спортивная жизнь (длинно)
Спортивная жизнь нашей школы (длинно)
Оле-оле! (не очень понятно)
Спорт — это жизнь! (длинно, не слишком понятно, рекламно)
Sport (на русскоязычном сайте?)
Хорошим названием является Спорт.
Чем проще название, тем лучше.
Многословное название пользователь может расценить как несколько
ссылок:
спортивная школьная жизнь
Одна ссылка или две?
спортивная
школьная жизнь
В узком окне ссылка записалась в две строки. Пользователь уверен,
что видит две ссылки: на спортивную страницу и на страницу о
школьной жизни.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Неудачные заголовки (сайта, страниц, разделов)
Заголовкам необходимо уделять повышенное внимание. Даже более
важное, чем содержимому, над которым они размещаются.
Особенно тщательно нужно продумать заголовок сайта. Постарайтесь уйти
от шаблона («Сайт школы N»), но не настолько, чтобы запутать
пользователя («Анатомия N»).
Важность заголовков
Заголовки образуют смысловой каркас страницы и часто являются
единственными текстовыми элементами, которые читает пользователь.
Ведь известно, что среднестатистический пользователь не читает сайт, а
просматривает. Что привлекает его внимание при пролистывании страниц?
Это графические элементы и заголовки.
Особую роль заголовкам отводят и поисковые системы, препарирующие
сайты сети для своих баз данных. Именно заголовки, прежде других
фрагментов, предъявляют они в качестве результата поиска.
Заголовок окна (совпадающий с заголовком страницы) автоматически
заносится в журнал «Избранное», когда пользователь делает закладку.
Правила для заголовков
Приведённые рекомендации основаны на описанных выше причинах
важности заголовков.
Смысловая нагрузка
Заголовок должен однозначно отражать основной смысл подзаголовочного
фрагмента.
Красивая абстракция в качестве заголовка малопригодна для сайта.
Предположим, страница описывает поход в лес, в котором ребята увидели
ежа.
Красивое название «Лесная колючка» мало что подскажет пользователю.
Он может подумать, что страница посвящена лесным растениям.
Плагиат «Ёжик в тумане» также плох. Потому что плагиат, и потому что
неточен. (Ну, ладно, ёжик. А причём здесь туман? В лесу никого тумана не
было.)
Очень хочется назвать страницу «Колючая встреча». Этот заголовок хорошо
подходит для печатного рассказа, когда читатель заведомо настроен
прочитать произведение. Но для сайта снова плохо.
Обычный заголовок «Поход в лес» — гораздо лучше. Он сообщает о том, что
заготовлено на странице.
Но хочется в заголовке упомянуть ежа. Это ключевая тема рассказа.
Краткость
Текст «Весёлый поход в лес и встреча с удивительным ежом» хорошо
информирует о содержимом страницы, но длинноват для заголовка.
Считается, что количество слов в заголовке должно быть из диапазона 1–6.
Заголовок «Поход в лес и встреча с ежом» уже лучше.
Первое слово — самое важное
Первое слово привлекает больше внимания, кажется наиболее главным.
Часто только первое слово видно на кнопке страницы, расположенной
на Панели задач.
Самым важным в рассказе на странице является ёж. Значит, это слово надо
написать в заголовке первым.
Фраза «Ёжик в лесном походе» не годится. Можно подумать, что в поход
ходили не ребята.
И озарение. «Ёжик»! Вот название, которое говорит о самом важном: о
еже. Подробности и подоплёку встречи прочитает тот, кто заинтересовался
темой.
Да… А вдруг читатель подумает, что в рассказе описаны виды ежей, их
анатомия, повадки… А у нас просто весёлый рассказ о лесной встрече.
И окончательный вариант: «Ёжик. Лесная встреча».
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Многословные описания, которые можно сократить без
потерь для содержания
Любые тексты надо писать так, чтобы процент «воды» в них был как можно
меньше. Для электронных текстов это важно вдвойне.
Якоб Нильсен о том, как читают пользователи
Якоб Нильсен в своей книге «Веб-дизайн» («Символ», Санкт-Петербург,
2000) ссылается на исследования, которые показали, что чтение с экрана
монитора происходит на 25% медленнее чтения печатного листа.
Значит, только в силу этого фактора необходимо уменьшать количество
текста на странице минимум на 25%.
В статье «Как читают web-пользователи?» Якоб Нильсен пишет (перевод
Александра Качанова):
А никак!
Они вообще редко читают веб-страницы слово за словом; вместо этого они
просматривают страницу, вычитывая отдельные слова и предложения.
В недавно проведенном исследовании я и Джон Моркес обнаружили, что 79%
принимавших участие в тесте, встречаясь с новой страницей, всегда её только
просматривали, и лишь 16 процентов участников читали каждое её слово.
Как вывод, веб-страницы следует писать так, чтобы их было легко просматривать.
Для этого используйте:
выделения ключевых слов (гипертекстовые ссылки могут служить одним из
видов выделения);
грамотно составленные (а не навороченные) подзаголовки;
списки с маркерами;
один абзац на одну идею (пользователи пропустят все остальные идеи, если их
не привлекут ключевые слова абзаца);
стиль перевернутой пирамиды в написании текста, где статья начинается с
заключения;
меньшее количество слов, чем в обычной статье.
Якоб Нильсен о том, как писать тексты для сайта
Якоб Нильсен рекомендует использовать для текстов на сайте стиль
«перевернутой пирамиды»: сначала главный вывод, затем обоснования.
Пользователь, склонный не к чтению, а к просмотру страниц, может не
добраться до вывода, если поместить вывод далеко от начала страницы.
Ниже приводятся выдержки из статьи Якоба Нильсена «Перевернутые
пирамиды в киберпространстве» (перевод Александра Качанова).
Одной из вредных профессиональных привычек человека, имеющего степень
доктора наук, является сильная привязанность к традиционному стилю
представления информации. Я обычно пишу так, как меня учили писать: начать с
основ, а затем постепенно идти к заключению.
...
Журналисты же давно пользуются обратным методом: свои статьи они начинают с
сообщения читателю вывода («После долгих обсуждений, собрание постановило
повысить налоги на 10 процентов»), после чего сообщают самую
важную информацию, а в конце дают подоплеку события.
Этот стиль написания статей называется «Перевернутая пирамида» по той простой
причине, что он переворачивает традиционный стиль написания с ног на голову.
Такой стиль хорош для газет потому, что читатели могут остановиться в любой
момент чтения, и всё равно у них в голове останется вся самая важная информация,
данная в статье.
В Web-е стиль перевернутой пирамиды становится ещё более важным, так как мы
знаем на основании нескольких исследований, что пользователи не проматывают
страницы.
Поэтому они часто ограничиваются чтением верхней части статьи. Лишь самые
заинтересованные читатели промотают страницу, и лишь эти немногие увлеченные
души достигнут основания пирамиды и получат в награду всю вашу историю во всех
её деталях.
Стив Круг об общей болтологии
Ниже приводятся выдержки из 5-ой главы книги Стива Круга «Веб-дизайн»
(«Символ», Санкт-Петербург, 2001).
Избавьтесь от половины слов на каждой странице, затем уберите ещё половину из того, что осталось.
Третий закон Круга
Из пяти или шести вещей, которые мне довелось узнать в школе, одна мне
запомнилась больше других и оказалось самой полезной. Это семнадцатое правило
из «Основ стиля» Э. Б. Уайта:
17. Опустите лишние слова.
Хорошее письмо всегда кратко. Предложение не должно содержать ненужных слов, а абзац не должен
содержать ненужных предложений по той же самой причине, по которой на холсте не должно быть
ненужных линий, а в машине — ненужных деталей.
Глядя на большинство веб-страниц, я поражаюсь тому, что большая часть слов на
них просто занимает место, потому что вряд ли кто будет эти слова читать.
...
Удаление всех тех слов, которые всё равно никто не будет читать, имеет несколько
полезных следствий:
Это снижает уровень шума на страницах.
Это выделяет то содержание страниц, которое действительно
является ценным и полезным.
Это позволяет укоротить страницы так, чтобы пользователи могли видеть
каждую из них одним взглядом, не прокручивая экран.
Никакой «общей болтологии»
Мы сразу же узнаём «общую болтологию», как только видим её, — это
вступительные тексты, служащие для того, чтобы приветствовать вас на сайте и
рассказать о том, какой он замечательный, или же сообщить нам о содержании
раздела, в который мы вошли.
...
Никаких «инструкций»
Другим большим источником ненужных слов являются «инструкции». Главное, что
следует знать об «инструкциях», это то, что их никто не собирается читать.
...
Вашей целью должно стать стремление всегда полностью устранить «инструкции»,
делая всё достаточно ясным без лишних объяснений ( «самоочевидным») или как
можно более ясным. Если «инструкции» всё же действительно необходимы, то
сократите их до минимума.
Томас А. Пауэлл о составлении текстов для Web
Ниже приводятся выдержки из книги Томаса А. Пауэлла «Веб-дизайн»
(«БХВ-Петербург», Санкт-Петербург, 2004).
Текст должен быть кратким и лаконичным. Эксперты полагают, что
электронный текст должен быть примерно в два раза короче, чем обычный
печатный текст.
Сразу переходите к сути. Не начинайте вашу страницу с длинного,
расплывчатого и далёкого от основной темы вступления.
Используйте информативные заголовки. Заголовок ничего не стоит, если он
очень красивый и правильный, но не говорит пользователю о содержании
следующего за ним текста.
Выделяйте вопросы, рассматриваемые на странице. Врезки и выделенный
текст, при правильном их выборе, могут чётко дать пользователю понять, о
чём повествует данная страница, чтобы он мог быстро решить, интересно это
ему или нет.
Используйте списки для обобщения информации. Когда вы имеете дело с
важной информацией, старайтесь не включать её в абзац «однородной
массой», если она может быть представлена в виде маркированного или
пронумерованного списка.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Погрешности стиля изложения
Стиль — это манера изложения текста.
Погрешности стиля затрудняют восприятие материала.
Пример погрешности
Описание
погрешности
Иван открутил гайку болта крепления основания гусеницы.
Слишком много
существительных
в родительном
падеже подряд.
Эта книга абсолютно лучше, чем фильм!
Прилагательное
«лучше» и
наречие
«абсолютно»
плохо
сочетаются друг
с другом.
Синяя белизна неба была восхитительна!
Белизна не
бывает синей.
Кленовые жёлтые листья тихо падали на холодную землю.
Качественное
прилагательное
лучше
записывать
перед
относительным.
Он увидел гриб, не дал ему, а положил его в корзину, потом он
увидел ягоду, он не съел её, а дал ему.
Слишком много
местоимений.
Система проверки правописания Word способна выявить лишь очень
небольшое число стилистических ошибок (автоматике всегда трудно, когда
погрешность связана со смыслом фразы).
Проверив текст в Word, попросите прочитать его человека, хорошо
знающего русский язык.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Заимствованный текстовый материал без ссылок на
автора
Величина штрафа
Рекомендуемый штраф — 0.5 балла. Штраф меньшей величины будет
демонстрировать вашу лояльность к юридически наказуемому деянию.
Пояснение
В тексте Гражданского Кодекса Федерального закона Российской
Федерации, обратите внимание на слова правообладатель и
его исключительные права, цитирование и воспроизведение отрывков.
Нигде нет слов копирование полного текста.
"Гражданский кодекс Российской Федерации (часть IV)"
от 18.12.2006 N 230-ФЗ (ред. от 31.07.2020) (извлечения)
ГК РФ Статья 1229. Исключительное право.
1. Гражданин или юридическое лицо, обладающие исключительным правом
на результат интеллектуальной деятельности... (правообладатель)...
Правообладатель может распоряжаться исключительным правом на
результат интеллектуальной деятельности ...
Правообладатель может по своему усмотрению разрешать или запрещать
другим лицам использование результата интеллектуальной деятельности...
Отсутствие запрета не считается согласием (разрешением)...
...если такое использование осуществляется без согласия
правообладателя, является незаконным и влечет ответственность,
установленную настоящим Кодексом.
ГК РФ Статья 1274. Свободное использование произведения в информационных,
научных, учебных или культурных целях
1. Допускается без согласия автора или иного правообладателя и без выплаты
вознаграждения, но с обязательным указанием имени автора, произведение
которого используется, и источника заимствования:
1. цитирование в оригинале и в переводе в научных, полемических,
критических, информационных, учебных целях, в целях раскрытия
творческого замысла автора правомерно обнародованных
произведений в объеме, оправданном целью цитирования,
включая воспроизведение отрывков из газетных и журнальных
статей в форме обзоров печати;
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Точки в коротких заголовках
Величина штрафа
Каждая ошибка добавляет к штрафу 0.1.
Сумма штрафа ограничена сверху числом 1.0.
Пояснение
Заканчивать заголовок точкой не принято.
Правописание заголовков
Заканчивать заголовок точкой не принято.
Заголовок может заканчиваться знаком вопроса, знаком восклицания,
многоточием.
Как писать заголовки?
Заголовок может заканчиваться знаком вопроса, знаком восклицания,
многоточием.
Внутри сложного заголовка точки допустимы.
Ёжик. Лесная встреча
Вчера мы с Колей ходили в лес. Грибов не набрали, зато видели ёжа.
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Ошибки, связанные с расстановкой пробелов
Величина штрафа
За каждый неверно поставленный пробел (или его отсутствие) добавляется
штраф 0.1.
То же касается случаев (описанных в конце этой страницы), когда вместо
неразрывных пробелов записаны обычные.
Сумма штрафов ограничена сверху числом 1.0.
Пояснение
Правила расстановки пробелов
При записи электронного текста к пробелам нужно относится особенно
внимательно.
Пусть, например, запятая, ошибочно отделённая от слова пробелом,
расположена в середине строки:
Фрося подбежала к хозяину , когда тот позвал её.
Смотрится некрасиво.
А теперь предположим, что в первую строку добавили слово. Браузер
вполне может переформатировать абзац на экране так:
Фрося быстро подбежала к хозяину
, когда тот позвал её.
Не просто некрасиво — ужасно!
Получается, что строка может начаться со знака препинания, если перед
ним стоит пробел!
То же может случиться и при изменении размера шрифта.
Пробел — это разрешение перехода на новую строку.
Таким образом, можно сформулировать мнемоническое правило
расстановки пробелов: пробел ставится в том месте, с которого можно
начать новую строку.
Это правило не является универсальным. Иногда строку нежелательно
разрывать и на месте пробела (например, перед тире). В таких случаях
обычный пробел заменяют неразрывным (код неразрывного
пробела &nbsp;). Например, фраза «Спорт — это жизнь!» кодируется так:
Спорт&nbsp;&mdash; это жизнь!
Перед тире поставлен неразрывный пробел (разрыв строки запрещён),
после тире — обычный (разрыв допустим).
Неверно поставленные пробелы (или их отсутствие) поможет обнаружить
текстовый редактор, такой как Word.
Лишний пробел выделяется волнистой чертой:
Если щёлкнуть по волне правой кнопкой мыши, то можно узнать причину
ошибки:
Ещё одна ошибка, которую часто допускают неопытные писатели, —
отсутствие пробела после запятой. Эту ошибку продвинутый текстовый
редактор также охотно отмечает:
Ниже приводятся основные правила расстановки пробелов.
Пробел ставится после, а не до:
запятой;
точки;
точки с запятой;
двоеточия;
вопросительного знака;
восклицательного знака;
многоточия;
закрывающей скобки;
закрывающей кавычки.
Пробел ставится до, а не после:
открывающей скобки;
открывающей кавычки.
Пробел ставится до и после:
тире.
Пробелы вообще не ставятся при:
дефисе.
Из этих правил есть небольшое количество исключений. Например, пробел
не ставится между открывающей скобкой и следующей за ней
открывающей кавычкой.
Неразрывный пробел
Пробел &nbsp; (NoBreackSPace — не разрывать простанство) потому и
называется неразрывным, что браузеру запрещается использовать его
место для разрыва строки при автоматическом форматировании текста.
Обычный пробел следует заменять неразрывным, когда переход на новую
строку визуально испортит текст или затруднит чтение.
Вот характерные случаи использования этого символа (рекомендации
Дмитрия Кирсанова).
Между инициалами и фамилией.
вид
код
И. Сидоров
И.&nbsp;Сидоров
А. А. Дуванов
А.&nbsp;А.&nbsp;Дуванов
В многословных сокращениях.
вид
код
т. д.
т.&nbsp;д.
т. п.
т.&nbsp;п.
Между знаком номера и параграфа и относящимися к ним числами.
вид
код
№ 13
&#8470;&nbsp;13
§1
&sect;&nbsp;1
Между маркерами пунктов и следующим за ними текстом.
вид
код
a) Первый пункт
a)&nbsp;Первый пункт
1. Первый пункт
1.&nbsp;Первый пункт
Между числами и относящимися к ним единицами измерения величин
и счётными словами.
вид
код
220 В
220&nbsp;В
1024 байт
1024&nbsp;байт
38 попугаев.
38&nbsp;попугаев.
Между числами и относящимися к ним единицами измерения дат.
вид
код
XXI век
XXI&nbsp;век
2001 г.
2001&nbsp;г.
Перед тире в середине предложения (после тире идет обычный
пробел).
вид
код
Пиксел — это точка на экране.
Пиксел&nbsp;&#8212; это точка на экране.
Между классами многозначных чисел, начиная с пятизначных.
вид
код
32 541
32&nbsp;541
4 937 543 246
4&nbsp;937&nbsp;543&nbsp;246
Перед номерами версий программных продуктов и частями их
названий.
вид
код
Windows 2000
Windows&nbsp;2000
Photoshop 5.5
Photoshop&nbsp;5.5
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Ошибки записи символов не входящих в стандартный
набор
Величина штрафа
Каждый экземпляр обнаруженной погрешности добавляет к штрафу 0.1.
Сумма штрафа ограничена сверху числом 1.0.
Пояснение
«Железобетонные» кавычки в виде "дюймов" прижились в компьютерных
текстах с тех давних времён, когда привычные по печатным изданиям
кавычки нельзя было записать на экран, из-за их отсутствия в кодовых
таблицах.
Аналогичные трудности «роста» привели к тому, что в электронных текстах
писали дефис («-») вместо тире («—»), а в качестве знака номера
(«№»)использовали латинскую прописную букву N.
Времена изменились. Теперь нет причин для нарушения правил написания
кавычек, тире и знака номера в стиле русских традиций.
Кавычки
Дмитрий Кирсанов в свой книге «Веб-дизайн» пишет:
Всего существует четыре типа кавычек: «французские» (иначе называемые
«елочки»), „немецкие“ („лапки“), “английские обычные, или двойные”, и ‘английские
одинарные’. В русском языке традиционно применяются французские «ёлочки», а
для «кавычек „внутри“ кавычек» — немецкие „лапки“.
Дмитрий Кирсанов
В последнее время в печатной и электронной продукции на русском языке
помимо традиционных «ёлочек» прижились немецкие и английские
“лапки” (это английский вариант, а вот немецкий: „лапки“).
По крайней мере, "дюймов" вместо кавычек на сайте быть не должно.
Тире и дефис
Тире в два-три раза длиннее дефиса. Тире раньше моделировали при
помощи двух дефисов: «--», а теперь можно записывать в натуральном
виде: «—».
Тире в середине предложения окружается: слева — неразрывным,
а справа — обычным пробелом.
Код предыдущего абзаца записывается так:
Тире в середине предложения окружается:
слева&nbsp;&mdash; неразрывным,
а&nbsp;справа&nbsp;&mdash; обычным пробелом.
Краткий справочник
Ниже приводится краткий справочник специальных символов.
название
знак мнемоника (или код)
амперсанд
&
&amp;
знак «меньше»
<
&lt;
знак «больше»
>
&gt;
неразрывный пробел
&nbsp;
параграф
§
&sect;
copyright
©
&copy;
registered
®
&reg;
знак градуса
°
&deg;
левая елочка
«
&laquo;
правая елочка
»
&raquo;
нижняя лапка
„
&bdquo;
многоточие
…
&hellip;
один. откр. кавычка
‘
&lsquo;
один. закр. кавычка
’
&rsquo;
левая лапка
“
&ldquo;
правая лапка
”
&rdquo;
жирная точка
•
&bull;
средняя точка
·
&middot;
среднее тире
–
&ndash;
длинное тире
—
&mdash;
trademark
™
&trade;
плюс-минус
±
&plusmn;
номер
№
&#8470;
Следует отметить, что если для специального знака в кодовой таблице есть
мнемоническое обозначение, которое поддерживается браузерами, то оно
предпочтительнее цифрового кода. Ведь цифровой код определяет
конкретное место символа в таблице и может быть разным в разных
кодировках.
Больше, меньше, амперсанд
Знаки «<» и «>» служат для обрамления тегов, поэтому для показа на экране
их приходится кодировать.
Текст предыдущего абзаца записан в HTML-коде так:
Знаки &laquo;&lt;&raquo; и &laquo;&gt;&raquo;
служат для обрамления тегов, поэтому для показа
на экране их приходится кодировать.
Но чтобы показать эти коды пришлось закодировать амперсанд:
Знаки &amp;laquo;&amp;lt;&amp;raquo; и
&amp;laquo;&amp;gt;&amp;raquo;
служат для обрамления тегов, поэтому для показа
на экране их приходится кодировать.
Кодовые таблицы (справка)
ASCII
Эта кодировка (American Standart Code for Information Interchange) —
восьмибитная (однобайтовая), но охватывает только 128 символов. Она
включает латинский алфавит, цифры и основные знаки пунктуации. Все
остальные стандартные кодировки совместимы с ней, то есть, размещают
на первых 128 местах те же символы и в том же порядке. Вот почему люди
часто говорят «ASCII», хотя реально используют совсем другие кодировки.
КОИ-8
Первый стандарт кодирования русских букв
(Код Обмена Информации 8 битный). Кодировка применялась еще в 80х годах на ЕС ЭВМ. Сейчас это стандарт для русскоязычной электронной
почты. Понятно, что символы ASCII в ней остались на своих местах (как и в
других 8-битных кодировках).
CP1251
Кодировка Windows (Code Page 1251). Содержит русские буквы.
CP866
Или альтернативная кодировка. Или DOS-кодировка. Используется в
операционной системе MS DOS. Эта кодировка принята в качестве
стандартной в OS/2 и некоммерческой сети Фидо. Содержит русские буквы.
Latin-1
ISO (International Standart Organization) — международная организация по
стандартизации для упорядочивания 8-битных кодировок создала
серию ISO-8859, расширяющих таблицу ASCII:
ISO-8859-1 — латиница с дополнительными символами
ISO-8859-5 — кириллица
ISO-8859-6 — арабский алфавит
ISO-8859-7 — греческий алфавит
ISO-8859-8 — иврит
…
Кодировка ISO-8859-5 для кириллицы не прижилась. А вот кодировка ISO8859-1 для расширенной латиницы стала общепринятым стандартом Latin1.
В эту кодировку входят символы немецкого, французского, испанского и
других алфавитов. Но русских букв в ней, конечно, нет!
Unicode
Стало понятно, что для кодов всех на свете символов одного байта никак не
хватит! Так была придумана двухбайтовая кодировка Unicode.
В этой кодовой таблице (65 636 знакомест) есть все: китайский, корейский,
японский… и даже русский! Все живые, мертвые языки и 30% пока еще
свободного места.
Unicode совместим с ASCII. Это означает, что первые 128 мест заняты под те
же самые символы.
UTF-8
UTF-8 (от англ. Unicode Transformation Format, 8-bit — «формат
преобразования Юникода, 8-бит») — самый распространённый сейчас
стандарт кодирования символов в сети.
UTF-8 является представлением Unicode в 8-битном виде. Символы с кодами меньше
128 представляются одним байтом (латинский алфавит, простейшие знаки
препинания и арабские цифры), а так как в Unicode они повторяют ASCII, то текст
написанный только этими символами будет являться текстом в ASCII.
Символы с кодами от:
128 — кодируются 2-мя байтами.
Кириллица, расширенная латиница, арабский, армянский, греческий,
еврейский и коптский алфавит, сирийское письмо, некоторые знаки
препинания.
2048 — кодируются 3-мя байтами.
Все другие современные формы письменности, сложные знаки препинания;
математические и другие специальные символы.
65536 — кодируются 4-мя байтами.
Музыкальные символы, смайлы, редкие китайские иероглифы, вымершие
формы письменности.
Источник: UTF-8: Кодирование и декодирование // Хабрахабр
Алгоритм кодирования UTF-8
Признак длины кода для каждого символа задаётся старшими битами
первого байта:
— если для кодирования требуется один байт;
110xxxxx — если для кодирования требуется два байта;
1110xxxx — если для кодирования требуется три байта;
11110xxx — если для кодирования требуется четыре байта.
0xxxxxxx
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
Другие грамматические ошибки
Величина штрафа
Каждая грамматическая ошибка (не относящаяся к погрешностям,
описанным в других разделах) добавляет к штрафу 0.1.
При этом причина появления ошибки не учитывается: банальная описка
наказывается так же сурово, как и плохое знание русской грамматики.
Сумма штрафа ограничена сверху числом 1.0.
Пояснение
То ли всех нас плохо учили русскому в школе, то ли сам язык такой
сложный, но редко можно увидеть идеально грамотные сайты.
Особенно неприятны явные описки: они демонстрируют неуважение
разработчика к пользователю.
Как же уменьшить число ошибок в текстах?
Надо пользоваться всеми доступными средствами.
Собственными знаниями.
Бумажными справочниками.
Автоматической проверкой правописания (например, блоком
проверки Word).
Справочными сайтами (например, сайтом gramota.ru).
Помощью знающих людей (например, помощью учителя русского
языка).
© версия 2.1 ♦ 2020/01/18 ♦ А. А. Дуванов kurs@robotland.pereslavl.ru, А. Б. Попович unionlik@gmail.com
