 |
|
|
|
Образование в сети: введение в HTML5
Образование в сети: В основе мира современного Web 2.0 лежит технология HTML5. Целый ряд новых элементов упрощает структуру страниц. Большим шагом вперед стала поддержка добавления аудио и видео на HTML-страницы «из коробки», возможность рисования. Этот обзор посвящен бесплатным онлайн-курсам по HTML5 Для удобства выбора мы предлагаем свой рейтинг некоторых доступных онлайн-курсов по HTML5. Курсы, вошедшие в наш список, имеют разную сложность, реализуют различные подходы в подаче материала. Познакомившись срейтингом, вы сможете определиться с тем, какие из них вам нужны. Участники рейтинга Введение в HTML5
HTML5: основы клиентской разработки
Краткий курс по HTML5
Наш подход Для сравнения курсов мы определили несколько параметров. А именно следующие: интерфейс, содержание, иллюстративный материал, сертификация. Каждый из параметров предполагает присвоение оценки (от 1 до 5), а также каждый параметр имеет свой вес (от 1 до 5). Умножение оценки параметра на его вес дает итоговый балл по нему. Сумма итоговых баллов всех параметров определяет место в рейтинге. Стоит отметить, что максимальный вес мы присвоили только параметру содержание – 5. На балл ниже был оценен параметр интерфейс – 4. А два оставшихся параметра – иллюстративный материал и сертификация – получили оценку 3. Курс «Введение в HTML5» В лекциях Интернет-университета информационных технологий (см. рис. 1) дается представление об истории создания HTML5 и основных функциональных возможностях. Особенность содержания – большое количество внимания уделяется новым возможностям этого языка разметки. Поэтому для успешного освоения курса необходимо знакомство как минимум с языком разметки – HTML.
Рисунок 1. Курс «Введение в HTML5» Все лекции объединены в пять глав: «Основы HTML5», «Видео», «Холст и сокеты», «Кэширование и хранение клиентских данных» и «Технология Web Workers и геолокация». Первая глава посвящена основам HTML5. Слушатели познакомятся с историей создания этого языка разметки, с новыми структурными элементами HTML5, особенностями их использования, а также с новыми свойствами форм (новыми элементами числового ряда, ползунков, встроенной в HTML5 проверкой заполнения формы и др.). Научиться работе с видео с использованием HTML5 поможет вторая глава. В материалах описываются тег <video> и затрагивающее его API. Кроме того, дается представление о взаимодействии этого тега с другими элементами страницы, реализации внешнего вида с помощью CSS3, а также об управлении видео с помощью JavaScript. В качестве примера приводится создание видеоплеера HTML5. Тег <canvas> (холст) и описание API сокетов HTML5 изучаются в третьей главе. Учащиеся научатся создавать некоторые графические примитивы (с заливкой и обводкой), рисовать фигуры (с помощью путей) и линии, штрихи, а также добавлять на холст градиенты, тени и т.п. Описание сокетов сопровождается соответствующими примерами. Четвертая глава начинается с рассмотрения методов кэширования приложений на клиентских компьютерах. Уделяется внимание различию кэша приложений HTML5 и кэша браузеров, файлу манифеста и его основным составляющим, проверке актуальности версий файлов с использованием API кэша приложений. Рассматриваются хранилища на стороне клиента (сессионные и локальные), сравнивается технология Cookie с технологией хранилища HTML5, а также различные аспекты работы с хранилищем. Завершается курс рассмотрением технологии многопоточного выполнения кода Web Workers и API для работы с геолокацией. Интерфейс текстовых курсов ИНТУИТ включает все необходимые базовые элементы. Имеется возможность осуществлять переход на любую лекцию из текущей, использовать гиперссылки, открывать актуальный рисунок по ссылке, которые выделены цветом. Интерфейс получает максимальный балл, так как он обеспечивает удобную и простую навигацию в рамках курса. Иллюстративный материал представлен большим количеством рисунков (включая, демонстрирующие элементы интерфейса, реализуемые рассматриваемым кодом), которые способствуют лучшему восприятию материала лекций. Код выделен особо, специальным цветом, что характерно для текстовых курсов ИНТУИТ. Таким образом, за иллюстрации – максимальный балл. В случае успешного завершения курса слушателям предоставляется возможность получения сертификата. Говоря о статусе сертификации от ИНТУИТ, нужно отметить, что в ИТ-секторе широкого признания данные сертификаты так и неполучили. Но его обладатель показывает потенциальному работодателю, что он ориентирован на самообучение, дисциплинирован и способен укладываться в установленные сроки, это характеризует его только с положительной стороны. В целом курс представляет собой хорошее введение для ознакомления со многими новшествами, которые включает в себя HTML5. Таблица 1. Рейтинг курса «Введение в HTML5»
Курс «HTML5: основы клиентской разработки» Курс больше по объему и по количеству рассматриваемых технологий, чем предыдущий. В нем более подробно раскрыты возможности не только HTML5, но и CSS3 и JavaScript (см. рис. 2). В качестве основного инструмента используется WebMatrix.
Рисунок 2. Курс «HTML5: основы клиентской разработки» Лекции начинаются с изучения концепции Web 2.0, основ HTML и особенностей HTML5. Исследуются все основные возможности: работа с текстом, навигация с помощью гиперссылок (текстовых, графических), таблицы, добавление мультимедиа (<audio>, <video>). Далее слушатели узнают о CSS и особенностях CSS3. В центре внимания работа с текстом, фоном, контейнерами. Много внимания уделено селекторам (элементов, класса, идентификаторов, потомков и т.п.). Четыре лекции посвящены изучению JavaScript. После введения в основы дается информация об основных операторах и работе с ними, о работе с функциями и массивами, объектами. В оставшихся лекциях подробно изучаются возможности HTML5. Учащиеся узнают о монолитных и блочных веб-страницах, генерируемом содержимом, семантической разметке. Далее предлагается выполнить практическую работу. Она предполагает установку WebMatrix и тренировку по созданию разметки на примере реализации простого веб-сайта с подгружаемым содержимым. Перед второй практической работой рассматриваются технологии Cookie, Web Storage, дается представление о работе с веб-формами (в том числе с помощью JavaScript) и отправкой данных из них на сервер. После этого выполняется четыре практических работы: создание и стилизация веб-форм, хранение данных на стороне клиента, методы и приемы реализации Drag and Drop на страницах HTML, создание плейлиста воспроизведения настранице HTML. В центре внимания заключительных двух лекций работа с Canvas. Будет дано представление о концепции Canvas, рассмотрен тег <canvas>, рисование на холсте, взаимодействие <canvas> с CSS. Изучается рисование простейших фигур, прямых линий, дуг и кривых, кривых Безье, а также работа с цветом и толщиной линий, положением пера, со стилями линий. Далее пять практических работ, закрепляющих изучение Canvas. Курс дает хорошее представление об основах клиентской разработки с использованием HTML5, дополнен материалом о CSS3 и JavaScript, сопровожден большим количеством практических работ. Таким образом, предоставляется возможность новые теоретические знания закрепить на практике. Об интерфейсе, иллюстративном материале и сертификации текстовых курсов ИНТУИТ сказано выше. Таблица 2. Рейтинг курса «HTML5: основы клиентской разработки»
Курс «Краткий курс по HTML5» Курс от «Лаборатории EXLAB» (см. рис. 3) нацелен на изучение HTML с основ и быстрый переход к их применению на практике. Информация о возможностях HTML5 вводится по мере изучения соответствующих тем. Материал подается врамках работы интерпретатора в контексте XHTML5.
Рисунок 3. Курс «Краткий курс HTML5» Содержание лекций (или глав) оправдывает название курса. Действительно, объем каждой из них невелик, но зато материал подан сжато, и только самая суть. Начинается подача материала с введения, в котором обосновывается выбор HTML5, рассказывается о том, на кого ориентирован курс, и то, какое программное обеспечение понадобится для работы. Далее переходим к изучению структуры HTML-документа и тегам – изучаются синтаксис и механизм представлений, специальные символы, структурные, блочные и строчные элементы. В рамках исследования форматирования слушатели узнают о назначении тегов <i>, <b>, <em>, <small>, <strong>, <sup>, <sub>. Отдельное внимание уделяется возможностям форматирования, появившимся в HTML5 (<mark>, <ruby>, <rt>, <rp>, <time>, <meter> и др.). Далее переходим к работе со ссылками и изображениями, списками и таблицами – добавление ссылок на HTML-страницы, назначение атрибутов тега <a>, относительный и абсолютный пути. Также показан процесс вставки изображений наHTML-страницу с помощью тега <img> и использования соответствующих атрибутов, рассказывается о создании навигационной карты (теги <map> и <area>, атрибуты ismap, usemap тега <img> и т.п.). Кроме того, дается общее представление о создании списков и таблиц и работе с ними. Описываются соответствующие теги. Приводятся примеры кода, реализующие нумерованный и ненумерованный списки, список терминов и определений, а также создание таблицы, объединение ячеек и группирование столбцов и строк. При изучении разметки описываются особенности использования <div> и <span> в рамках HTML5, раскрывается назначение тегов <header>, <footer>, <hgroup>, <address>, <section>, <figure>, <figcaption>, <aside>, <details> и т.п. Особое внимание в курсе уделено работе с формами. Слушатели знакомятся с реализацией форм и элементов ввода данных на примере создания формы и описания методов отправки данных на сервер. Также приводится пример использования тега <input> и подробно рассматриваются значения его атрибута type, а отдельно – появившиеся в HTML5. Отдельная лекция посвящена созданию меню, она описывает изменение лексического значения тега <menu> в HTML5, а также дает представление об использовании его атрибута type и правилах обработки браузером содержимого <menu>. В качестве примера приводится код для создания контекстного меню. Особое внимание в лекциях уделено работе с мультимедиа и скриптами. В центре внимания оказываются элементы <object>, <embed>, <audio>, <video>, описываются нюансы использования <source> и атрибута src, элемент <canvas>. Например, показан код для добавления на HTML-страницу видео с сурдопереводом и звуковой дорожки с альтернативным переводом, а также код для добавления на HTML-страницу различных источников данных для проигрывателя. В особые лекции выделены темы фреймов и новых атрибутов HTML5. В качестве примера показан код, реализующий фреймы (тег <iframe>). Что касается новых атрибутов HTML5, то рассматриваются те из них, о которых не говорили впредыдущих лекциях. Завершающий материал посвящен изучению проблематики обратной совместимости. В лекции устранение этих проблем достигается решением четырех задач: сообщение Internet Explorer о новых тегах, превращение новых элементов вблочные, отказ от устаревших тегов и использование новых API и DOM. Интерфейс курса прост и удобен. На главной странице курса – содержание, которое позволяет перейти на любую лекцию. Из текущей лекции можно осуществить переход на любую другую – в правой части окна доступно содержание курса. С навигацией в лекциях все в порядке. В целом – максимальный балл. Что касается иллюстративного материала, то отдельные презентации и т.п. недоступны. Но лекции сопровождаются рисунками, таблицами (в том числе и с цветовым оформлением), а код выделен в специальных блоках, причем теги, атрибуты и их значения выделяются различными цветами, что очень удобно. Также максимальный балл. Возможность прохождения сертификации недоступна. Таблица 3. Рейтинг курса «Краткий курс HTML5»
*** Максимальный балл не был поставлен ни одному из курсов. Статус сертификатов, которые доступны для получения слушателями, не позволил этого сделать. Но в то же время именно наличие сертификации обеспечило лидерство первым двум курсам рейтинга от ИНТУИТ. Таблица 4. Итоговый рейтинг курсов
|
ИГОРЬ ШТОМПЕЛЬ, инженер, системный администратор. Сфера профессиональных интересов – свободное ПО, 
Комментарии отсутствуют
| Добавить комментарий |
|
Комментарии могут оставлять только зарегистрированные пользователи |
|
