Возврат

Нина Дмитриевна Шумилина — учитель информатики Тверской гимназии № 6 рассказывает о своих уроках по теме “Одностраничный документ”.

На уроке у Нины Дмитриевны

Тема “Конструирование сайтов” достаточно автономна, т.  e. позволяет осваивать её независимо от других тем. Хотя, безусловно, последовательное освоение материала всей книги является предпочтительным.

Предлагаемый опыт является входом в сайтостроение “со стороны”.

Замечание автора книги. Согласен с автономностью темы, но гораздо эффективнее начинать изучение сайтостроения после погружения в тему “Web-пространство Интернета”. Ребята предварительно познакомятся со средой, для которой им предстоит разрабатывать собственные проекты.

Число школьных уроков по теме “Одностраничный документ”: 10.

На этой странице:

• Урок 1
• Урок 2
• Урок 3
• Итоги изучения темы

Урок 1

На уроке темы:

01. Простейшая HTML-страничка
02. Структура HTML-кода

На доске — тема “Одностраничный документ”, подтемы, домашнее задание. Распечатан опорный конспект урока (на каждого ученика).

1. Введение в тему “Конструирование сайтов”

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

Вполне вероятно, что в группах найдутся дети с некоторым опытом сайтостроения, поэтому начинается разговор — обращение к опыту ребят…

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

В одной из учебных групп оказались ребята, решившие создать динамичный, “новостной” сайт о футболе. На момент обсуждения он уже был размещен в Интернете, но ещё шла доработка. В данном случае (скорее всего так будет и в других подобных), использовались визуальные редакторы, автоматически генерирующие коды страниц.

Небольшое отвлечение от хода урока. Как построить уроки одновременно и для начинающих и для ребят, уже занятых своим проектом?

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

Например, вот что говорит один из ведущих преподавателей “Центра компьютерного обучения при МГТУ им. Баумана” Ю. Е. Павлов: “Как создаются HTML документы?

1. Вручную, при помощи стандартных текстовых редакторов.

Так было (и будет) создано большинство классных страниц. В этом случае всё находится под контролем автора, и он может вносить любые изменения в содержание страницы”.

Далее перечисляются:

1. Программы, помогающие при работе с кодом.
2. Визуальные редакторы.

(Павлов Ю. Е. Основы HTML и CSS, базовый курс, М., Центр компьютерного обучения при МГТУ им.  Баумана, 2001.

Несколько первых опросов покажут реальный уровень подготовки детей.

Вместе с тем, именно их начальное продвижение в материале будет более быстрым. Именно для них, в первую очередь, возникает проблема подготовки индивидуальных планов и заданий, и здесь, безусловно, пригодится материал Академии и другие дополнительные материалы.

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

На этом этапе можно подвести ребят к мысли о гипертексте, как основополагающей составляющей любого сайта. И задать вопрос: “Когда (если не известно точно, то назвать интуитивно) была выдвинута, а затем реализована идея гипертекста? С чьими именами связаны эти даты?”

1945 год, доктор Ванневар Буш, научный советник президента США Рузвельта, упомянул в своей статье “As We May Think” идею машины Memex для быстрого просмотра научной литературы в последовательности, указываемой пользователем, а не в виде линейного текста. Т. е. он впервые высказал идею гипертекста. В 1965 г. на одной из конференций были предложены термины hypertext и hypermedia Тедом Нельсоном, бакалавром философии. В 1967 г. Дуглас Энгельбарт, впоследствии изобретший манипулятор мышь, совместно с Эндрисом Ван Дамом создали первое полноценное гипертекстовое приложение, а также выдвинули впервые идею обратного возврата по ссылке (обязательная кнопка Back в любом современном браузере).

Хорошо обозначить возможность разработки локального гипертекстового приложения (пример — гипертекстовый курс “Азы информатики”).

Демонстрируется пример подобного приложения — шаблон альбома группы, и обозначается, как перспектива, работа каждого ученика над своей страницей. Формулируется домашнее задание (о разработке альбома), которое носит пролонгированный характер.

Содержание, требующее реализации некоторых структурных элементов, должно быть воспринято и понято. Вполне возможно, что по ходу работы оно будет уточняться и корректироваться. “Содержание” проекта распечатывается и раздается каждому ученику.

2. Постановка задачи для работы с электронным учебником

Предлагается изучить читальные залы двух первых подразделов темы. Кроме этого ставится задача: составить план для краткого (в пределах 3 минут) пересказа прочитанного в соответствии с расположением материала в учебнике.

Для работы раздаю тетрадные листочки для черновой работы. В конце урока предполагается выработать “идеальный” план, который запишем в тетради.

Задание, с одной стороны, организует работу в рамках урока. С другой, полезно для выработки умения выделять главное в тексте. Фактически задание служит тренировке умения сворачивать и разворачивать текст. При этом свернуть можно с разной степенью. Вариант: “1. Простейшая HTML-страничка. 2. Структура HTML-кода.” — тоже ответ на задание, с максимальной степенью сжатия.

3. Читальный зал первых двух подразделов (за компьютером)

Стиль работы отличается значительно. Есть как абсолютные “нелюбители” и “нежелатели” писать, так и те, кто пытается старательно записать полные формулировки определений или разъяснений основных понятий. Ориентир пишущих, в основном, — на ссылки и содержимое страницы (во втором подразделе).

Несмотря на определенность задания, иногда наблюдается “ползание” по тексту всей темы.

4. Зачёт в электронном учебнике (проба)

Старые лозунги в силе. Не знаешь, как ответить — ищи объяснение в учебнике! Оптимальный вариант — работа в двух окнах!

Щёлкают с упоением! В одной группе большая часть торопится, читает не внимательно, “жаждет” сдать зачёт. Налицо подбор ответов. Постепенно работа входит в более рациональное русло, начинается поиск ответа в тексте урока. Естественный результат — “Незнайки”, с огромнейшим количеством ошибок!

Однако, за общим шумом и суетой основной группы обнаружился знаток, сделавший всего 1 ошибку! И это было очень приятно!

В другой группе, где работали разработчики футбольного сайта, работа пошла в коллективном варианте. Вместе находили верный ответ, в итоге у всех “Профессора”! Но, конечно, не с первого раза. После чернового совместного прохода. Но главное — было желание найти правильные ответы, и они были найдены!

5. Запись плана изложения материала

Листочки ребят собрала, и пока шел автоматический зачёт, подготовила на доске план рассказа, который отдельными элементами совпадал с ребячьими заготовками.

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

1. Простейшая HTML-страничка
   • Гипертекстовый документ: HTML (кодирование), браузер (показ)
   • Конструкции HTML: элементы и теги
2. Структура HTML-кода
   • Головная часть HTML-программы
   • Тело программы
     • Заголовки
     • Горизонтальная линия
     • Абзац
     • ...
   • Стиль записи кода программы
     • Лесенка
     • Короткие строки
     • Теги большие, атрибуты маленькие

В процессе составления своих планов большинство ребят стремилось зафиксировать названия соответствующих тегов. Возможно, останется желание сохранить их и в плане.

Пока обсуждали полученный результат и фиксировали его в тетради, не только повторили, но и обобщили материал урока.

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

Всем раздается распечатанный опорный конспект из учебника, который поможет в домашней работе.

Очевидно начало следующего занятия: повторение материала по записанному плану с обсуждением деталей.

Урок 2

Тема занятия: структура HTML-кода, практикум, письменный зачет.

На доске — тема урока, домашнее задание.

1. Повторение теории по записанному плану

В начале урока можно провести демонстрацию автоматического генерирования кода гипертекстовой страницы, например, хорошо знакомым всем редактором Word. Очень наглядно сгенерировать страницу, соответствующую домашнему упражнению. С одной стороны наглядна избыточность результата, с другой — обеспечен естественный переход к “ручному” выполнению упражнения.

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

При наличии готового плана, этап повторения вполне понятен. В таком варианте хорошо использовать вопросы к уроку. Они как раз соответствуют порядку изложения.

Следует обязательно остановиться на вопросе отличия элемента от тега. Можно обратиться к спецификации HTML от W3C (ссылка элементы) и рассмотреть соотношение элементов и тегов на этой основе.

2. Практикум

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

При выполнении заданий практикума стоит обратить внимание (возможны ошибки) на следующие моменты.

1. Запись лесенкой.
2. Запись тегов большими буквами.
3. Длина строки в пределах 80 символов. Можно ориентироваться на строчку:

   content="text/html; charset=windows-1251"> 
   

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

3. Повторение электронного зачёта

Перед письменным зачетом можно повторить электронный зачёт и (или) теоретический материал учебника.

4. Письменный зачёт

Письменный зачёт можно несколько разнести по времени: кто-то может задержаться с Практикумом. Но в любом случае не следует ограничивать письменный зачёт временем, меньшим, чем 10 минут.

Задания письменного зачёта приводятся ниже.

Задания в формате Word

Урок 3

На уроке темы:

03. Как работает браузер
04. Улучшенная HTML-страничка

На доске — тема урока, домашнее задание. Подготовлены кодировочные таблицы Windows-1251 и KOI8-R.

1. Кодировки для символов текста, проверка домашнего задания

Отдельное обсуждение посвящается вопросу о различных кодировках символов текста. Раздел “Кодировка” выделен в справочнике и ссылка на него расположена на первой странице урока 9.

Прошу открыть гипертекстовый учебник и поменять кодировку в браузере на KOI8-R. Затем возвращаемся к прежней кодировке. Прошу ребят объяснить, что произошло? От не совсем внятных отрывочных предложений приходим к связному и понятному объяснению.

Выполняем следующее упражнение в тетрадях (или на листочках)

1. Записать в тетради коды символов фразы “Первый HTML-документ“ по таблице Windows-1251. Должен получиться такой список кодов:

   Коды символов	Вид текста по таблице Windows-1251
   207 229 240 226 251 233	Первый
   72 84 77 76 45	HTML-
   228 238 234 243 236 229 237 242	документ

2. Отобразить записанные коды в символы по таблице KOI8-R.

   Коды символов	Вид текста по таблице Windows-1251	Вид текста по таблице KOI8-R
   207 229 240 226 251 233	Первый	оЕПБШИ
   72 84 77 76 45	HTML-	HTML-
   228 238 234 243 236 229 237 242	документ	ДНЙСЛЕМР

Теперь механизм понят всеми и те слова, которые даны в ответах на вопросы к подразделу “Структура HTML-кода”, звучат естественно и осмысленно:

“Указание кодировки браузер использует для выбора кодовой таблицы, задающей соответствие между кодами символов и их образами на экране.

Что произойдёт, когда браузер будет интерпретировать HTML-код с неверно указанной кодировкой? Ответ: текст на экране будет в нечитаемом виде”.

Перевод предложения, взятого из электронного словаря Lingvo (запрос перевода термина browser): “Библиотека Конрада, куда часто захаживали случайные посетители, небрежно пролистывавшие книги и становившиеся потом серьезными читателями” пока никто не сделал верно. Хотя учителя английского языка согласны с тем, что такое задание соответствует программе. Похоже, что работает установка: английский — на английском, на информатике — информатика! А жаль.

2. Работа с учебником, читальный зал

План рассказа по двум изучаемым подпунктам урока несложен. Перед учениками ставится задача зафиксировать в тетради свой вариант плана.

На доске можно записать то, что должно появиться в тетрадях:

3. Как работает браузер
4. Улучшенная HTML-страничка
   • Браузер игнорирует концы строк
   • Принудительный разрыв строки

3. Практикум

Аналогично с предыдущим практикумом следует обратить внимание ребят на возможные ошибки.

4. Обсуждение вопросов по работе с альбомом (индивидуально)

Желательно, чтобы содержательная часть страничек постепенно конкретизировалась. К моменту изучения подпункта 8 книжного урока, текст должен быть готов. Вполне возможно, что “передовики” сделают страничку раньше. В таком случае им предоставляется возможность осваиваться с приложением “Проверка сайта” и приступать к критическому осмыслению полученного результата, т. е. заняться самопроверкой.

Возврат