Приглашаем студентов вузов и начинающих специалистов в Школу разработки интерфейсов Яндекса. Обучение бесплатное, и в этот раз будет открыто сразу в трёх городах: Москве, Санкт-Петербурге и Симферополе. Приём заявок закрывается уже в августе.
Кто такой разработчик интерфейсов? Это тот, кто разрабатывает на HTML, CSS, JavaScript и отвечает за реализацию взаимодействия с пользователем. В нашей Школе мы делаем акцент на практике, потому что верим, что качественного результата можно добиться только через опыт, а теория сейчас легко доступна для всех. К примеру, сегодня мы поделимся с читателями Хабра всеми записями наших лекций с предыдущего набора Школы.
«Адаптивная вёрстка (обновлённая версия)» — Дмитрий Душкин
С появлением и широким распространением стандартов Flexbox Layout и CSS Grid Layout адаптивный дизайн перестаёт быть трудоёмким. Теперь реализовать его можно быстро, просто и без привлечения сторонних библиотек. Мы рассмотрим практические примеры адаптивной вёрстки с использованием базовых и продвинутых инструментов (относительные величины измерений, нефиксированные размеры, media queries, srcset, тег и другие).
«Работа с сенсорным пользовательским вводом» — Владимир Рыбаков
Мы поговорим об особенностях интерфейса на устройствах с сенсорным вводом. Рассмотрим актуальные стандарты обработки пользовательских событий Pointer Events и Touch Events, а также новые возможности, которые предлагают нам Pointer Lock API и Force Touch API.
«Git — инструмент для совместной работы, с нуля и до регламента в команде» — Сергей Сергеев
Когда команда разработчиков растёт, возникает очень много точек соприкосновений. Плохая организация совместной работы приводит к рассинхронизации действий и в конечном итоге к затягиванию сроков и проблемам с добавлением новых функций. Поэтому важно изучать не только языки и технологии, но и инструменты, позволяющие организовать работу. Я расскажу об основах и особенностях Git, а также о том, как с ним используют разные команды.
«Графические эффекты. Работа с аудио, синтез и распознавание речи» — Александр Завьялов
Я расскажу о создании графических эффектов и анимаций в вебе при помощи CSS, JS, SVG, Canvas и WebGL. Определим, что эффективнее использовать в разных ситуациях. Познакомимся с Web Audio API для работы со звуком в вебе. Рассмотрим API браузера для синтеза и распознавания речи, а также возможность использовать эту функциональность с применением технологии SpeechKit.
«Видео в вебе» — Алексей Гусев
Поговорим о способах применения видеотега в веб-браузере (для отображения роликов и нужд дизайна), актуальных видеоформатах и особенностях API HTML5 Video. Также рассмотрим схему работы адаптивных потоковых видеотрансляций и способы защиты контента.
Записи всех лекций вы можете найти на YouTube.
Примеры домашних заданий
1. Необходимо реализовать адаптивный дизайн ленты статей Яндекс.Дзена. Предоставляется базовый дизайн ленты для экрана шириной 1024px с шириной колонки 704px. Изменения размеров и компоновки карточек на других размерах экрана необходимо придумать и реализовать самостоятельно.
2. Необходимо реализовать пользовательские жесты в рамках игры «Dungeon of Doom». Прохождение игры состоит из последовательного открытия дверей и в конце открытия сундука. Каждая дверь представляет из себя мини-загадку для решения которой игрок должен сделать какой-либо жест. Жесты могут быть как для одного указателя, так и для нескольких.
3. Найти проблемы со скоростью загрузки сайта и предложить способы их решения.
4. Необходимо типизировать функцию extend с помощью двух инструментов TypeScript и Flow. Задача написать максимально надежный (type safety) код.
5. Вам предлагается реализовать один из наиболее популярных в мире фронтенда архитектурных подходов — Flux — в формате простого фреймворка. Ваш фреймворк должен уметь обрабатывать действия пользователя и предоставлять API для связи с бэкэндом.
Полезные ссылки
1. Форма для подачи заявки на вступление в Школу
2. Записи всех лекций предыдущего набора
3. Видео с отзывами выпускников
Автор: BarakAdama
