Блог маленького, но очень отважного программиста » HTML5

Работаем с Font API от Google

Xo66uT — Fri, 28 May 2010 07:01:08 +0000

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

Введение.

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

Однако если вы посмотрите на основные технологии веб HTML, CSS, Javascript, PHP, все они являются бесплатными. Исходя из этого можно предположить, что вебу нужен эффективный, а главное бесплатный инструмент. Поэтому, то что предлагает нам Google наиболее подходящее в настоящее время решение для развития типографики в веб.

Меняет правило игры ?

Очевидно, что когда Google берется за что-нибудь, он делает это хорошо и меняет представление об этой отрасли. Так и со шрифтам, компания незаметно для всех выпустила (совместно с Typekit) Font API, который в долгосрочной перспективе изменит веб. Пока другие компании придумывают бизнес модели для подобных сервисов, Google просто выпустили качественный бесплатный продукт.

Давайте посмотрим как это все работает на небольшом примере live demo:

HTML

Добавляем шрифты в Google Fonts API.

Теперь когда мы поняли, как же все это работает, давайте добавим своих шрифтов, для этого перейдем к Font Api и посмотрим на Каталог Шрифтов. Здесь вы увидите различных 18 шрифтов. Каждый шрифт имеет несколько вариантов. Когда вы выберите тот, который вам нравится, просто нажмите на него, чтобы увидеть дополнительные параметры. Допустим выберем IM Fell.

Когда вы увидите картинку с описание шрифта, просто нажмите на кнопку Get Code и вы увидите html код который нужно вставить в head страницы, а также пример css, как использовать новый шрифт.

Есть два способа вставки шрифта на сайт. Через html и через css @import.

Через HTML

Через @import.

@import url(http://fonts.googleapis.com/css?family=IM+Fell+DW+Pica);

Далее мы можем использовать на сайте подключенный шрифт:



#headline h1 {
	text-align: center;
	font-size: 8em;
	color: #111;
	text-shadow: 0px 2px 3px #555;
	font-family: 'IM Fell DW Pica', arial, serif;
}

Помимо этого, есть WebFont Loader инструмент, который представляет собой библиотеку Javascript, которая “дает вам больший контрль над шрифтом и позволяет использовать нескольких провайдеров для шрифтов” (в данном случае Font API – это провайдер шрифта, как и TypeKit) , это кстати их совместная разработка.

Выводы.

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

Есть несколько преимуществ для выбора Google Font API, на которые стоит обратить внимание:

Шрифт скачивается с сервера Google.
CDN Google быстрее чем ваш сайт.
От повсеместного использования шрифты будут кешироваться за счет того, что имеют одно расположение (сервер Google).

Единственный видимый минус Font API, это небольшое количество шрифтов, но инструмент новый, и я думаю, количество доступных шрифтов будет со временем увеличиваться.

Источник: http://designshack.co.uk/

HTML 5 и Видео в Электронной почте

Xo66uT — Sat, 17 Oct 2009 12:07:41 +0000

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Результаты

Работая на 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/