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

А вот и обзор нескольких встраиваемых видеоплееров, реализованных на 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 и создать продукт (тест) с включением звука, видео и анимации. Создать видеокаст с инструкцией по выполненным действиям.