Профессии в мире IT (от Яндекс)

Видеолекция

Ссылки в Dropbox

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

В любой папке мы можем щелкнуть правой кнопкой мыши и выбрать "Share link"

Получим ссылку вида https://www.dropbox.com/s/vua6ybdkohc31sv/Dropbox-Logo.png

пройдя по ссылке, мы увидим страницу со встроенной картинкой.

Изменим в адресе www на dl
(можно еще убрать букву s из протокола https)

http://dl.dropbox.com/s/vua6ybdkohc31sv/Dropbox-Logo.png

получился прямой адрес этой картинки. Ниже она вставлена с его использованием:

Более наглядно: http://screencast.com/t/jCpSaudzv

Электронные курсы

• 1 курс (бакалавры) - ИТ в ин.яз.
• 2 курс (бакалавры) - Веб-проектирование
• 3 курс (ИТО) - Мультимедиа технологии в образовании
• 4 курс (ИТО) - Веб-дизайн

ММТвО 3 курс // Орг. информация + HTML5

Дисциплина: "Мультимедиа технологии в образовании"
Электронный курс (Moodle)

Адреса почты преподавателей:

Илья Борисович Государев ilia.gossoudarev@gmail.com
Павел Александрович Аксютин  pavel.aks@gmail.com

Доска объявлений

Мониторинг / Журнал успеваемости

Online редактор: http://dist-learn.spb.ru/html?5 (щелкните HTML5)

Большая коллекция статей и руководств по веб-технологиям: http://htmlbook.ru/html5

Примеры мультимедийных компонентов HTML5/Apple: http://www.apple.com/html5/ 

Примеры HTML5: http://html5demos.com/

О новом (обновленном) подходе к изучению веб-дизайна

To: anyone whom it may concern

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

Мы формулируем несколько видов заданий:

• atom tasks (задания-атомы) - например "Напишите для PHP регулярное выражение, отсеивающее гиперссылки на локальные закладки"
• molecula tasks (задания-молекулы, типичные задания участников веб-проекта) - например "Разработайте прототип формы для регистрации нового пользователя, где есть поле для выбора даты. Рекомендуется использовать плагин JQuery jquery.ui.datepicker"
• product tasks (задания для индивидуальных проектов) - например "Создайте веб-приложение с базой данных для загрузки на сайт фотографий. Рекомендуется использовать плагин JQuery github.com/blueimp/jQuery-File-Upload"

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


С каждым годом объем базовой информации увеличивается, каждому новому поколению изучающих приходится отталкиваться от все большего количества исходных данных. Видимо, с этим поделать ничего нельзя - придется читать все больше блогов. Но очевидно одно - изложить что-либо фундаментальное, что не меняется, в виде "лабораторок" нереально.


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


Задача изучающих - много читать, интересоваться, задавать вопросы, сидеть на Хабре, посещать девелоперские конференции. И, конечно, кодить, кодить, кодить.


Удачи, хорошего лета и до скорых встреч!

Плакат "Веб-стандарты"

Вы можете скачать и посмотреть подробнее на Хабре - это наглядный, яркий материал.

Web Standarts Days. Результаты

По результатам проведения конференции "Web Standards Days" можно выделить следующие выступления:

Жми сюда! (автор: Вадим Макеев)

Кнопка, ссылка, псевдоссылка? Как правильно выбрать, сверстать и не наделать глупостей.

Презентацию можно посмотреть по этой ссылке: http://pepelsbey.net/pres/push-it/?full#Cover

На грани возможного (автор: Антон Немцев)

3D и 2D-анимация и эмоции в веб c помощью CSS.
Презентацию можно посмотреть по этой ссылке: http://wsd.websaints.net/2012-spb/, а скачать - по этой ссылке: http://t.co/by45T9OV

На заметку

Для создания такого вида презентаций (http://pepelsbey.net/pres/push-it/#Cover), можно использовать следующий инструмент https://github.com/pepelsbey/shower#readme

Я.Субботник?!

Я.Субботник в Санкт-Петербурге, 30 июня

Я.Субботник в Санкт-Петербурге пройдет 30 июня в офисе Яндекса.

Регистрация на мероприятие начнется 15 июня. Количество мест ограничено.

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

Подробную информацию о мероприятии читайте здесь.

Виртуальные хосты

https://docs.google.com/document/pub?id=12D-v7Ybpl62-VumwswB5UQ5WL5pdJTU4tFfIqO4J6ss

HTML5: новый путь (продолжение).

 В продолжение предыдущего поста о новом пути составления документов по стандарту HTML5 предлагаю немного "полевых исследований":

Исходный код

Apple Safari 5.2 (OS X 10.7.4)

Apple Safari (iOS 5.1)

Opera Next /12.0 beta  (OS X 10.7.4)

Google Chrome 18  (OS X 10.7.4)

Microsoft Internet Explorer 8  (Windows Server 2003)

Microsoft Internet Explorer 9 (Windows 7 SP1)

Mozilla Firefox Aurora /14 alpha + Firebug (OS X 10.7.4)

Mozilla Firefox Aurora / 14 alpha + native inspector (OS X 10.7.4) 

Снимки экранов выполнены в последних версиях всех распространенных браузеров (кроме Internet Explorer 10,  ради которого нужно ставить Windows 8 Developer Preview 1) и можно заметить, что все современные браузеры корректно преобразуют сокращенный вариант HTML5 кода в well-formed XML и выстраивают классический DOM.

Проблемы отмечены только у IE8, но в нем поддержка HTML5 и не заявлялась разработчиком, а так же у Firebug в Firefox, но это скорее всего связано с тем, что используется Alpha версия браузера. 

Ура... HTML5 уже здесь!

HTML5: новый путь

В течение нескольких лет на курсах "Веб-дизайн" и "ММТвО" мы брали за основу язык XHTML 1.0 в строгом варианте и приучались соблюдать требования стандарта языка.

Это означало, что базовым вариантом правильной страницы был вот такой код, являющийся well-formed XML и соответствующий DTD:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
</body>
</html>

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

<!DOCTYPE html>
  <title>Байты-деньги!</title>
  <p>Так-то

Если это пропустить через валидатор W3C (выбрав, естественно, HTML5), то мы получим православную зеленую полоску.

Отметим, что браузер автоматически создает в своей DOM-структуре недостающие элементы. И что кодировка по умолчанию - UTF-8. При валидации это незаметно. Однако, когда мы используем XML-документы для анализа и извлечения данных, на этот момент надо обращать внимание.

Открыть шаблонный документ в редакторе

Google.drive vs Яндекс.диск vs Dropbox vs ...

Неплохая статья, где сравнительно анализируются различные облачные технологии хранения файлов.

Адреса блогов для аттестации

Управление анимацией CSS3

Полезный сайт с демонстрацией timing function - возможность настраивать выполнение анимации. Например, bezier-curve - кривая Безье.

Веб-дизайн | ДТвО. Список заданий

https://docs.google.com/document/pub?id=1Ot5TRE3ux6LNJTR1cPy-3ulNGyFRvmtq9vww9pfVYYs

При возникновении вопросов пишите их в комментарии к этому посту.

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

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

Во втором семестре мы много времени уделим таким технологиям для создания мультимедийного контента как 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-пакетов

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