Идеи для HTML6 или HTML.next

Идея HTML6, несмотря на то, что спецификация HTML5 по плану должна была быть полностью внедрена и достичь максимальной совместимости к 2014-му, сейчас стали появляться мысли насчет того, как может выглядеть следующее поколение этой спецификации — HTML.next, как её обычно называют в консорциуме W3C.

Новые семантические элементы

<dеcompress>

Этот элемент был предложен для интеграции файлов из ZIP-архива (формат ZIP как основной, однако другие тоже возможны) прямо в веб-страницу. Преимущества такого подхода: доступ браузера к файлам из ZIP, снижение требований к пропускной способности (что особенно важно для мобильных платформ).

Пример использования:

<decompress href="http://example.com/mobile/familyreunion.zip">
<a href="familyreunion.zip/html/activities.html">Деятельность нашего семейного воссоединения</a>
<img src="">

Семантика для описания заголовков и авторов

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

[title: Похвала тени id:praise by:junichiro]
— книга, написанная [author: Дзюнъитиро Танидзаки id:junichiro]
пояснение … и т.д.
 

<lоcation>

Этот элемент (по аналогии с <time />) используется для описания географической информации. Для него предлагается использовать атрибуты: lat, long, altitude:

<location lat=27.9 long=-71.3 altitude=-100>Бермудский треугольник</location>

<tеaser>

Элемент предназначен для обёртывания блока с контентом, имеющего ссылку на полный блок. Такие структуры мы может видеть где угодно: в результатах поиска на первой странице блога, в блоке с резюме с медиаресурсами (или без) и так далее. В общем, это должен быть секционный элемент, который может быть вложен в другие секционные элементы, такие как страница навигации:

<nav>
  <teaser>
    <header>
      <h1><a href="http://www.example.com/myFirstPost.html">My First Post</a></h1>
    </header>
    <p>Это моя первая статья на странице и это реально круто!</p>
    <footer>
      <time>Три дня тому назад</time>
      <div><a href="http://www.example.com/myFirstPost.html">http://www.example.com/myFirstPost.html</a></div>
    </footer>
  </teaser>
  <teaser>
    <header>
      <h1><a href="http://www.example.com/mySecondPost.html">Моя вторая статья</a></h1>
    </header>
    <p>Эта статья на сверхподходящем поле и поэтому она круче, чем первая статья.</p>
    <footer>
      <time>Один день тому назад</time>
      <div>
        <a href="http://www.example.com/mySecondPost.html">http://www.example.com/mySecondPost.html</a>
      </div>
    </footer>
   </teaser>
</nav>

Преимущества использования этого элемента:

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

Формы

Автоматическое написание с заглавных букв в полях формы

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

<form>
  Название: <input name="name" autocapitalize="words">
  Состояние: <input name="state" autocapitalize="characters">
</form>

autocapitalize=«words» означает, что каждое новое слово будет начинаться с заглавной буквы. Это полезно для полей, где нужно указывать имена, напр. «John Doe». autocapitalize=«characters» означает, что каждый символ будет записан с заглавной буквы. Это полезно для аббревиатур.

Улучшенные формы аутентификаций

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

Локализация управления

У разработчиков часто отсутствует возможность в локализации элементов управления, таких как: кнопка «Обзор» в полях />, элементы управления для настройки даты/времени

Мультимедиа

Адаптивные изображения

HTML6 предоставляет возможность загружать изображения разного размера, в зависимости от текущих настроек на стороне клиента.

Адаптивная потоковая передача данных

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

• дополнительный медиаэлемент для состояния, который позволяет отображать текущее состоянии (напр. синхронизация данных с сервером)
• дополнительный медиаэлемент для ошибок (напр. ошибка передачи)
• дополнительный медиаэлемент для событий (напр. изменение скорости потока)
• дополнительный медиаэлемент для свойств (напр. текущая скорость, которая связана с другими показателями QoS)

Баланс звука

Регулировка звукового баланса (правый/левый канал) для дорожек со стереозвуком при помощи HTML5.

Улучшение воспроизведения видео

• быстрое / замедленное движение / быстрая перемотка вперёд
• предыдущий / следующий кадр

Полноэкранный режим и скриншоты

Вот пример того, как мы можем справиться с полным экраном и получением скриншотов:

domElement.fullScreen(); 
domElement.getImageData(0, 0, domElement.offsetWidth, domElement.offsetHeight);

Редактирование текста

Элемент <editоr>

Этот элемент позволяет сохранять набранный текст.

<tеxtarea type=”wysiwyg”>

Основная цель: WYSIWYG-редактор для структурированного (семантического) текста. Предполагаемое применение: блоги, электронные письма, редактирование статей сайтов на CMS и т.д. Примерный список поддерживаемых элементов.

• блочные: p, ul/li, ol/li, dl/dt/dd, blockquote, pre
• строчные: strong/em/a/sup/sub/u/code/strike
• строчно-блочные: img, br
• табличные: table/tr/th/td

Возможности:

• поддержка копирования / вставки изображений из / в системный буфер обмена (связанный атрибутом)
• поддержка копирования / вставки текста и HTML из системного буфера обмена и обратно (посредством атрибута)
• не должен поддерживать инлайн-стили
• может иметь атрибут content-style=«style.css», который определяет стиль элемента в редакторе

Возможности копирования / вставки

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

(прим. перев. На сайте оригинальной статьи в левой части у списка нету маркеров. Здесь я не нашёл, как их убрать)

Если вы скопируете пункт «Dolor» и вставите его в обычный текстовый WYSIWYG-редактор, то вместо простой записи вы получите «3. Dolor» без необходимости копировать номер пункта.

Компоненты и ECMAScript

«behaviors» или динамические подклассы DOM-элементов

Эта функция очень полезна для структур компонента пользовательского интерфейса и инструментов

document.behaviors["ul.some>li"] = { // класс поведения:
  attached: function() {...},
  detached: function() {...},
  onmousedown: function() {...},
  onclick: function() {...},
  ...
};

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

include(‘url’);

Многим программистам, которые привыкли писать на C ++, PHP и т.д., ощутимо не хватает такой возможности. Чтобы сохранить модульность, рекомендуется использовать подключение внешних файлов следующим образом (работает аналогично import ^[1] url(…) в CSS):

window.include("url"[,mime/type])

JavaScript: пространство имён и классы

JavaScript-код становится всё более и более сложным. На одной странице могут быть использованы несколько разных библиотек и отсутствие пространства имён (и классов) становится всё более серьезной проблемой для разработчиков.

Синтаксис выделения для элементов <cоde>

Учитывая, что у браузеров уже присутствуют инструменты парсинга HTML, JS и CSS, было бы неплохо иметь встроенную поддержку для синтаксиса выделения без необходимости парсить код на стороне клиента при помощи Javascript. Для начала было бы достаточно всех перечисленных выше языков, а другие могут быть добавлены путём подключения соответствующего CSS.

Автор: psywalker

Источник ^[2]