Баннера средствами браузера

Основы JavaScript

1. Определение задачи курса и демонстрация браузерной реализации баннера.
2. Обзор веб-технологий (html5, svg, canvas, спрайты, браузеры), список литературы.
3. Основы JavaScript:
   • циклы,
   • массивы,
   • таймауты,
   • обьекты и функции (ооп, замыкания),
   • события,
   • область видимости,
   • селекторы.
4. Средства разработки:
   • редактор,
   • консоль,
   • отладка,
   • сборка.
5. Домашнее задание.

HTML/CSS

1. Проработка домашнего задания
2. Основы верстки:
   • семантика и теги,
   • блоки,
   • классы,
   • спрайты,
   • css3 (тени, эффекты, шрифты),
   • специфические возможности браузера Safari,
   • особенности верстки баннера.
3. Средства разработки
   • редактор,
   • пишем код быстро (Зенкодинг),
   • инспектор.
4. Домашнее задание.

Соединяем верстку и JavaScript

1. Проработка домашнего задания.
2. Соединяем верстку и JavaScript:
   • процесс создания виджета (баннера),
   • шаблонизация в JavaScript,
   • аннимации и библиотека jTweener,
   • простые аннимации,
   • сложные аннимации,
   • эффекты.
3. Домашнее задание.

Углубляемся. SVG, Canvas, Video, Audio, WebGL

1. Проработка домашнего задания.
2. Создаем непрямоугольные обьекты:
   • обзор функционала SVG,
   • обработка событий,
   • рисуем на Canvas.
3. Встраиваем видео и аудио.
4. Домашнее задание.

Создаем баннера

1. Проработка домашнего задания.
2. Особенности и требования к баннерам. Производительность.
3. Практикуемся и проектируем баннера.
4. Домашнее задание.

Создаем фреймворк для построения баннеров

1. Проработка домашнего задания.
2. Обсуждаем фреймворк.
3. Делаем рефакторинг баннеров под структуру фреймворка.
4. Домашнее задание.

Подбивка, итоги, вопросы (опциональное занятие — проведено)