ММТВО | Одна идея и немного о будущем

Хочу поздравить с завершением первого семестра!

Во втором семестре мы много времени уделим таким технологиям для создания мультимедийного контента как Flash, Flex (а также другие современные инструменты от компании Adobe).  Кроме того, мы рассмотрим как можно создавать мультимедийный контент средствами HTML5, CSS3, JavaScript.

На последнем занятии, была высказана идея для мультимедийного проекта по этой дисциплине. Желающие в количестве 2-3 человек могут взяться за реализацию данного проекта в качестве альтернативного варианта прохождения этого курса.

Суть проекта:
Разработать мультимедиа-гид по университету. Выбрать объекты, находящиеся на территории РГПУ, которые представляют интерес для гостей, студентов, абитуриентов. О каждом из них записать небольшой рассказ. Навигацию по территории реализовать в виде ссылок в ролике.

Пример проекта, где реализована подобная идея с навигацией: http://www.youtube.com/watch?v=AxH6mNt6x4E

С наступающим Новым Годом!

MySQL

Итак, лабы по MySQL
Основная
Дополнения

И по PHP
Основная
Дополнительная 1
Дополнительная 2

Курсовые работы (ММТвО, III курс ИТО)

http://dist-learn.blogspot.com/p/3.html#course

Сроки:   к 15.12 - тема и описание продукта; к 15.01 - окончательный вариант (на CD продукт и электронный текст, а также адрес продукта или его описания в интернете + распечатанный текст в скоросшивателе).
Структура курсовой работы: вводная часть (цель, задачи, актуальность) + описание технологии/ПО + описание созданного продукта (со скриншотами).
Создаваемый продукт: мультимедийные инструкции (в виде веб-сайта) по пользованию OpenSource ПО. Включают:

• краткую справку по описываемому продукту;
• непосредственно инструкции по решению типовых задач (краткий текстовый вариант + запись с экрана движений мыши + голосовое сопровождение);
• набор аннотированных ссылок на ресурсы.

Образец текстового оформления курсовой работы: http://portfolio.dynamicpages.ru/projects/mmt-term-paper/course.doc

Еще один пример (по другой дисциплине) 


Примеры тем:
1. Разработка набора роликов учебного назначения в среде Flash и для HTML5
2. Разработка набора модулей в среде ОМС
3. Создание приложения для генерации веб-страниц с мультимедийным содержанием по заданной схеме
4. Кроссплатформенные реализации анимации на основе векторной графики (SVG)
5. Инструменты и примеры создания анимации для HTML5/CSS3 (Sencha Animator и т.д.)

Немного анимации в стиле CSS3

Создайте пару элементов div с идентификаторами gr и bc и таблицу стилей:


#gr {height: 100px; border: ridge 3px;
background-image: -webkit-linear-gradient(rgba(255,255,255,.9), rgba(0,0,255,0));
border-radius: 20px; text-align: center; display:table-cell; vertical-align:middle;
}

#bc { font: bold 18px sans-serif;
   height: 100px;
    -webkit-animation-name: 'bc';
    -webkit-animation-duration: 10s;
    -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes 'bc' {
    from {
       background-color: white;
    }
    50% {
       background-color: blue;
    }
    to {
       background-color: white;
    }  
}

Это будет работать в Chrome. Для работы в других браузерах:
-o-
-ms-
-moz-

Вниманию 4 курса! Тест и ДТвО

Уважаемые студенты!

Наступает декабрь. Между тем многие еще не выполнили первую часть работы по созданию теста в Javascript. Напомню идею: сначала мы создаем тест полностью на Javascript (генерация элементов управления, считывание вопросов с помощью AJAX), затем вводим JQuery, а затем переходим к серверной стороне - реализуем безопасную проверку на PHP и запись результатов в XML или MySQL.

Это задание имеет вариацию в дисциплине Дистанционные технологии в образовании. Там мы делаем вариант теста в формате SCORM, который можно загрузить в  MOODLE.

Вот инструкция по созданию теста для Веб-дизайна: https://www.dropbox.com/s/u965i98t9g84b72/test_js_new.pdf

Вот инструкция по созданию SCORM-теста
http://dist-learn.spb.ru/moodle19/file.php/12/test_js_scorm.pdf

исходные файлы для этого теста

У вас есть права создателей курсов в категории "РГПУ им. А.И. Герцена"

http://dist-learn.spb.ru/moodle19/course/category.php?id=3

Ознакомьтесь с требованиями к курсам 

Курс в Moodle, содержащий пошаговые объяснения процесса импорта SCORM-пакетов

Скринкасты к нему: импорт курса, импорт модуля

Неплохая статья/сайт о HTML5

Очень бодрая и веселая статейка. Вот выдержка

HTML5 is here, and the Web will never be the same.
You've no doubt heard that before, or something like it. I'd guess that when you did, you got excited, rolled your eyes, or mouthed the word "why?" and furrowed your brow a bit. Perhaps your reaction was a mix of all three.

http://html5center.sourceforge.net/building-apps-in-html5

консоль HTML5

Интересная новая разработка от Google

http://habrahabr.ru/blogs/html5/132479/

Скелет

https://www.dropbox.com/s/u965i98t9g84b72/first.php

1 курсу

Информация для I курса
Сегодня было две лекции, в 11:30 и 13:30. Сейчас верхняя неделя. В субботу будет еще одно занятие в 09:45.
На следующей неделе (и далее по нижним) занятие будет только в субботу, а по верхним И в  среду И в субботу.

Что нужно изучить?
Введение в XHTML / CSS - курс на Интуите

Далее, HTML5 - cм. Курс ИнтуИТ

Вам понадобится блог или сайт в Google. На нем будут размещаться ваши разработки ("Портфолио"). Вам также понадобится файловый хостинг (Dropbox)

 Что нужно сделать?
0. Прочитать стандарты ГОСТ Р 52653-2006 и ГОСТ Р 53620-2009, выписать и запомнить определения понятий "дистанционные образовательные технологии", "электронное обучение", "мобильное обучение", "ЭОР", "ИОС" и "электронный УМК".
1. Проанализировать обучающие материалы на сайте ФЦИОР по иностранным языкам (придётся установить OMS-плеер) и выбрать 3-5 наиболее ярких ресурсов с использованием мультимедиа и интерактивности; ссылки на них с комментариями (почему выбрали их) разместить на своем блоге/сайте
2. Проделать то же для Единой коллекции цифровых образовательных ресурсов
3. Записать 1.5 - 2 -х минутный ролик с самопрезентаций на английском языке (Hello, my name is ....., I study at the ICT department of the Herzen State Pedagogical university of Russia. I decided to take this direction because..... My major interests in IT are .... I often use...... I like to program in ...... I have developed the following sites: ..... etc) и разместить его с помощью HTML5 video в дропбоксе и далее в блоге или на сайте (используйте Miro Converter для преобразования в форматы)

P.S. Познакомьтесь с одним из проектов студентов 4 курса нашей специальности ИТО
http://няня.ргпугерцена.рф/

Дистанционные технологии 4 курс

1. Пожалуйста, пройдите регистрацию на http://dist-learn.spb.ru/moodle
Не обращайте внимания на предупреждение о том, что не удалось отправить письмо. Каждый аккаунт подтверждается администратором вручную. Просмотр заявок на регистрацию происходит ежедневно.

2. Вам нужно создать фрагмент курса по выбранной теме. Продумайте тему и структуру курса. Вы сможете использовать созданные материалы в дипломе. Придумайте 10 вопросов разного типа (открытые, закрытые, на соответствие) для теста по этой теме.

3. Скачайте и прочитайте книгу "Интернет-обучение". Изучите этапы разработки курса.

4. Ознакомьтесь с понятиями "электронное обучение", "электронный образовательный ресурс", "электронный УМК" по тексту ГОСТОВ:

• ГОСТ Р 53620-2009 http://vsegost.com/Catalog/50/50209.shtml
• ГОСТ Р 52653-2006 http://vsegost.com/Catalog/30/30.shtml

5. Изучите статус дистанционного обучения в РФ, ознакомьтесь с информацией о лицензии Интуита (Институту дистанционного обучения «ИНТУИТ» предоставлено право ведения образовательной деятельности (приказ Департамента образования Правительства Москвы от 20 августа 2010 года). Вслед за приказом на право образовательной деятельности ИНТУИТ получил государственную лицензию (регистрационный номер 027437) Бессрочная лицензия (регистрационный номер 02861 от 5 апреля 2011 года) выдана департаментом образования города Москвы Негосударственному образовательному частному учреждению дополнительного образования "Институт дистанционного обучения "ИНТУИТ". На основании данной лицензии ИНТУИТ вправе выдавать официальные документы, признаваемые органами государственной власти на программы повышения квалификации и профессиональной переподготовки.)

6. Получите общее представление о стандартах на учебные объекты/курсы/метаописания: LOM, SCORM. ☞По этой теме будет выполняться отдельная лабораторная работа по созданию SCORM-совместимого Javascript-базированного теста и импорту его в Moodle

7. Установите SCORM-совместимый редактор курсов CourseLab (его оригинальная английская версия бесплатна, а русскоязычную можно загрузить с ограничением возможностей)

8. При необходимости ознакомиться с различными технологиями LMS /ELearning обращайтесь к источникам:

• Электронное обучение http://cnit.ssau.ru/news/book_solovov/index.html
• Методические рекомендации по организации учебного процесса с использованием дистанционных образовательных технологий в условиях сетевого взаимодействия образовательных учреждений и организаций http://portal.gersen.ru/component/option,com_mtree/task,viewlink/link_id,9476/Itemid,50/
• Технологии сетевого дистанционного обучения: Учебное пособие http://portal.gersen.ru/component/option,com_mtree/task,viewlink/link_id,9486/Itemid,50/
• Образовательные информационные технологии. Часть 3. Дистанционное обучение: Учебное пособие http://portal.gersen.ru/component/option,com_mtree/task,viewlink/link_id,9500/Itemid,50/

HTTP, telnet

Для понимания AJAX / XMLHttpRequest и, тем более, для перехода к PHP необходимо достаточно четко усвоить как происходит взаимодействие с веб-сервером.
Веб-сервер - это программа, принимающая запросы и посылающая ответы по протоколу HTTP.

Типичный запрос:
GET /index.php HTTP/1.1
Host: dist-learn.spb.ru

Получив такой запрос от браузера, сервер попробует найти файл index.php в корне www-каталога сайта dist-learn.spb.ru

Если найдет, то выдаст ответ HTTP/1.1 200 OK
Затем выдаст "заголовки HTTP" - информацию о сервере, дате обработки и типе содержимого, которое будет отослано браузеру Content-type: text/html

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


☞ Отправьте запрос с параметром, например GET /index.php?name=ivan HTTP/1.1
или GET /index.php?name=gandalf

☞ Запустите браузер с включенной панелью слежения за сетью (Firefox + Firebug, панель Net) и перейдите по адресу http://dist-learn.spb.ru/index.php, затем по адресу http://dist-learn.spb.ru/index.php?name=noname

Проанализируйте вкладки "Параметры", "Заголовки" и "Ответ".
Заголовки запроса - это то, что посылает браузер. Из всех этих заголовков через телнет посылался только первый.

Программирование для интернет::3 курс ИС

Для тех, кто чувствует себя неуверенно или не начал еще проходить курс по HTML5 в системе intuit, необходимо предварительно пройти курс по XHTML и CSS:

http://www.intuit.ru/department/internet/xhtml

По завершении курса, диплом опубликовать в своем блоге. 

Виртуальная доска

http://bit.ly/virtualboard

Инструмент для работы с Javascript: http://bit.ly/-js0

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

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

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

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

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

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

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

Еще раз о Flash, HTML5 и портабле

Сначала несколько слов о портабельных браузерах (для Windows) и их взаимоотношениях с Flash. Загрузка свежих версий с portableapps.com показала, что в состав Chrome Portable входит флэш-плеер последней версии (\App\Chrome-bin\10.0.648.205\gcswf32.dll)
В состав Firefox Portable почему-то не входит; это странно, но можно взять эту библиотеку, переименовать ее в npswf32.dll и поместить в папку \Data\plugins
Это идеально работает для версии 3.6; а в версии 4 каким-то образом зависит от компьютера. На одних машинах все ок, на других Flash просто не отображается, но и не показывает предупреждение, что нужный плагин отсутствует. To be continued...

Теперь о Flash/HTML5.

1. Видео

В настоящий момент все современные версии браузеров поддерживают либо webm, либо H.264 (MPEG4). Первый формат - открытый, гугловский, второй проприетарный (неудивительно, что его поддерживают Internet Explorer и Safari). Старые версии - только через Flash Player, который, в свою очередь, поддерживает H.264. Отсюда вывод: видео следует конвертировать в Webm + H.264 и далее в зависимости от браузера либо выдавать код HTML5, либо делать flash-обертку.

Подробнее об этом здесь

2. Анимация

Анимация на основе CSS3 позволяет достигать примерно тех же эффектов, что и Flash. Но проигрывается, естественно, движком браузера (например, webkit) без всяких дополнительных плагинов.

У объекта указывается ссылка на анимацию вида -webkit-animation-name: AN-ani-0

В разделе стилей она описывается приблизительно так:

@-webkit-keyframes AN-ani-0 {
0% {
-webkit-transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1);
background-color: white;
border: 1px dashed red;
opacity:0;
}
...
}

Пока это не полностью кроссбраузерная технология, однако с помощью webkit-браузеров (Google Chrome и др.) уже сейчас можно просматривать примеры. Такие как этот:

dLog Blog is here

(c)2011 bIG

bit.ly/dlog1

Еще раз

Пример создан с помощью Sencha Animator.

Еще один проект по разработке CSS3-анимации: Animatable

Попробуйте создать свой пример анимации, где, к примеру, движутся ваши имя и фамилия и указывается адрес блога.

Вниманию 3 курса

Обновилась страница, посвященная созданию флэш-меню.

Теперь она содержит полностью работающий пример.

Как подключить к автоматически генерируемой кнопке картинку из XML-меню?

Рассмотрим следующий фрагмент

for (i=0;i<root.childNodes.length;i++){

       .....
       k = _root.attachMovie("link","t"+i,i+1);
       k.img.loadMovie(root.childNodes[i].attributes.pic);

пробегая в цикле по описаниям кнопок из XML-меню, мы динамически создаем клипы, подсоединяя их из библиотеки и распределяя по уровням сцены (_root).

А затем подгружаем в них картинки.

Вниманию 4 курса

Хочется еще раз напомнить вам, друзья, что у нас есть несколько важных видов деятельности в этом семестре по дисциплине "Дистанционные технологии в образовании".

0. Создание автоматизированного теста на основе форм Google.

1. Создание фрагмента материала для встраивания в дистанционный курс в систему Moodle. Это можно сделать с помощью программы CourseLab (free_en, ru).
Неплохо, если вы займетесь материалом, который близок теме вашего будущего диплома (ведь в качестве диплома большинство из вас будет разрабатывать информационный ресурс, не так ли?).

2. Создание теста с двойным интерфейсом (на Javascript-JQuery и на Flex), который хранит результаты в базе данных MySQL. 

3. Изучение базовых возможностей стандарта SCORM: доработка предыдущего теста (из п.2) и превращение его в SCORM-пакет. В лабораторной работе показано, что нужно добавить к исходному тесту, чтобы его можно было загрузить в Moodle.


Если у вас возникнут проблемы с университетским сервером Moodle, вы можете зарегистрироваться вот здесь: dist-learn.spb.ru/moodle и тогда у вас будет собственный курс и возможность в нем экспериментировать.


Вводный курс к редактору CourseLab вы можете получить по предварительной заявке путем копирования содержимого диска (DVD).

Доступны также видеоинструкции к SCORM-редактору Reload:
1 - 2 - 3
(зеркало: 1 - 2 - 3)

Новшества Firefox 4

Краткий обзор нововведений в Firefox4

Веб-дизайн, ммтво | HTML5

HTML5 становится ближе!

Буквально на днях был выпущен релиз-кандидат Mozilla Firefox 4.
Разработчики и простые пользователи приглашаются к тестированию.
Скачать обычную версию можно тут: http://www.mozilla.com/firefox/RC/
Скачать портабельную версию тут: http://portableapps.com/apps/internet/firefox_portable/test

А по ссылке ниже можно еще раз восхититься возможностями новой спецификации: https://demos.mozilla.org/ru/

Веб-дизайн :: разработка CMS

Руководство от IBM

Внезапно о ПСПО

Готовясь к проведению занятия с учителями, собрал несколько фактов о внедрении Линукс и ГНУ в России.

Первый открытый конкурс на разработку и поставку пакета свободного программного обеспечения был проведен в России осенью 2007 года. Его победителем стала группа «Армада».
Соисполнителем по этому конкурсу стала компания ALT Linux. В рамках проекта, сотрудниками ALT Linux был разработан и протестирован пакет Свободного программного обеспечения (ПСПО).
 
Компании "Армада" и "Альтлинукс" были отстранены от процесса внедрения своего дистрибутива.

Рассылку пакетов с СПО (ПСПО)   поручили компании "Компьюлинк", которая занималась закупкой лицензий для "Первой помощи" и рассылкой проприетарного софта по школам в 2007-2008 г.г.

Июнь 2009: Во все российские школы исполнителями госконтракта о поставке СБППО ("Первая ПОмощь") рассылаются диски ПСПО, по крайней мере два из которых, после добавления на них материалов без ведома "Армады" и "Альт Линукс", непригодны к использованию. Виновник - системный интегратор IBS

осень 2009: Федеральное агенство по образованию  заключило контракт с компаниями группы «АйТи»  на работы по развитию и модернизации пакета СПО и по технической поддержке при его внедрении и использовании. Также требовалось научить 60 тыс. учителей устанавливать СПО и работать с ним.

Ближе к зиме 2010 Федеральное агентство по образованию оштрафовало группу компаний «АйТи» за невыполнение ряда обязательств в рамках государственного контракта по обучению учителей российских школ работе с ПСПО.

тогда же:  интегратора IBS Федеральное агенство по образованию оштрафовало на 11 млн руб. IBS с двух попыток не смогла разослать школам диски надлежащего качества, чтобы учителя смогли установить СПО на свои компьютеры. К компании были применены максимально возможные штрафные санкции

Весна 2010: Федеральное агентство по образованию упразднено на основании Указа Президента Российской Федерации от 4 марта 2010 года №271

31 декабря 2010 года срок действия лицензионного соглашения на программные продукты, входившие в пакет «Первая ПОмощь» истек.

конец 2010:  Минобразование и лот "Создание единой службы информационно-методической и технической поддержки программного обеспечения, входящего в СБППО и ПСПО, используемых в образовательных учреждений" Российской Федерации http://mon.gov.ru/work/zakup/lot/6711/
Победитель - компания ПингВин

февраль 2011: после реализации Распоряжения Правительства № 2299 в госорганизациях будет   использоваться   СПО. В русле этого направления сформирована технологическая платформа „национальная программная платформа“,    координатором которой является концерн „Сириус“, в котором объединены ИТ активы Ростехнологий. А головным предприятием по ТП НПП в Сириусе назначен ALT Linux






Вопросы: а сегодня что является для школы предпочтительным? Обязательным? Официально рекомендуемым?

Сравнение дистрибутивов "школьной" направленности

ЭУМ и ЭОР на основе HTML5

Концепция построения ЭОР на основе технологии HTML 5

 (отсюда)

См. также ФЦИОР




Установка OMS-плеера (Linux-версия + Windows-версия под WINE)

Преобразование Flash -> HTML5

Northbug обратил мое внимание, а я обращаю ваше: инновационный инструмент от  Adobe, спешите попробовать.

http://habrahabr.ru/blogs/adobe/115124/

NetBeans 7.0 Beta 2

В новом релизе Нетбинс - поддержка переноса строк.
И поддержка HTML5.

http://dlc.sun.com.edgesuite.net/netbeans/7.0/beta2/

ММТВО | Adobe Design Achievement Awards

Каждый год компания Adobe проводит конкурс среди дизайнеров по самым разным направлениям. Узнать об этом подробнее можно, пройдя по ссылке ниже.
Кроме того, там же вы можете загрузить свою работу, если таковая имеется (или вы заинтересованы в том, чтобы её создать).
http://www.adobeawards.com/uk/?trackingid=IEGCP

Альтернативный хостинг для онлайн-редактора

В силу временных проблем работы dist-learn.spb.ru и сервиса path.to
прошу использовать пока другой путь к онлайн-редактору Javascript

Вот новый путь: bit.ly/-js1

варианты:

http://goo.gl/CS2L8
http://dist-learn.web44.net/html.php?js=js
http://bit.ly/_j1

Сокращенный путь к этому блогу:
bit.ly/dlog1

Простой исходный код для работы в редакторе

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Пример страницы XHTML 1.0 Strict</title>
</head>
<body>
 <h1>Заголовок страницы</h1>
 <p>Абзац этой страницы<br /></p>
 <p>
 
 </p>
</body>
</html>

Вставка видео в сайт (Flash)

https://sites.google.com/site/kursy2010a/home/flash/kak-vstavit-video-v-sajt

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

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

http://html5readiness.com/

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

Особое внимание на примеры HTML5.

Инструменты для работы с регулярными выражениеми

1. Для PHP http://dist-learn.spb.ru/tools/reg
2. Для Javascript http://dist-learn.spb.ru/tools/shell_regExp.html