Geekbrains | AngularJSD3.js. Векторная графика в одностраничных Web-приложениях (2016) PCRec-Автор (режиссер): Geekbrains Преподаватель: Русанов Дмитрий Жанр: Программирование, AngularJS, D3.js Описание:
Курс предназначен для продвинутых JavaScript-программистов, желающих получить новые знания в области работы с векторной графикой SVG в браузерах, используя, де факто, современный стандарт (библиотеку) D3.js. Написание более-менее серьезного и функционального приложения с использованием D3 – сложная задача, решая которую, легко запутаться. Данный курс научит вас работать с D3 в симбиозе с мощнейшим фреймворком построения одностраничных Web-приложений AngularJS, чтобы не утерять контроль над вашим кодом. Продолжительность: 16:53:20 Качество видео: PCRec Видео: AVC/H.264, 1280x720, ~309 Kbps Аудио: AAC, 2 ch, 64.0 Kbps На протяжении всего курса под руководством преподавателя шаг за шагом с подробными объяснениями будет разрабатываться приложение – интерактивный векторный конструктор. Версия AngularJS: 1.x (последняя на момент проведения курса) CSS будем оформлять с помощью SASS, шаблоны – Jade. Чему Вы научитесь
Вы научитесь работать с векторной графикой в браузере в интерактивном режиме с помощью наиболее функционального средства в этой области - библиотеки 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. Тестирование асинхронного кода. Подведение итогов.
Mediainfo:
Общее
Полное имя : D:\GeekBrains. AngularJSD3.js\Видео\1. Основы D3.js и векторной графики SVG.mp4
Формат : MPEG-4
Профиль формата : Base Media
Идентификатор кодека : isom (isom/iso2/avc1/mp41)
Размер файла : 323 Мбайт
Продолжительность : 1 ч. 58 м.
Общий поток : 381 Кбит/сек
Дата кодирования : UTC 2016-08-29 10:05:33
Дата пометки : UTC 2016-08-29 10:05:33
Программа кодирования : Lavf56.36.100 Видео
Идентификатор : 2
Формат : AVC
Формат/Информация : Advanced Video Codec
Профиль формата : [url=mailto:High@L3.1]High@L3.1[/url]
Параметр CABAC формата : Да
Параметр ReFrames формата : 4 кадра
Идентификатор кодека : avc1
Идентификатор кодека/Информация : Advanced Video Coding
Продолжительность : 1 ч. 58 м.
Битрейт : 309 Кбит/сек
Номинальный битрейт : 384 Кбит/сек
Ширина : 1280 пикселей
Высота : 720 пикселей
Соотношение сторон : 16:9
Режим частоты кадров : Переменный
Частота кадров : 15,000 кадров/сек
Минимальная частота кадров : 14,913 кадров/сек
Максимальная частота кадров : 15,163 кадров/сек
Цветовое пространство : YUV
Субдискретизация насыщенности : 4:2:0
Битовая глубина : 8 бит
Тип развёртки : Прогрессивная
Бит/(Пиксели*Кадры) : 0.022
Размер потока : 263 Мбайт (81%)
Библиотека кодирования : x264 core 132
Настройки программы : cabac=1 / ref=1 / deblock=1:0:0 / analyse=0x3:0x113 / me=hex / subme=2 / psy=1 / psy_rd=1.00:0.00 / mixed_ref=0 / me_range=16 / chroma_me=1 / trellis=0 / 8x8dct=1 / cqm=0 / deadzone=21,11 / fast_pskip=1 / chroma_qp_offset=0 / threads=4 / lookahead_threads=1 / sliced_threads=0 / nr=0 / decimate=1 / interlaced=0 / bluray_compat=0 / constrained_intra=0 / bframes=3 / b_pyramid=2 / b_adapt=1 / b_bias=0 / direct=1 / weightb=1 / open_gop=0 / weightp=1 / keyint=30 / keyint_min=3 / scenecut=40 / intra_refresh=0 / rc_lookahead=10 / rc=cbr / mbtree=1 / bitrate=384 / ratetol=1.0 / qcomp=0.60 / qpmin=0 / qpmax=69 / qpstep=4 / vbv_maxrate=384 / vbv_bufsize=512 / nal_hrd=none / ip_ratio=1.40 / aq=1:1.00
Дата кодирования : UTC 2016-08-29 10:05:33
Дата пометки : UTC 2016-08-29 10:05:33 Аудио
Идентификатор : 1
Формат : AAC
Формат/Информация : Advanced Audio Codec
Профиль формата : LC
Идентификатор кодека : 40
Продолжительность : 1 ч. 58 м.
Вид битрейта : Постоянный
Битрейт : 64,0 Кбит/сек
Каналы : 2 канала
Расположение каналов : Front: L R
Частота : 44,1 КГц
Частота кадров : 43,066 кадра/сек (1024 spf)
Метод сжатия : С потерями
Размер потока : 54,4 Мбайт (17%)
Default : Да
Alternate group : 1
Дата кодирования : UTC 2016-08-29 10:05:33
Дата пометки : UTC 2016-08-29 10:05:33
Вы не можете начинать темы Вы не можете отвечать на сообщения Вы не можете редактировать свои сообщения Вы не можете удалять свои сообщения Вы не можете голосовать в опросах Вы не можете прикреплять файлы к сообщениям Вы не можете скачивать файлы
!ВНИМАНИЕ!
Сайт не предоставляет электронные версии произведений, а занимается лишь коллекционированием и каталогизацией ссылок, присылаемых и публикуемых на форуме нашими читателями. Если вы являетесь правообладателем какого-либо представленного материала и не желаете, чтобы ссылка на него находилась в нашем каталоге, свяжитесь с нами, и мы незамедлительно удалим ее. Файлы для обмена на трекере предоставлены пользователями сайта, и администрация не несет ответственности за их содержание. Просьба не заливать файлы, защищенные авторскими правами, а также файлы нелегального содержания!
Вход
Регистрация
![[Цитировать]](./styles/templates/default/images/lang/ru/icon_quote.gif "Ответить с цитатой"){kind=icon}
Отправлено: 
Вверх
