Разработка дидактических материалов по изучению HTML5

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

ВВЕДЕНИЕ 2
ГЛАВА 1. ОСНОВЫ ПРОЕКТИРОВАНИЯ ДИДАКТИЧЕСКИХ МАТЕРИАЛОВ 4
1.1Основы применения дидактических материалов на уроках 4
1.2 Формы представления дидактических материалов 6
ГЛАВА 2. ДИДАКТИЧЕСКИЕ МАТЕРИАЛЫ ПО ИЗУЧЕНИЮ HTML 5 14
2.1 Роль визуализации учебной информации в процессе изучения HTML5 14
2.2. Общая информация о языке HTML 5 19
ГЛАВА 3. РАЗРАБОТКА ДИДАКТИЧЕСКОГО МАТЕРИАЛА ПО ИЗУЧЕНИЮ HTML5 25
СПИСОК ЛИТЕРАТУРЫ 29
ПРИЛОЖЕНИЕ 31

Актуальность темы. Быстрый рост повсеместного применения компьютерных технологий вызвал небывалый интерес к их применению в области обучения. Достаточно трудно сейчас обозначить назвать определенную область, где бы использованиеинформационных технологий не приносило ощутимых результатов.В основе данного заложены впечатляющие успехи в информатизации всего общества. Возможности гаджетов и персональных ПК растут настолько стремительно, что прогнозы специалистов об их ближайшем будущем могут напоминать лишь фантастику. Сам язык HTML5 стремиться сделать интернет более«правильным», более интерактивным, более динамическим, убрать привычные для обывателя рамки с информационной реальностью.
В связи с вышесказанным можно утверждать, что тема является достаточно актуальной.
Цельюнашей работы выступа ет проектированиеосновы дидактических материалов по изучению HTML5.
Объект – процесс обучения работе с HTML5 с использованиемдидактических материалов.
Предмет – организация обучения работе с HTML5.
Для достижения цели необходимо решить следующие задачи:
1) проанализировать историю применения HTML5
2) определить роль интерактивных технологий в современном образовательном процессе;
3) спроектировать примеры дидактических материаловпо визуальному изучению HTML5.

Данное способствует тому, что к процессу понимания учебной информации подключается так называемой учеными «образное» правое полушарие. «Опоры» (к примеру, рисунки или модели), которые компактно показывают содержание, формируют системность знаний [18]. По мнению большинства ученых, учебный материал абстрактного содержания требует в процессе понимания максимальной конкретизации со стороны обучающегося, и этой цели соответствуют различные виды наглядности – от предметной, до весьма абстрактной, условно-знаковой. «При восприятии наглядного материала человек может охватить единым взглядом все компоненты, входящие в целое, проследить возможные связи между ними, произвести категоризацию по степени значимости, общности, что служит основой не только для более глубокого понимания сущности новой информации, но и для ее перевода в долговременную память» [17].Некоторые ученые полагали, что любую систему или подход к процессу обучению можно признать своего рода технологией, если она соответствует следующим определенным критериям: наличие концептуальной базы; системность частей; управляемость, включая планирование, проектирование процесса обучения, варьирование средств с целью получения требуемого результата и воспроизводимость.Разрабатываемые дидактические материалы, которые образуют технологию по изучению HTML5, по нашему мнению, могут сводиться к трем основным аспектам.Систематическое применение в процессе обучения визуальных моделей одного определенного вида или в конкретных сочетаниях.Научение обучаемых рациональным приемам «сжатия» информации и ее представляемого когнитивно-графического представления.Методические приемы включения в учебный процесс дидактических материалов. Проработка их имеет определенные выделенные этапы и сопровождается еще целым рядом приемов и принципиальных методических решений.ГЛАВА 2. ДИДАКТИЧЕСКИЕ МАТЕРИАЛЫ ПО ИЗУЧЕНИЮ HTML 52.1 Роль визуализации учебной информации в процессе изучения HTML5Визуальная информация и технологии её передачи пережили в последние десять лет почти революционные изменения: колоссально выросли объем и качество передаваемой информации, появились определенно новые виды визуальной информации вкупе с технологиями ее передачи. Процесс совершенствования и формирование новой визуальной культуры наложило свой существенный отпечаток на свод требований, предъявляемых к работе педагогов на уроках информатики.Одним из инструментов улучшения профподготовки учителей, которые к педагогическим инновациям, к проектированию технологий эффективной учебной деятельности в условиях преобладания визуальной среды, считается развитие у них особых умений наглядности учебной информации [8].Понятие визуализации, столь важное для применения дидактических материалов, Вербицкий А.А. интерпретирует следующим образом: «Процесс визуализации – это свертывание мыслительных содержаний в наглядный образ; будучи воспринятым, образ может быть развернут и служить опорой адекватных мыслительных и практических действий».Процесс «доставания» образа и «вынесение» его из внутреннего плана во внешний план – это определенного рода проекция психического образа. Проекция встраивается по ходу взаимодействия субъекта и объектов окружающего мира и находит опору в механизмах мышления, при этом определенным образом охватывая некоторые уровни отражения и отображения [12].Если целенаправленно рассматривать процесс продуктивной познавательной деятельности как определенного рода взаимодействие внешнего и внутреннего планов, как вынесение продуктов деятельности из внутреннего плана во внешний, как корректировку и реализацию во внешнем плане замыслов, то визуализация срабатывает в качестве основного механизма, который может обеспечить диалог внешнего и внутреннего планов деятельности. Соответственно, в зависимости от качеств дидактических визуальных средств напрямую зависит уровень активизации мыслительной и познавательной деятельности учащихся.И в следствие этого увеличивается роль визуальных моделей проказа учебной информации, которые позволяют преодолевать затруднения в обучении с опорой на абстрактно-логическое мышление. В зависимости от конкретного содержания информации учебного характера применяются приемы ее уплотнения или пошагового развертывания с применением разнообразных дидактических средств. На современном этапе в образовании перспективной представляется применение когнитивной визуализации дидактических объектов. Этим фактически называются все распространенные виды визуализации педагогических объектов, которые функционируют на принципах концентрации и генерализации знаний, расширения презентационных функций наглядных дидактических инструментов, сведение к алгоритмам учебно-познавательные действия.Известно, что используются в практике более сотни методов визуального структурирования – от традиционных диаграмм и графов до «стратегических» карт, лучевых схем, каузальных цепей и прочих. Данное многообразие можно объяснить существенными различиями в характеристиках и свойствах знаний различных научных областей [11]. Наибольшей емкостью информационной передачи и универсальностью, на наш взгляд, могут обладать структурно-логические схемы. Данный способ систематизации и визуального отображения учебной информации основывается на выявлении основных связей элементов знания и аналитико-синтетической работой при трансляции вербальной информации в образную, синтезирование обобщённой системы компонентов знаний. Освоение перечисленных видов по конкретизации смыслов, раскрытию логической цепочки размышлений, описанию образов и их признаков мыслительного процесса, а также определенных операций при помощи вербальных инструментов обмена информацией развивает продуктивные способы мышления, так требуемые специалистам при нынешних ускоряющихся темпах развития науки и информационных технологий. По мнению большинства нейропсихологов, «обучение эффективно тогда, когда потенциал мозга человека развивается через преодоление интеллектуальных трудностей в условиях поиска смысла через установление закономерностей».При помощи структурно-логических схем становится возможным создать особую наглядность, размещая элементы информации в определенном нелинейном виде, и акцентируя логические и преемственные связи между ними. Данная наглядность может опираться на структуру и ассоциативные связи, раскрываемые в долговременной памяти. В определённом роде данные виды схем могут выступать как промежуточное звено между внешним линейным содержанием (к примеру, текст учебника) и внутренним образным содержанием (формируемым в сознании). А.В. Петров как достоинство данного вида схем выделяет то, что «она выполняет функцию объединения понятий в определенные системы». Сами по себе понятия достаточно мало могут сказать о конкретном содержании учебного предмета, но будучи в связи с конкретной системой, они раскрывают требуемую структуру изучаемого предмета, его основные задачи и дальнейшие пути развития. Процесс осмысления новой ситуации возникает лишь в том случае, когда мозг человека может получить опору в уже имеющихся знаниях и образах.Можно отметить, что из вышеперечисленного следует важность непрерывной актуализации имеющегося опыта в целях овладения новыми учебными знаниями. Восприятие нового материала можно представить как обработку новой поступающей информации путем ее соотнесения с имеющимися понятиями и способами действий, которые уже знает обучающейся, с помощью применения освоенных им интеллектуальных операций. Информация, доставляемая в мозг обучающегося, определенным образом структурируется, образуя в сознании ученика концептуальные сети. Информация, вновь поступившая, вкладывается в имеющиеся когнитивные схемы ученика, переформировывает их и делает новые когнитивные схемы и определенные интеллектуальные операции. При этом формируются связи между уже узнанными понятиями и новыми знаниями, возникает четкая структура вновь принятого знания [7].Полученная информация, по мнению ученых-психологов, усваивается и проходит процесс запоминания в том случае, когда знания «запечатлеваются» в системе визуально-пространственной памяти, и как следствие представление обучающего материала в структурированном виде позволяет намного быстрее и с большим качеством усвоить новые системы понятий [4].Представление дидактического материала открывает хорошую возможность не только собрать воедино все теоретические выкладки, что позволит в перспективе быстро воспроизвести материал, но и применять определенные схемы для оценивания степени усвоения изучаемой темы. На практике достаточно широко применяется метод анализа выбранной схемы или таблицы, в котором вырабатывают навыки сбора и обработки информации. С помощью данного метода возможно включить учеников в достаточно активную работу по применению полученной ранее теории в практической работе. Можно отметить важность совместного обсуждения, в процессе которого есть прекрасная возможность получить достаточно быструю обратную связь, начать понимать лучше как себя, так и окружающих людей [2]. Обобщая сказанное, можно отметить, что от места и конечного назначения визуальных дидактических материалов в ходе формирования понятий о HTML5 должны быть предъявлены различные важные психологические требования.В ходе визуализации учебного материала важно брать в учет, что наглядные образы могут эффективно сократить цепи словесных рассуждений и помогают синтезировать образ большей «емкости», способствуя уплотнению тем самым получаемой информации. В ходе проектирования материалов важно брать под контроль степень обобщения информационного содержания обучения, подкреплять вербальную информацию образной и наоборот, чтобы в случае необходимости ход логической мысли полностью мог быть восстановлен учениками.Другим краеугольным аспектом в использовании визуальных учебных материалов можно назвать определение оптимального соотношения наглядных образов и подаваемой словесной информации [3]. Подытоживая, можно отметить, что понятийное и визуальное мышление на практике находятся в постоянном взаимодействии, все время дополняя друг друга, раскрывая разные стороны исследуемого понятия. Словесно-логическое мышление помогает нам более точное и обобщенное понимать отражение действительности, но не стоит забывать, что это отражение достаточно абстрактно. Визуальное же мышление способствует организации новых образов, делает их целостными в максимальной степени.Визуализация дидактических материалов позволяет решить ряд педагогических задач, среди которых можно выделить обеспечение интенсификации процесса обучения, активизацию познавательной деятельности учеников, развитие визуального мышления, зрительного восприятия, образного представления знаний и учебных действий, передачи знаний и распознавания образов, повышения визуальной грамотности и визуальной культуры.2.2. Общая информация о языке HTML 5HTML5 — это определенный инструмент для упорядочивания Web-контента. Он создан для упрощения Web-проектирования и Web-разработки за счет определённого языка разметки, который может обеспечивать стандартизированный и интуитивно понятный пользовательский интерфейс. HTML5 предоставляет разработчику средства для секционирования и структуризации Web-страниц, а также позволяет создавать обособленные компоненты, которые не только обеспечивают логическую организацию Web-сайта, но и предоставляют ему возможности синдикации. Язык HTML5 реализует подход к проектированию Web-сайтов, основанный на отображении информации, поскольку он воплощает саму суть отображения информации — разделение и маркирование информации для упрощения ее использования и понимания. Именно в этом состоит огромная семантическая и эстетическая ценность HTML5. HTML5 предоставляет дизайнерам и разработчикам всех уровней возможности для предоставления в публичный доступ буквально любого контента – от простых текстов до мультимедийно насыщенных интерактивных материалов.Во-первых, практически всё что сейчас завязано на создание сайтов, стремится к мобильности (адаптивности), т.е. чтобы любой сайт который вы открываете, вы бы могли прочитать, на любом устройстве будь то, компьютер, ноутбук, планшет или смартфон. В этом вам как раз и помогают такие новые технологии как HTML5, CSS3, современный JavaScript (и его библиотеки) и даже новый тренд в веб-дизайне под название Flat-стиль.Во-вторых, одной из важных составляющих HTML5 является семантика, каждый тег отныне будет обладать своей смысловой нагрузкой, а не просто форматировать тот или иной контент. В-третьих большое внимание уделяется независимости языка HTML от плагинов. Музыка, видео, анимация, игры, со всем этим скоро можно будет работать не загружая на компьютер и в браузер сторонние программы.В-четвёртых, теперь можно прямо в коде использовать микроразметку и те спецификации которые раньше были частью XML, например можно прямо в коде HTML-документа, использовать спецификацию SVG (которая создаёт различные векторные фигуры).HTML5 предоставляет достаточно эффективные средства для управления данными, для рисования, для воспроизведения определенного видео и аудио контента. HTML5 в значительной степени может облегчить разработку кросс-браузерных Web-приложений, а также приложений для мобильных платформ. HTML5 может быть отнесён к числу технологий, стимулирующих развитие мобильных сервисов на основе облачных сервисов. Помимо этого, HTML5 способствует повышению гибкости – благодаря возможности создания впечатляющих и интерактивных Web-сайтов. И, наконец, HTML5 предлагает новые теги и усовершенствования, в числе которых следующие: элегантная структура, органы управления формами, API-интерфейсы, мультимедийные функции, поддержка баз данных, существенно увеличенная скорость обработки.-806456096000История появления HTML 5 кроется в далёком 1969 году. Чарльз Гольдфарб, на тот момент работавший в корпорации IBM, впервые создал новый прототип языка для решения задачи разметки технической документации, который явился начинателем линейки HTML. 367284079311500 В 1986 году язык уже имел статус международного стандарта, получил Standard Generalized Markup Language (SGML), который так и не мог набрать популярность до 1991 года, когда им начали интересоваться сотрудники Европейского института физики частиц, которые активно занимались в то время созданием системы передачи гипертекстовой информации через интернет. 367284045275500В то же время данный язык был переименован в язык разметки гипертекста HTML (Hyper Text Markup Language). В 1994 году, в апреле, HTML занялся Консорциум Всемирной паутины (WWW Consortium, или W3C). На тот момент членами данного собрания были исключительно университеты и учреждения науки. В последствии компьютерная корпорация Microsoft, оказав финансовую поддержку W3C, получила право основного голоса в этой организации. Лишь спустя многие годы и модификации языка, в 2004 году, группа разработчиков начала рассматривать HTML совершенно с иной стороны, и вместо того, чтобы переделать уже написанную программу, сосредоточили свое внимание на том, чего в ней не хватало современным разработчикам для качественного внедрения туда своих идей. 251079011239500В конечном итоге трудов, HTML переродился как инструмент отображения документов, и спустя некоторое время с появлением языка сценариев JavaScript HTML стал полноценной системой для разработки web -приложений. На базе HTML на тот момент времени были написаны многие поисковые движки, интернет-торговые площадки и прочее. Но беспокойство у веб-разработчиков и программистов всё равно оставались, ведь процесс разработки полноценного сайта занимал много времени и сил со стороны разработчиков. И затем, в результате многих доработок, появился долгожданный HTML5. Браузеров, которые бы поддерживали в полной мере HTML5, на сегодняшний момент не существует, есть лишь некие, постепенно расширяющиеся возможности HTML5, которые и включены в состав современных браузеров, поскольку данный язык ещё не полностью признан. Выделяется и отрицательная сторона HTML5, которая заключается в сложности для веб программистов в полной мере понять, поддерживает ли определенный браузер в работе всю реализованную ими функциональность конкретного веб-сайта или же нет. Можно обозначить следующий список основных категорий функциональных возможностей, охватываемых в HTML5 [1]:Ядро HTML5, которое содержит обновленные семантические компоненты, улучшенные элементы управления для всевозможных веб-форм, поддержку видео и аудио. В самом начале, в первичной спецификации языка HTML5, использовались возможности, требующие JavaScript, но самыми лучшими по производительности являются приложения, которые работают в автономном режиме, локальное хранение данных и конечно же обмен сообщениями. HTML5 является своего рода «живым» языком, и веб страница никогда не устареет и не перестанет работать в более позже изданных версиях. Так же для HTML никогда не потребует номер версии, а веб разработчикам не будет нужно в будущем изменять свою разметку от одной версии языка к следующей, что бы она работала на новых браузерах. Преимуществом данного стандарта выступает возможность в любое время добавлять в язык HTML5 все новые элементы языка, тем самым раскрывая разработчикам браузеров выбор: применять ли новые элементы в своих продуктах или же лучше отказаться от них.Важной задачей HTML5 стал вопрос реализации правильного интегрирования мультимедийного контента, который исключал бы в дальнейшем использования специальных плагинов в веб браузерах, таких как Adobe Flash Player, и прочие. Локальное хранилище, которое позволяет избранным сайтам сохранять информацию на конкретном компьютере, и обращаться к нему при последующей работе пользователя. Хотя хранилище и входит в базовую спецификацию HTML5, но отделено от неё в целях уменьшения размера. О безопасности данного места абсолютно не стоит беспокоиться, изменить или просмотреть персональные данные в данном хранилище могут лишь имеющие непосредственный доступ к компьютеру люди, с разрешением, либо сайты, у которых есть возможность прочитать или модифицировать собственные значения в хранилище, отведенные им, и к прочим данным в выделенном хранилище у них как правило нет прав. В обновленном HTML5 функция геолокации стандартизирована, о ней важно упомянуть, как о части развития веб-технологий.Микроданные понимаются как способ добавления дополнительной семантики на конкретную веб-страницу. В HTML5 входит не только стандартный набор микроданных, но и функции «DOM» (в основном с поддержкой для браузеров, которые позволяют получить доступ непосредственно к коду HTML конкретной страницы). И наконец то новая технология Web Forms 2.0, которая обеспечивает более быструю и качественную обработку полученных от пользователя определенных данных, при этом общее количество тегов заметно стало больше.ГЛАВА 3. РАЗРАБОТКА ДИДАКТИЧЕСКОГО МАТЕРИАЛА ПО ИЗУЧЕНИЮ HTML5Как правило, дидактические материалы способны оказать достаточно большую помощь преподавателю в ходе решения многих профессиональных задач, к примеру, расширение общего понятийного аппарата обучающихся; развитие определенных умений; формирование требуемых навыков исследовательской работы; изменение степени самоконтроля и взаимоконтроля у обучающихся; усиление определенных навыков коллективной работы; формирование конкретного логического мышления и умения делать научные выводы.Наличие современных технологий позволяют создателям дидактических материалов применять определенные специализированные средства разработки данных материалов. Данные средства могут позволить создавать достаточно эстетичные, местами увлекательные, познавательные материалы, и тем в общем то значительно повысить мотивацию и познавательный интерес обучающихся. Данная составляющая дидактического материала может быть направлена на привлечение внимания обучающегося, формирование требуемого познавательного интереса, активизацию научного мышления, на развитие критериев описываемого, побуждает некоторые мотивы к более углубленному понимаю определенного вопроса.Представленные дидактические материалы разработаны для проведения уровков по основам HTML, базовый уровень, рассчитанный на 2 часа в неделю, всего 70 часов.