Web-страница сайта школы нашими глазами

Разделы: Информатика


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

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

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

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

Создание Web-страниц осуществлялось с помощью языка разметки гипертекста (HTML). Основой в HTML технологии – это использование управляющих символов – тегов, при помощи которых можно изменить цвет символов, фон, определить положение текста, бегущей строки, вставить гиперссылки на различные объекты: изображения, анимацию, звук и т.п.. При просмотре данного документа в браузере мы получим Web-страницу, которую в последствии можем отредактировать.

Данный урок – заключительный по теме дизайн Web-страницы. Урок проведен в условиях сельской образовательной школы, в виде учебно-деловой игры с использованием проблемно – исследовательской, проектной и игровой технологии.

В этой разработке вы будете наблюдать творческие приёмы, различные формы и методы работы с одаренными детьми.

Цель:

Повышение компьютерной грамотности и компетентности учащихся, в вопросе создания и дизайна Web-страниц, способствование развитию интеллектуальных способностей и познавательных интересов к информационным технологиям, создание условий для формирования интереса к профессиям связанным с мультипликацией, дизайном

Задачи:

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

Тип урока: урок обобщение по теме: «Дизайн Web-страницы»

Методы обучения: обучение школьников навыкам самостоятельной индивидуальной и групповой работы по практическому конструированию сайта

Основные приемы, используемые на уроке: метод проектов, «мозговая атака», проблемные задачи, разноуровневые тесты с последующей самопроверкой, практическая работа, игра

Формы работы: групповая, парная, индивидуальная, игровая

Создание структур Web-страниц осуществлялось в текстовом редакторе Блокнот.

Просмотр HTML страниц осуществляется с помощью браузера-Internet Explorer.

Оборудование: ПК, проектор, возможно использование интерактивной доски, карточки с тестами, ключи к тестам, шаблон основных HTML кодов, карточки с вариантами, шаблоны Web-страниц, проекты учащихся, таблица «Цветовые имена и sRGB значения», карточки контроля, личные таблички учащихся

Данный творческий проект по информатике может рассматривается как одна из форм итоговой аттестации учащихся на элективном курсе «Создание сайта» в 9–10 классе.

План урока:

  1. Организационный момент
  2. Постановка проблемы
  3. Определение цели и задач урока
  4. Игра «ВСК-ДС».
  • «Устами умных детей глаголет истина» – тест
  • История HTML. Доклад учащегося
  • «Мозговая атака мудрецов» -2 этапа-
  1. Узнайте, каков внешний вид страницы по HTML-коду – работа в группе
  2. По внешнему виду Web-страницы расскажите об основных используемых тегах – индивидуальная самостоятельная работа с ПК
  • «Правила хорошего тона при создании сайта» – работа в группе
  • Пресс – конференция на тему: «Web-страница сайта школы нашими глазами»
    (Было предложено учителем – воспользоваться правом выбора -желающим представить и защитить проект или отказаться от защиты своего проекта, со стороны -Учителя уважение любого выбора), анализ и оценивание предоставляется критикам, учитель подводит итог, благодарит за проделанную работу.
  • Создай личный мини WEB– сайт используя шаблоны WEB-страниц – индивидуальная работа с ПК, используя гиперссылки, либо создание панели навигации, слабым учащимся разрешается воспользоваться основными тегами
  • Рефлексия
  1. Подведение итогов урока.

Важно, что каждый этап на уроке анализируется, подводится итог этапа, оценивается, двойки не ставятся.

Ход урока

1. Организационный момент

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

Сегодня у нас необычное занятие, я предлагаю вам принять участие в учебно-деловой игре «ВСК-ДС», что означает «Временно созданный коллектив – дизайнеров сайта». Определите цель и задачи, которые вы ставите перед собой на данном уроке (работа в группе -1 мин (учащиеся обсуждают и ставят цели самостоятельно – учитель грамотно корректирует и формулирует, подводит итог– фиксирует цели на доске)).

Во времена, когда Интернет шагает по стране, перед школой возникает вопрос, как показать уникальность родного учреждения, как создать «Виртуальный образ любимой школы», поэтому сегодня в нашем кабинете будет работать коллектив специалистов созданный для решения глобальной проблемы «Web-страница сайта школы нашими глазами». На прошлом уроке вы были разделены на две группы, где были выделены следующие должности (у учащихся личная табличка с должностью и Ф.И.)

  • ответственный руководитель по совместительству спикер
  • критик
  • организатор информационного обеспечения
  • исполнитель
  • секретарь

Каждая группа подготовила «Web-страницы», которые вы представите чуть позже, а мы начинаем нашу игру «ВСК-ДС»

3. Игра «ВСК-ДС» (тестовые задания)

  • И первый этап игры «Устами умных детей глаголет истина» (тестовые задания с последующей проверкой – на доске при помощи проектора высвечиваются ответы и критерии отметок, учащиеся меняются листами и оценивают друг друга.). Вам индивидуально предлагается ответить на тестовые задания по теме «Интернет», после того как вы справитесь с тестом, вы меняетесь работами и по ключам проверяете их, выставляя итоговую отметку в таблицу результатов после каждого этапа работы – спикером. На всю работу 4 мин (см. Приложение 1, Приложение 2).
  • Я предлагаю вам немного отдохнуть и послушать доклад по теме: «История HTML». Доклад учащегося (после: анализ часто встречающихся терминов в докладе (работа на развитие внимательности)), – незнакомые термины можно найти, через поисковые системы в сети Интернет.
  • HTML – это … например, ответ учащихся (язык разметки гипертекста позволяющий с помощью управляющих меток или тегов определить структуру и внешний вид HTML документа при отображении в браузере, а так же создать ссылки на другие файлы )
  • Браузер – это…(если возникают затруднения, организаторы информационного обеспечения находят значение этого слова в сети Интернет, через поисковые системы)
  • Теги – это…
  • Гипертекст – это…

Учитель подводит итог.

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

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

Первый этап: «Мозговой атаки мудрецов» -проблемные ситуации

Узнайте, каков внешний вид страницы по HTML-коду (работа в группах– см. Приложение 3), после обсуждения учащимися выдвинутых гипотез, секретарь фиксирует, командир выдвигает гипотезу и описывает внешний вид своей страницы -Учитель через проектор представляет внешний вид страниц, заранее на первом слайде с ошибкой – вместо фотографии высвечивается крестик, просит объяснить детей, что произошло и как это можно исправить (неправильно прописан адрес нахождения объекта) подводит итог, выявляет с детьми трудности, вместе анализирует этап, устраняет пробелы, если таковые есть.

Второй этап: Следующие задание: по внешнему виду Web-страницы расскажите о основных используемых тегах? Я предлагаю вам обратиться к компьютерам и выполнить индивидуальную работу по вариантам, вы можете выбрать уровень самостоятельно, на рабочем столе находятся папочки названные отметками. (разноуровневые карточки на рабочих столах ПК (см. Приложение 4) – свободный выбор варианта учащимся, через несколько мин. Þ работа устно – учащиеся описывают внешний вид, с правом воспользоваться помощью в случае затруднения – Учителя или любого ученика класса, слабым учащимся можно предложить основные HTML-коды, проверка на ПК выдвинутых гипотез – проверка). Слабые учащиеся имеют право воспользоваться таблицей основных тегов, таблицей цветов

Учитель подводит итог работы:

Молодцы вы все показали высокий уровень профессионализма в знании теории тегов HTML.

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

И так, определите правила хорошего тона при создании сайта (работа в группах– устно, учитель на доске фиксирует все предложения учащихся. Обсуждение длится 2мин.

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

Дети предлагают свод правил, которых надо придерживаться при создании хорошего сайта, например такие:

  • четко сформулировать назначение сайта, цель и задачи
  • избегать крупных изображений, FLASH – анимаций и апплетов
  • сделать сайт привлекательным
  • прокрутка должна быть сверху – вниз
  • не переполнять скриптами
  • не пытаться разместить все на одной странице
  • использовать каскадные таблицы стилей, что облегчит страницу
  • золотое правило: «Сделать так, чтобы пользователю было удобно»

3. Пресс-конференция на тему: «Web-страница сайта школы нашими глазами» (Защита мини-проектов учащихся по плану представленному заранее:

  1. Постановка проблемы, цель, задачи, методы проекта, ожидаемые результаты.
  2. Что делал? Как делал? Как можно было иначе выполнить проект?)

Было предложено учителем – воспользоваться правом выбора – желающим представить и защитить проект или отказаться от защиты своего проекта, со стороны – Учителя уважение любого выбора.

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

Представление и защита проектов, вопросы критиков команде соперников, анализ выполненных проектов с точки зрения критиков

Заполнение карт – оценивание проекта критиками (см. Приложение 5, Приложение 6)

Анализ работ учителем, предложения, благодарность всем участникам пресс-конференции

4. Создай свой мини WEB-сайт, используя проекты WEB-страниц (представление результатов) индивидуальная работа на ПК, используя гиперссылки, либо создай панель навигации. Разрешается воспользоваться основными тегами которые находятся на рабочем столе ПК. Ученики объединяют страницы, представляют результат.

Учитель и его помощники (сильные дети – которые работали над созданием своего сайта на уроке) помогают, проверяет, оценивают.

5. Рефлексия

Учитель:

  1. Какие задания вам понравились больше всего…
  2. Что Вас удивило…
  3. Над чем надо еще поработать…
  4. Что на Ваш взгляд не удалось…
  5. Какие достижения у Вас сегодня на уроке …

Учащиеся:

  1. Сегодня на уроке я научился…
  2. Было интересно…
  3. Мои ощущения…
  4. Мне показалось важным…
  5. Я понял, что…
  6. Урок…
  7. Показался мне интересным…
  8. Заставил задуматься…
  9. Навел меня на размышления…
  10. Своей работой на уроке Я:
  11. Доволен…
  12. Не совсем доволен…
  13. Я не доволен, потому что…

Предложения учащихся по совершенствованию работы на следующий урок.

6. Итог урока

Самоанализ урока

Урок построен на деятельной основе с применением проблемно – исследовательской, проектной и игровой технологии, что обеспечивает развитие познавательной деятельности учащихся, через проблемные задания, защиту проектов. Анализируя представленные проекты мы достигли следующих целей: побудили интерес к изучению предмета и показали его глубину и необходимость в реальной жизни. На уроке учащиеся показали хорошие навыки владения компьютером, умения представлять и защищать проекты, грамотно выражать свои мысли, показывая глубокие знания теоретического материала, умение оценивать работы других учащихся, творчески работать с тегами HTML, Web-страницами.

В данном классе присутствовали на уроке 7 человек, из них 4-сильных учащихся, 3 слабых, поэтому карточки были составлены с учетом психолого-педагогических особенностей учащихся, класс сильный с высоким уровнем познавательной потребности в знаниях.

Этот урок был заключительным в цикле темы: «Дизайн Web-страницы», На данную тему отводилась 2 занятия + одно занятие «Обобщение», связь с предыдущими уроками прослеживается в течение всего урока.

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

Урок был проведен в нестандартной форме, стимулирующей восприятие и усвоение учебного материала, повышающей интерес к предмету.

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

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

Мною были поставлены следующие цели и задачи:

– формирование способности к самостоятельному и инициативному решению проблем с помощью проведения деловой игры, как активной формы обучения на уроке информатики

– способствование развитию интеллектуальных способностей и познавательных интересов к информационным технологиям

– повышение компетентности учащихся в вопросе создания Web-страниц

– создание условий для формирования интереса к профессиям связанным с мультипликацией, дизайном

– формирование информационной и коммуникативной компетентности учащихся, через социально-практическую значимость проекта, компетентности в области самостоятельного изготовления сайта

– формирование умения использовать исследовательские методы, инструментально-технические средства, эффективно работать в группах, исполняя различные социальные роли (лидера, посредника, эксперта, контролёра)

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

– развитие творческого мышления

– воспитание сознательности, целеустремленности, уважительного отношения к мнению других

Тип урока: урок обобщение по теме: «Дизайн Web-страницы»

Методы обучения: обучение школьников навыкам самостоятельной индивидуальной и групповой работы по практическому конструированию сайта

Основные приёмы используемые на уроке: метод проектов, «мозговая атака», разноуровневые тесты с последующей самопроверкой, практическая работа, игра

Формы работы: групповая, парная, индивидуальная, игровая

Оборудование: ПК, карточки с тестами, ключи к тестам, шаблон HTML кодов, карточки с HTML кодами, Web-страницы, проекты учащихся

На уроке были выбраны следующие формы работ:

Теоретический опрос: где прослеживается повторение основных понятий, правил по данной теме.

Проблемная ситуация: мозговая атака мудрецов проходящая в два этапа: первое – узнать каков внешний вид страницы по HTML-коду, второе – наоборот по внешнему виду Web-страницы перечислить основные используемые теги.

Работа способствует развитию умения применять теоретические знания, формированию умения мыслить по аналогии, умения наблюдать и делать выводы, обобщать, где были использованы дифференцированные карточки составленные с учетом психолого – педагогических особенностей учащихся

Второй этап– работа индивидуально с ПК

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

Доклад ученика. Учащийся заранее самостоятельно готовил доклад расширяющий кругозор и позволяющий увидеть связь предмета с жизнью.

Правила хорошего тона при создании сайта – развитие речи и кругозора учащихся.

Пресс – конференция на тему: «Web-страница сайта школы нашими глазами»

(Защита проектов учащихся)

Создай свой мини WEB-сайт используя готовые шаблоны WEB-страниц (представление результатов)

Рефлексия

Считаю, что учащиеся были психологически подготовлены к учебно-познавательной деятельности и знакомы с такой формой проведения урока. Думаю, что содержание урока и формы деятельности соответствуют психолого-возрастным особенностям учащихся.

Приложение 7, Приложение 8,
Приложение 9, Приложение 10

Список литературы по HTML:

  1. ТАБЛИЦА ТЕГОВ ЯЗЫКА HTML
  2. http://www.linkexchange.com/webresource/monkreference.html
  3. ©Коротеева Елена / Введение в HTML / "Махаон" /
  4. Алленова Наталья. Html - Первые Шаги\ http://shaz.ru/p13.htm
  5. Очень удобное пособие для начинающих Алленовой Натальи «Первые шаги», написано в доступной форме, рекомендую.