Грэг Дункан
HTML5 очень популярен, и чувствуется, что все говорят только о нем. Что делать, если вы только вступили на эту дорогу? Что если хотите лишь немного узнать о нем? Или вы хотите учить других HTML5?
Новое! HTML 5 и CSS: шесть полных уроков
HTML 5 вместе с CSS выходит на сцену в качестве нового мощного языка разработки. Я с удовольствием представляю вам созданные нами шесть полных уроков, покрывающих наиболее интересные и динамичные возможности HTML 5, которые можно использовать в веб-разработке или во вводных курсах программирования. В каждый урок входят слайды, полное задание на чтение с практическими примерами, включая файлы и используемые в каждом задании ресурсы. Один урок содержит достаточное количество материала для занятия в классе продолжительностью 75–100 минут, и практические примеры вполне подходят как для лабораторных работ, так и для домашних заданий. Это следующие шесть уроков: Урок 1 – Определение HTML 5 Урок 2 – Основы HTML 5, XHTML и CSS Урок 3 – Введение в макеты CSS Урок 4 – Использование разметки HTML 5 Урок 5 – Работа с холстом (Canvas) Урок 6 – Мультимедиа и перетаскивание в HTML 5 Контент доступен для профессорско-преподавательского состава (а также для студентов, любителей и профессионалов) бесплатно и может быть скачан по ссылке http://www.mis-laboratory.com/faculty/.
HTML 5 вместе с CSS выходит на сцену в качестве нового мощного языка разработки. Я с удовольствием представляю вам созданные нами шесть полных уроков, покрывающих наиболее интересные и динамичные возможности HTML 5, которые можно использовать в веб-разработке или во вводных курсах программирования. В каждый урок входят слайды, полное задание на чтение с практическими примерами, включая файлы и используемые в каждом задании ресурсы. Один урок содержит достаточное количество материала для занятия в классе продолжительностью 75–100 минут, и практические примеры вполне подходят как для лабораторных работ, так и для домашних заданий.
Это следующие шесть уроков:
Урок 1 – Определение HTML 5 Урок 2 – Основы HTML 5, XHTML и CSS Урок 3 – Введение в макеты CSS Урок 4 – Использование разметки HTML 5 Урок 5 – Работа с холстом (Canvas) Урок 6 – Мультимедиа и перетаскивание в HTML 5
Контент доступен для профессорско-преподавательского состава (а также для студентов, любителей и профессионалов) бесплатно и может быть скачан по ссылке http://www.mis-laboratory.com/faculty/.
Итак, что мы здесь обсуждаем? У нас есть материалы для инструкторов и студентов, а также все необходимые файлы и примеры. Вот снимок WinDirStat:
Чтобы дать представление об учебном плане, здесь приведен план урока 1:
Урок 1: Определение HTML5 Учебные цели: На этом уроке студент изучает возможности и функции, являющиеся частью спецификации HTML5 и связанных технологий. К концу занятия студенты должны понимать различие между синтаксисом HTML5 и HTML 4.0, а также синтаксисом XHTML 1.0. Кроме того, студенты должны опознавать ключевые возможности HTML5, включая новые элементы HTML5, мультимедиа элементы, холст (Canvas), веб-формы и т. п. Другая цель – научить студентов отличать какие возможности являются технической частью спецификации HTML5, а какие – связанных технологий, таких как геолокация, перетаскивание и CSS3. Преимущества HTML5 Ключевые возможности Новые элементы разметки и макетирования Элементы <video>, <audio> и <canvas> Веб-формы Пересмотренные элементы, основанные на HTML 4.0 Обзор API HTML5 и поддерживающих технологий Геолокация Web Workers Веб-хранилище Анимация и переходы в CSS3 Фоновые изображения в CSS3, рамки, цвета RGBa, градиенты, тени и скругленные углы Веб-шрифты @font-face Работа над HTML5 продолжается Поддержка браузерами Где сегодня используется HTML5
Урок 1: Определение HTML5
Учебные цели: На этом уроке студент изучает возможности и функции, являющиеся частью спецификации HTML5 и связанных технологий. К концу занятия студенты должны понимать различие между синтаксисом HTML5 и HTML 4.0, а также синтаксисом XHTML 1.0. Кроме того, студенты должны опознавать ключевые возможности HTML5, включая новые элементы HTML5, мультимедиа элементы, холст (Canvas), веб-формы и т. п. Другая цель – научить студентов отличать какие возможности являются технической частью спецификации HTML5, а какие – связанных технологий, таких как геолокация, перетаскивание и CSS3.
А вот краткое изложение других уроков:
Урок 2: Основы HTML, XHTML и CSS Учебные цели: В этом уроке студенты изучают основы HTML, XHTML и CSS чтобы понять причины создания стиля и структуры веб-страниц. Студенты учатся использовать типы документов (DOCTYPE) чтобы быть в состоянии проверить правильность своих веб-страниц и узнают, как применять инструменты поиска неисправностей. Кроме того, студенты создают простую веб-страницу, чтобы освоить добавление изображений, создания гиперссылок и работу с внутренними и внешними таблицами стилей. Урок 3: Введение в макетирование CSS Учебные цели: В этом уроке студенты изучают создание двухколоночного макета фиксированной ширины с помощью HTML и CSS. Они изучают сброс файла CSS и как добавить таблицы к своим страницам. На этом уроке рассматриваются ключевые концепции макетирования CSS. Они включают использование элемента <div> и свойств «float» и «clear» для создания колонок на странице. Урок 4: Использование разметки HTML5 Учебные цели: В этом уроке студенты узнают, как использовать новые элементы HTML5 для макетирования. Рассматриваются все основные новые элементы секционирования, а также дается обзор тегов HTML 4, которые были пересмотрены в HTML 5. Студенты изучат, как преобразовать существующую веб-страницу, применяющую элементы HTML 4, в страницу HTML5, заменяя элементы <div> новыми элементами HTML5. Кроме того, рассматривается работа с элементами форм HTML5 и добавление мультимедиа с помощью элементов HTML5 <video> и <audio>. Урок 5: Работа с холстом (Canvas) Учебные цели: В этом уроке студенты изучат элемент холст (Canvas) и API двухмерного рисования, включенный в спецификацию HTML5. Студенты узнают, как создавать рисунки на веб-странице, включая добавление форм, текста, цветов заполнения и рисования, градиентов, изображений и основных приемов анимации, используя JavaScript. Урок 6: Перетаскивание в HTML5 Учебные цели: На этом занятии студенты научатся использовать перетаскивание, API, относящийся к спецификации HTML5. Конкретно студенты узнают, как создать интерфейс карты покупателя, используя перетаскиваемые объекты.
Урок 2: Основы HTML, XHTML и CSS
Учебные цели: В этом уроке студенты изучают основы HTML, XHTML и CSS чтобы понять причины создания стиля и структуры веб-страниц. Студенты учатся использовать типы документов (DOCTYPE) чтобы быть в состоянии проверить правильность своих веб-страниц и узнают, как применять инструменты поиска неисправностей. Кроме того, студенты создают простую веб-страницу, чтобы освоить добавление изображений, создания гиперссылок и работу с внутренними и внешними таблицами стилей.
Урок 3: Введение в макетирование CSS
Учебные цели: В этом уроке студенты изучают создание двухколоночного макета фиксированной ширины с помощью HTML и CSS. Они изучают сброс файла CSS и как добавить таблицы к своим страницам. На этом уроке рассматриваются ключевые концепции макетирования CSS. Они включают использование элемента <div> и свойств «float» и «clear» для создания колонок на странице.
Урок 4: Использование разметки HTML5
Учебные цели: В этом уроке студенты узнают, как использовать новые элементы HTML5 для макетирования. Рассматриваются все основные новые элементы секционирования, а также дается обзор тегов HTML 4, которые были пересмотрены в HTML 5. Студенты изучат, как преобразовать существующую веб-страницу, применяющую элементы HTML 4, в страницу HTML5, заменяя элементы <div> новыми элементами HTML5. Кроме того, рассматривается работа с элементами форм HTML5 и добавление мультимедиа с помощью элементов HTML5 <video> и <audio>.
Урок 5: Работа с холстом (Canvas)
Учебные цели: В этом уроке студенты изучат элемент холст (Canvas) и API двухмерного рисования, включенный в спецификацию HTML5. Студенты узнают, как создавать рисунки на веб-странице, включая добавление форм, текста, цветов заполнения и рисования, градиентов, изображений и основных приемов анимации, используя JavaScript.
Урок 6: Перетаскивание в HTML5
Учебные цели: На этом занятии студенты научатся использовать перетаскивание, API, относящийся к спецификации HTML5. Конкретно студенты узнают, как создать интерфейс карты покупателя, используя перетаскиваемые объекты.
Вот снимок презентации первого урока:
22-страничное руководство инструктора:
И 19-страничные материалы для студента по первому уроку:
Коротко говоря, мы говорим о достаточно полном курсе HTML5. Если вы учитель, инструктор, студент, профессиональный разработчик, любитель или просто человек, желающий изучать или учить HTML5, то для этого ресурса не хватает только одного – Вас!
Вот несколько ссылок, которые могут оказаться интересными: