Заметки за 2013 год

Как удалить мета-данные из m4a

В итернете часто можно найти музыку с пометкой «iTunes Edition». Когда их добавляешь в iTunes, то трек помечется как «купленный» и в информации о треке указан email покупателя. С этим жить можно, но если хочется удалить такую информацию без перекодирования трека, то поможет ffmpeg.

ffmpeg -y -i in.m4a -c:a copy -map a -map_metadata:g -1:g -map_metadata:s:a -1:g out.m4a

Набор этих параметров заставляет ffmpeg копировать аудио-поток из одного файла в другой. Все остальные мета-данные будут удалены.

for file in *.m4a; do ffmpeg -y -i "${file}" -c:a copy -map a -map_metadata:g -1:g -map_metadata:s:a -1:g "_${file}"; done

Эта комбинация команд позволит очистить от мета-данных все m4a файлы в текущей директории.

PS: Восстановить правильные названия треков можно с помощью утилиты MusicBrainz Picard.

Комментарии к заметке: 1

Колбек в триггере события

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

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

var a = {};

$(a).on("customEvent", function (e, callback) {
  callback(Math.random());
});

$(a).trigger("customEvent", [
  function (v) { alert(v); }
]);

Пример на jsfiddle.net

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

Оставте свой комментарий

Fronteers 2013 и jQuery Russia

Осенью традиционно стартует сезон профессиональных конференций.

Fronteers 2013

Зал Fronteers 2013

В этом году, как и в прошлом, в начале октября я был на одной из крупнейших конференций Европы — Fronteers 2013. Видео со всех докладов и разогревающего «Jam Session» уже доступно на канале Fronteers 2013 в Vimeo.

Все без исключения доклады были крайне познавательны и интересны. Но меня особенно впечатлил доклад Лукаса де Грота о дизайне шрифтов.

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

jQuery Russia

На обратном пути из Амстердама в Москву я побывал на уникальном для России мероприятии. Впервые под эгидой jQuery Foundation была проведена конференция, полностью посвященная jQuery.

Это был один очень насыщенный день с интересными докладами и не менее интересным общением.

Программа конференции:

Лично мне показалось, что делать аж 3 параллельных потока — это было уж слишком. Хотелось послушать всё и сразу. Но решил не метаться между докладами.

Дейв Метвин и я

В перерывах между докладами и на фуршете после окончания конференции можно было свободно пообщаться с президентом jQuery Foundation Дейвом Метвином и руководителем проекта jQuery UI Скотом Гонзалесом.

Оставте свой комментарий

Accessibility. Статьи, презентации и инструменты

Недавно Варя Степанова спросила у меня:

Всем могу посоветовать добавить в закладки большой сборник ссылок, который подготовил Владимир Старков. В феврале 2013 года он выступал на UWDC и FrontTalks с докладами о доступности веб-сайтов.

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

Для Хрома есть специальное расширение — Accessibility Developer Tools. С помощью него можно в инспекторе узнать как будет зачитано содержимое того или иного блока без использования скринридера. Так же это расширение делает аудит открытой страницы, указывает потенциальные проблемы и пути их решения.

Оставте свой комментарий

Данные, которые скрыты от пользователя

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

<title> и <meta name="description">

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

В теге <title> размещают заголовок страницы. Для каждой страницы должен быть указан заголовок и лучше всего, если он будет уникальным для всего сайта. На размер строки заголовка нет явных ограничений, но из практических соображений не стоит делать его длиннее 70-80 символов.

В атрибуте content тега <meta name="description"> размещают кратное описание страницы. Длину стоит ограничить 150-160 символами потому, что оно активно используется для построения сниппета в поисковой выдаче и более длинное описание будет автоматически укорочено. Явного ограничения в спецификациях нет. Содержимое, как и в случае с заголовком страницы, должно быть уникальным для всего сайта.

Ещё одним классическим тегом считается <link rel="canonical">. Он нужен для того, чтобы сообщить роботам какая из страниц с одинаковым содержимым, если таковые имеются, считается основной. Адрес задаётся в атрибуте href.

Протокол Open Graph

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

Facebook разработал на основе RDFa упрощенный протокол Open Graph, который работает в одном пространстве имён og и имеет ограниченный набор типов данных (музыка, видео, статья, книга, персона и сайт).

<html prefix="og: http://ogp.me/ns# article: http://ogp.me/ns/article#">
<head>
  <title>Больше семантики для логотипа :: Хранитель заметок</title>
  <meta property="og:title" content="Больше семантики для логотипа">
  <meta property="og:type" content="article">
  <meta property="og:url" content="http://noteskeeper.ru/945/">
  <meta property="og:image" content="http://noteskeeper.ru/wp-content/themes/nk/i/nk-logo-200.png">
  <meta property="og:description" content="Разметке логотипа можно добавить семантики с помощью microdata. Тип Brand позволяет указать логотип для продуктов и людей">
  <meta property="og:site_name" content="Хранитель заметок">
  <meta property="article:published_time" content="2013-08-26T03:31:18+00:00">
  <meta property="article:section" content="Вёрстка">
  <meta property="article:tag" content="microdata">
  ...

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

Microdata и RDFa

Почти одновременно в 2009 году появились черновики двух спецификаций, оперирующих со сложными типами объектов и поддерживающие их глубокую вложенность:

Оба формата используют дополнительные атрибуты HTML-элементов, чтобы указать тип объекта и его свойства. Значения свойств за некоторым исключением берётся из текстового содержимого элемента.

RDFa позволяет указывать значение свойства с помощью атрибута content у любого элемента:

<span property="dc:modified"
  content="2013-09-16T15:00:00+00:00"
  datatype="xsd:dateTime">16 сентября 2013 года</span>

В то время как парсерам Microdata требуются дополнительные элементы <meta> или <link>:

<span>16 сентября 2013 года</span>
<meta itemprop="dateModified" content="2013-09-16T15:00:00+00:00">

Разметка с помощью Microdata или RDFa позволяют сообщить роботам о семантике контента независимо от того какими тегами он размечен в HTML. Более того, форматы позволяют обозначить данные, невидимые пользователю в силу внешнего дизайна страницы.

“Shaken, not stirred”

При всём разнообразии мета-данных, которые можно впихнуть на страницу, складывается ситуация, когда одни и те же данные будут повторяться в HTML-коде несколько раз.

Например, описание страниц, которое фигурирует во всех форматах, можно передать в одном теге:

<meta content="Разметке логотипа можно добавить семантики с помощью microdata. Тип Brand позволяет указать логотип для продуктов и людей"
  name="description"
  property="og:description"
  itemprop="description"
  id="_articleDescription">

В этом примере свойство description типа http://schema.org/Article подключается в объект с помощью ссылки по id в атрибуте itemref. Если это позволяет разметка, то тип самого важного объекта на странице можно объявить у корневого элемента документа. Тогда все теги meta естественным образом окажутся в области видимости этого объекта.

<html prefix="og: http://ogp.me/ns# article: http://ogp.me/ns/article#" itemscope itemtype="http://schema.org/Article">
<head>
  <title>Больше семантики для логотипа :: Хранитель заметок</title>
  <meta property="og:title" content="Больше семантики для логотипа" itemprop="name">
  <meta property="og:type" content="article">
  <meta property="og:url" content="http://noteskeeper.ru/945/" itemprop="url">
  <meta property="og:image" content="http://noteskeeper.ru/wp-content/themes/nk/i/nk-logo-200.png" itemprop="image">
  <meta property="og:description" content="Разметке логотипа можно добавить семантики с помощью microdata. Тип Brand позволяет указать логотип для продуктов и людей" itemprop="description">
  <meta property="og:site_name" content="Хранитель заметок">
  <meta property="article:published_time" content="2013-08-26T03:31:18+00:00" itemprop="dateCreated">
  <meta property="article:section" content="Вёрстка" itemprop="articleSection">
  <meta property="article:tag" content="microdata" itemprop="keywords">
  ...

Так как привязка нового объекта к «родителю» осуществляется только наличием у него атрибута itemprop, то при его отсутствии новый объект помещается на самый верхний уровень иерархии. Получается, что на странице можно безопасно размещать несколько независимых объектов.

Атрибуты role и aria-*

Особняком стоят атрибуты Web Accessibility Initiative (WAI). Они используются вспомогательными технологиями для обеспечения доступности контента для пользователей с ограниченными возможностями.

Скринридерам часто приходится специально сообщать о назначении элемента (атрибут role), его названии (атрибуты aria-label, aria-labelledby, aria-describedby) или состоянии, так как у него нет другого способа передать эту информацию пользователю.

Заключение

  • Старайтесь сообщить как можно больше полезной информации о содержимом страницы для роботов даже если она останется невидимой для человека.
  • Избегайте повторения одних и тех же мета-данных в разных форматах. Чаще всего их можно объединить, используя разные техники.
  • Проверяйте качество разметки с помощью соответствующих парсеров и валидаторов.
Комментарии к заметке: 6