Описание проектаНа этой странице:
Описание проектаКоманда разработчиков (ученики, изучающие курс, и преподаватель — руководитель проекта) создаёт гипертекстовый альбом с представлением членов команды. Альбом состоит из главной страницы (файл index.htm) и отдельных страниц участников проекта (файлы 01.htm, 02.htm…).
Шаблон проекта:
На данном этапе обучения знаний слишком мало, чтобы сделать такой альбом полностью самостоятельно. Поэтому в состав команды разработчиков включён автор курса.
Автор подготовил макет альбома с шаблонами страниц для других участников.
Нулевая страница (файл 00.htm) содержит представление автора курса, первая (файл 01.htm) — шаблон представления преподавателя, вторая (файл 02.htm) — шаблон представления ученика.
Правила создания страницыПреподаватель копирует шаблон альбома из каталога ./net/album/ в рабочий (пустой) каталог.
Каждый участник создаёт свой файл (на базе шаблона Ивановой Евлампии Спиридоновны и шаблона Петра Мячикова), именуя его nn.htm (01.htm — для преподавателя, 02.htm — для первого ученика) в соответствии с гипертекстовым меню на главной странице альбома.
Имена файлов картинок для участника с номером nn задаются так:
Картинки располагаются в каталоге pic “рабочего” альбома.
Структура и дизайнИспользуйте структуру, заданную шаблонами.
Нельзя менять сам шаблон (менять навигацию, задавать другой цвет фона, использовать другой логотип и заголовок, другой тип выравнивания абзацев и т. д.).
Нельзя создавать дополнительные страницы и записывать переходы на них со страницы nn.htm.
Смысл этих ограничений: страницы альбома должны иметь один стиль, чтобы весь альбом смотрелся единым продуктом. Будем считать, что мы коллективно работаем над одним продуктом под общим руководством автора курса! Автор задал стиль и дизайн. Преподаватели (руководители рабочих групп на местах) должны проследить, чтобы их сотрудники (ученики) этот стиль выдерживали.
СодержаниеТекстовое содержание должно быть коротким, но при этом необходимо следовать рекомендациям, записанным в шаблоне Петра Мячикова:
Представление члена команды
В этом тексте нужно использовать: строчные цитаты (элемент CITE), блочные цитаты (элемент BLOCKQUOTE), знак номера, тире, кавычки, прямую речь, фамилию с инициалами.
Старт
Описываются познания в гипертекстовом строительстве к началу занятий на курсе и список сайтов Интернета, которые часто посещаются или просто известны. Список должен быть закодирован при помощи элемента UL.
Владение инструментарием
В какой мере, и каким инструментарием, полезным для сайтостроительства, владеет автор страницы. Привести список браузеров в порядке убывания их популярности. Список должен быть закодирован при помощи элемента OL. Название компьютерных программ нужно выделить при помощи элемента EM.
Результат
Назвать ожидаемый результат обучения (построить собственный сайт; вместе с товарищами сделать сайт школы; научиться сайтостроению на всякий случай; другое…). В тексте этого раздела дать определение понятиям “сайтостроительство” и “хороший сайт”. Определяемые понятия выделять при помощи элемента DFN. Кроме того, использовать в тексте сильное выделение при помощи элемента STRONG.
Каждая картинка должна “весить” не более 30 Кбайт. На самом деле, 30 Кбайт для картинки на сайте — это тоже много. Но до темы оптимизации графики ещё далеко (обратите внимание на килобайтный размер картинок автора).
Можно использовать дополнительно одну, две картинки, если они не нарушат общий стиль продукта.
Если с подготовкой картинок возникают проблемы, можно обойтись без них, отложив эту работу до урока 12. Вместо фото участника обучения можно использовать муляж Петра Мячикова (картинка 0201sh.jpg) или Кати Пушковой (картинка 0301sh.jpg):
Стиль кодированияПридерживайтесь стиля HTML-кодирования, рекомендованного в этом уроке и демонстрируемого страницей автора. В частности, руководствуйтесь следующими правилами:
ИнструментарийДля записи кода рекомендуется использовать редактор PSPad или, что хуже, стандартный Блокнот Windows.
Правильность кода можно проверять при помощи программы CSE HTML Validator Lite.
Для подготовки фотографий можно использовать Photoshop или другой растровый редактор из рекомендованных на странице: “Инструменты для разработки сайта”.
Проверка работВ качестве возможного варианта предлагается описанный ниже способ проверки работ.
Проверка работ организуется перекрёстно: каждый участник проверяет несколько работ товарищей.
Проверяющий изучает работу и составляет список погрешностей. Автор страницы работает над ошибками и передаёт на проверку исправленный вариант. Так продолжается то тех пор, пока проверяющий не сможет найти в работе ни одной ошибки и ставит за страницу “зачёт”.
Зачтённые работы передаются преподавателю. Преподаватель либо подтверждает “зачёт”, либо передаёт автору список новых ошибок. Исправленный вариант автор показывает преподавателю.
Типичные ошибкиПредлагается список типичных ошибок, которые автор составил по результатам собственной проверки страниц альбома на курсе 42 Роботландского университета.
Ошибки упорядочены в порядке убывания “популярности”. Рейтинг ошибки оценивается числом работ, в которых она была обнаружена, и для удобства представлен в процентах. За 100% принимается рейтинг ошибки с номером 01, обнаруженной в наибольшем количестве работ. Так как эта ошибка присутствовала практически во всех работах, можно считать, что рейтинг отражает вероятность появления ошибки в каждой конкретной работе.
Разработчики должны обязательно познакомиться со списком ошибок до выполнения работы, чтобы уменьшить число погрешностей на своих страничках.
При проверке работ можно подробно не комментировать погрешность, а просто указать её номер в этой таблице.
Дополнительно при проверках можно начислять штрафы по рекомендациям, приведённым ниже. Вычитая накопленные штрафы, например, из числа 5 можно получить числовую оценку за выполненную работу.
| Номер | Рейтинг | Погрешность | Штраф | Описание |
|---|---|---|---|---|
| 01 | 100 | Ошибки, связанные с расстановкой пробелов | 0.1–1.0 |
|
| 02 | 83 | Работа не соответствует техническому заданию. | 0.1 | Неверные имена файлов, нарушение авторского дизайна страницы, другие нарушения ТЗ. |
| 03 | 64 | Дефис вместо тире, дюймы вместо кавычек, буква N вместо знака номера, неверное употребление (кодирование) спецсимволов. | 0.1–1.0 |
|
| 04 | 52 | Картинки смотрятся как заплаты. | 0.1 |
|
| 05 | 50 | Грамматические ошибки. | 0.1–1.0 |
|
| 06 | 48 | Не работает ссылка. | 0.1 |
|
| 07 | 40 | Искажение картинки размерными атрибутами. | 0.1–0.5 |
|
| 08 | 38 | Строки кода длиннее 80 символов. | 0.1–0.5 |
|
| 09 | 36 | Использование BR вместо P. | 0.1 | Не надо использовать BR вместо P. Если абзац предполагается один, то использовать BR тем более не надо, за исключение редких случаев (как в заголовке руководителя). Необоснованные переводы строк мешают браузеру нормально (без гребёнки) форматировать текст по ширине окна. |
| 10 | 33 | Отсутствие лесенки на теговом каркасе. | 0.1–0.5 |
|
| 11 | 29 | Погрешности стиля изложения. | 0.1 |
|
| 12 | 14 | Явные погрешности в качестве графического материала. | 0.1 |
|
| 13 | 14 | Размер картинки превышает лимит ТЗ (30 Кбайт). | 0.1–0.5 |
|
| 14 | 10 | На фотографиях не видно лиц. | 0.1 | Иллюстрация не достигает цели. Можно теснее поставить ребят, применить кадрирование или фотомонтаж. |
| 15 | 10 | Ошибка регистра в именах каталогов и файлов. | 0.1–0.5 |
|
| 16 | 10 | Нарушение правил читаемости кода. | 0.1–0.5 |
|
| 17 | 7 | Название окна не совпадает с заголовком страницы. | 0.1 |
|
| 18 | 2 | Многочисленные выделения одного и того же элемента. | 0.1 |
|
| 19 | 2 | Применение табуляции при записи кода. | 0.1 | Структурная лесенка может быть разрушена. Дело в том, что у каждого пользователя значения табуляции могут быть настроены по-разному, у кого на 2 пробела, а у кого на 8. |
| 20 | 2 | Ошибки кодирования. | 0.1–0.5 |
|
| 21 | 2 | Выделение заглавными буквами. | 0.1 | Такое выделение традиционно считается и воспринимается как крик. |
| 22 | 2 | Движущиеся и мерцающие надписи. | 0.1–0.5 |
|
| 23 | 2 | Отсутствие alt-значений в информационных иллюстрациях. | 0.1 |
|
| 24 | 2 | Слишком большие абзацы. | 0.1 |
|
| 25 | 2 | Не указаны атрибуты width и height в теге IMG. | 0.1–0.5 |
|
| 26 | 1 | Ошибка, не описанная в других пунктах. | 0.1 | Проверяющий подробно описывает погрешность. |
