Создание видеосубтитров и формат WebVTT1

10 февраля Статьи 386 Перевод Архив

Том Лидбеттер, вторник, 29 ноября 2011

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

На данный момент у нас нет средств для предоставления информации о том, что происходит или говорится в видео, а это значит, что видео не является достаточно доступным и юзер не может легко перейти к определенной его части. Облегчает данную ситуацию формат с рабочим названием в спецификации WebVTT (Web Video Text Tracks). На данный момент он присутствует только в спецификации WHATWG, но недавно созданная W3C Web Media Text Tracks Community Group, выпустит в скором времени спецификацию WebVTT для W3C.

Вы можете вспомнить похожий, недавно обсуждаемый формат под названием WebSRT (Web Subtitle Resource Tracks), который впоследствии был переименован и заменен на WebVTT.

Читать полностью

Вращение элементов веб-cтраницы, используя трансформацию поворота CSS31

27 января CSS 2 225 Перевод Архив

С помощью CSS3 вы можете поворачивать элементы веб-страницы на заданное число градусов по часовой или против часовой стрелки. C помощью небольшого количества HTML и JavaScript кода в связке в CSS вы также можете анимировать эти повороты. В этом уроке мы проработаем поворот рисунка на разные углы, а также функцию анимирования, активизирующую вращение при взаимодействии пользователя со страницей.

Создание страницы

Сохраните новый HTML файл в выбранном вами редакторе, используя следующий шаблон кода HTML5:

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
/*style declarations*/
</style>
</head>
<body>
<!--page element markup-->
</body>
</html>

Мы добавим элементы в секцию body и стили для вращения внутри CSS секции в заголовке страницы.

Читать полностью

Будущее программирования3

20 января Статьи 1 300 Перевод Архив

В этой публикации выбрана часть статьи, которая относится по тематике нашего сайта — Редакция css-live.ru.

[Автор оригинального текста Paul Chiusano, программист, работает в Capital IQ, пишет преимущественно на Scala. Один из разработчиков библиотеки scalaz — прим. пер.]

Распространение кода и будущее web.

А что же с web, javascript, html 5 и остальным? Будем ли мы и дальше идти, прихрамывая, вместе с этими технологиями? Не думаю, что сильно удивлю кого-то, сказав, что написание приложений значительной сложности для web требует гораздо большей работы, чем требовалось бы при наличии действительно богатого клиентского языка. Снова, я не думаю, что многие web-программисты осознают, насколько сейчас всё плохо. По сравнению с меинстримными языками, такими как Java, C# или Python язык Javascript не так и плох; в некоторых отношениях он даже лучше. Но Javascript не выдерживает сравнения с языками, имеющими хорошую систему типов и настоящую поддержку ФП, вроде Haskell, Scala и тех языков будущего, которые придут им на смену.

Читать полностью

ID не сделают ваш документ более семантическим5

13 января Статьи 2 689 Перевод Архив

Прежде, чем перейти к сути данного поста, я познакомлю вас с некоторыми обстоятельствами. На прошлой неделе Гарри Робертс (Harry Roberts) опубликовал фантастическую статью, в которой рассуждал о своих взглядах на плохой CSS. В этой же статье он, как и прежде, отговаривал от использования ID в качестве селекторов.

В ответ Джеффри Зельдман (Jeffrey Zeldman) попытался защитить использование ID-селекторов. Я написал Джеффри и другому комментатору несколько ответных комментариев, объясняя, почему я считаю их точку зрения неправильной.

И после дальнейшего обмена сообщениями Зельдман ответил мне следующее, что я частично процитирую ниже:

Использование ID для единичных элементов и классов для множественных – это не «прием из арсенала старой школы». Именно таким образом элементы задаются в HTML. Правильное понимание HTML не является «старомодным». Как и не является «старомодным» использование HTML-элементов так, как они должны использоваться по задумке W3C.

Также важны и его заключительные слова из того же комментария:

Мой пост был частично продиктован желанием оттеснить вирусное внедрение дезинформации.

Разумеется, любовь к силе кода минус уважение (или понимание) истинной огромной мощи HTML является преобладающим пороком web’а со времен первой табличной разметки. На протяжении большей части истории web’а для разработчиков было нормой создавать крутые проекты на отвратительных и нестабильных фреймворках и отвергать саму идею семантики в HTML.По прошествии некоторого времени, в 2000-х годах, мы смогли изменить данное восприятие, и, к счастью, множество людей в нашей сфере до сих пор верят в ценность доступной и семантической разметки. Меня беспокоят те, кто не верят, однако каждого спасти невозможно.

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

Читать полностью

Презентации, посвященные CSS и HTML5 и рекомендованные к просмотру1

6 января CSS, HTML5 4 801 Перевод Архив

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

Производительность CSS

Презентация Пола Айриша, сделанная на reveal.js. В ней рассматривается ряд вопросов, связанных с производительностью: пересчет положения элементов, аппаратное ускорение CSS, производительность селекторов, обеспечение поддержки в старых браузерах и пр.

Краткое введение в WAI-ARIA

Если вы одержимы семантикой HTML, бросьте это дело. Вместо этого станьте одержимым WAI-ARIA. В этой презентации Расс Викли дает краткое представление о WAI-ARIA, включая исторический обзор, примеры ролей основных меток и простые примеры использования WAI в формах.

Читать полностью

Древние посты, вызывающие чувство неловкости, из популярных блогов о веб-дизайне1

30 декабря CSS 719 Перевод Архив

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

Мне показалось забавным при помощи Archive.org и простой навигации по страницам WordPress смутить кучу народу, сделав обзор некоторых ранних статей, которые я сумел найти на разных популярных блогах, посвященных веб-дизайну. Наслаждайтесь.

A List Apart: Как писать для веба

Похоже, это не самая ранняя статья на ALA, но это выпуск «1.01», так что думаю сойдет. В этом посте есть всё: безумный дизайн из 90-х, контент на нескольких страницах и вообще все сделано на наборе фреймов HTML. Зато указан doctype.

Читать полностью

Достоинства CSS4

23 декабря CSS, Статьи 1 121 Перевод Архив

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

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

Медиа-запросы

Кто бы это ни придумал, он был гений. Запросы к носителям являются сердцем адаптивного дизайна, и благодаря им писать кроссбраузерный CSS снова стало весело. Они позволяют сконцентрироваться на гибкости дизайна, который не разрабатывается под конкретное устройство, но который позволяет изменять вид и размер разметки в зависимости от размера экрана.

В общем и целом, это хорошо.

Читать полностью

История HTML51

16 декабря HTML5 332 Перевод Архив

Когда первая версия HTML5 была опубликована в 2008 году, возникло больше вопросов, чем ответов. Будет ли это способ объединения или разделения? Согласятся ли производители контента, программисты браузеров и создатели устройств на новые стандарты? И будут ли, наконец, исправлены проблемы, связанные с мульти-платформенной разработкой? 

Судьба HTML5 была неопределенной в течение некоторого времени, тем более что такие крупные компании, как Apple и Adobe отказались от него на мобильной арене. Будущее Flash, стандарта для передачи потокового видео в интернете, висела на волоске.

В ноябре 2011 Adobe объявила о своем намерении остановить развитие Flash для мобильных браузеров. В то время, как HTML5 постепенно проникал в сеть в целом — это стало поворотным пунктом для стандарта, и это только ускорило процесс.

Читать полностью

10 великолепных аудиоплееров на HTML55

9 декабря CSS, HTML5, JavaScript, Аудио, Статьи 3 824 Перевод Архив

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

Media Element

Читать полностью

Какой совет вы бы дали новичку в CSS?8

2 декабря CSS, CSS для начинающих 3 237 Перевод Архив

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

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

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

Читать полностью

Несколько полезных документов и руководств для разработчиков пользовательских интерфейсов0

25 ноября CSS, CSS для опытных, HTML5 990 Перевод Архив

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

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

Руководство по стилям JavaScript от Google

Это малопонятный ресурс, в котором я пока особо не копался, но похоже, что там содержится много интересных жемчужин. Фактически это стилевое руководство Google по написанию JavaScript. Он разделено на два основных раздела: Правила языка и Правила стиля. Они хорошо резюмировали: «Целью руководства по стилю является наличие общего словаря, чтобы люди могли сконцентрироваться на том, что как вы говорите, а не как вы это делаете.»

Читать полностью

Цитирование с помощью элементов <blockquote>, <q>, <cite> и атрибута cite2

19 ноября HTML5 1 236 Перевод Архив

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

Оли Стадхолм, вторник, 28 июля 2011

С учетом того, что корни HTML тянутся из академического мира, не удивительно, что цитирование хорошо налажено с помощью элементов <blockquote> и <q> с их опциональным атрибутом cite. Помимо этого, существует элемент <cite>, который за последние девять лет превратился из "перевоспитавшегося семантического беспризорника" в один из наиболее спорных элементов HTML5. Давайте запустим эндоскоп и изучим их больные места, начиная с <blockquote>.

Цитирование с помощью <blockquote>

Мы уже достаточно хорошо знакомы с элементом <blockquote>, так как большинство наших статей содержат выдержки из HTML5 спецификации. Вот, кстати, одна из них:

Элемент <blockquote> представляет собой секцию, процитированную из другого источника.
Спецификация W3C HTML5

Читать полностью

Inspiration #152

22 мая Inspiration 1 704

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

Размытые фоновые изображения

Blur

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

Читать полностью

Разница между width:auto и width:100%7

21 мая Тайны CSS2.1 4 409 Перевод

При адаптировании макета для различной ширины экрана (a.k.a. адаптивный дизайн) или носителя (например, печать) обычно устанавливают значения float и width на основе блоков макета для линеризации их отображения. 

Для того, чтобы убрать выравнивание у элемента, нужно просто указать float:none. С шириной дела обстоят не такие простые. Недавно я обнаружил несколько случаев, когда люди используют width:100%, чтобы отменить явно указаную ширину, вместо использования width:auto. Поэтому, я хочу привести короткое объяснение разницы этих вещей.

Читать полностью

LiveCollection #3 и #40

18 мая LiveCollection 482

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

Мы совместили 3 и 4 выпуски этой рубрики, т.к. по некоторым причинам не смог я подготовить статью на прошлой неделе. Поэтому усаживаемся поудобнее и ищем много полезного из этого большого списка полезностей :)

Читать полностью

Мы в социальных сетях

Поддержите наш проект

R356817191883

41001285897040

В примечании к платежу укажите: "Помощь проекту".

Подпишись на css-live.ru

и получай обновления по email

Лучшие материалы

Комментарии Просмотры

Мы на Facebook

Мы ВКонтакте