Интерактивная карта с нуля [Мастер-класс]

Сайт: Предложить идею для нового мастер-класса: Поддержать: ---- Код по стриму: ---- Ссылки на сайты, которые использовались во время мастер-класса: - тут можно скачать нод, который нужен для работы с кодом; - тут можно скачать visual studio code, редактор кода; - сайт для проверки в каких версиях работают фичи; - тут можно скачать редактор SVG; - тут можно скачать редактор изображений; - здесь можно взять код для подключения JQuery; - документация Мозиллы, к которой периодические обращались; ---- На ваших глазах родится несложная интерактивна карта авторского ролевого мира. Вы научитесь создавать нечто подобное самостоятельно и поймёте что программировать совсем не страшно. ---- 00:00 - Мы в эфире! 02:34 - План работы для создания интерактивной карты 08:09 - Подготовка рабочего места 21:30 - Холст: как облегчить вес картинки без потери качества 24:53 - Вопрос про поддержку браузерами формата WebP 29:43 - Разметка: долго, нудно, но без неё никак 01:38:36 - Как лучше сохранять svg-файл 01:39:52 - Что делать после сохранения svg-файла 01:41:07 - Подключаем Jquery 01:43:25 - Пристегните ремни, мы улетаем в космос c Javascript! 02:10:00 - Как задать нужные размеры холсту на странице 02:14:29 - Начинаем делать CSS-оформление 02:17:16 - Магия вне Хогвартса (создание слоя для маски карты) 02:19:17 - Вопрос про vm и vh и отличие от % 02:22:01 - Продолжаем творить магию вне Хогвартса (создание слой для маски карты) 02:25:39 - Проблема с добавлением слоя для маски карты и как её решить 02:30:33 - Стилизация слоя для маски карты 02:35:43 - Ещё раз пояснение о проблеме и решении добавления слоя для маски карты 02:37:07 - Продолжается стилизация слоя для маски карты 02:37:55 - Как сделать чтобы карта реагировала на наведение 02:47:30 - Как добавить подсветку при наведении 02:51:09 - Проблема с подсветкой при наведении и как её решить 03:07:40 - Продолжение работ по интерактивности 03:10:38 - Опа! Подсветка готова! 03:14:59 - Добавление событийной части: название при наведении и блок с информацией при нажатии 03:17:30 - Как добавить всплывающее окно с информацией региона при наведении и нажатии 03:22:25 - HTML-код для всплывающих описаний 03:23:08 - Как сделать чтобы всплывающие описание подгружались из отдельного файла 03:28:24 - Проблема с подгрузкой описаний и как её решить 03:29:33 - Как сделать чтобы при наведении на регионы появлялось его название 03:32:27 - Стилизация всплывающих названий 03:34:20 - Как сделать чтобы контейнер с название двигался за курсором 03:38:20 - Ещё немного стилизации всплывающих названий 03:41:40 - Как сделать чтобы обрабатывались нажатия 03:44:44 - Стилизация блоки с описаниями появляющиеся при нажатии 03:47:33 - Как добавить блокам с описаниями кнопочку закрытия 03:53:02 - Лирическое отступление про неровные границы регионов 03:54:13 - Финальная CSS-стилизация карты при наведении и нажатии 03:57:58 - Финальные Javascript-работы по интерактивности 04:00:58 - Карта готова, как внедрить её на готовый MyBB-форум 04:08:23 - Упс, стиль не прогрузился))) 04:09:10 - Map-container стал размером больше чем нужно. Как исправить? 04:16:58 - Внезапное озарение: не та версия Jquery. Как исправить? 04:32:21 - Как добавить кнопку “Открыть карту в полном размере“ 04:36:27 - Куда дели кнопку?! 04:37:48 -Как сделать чтобы при нажатии на кнопку карта открывалась в полном размере 04:39:02 - Упс))) Всё сломалось 04:41:57 - Е-е-е! Всё работает! 04:42:06 - Финальные штрихи… 04:53:00 - Всё. Итоги 04:55:30 - Всем рок!