Программирование web страниц

Модуль 1: Обзор HTML и CSS

Большинство современных веб-приложений построены на основе HTML-страниц, описывающих контент. Который читают пользователи и взаимодействуют с ним. Таблиц стилей. Чтобы сделать этот контент визуально приятным. И кода JavaScript. Чтобы обеспечить уровень интерактивности между пользователем и страницей. А также страницей и сервером. Веб — браузер использует разметку HTML и таблицы стилей для отображения этого содержимого и запускает код JavaScript для реализации поведения приложения. Этот модуль рассматривает основы HTML и CSS, а также знакомит с инструментами. Которые этот курс использует для создания HTML-страниц и таблиц стилей.

Занятия

  • Обзор HTML
  • Обзор CSS
  • Создание веб — приложения с помощью Visual Studio 2017

Лаборатория : Изучение приложения Contoso Conference Application

  • Изучение приложения Contoso Conference Application
  • Изучение и изменение приложения Contoso Conference Application

После завершения этого модуля студенты смогут:

  • Объясните. Как использовать HTML — элементы и атрибуты для размещения веб-страницы.
  • Объясните. Как использовать CSS для применения базового стиля к веб-странице.
  • Опишите инструменты, предоставляемые Microsoft Visual Studio для создания веб-приложений.

Модуль 2: Создание и стилизация HTML-страниц

Технологии, лежащие в основе всех веб-приложений HTML, CSS и JavaScript. Были доступны в течение многих лет. Но назначение и сложность веб-приложений значительно изменились. HTML5-это первая крупная редакция HTML за последние 10 лет, и она обеспечивает очень подходящее средство представления контента для традиционных веб-приложений, приложений. Работающих на портативных мобильных устройствах. А также на платформе Windows 10. Этот модуль знакомит с HTML5, описывает его новые функции, демонстрирует. Как представить контент с помощью новых функций в HTML5 и как стилизовать этот контент с помощью CSS.

Занятия

  • Создание страницы HTML5
  • Стиль страницы HTML5

Лаборатория : Создание и стилизация HTML5-страниц

  • Создание HTML5 Страниц
  • Стилизация HTML-страниц

После завершения этого модуля студенты смогут:

  • Опишите назначение и новые функции в HTML5 и объясните. Как использовать новые элементы HTML5 для размещения веб-страницы.
  • Объясните. Как использовать CSS для стилизации макета, текста и фона веб-страницы.

Модуль 3: Введение в JavaScript

HTML и CSS предоставляют структурную, семантическую и презентационную информацию для веб-страницы.

Однако эти технологии не описывают, как пользователь взаимодействует со страницей с помощью браузера. Для реализации этой функции все современные браузеры включают движок JavaScript для поддержки использования скриптов на странице. Они также реализуют Document Object Model (DOM), стандарт W3C, который определяет. Как браузер должен отражать страницу в памяти. Чтобы скриптовые движки могли получать доступ к содержимому этой страницы и изменять его. Этот модуль знакомит с программированием на JavaScript и DOM.

Занятия

  • Обзор JavaScript
  • Введение в объектную модель документа

Лаборатория : Отображение данных и обработка событий с помощью JavaScript.

  • Отображение Данных Программно
  • Обработка событий

После завершения этого модуля студенты смогут:

  • Опишите базовый синтаксис JavaScript.
  • Напишите код JavaScript. Который использует DOM для изменения и извлечения информации с веб-страницы.

Модуль 4: Создание форм для сбора и проверки пользовательских данных

Веб-приложениям часто приходится собирать пользовательский ввод для выполнения своих задач. Веб — страница должна быть ясной и краткой о вводе, ожидаемом от пользователя. Чтобы свести к минимуму разочаровывающие недоразумения относительно информации. Которую пользователь должен предоставить.

Кроме того, все входные данные должны быть проверены, чтобы убедиться. Что они соответствуют требованиям приложения. В этом модуле вы узнаете. Как определить формы ввода с помощью новых типов ввода, доступных в HTML5. Вы также увидите, как проверить данные с помощью атрибутов HTML5. Наконец, вы узнаете. Как выполнить расширенную проверку ввода с помощью кода JavaScript и как обеспечить обратную связь с пользователями. Когда их ввод не является допустимым или не соответствует ожиданиям приложений.

Занятия

  • Создание форм HTML5
  • Проверка пользовательского ввода с помощью атрибутов HTML5

  • Проверка пользовательского ввода с помощью JavaScript

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

  • Создание формы и проверка ввода данных пользователем с помощью атрибутов HTML5
  • Проверка пользовательского ввода с помощью JavaScript

После завершения этого модуля студенты смогут:

  • Создавайте формы ввода данных с помощью HTML5.
  • Используйте атрибуты форм HTML5 для проверки данных.
  • Напишите код JavaScript для выполнения задач проверки. Которые не могут быть легко реализованы с помощью атрибутов HTML5.

Модуль 5: Связь с удаленным сервером

Многие веб-приложения требуют использования данных, хранящихся на удаленном сайте. В некоторых случаях вы можете получить доступ к этим данным, просто загрузив их с указанного URL-адреса. Но в других случаях данные инкапсулируются удаленным сайтом и становятся доступными через веб-службу. В этом модуле вы узнаете. Как получить доступ к веб-службе с помощью кода JavaScript и включить удаленные данные в свои веб-приложения. Вы рассмотрите две технологии для достижения этой цели: объект XMLHttpRequest. Который действует как программная оболочка вокруг HTTP-запросов к удаленным веб-сайтам. И Fetch API. Который упрощает многие задачи. Связанные с отправкой запросов и получением данных.

Поскольку Fetch API и объект XMLHttpRequest являются асинхронными API, вы сначала узнаете о том. Как обрабатывать асинхронные задачи с помощью объекта Promise. Функций arrow и нового синтаксиса async/await. Который позволяет обрабатывать асинхронные запросы так. Как если бы они были синхронными.

Занятия

  • Асинхронное программирование на JavaScript
  • Отправка и получение данных с помощью объекта XMLHttpRequest
  • Отправка и получение данных с помощью API Fetch

Лаборатория : Связь с удаленным источником данных

  • Извлечение Данных
  • Сериализация и передача данных
  • Рефакторинг кода с помощью метода jQuery ajax

После завершения этого модуля студенты смогут:

  • Обрабатывайте асинхронные задачи JavaScript с помощью новых технологий асинхронного программирования.
  • Отправляйте данные в веб-службу и получайте данные из веб-службы с помощью объекта XMLHttpRequest.
  • Отправляйте данные в веб-службу и получайте данные из веб-службы с помощью API Fetch.

Модуль 6: Стилизация HTML5 с помощью CSS3

Стилизация контента, отображаемого на веб-странице. Является важным аспектом создания приложения привлекательным и простым в использовании. CSS-это основной механизм, который веб-приложения используют для реализации стиля, а функции, добавленные в CSS3, поддерживают многие из новых возможностей. Найденных в современных браузерах. Там, где CSS1 и CSS2.1 были едиными документами. Консорциум World Wide Web решил написать CSS3 как набор модулей. Каждый из которых фокусируется на одном аспекте презентации. Таком как цвет, текст. Модель коробки и анимация. Это позволяет спецификациям развиваться постепенно, вместе с их реализациями. Каждая спецификация определяет свойства и значения. Которые уже существуют в CSS1 и CSS2, а также новые свойства и значения. В этом модуле вы изучите свойства и значения, определенные в нескольких из этих модулей, новые селекторы, определенные в CSS3, и использование псевдоклассов и псевдоэлементов для уточнения этих выборок.

Занятия

  • Стилизация текста с помощью CSS3
  • Элементы Блока Стилизации
  • Псевдоклассы и псевдоэлементы
  • Улучшение графических эффектов с помощью CSS3

Лаборатория : Стилизация текста и блочных элементов с помощью CSS3

  • Стиль панели навигации
  • Стилизация ссылки на Регистр
  • Стилизация страницы О программе

После завершения этого модуля студенты смогут:

  • Используйте новые функции CSS3 для стилизации текстовых элементов.
  • Используйте новые функции CSS3 для стилизации блочных элементов.
  • Используйте селекторы CSS3, псевдоклассы и псевдоэлементы для уточнения стиля элементов.
  • Улучшайте страницы с помощью графических эффектов CSS3.

Модуль 7: Создание объектов и методов с помощью JavaScript

Повторное использование кода и простота обслуживания являются ключевыми целями написания хорошо структурированных приложений. Если вы сможете достичь этих целей, вы сократите расходы. Связанные с написанием и поддержанием вашего кода. Этот модуль описывает. Как писать хорошо структурированный код JavaScript с помощью языковых функций. Таких как пространства имен, объекты. Инкапсуляция и наследование. Эти понятия могут показаться знакомыми, если у вас есть опыт работы с такими языками, как Java или C#. Но подход JavaScript совершенно иной. И есть много тонкостей. Которые вы должны понять. Если хотите написать поддерживаемый код.

Занятия

  • Написание Хорошо Структурированного Кода JavaScript
  • Создание Пользовательских Объектов
  • Расширение объектов

Лаборатория : Уточнение кода для обеспечения ремонтопригодности и расширяемости

  • Наследование объектов
  • Рефакторинг кода JavaScript для использования объектов

После этого модуля студенты смогут:

  • Напишите хорошо структурированный код JavaScript.
  • Используйте код JavaScript для создания пользовательских объектов.
  • Реализуйте объектно-ориентированные методы с помощью идиом JavaScript.

Модуль 8: Создание интерактивных страниц с помощью API HTML5

Интерактивность является ключевым аспектом современных веб-приложений. Позволяя создавать привлекательные веб-сайты. Которые могут быстро реагировать на действия пользователя. А также адаптироваться к местоположению пользователя. Этот модуль описывает. Как создавать интерактивные HTML5 веб-приложения. Которые могут получить доступ к локальной файловой системе. Позволяют пользователю перетаскивать данные на элементы веб-страницы. Воспроизводить мультимедийные файлы и получать информацию о геолокации.

Занятия

  • Взаимодействие с файлами
  • Включение Мультимедиа
  • Реагирование на местоположение и контекст браузера
  • Отладка и профилирование веб-приложения

Лаборатория : Создание интерактивных страниц с помощью API HTML5

  • Перетаскивание изображений
  • Включение видео
  • Использование API геолокации для сообщения о текущем местоположении пользователя

После завершения этого модуля студенты смогут:

  • Получите доступ к локальной файловой системе и добавьте поддержку перетаскивания на веб-страницы.
  • Воспроизведение видео-и аудиофайлов на веб-странице без необходимости использования плагинов. Получить информацию о текущем местоположении пользователя.
  • Используйте инструменты разработчика F12 в Microsoft Edge для отладки и профилирования веб-приложения.

Модуль 9: Добавление автономной поддержки веб-приложений

Веб-приложения зависят от возможности подключения к сети для извлечения веб-страниц и данных. Однако в некоторых средах сетевое соединение может быть прерывистым. В таких ситуациях может оказаться полезным разрешить приложению продолжать функционировать. Используя данные. Кэшированные на устройстве пользователя. HTML5 предоставляет выбор новых вариантов хранения на стороне клиента. Включая хранилище сеансов и локальное хранилище. А также механизм кэширования ресурсов. Называемый кэшем приложений. В этом модуле вы узнаете. Как использовать эти технологии для создания надежных веб-приложений. Которые могут продолжать работать даже при отсутствии сетевого подключения.

Занятия

  • Чтение и запись данных локально
  • Добавление автономной поддержки с помощью кэша приложений

Лаборатория : Добавление автономной поддержки веб-приложений

  • Кэширование автономных данных с помощью API кэша приложений
  • Сохранение пользовательских данных с помощью API локального хранилища

После завершения этого модуля студенты смогут:

  • Сохраните данные локально на устройстве пользователя и получите доступ к ним из веб-приложения.
  • Настройте веб — приложение для поддержки автономных операций с помощью кэша приложений.

Модуль 10: Реализация адаптивного пользовательского интерфейса

Одной из наиболее устойчивых особенностей сети является ее временная природа. Впервые монополия на клавиатуру и мышь подвергается сомнению, а это означает. Что мы подвергаем сомнению то. Как разрабатываются пользовательские интерфейсы. Вы можете разрабатывать веб-приложение на компьютере с большим монитором высокого разрешения. Мышью и клавиатурой. Но другие пользователи могут просматривать и взаимодействовать с вашим приложением на смартфоне или планшете без мыши или иметь монитор с другим разрешением. Пользователи также могут захотеть распечатать страницы вашего приложения. В этом модуле вы узнаете. Как создать веб-сайт. Который адаптирует макет и функциональность своих страниц к возможностям и форм-фактору устройства. На котором он просматривается. Вы узнаете. Как определить тип устройства, используемого для просмотра страницы. И узнаете стратегии размещения контента. Эффективно ориентированного на конкретные устройства.

Занятия

  • Поддержка Нескольких Форм-Факторов
  • Создание адаптивного пользовательского интерфейса

Лаборатория : Реализация адаптивного пользовательского интерфейса

  • Создание удобной для печати таблицы стилей
  • Адаптация макета страницы под различные форм-факторы

После завершения этого модуля студенты смогут:

  • Опишите требования к веб-сайту для реагирования на различные форм-факторы.
  • Создавайте веб-страницы, которые могут адаптировать свой макет в соответствии с форм-фактором устройства. На котором они отображаются.

Модуль 11: Создание расширенной графики

Интерактивная графика с высоким разрешением является ключевой частью большинства современных приложений. Графика может помочь улучшить пользовательский опыт, предоставляя визуальный аспект контента. Делая веб-сайт более привлекательным и простым в использовании. Интерактивность позволяет графическим элементам веб-сайта адаптироваться и реагировать на вводимые пользователем данные или изменения в окружающей среде. А также является еще одним важным элементом удержания внимания пользователя и его интереса к контенту.

Этот модуль описывает. Как создавать расширенную графику в HTML5 с помощью масштабируемой векторной графики (SVG) и Microsoft Canvas API. Вы узнаете. Как использовать элементы, связанные с SVG, например. И отображать графический контент на веб-странице. Вы также узнаете. Как разрешить пользователю взаимодействовать с элементами SVG с помощью таких событий. Как события клавиатуры и мыши.

API Canvas несколько отличается от SVG. API Canvas предоставляет элемент и набор функций JavaScript. Которые можно вызвать для рисования графики на поверхности холста. Вы узнаете. Как использовать Canvas API, а также узнаете. Когда более целесообразно использовать Canvas или SVG.

Занятия

  • Создание интерактивной графики с помощью SVG
  • Рисование графики с помощью API Canvas

Лаборатория : Создание Продвинутой графики

  • Создание интерактивной Карты места проведения с помощью SVG
  • Создание значка динамика с помощью API Canvas

После завершения этого модуля студенты смогут:

  • Используйте SVG для создания интерактивного графического контента.
  • Используйте API Canvas для создания графического контента программно.

Модуль 12: Анимация пользовательского интерфейса

Анимация является ключевым элементом в поддержании интереса пользователя к веб-сайту. Тщательно реализованные анимации улучшают удобство использования веб-страницы и обеспечивают полезную визуальную обратную связь о действиях пользователя.

Этот модуль описывает. Как улучшить веб-страницы с помощью CSS-анимации. Вы узнаете. Как применять переходы к значениям свойств. Переходы позволяют указать время изменения свойств. Например, можно указать. Что элемент должен изменять свою ширину и высоту в течение пяти секунд при наведении на него указателя мыши. Далее вы узнаете. Как применять 2D и 3D преобразования к элементам. Преобразования позволяют масштабировать, переводить, поворачивать и наклонять элементы. Вы также можете применять переходы к преобразованиям. Чтобы преобразование применялось постепенно в течение заданного периода анимации.

В конце этого модуля вы узнаете. Как применять анимацию ключевых кадров к элементам. Анимация ключевых кадров позволяет определить набор значений свойств в определенные моменты анимации. Например, можно задать цвет и положение элемента в 0%, 33%, 66% и 100% периода анимации.

Занятия

  • Применение CSS-переходов
  • Трансформирующие Элементы
  • Применение анимации ключевых кадров CSS

Лаборатория : Анимация пользовательского интерфейса

  • Применение CSS-переходов
  • Применение Анимации Ключевых Кадров

После завершения этого модуля студенты смогут:

  • Применяйте переходы для анимации значений свойств в HTML-элементы.
  • Применяйте 2D-и 3D-преобразования к HTML-элементам.
  • Применяйте анимацию ключевых кадров к HTML-элементам.

Модуль 13: Реализация связи в реальном времени с использованием веб-сокетов

Веб-страницы запрашивают данные по запросу с веб-сервера, отправляя HTTP-запросы. Эта модель идеально подходит для построения интерактивных приложений. Где функциональность определяется действиями пользователя. Однако в приложении, которое должно отображать постоянно меняющуюся информацию. Этот механизм менее подходит. Например, страница финансовых акций бесполезна, если она показывает цены. Которые даже несколько минут назад. И вы не можете ожидать. Что пользователь будет постоянно обновлять страницу. Отображаемую в браузере. Это то, где веб-сокеты полезны. API Web Sockets предоставляет механизм для реализации двусторонней связи в реальном времени между веб-сервером и браузером.

Этот модуль знакомит с веб-сокетами, описывает их работу и объясняет. Как создать соединение с веб-сокетом. Которое можно использовать для передачи данных в режиме реального времени между веб-страницей и веб-сервером.

Занятия

  • Введение в веб-сокеты
  • Использование API WebSocket

Лаборатория : Выполнение связи в реальном времени с помощью веб-сокетов

  • Получение сообщений из веб-сокета
  • Отправка сообщений в веб-сокет
  • Обработка Различных Типов Сообщений Веб-Сокетов

После завершения этого модуля студенты смогут:

  • Опишите, как использование веб-сокетов помогает обеспечить связь в реальном времени между веб-страницей и веб-сервером.
  • Используйте API Web Sockets для подключения к веб-серверу с веб-страницы и обмена сообщениями между веб-страницей и веб-сервером.

Модуль 14: Выполнение фоновой обработки с помощью веб-рабочих

Код JavaScript-это мощный инструмент для реализации функциональности веб-страницы, но вы должны помнить. Что этот код запускается либо при загрузке веб-страницы. Либо в ответ на действия пользователя во время отображения веб-страницы. Код запускается браузером, и если код выполняет операции, выполнение которых занимает значительное время. Браузер может перестать реагировать и ухудшить работу пользователя.

HTML5 вводит веб-рабочих, которые позволяют разгрузить обработку для разделения фоновых потоков и. Таким образом. Позволяют браузеру оставаться отзывчивым. Этот модуль описывает. Как работают веб-работники и как вы можете использовать их в своих веб-приложениях.

Занятия

  • Понимание веб-работников
  • Выполнение асинхронной обработки с помощью Веб-рабочих

Лаборатория : Создание веб-рабочего процесса

  • Повышение оперативности реагирования с помощью веб-работника

После завершения этого модуля студенты смогут:

  • Объясните. Как веб-работники могут быть использованы для реализации многопоточности и повышения быстродействия веб-приложения.
  • Выполняйте обработку с помощью веб-работника, общайтесь с веб-работником и управляйте им.

Модуль 15: Упаковка JavaScript для производственного развертывания

Использование моделей позволяет создавать большие, сложные приложения. Прогресс языка в версии ECMAScript6 позволяет построить приложение с помощью упрощенного процесса построения приложения. Однако использование модулей ECMAScript6 и других функций пока не поддерживается во всех браузерах. Такие инструменты, как Node.js. Webpack и Babel позволяют использовать новые языковые функции наряду с поддержкой различных браузеров. Чтобы избежать ущерба для пользовательского опыта.

В этом модуле мы представим теорию, лежащую в основе этих инструментов, когда нам нужно их использовать. И различные варианты их использования. В конце модуля мы увидим, как использовать эти инструменты для написания кода ECMAScript6, поддерживаемого во всех браузерах.

Занятия

  • Понимание Транспиляторов И Связывания Модулей
  • Создание отдельных пакетов для Кроссбраузерной поддержки

Лаборатория : Настройка пакета Webpack для производства

  • Создание и развертывание пакетов с помощью WebPack