|
|
Нина Дмитриевна Шумилина — учитель информатики Тверской гимназии № 6 рассказывает о своих уроках по теме “Одностраничный документ”. |
Число школьных уроков по теме “Одностраничный документ”: 10.
На этой странице:
На уроке темы:
01. Простейшая HTML-страничка
02. Структура HTML-кода
На доске — тема “Одностраничный документ”, подтемы, домашнее задание. Распечатан опорный конспект урока (на каждого ученика).
Поскольку переход к теме происходит как возврат к учебнику через некоторое время, то вспоминаем, как происходила работа с гипертекстовым учебником.
Вполне вероятно, что в группах найдутся дети с некоторым опытом сайтостроения, поэтому начинается разговор — обращение к опыту ребят…
В роли наблюдателей оказываются те, кому не пришлось ещё знакомиться с технологией конструирования сайтов. Знатоки, как всегда, с удовольствием демонстрируют свое знание, умения, успехи. Конечно, ещё не ясно, насколько объективно их изложение, но как им хочется чувствовать себя специалистами и профи! Пусть расскажут, пусть поделятся. Для учителя знание опыта детей — хорошая основа в последующем планировании работы и распределении ролей и обязанностей при работе над гипертекстовыми проектами.
В одной из учебных групп оказались ребята, решившие создать динамичный, “новостной” сайт о футболе. На момент обсуждения он уже был размещен в Интернете, но ещё шла доработка. В данном случае (скорее всего так будет и в других подобных), использовались визуальные редакторы, автоматически генерирующие коды страниц.
Небольшое отвлечение от хода урока. Как построить уроки одновременно и для начинающих и для ребят, уже занятых своим проектом?
Это проблема, решение которой придется искать учителю, и оно будет зависеть от конкретных обстоятельств. Педагогический опыт говорит о том, что ребятам-самоучкам (в самом хорошем смысле слова) зачастую не хватает системности в знаниях, их технологические умения частенько не подкрепляются теоретической базой. Поэтому в любой ситуации необходимо вовлечь и заинтересовать детей в основательном и системном освоении базовых понятий и подходов. Если по ситуации необходимо, можно показать, что подход, излагаемый в учебнике, принят и другими специалистами.
Например, вот что говорит один из ведущих преподавателей “Центра компьютерного обучения при МГТУ им. Баумана” Ю. Е. Павлов: “Как создаются HTML документы?
- Вручную, при помощи стандартных текстовых редакторов.
Так было (и будет) создано большинство классных страниц. В этом случае всё находится под контролем автора, и он может вносить любые изменения в содержание страницы”.
Далее перечисляются:
- Программы, помогающие при работе с кодом.
- Визуальные редакторы.
(Павлов Ю. Е. Основы HTML и CSS, базовый курс, М., Центр компьютерного обучения при МГТУ им. Баумана, 2001.
Несколько первых опросов покажут реальный уровень подготовки детей.
Вместе с тем, именно их начальное продвижение в материале будет более быстрым. Именно для них, в первую очередь, возникает проблема подготовки индивидуальных планов и заданий, и здесь, безусловно, пригодится материал Академии и другие дополнительные материалы.
Желательно, через некоторое время, запланировать отдельное публичное сообщение и демонстрацию результатов работы группы. Т. е. сделать это на определенном уровне подготовки основной группы, чтобы не просто дать возможность одним ребятам выступить и продемонстрировать свои успехи, что, конечно, хорошо, но постараться подключить группу начинающих к обсуждению, организовать диалог и, главное, пробудить и критическое осмысление, и творческие силы по применению своих знаний и умений.
На этом этапе можно подвести ребят к мысли о гипертексте, как основополагающей составляющей любого сайта. И задать вопрос: “Когда (если не известно точно, то назвать интуитивно) была выдвинута, а затем реализована идея гипертекста? С чьими именами связаны эти даты?”
1945 год, доктор Ванневар Буш, научный советник президента США Рузвельта, упомянул в своей статье “As We May Think” идею машины Memex для быстрого просмотра научной литературы в последовательности, указываемой пользователем, а не в виде линейного текста. Т. е. он впервые высказал идею гипертекста. В 1965 г. на одной из конференций были предложены термины hypertext и hypermedia Тедом Нельсоном, бакалавром философии. В 1967 г. Дуглас Энгельбарт, впоследствии изобретший манипулятор мышь, совместно с Эндрисом Ван Дамом создали первое полноценное гипертекстовое приложение, а также выдвинули впервые идею обратного возврата по ссылке (обязательная кнопка Back в любом современном браузере).
Хорошо обозначить возможность разработки локального гипертекстового приложения (пример — гипертекстовый курс “Азы информатики”).
Демонстрируется пример подобного приложения — шаблон альбома группы, и обозначается, как перспектива, работа каждого ученика над своей страницей. Формулируется домашнее задание (о разработке альбома), которое носит пролонгированный характер.
Содержание, требующее реализации некоторых структурных элементов, должно быть воспринято и понято. Вполне возможно, что по ходу работы оно будет уточняться и корректироваться. “Содержание” проекта распечатывается и раздается каждому ученику.
Предлагается изучить читальные залы двух первых подразделов темы. Кроме этого ставится задача: составить план для краткого (в пределах 3 минут) пересказа прочитанного в соответствии с расположением материала в учебнике.
Для работы раздаю тетрадные листочки для черновой работы. В конце урока предполагается выработать “идеальный” план, который запишем в тетради.
Задание, с одной стороны, организует работу в рамках урока. С другой, полезно для выработки умения выделять главное в тексте. Фактически задание служит тренировке умения сворачивать и разворачивать текст. При этом свернуть можно с разной степенью. Вариант: “1. Простейшая HTML-страничка. 2. Структура HTML-кода.” — тоже ответ на задание, с максимальной степенью сжатия.
Стиль работы отличается значительно. Есть как абсолютные “нелюбители” и “нежелатели” писать, так и те, кто пытается старательно записать полные формулировки определений или разъяснений основных понятий. Ориентир пишущих, в основном, — на ссылки и содержимое страницы (во втором подразделе).
Несмотря на определенность задания, иногда наблюдается “ползание” по тексту всей темы.
Старые лозунги в силе. Не знаешь, как ответить — ищи объяснение в учебнике! Оптимальный вариант — работа в двух окнах!
Щёлкают с упоением! В одной группе большая часть торопится, читает не внимательно, “жаждет” сдать зачёт. Налицо подбор ответов. Постепенно работа входит в более рациональное русло, начинается поиск ответа в тексте урока. Естественный результат — “Незнайки”, с огромнейшим количеством ошибок!
Однако, за общим шумом и суетой основной группы обнаружился знаток, сделавший всего 1 ошибку! И это было очень приятно!
В другой группе, где работали разработчики футбольного сайта, работа пошла в коллективном варианте. Вместе находили верный ответ, в итоге у всех “Профессора”! Но, конечно, не с первого раза. После чернового совместного прохода. Но главное — было желание найти правильные ответы, и они были найдены!
Листочки ребят собрала, и пока шел автоматический зачёт, подготовила на доске план рассказа, который отдельными элементами совпадал с ребячьими заготовками.
Обращаю внимание детей на распространенное устройство гипертекстовых страниц: план текста расположен вверху страницы, каждый пункт его — гиперссылка на соответствующее место в тексте. Поэтому, в принципе, необходимый план второго подраздела уже был готов. Не хватало только плана первой части. В итоге возможен следующий вариант выполнения задания:
В процессе составления своих планов большинство ребят стремилось зафиксировать названия соответствующих тегов. Возможно, останется желание сохранить их и в плане.
Пока обсуждали полученный результат и фиксировали его в тетради, не только повторили, но и обобщили материал урока.
Фиксируется вторая часть домашнего задания: шаблон HTML-программы, изученные теги, упражнение.
Всем раздается распечатанный опорный конспект из учебника, который поможет в домашней работе.
Очевидно начало следующего занятия: повторение материала по записанному плану с обсуждением деталей.
Тема занятия: структура HTML-кода, практикум, письменный зачет.
На доске — тема урока, домашнее задание.
В начале урока можно провести демонстрацию автоматического генерирования кода гипертекстовой страницы, например, хорошо знакомым всем редактором Word. Очень наглядно сгенерировать страницу, соответствующую домашнему упражнению. С одной стороны наглядна избыточность результата, с другой — обеспечен естественный переход к “ручному” выполнению упражнения.
Возможны вопросы ребят о том, что браузер может отображать текст без всяких тегов HTML. Действительно, это так, но текст будет выводится, либо в виде одного абзаца, либо “как есть” моноширинным шрифтом. Если предполагается какое-то форматирование и структурирование (пропорциональный шрифт, заголовки, выделения, списки, таблицы) и иллюстративный материал, без использования HTML не обойтись.
При наличии готового плана, этап повторения вполне понятен. В таком варианте хорошо использовать вопросы к уроку. Они как раз соответствуют порядку изложения.
Следует обязательно остановиться на вопросе отличия элемента от тега. Можно обратиться к спецификации HTML от W3C (ссылка элементы) и рассмотреть соотношение элементов и тегов на этой основе.
Задания практикума позволяют выполнить две работы, для подготовленных и быстрых, или одну для начинающих и неспешных.
При выполнении заданий практикума стоит обратить внимание (возможны ошибки) на следующие моменты.
content="text/html; charset=windows-1251">она заканчивается символом на 52 позиции.
Перед письменным зачетом можно повторить электронный зачёт и (или) теоретический материал учебника.
Письменный зачёт можно несколько разнести по времени: кто-то может задержаться с Практикумом. Но в любом случае не следует ограничивать письменный зачёт временем, меньшим, чем 10 минут.
Задания письменного зачёта приводятся ниже.
На уроке темы:
03. Как работает браузер
04. Улучшенная HTML-страничка
На доске — тема урока, домашнее задание. Подготовлены кодировочные таблицы Windows-1251 и KOI8-R.
Отдельное обсуждение посвящается вопросу о различных кодировках символов текста. Раздел “Кодировка” выделен в справочнике и ссылка на него расположена на первой странице урока 9.
Прошу открыть гипертекстовый учебник и поменять кодировку в браузере на KOI8-R. Затем возвращаемся к прежней кодировке. Прошу ребят объяснить, что произошло? От не совсем внятных отрывочных предложений приходим к связному и понятному объяснению.
Выполняем следующее упражнение в тетрадях (или на листочках)
| Коды символов | Вид текста по таблице Windows-1251 |
|---|---|
| 207 229 240 226 251 233 | Первый |
| 72 84 77 76 45 | HTML- |
| 228 238 234 243 236 229 237 242 | документ |
| Коды символов | Вид текста по таблице 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): “Библиотека Конрада, куда часто захаживали случайные посетители, небрежно пролистывавшие книги и становившиеся потом серьезными читателями” пока никто не сделал верно. Хотя учителя английского языка согласны с тем, что такое задание соответствует программе. Похоже, что работает установка: английский — на английском, на информатике — информатика! А жаль.
План рассказа по двум изучаемым подпунктам урока несложен. Перед учениками ставится задача зафиксировать в тетради свой вариант плана.
На доске можно записать то, что должно появиться в тетрадях:
Аналогично с предыдущим практикумом следует обратить внимание ребят на возможные ошибки.
Желательно, чтобы содержательная часть страничек постепенно конкретизировалась. К моменту изучения подпункта 8 книжного урока, текст должен быть готов. Вполне возможно, что “передовики” сделают страничку раньше. В таком случае им предоставляется возможность осваиваться с приложением “Проверка сайта” и приступать к критическому осмыслению полученного результата, т. е. заняться самопроверкой.
