Векторная графика в одностраничных Web-приложениях (2016)

AngularJS/D3.js
Векторная графика в одностраничных Web-приложениях
Требования: уверенные знания JavaScript.



Курс предназначен для продвинутых JavaScript-программистов, желающих получить новые знания в области работы с векторной графикой SVG в браузерах, используя, де факто, современный стандарт - библиотеку D3.js. Написание более-менее серьезного и функционального приложения с использованием D3.js – сложная задача, решая которую, легко запутаться.



Данный курс научит вас работать с D3.js в симбиозе с мощнейшим фреймворком построения одностраничных веб-приложений Angular.js, чтобы не утерять контроль над вашим кодом.

В течение всего курса под руководством преподавателя шаг за шагом с подробными объяснениями будет разрабатываться приложение – интерактивный векторный конструктор.

Средняя продолжительность занятий: 3 часа.

Язык программирования: JavaScript / ECMAScript 2015 (по желанию слушателей)

Версия Angular.js: 1.x (последняя на момент проведения курса)

CSS будем оформлять с помощью SASS, шаблоны – Jade.

Для прохождения курса вам понадобится аккаунт GitHub.

Чему Вы научитесь

• Работать с векторной графикой в браузере в интерактивном режиме с помощью наиболее функционального средства в этой области - библиотеки D3.js;
  
• Создавать и тестировать модульные масштабируемые одностраничные приложения на примере полнофункционального векторного редактора;
  
• Использовать дополнительные инструменты и средства, облегчающие и ускоряющие процесс разработки приложений.
  

Программа курса Урок 1. Основы D3.js и векторной графики SVG Библиотека D3. Концепция работы с данными в стиле D3. Формирование [связи] данных (Data Joins). Выборки данных: Enter, Update, Exit.

Свойства выборки.

Методы для работы с выборками.

Краткие сведения о векторной графике SVG.

Координатная система SVG.

Элементы и . Графические примитивы (объекты) SVG: , , , , . Аффинные преобразования объектов SVG.

Фильтры SVG. Подготовка рабочей среды и введение в AngularJS Урок 2. Подготовка рабочей среды и введение в AngularJS Библиотека Browserify.

Менеджеры пакетов Bower, npm.

Автоматизированная сборка проекта с помощью Grunt или Gulp (по желанию слушателей). Настройка локального сервера для обслуживания запросов приложения.

Использование распределенной системы контроля версий Git и сервиса GitHub.com для организации работы над проектом. AngularJS: введение.

D3.js: разработка рабочего поля векторного конструктора Урок 3. AngularJS: введение.

D3.js: разработка рабочего поля векторного конструктора Введение в AngularJS.

Модель, представление и контроллер в AngularJS.

Управление зависимостями, для чего это необходимо.

Модули, директивы и сервисы.

Сервис $q в AngularJS.

Поведение Zoom в D3.js. Переходы (Transitions) в D3: что это такое, как с ними работать.

Реализация сетки конструктора. Создание статичных перетаскиваемых компонентов (деталей макета) Урок 4. Создание статичных перетаскиваемых компонентов (деталей макета) Интерполяция в D3. Поведение Drag в D3. Разработка директив компонентов – общие подходы.

Разработка поведений объектов на поле конструктора.

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

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

Компиляция директив AngularJS.

Работа с элементом в SVG, основные команды.

Правила заполнения сложных фигур Создание вращающихся компонентов и креплений Урок 5. Создание вращающихся компонентов и креплений Функция d3.timer, рисование зубчатой передачи.

Управление скоростью вращения.

Отрисовка гексагональных креплений-болтов.

Модель отрисовки SVG.

Управление порядком отрисовки и наложения объектов SVG. Работа над сервисом отрисовки деталей и доработка их функциональности Урок 6. Работа над сервисом отрисовки деталей и доработка их функциональности Создание треугольника.

Написание сервиса отрисовки деталей.

Реализация дополнительной функциональности для всех деталей: вращение, удаление с поля конструктора, изменение цвета. Реализация палитры компонентов (деталей макета) Урок 7. Реализация палитры компонентов (деталей макета) Реализация перетаскивания Drag & Drop на элемент SVG.

Определение координат при перетаскивании: пользовательские (user) и экранные (viewport) координаты в SVG, матрица текущих преобразований (CTM, Current Transformation Matrix) SVG, перевод из одной системы координат в другую.

Написание тестов для приложения

Урок 8. Написание тестов для приложения

Конфигурация запускателя модульных тестов Karma.

Запускатель функциональных (E2E) тестов Protractor, его конфигурация.

Написание модульных и функциональных тестов с использованием Jasmine.

Тестирование асинхронного кода.

Подведение итогов.
Скачать:
Скрытая информация :: Авторизуйтесь для просмотра »