А.Н. Панфилов А.Н. Скобаfitu.npi-tu.ru/assets/fitu/iist/files/metod/html5...5....

МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ ЮЖНО-РОССИЙСКИЙ ГОСУДАРСТВЕННЫЙ ПОЛИТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ

(НПИ) ИМЕНИ М.И.ПЛАТОВА

А.Н. Панфилов

А.Н. Скоба

Программирование в HTML5

с JavaScript и CSS3

Методические указания к лабораторным работам

и практическим занятиям

Новочеркасск

ЮРГТУ(НПИ)

2017

УДК 681.324.067

Рецензент:

канд. техн. наук, доцент кафедры "Программное обеспечение вычислительной

техники" В.А. Мохов (Южно-Российский государственный политехнический

университет им. М.И. Платова)

Составители: А.Н. Панфилов, А.Н. Скоба

Программирование в HTML5 с JavaScript и CSS3: Методические указания

к лабораторным работам и практическим занятиям/ Юж.-Рос. гос. политехн. ун-

т (НПИ) имени М.И. Платова.- Новочеркасск: ЮРГПУ (НПИ) имени

М.И. Платова, 2017.- 20с.

Приведены программа работы, варианты и темы лабораторных работ и

практических занятий с пояснениями.

Предназначены для направлений бакалавриата: "Прикладная

информатика", "Информационные системы и технологии", "Приборостроение",

а также для других направлений и программ подготовки в рамках укрупненной

группы "Информатика и вычислительная техника".

© Южно-Российский государственный

политехнический университет (НПИ)

имени М.И. Платова, 2017

ВВЕДЕНИЕ В HTML5 CSS3

HTML5 – это комбинация новых тегов HTML, параметров CSS3,

JavaScript и нескольких связанных с HTML5 технологий, фактически

не привязанных к спецификации HTML5. Именно поэтому мы

разделяем понятие "семейство" HTML5 и "ядро" HTML5.

"Ядро" HTML5 можно определить как спецификацию,

определяющую новые элементы разметки или синтаксис, и теги,

используемые дизайнерами при создании веб-страниц – в

совокупности с уже используемыми тегами. Многие из этих новых

элементов знакомы дизайнерам, работавшим со стандартными тегами

HTML, например, <P>, <UL> И <DIV>. Эти новые теги

предоставляют дизайнерам и разработчикам улучшенные

инструменты разработки и создают улучшенные возможности для

пользователей. Это упрощает ситуацию и относится к "ядру" HTML, о

чем вы скоро узнаете.

"Семейство" HTML5 включает в себя новые теги и такие

технологии или спецификации, как CSS3, Geolocation, Web Storage,

Web Workers, и Web Sockets, многие из которых очень зависят от

JavaScript. Эти технологии позволяют создать более мощный набор

технических средств и, как результат, — более функциональные и

современные веб-страницы. Поддержка этих функций зависит только

от браузера. Одной из причин, почему стоит использовать эти

технологии, состоит в том, что Internet Explorer 10 и фреймворк

приложений для Windows 8 – это, во многом, одно и то же. Но это не

значит, что приложения для Магазина Windows можно запустить в

браузере. Просто в основе этих приложений и приложений и Internet

Explorer 10 лежат практически одинаковые технологии.

Особенности HTML5

1. Добавлены новые теги, например, теги разметки. Удалены

устаревшие теги, например, не поддерживаются фреймы.

2. Поддержка мультимедийных возможностей без

дополнительных плагинов, например, без Flash.

3. Улучшение интерактивности.

4. Передача данных между доменами, т.е. сценарии одного

домена могут влиять на исполнение сценариев другого домена.

5. Поддержка технологии WebSockets – долгосрочное

подключение к серверу.

6. Хранение с данными на стороне клиента.

7. Улучшение интерфейса.

8. Новые возможности web-форм.

Особенности CSS3

1. Увеличено количество селекторов.

2. Добавлены визуальные эффекты, например, тени,

градиенты, закругления.

doctype. В отличие от предыдущих версий html предполагается

только один тип:

<!DOCTYPE html>

Таким образом, указав в первой строке <!DOCTYPE html>, вы

тем самым объявили, что используете HTML 5.

Устаревшие теги. Спецификация HTML 5 объявляет

устаревшими некоторые теги. Например, BIG, FONT, STRIKE, U.

Также признается устаревшей фреймовая структура, т.е. не

поддерживаются также теги frame, frameset, noframe. Однако пока

исполняются.

Также объявляются устаревшими некоторые параметры,

например, ALIGN, VALIGN, WIDTH, HEIGHT. Отмечу, что указанные

параметры давно заменены селекторами css, тем не менее они еще

актуальны.

Теги для создания структуры. HTML 5 предлагает новые теги,

описывающие размещение контента:

<header> — определяет заголовок страницы или раздела;

<footer> — определение завершителя страницы или

раздела;

<nav> — область навигации;

<section> — логическая область страницы или

группировка;

<article> — статья;

<aside> — вторичный контент.

Расположение элементов показано на рисунке ниже.

Непосредственное расположение задается при помощи таблиц

стилей.

http://aermolenko.ru/wp-content/uploads/2016/02/html5str.png

ЛАБОРАТОРНАЯ РАБОТА 1

СОЗДАНИЕ И СТИЛИЗАЦИЯ СТРАНИЦЫ HTML5

Программа работы:

1. Обзор HTMLОбзор CSS

2. Создание веб-приложений с помощью Visual Studio 2012

3. Пошаговое изучение приложения управления

конференциями “Contoso Conference”.

4. Анализ и модификация приложения.

5. Создание страницы HTML5

6. Настройка стиля страницы HTML5

Контрольные вопросы: 1. Назовите основные элементы и атрибуты HTML

2. Объясните структуру CSS

3. Опишите инструменты, доступные в Visual Studio 2012 для

создания веб-приложений

4. Как можно создавать страницы с помощью новых функций

HTML5

5. Как следует применять стили CSS3 к элементам страницы

HTML5


ОТОБРАЖЕНИЕ ДАННЫХ И ОБРАБОТКА СОБЫТИЙ С

ПОМОЩЬЮ JAVASCRIPT


1. Обзор синтаксиса JavaScript

2. Использование DOM в JavaScript

3. Введение в jQuery

4. Отображение данных

5. Обработка событий

Контрольные вопросы: 1. Как можно описать синтаксис JavaScript и его

использование в HTML5

2. Как следует использовать JavaScript для управления DOM

и обработкой событий

3. Описшите использование библиотеки jQuery для

упрощения кода на JavaScript


СОЗДАНИЕ ФОРМ И ПРОВЕРКА

ПОЛЬЗОВАТЕЛЬСКОГО ВВОДА

Программа работы

1. Обзор форм и типов ввода

2. Проверка вводимых пользователем данных с помощью

атрибутов HTML5

3. Проверка вводимых пользователем данных с помощью

JavaScript

4. Создание форм проверки вводимых пользователем данных

с помощью атрибутов HTML5

Контрольные вопросы: 1. Как следует создавать формы, использующие новые

элементы ввода HTML5

2. Как следует проверять пользовательский ввод и

обеспечивать обратную связь с помощью новых атрибутов HTML5

3. Как наисать код JavaScript для проверки пользовательского

ввода и обеспечивать обратную связь в случаях, когда атрибуты

HTML5 не годятся


СТИЛИЗАЦИЯ ТЕКСТА И БЛОКОВЫХ ЭЛЕМЕНТОВ С

ПОМОЩЬЮ CSS3


1. Стилизация текста.

2. Стилизация группы элементов.

3. Селекторы CSS3.

4. Использования графических эффектов CSS3.

5. Стилизация панели навигации.

6. Стилизация заголовка страницы.

7. Стилизация страницы “О приложении” (About).

Контрольные вопросы: 1. Как можно стилизовать элементы текста на странице

HTML5, используя CSS3.

2. Как следует применять стили для групп элементов с

помощью CSS3.

3. Как следует использовать селекторы CSS3 для отбора

стилизуемых элементов

4. Как можно реализовывать графические эффекты и

преобразования (transformations) с помощью новых свойств CSS3


СОЗДАНИЕ ИНТЕРАКТИВНЫХ СТРАНИЦ С ПОМОЩЬЮ

HTML5


1. Взаимодействие с файлами

2. Использование мультимедиа

3. Реагирование на дислокацию и контекст обозревателя

4. Отладка и профилирование веб-приложений

5. Внедрение видео

6. Внедрение изображений

7. Использование API геолокации

Контрольные вопросы:

1. Как следует использовать технологию Drag and Drop и API

для взаимодействия с файлами (File API)

2. Как следует использовать элементы аудио и видео

3. Как можно определить местоположение пользователя,

запустившего Веб-приложение, с помощью API геолокации

4. Как можно отлаживать и персонифицировать веб-

приложения, используя Web Timing API и Internet Explorer Developer

Tools


РЕАЛИЗАЦИЯ АДАПТИВНОГО ИНТЕРФЕЙСА

ПОЛЬЗОВАТЕЛЯ


1. Создание адаптивного пользовательского интерфейса

2. Создание шаблона страницы пригодного для вывода на

печать

3. Адаптация макета страницы к различным форм-факторам

Контрольные вопросы:

1. Как можно научить приложение определять возможности

устройств и адаптироваться к форм-факторам

2. Как следует создавать веб-страницы, способные

динамически адаптироваться, чтобы соответствовать различным

форм-факторам


НАСТРОЙКА РАСШИРЕННОЙ ГРАФИКИ

Программа работы

1. Создание векторной графики с помощью библиотеки SVG

2. Программное создание графики с помощью элемента

Canvas

3. Создание интерактивной карты с использование средств

векторной графики

4. Создание беджа докладчика (Speaker Badge) с помощью

элемента Canvas

Контрольные вопросы: 1. Как следует использовать векторную графику для создания

интерактивных приложений

2. Как можно нарисовать сложные графические элементы на

базе Canvas с помощью JavaScript


АНИМАЦИЯ ЭЛЕМЕНТОВ ПОЛЬЗОВАТЕЛЬСКОГО

ИНТЕРФЕЙСА


1. Применение переходов (transitions) CSS

2. Преобразование (transformations) элементов

3. Использование покадровой CSS анимации

4. Создание переходов для анимации пользовательского

интерфейса

5. Применение покадровой анимации

Контрольные вопросы: 1. Как следует применять переходы CSS к элементам HTML5,

управлять переходом через JavaScript

2. Опишите различные типы 2D и 3D переходов, доступные с

CSS3

3. Как можно реализовать сложную покадровую анимацию с

помощью CSS и кода JavaScript

ПРАКТИЧЕСКОЕ ЗАНЯТИЕ №1

СОЗДАНИЕ ФОРМ И ПРОВЕРКА ПОЛЬЗОВАТЕЛЬСКОГО

ВВОДА

Для взаимодействия пользователя с веб-сервером в HTML

предусмотрены формы. Формы позволяют пользователю вводить

необходимую информацию и получать результат после обработки

внесенных данных веб-сервером. Например, поиск, авторизация и т.п.

Именно с помощью форм возможна отправка запросов по

протоколу HTTP методом POST (при переходе по обычной

гиперссылке мы используем метод GET). Данные передаются на

сервер в виде пар name-value, которые формируются для каждого

поля формы.

Создать форму на веб-странице можно с помощью тега <form>.

Сам по себе тег <form> является блочным элементом веб-страницы.

Этот тег имеет несколько важных, но необязательных атрибутов.

В атрибуте action можно указать адрес скрипта, который будет

обрабатывать отправленные данные. Адрес может быть задан в виде

абсолютного или относительного пути. Если этот атрибут не задан, то

по умолчанию форма отправит данные по адресу текущего веб-

документа.

В атрибуте method можно указать метод передачи данных

согласно протоколу HTTP. Значения этого атрибута могут быть либо

GET, либо POST. По умолчанию, если этот атрибут не указан или

значение не совпадает с выше указанными двумя методами - будет

использован GET метод. Рассмотрим несколько примеров, которые

иллюстрируют использование этих атрибутов:

<form> ... </form>

<form method='post'> ... </form>

<form action='/contact.php' method='post'> ...

</form>

Внутри тега <form> необходимо разместить теги элементов

формы. В этом уроке будут рассмотрены текстовые элементы

формы и кнопка отправки данных.

Простое текстовое поле создается при помощи тега <input> и

обязательного атрибута type со значением text, то есть:

<input type='text' name='login'>

В тегах элементов формы также необходимо указать атрибут

name, который позволит веб-серверу различать данные с разных

элементов форм. Значение этого атрибута может быть произвольным,

но желательно чтоб оно было логически связано с предназначением

поля.

Для создания кнопки отправки данных необходимо создать

аналогичный тег, но со значением submit атрибута type

<input type='submit'>

Существуют также несколько вариаций простого текстового

поля - например, поле для пароля (type='password') или поле для

электронного адреса (type='email'). Поле для пароля идентично

простому текстовому полю, но увидеть набранный текст явно там

нельзя, для безопасности. Поле для электронного адреса также

идентично простому текстовому, но имеет полезное свойство -

браузеры будут автоматически проверять корректность введенного

электронного адреса, если оно указано как поле для оного. Эта

возможность добавлена в спецификации HTML 5.

Задание

По варианту задания на лабораторную работу разработайте

макет формы пользовательского интерфейса. Реализуйте контроль и

проверку правильности ввода исходных данных на JavaScript.


СТИЛИЗАЦИЯ ТЕКСТА И БЛОКОВЫХ

ЭЛЕМЕНТОВ С ПОМОЩЬЮ CSS3

Блочная модель - способ отображения элементов браузерами,

которые обрабатывают все теги как небольшие блоки, для них любой

тег - контейнер с содержимым: текстом, изображениями, другими

тегами и т.д.

Margin (внешний отступ) - пустое пространство (поле),

которое отделяет один элемент от другого. Самый простой пример

внешнего отступа - промежуток между абзацами, идущими друг за

другом. Область внешнего отступа прозрачна и не может иметь свой

цвет и других эффектов оформления.

Border (рамка элемента) - граница с любой стороны

элемента. Рамка может быть установлена как со всех сторон

элемента, так и с одной стороны. Используя рамку можно просто

красиво оформить элемент или визуально отделить содержимое

текущего элемента от других элементов страницы.

Padding (внутренний отступ) - пустое пространство между

содержимым элемента и его рамкой. Область внутреннего отступа

прозрачна и не может иметь свой цвет или другие эффекты

оформления.

У большинства элементов есть область содержимого, в

которой располагается всесодержимое элемента (текст, вставляемые

изображения или другие элементы).

Рамка представляет собой обычную линию, которая

отображается вокруг стилизуемого элемента. Но совсем не

обязательно применять рамку, окружающую элемент со всех сторон.

Можно добавить ее только с требуемой строны элемента. Например,

если добаввить рамку только с нижней строны блочного элемента, то

она будет производить тот же эффект, что и

элемент <hr> (горизонтальная линия), выступая в качестве

разделителя.

Каждая рамка имеет три свойства, которыми мы можем

управлять с помощью CSS: ширина, стиль и цвет, рассмотрим с

помощью каких свойств можно их задавать и изменять:

border-width - задает ширину рамки. Для установки

ширины можно использовать пиксели или ключевые слова: thin,

medium, thick.

border-style - определяет стиль рамки с помощью одного из

восьми возможных значений: solid, dotted, dashed, double, groove,

ridge, inset и outset.

border-color - указывает цвет рамки.

Вместо указания всех трех свойств, можно указать всего одно -

свойство border, которое позволяет одновременно указать ширину,

стиль и цвет для рамки.

Задание

По варианту задания на лабораторную работу с помощью CSS3

разработайте стилевые правила для каждого текстового блока.


СОЗДАНИЕ ИНТЕРАКТИВНЫХ СТРАНИЦ С ПОМОЩЬЮ

HTML5

Одной из наиболее важных функций приложений является их

способность взаимодействовать с человеком. В HTML для этого

существуют теги отображения на странице интерактивных элементов

управления - списков, кнопок, текстовых полей и других

активизируемых пользователем элементов управления. С их

помощью пользователь может предоставлять приложению тот или

иной вид информации. Эта информация может обрабатываться двумя

способами - непосредственно на устройстве посредством сценариев

JavaScript, код которых включается в разметку страницы, или путем

отправки данных на веб-сервер для их дальнейшей обработки

серверным сценарием. Во всех случаях для этих целей используются

интерактивные элементы управления HTML. Краткое их описание

приведено в таблице : Элемент

управления HTML-элемент Описание

Однострочное

текстовое поле

<input type="text"> <input

type="password">

Выводит однострочное текстовое поле для

ввода текста. Если для атрибута type

указано значение password, вводимые

пользователем символы отображаются в

виде звездочек (*) или маркеров-точек (●)

Многострочное

текстовое поле

<textarea>...</textarea> Текстовое поле, в которое можно ввести

несколько строчек текста

Флажок <input type="checkbox"> Выводит поле флажка, который можно

установить или очистить

Переключатель <input type="radio"> Выводит переключатель - элемент

управления в виде небольшого кружка,

который можно включить или выключить.

Обычно создается группа переключателей с

одинаковым значением атрибута name,

вследствие чего можно выбрать только один

из них

Кнопка <input type="submit"> <input

type="image"> <input

type="reset"> <input

type="button">

Выводит стандартную кнопку,

активизируемую щелчком мыши. Кнопка

типа submit всегда собирает информацию с

формы и отправляет ее для обработки.

Кнопка типа image делает то же самое, но

позволяет вместо текста на кнопке вставить

изображение. Кнопка типа reset очищает

поля формы от введенных пользователем

данных. А кнопка типа button сама по себе

не делает ничего. Чтобы ее нажатие

выполняло какое-либо действие, для нее

нужно добавить сценарий JavaScript

Список <select>... </select> Выводит список, из которого пользователь

может выбирать значения. Для каждого

значения списка добавляется

элемент<option>

Задание


макет формы пользовательского интерфейса с элементами

интерактивного взаимодействия. Реализуйте контроль и проверку

правильности ввода исходных данных на JavaScript.


РЕАЛИЗАЦИЯ АДАПТИВНОГО ИНТЕРФЕЙСА

ПОЛЬЗОВАТЕЛЯ

Что такое адаптивный дизайн? Это дизайн, подстраивающийся

под некоторые выбранные разрешения экрана. В идеале, конечно,

поддерживаемых разрешений должно быть как можно больше, но у

нас не было необходимости в поддержке, например, мобильных

устройств или старых мониторов с разрешением, меньшим 1024px в

ширину. Поэтому, мы выбрали диапазон от 1024x720 до 1600x900 и

приступили к работе.

Но сначала - немного о важности такого интерфейса для

компьютерных игр. Методов такой поддержки существует очень

много, начиная, думаю, с самого простого - фиксированного

фонового изображения меню и накиданных поверх него кнопок. Но

такой метод не будет эффективным как раз из-за своей жесткой

статичности.

Представим, что наше фоновое изображение имеет размер

800x600 - довольно мало на сегодня, и довольно много, если

взглянуть на вес этого файла - около 400kb. Что же будет при запуске

игры на экране в 1280px? Разумеется, фоновое изображение потеряет

качество при масштабировании. Варианты реализации:

1. Ограничивать размер игрового окна, делая игру оконной, а

не полноэкранной. Подойдет не везде.

2. Масштабировать изображение под разрешение экрана.

Сильно потеряем в качестве.

3. Создать несколько изображений разных размеров и

подставлять их в зависимости от разрешения, при необходимости

растягивать. Самый лучший вариант, но требует большего места на

жестком диске.

На самом деле, есть еще лучший вариант - создать некоторую

систему интерфейса, позволяющую генерировать адаптивный

дизайн, состоящий, подобно паззлу, из маленьких деталей,

программно располагаемых на своих местах. Именно о таком методе

и пойдет речь в данной статье. Вот некоторые плюсы этого подхода:

1. Адаптивность. Изображение в игровом меню будет

масштабироваться в зависимости от разрешения экрана без потери

качества.

2. Легкость. Графические файлы при таком подходе будут

занимать не так много пространства на жестком диске, так как

интерфейс будет состоять не из одного большого изображения, а из

нескольких маленьких, заполняющих весь экран подобно сетке.

Ну и, конечно же, минусы. Здесь он один, зато большой. Дело в

том, что чем сложнее дизайн, тем сложнее должна быть и система,

реализующая его. Художественно оформленный интерфейс

невероятно сложно сделать адаптивным, и здесь более подошел бы

вариант с сохранением некоторого количества статичных

изображений. Если же ваш интерфейс минималистичен, и важна

каждая деталь, а размытие и потеря качества - недопустимы, то мой

метод вы вполне можете использовать. Вот, что можно с помощью

него получить:

Задание


макет адаптивной формы пользовательского интерфейса с

элементами интерактивного взаимодействия. Реализуйте контроль и

проверку правильности ввода исходных данных на JavaScript.

РЕКОМЕНДУЕМАЯ ЛИТЕРАТУРА

1. Алексеев А.А., Савельев А.О. Проектирование и разработка

веб-приложений на основе технологий Microsoft. [Электронный

ресурс] ИНТУИТ 2010 г. 495 стр. Режим доступа:

http://www.knigafund.ru/books/173602

2. Богданов М. Р. Разработка клиентских приложений Web-

сайтов. [Электронный ресурс] Интернет-Университет

Информационных Технологий 2010 г. 228 стр. Режим доступа:


3. Сычев А. В. Перспективные технологии и языки веб-

разработки. [Электронный ресурс] Национальный Открытый

Университет «ИНТУИТ» 2016 г. 494 стр. Режим доступа:


4. Савельева Н. В. Язык программирования PHP. [Электронный

ресурс] Национальный Открытый Университет «ИНТУИТ» 2016 г.

330 стр. Режим доступа: http://www.knigafund.ru/books/176101

5. Климов А. П. JavaScript на примерах / Климов А. П. ; . -

2-е изд., перераб. и доп. - СПб. : БХВ-Петербург, 2009.

6. Гаевский А. Ю. 100% самоучитель по созданию Web-

страниц и Web-сайтов. HTML и JavaScript / Гаевский А.

Ю. ; Романовский В. М.; . - М. : Технолоджи-3000, [2005]. - 464 с.

Панфилов Александр Николаевич,

Скоба Андрей Николаевич

Учебно-практическое издание

Программирование в HTML5 с JavaScript и CSS3 ______________________________________________________________

Методические указания к лабораторным работам и практическим занятиям Редактор Н.А Юшко

______________________________________________________________

Подписано в печать 02.03.2017 г.

Формат 60х84 1/16. Бумага офсетная. Печать цифровая.

Печ.л. 1.8 Уч.-изд. л. 0.75 Тираж 50. Заказ _______.

______________________________________________________________

Южно-Российский государственный политехнический университет

(НПИ) имени М.И.Платова

Редакционно-издательский отдел ЮРГПУ(НПИ)

346428, г.Новочеркасск, ул.Просвещения 132

Отпечатано в ИД «Политехник»

346428, г.Новочеркасск, ул.Первомайская 166

[email protected]

А.Н. Панфилов А.Н. Скобаfitu.npi-tu.ru/assets/fitu/iist/files/metod/html5...5....

Documents