Get Bits

PreambleВ статье рассматриваются новые интересные возможности, которые предоставит пятая версия стандарта HTML. Приводится несколько примеров кода с применением новых тегов, а так же поясняются понятия HTML- и XML-сериализации с описанием преимуществ применения каждой из них.

Вводная «лирическая» часть текста сокращена, т.к. она во многом пересекается с ранее опубликованным обзорным постом об HTML 5, в котором был приведен фрагмент интервью того же автора.

Автор: Лахлан Хант, http://lachy.id.au
Оригинал:http://www.alistapart.com/articles/previ…
Перевод: Александр Мусаев, http://paradigm.ru

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

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

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

На иллюстрации приведена типовая разметка страницы с двумя колонками, сделанная с помощью контейнеров div с атрибутами class и id. В ней содержится «шапка», горизонтальный блок навигационных элементов, блок для основного текста страницы, вспомогательная колонка справа от него и нижний колонтитул.

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

Контейнеры div заменяются в нашем примере новыми элементами: header, nav, section, article, aside, и footer. HTML-код при этом принимает следующий вид:

  ...
  ...
  
        
            ...
        
  
  ...
  ...

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

В следующем примере совместно используются контейнеры section и h1:

Level 1

  Level 2
  
    Level 3
  

Обратите внимание, что для лучшей совместимости с существующими браузерами, помимо h1 так же возможно использование заголовков других уровней (h2-h6).

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

  A Preview of HTML 5
  

By Lachlan Hunt

  Example Blog
  Insert tag line here.

Элемент footer представляет собой завершающий блок секции, к которой относится (аналог нижнего колонтитула для страницы «бумажного» документа). Такие блоки, как правило, содержат вспомогательную информацию о секции. Например, ссылки на связанные материалы, информацию о правах на копирование и т.д.

© 2007 Example Inc.

nav предназначен для навигационных ссылок, что полезно как для межстраничных переходов внутри сайта, так и для внутристраничной навигации (для организации оглавления).

  
    Home

    Products
    Services
    About

  

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

  Archives

  
    September 2007
    August 2007
    July 2007
  

Элемент section интерпретируется как секция общего назначения. Такой секцией может быть, например, параграф.

Chapter 1: The Period

It was the best of times, it was the worst of times,
  it was the age of wisdom, it was the age of foolishness,
  it was the epoch of belief, it was the epoch of incredulity,
  it was the season of Light, it was the season of Darkness,
  ...

(в примере приведена выдержка из «Повести о двух городах» Чарльза Диккенса)

article определяет независимые секции документа, страницы или сайта. Этот элемент может использоваться для выделения новостей, сообщений на форуме, постов или комментариев на блоге и т.д.

  
    Comment #2
      by Jack O'Niell
    

August 29th, 2007 at 13:58
  

  

That's another great article!

Аудио- и видеоматериалыВ последние годы аудиозаписи и видеоролики получили широкое распространение в интернете благодаря многочисленным сервисам, облегчающим их публикацию (YouTube, Google Video, MySpace, etc.). Из-за недостатка встроенных возможностей HTML, большинство сайтов, размещающих подобный контент, используют Flash, в качестве вспомогательного средства. Выбор этой технологии обычно обоснован тем, что Flash на данный момент имеет наиболее широкую поддержку среди браузеров, по-сравнению с альтернативными технологиями, с помощью которых можно было бы обеспечить воспроизведение мультимедиа-контента (QuickTime, Windows Media).

Огромное количество мультимедиа-плееров, написанных на Flash, является подтверждением того, что разработчики чаще всего предпочитают самостоятельно формировать их интерфейс, не смотря на то, что в большинстве случаев пользователям предоставляется одна и та же функциональность (воспроизведение, пауза, перемотка и управление громкостью). Планируется, что в будущем эти функции будут поддерживаться самими браузерами, что обеспечит базовую возможность для встраивания аудио- и видеозаписей в веб-страницы, а так же возможность управлять этими элементами через DOM API.
С помощью новых тегов video и audio это будет действительно просто. Большая часть функций их API будет совпадать, с одной лишь разницей в ориентации на воспроизведение визуального и невизуального материала.

У Opera и WebKit уже есть релизы с частичной поддержкой тега video. Уже сейчас можно загрузить экспериментальную версию браузера Opera или последнюю еженочную сборку WebKit для демонстрации работы приведенных ниже примеров кода. Opera имеет поддержку Ogg Theora, а WebKit понимает все форматы, что и QuickTime, включая кодеки сторонних разработчиков.

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

  Download movie

Необязательный атрибут poster может быть использован для определения статического изображения, отображаемого в контейнере video до того, как начнется воспроизведение записи. Существуют форматы видео, которые имеют аналогичную встроенную возможность (напрмиер, MPEG4), но использование описанного выше подхода позволяет добиться этой функциональности без привязки к конкретному кодеку.

Точно таким же образом можно встраивать в документы аудиозаписи с помощью элемента audio. Большинство атрибутов у тегов audio и video совпадают, но у audio по понятным причинам отсутствуют width, height и poster.

  Download song

В стандарте HTML 5 предусмотрен элемент source для вставки ссылок на аудио- и видеофайлы в нескольких альтернативных форматах, из которых браузер сможет делать выбор наиболее предпочтительного варианта, на основе поддерживаемых им кодеков и указанных в коде типов формата контента. При использовании вложенных тегов source, атрибут src контейнеров audio и video должен быть опущен, в противном же случае, теги source будут проигнорированы.

  
  

habrahabr.ru

• Web-разработка: Email это не место для дизайна
Примечание: ниже перевод статьи Jeffrey Zeldman "E-mail is not a platform for design". В ней рассматривается текущая поддержка со стороны email-клиентов HTML-разметки писем. Статья во многом спорная и неоднозначная.После стольких лет процветания интернета HTML-письма по-прежнему вызывают сильное отвращение (still sucks). Вы можете подумать, что я имею в виду «HTML-письма не отображатся корректно в некоторых email-клиентах» Однако, это лишь часть истины. Компании тратят сотни часов простых верст
• учись работать: Четырехдневная рабочая неделя
"Чем больше вы работаете, тем больше успеваете сделать, всегда ли это верно? Я хочу предложить вашему вниманию мое решение проблемы перегруженности работой." (Ryan Carson, http://alistapart.com/articles/fourdayweek) Мне вот что интересно: действительно ли работает эта методика? habrahabr.ru
• UsabilityLab: Семинар “Что такое юзабилити?” на конференции Интернет и Бизнес 2007
Фёдор Вирин: Самым интересным, по крайней мере для меня, докладом является доклад о юзабилити, и о том что это такое, Дмитрия Сатина, руководителя UsabilityLab. Юзабилити – это странная штука. Компаний, которые занимаются юзабилити и только юзабилити в России три. Это UsabilityLab, Usethics и UIDesign. И всё! Ну и соответственно, Дмитрий Сатин, который руководит UsabilityLab, я думаю, более чем достойная кандидатура для рассказа о том, что такое юзабилити. Дмитрий Сатин: Спасибо, Федор! Федор в
• Дизайн пользовательских интерфейсов и юзабилити: Интерактивные прототипы. Действующая модель пользовательского интерфейса, часть 3. Особенности процесса
Я уже писал про классификацию и два основных пути создания интерактивных прототипов. В большинстве случаев мы делаем как раз цветной прототип. По сути, это обычная верстка HTML-шаблонов страниц на основе визуального дизайна, включающая в себя JavaScript-взаимодействия. Разница в том, что эти шаблоны еще много раз поменяются и дополнятся.Процесс созданияАвтоматические средства создания прототипов на основе схем страниц — те же Axure RP Pro и Intuitect — я стараюсь не использовать. Он
• Web-разработка: Факторы, влияющие на html вёрстку (Часть 2: Работа PM и Рабочий процесс)
Продолжение...Эта статья является продолжением Части1: Работа HTML кодера.Работа PM1. Однозначное толкование требований, пожеланий и воли клиента.Худший вариант: Пожелания клиента передаются PM’ом кодеру как есть (расплывчато, невнятно)Требование или задача формулируются, например, так: «Сделайте это более зелёным», «увеличьте шрифт», «отодвиньте этот блок влево», «оформите эту страницу в общем стиле».Хорошая практика: PM, на сколько это возможно, выясняет требования и пожелания клиента и перед