Яндекс вновь открывает набор в Школу разработки интерфейсов. Примеры лекций и домашних заданий с предыдущего набора

Приглашаем студентов вузов и начинающих специалистов в Школу разработки интерфейсов ^[1] Яндекса. Обучение бесплатное, и в этот раз будет открыто сразу в трёх городах: Москве, Санкт-Петербурге и Симферополе. Приём заявок закрывается уже в августе.

Кто такой разработчик интерфейсов? Это тот, кто разрабатывает на 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 ^[2].

Примеры домашних заданий

1. Необходимо реализовать адаптивный дизайн ленты статей Яндекс.Дзена. Предоставляется базовый дизайн ленты для экрана шириной 1024px с шириной колонки 704px. Изменения размеров и компоновки карточек на других размерах экрана необходимо придумать и реализовать самостоятельно.

2. Необходимо реализовать пользовательские жесты в рамках игры «Dungeon of Doom». Прохождение игры состоит из последовательного открытия дверей и в конце открытия сундука. Каждая дверь представляет из себя мини-загадку для решения которой игрок должен сделать какой-либо жест. Жесты могут быть как для одного указателя, так и для нескольких.

3. Найти проблемы со скоростью загрузки сайта и предложить способы их решения.

4. Необходимо типизировать функцию extend с помощью двух инструментов TypeScript и Flow. Задача написать максимально надежный (type safety) код.

5. Вам предлагается реализовать один из наиболее популярных в мире фронтенда архитектурных подходов — Flux — в формате простого фреймворка. Ваш фреймворк должен уметь обрабатывать действия пользователя и предоставлять API для связи с бэкэндом.

Полезные ссылки

1. Форма для подачи заявки на вступление в Школу ^[1]

2. Записи всех лекций предыдущего набора ^[2]

3. Видео с отзывами выпускников ^[3]

Автор: BarakAdama

Источник ^[4]