ММТВО и Веб-дизайн. HTML5 | Вставка видео. Часть 2

После того, как html5-видео будет успешно интегрировано в страницу. Можно приступать в выполнению данной лабораторной работы. В ней будет разбираться взаимодействие с элементами на странице с помощью JS и CSS. По следующим ниже ссылкам представлены варианты для браузеров Safari и Firefox.

http://nickjukov.com/html5/ff-1/
http://nickjukov.com/html5/ff-2/index.xhtml

http://nickjukov.com/html5/safari-1/
http://nickjukov.com/html5/safari-2/

Задание
Встройте в существующую html5 страничку (или создайте новую) элементы для управления созданием различных эффектов с видеороликом или с любыми графическими элементами.

Полезные ссылки, использованные для подготовки лабораторной работы.

1. http://developer.apple.com/safaridemos/
2. http://www.html5video.org/demos/ 
3. http://people.mozilla.com/~prouget/demos/mashup/video.xhtml
4. https://developer.mozilla.org/En/CSS/Using_CSS_transforms

Веб-дизайн: создание клиентского теста. UPD

Для более ясного понимания того, что надо сделать в задании по созданию клиентского теста, привожу небольшую примерную блок-схему реализации данной задачи.

В блоках справа приведены отрывки кода, которые рекомендуется использовать для решения подзадач. 

Очевидно, что данную задачу можно решить множеством способов. Тут приведена блок-схема одного из них. Оригинальные реализации приветствуются. 

Веб-дизайн: создание клиентского теста

NB: впоследствии мы реализуем создание более безопасного варианта с помощью серверной стороны (PHP+XML / MySQL)
NB2: в примерах используется объект XMLHTTPRequest, который является основой AJAX; впоследствии мы более подробно изучим этот вопрос.
NB3: загрузите и читайте лучшую на данный момент книгу о Javascript

UPD: см. пост NickJhuckov со схемой алгоритма создания теста.

Задачи клиентской стороны:

• считать информацию о вопросах и правильных ответах, используя объект XMLHTTPRequest;
• построить интерфейс (инпуты, селекты и т.д.), используя методы DOM (такие как createElement, setAttribute, appendChild).
• проверить ответы и выдать результат.

Реализуем это двумя способами:

1. храня данные в текстовом файле в виде многомерного массива (JSON);
2. делая то же самое в файле XML.

Способ I.
1. Разберемся с ассоциативными массивами и JSON
2. Подготовим файл с вопросами
3. Построим работающий пример (второй вариант)
4. Создадим собственное приложение с собственными вопросами и усовершенствованием - таймером, автоматически проверяющим ответы через 2 минуты после построения интерфейса и поместим ссылку в свой блог


Способ II.
1. Вспомним, как устроены файлы XML и построим файл вопросов
2. Напишем сценарий, весьма похожий на использованный в способе 1 (ссылка здесь появится чуть позже)
3. Все как в п.4 предыдущего способа.

(см. первые 13 строк сценария для построения XML-интерфейса)