«Создание веб-сайта. Веб-редакторы. Гипертекст»

Предмет Курс, группа Тема урока Подтема: Цель урока Задачи урока Технологическая карта урока «Создание веб­сайта» Информатика и ИКТ в профессиональной деятельности 2курс 221,  121а, 121б «Создание веб-сайта» «Веб-редакторы. Гипертекст». Повышение информационной культуры обучающихся через создание и ведение персонального сайта. создание веб­сайта на  платформе wix. Решаемые учебные задачи ­ Расширить, обобщить и систематизировать представление обучающихся о технологии создания web­сайтов;  ­ Закрепить умение поиска информации в сети Интернет по запросам с использованием логических операций; ­ Сформировать умения создания с использованием шаблонов комплексных информационных объектов в виде web­страницы,  включающей графические объекты; ­ Закрепить представления о сетевом этикете; ­ Закрепить навыки безопасного поведения в сети Интернет. Обучающие обобщить и закрепить  знания, умения и  навыки учащихся при  решении конкретных  упражнений и заданий  по данной теме развивающие способствовать развитию  воображения, творческой  активности учащихся, а  также памяти, внимания,  логического мышления;  проверить степень  усвоения учащимися  материала; обобщить и  систематизировать знания  путем создания условий  для интеллектуального  развития личности ребенка на уроке; воспитательные ­воспитание информационной  культуры, внимательности,  аккуратности,  дисциплинированности,  стремления к получению новых  знаний, обобщению знаний из  различных областей жизни и своей  профессиональной деятельности; ­воспитание чувства  товарищества, коммуникативных  качеств, культуру межличностных  взаимоотношений;   ­воспитание умения слушать,  трудолюбия. методические Показать возможность работы в  условиях индивидуального  практикума; ­продемонстрировать  обеспечение принципа  наглядности; ­показать возможность  использования межпредметных  связей. Планируемые образовательн Предметные Практическое применение Метапредметные понимание общепредметной сущности  Личностные представления о Предмет Курс, группа Тема урока Подтема: Цель урока Задачи урока Информатика и ИКТ в профессиональной деятельности 2курс 221,  121а, 121б «Создание веб-сайта» «Веб-редакторы. Гипертекст». Повышение информационной культуры обучающихся через создание и ведение персонального сайта. создание веб­сайта на  платформе wix. Решаемые учебные задачи ­ Расширить, обобщить и систематизировать представление обучающихся о технологии создания web­сайтов;  ­ Закрепить умение поиска информации в сети Интернет по запросам с использованием логических операций; ­ Сформировать умения создания с использованием шаблонов комплексных информационных объектов в виде web­страницы,  включающей графические объекты; ­ Закрепить представления о сетевом этикете; ­ Закрепить навыки безопасного поведения в сети Интернет. web-сайтов ые результаты навыков конструирования разработки сайтов; общеучебные умения анализа, сравнения,  классификации, коммуникации; развитие  ИКТ­компетенции конструировании web-сайтов, их роли в организации решения различных жизненных ситуациях и общении с другими людьми Использование ИКТ позволяет разнообразить деятельность обучающихся за счет наглядности и доступности представляемого материала ­ персональный компьютер (ПК) учителя, мультимедийный проектор, интерактивная доска; ­ ПК учащихся. Актуальность, используемых средств ИКТ Используемые на уроке средства ИКТ: Этап урока Методы и приёмы Деятельность учителя работы ­ словесный (беседа); 1. Организационный  момент Цель: Повышение  информационной  культуры  обучающихся через  создание и ведение  Приветствует обучающихся,  проверяет их готовность к уроку. Здравствуйте! Отмечает  присутствующих на уроке. Ребята, сегодня у начинается  большая тема: «Создание веб­ сайта». Первой подтемой  Деятельность обучающихся Приветствуют  учителя. Записывают в тетрадь  тему урока. УУД Личностные УУД: способность к эмоциональному  восприятию информационных  объектов, рассуждений,  рассматриваемых проблем. Смыслообразование (создание  условий, при которых Предмет Курс, группа Тема урока Подтема: Цель урока Задачи урока Информатика и ИКТ в профессиональной деятельности 2курс 221,  121а, 121б «Создание веб-сайта» «Веб-редакторы. Гипертекст». Повышение информационной культуры обучающихся через создание и ведение персонального сайта. создание веб­сайта на  платформе wix. Решаемые учебные задачи ­ Расширить, обобщить и систематизировать представление обучающихся о технологии создания web­сайтов;  ­ Закрепить умение поиска информации в сети Интернет по запросам с использованием логических операций; ­ Сформировать умения создания с использованием шаблонов комплексных информационных объектов в виде web­страницы,  включающей графические объекты; ­ Закрепить представления о сетевом этикете; ­ Закрепить навыки безопасного поведения в сети Интернет. является «Веб­редакторы.  Гипертекст». Давайте запишем  тему урока в тетрадь. обучающийся задумается, зачем ему изучать данную тему) Регулятивные УУД ­ осуществление целеполагания ­ планирование путей  достижения цели. Коммуникативные УУД: ­ организация учебного  сотрудничества со  сверстниками ­ участие в коллективном  обсуждении проблемы Познавательные УУД: Общеучебные: умение строить  речевое высказывание в устной  форме Логические: установление  причинно­следственных связей. Коммуникативные УУД: ­ организация учебного  персонального сайта.  создание веб­сайта на  платформе wix.  Постановка цели и  задач урока.  (Мотивация учебной  деятельности) Цели: подведение  обучающихся к  формулированию цели и постановке задач  урока; А каковы же цели нашего урока? Высказывают свои  предположения (­повторить ­закрепить ­устранить ошибки) Учитель высвечивает цель урока на экране 2. Актуализация  знаний. ­ дедуктивный (от  общего к частному). Учитель организует устную  работу обучающихся на  Участвуют    в      работе   по Предмет Курс, группа Тема урока Подтема: Цель урока Задачи урока Информатика и ИКТ в профессиональной деятельности 2курс 221,  121а, 121б «Создание веб-сайта» «Веб-редакторы. Гипертекст». Повышение информационной культуры обучающихся через создание и ведение персонального сайта. создание веб­сайта на  платформе wix. Решаемые учебные задачи ­ Расширить, обобщить и систематизировать представление обучающихся о технологии создания web­сайтов;  ­ Закрепить умение поиска информации в сети Интернет по запросам с использованием логических операций; ­ Сформировать умения создания с использованием шаблонов комплексных информационных объектов в виде web­страницы,  включающей графические объекты; ­ Закрепить представления о сетевом этикете; ­ Закрепить навыки безопасного поведения в сети Интернет.       через Цели: воспроизведение основных знаний предыдущих   уроков, их осознанности понимания и правильности применения решение определенного   круга благодаря задач, этому вовлечь обучающихся в процесс активного взаимодействия   по реконструкции   ранее изученного материала, вовлечь   их   в   общий труд учения. 3. Изучение нового           методы мотивации: ­ эмоциональные  (использование ярких  наглядных образов). повторение пройдённого  материала. повторению: в  беседе с учителем  отвечают на  поставленные  вопросы. сотрудничества со  сверстниками ­ участие в коллективном  обсуждении заданий ­ словесный метод ­демонстрационный  Учитель организует работу  обучающихся с презентацией,  Учатся применять определения в  Личностные Оценивание УУД: Предмет Курс, группа Тема урока Подтема: Цель урока Задачи урока Информатика и ИКТ в профессиональной деятельности 2курс 221,  121а, 121б «Создание веб-сайта» «Веб-редакторы. Гипертекст». Повышение информационной культуры обучающихся через создание и ведение персонального сайта. создание веб­сайта на  платформе wix. Решаемые учебные задачи ­ Расширить, обобщить и систематизировать представление обучающихся о технологии создания web­сайтов;  ­ Закрепить умение поиска информации в сети Интернет по запросам с использованием логических операций; ­ Сформировать умения создания с использованием шаблонов комплексных информационных объектов в виде web­страницы,  включающей графические объекты; ­ Закрепить представления о сетевом этикете; ­ Закрепить навыки безопасного поведения в сети Интернет. o усваиваемого материала. Регулятивные УУД: В ситуации затруднения регулируют свою деятельность Коммуникативные УУД: Планируют сотрудничеств одногруппниками учителем. Познавательные УУД: Выделяют необходимую информацию, планируют свою деятельность, прогнозируют результат. Познавательные УУД: Общеучебные: ­ регистрация на бесплатном  хостингеWIX, ­ знать основные этапы создания с и материала. Первичное применение нового знания метод методы мотивации: ­ эмоциональные  (использование ярких  наглядных образов). объясняет новый материал, путем  подводящего диалога побуждаю  обучающихся к формулированию  правила и способов создания  сайта. процессе  фронтальной и парной работы. 4. Обобщение и  систематизация  знаний Цели: выявление  качества и уровня  по источнику знаний: ­ практические  (индивидуальная работа с раздаточным  материалом) 1. Учитель организует  индивидуальную работу. Раздает  рабочие листы. Задания  подобраны таким образом, чтобы  у каждого получился свой мини  Индивидуальная  работа по созданию  сайта. Предмет Курс, группа Тема урока Подтема: Цель урока Задачи урока Информатика и ИКТ в профессиональной деятельности 2курс 221,  121а, 121б «Создание веб-сайта» «Веб-редакторы. Гипертекст». Повышение информационной культуры обучающихся через создание и ведение персонального сайта. создание веб­сайта на  платформе wix. Решаемые учебные задачи ­ Расширить, обобщить и систематизировать представление обучающихся о технологии создания web­сайтов;  ­ Закрепить умение поиска информации в сети Интернет по запросам с использованием логических операций; ­ Сформировать умения создания с использованием шаблонов комплексных информационных объектов в виде web­страницы,  включающей графические объекты; ­ Закрепить представления о сетевом этикете; ­ Закрепить навыки безопасного поведения в сети Интернет. сайт, свои ответы, это дает  возможность рассмотреть  различные случаи и исключить  списывание. сайта на бесплатном хостинге  WIX, ­изменять основное меню сайта, ­менять фон сайта ­уметь наполнять сайт основной информацией. Логические: ­ анализ  ­ выделение причинно­  следственных связей Коммуникативные УУД: ­ участие в коллективном  обсуждении проблем ­  осуществление самоконтроля  и исправление неточностей. Личностные УУД: Нравственно­этическое  оценивание Регулятивные УУД: ­ самостоятельный анализ  усвоения  обучающимися  знаний, обсуждение  допущенных ошибок и  их коррекция. по характеру  познавательной  деятельности: ­ объяснительно –  иллюстративный ­ исследовательский по принципу  распределения знаний: ­ обобщение ранее  изученного материала; по характеру  движения мысли: ­ дедуктивный (от  общего к частному). Учитель оценивает работу  обучающихся и консультирует  обучающихся, помогая исправить  неточности. После выполнения  заданий обучающиеся  представляет свою  работу учителю. Ребята рассматривают различные случаи,  корректируют  возможные ошибки. Предмет Курс, группа Тема урока Подтема: Цель урока Задачи урока Информатика и ИКТ в профессиональной деятельности 2курс 221,  121а, 121б «Создание веб-сайта» «Веб-редакторы. Гипертекст». Повышение информационной культуры обучающихся через создание и ведение персонального сайта. создание веб­сайта на  платформе wix. Решаемые учебные задачи ­ Расширить, обобщить и систематизировать представление обучающихся о технологии создания web­сайтов;  ­ Закрепить умение поиска информации в сети Интернет по запросам с использованием логических операций; ­ Сформировать умения создания с использованием шаблонов комплексных информационных объектов в виде web­страницы,  включающей графические объекты; ­ Закрепить представления о сетевом этикете; ­ Закрепить навыки безопасного поведения в сети Интернет. . условий достижения цели, на  основе учёта выделенных  учителем ориентиров действия  в учебном материале ­ самостоятельный контроль  своего времени, своего  результата. Цель: снижение  уровня  эмоционального  напряжения и  повышение  умственной  работоспособности. 6. Рефлексия Цели: ­ выявление качества и уровня усвоения  Прием: ­ физкультурная пауза ­ наглядный Сменить деятельность, обеспечить эмоциональную разгрузку  учащихся. Учитель говорит слова, а  обучающиеся выполняют  действия. Отражающие смысл  слов. Все выбирают удобную позу  сидения. Анализ деятельности  обучающихся на уроке.  Общая характеристика работы  группы и каждого обучающегося,  Учащиеся сменили  вид деятельности,  расслабились,  успокоились и готовы  продолжить работу. Самооценка, анализ  своих собственных  результатов. Регулятивные УУД: саморегуляция (адекватно воспринимать оценку Предмет Курс, группа Тема урока Подтема: Цель урока Задачи урока Информатика и ИКТ в профессиональной деятельности 2курс 221,  121а, 121б «Создание веб-сайта» «Веб-редакторы. Гипертекст». Повышение информационной культуры обучающихся через создание и ведение персонального сайта. создание веб­сайта на  платформе wix. Решаемые учебные задачи ­ Расширить, обобщить и систематизировать представление обучающихся о технологии создания web­сайтов;  ­ Закрепить умение поиска информации в сети Интернет по запросам с использованием логических операций; ­ Сформировать умения создания с использованием шаблонов комплексных информационных объектов в виде web­страницы,  включающей графические объекты; ­ Закрепить представления о сетевом этикете; ­ Закрепить навыки безопасного поведения в сети Интернет. своей работы) показать успешность каждого  обучающегося, выставление  оценок за урок. обучающимися знаний  ­обеспечить развитие у обучающихся  способности к  оценочным действиям. 7. Домашнее задание. Цель: обеспечить понимание обучающимися цели, содержания и способов выполнения домашнего задания. 9. Работа обучающихся на уроке: ___________________________________________________________________________________________. 10. Характер самостоятельной работы учащихся: ____________________________________________________________________________. 11. Оценка достижения целей урока: ________________________________________________________________________________________. Объясняет домашнее задание и  способы его выполнения.  Выполнить задание по  наполнению странички сайта  Методическая копилка Записывают задание. Конспект урока Тема: «Создание веб­сайта» Подтема: «Веб­редакторы. Гипертекст». Современный мир вступил в стадию информационного общества, и мы, педагоги, как одни из  главных субъектов процесса социализации, должны осознать новые потребности, овладевать  новыми компетентностями.  основе этой модели лежит не только развитие информационных коммуникаций, но и адаптация  педагога к жизнедеятельности в этом информационном пространстве. фронтальный опрос: 1. Назовите основные виды сервисов сети Интернет? (Сервисы для хранения документов,  сервисы для создания и/или хранения презентаций, сервисы и программы для создания  опросов и тестов, сервисы для создания виртуальных классов для своих реальных учеников,  Сервисы для создания дидактических игр, сервисы для создания Интеллект­карт, сервисы для хранения закладок, сервисы для хранения видео, сервисы видеозахвата экрана, сервисы для  фотографий и слайдшоу, сервисы для работы с графическими объектами, создание "Облака  слов", сервисы для создания сайтов и блогов, сервисы для создания wiki­газет, сервисы для  создания и хранения цифровых книг, комиксов, сервисы для создания открыток и/или  рисования, сервисы для хранения аудиофайлов). Изучение нового материала:  Сайт (от англ. website: web — «паутина, сеть» и site — «место», буквально «место, сегмент,  часть в сети») — совокупность электронных документов (файлов) частного лица или  организации в компьютерной сети, объединённых под одним адресом (доменным именем или IP­ адресом). Типология сайта учителя: 1. Сайт­визитка наиболее удачно представляет имидж учителя. 2. Сайт­портфолио. 3. Предметный сайт наполняется разнообразной информацией по предмету (видео, аудио,  мультимедийной). 4. Сайт «Учитель – ученику» (образовательный сайт). 5. Сайт класса – это сайт для иллюстрации жизни класса и его отдельных представителей,  который может вести классный руководитель или учащиеся класса. СТРУКТУРА И СОДЕРЖАНИЕ ПЕРСОНАЛЬНОГО САЙТА УЧИТЕЛЯ 1.Главная страница сайта 2. Нормативные документы (устав школы, примерные программы по предмету, рабочую  программу учителя, тематическое планирование и другие).  3. Методическая копилка 4. В помощь учащимся 5. Достижения учащихся 6. Фотогалерея 7. «Гостевая книга» Этапы создания сайта: 1. Планирование и проектирование 2. Создание сайта 3. Сопровождение сайта 4. Продвижение сайта 5. Структурирование материала. 6. Взросление сайта 7. Способы создания сайтов. 1 способ. При помощи программирования. Этот способ – наиболее длительный и трудный,  хотя для создания сайта он наиболее предпочтительный. Необходимо будет изучить хорошо  хотя бы один из распространенных языков веб­программирования, например, HTML, PHP, CSS,  а также работу с базами данных, например, MySQL. 2 способ.  На основе популярных программ. KompoZer, TurboSite. Например, MS FrontPage, Macromedia Dreamweaver и используя и графический редактор, в  частности, Photoshop. Надо отметить, что недостатком такого способа является то, что  генерирует большой HTML­код (слишком много лишнего), поэтому страницы получаются  большими, что сказывается на скорости загрузки. Кроме того, существуют трудности в  изменении материалов. При создании сайта этим способом надо учитывать, что этом вся  рутинная работа будет выполняться самим разработчиком, включая и «заливку» файлов на  сервер. 3 способ. Создание сайта при помощи системы управления сайтом (CMS) Этот способ – быстрый и широко используемый. Такие системы называют «системами  управления контентом» или просто «движками». Например, широко используются такие  «движки» как Joomla, WordPress. Такие CMS позволяют разрабатывать как простые  одностраничные сайты­визитки и блоги, так и многофункциональные и многостраничные  ресурсы. CMS имеет большую библиотеку (несколько десятков тысяч) шаблонов и дополнений.  При использовании CMS необходимо самому зарегистрировать доменное имя, определиться с  хостингом, пройти регистрацию в поисковых системах, каталогах.  4 способ. Создание сайта при помощи конструктора.  Это самый простой и быстрый способ создания сайта. Основные его достоинства – большинство  сервисов бесплатны, простота регистрации, нет необходимости знания HTML и CSS  (хотя это приветствуется). Работать с конструктором удобно и легко. Для учителей­ предметников, которые еще не знакомы с языками Web­программирования, это  наиболее приемлемый способ. Хотя надо учитывать такой недостаток, как полная  зависимость от сервиса. Создать сайт при помощи конструктора можно на различных сервисах. Saitodrom.ru – предлагает бесплатно создать сайт. На самом деле бесплатно лишь создание  сайта пользователем. Чтобы этой сайт после создания разместить в Интернете необходимо  заплатить.  Taba.ru – простой конструктор сайтов. Шаблонов не много. Есть недоработки, например, после  входа на тему форума, не получается вернуться назад с использованием средств навигации  (приходится нажимать кнопки «Назад», либо вводить адрес сайта). Wordpress.com ­ имеется набор готовых модулей, плагинов и вариантов оформления. Из  недостатков: ­ Отсутствие доступа к коду в бесплатном варианте.  ­ Невозможность подключать собственные плагины. Ucoz.ru – большинство персональных сайтов учителей сделаны в системе uCoz.   Wix ­ это платформа, которая позволит нам бесплатно создать и разместить сайт. Работа с Wix  не требует знаний программирования или установки дополнительных программ. После  прохождения регистрации нам станет доступно огромное количество возможностей. Практическая работа Тема: «Создание веб­сайта» Подтема: «Веб­редакторы. Гипертекст». Цель: Научиться создавать веб­сайт на платформе wix. Перед тем, как работать над сайтом, Вам нужно провести подготовку, а точнее: 1) Продумать структуру сайта. Какие страницы и разделы Вам нужны, в каком порядке Вы  хотите их расположить? Четкое понимание структуры необходимо для того, чтобы взять за  основу правильный шаблон. Пример: Иерархическая структура Главная страница сайта Родителям и детям Галерея Обратная связь Давайте познакомимся разработки Мои Рабочие программы Разработки занятий Правила поведения Новости Наши достижения 2) Определиться с оформлением. Выберите фирменные цвета и шрифты, которые будут  прослеживаться на каждой странице вашего сайта. Дизайн должен отражать главные ваши  ценности и идеи, создавать на сайте подходящую атмосферу. 3) Поработайте над текстами. Придумайте слоган, составьте описание, расскажите о себе.  Содержание сайта должно отражать творческую жизнь учителя, привлекать внимание  единомышленников, быть четким и понятным.  4) Подготовьте остальной контент. Сайт с одними только текстами — это очень скучно,  поэтому сразу начинайте подыскивать подходящие фотографии и видеоролики. Чтобы не  запутаться, создайте для каждой страницы сайта папку и сохраняйте в них текст и  фотографии.  Выполнив все эти пункты, можно переходить к следующей важной части — оформлению. Но, сначала Вам необходимо создать аккаунт. (Более подробно с вводной частью можно познакомиться в презентации «Занятие 1»). 1) Регистрация Для перехода к ней достаточно нажать «Создать сайт» на главной  Пошаговая инструкция странице: http   ://   ru   .  wix   .  com и перейти к окну регистрации. Введите адрес электронной почты, повторите его и введите пароль, после чего нажать «Создать».  2) Выбор подходящего шаблона 3) После регистрации вам необходимо выбрать из появившегося списка шаблонов пункт  Другое В коллекции конструктора Wix более 500 шаблонов — среди них наверняка есть тот, который  вам понравится. Выбирая, старайтесь представить, как люди будут пользоваться сайтом,  обязательно обращайте внимание на дизайн.  4) После в открывшемся окне с лева выберите Категорию шаблонов Образование  культура, выберите понравившийся вам шаблон сайта. 5) Изменение шаблона  Все управляющие элементы расположены слева и в верхней части  страницы. Добавьте категории и суб­страницы, дайте им название.  Сделать это можно, нажав на кнопку «Главная». 6) Добавьте необходимые страницы, нажав на кнопку  «Страница». Расположение добавленных страниц можно  менять, перетаскивая их в нужном направлении, таким же способом можно добавить субстраницы.  Имя страницы изменяется при двойном щелчке по названию страницы.  1. Главная 2. Давайте познакомимся 3. Мои разработки 4. Родителя и детям A.Рабочие программы (субстраница) B. Разработки занятий (субстраница) A. Правила поведения (субстраница) B. Новости (субстраница) C. Наши достижения (субстраница) 5. Галерея 6. Обратная связь 7) Выберите нужную и нажмите на кнопку 1, указанную на скриншоте, далее перейдите  на вкладку «Seo­страницы». Здесь можно ввести всю важную информацию для успешного  продвижения сайта в поисковых системах. Доступны следующие параметры: Заголовок страницы, который будет отображаться в поиске; О чем страница; Ключевые фразы/слова.    1 Главная страница: Заголовок: Воспитатель детского сада О чем страница (описание): Личный сайт воспитателя детского сада. 8) Наполнение сайтв Хедер Начать редактирование следует с изменения хедера (Область сайта, которая появляется в верхней  части вашего сайта на всех ваших страницах. Хедер может содержать название сайта, логотип и  меню вашего сайта). Футер Футер ­ это часть сайта, которая появляется в нижней части сайта и появляется на всех ваших  страницах. Футер может содержать ваши контактные данные, условия пользования, ссылки на  разделы сайта и иконки социальных сетей.      Изменение названия сайта:  Наведите курсор на нужный блок, в данном случае – это заголовок ресурса;  Кликните на кнопку «Редактировать»;  Введите текст.    Нажав на кнопки «Изменить фон» и  «Настроить дизайн», вы сможете подобрать  оптимальный размер букв, изменить их  цвет, шрифт и прочее. Добавить текст также легко, как и настроить заголовок. Для этого необходимо выполнить  действия, указанные на скриншоте.   22 11                                    И редактировать появившийся текст,  описанным выше способом или  скопировать, например, из файла MSWord. При добавлении текста в конструкторе  wix, пошаговая инструкция не сможет  показать бесчисленное количество  вариантов оформления текстового поля. В паявшееся окно впишите «Воспитатель  детского сада» 33 22 11 33 Добавление изображений Добавить изображение можно выполнив действия, указанные на скриншоте, и выбрать изображение из приведенного списка. Или загрузить Ваше фото 55 44 66 Изменять размер, применять различные эффекты к фото можно также нажав на него и выбрав меню настройки. Таким образом можно добавлять любой другой контент(фото, видео, аудио, документы и  презентации) Государственное бюджетное профессиональное образовательное учреждение «Катайский профессионально­педагогический техникум» Открытый урок  по учебной дисциплине (ПМ, МДК) Информатика и ИКТ в профессиональной деятельности По теме:     «Создание веб­сайта» Под. тема: «Веб­редакторы. Гипертекст». Для обучающихся 221        группы Специальность: Дошкольное образование Преподаватель: Скаредина С.В. Катайск 2018