Бонусное drag-drop задание

Напомню, что бонусным заданием для JQuery является создание кода для формирования вопросов на соотнесение одного с другим - через перетаскивание. Поскольку мы пишем приложение, создающее тест, то в данном случае вам надо придумать не только реализацию перетаскивания и проверки, но и описание вопроса в XML и генерацию HTML по этому описанию.

Описание вопроса могло бы быть примерно таким:
<вопрос тип="соответствие">
  <подвопрос формулировка="2048 байт" ответ="2 кбайт" />
  <подвопрос формулировка="512 кбайт" ответ="0.5 мбайт" />
</вопрос>

Работающий пример (со спрятанным сценарием)

Клиентский тест на основе XML

Первые тринадцать строк сценария для теста, в котором интерфейс строится с помощью XML.

Работающий пример и файл с вопросами к нему

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

JQuery. Продолжение

JQuery - это фреймворк, а не просто библиотека функций. И как фреймворк, JQuery имеет определенную идеологию, определенный стиль. Сравним два фрагмента, делающих одно и то же:

Чистый Javascript	Jquery
window.onload = function() {    //…  }	$(function(){   //…  })

Допустим, нужно подсветить фон гиперссылок, указывающих на веб-ресурсы (среди прочих гиперссылок).

Современное кроссбраузерное решение на чистом Javascript:

var pth = "a[href^='http://']";

var links= document.querySelectorAll (pth);
for (var i = 0; i < links.length; i++) 
 links[i].style.background = 'red'

Решение на JQuery

$("[href^='http://']").css("background","red");

(приведем еще работающий вариант для не-IE)

var pth = "//a[starts-with(@href,'http://')]";
var links = document.evaluate(pth, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null );
for (var i=0; i < links.snapshotLength; i++) 
   links.snapshotItem(i).style.background = 'red';

---

---

Рассмотрим более сложный пример с AJAX

Чистый Javascript:

var x = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP');  
x.open("POST", "/request.php", true);
x.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8");
str = encodeURIComponent("Имя") + "=" + encodeURIComponent("Джон") + "&"; 
str += encodeURIComponent("Фамилия") + "=" + encodeURIComponent("Резиг")
x.send(str);
x.onreadystatechange=function(){
 if (x.readyState != 4) return;
 document.body.innerHTML =  x.responseText;
}

JQuery

$.ajax({
  type: "POST",
  url: "/request.php",
  data: {Имя: 'Джон', Фамилия: 'Резиг'},
  success: function(msg){
    $("body").html(msg);
  }
});

---

---

В оболочке подключите базовый JQuery. Создайте в body прямоугольный див с фоновым цветом и присвойте ему идентификатор panel. Создайте рядом в абзаце элемент span с классом inactive и надписью Спрятать. Опишите каскадные стили для классов inactive и active, отличающиеся, например, цветом фона и шрифта.

Внесите в раздел скрипта код:

$(document).ready(function(){
    $(".inactive").click(function(){
        $("#panel").slideToggle("slow");
        $(this).toggleClass("active");
    });
});
 

Щелкните по "Спрятать" один раз, потом другой. Убедитесь, что применяется эффект плавного исчезновения.
Так в JQuery работают анимационные эффекты.


Подключение (в head):

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.3.js"></script>

Версия 1.5

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.5.min.js"></script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

---

---

Ресурсы:

• Официальный сайт  (в том числе раздел пользовательского интерфейса)
• Блог на Хабре (в том числе раздел "Для начинающих")
  сообщение о 1.5
• Книга "jQuery in Action"
• Основы JQuery
• Подборка ресурсов - как электронных, так и печатных
• Интерактивный редактор
• Вики
• Шпаргалка UPD http://jqapi.ru/
• Селекторы UPD http://jquery.page2page.ru.nyud.net/tags/ifr.html
• Плагины
• Визуализация
  
• О других фреймворках
• Работа с Google API, в т.ч. с календарем, с таблицами (пример с закладками), с построением графиков.
• Еще одно API для построения графиков

Джей... квиэри? Начало

HTML была одной из первых вещей, которую Джон Резиг освоил когда он только начал заниматься программированием. Резиг программировал на QBasic, когда ему показали, как создать веб-страницу, а также основы HTML. Отец подарил ему на Рождество две книги по HTML. Когда он только начал программировать на Visual Basic, HTML и веб-дизайн очень заинтересовали его... И он приступил к JavaScript.

Он создал библиотеку JQuery - инструментарий для решения самых разнообразных задач. Разберемся с ней.

Для этого рассмотрим пример. Перейдите по адресу bit.ly/d-n-d  и рассмотрите исходный код приложения, который позволяет перетаскивать элементы по экрану.

Далее перейдите в оболочку bit.ly/_j1  и нажмите сначала желтый значок доллара. Скопируйте код и вставьте его в элемент head. Проделайте то же самое с зеленым долларом.

Затем создайте сразу после открывающего тега body тег div с идентификатором draggy. Опишите его стиль: ширина и высота по 100 пикселов, красный фоновый цвет, указатель типа "рука". Нажмите на "Play", затем кнопку и в окошке отображения страницы попробуйте перетащить красный квадратик - убедитесь, что это не работает.

Впишите в тело функции doIt следующий код:

$("#draggy").draggable();

Вновь нажмите на "Play" и кнопку. Убедитесь, что перетаскивание работает.


Переделайте пример с перетаскиванием, используя JQuery. Разбейте свою картинку, создайте страницу, присоедините к ней код JQuery и реализуйте только проверку совпадения координат картинок.

sHellBoy в HTML5

О редакторе AVIDemux

В очередном выпуске OpenSource про него обзор.

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

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


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

О войне браузеров на телевидении

 

http://www.ntv.ru/novosti/207025/

Фреймворки. Javascript

Для решения очень многих распространенных задач существуют готовые библиотеки функций/классов, гарантирующих кроссбраузерность и созданных профессионалами. Они называются frameworks - фреймворки, и часто бывает гораздо рациональнее воспользоваться существующим решением, чем создавать с нуля свое.
Мы изучаем Javascript в том числе и для того, чтобы пользоваться фреймворками. Для этого надо, разумеется, владеть синтаксисом языка (в этой части он схож с C) и иметь общее представление о его особенностях и хитростях. Поэтому, прочитав книгу Флэнегана, можно обратиться к JQuery и к новой книге об этом фреймворке. См. пост на Хабре.

К объекту XMLHTTPRequest

Что происходит когда мы пишем xhr.onreadystatechange = function(){.......} ?

Посмотрите на пример. Тут я создаю произвольный объект и в нем значением одного из свойств является функция. Затем я присваиваю свойству kakZovut другую функцию (ссылку на нее) - и она выполняется при вызове.

Особенность объекта XMLHTTPRequest состоит в том, что он вызывает свою функцию onreadystatechange всякий раз, когда приходит ответ от сервера. Поэтому если мы присваиваем свойству onreadystatechange другую (собственную) функцию, то вызываться будет она.

function doIt(){
  var  obj = {Imya:"", kakZovut:function(){alert(this.Imya)}};
  obj.Imya = "Sheldon";
  obj.kakZovut();
 
  obj.kakZovut = function(){alert('Nikak')};
  obj.kakZovut();
 }

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

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

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

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

ММТвО::исследование форматов (часть 1)

Начнем разбираться для начала с форматами мультимемедиа.

1. Формат статической растровой графики без сжатия: BMP

2. "Неисчерпаемый GIF"

3. SVG

4. SMIL

5. OMS

UPD: статья на Хабре про новый графический формат.

Работа с оболочками в онлайне (ММТвО, ВД)

Для выполнения многих заданий удобно пользоваться онлайн-оболочкой. Там можно набирать код и тестировать его.
Укороченные ссылки для двух оболочек:

path.to/-h	для XHTML + CSS
path.to/-j	для Javascript

ММТвО::вставка видеоролика

Более подробно

Научимся перекодировать видео в формат FLV и вставлять ролик в страницу с помощью какого-либо видеоплеера на основе Flash.

NB: чуть позже на лабораторных работах будет рассмотрен другой способ, в рамках HTML5.

Здесь показан весь процесс на примере Google Sites.

Здесь есть простенький пример плеера и ролика.

Задача: вырезать фрагмент из любимого фильма или клипа и вставить в свой блог или гугл-сайт или собственный сайт. Бонус-балл за вставку субтитров со своей фамилией и именем.

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

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-интерфейса)

Обновление страницы дисциплины "Веб-дизайн"

На странице дисциплины "Веб-дизайн" path.to/wd1 обновлен (и будет обновляться далее) список ссылок и заданий.

Предварительный список продуктов для аттестации по завершении курса см. здесь: goo.gl/gAGv

В частности, обновлены данные по созданию теста с использованием PHP - задание одновременно по двум дисциплинам, "Веб-дизайн" и "Дистанционные технологии в образовании"