Веб-дизайн::4 курс

Дорогие студенты!
Курс веб-дизайна на 4-м курсе ИТО посвящен в основном изучению языков Javascript и PHP.
Однако, за последние полгода произошли ощутимые изменения на рынке браузеров; вышел 6-й Firefox и 13-й Chrome, все более масштабной становится поддержка HTML5. Поэтому мы предлагаем вам для начала сформировать у себя четкое представление о том, чем HTML5 отличается от XHTML 1, который являлся темой лабораторных работ предыдущие два-три года.

И с этой целью мы просим вас пройти курс в Интуите и получить сертификат. И сделать это нужно оперативно - за первую половину сентября.

Что же касается Javascript, то и по этому языку создан неплохой курс. Срок его освоения побольше - до середины октября.

Две эти темы (а заодно и повторение материала по мультимедиа) удачно объединяются вот в таком задании: создать управляемый сценарием видеоплеер.

О своих успехах и проблемах сообщайте сюда в комменты, а результаты работы, как обычно, размещайте в блогах.

Успехов и с началом учебного года!
ilia@goss

HTML5. Поддержка разных возможностей. Инфографика

Довольно-таки показательная инфографика на тему поддержки разными браузерами возможностей HTML5. Примечательно, что в обзоре присутствуют Internet Explorer 7,8 и 9.

http://html5readiness.com/

ММТВО и Веб-дизайн. 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

ММТВО и Веб-дизайн. Анонс

Темой следующих занятий по дисциплинам "Мультимедиа-технологии в образовании" и "Веб-дизайн" будет "HTML5. Нововведения. Особенности некоторых браузеров (Safari, Firefox)".


Приветствуется любая активность на занятии. Можно подготовить что-то самостоятельно.

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

Задание: выбрать, конвертировать видео и вставить на страницу, используя стандарт HTML5. Протестировать корректное воспроизведение в различных браузерах.

Для того, чтобы вставить видео на страницу по стандарту HTML5 необходимо использовать следующую структуру:

<video autoplay="autoplay" loop="loop" controls="controls" 

autobuffer="autobuffer">

<source src="*.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
 <source src="*.ogv" type='video/ogg; codecs="theora, vorbis"' />
 <source src="*.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>

Для конвертирования видео рекомендуется использовать программу Miro Converter (есть реализация для Windows и MacOS X). Можно также использовать программу Hamster Free Video Converter.

Также необходимо создать в той папке, где будет лежать страница с кодом файл .htaccess и добавить туда следующие строки:

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm

Полезные ссылки по этой теме:

• http://nickjukov.com/html5/ (мой пример реализации);
• http://www.apple.com/html5/showcase/video/ (реализация вставки html5 video в браузере Safari) (открывать в Safari);
• страница для разработчиков http://developer.apple.com/safaridemos/ (Safari);
• отличный сайт с кучей ссылок о html5 video http://www.html5video.org/demos/;
• спецификация по стандарту http://www.w3.org/TR/html5/video.html#video;
• еще один отличный сайт про вставку видео на страницу.

Приветствуются желающие добавить любые дополнительные функции (наложение маски, добавление перспективы и т.д.) к вставленному видео.

Данная лабораторная работа не последняя в серии занятий, посвященных HTML5. 

To be continued...

Веб-дизайн: создание клиентского теста. 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-интерфейса)

Веб-дизайн. Полезные книги и ссылки

Для ознакомления с процессом создания дизайна можно почитать следующий документ (формат pdf, размер 2,1 Мб).
Документ для скачивания был любезно предоставлен Павлом Колодяжным (http://www.make.com.ua), 2009. Нашел этот документ через habrahabr.
Скачать

Кроме того, для ознакомления рекомендую книгу Дмитрия Кирсанова, где довольно подробно изложены основы веб-дизайна и юзабилити (usability)

Книжку рекомендую купить. По крайней мере для тех, кто собиратся заниматься веб-дизайном или/и веб-разработкой серьёзно.
Ознакомиться с книгой можно тут.

В дальнейшем, если такая необходимость есть (?), можно размещать в блоге материалы относительно веб-дизайна и проектирования интерфейсов.