HTML5 и CSS3: Веб-разработка по стандартам нового поколения, 2-е издание

HTML5 и CSS3: Веб-разработка по стандартам нового поколения, 2-е издание
Автор: Брайан Хоган
Год: 2014
ISBN: 978-5-496-00979-9
Страниц: 320
Язык: Русский
Формат: PDF
Размер: 10 Мб

Download

HTML5 и CSS3 — будущее веб-разработки, но не обязательно ждать будущего, чтобы начать применять эти стандарты уже сегодня. Хотя спецификации этих языков еще находятся в разработке, большинство современных браузеров и мобильных устройств поддерживают HTML5 и CSS3. Эта книга поможет вам использовать HTML5 и CSS3 прямо сейчас, применяя все богатые возможности, появившиеся в новых веб-стандартах…
Вы научитесь применять новую разметку HTML5, разрабатывать улучшенные интерфейсы для форм ввода данных, узнаете, как добавлять аудио, видео и векторную графику на веб-страницы без использования Flash. Вы увидите, как хранение данных на стороне клиента в автономном режиме кэширования может кардинально улучшить скорость загрузки веб-страниц и как в этом помогают простые решения, доступные в CSS3. Каждый раздел книги сопровождается многочисленными примерами, а для каждой описанной функции читателю предстоит создать небольшой учебный пример.
Второе издание содержит обновленную информацию по использованию HTML5 и CSS3; здесь представлена более подробная информация о средствах доступности HTML5 и описан ряд новых подходов, обходных решений и рецептов.

+

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

<section class
<h2>Transcript</h2>
<P>
We’ll drag the existing layer to the new button
on the bottom of the Layers palette to create a new copy.
</p>
<P>
Next we’ll go to the Filter menu and choose Gaussian Blur.
We’ll change the blur amount just enough so that we lose
a little bit of the detail of the image.
</p>
<P>
Now we’ll double-click on the layer to edit the layer and
change the blending mode to “Overlay”. We can then adjust
the amount of the effect by changing the opacity slider.
</p>
<p>Now we have a slightly enhanced image.</p>
</section>

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

 

Субтитры
Расшифровки полезны, но иногда пользователю нужно кое-что получше.  HTML5 поддерживает возможность наложения субтитров с использова­нием нового тега <track>. Данная возможность еще не получила широкой встроенной поддержки, но в библиотеке Video.js она отлично поддержи­вается. Чтобы использовать ее, следует создать файл субтитров и хронометражных точек в формате Web VTT (Web Video Text Tracks). Формат VTT поддерживается в Internet Explorer 10, Chrome, Opera и Safari. Давайте
опробуем его с одним из наших видеороликов.
Создайте папку captions в папке video. Затем создайте в этой папке файл Ol blur.vtt.Файл содержит хронометражные точки и текст субтитров, которые должны выводиться в этих точках. На построение файла уходит некоторое время, ниже приводится окончательная версия.

WEBVTT
00:00.000 –> 00:08.906
We’ll drag the existing layer to the New button on the
bottom of the layers panel to create a new copy.
00:08.906 –> 00:14.167
Now we’ll go to the Filter menu and choose Gaussian Blur.
00:14.167 –> 00:22.907
We’ll change the blur amount just enough so we lose a
little detail of the image.
00:22.907 –> 00:33.670
Now we’ll double-click on the layer to edit the layer.
00:33.670 –> 00:41.928
And we’ll change the blending mode to overlay. This allows
the original layer underneath to show through.
00:41.928 –> 00:48.812
We can then adjust the amount of the effect by changing
the opacity.
00:48.812 –> 00:57.507
And now we have a slightly enhanced image.

Файл связывает субтитры с отдельными частями видео. Мы определяем временной интервал вывода и помещаем текст субтитров под диапазоном. Субтитры могут состоять из нескольких строк при условии, что в них нет пустых строк. Чтобы система работала с видео, мы добавляем в тег < video> тег <track>, который указывает на этот файл:

<track kind=”captions” src=”video/captions/01_bLur.vtt”
srclang=”er?-i/s” label=”EngLish” />

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

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

Ограничения поддержки видео в HTML5
В настоящее время полезность поддержки видео в HTML5 ограничивается тремя очень важными обстоятельствами.
Во-первых, видео HTML5 не предусматривает потоковой передачи видеофайлов. Пользователи уже привыкли к возможности позициониро­вания к конкретной части видеофайла. В этой области особенно хорошо проявляют себя видеопроигрыватели на базе Flash (благодаря огромным усилиям, которые затратила фирма Adobe на разработку Flash как платформы доставки видеоконтента). Для выполнения позиционирования в видеоролике HTML5 файл необходимо полностью загрузить в браузере (хотя, возможно, со временем ситуация изменится).
Во-вторых, в нем не поддерживаются механизмы управления правами. Такие сайты, как Hulu, желающие предотвратить пиратское использование своего контента, не могут положиться на видео HTML5. Flash остается эффективным решением для подобных ситуаций.
В-третьих (что самое важное), процесс кодирования видео требует значительных затрат времени и ресурсов. Необходимость кодирования в нескольких форматах снижает привлекательность решений HTML5. По этой причине многие сайты поставляют видео в формате Н.264 со всеми его патентными сложностями, чтобы оно могло воспроизводиться на iPod и iPad, с использованием комбинации тега HTML5 video и Flash.
Эти проблемы не лишают HTML5 перспектив, однако вы должны учи­тывать их, прежде чем принимать решение о переходе с Flash на HTML5 в качестве технологии передачи видео.

Перспективы
Встроенная поддержка аудио браузерами открывает множество новых возможностей перед разработчиками. Веб-приложения JavaScript могут легко выдавать звуковые эффекты и сигналы без встраивания аудиокон­тента средствами Flash. Встроенная поддержка видео позволяет сделать его доступным на таких устройствах, как iPhone, а также предоставляет открытый, стандартный метод взаимодействия с видео из кода JavaScript. Но самое важное, что с видео- и аудиоклипами можно поступать точно так же, как мы поступаем с графикой — снабжать их семантической разметкой для упрощения идентификации.
Web VTT — еще одна область, заслуживающая пристального внима­ния. Возможности Web VTT не сводятся к простому созданию субтитров. Поддерживаются субтитры для нескольких языков, разбивка на главы для упрощения навигации и включение дополнительных метаданных о видеоматериале. Разработчик даже может использовать HTML и JSON для взаимодействия с видео, с выдачей событий при входе и выходе из хронометражных точек. Эта технология может стать отличной основой для построения интерактивных обучающих программ с встроенным ви­део. К сожалению, на момент написания книги не все браузеры обладали
полной поддержкой API, а к тому времени, когда это произойдет, специ­фикация может измениться. И все же данная возможность определенно заслуживает внимания.