Методические рекомендации к проведению урока общеметодологической направленности "Основы разработки Web-сайтов"

Методические рекомендации к уроку «Основы разработки web-сайтов»

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

Разработка web-сайтов предполагает несколько способов создания страниц: онлайн-сервисы, позволяющие заполнять информацией готовую страницу, прикладные программы с использованием шаблонов и web-программирование. По рассмотренным ранее УМК было определено, что данная тема отражена не во всех учебниках федерального перечня. Кроме того, каждый автор склонен к выбору определенного способа создания сайта, а не к рассмотрению каждого способа индивидуально

С целью определения оптимального программного обеспечения, направленного на объединение способов создания и вёрстки web-сайтов, мною был проведен анализ программного обеспечения, который можно было бы использовать при обучении школьников по данному направлению. Из множества программного обеспечения, было выбрано 2 наиболее доступных продукта, поддерживающие возможность создания сайтов: MS Publisher и KompoZer.

В первую очередь обратим внимание на редактор для верстки печатных публикаций, входящий в пакет Microsoft office - MS Publisher (рис.4). Данная программа позволяет по готовому шаблону создать сайт, используя стандартный дизайн или редактируя шаблон на свое усмотрение.

MS Publisher служит хорошей альтернативой для введения в основы разработки сайтов и web-дизайна на фоне прочих программ и онлайн ресурсов, позволяющих создавать web-страницы с помощью шаблонов, однако есть существенный минус: в более новых версиях программного обеспечения, например, MS Оffice 2013 в составе шаблонов веб-узлы отсутствуют, что ставит данную программу в непригодность для разработки сайтов.

Однако использование шаблонов специализированного ПО – не единственный способ разработки сайта, поэтому стоит рассмотреть редакторы, позволяющие работать с кодами сайтов. Одним из наиболее простых, на мой взгляд, редактором web-страниц является KompoZer - визуальный HTML-редактор (рис. 5).

Данный редактор, как и MS Publisher, имеет панели форматирования текста, функции работы с графикой, гиперссылками, списками и таблицами.

Рис.5 Рабочее окно KompoZer

Основное же и существенное отличие в том, что пользователь может работать с будущим сайтом в трех режимах:

1. Режим дизайна. В рабочей области отображается внесенная на будущий сайт разметка, заголовки, текст и графика в той последовательности, которая удобна пользователю (рис. 6)

2. Режим кода. В рабочем окне отображается структура будущего сайта. Для создания каких-либо объектов необходимо внести в структуру тэги этих объектов с указанием свойств. Так, например, для вставки таблицы c границами в 1 пиксель необходимо использовать тэг table border=1
   

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

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

Использование цифровых образовательных ресурсов и прикладного программного обеспечения благоприятно влияет на повышение мотивации обучающихся во время урока. Составим разработку урока с использованием ПО KompoZer и АМО «Индивидуальный практикум».

Разработка урока

Предмет: информатика и ИКТ

Тема урока: Разработка web-сайтов

Тип урока: Урок общеметодологической направленности

Деятельностная цель: формирование способности обучающихся к практическому применению навыков создания web-страниц.

Образовательная цель: построение обобщенных норм разработки web-сайтов.

Формирование УУД:

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

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

Познавательные действия: Способность к поиску и анализу полученной информации, умения выявлять аналогии, создавать обобщения, строить логические рассуждения на основе аналогии, индукции и дедукции, развитие ИКТ-компетентности.

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

Этап 1 Мотивации

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

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

Обучающимся предлагается написать шаблонную web-страницу с использованием языка HTML в блокноте. Шаблонной страницей является стартовая страница будущего сайта под заданием 1 (Приложение 6). По истечении времени учитель задает следующие вопросы:

• Какое задание вы должны были выполнить?

• Что использовали при выполнении задания?

• В каком месте у вас возникло затруднение?

• Почему не справились с заданием?

• Что может помочь в выполнении задания?

• Сформулируйте тему урока.

Этап 3 Закрепления

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

Этап 4 Включения изученного в систему знаний

Учитель предлагает продолжить выполнение практической работы (приложение 6) в программе KompoZer. Выполнение задачи продолжается с учетом возможностей каждого обучающегося: в режиме вёрстки (дизайна) или в режиме кода. Т.к. режим вёрстки (объединенный) предполагает отображение HTML-тэгов для внесенных объектов, обучающийся самостоятельно планирует пути решения учебной задачи, что способствует развитию регулятивных умений

Этап 5 Рефлексии учебной деятельности

На данном этапе учитель задает вопросы, способствующие рефлексии:

• Что нового вы сегодня узнали?

• Какую цель вы ставили в начале урока?

• Вы достигли поставленной цели?

• Что вам помогло в достижении цели?

• Как вы открывали новые знания?

Для самооценки обучающимся предлагается заполнить следующую таблицу:

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