HTML 5, великий и моrучий
в этой главе я хочу немного рассказать об HTML 5 - новой версии языка гипертекстовой разметки, потенциальные возможности которого просто поражают. Но для начала нужно оговориться: на момент написания этой главы HTML 5 попрежнему находится в статусе "черновика': Проверять состояние проекта можно по адресу http : / / dev . wЗ . org/ html 5 / spe c / . Понятие "черновик" означает, что работа над финальным вариантом еще н е завершена и поэтому, пока стандарт HTML 5 не будет выпущен в свет официально, в нем могут происходить изменения. Тем не менее уже известны основные возможности этой версии языка и новые теги, которые можно начинать использовать.
Новое в стандарте HTML 5
Интересно, что новый вариант HTML даже удостоился собственного логотипа (рис. 2 . 1 ) . Этот знак в модном ретростиле стал очень популярным. Вопрос о том, нужен ли вообще логотип новой версии HTML, долго обсуждался в разных сообществах. Мое мнение - почему бы и нет? Логотип и его популяризация поспособствовали тому, что на сам стандарт HTML 5 обратили внимание, начали его изучать и обсуждать нововведения. С 1 апреля 20 1 1 года этот логотип считается официальным. 40 Часть 1. Вспомнить все HTML Рис. 2. 1 . Логотип языка HTML 5 Эта глава скорее ознакомительная, но веб-дизайнеру нужно всегда быть в курсе того, что появилось нового в Интернете. Итак, самое интересное из стандарта HTML S. 1. Леrко lfNraerc• • •сно мcnonн•erc• НТМL-страницы становятся все более и более логичными: их структура отделяется от визуального оформления. Такой код легко разбирают и читают люди и, благодаря стандартизации, более точно выполняют устройства, какими бы они ни были. Стандартизация и логичность - это то, к чему стремится язык HTML и что требуется от браузеров и других устройств, работающих с ним.
Теги , и < c anva s >, кажется, - самые заметные из новых тегов.
Что они предполагают? Что больше вам не нужно будет использовать сторонние технологии,
плагины и расширения. Например, для вставки видео необязательно будет
вставлять ролик во флеш-плеер, как сейчас. Мультимедиа будет воспроизводиться,и < c anva s >, кажется, - самые заметные из новых тегов. Что они предполагают? Что больше вам не нужно будет использовать сторонние технологии, плагины и расширения. Например, для вставки видео необязательно будет вставлять ролик во флеш-плеер, как сейчас. Мультимедиа будет воспроизводиться прямо в браузере. З. Нова• семанrмка Такие теги, как < s e c t i on>, < a r t i c l e >,
, и
, призваны улучшить структуру страницы. Всем сразу будет понятно, какой это раздел докумен- та. Так что теперь можно будет больше не писать
... < / div> . До- статочно будет заключить область шапки сайта в парный тег
... < / header> . 4. Новые Afll Глава 2. HTML 5, великий и могучий 41 Для начала о том, что такое API. Как написано в Википедии, API - это интерфейс программ.ирования приложений. По-английски эта фраза звучит как Application Programming Interface, отсюда и сокращение '1\PI" (читается как эй-пи-ай). По своей сути это набор готовых классов, процедур, функций, структур и констант, предоставляемых приложеннем (библиотекой, сервисом) для использования во внешних программных продуктах. Используется программистами для написания всевозможных приложений. Крупные сайты, например Яндекс, Вконтакте, Twitter и Facebook, предоставляют желающим информацию о своих API с тем, чтобы они могли связывать их сервисы со своими сайтами и создавать на основе этих данных собственные приложения. В HTML 5 предполагается наличие собственных API, так что программисты могут использовать возможности этого языка разметки непосредственно для создания программ прямо на сайте, минуя какие-либо другие технологии. 5. Заман•••ыi Can11as Тег с помощью языка программирования Javascript позволяет создавать разнообразные рисунки непосредственно на сайте. Это могут быть статичные изображения, анимация и целые игры. Если грамотно использовать возможности тега и языка Javascript, то технология Flash становится просто ненужной, отпадает необходимость скачивать для нее плеер, а также автоматически решается вопрос об устройствах Apple (iPad, iPhone и т.д.), которые принципиально не понимают Flash. Если правильно использовать эту технологию, можно делать красивые сайты нового поколения - это как раз то, что вдохновляет дизайнеров. Веб-разработчиков привпекает скорее динамическая сторона, в частности возможность создавать браузерные игры только на языке Javascript. &. Вектор в маr:r:ы Дизайнеры всегда мечтали использовать на веб-сайтах не только растровые, но и векторные изображения: это реальная перспектива отображать картинки без потери качества и иметь возможность произвольно масштабировать рисованные объекты. В версии HTML 5 официально появилась эта возможность: теперь браузеры понимают графический формат SVG (ScalaЬle Vector Graphics - масштабируемая векторная графика). Точнее будет сказать, что этот по сути особый язык разметки был создан Консорциумом Всемирной паутины (WЗС) и предназначен для описания векторной и векторно-растровой графики в формате ХМL. В идеальном случае он поддерживает как неподвижную, так и анимираванную и даже интерактивную графику. Не поддерживается лишь описание трехмерных объектов (не путать с имитацией трехмерности путем светотени). Этот стандарт разрабатывается с 1 999 года; в 200 1 году вышла версия 1 . 1 , которая актуальна и сейчас. Дизайнеры могут получать изображения в формате SVG, просто сохранив файл в программе обработки векторной графики, например в Adobe Illustrator. 42 Часть 1. Вспомнить все Что 1з зтоrо работает 1 rде В общем, новый стандарт языка HTML - это действительно прорыв. Теперь это не просто язык разметки, а шаг к настоящей интерактивности. Более того, в идеале будет не важно, какой используется браузер, верстка везде будет выглядеть одинаково благодаря четкой спецификации. Но все же есть несколько не очень приятных нюансов. Во-первых, на момент написания этой книги стандарт HTML 5 еще не финализирован. Во-вторых, далеко не все браузеры выпуска даже 2012 года поймут, чего от них хотят, поскольку не все разработчики торопятся выпускать новые версии своих браузеров с поддержкой всех нововведений HTML 5. Рассмотрим подробнее ключевые теги этого стандарта и их работоспособность (на текущий момент). Ter
В HTML 5 тег
- это элемент, предназначенный для воспроизведения видео и частично заменяющий тег . Как уже говорилось, на данный момент для вставки видеороликов на страницы сайтов обычно используются возможности флеш-технологии - когда исходный видеоролик иреобразуется в формат SWF. И все бы ничего, но устройства со встроенными браузерамп iPod и iPhoпe от Apple, а также Android версии 2.01 или меньше не понимают этот формат и вообще не поддерживают флеш-технологий. Чем больше мобильных устройств, тем больше недовольных. Так что новый тег, который поддержат все браузеры, - это реальный выход. Вот пример кода с использованием тега
.
Вы увидите этот текст , если ваш браузер не поддерживает вставку видео Как видите, код получился простой и красивый, не надо городить кучу тегов , и т.д. Самая главная проблема, которую еще предстоит решить Консорциуму WЗС, - какие же форматы файлов будут поддерживаться стандартом? По идее он должен поддерживать все самые популярные, но не все так просто. В указанном выше примере вы видите малоизвестный рядовому пользователю формат файла - . webm. Формат WebM был разработан сообществом open-source (т.е. сторонниками программирования с открытым исходным кодом, доступным для всех). Это видеоформат, представленный компанией Google в 2010 году. Сейчас формат WebM борется за право быть главным. Процедура выбора формата видео по умолчанию и его прописывание в окончательной версии HTML 5 по большей части представляет собой политические игры крупных компаний. Это вопрос патентов на форматы и кодеки, а значит, и денежных Глава 2. HTML 5, великий и могучий 43 отчислений за использование, вопрос увлекательный, но мало относящийся к вебдизайну. На данный момент наиболее популярны три формата. Их поддерживают (частично или полностью) многие браузеры. Вот эти трое. 1 • . we bm (WebM) 2. . ogv ( Ogg Theora) 3 . . mp 4 (со специальным кодеком Н.264) И вот что неприятно: браузер Internet Explorer по умолчанию поддерживает формат . mp 4 , а браузер Mozilla Firefox - не поддерживает, его создателям больше нравятся другие два формата, равно как и создателям браузера Opera. И такие вот разногласия - на каждом шагу. Так что пока НТМL-верстальщикам и программистам, желающим использовать тег
, придется сделать свой код менее изящным, добавив в него тег < s ource> - с указанием нескольких файлов разных форматов для одного и того же видеоролика, из которых браузер пользователя сам выберет тот, который ему нужен. Плюс указание типа файла и необходимых кодеков ( т.е. использованных в файле алгоритмов сжатия).
имеет следующие атрибуты. • Autoplay. Видео начинает проигрываться сразу же после загрузки страницы. • Con t r o l s . На страницу выводится паиель управления воспроизведением, как в плеере. • Height и Width. Высота и ширина области воспроизведения для тега
. • Loop. Когда файл заканчивается, он проигрывается заново. • Po s ter. Адрес картинки, которая будет отображаться, пока видео недоступно или когда оно не воспроизводится. • Prel oad. Требует, чтобы видеофайл начал загружаться не по запросу пользователя, а непосредственно по ходу загрузки самой страницы. • Src. Путь к видеофайлу. Несмотря на указанные выше недостатки, тег уже используется. С 201 0 года большое количество сайтов начало работать с использованием формата Н.264 вместо флеш-технологии. Для этой цели программисты используют сценарии, определяющие 44 Часть 1. Вспомнить все устройство, которым пользователь просматривает страницу, и, если оно распознается как iPad или iPhone, пользователь получает свою версию страницы, без флеш, но с тегом
. Популярные видеосервисы YouTube и Vimeo утверждают, что интерес к возможностям видео в HTML 5 растет, но все же они пока продолжат использовать технологии, отличающиеся от припятых в HTML 5, в дополнение к новым. На данный момент сервис YouTube конвертирует все новые загруженные ролики в формат WebM, но параллельно поддерживает и формат Н.264. Дополнительно сервис YouTube заявляет, что спецификации тега
не удовлетворяют всем существующим потребностям. Прежде всего, это отсутствие одного стандартного формата и надежного метода для передачи видеоданных браузеру, отсутствие возможности отображать видео на полный экран и легко внедрять рекламу в ролики, а также проблема защиты содержимого. Защита файлов от несанкционированного сохранения особенно волнует многих, ведь если ссылка на файл будет указываться прямо в HTML-коде, кто угодно может не только просмотреть видео, но и сохранить этот файл у себя, а затем распространять его. Хотя, говоря по совести, "продвинутый" пользователь может сохранить видеоданные, встроенные во флеш, практически откуда угодно. Ter
Тег
, как можно догадаться из названия, отвечает за вставку аудиофайлов на сайт. Как и видеофайлы, ранее музыку и другие звуки можно было разместить на сайте в основном с помощью флеш-технологий. Чтобы у пользователя была возможность остановить воспроизведение, снова его включить, перемотать, начать воспроизведение ролика с начала, - нужен был плеер. И у кого плеера нет или флештехнология вообще не поддерживается, тот уходит ни с чем. Теперь у нас есть тег
. Вот как выглядит НТМL-код вставки аудиофайла в веб-страницу.
Обновите браузер , чтобы послушать музыку . < / audio> Разумеется, не все так просто. История с поддерживаемыми форматами файлов присутствует и тут. В данном случае имеется четыре допустимых формата, но не все они поддерживаются основными браузерами. • Форматы МРЗ и ААС. Поддерживают браузеры Internet Explorer, Chrome и Safari. • Формат WAV. Поддерживают браузеров Opera, Safari и Firefox. • Формат OGG. Поддерживают браузеры Chrome, Opera и Firefox. Глава 2. HTML 5, великий и могучий 45 Таким образом, чтобы угодить основным браузерам, разработчик должен подготовить один и тот же файл в двух популярных форматах: МРЗ и OGG. И соответствующий код в таком случае выглядит уже примерно так.
имеет следующие атрибуты. • Au top l a y. Аудиофайл начинает проигрываться сразу же после загрузки страницы. Из соображений гуманности атрибут autop l a y лучше не использовать - многих раздражает самовольное включение музыки. • Cont r o l s . На страницу выводится паиель управления воспроизведением, как в плеере. Желательно всегда добавлять для удобства пользователей. • Loop. Когда аудиофайл заканчивается, он проигрывается заново. • Prel oad. Обеспечивается автоматическая загрузка аудиофайла вместе с загрузкой веб-страницы. • Src. Путь к аудиофайлу. Ниже представлены браузеры, поддерживающие теги
и
. • Internet Explorer 9.0 • Chrome 10.0 • Opera 10.5 • Safari 3. 1 • Firefox 4.0 Ter Если в НТМL-документ вставить строку < / canva s >, то увидеть чтонибудь новое не удастся. Это тег-контейнер, предназначенный для размещения более интересного содержимого: программного кода на языке Javascript. А уж Javascript умеет делать очень многое, если знать, как им пользоваться. Плохая новость для вебдизайнеров: чтобы тег < canva s > стал для вас родным, вам придется изучить язык программирования Javascript и стать программистом. Хорошая новость: программирование - все-таки не совсем наше занятие, поэтому оставим эту область на откуп Javascript-программистам. 46 Часть I. Вспомнить все Слово "canvas" в переводе с английского означает "холст
Copyright MyCorp © 2023 | 