Веб-дизайн::АТТЕСТАЦИЯ

Уважаемые и дорогие студенты 4 курса!
Близится экзамен.

Чтобы быть допущенными к нему, необходимо, чтобы на блоге имелись отчеты обо всех или почти всех выполненных заданиях (см. СПИСОК ВСЕХ ЗАДАНИЙ) ИЛИ индивидуальный проект.

Сам по себе экзамен будет включать в себя тест (который проходим в Moodle - убедитесь заранее, что у вас есть доступ к курсу "Веб-дизайн"); выборочную защиту заданий на блоге (нужно уметь объяснить, как выполнено каждое задание!) ИЛИ защиту проекта.

Вы можете не выполнять все задания и ограничиться примерно половиной - но тогда ваша отметка за курс не поднимется выше тройки. Успехов!

Новые песни о Moodle

Во-первых, наконец-то вышел Moodle 2 - ну, это можно было заметить по изменившемуся сайту университета. http://www.linux.org.ru/news/opensource/5613264

Во-вторых,  вышел свободный модуль «Электронный Деканат» для Moodle (электронные дневники, расписание, журнал)    - http://www.linux.org.ru/news/opensource/5571528

В-третьих, американские студенты воспели Moodle

ММТвО::О дополненной реальности

Поднося к веб-камере компьютера странную картинку мы можем увидеть на экране трехмерный образ.
http://www.boffswana.com/news/?p=392

или же, загрузив пару программ, наблюдать трехмерные объекты на карте в окне браузера: http://habrahabr.ru/blogs/the_future_is_here/53346

А имея устройство под названием  iPhone, мы можем считывать скрытые знаки не хуже чем qr-коды: http://habrahabr.ru/blogs/ui/110201

Не лучшие новости о доменах... Внимание.

РосНИИРОС объявил о передаче деятельности по регистрации и поддержке доменных имен третьего уровня в зонах .NET.RU, .ORG.RU, .PP.RU, .COM.RU в компанию RU-CENTER. Регистрация будет прекращена 20 декабря 2010 года и возобновлена 27 декабря через веб-интерфейс RU-CENTER на платной основе, при этом ограничение на число заявок будет снято.
Стоимость регистрации составит 450 рублей в год. Стоимость продления — 360 рублей в год.
О поддержке доменов .NET.RU, .ORG.RU и .PP.RU

Требование к экзамену по ДТВО

Уважаемые студенты! Для получения отметки по экзамену ДТВО необходимо выполнить все задания и публично защитить последнее задание.

Уточним задания:

1. Получить сертификат Института дистанционного обучения "ИНТУИТ" по любому курсу. http://intuit.ru
2. Оформить презентацию (Google Документы?) на тему: "Обзор систем дистанционного обучения" //Краткий обзор возможностей, сравнение. Не менее 5 программных решений.
3. Оформить презентацию (Google Документы?) на тему: "Обзор вузов реализующих дистанционное обучение в России и за рубежом".
4. Создать тест в Google-документах http://dist-learn.blogspot.com/2010/09/blog-post.html
5. Создать веб-приложение для тестирования студентов на основе PHP + SQLite.
6. Изучить учебное пособие по системе разработки электронных курсов CourseLab (Диск есть у Ирины Груздевой, или по ссылке http://public.me.com/pavelaks/). Подготовить презентацию с тестом в конце по любой из тем учебного пособия http://bit.ly/hgbrK1 и экспортировать в веб-формат. На экзамене нужно будет защитить свой проект.

Удачи!

Усовершенствование Оболочки

В path.to/-j внесена новая фича - возможность создавать страницы на pastebin.com нажатием одной кнопки.

О подключении кода библиотек через Google

http://habrahabr.ru/blogs/webdev/109309/#habracut

ММТВО/ВД::видеоплееры

А вот и обзор нескольких встраиваемых видеоплееров, реализованных на HTML5.

http://vremenno.net/html-css/html5-video-players/

UPD

А вот и еще один обзор

ММТвО::книга Чепменов в формате DJVU

Скачать

Усовершенствование Оболочки

Два дня тестирования с участием около 30 человек - и большая часть проблем выявлена и решена.
Теперь оболочка позволяет формировать короткую ссылку в пространстве адресов bit.ly, которая указывает на редактируемый в данный момент фрагмент.

Протестировано во всех браузерах.

Пример созданной ссылки (http://bit.ly/gKpV1p)

В преддверии MySQL

Пример описания реальных проектов, которое можно рассматривать как вариант лабораторной работы по PHP+MySQL

Сессии

Изучите механизм сессий.
Постройте небольшой пример приложения с поддержкой сессий. Данные с логинами и паролями храните в XML файле.

Справка

Темы для wordpess

Николай Николаевич на прошлой паре по веб-дизайну показывал как установить CMS Wordpress на Денвер.

По аналогии с сайтом http://freecsstemplates.org существует коллекция шаблонов для Wordpress http://www.freewpthemes.net/

Enjoy!

getElementById и другие

Если у нас есть некий элемент с идентификатором
например <span id="res">....</span>

то эти  четыре команды делают одно и то же

    $("#res").get(0).innerHTML = "Hello!";

    $("#res")[0].innerHTML = "Hello!";

    $("#res").html("Hello");

    document.getElementById("res").innerHTML = "Hello!";

Мы также можем использовать getElementsByTagName

И конечно же, чудесный новый метод querySelector / querySelectorAll, позволяющий отбирать элементы по CSS-селекторам

document.querySelector ("div:last-child")

Бесплатная книга Essential Javascript

Бесплатная книга Essential Javascript And jQuery Design Patterns for Beginners

Новая фича в "оболочке"

Новая фича - это возможность передавать содержимое разделов script и body для быстрого выполнения небольших сценариев в демонстрационных целях.

Например: щелк

Чтобы поделиться с кем-нибудь своим фрагментом кода, нужно набрать его в оболочке и нажать кнопку "64", а затем скопировать появившийся URL. Далее с ним можно делать все, что нужно - например, посылать в реплике чата.

ММТвО:: домашнее задание после лк 16.11.10

1. Какая конструкция Javascript позволяет указать объект один раз и затем неоднократно обращаться к его свойствам и методом без упоминания его имени?
2. Как с помощью Javascript реализовать периодическое повторение выполнения команды/функции (таймер)? Создайте анимацию передвижения какого-либо объекта на веб-странице. Пусть, например, объект перемещается за 10 секунд от левого края веб-страницы к правому.
3. Тема курсовой работы

Серверное приложение для считывания ленты RSS

Как известно, посылая запрос из браузера AJAXом невозможно выходить за пределы домена. Чтобы считать ленту RSS по произвольному адресу, понадобится серверный сценарий.

Задача сценария - по адресу сайта определить, имеется ли на сайте лента новостей и, если имеется, показать ее заголовки с гиперссылками на содержание.

Как узнать, имеется ли на сайте лента новостей?

Рассмотрим пример: http://newsru.com/

Открывая домашнюю страницу сайта, мы видим теги link, которые подключают RSS-каналы. Следовательно, сценарий должен прочитать страницу и поискать в ней теги link, у которых имеется атрибут type="application/rss+xml" и, при успешном обнаружении, прочитать значение атрибута href. Прочитав его, открыть адрес с помощью DOM и вывести список новостей.

<link rel="alternate" type="application/rss+xml" title="RSS / Самые главные новости" href="http://feeds.newsru.com/com/www/news/top" />
<link rel="alternate" type="application/rss+xml" title="RSS / Главные новости" href="http://feeds.newsru.com/com/www/news/big" />
<link rel="alternate" type="application/rss+xml" title="RSS / Важные новости" href="http://feeds.newsru.com/com/www/news/main" />

<link rel="alternate" type="application/rss+xml" title="RSS / Все новости" href="http://feeds.newsru.com/com/www/news/all" />

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


<(link)(.*?)type="application\/rss\+xml"(.*?)>



Как загрузить эту страницу в РНР-сценарий?

$xml = new DOMDocument();
@$xml -> loadHTMLFile("http://lenta.ru");
$sample = $xml->saveHTML();

Как теперь считать этот канал в РНР-сценарий?

Очень просто - с помощью указанного выше регулярного выражения (или подобного) получить тег link; из него извлечь имя файла (RSS); и, наконец, загрузить его:

$xml -> load($rss);


Как вывести на экран результат?

Вывод на экран контента осуществите с помощью XSL

PHP::начало

Мы переходим к серверным технологиям. Прочитайте обзор серверных технологий в википедии или на этой странице. Освежите свои знания о протоколе HTTP.

А затем выполните вводную лабораторную работу в упрощенном или углубленном варианте.

Далее - пост о создании RSS-ридера с серверной частью.

Веб-дизайн. CMS

Сегодня мы поговорим о CMS.
Вопрос №1. Что это такое? Прекрасный ответ дает нам статья на Википедии.
Алгоритм установки конкретной системы можно описать последовательностью следующих шагов:

1. Определиться с какой целью будет устанавливаться cms (блог, сайт, интернет-магазин). 
2. Продумать на каком хостинге будет развернута cms. 
3. Удовлетворяет ли хостинг требованиям конкретной системы.
4. Установка и первоначальная настройка cms.
5. Установка дополнительных плагинов и расширений. Обслуживание системы.

Примеры систем:

• joomla!;
• drupal;
• wordpress.

Как устроен WYSIWIG-редактор веб-страниц?

В курсе веб-дизайна нам нужно освоить работу с встраиваемым редактором веб-страниц - таким примерно, как этот:

или вот эти:

В Moodle мы встречаем такой редактор:

И, наконец, нельзя пройти мимо TinyMCE

Чтобы понять, как работают эти инструменты, надо разобраться с designMode и contentEditable - в чем вам поможет пост на Хабре из двух частей.

Часть 1
Часть 2

Веб-дизайн::Сегодняшняя лекция ИС-3 (13:30)

Сегодня был разбор построения простого многуровневого веб-приложения

Тут XML-файл с записями

<?xml version="1.0" encoding="utf-8" ?>
<логины>
 <логин имя="12" пароль="e369853df766fa44e1ed0ff613f563bd" />
 <логин имя="56" пароль="35f4a8d465e6e1edc05f3d8ab658c551" />
 
</логины>

Тут клиентская часть (можно запускать в оболочке path.to/-j)

И наконец серверная часть. Показана работа с XML DOM в PHP - самые, пожалуй, наглядные вещи, с использованием XPath.

Анонс: сессии, введение в  MySQL

ММТвО::книга по мультимедиа (к экзамену)

Вот здесь вы можете скачать скан. Спасибо Анне Шалденковой.

Семантический HTML5

Разработчики нового стандарта языка HTML5 делают особый акцент на новых тегах, которые позволяют создавать документы размеченные в соответствии со смысловой нагрузкой каждого из элементов. На сегодняшний день, язык XHTML уже содержит некоторые теги семантической верстки (у каждого тега свое значение, свой смысл):

<strong>— сильное выделение
<em> — очень сильное выделение
<code> — компьютерный код
<cite> — цитата
<var> — переменная

Стандарт HTML5 всё еще формируется (часто под HTML5 понимают не только язык разметки, но и сопутствующие технологии; раньше в ходу был термин DHTML), но уже известны новые теги, регламентирующие особенности семантической верстки. Возможно подобные нововведения и не вызывают такого WoW-эффекта и не дают каких-либо очевидных преимуществ, как новые API для языка JavaScript (геолокация, локальное хранилище, новые методы DOM), CSS3, WebGL, расширенная поддержка мультимедиа или графический контейнер canvas, но при правильном использовании семантическая верстка может упростить в будущем технологии веб-поиска и поддержки кода, мы сможем получить более четко структурированные веб-документы. HTML5 уже сегодня предлагает следующие теги-контейнеры (вместо множества контейнеров <div> и <span>):

1. <header> — "шапка" страницы. Как правило, содержит логотип, слоган и возможно еще какие-то элементы, характерные для верхней части страницы.
2. <nav> — определяет область навигационного меню. Обычно содержит список ссылок. <nav> <a href="http://www.blogger.com/...">Home</a> <a href="http://www.blogger.com/...">Previous</a> <a href="http://www.blogger.com/...">Next</a> </nav>
3. <article> — контейнер для материала из внешнего источника (новость, статья, запись в блоге, сообщение из форума)
4. <section> — контейнер элемента страницы, статьи. Обычно глава, параграф, раздел.
5. <address> — адресная/контактная информация.
6. <aside> — дополнительная информация, относящаяся к основному содержанию. Обычно это боковые панели.
7. <footer> — "подвал" страницы. Обычно содержит дату написания документа, автора или контактную информацию.
8. и так далее...
   

с более полным списком тегов HTML5 и примерами можно ознакомиться на странице w3schools.com

Важно заметить, что вышеперечисленные теги являются лишь контейнерами и не несут в себе какого-либо визуального оформления.
Сегодня при разработке клиентских веб-приложений принято четко разделять и не смешивать содержание (HTML), оформление (CSS) и поведение (JavaScript). Язык HTML - это только содержание с минимумом оформления.

Разные браузеры при рендеринге страниц используют различные настройки по-умолчанию для контейнеров, если четко не заданы пользовательские стили. Часто веб-разработчики сбрасывают стили для контейнеров (в основном padding и margin) для того, чтобы настройки конкретных браузеров не влияли на отображение страницы; существует несколько различных техник сброса (css reset), но можно пользоваться простым правилом:

* {
margin: 0;
padding: 0;
}

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

header, footer, section, aside, nav, article {
display: block;
}


Задание

1. Ознакомьтесь с новыми тегами HTML на сайте w3schools.com
2. Ознакомьтесь с примерами сайтов на HTML5

• http://kirbydomingo.com/
  
• http://devstars.com/
• http://www.qlassik.com/
• http://pavelaks.ru
  

3. Сделайте новую версию главной страницы портфолио, в соответствии со стандартом HTML5, с ипользованием новых тегов.
4. Воспользуйтесь инструментом Semantic Extractor, проверьте насколько хорошо робот смог проанализировать вашу страницу, насколько хорошо она структурирована. Опубликуйте результат работы сервиса на страницах портфолио или в блоге.
5. Кроме инструмента Semantic Extractor можно воспользоваться расширением Firefox Web Developer (Информация -> показать оглавление документа)

Дополнительные идеи по JQuery и последнее задание

1. Предложенные Ириной Олеговной задания по JQuery:
а) создать меню в стиле "аккордеон" - средство навигации по сайту, включающее разворачивающиеся вкладки либо tabs;
б) фотогаллерея в стиле режима просмотра фотографий в контакте, при котором происходит прокручивание ленты уменьшенный копий изображений (thumbnails)
в) с помощью Droppable создать "корзину товаров" с подсчетом общей цены. Цены должна быть написана на каждом товаре.

2. Последнее задание по Javascript - поиск и замена в тексте с помощью регулярных выражений. Подробнее

SVG -> Flex/HTML5. Новинки

SVG, трансформации,  Canvas


wiki

http://croczilla.com/bits_and_pieces/svg/samples/


http://svg-edit.googlecode.com/svn/branches/2.4/editor/svg-editor.html
http://scriptdraw.com/editor-split.html?splitMode=vertical


Flash\flex versus HTML5

http://splashup.com
http://aviary.com/tools/raven
http://www.aviary.com/online/image-editor?fguid=82a19d98-f552-102b-b565-0030488e168c

Какой редактор используется как встроенный в Google Picasa?

http://www.aviary.com/online/audio-editor?fguid=55cbff62-f375-102c-80b9-0030488e168c#

http://mugtug.com/sketchpad/
http://muro.deviantart.com/
http://www.cloud-canvas.com/cloudcanvas.php


Редактирование мультимедиа контента

http://www.empressr.com
http://www.a5.ru/master/



Новые инициативы от Adobe

ROME

Сообщение
Приложение



EDGE




Sencha Animator


Sencha Animator Introduction from Sencha on Vimeo.

Задание: исследовать возможности ROME и создать продукт (тест) с включением звука, видео и анимации. Создать видеокаст с инструкцией по выполненным действиям.

Бонусное 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 - задание одновременно по двум дисциплинам, "Веб-дизайн" и "Дистанционные технологии в образовании"

ММТвО::вставка плеера

Очередное задание для лабораторной работы



Вставить плеер для проигрывания звука на собственную страницу И на страницу в гугл-сайте.

Инструкция на гугл-сайте

Пример вставки

ММТвО::преобразования форматов

Инструмент Hamster Video Converter, как выяснилось, проще в использовании, чем MediaCoder.
В ближайшее время в мудл-курсе будет размещена лабораторная работа по конвертированию в формат FLV с целью дальнейшего просмотра на веб-странице.

При этом можно сравнивать результаты с тем, что загружается с ютуба или контакта с помощью таких firefox-расширений, как FVD

Задание: с помощью такой программы как Avidemux вырезать фрагмент небольшой длительности из образовательного видео, перекодировать его в FLV и вставить в веб-страницу.

Предложения по курсу

Пожалуйста, направляйте свои предложения, либо создавая комменты к этому блогу, либо направляя их с помощью этой формы отправки предложений

Она также продублирована в нижней части блога

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

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

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

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

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

Как еще поработать с telnet

Попробуйте воспользоваться XAMPP.

Скопируйте в каталог htdocs файл request.php из этого архива

Делайте так:

telnet 127.0.0.1 80

...

GET /request.php ......
Host: 127.0.0.1

Создание гугл-форм-теста

Видеоинструкция



Код сценария: http://pastebin.com/7rGQM5VM

Программирование для интернета, 3 курс ИСО и Веб-дизайн, 4 курс ИТО

1. Зарегистрируйтесь, пожалуйста, в системе Moodle нашего университета.
2. Найдите курс "Веб-дизайн" в категории "Кафедра информационных и коммуникационных технологий"

3. Запишитесь на курс
4. Пройдите в форум знакомство и ответьте на тему "Приветствия". См. инструкцию
5. Приступайте к выполнению заданий. О выполнении вы можете писать в своем блоге или делать сообщение в форум "Выполнение заданий" в той теме, где задание размещено.