Наблюдая за стремительным развитием HTML5, мы не обращаем внимания на то, как развивается HTML в электронных письмах. Хотя многие тонкости HTML5 все еще в стадии разработки, Firefox, Safari, Opera и Chrome уже предложили поддержку большей части новой технологий.

Особый интерес у меня был к HTML5 тегу <video> .  Этот тег должен был решать проблему со встроенной поддержки видео, с помощью одного кодека, во всех браузерах, без необходимости использования плагинов, таких как Flash. Хотя идея использовать универсальный кодек кажется утопичной, есть проект, который предлагает использовать тег <video> в браузерах, которые его поддерживают, а в остальных просто скрывать содержимое этого тега.

Современные подходы использования видео в электронной почте.

Это не первый раз, когда нам приходится внимательно смотреть на поддержку видео в электронной почте. В наших предыдущих исследованиях мы искали подход, который позволил бы встраивать видео в почтовые клиенты, которые поддерживают тег <video>, а для тех, которые этого не делают, показывать интерактивные изображения (что бы затем воспроизводить видео в браузере).

Результаты нас разочаровали. Только Apple Mail поддерживает достойное воспроизведения видео с помощью Flash, и все равно не было способа обеспечить альтернативное отображение содежимого для тех, у кого Flash отсутствует. Я считаю, что в этом-то и заключается основная проблема. Если видео не отображается, то надо показывать альтернативное содержимое. Поскольку большинство почтовых клиентов использую тег <object> для вставки видео, было не возможно вывести альтернативное содержимое.

Должно быть какое-то решение проблемы, возможно HTML5 смог бы решить ее. Как оказалось я был наполовину прав.

Простой подход с использованием HTML5

Используя продукт Kroc Camen “Видео для всех”, как отправную точку, я быстро понял, что подход для браузера должен быть другим нежели для почтовых клиентов.

Техника Kroc представляла собой многоуровневую поддержку. Таким образом, если HTML5 <video> не доступен, вы можете использовать возврат к QuickTime или Flash и почти всегда  видео будет гарантировано работать. Поскольку нам известно, что Flash и QuickTime повсеместно заблокировали в электронной почте, я отбросил это простое решение.

Из-за войны форматов, о которой я упоминал ранее, вы должны предоставить свои видеоматериалы, как H.264 (для поддержки Apple и Google) и Ogg Theora (для поддержки Mozilla и Opera). В электронной почте все несколько иначе. Единственным популярным почтовым клиентом, использующим Gecko (движок Firefox) является Thunderbird, который сейчас не поддерживает HTML5 отображения видео. Таким образом, ни Flash / Quicktime, ни Ogg Theora нам не годится. Если большинство ваших адресатов выбирали бы веб-версию писем, тогда вы могли бы рассмотреть возможность добавить видео для получателей с помощью Firefox.

Окончательный код

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

<video width="640" height="360" poster="fallback.jpg" controls="controls">
<source src="http://mysite.com/videoname.mp4" type="video/mp4" />
<a href="http://mysite.com/"><img src="fallback.jpg" width="640" height="360" /></a>
</video>


Как вы видите, вы предоставляете альтернативу в виде изображения (которое удобно загружается, как превью для фильма, перед просмотром электронной почты для клиентов, которые поддерживают видео) в теге <video> вместе с шириной и высотой видео. Вместе с тегом <video> вы подключаете кодированное видео с помощью H.264 используя тег <source>, помня, что вы должны поставить ссылку на существующий файл на вашем сервере.

Наконец, мы добавляем альтернативное содержание, которое нужно будет отображать в любом почтовом клиенте, который не поддерживает HTML5 тег <video>. Это, как правило, интерактивные скриншоты из видео, при нажатии на которые, видео будет играть в браузере.

Результаты

Работая на Mac, моя первая остановка была на Apple Mail. Видео отображалось прекрасно. Далее мой iPhone, который замечательно проигрывал видео с помощью встроенного почтового клиента.

Тогда я обратился к популярным веб-клиентам электронной почты – Yahoo!, Gmail и Hotmail. К сожалению, оказалось, что веб-клиенты отключают проигрывание HTML5 видео. Хотя это было разочарованием, не все оказалось так плохо. На месте видео я был в состоянии отображать альтернативное содержимое. В данном случае это было кликабельное изображение, с которого я мог поставить ссылку на видео, находящееся на моем сайте. Этого никогда не было раньше, поэтому было большим успехом.

Поэтому я стал проверять дальше, и получил такие же результаты на десктопных e-mail клиентах ПК. Видео не прогрывается, но появляется альтернативное содержимое во всех клиентах, которые я тестировал. Здесь полные результаты моего тестирования.

Результаты тестирование видео в различных e-mail клиентах

Посмотрите это в действии

Чтобы вы поняли, как выглядит HTML5 видео в различных популярных e-mail клиентах, вот несколько скриншотов.

Apple Mail 4

Когда я открыл письмо в Apple Mail, альтернативное изображение, которое я указал в атрибутах, было показано в то время когда фильм начал потоковое вещание. Через несколько секунд появились управляющие элементы видео, и я мог увидеть progress bar и начать его смотреть.

iPhone 3.1.2

IPhone не поддерживает потоковое видео в браузере или почтовом клиенте, вместо этого вы нажимаете на ссылку с превью изображения и можете оперативно посмотреть ролик. При клике на изображение они загружается в QuickTime Player’s iPhone. После просмотра ролика вас перемещают обратно к просмотру письма.

Outlook 2007

Как и все почтовые клиенты, не поддерживающие видео HTML5, Outlook 2007 отображает альтернативное содержимое, которое мы указываем в рамках видео-тегов. Это может быть любой HTML, какой вам нравится, и не ограничивается только одним изображением. В большинстве случаев, это вероятно будет скриншот из фильма и, возможно, значок для проигрывания, чтобы побудить получателя, нажать на изображение и посмотреть видео в своем браузере.

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

Должны ли мы использовать этот метод?

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

Принятие решение о пригодности данного подхода сводится к анализу списка получателей вашей почты. Например, 50% наших клиентов, ежемесячно читающих наш бюллетень, используют один из почтовых клиентов Apple. Если бы мы хотели включить видео в письмо, использование данного подхода будет означать, что половина наших абонентов смогут посмотреть видео прямо в почтовом клиенте, а другая половина будет видеть превью изображение, кликнув на которое, они могут посмотреть ролик в своем браузере.

Нужно ли отправлять видео по почте, это конечно же другой вопрос, но его мы будем решать уже в будующих постах. Я не получил возможность проверить эту технику в каждом почтовом клиенте, и я буду рад увидеть результаты в Palm Pre (только потому, что как и iPhone, он также использует Webkit). Я также буду рад услышать мнение каждого об рассматриваемом здесь способе, конечно, если вы считаете, что он полезен.

Источник: http://www.campaignmonitor.com/blog/post/2905/html5-and-video-in-email/

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

1. До появление CMS
   На первом этапе появления Интернет сайтов CMS-движков как таковых ещё не было и поэтому большинство страниц были статичными.Шаблоны использовались только в тяжёлых настольных WYSIWYG-программах редактирования HTML текста, либо добавлялись вручную в текстовом редакторе.

   Навигация строилась вручную, в лучшем случае с использованием включений (SSI – include инструкций в .shtml), либо фреймов, либо на основе клиентского javascript программирования.

   Такие сайты тяжело управлялись и как правило, вручную через ftp протоколы.

2. Появление активного серверного скриптингаАктивный серверный скриптинг на сайте: cgi/pl/epl, php/phtml, asp/aspx/mspx/wbp, jsp/jhtml, cfm и т.д., без управления содержимым (без CMS-движка).

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

   Вопрос управления содержимым и навигации в большинстве своём строился также в ручную с использованием включений (SSI include-инструкций в shtml), фреймов, а также при помощи программирования и активного скриптинга.

3. Появление первых CMS-движковУправление содержимым через шаблонный CMS-движок, содержимое хранится в SQL таблицах или сохраняющий содержимое в файловой системе, с последующим выводом их через активный серверный скриптинг и другие вариации.Появление активного серверного скриптинга почти сразу породило идею создания Системы управления сайтом.
4. Началась эра CMS-движков.Родилась идея управления: скрещивания шаблонов с содержимым и с автоматическим построением навигации на сайте.Самый простой способ построения CMS-движка, заключается в загрузке содержимого в поля SQL-таблицы в момент редактирования в CMS-движке и выводить их на сайте при помощи активного скриптинга, то есть в момент обращения пользователя к странице сайта.
   Так и сейчас работает большенство бесплатных CMS.
   Один сайт построенный на этих CMS способен “положить” сервер при достаточно умеренных нагрузках.
5. Появления технологий AJAX и JSON.
   Появление этих технологий дало возможность представить интерфейс CMS практически неотличимым по интерактивности от обычных desktop-приложений.
6. Появление XML/XSL(T) технологии
   Появление XML/XSL технологии облегчило построение навигации древовидных структурированных разделов на сайте.

   В большинстве CMS-движков стали активно использовать XML/XSL технологии.

7. Развитие технологий Flash и Silverlight.
   Активное развитие и применение этих технологий добавило интерактивности в современные CMS, появилась возможно создавать очень удобные UI для работы с системой.
8. Активное применение концепции MVC (паттерна проектирования).
   Скриптинг CMS-движка, генерирующий по шаблонам статичные страницы, с автоматической навигацией, без использования SQL-таблиц для хранения содержимого.
   Следующий шаг в развитии CMS-движков, привёл опять же к статическим страницам, но уже на качественно новом уровне.
   Как это ни странно, пришлось вернуться обратно к статическим страницам, но уже перегенерированными в момент сохранения страницы.
   Идея управления сайтом: скрещивания шаблонов с содержимым и с автоматическим построением навигации на сайте, дополнилась перегенерацией.
   Этот путь для реализации в CMS один из самых сложных и тем не менее самый правильный.

Использовались материалы Айдара Майлебаева.

Как всем известно сейчас мы находимся на стадии развития Интернета называемой Web 2.0. Есть множество определений, что же такое Web 2 и хотелось бы выделить несколько общих пунктов и их проблематику:

• Контент добавляет пользователь. Любой пользователь, внезависимости от его познаний в данном тематеке, разделе и в принципе интелектуальных способностей. С одной стороны это прекрасная возможность талантливым авторам приобрести свою аудиторию, поделиться мненим и естественно получить обратную связь(оценку). В то же время это возможность для злобствующих графоманов выплёскивать тонны ненужного контента в сеть, множиться статьям несущим больше вреда нежели пользы, поиск информации стал затруднителен из-за черезчур большого объёма неструктурированного контента и естественно никакой фактической ответственности автора в случае заведомо ложной информации.
• Так как Веб стал ориентироваться на “не подготовленного” человека, стал улучшаться пользовательский интерфейс. Активное использование java фреймворков с axaj запросами (подгрузка данных, без перезагрузки страницы). Удобства которые предлагает интернет автоматизация – несомненный, в принципе это верный путь, только вот бы прийти к единой стандартизации форматов, а то зачастую приходиться учитывать пользователей всех браузиров, даже IE6, что довольно проблемно.
• Из-за обилия информации, появились средства по ее структуризации, такие как – теги, облака тегов, к сожалению обычные пользователи не часто выставляют теги, потому что не видет в этом конечной цели.

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

Веб 3.0 или Интернет наоборот.

В идеале каждый пользователь должен получить свой персональный портал. Массовый информационные портал теряет свою необходимость, ему на смену придет персональный сайт! Концепция “Веб 3.0″ персональный интернет для каждого, вы видите и читаете только то, что лично вам нужно и интересно. Вам не надо искать информацию, она сама ищет вас, нужно только обучить персональный сайт в процессе чтения и выбора новых тем. При возникновении новых интересов у подобных нам людей, информация к нам поступает автоматически и предлагает(может и навязывает) просмотреть её. В целом будут фомироваться доверительные группы пользователей, сходных по интересам и возможностям. Создатели контента Издатели, Ньюсмейкеры и копирайтеры, наполняют общую информационную “Супер-трубу”. Тематические порталы собирают, сортируют и направляют группам читателей по технологии RSS(хотя технология это лишь предположение, вполне может что изоюретут что-то, что будет более совершенно чем RSS). Ваш персональный сайт “вылавливает” из информационного потока, то что нужно именно вам. В Веб 3.0. Информационные потоки формируются авторами, посетителями и производителями контента. Персональные сайты, собираются роботами на основе анализа предпочтений похожих людей. Личный портал на персональном сайте. Своя газета с блогом – пишу и читаю. Свои форумы темы которые меня находят.Свой интерент магазин, все что я хочу и могу купить.

Поиск, а нужен ли поиск ?

Самые интересные новости и статьи, видео, которое вы хотели посмотреть, магазины постоянно обновляют коллекцию и все это на моем сайте появляется само! Только успевай читать, смотреть, выбирать, покупать. Искать все это в Интернет просто некогда. Если я хочу что-то найти, я просто прошу свой сайт сообщать мне, что думают на эту тему похожие на меня люди. Я получаю ссылки, форумы, товары и услуги, которые входят в доверительную группу ссылок на эту тему В результате поиска в группе я получаю уже отфильрованную другими пользователми информацию. Поисковые системы постепенно потеряют популярность и смысл! В Веб 3.0 их заменят системы подбора и предсказания информации под интересы конкретного посетителя. Интернет стал скоростным, люди больше хотят смотреть, чем читать. Потоковое видео, телевидение, видеосайты, 3-х мерные фильмы, образование на любую тему. Частное телевидение, видео сделанное другими пользователями сети. Подглядываем и смотрим на интересныех людей, видим трансляции с конференций, семинаров, тусовок. В перспективе это 80% трафика сети Интернет.

Из реального.

Сегодня мы можем увидить шаги подтверждающие вышеизложенные высказывания, например компания Opera создала замечательный сервис как Unite, очновной особенность которого является что теперь каждый компьютер подключённый к сети может стать сервером, делиться фаилами, например фото или слушать музыку. Гугл запускает полностью интернет ореинтированную операционную систему Chrome. Microsoft представили он-лайн операционную систему основанную на их собственой технологии SilverLight. Я думаю что скоро главное в компьютере будет интернет, а все программы будут лежать и задействоваться на серверах компаний поставщиков.