Pull to refresh

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

Reading time 6 min
Views 5.1K
image
Несмотря на то, что спецификацию HTML5 планируется полностью утвердить и добиться максимально широкой функциональной совместимости лишь в 2014 году, уже сейчас начинают выкристаллизовываться идеи о том как должна выглядеть данная спецификация следующего поколения — HTML.next, как его в рабочем порядке называют в W3C-консорциуме.

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


<dеcompress>

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

Пример использования:
<decompress href="http://thisisanexample.com/mobile/familyreunion.zip">
<a href="familyreunion.zip/html/activities.html">Activities from our family reunion</a>
<img src="familyreunion.zip/img/familyreunion1.jpg">

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

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

Пример:
    [title: The praise of Shadow id:praise by:junichiro] 
    is a book written by [author: Junichiro Tanizaki id:junichiro] 
    explaining … etc.

<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.myserver.com/myFirstCoolArticle.html">My First Cool Article</a></h1>
        </header>
        <p>This is my first article on the page, and it's really cool.</p>
        <footer>
            <time>3 Days Ago</time>
            <div><a href="http://www.myserver.com/myFirstCoolArticle.html"
            >http://www.myserver.com/myFirstCoolArticle.html</a></div>
        </footer> 
    </teaser>
    <teaser>
        <header>
            <h1><a href="http://www.myserver.com/mySecondCoolArticle.html"
            >My Second Cool Article</a></h1>
        </header>
        <p>This article is on superconducting fields, and is even cooler than my first article.</p>
        <footer>
            <time>1 Days Ago</time>
            <div>
                <a href="http://www.myserver.com/mySecondCoolArticle.html"
                >http://www.myserver.com/mySecondCoolArticle.html</a
            </div>
        </footer> 
     </teaser>
</nav>

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

Формы


Автоматическое написание в input-формах прописными буквами

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

Например:
<form>
    ФИО: <input name="name" autocapitalize="words">
    State: <input name="state" autocapitalize="characters">
</form>

Указав тег autocapitalize=«words», браузер каждое новое слово будет писать с заглавной буквы. Актуально для полей указания ФИО, напр. «Вася Пупкин».
Указав тег autocapitalize=«characters», браузер каждый символ будет писать с заглавной буквы. Актуально для аббревиатур.

Более подробно здесь.

Улучшенная проверка подлинности форм

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

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

Часто веб-разработчикам не хватает возможности локализовать элементы управления, например:
— кнопка «Browse» для полей типа <inрut type=file />
— элементы управления для выставление даты/времени

Мультимедиа


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

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

Адаптивное потоковое вещание

Работы в данном направлении уже ведутся: Adaptive Streaming, Video Metrics.

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

Настройка аудио-баланса (правый/левый канал) средствами HTML5 для стерео композиций.

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

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


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


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

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

<tеxtarea type=''wysiwyg''>

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

Предполагаемый список поддераживаемых элементов:
  • blocks: p, ul/li, ol/li, dl/dt/dd, blockquote, pre
  • spans: strong/em/a/sup/sub/u/code/strike.
  • inline-blocks: img, br
  • таблицы: table/tr/th/td
Особенности:
  • поддержка копирования/вставки изображений из/в системный буфер (подключается атрибутом)
  • поддержка копирования/вставки текстов и HTML из/в системный буфер (подключается атрибутом)
  • не должен поддерживать встроенные стили
  • может иметь атрибут content-style=«some.css», определяющий стили элементов внутри редактора
Возможности копирования/вставки

Список, представленный в левой части таблицы, будет отрендерен так, как представлено в правой части таблицы.
<ol>
	<li>Lorem</li>
	<li>Ipsum</li>
	<li>Dolor</li>
	<li>sit</li>
	<li>et cetera</li>
</ol>
  1. Lorem
  2. Ipsum
  3. Dolor
  4. sit
  5. et cetera
Если скопировать пункт 'Dolor' и вставить его в обычный WYSIWYG текстовый редактор, то вместо простой записи без номера пункта должны получить «3. Dolor».

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


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

Данная функция очень полезна для компонентов пользовательских интерфейсов фреймворков и инструментальных средств.

Пример:
document.behaviors["ul.some>li"] = { // the behavior class:
  attached: function() {...},
  detached: function() {...},
  onmousedown: function() {...}, 
  onclick: function() {...}, 
  ...
};

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

include(''url'');

Для многих программистов, привыкших писать на C++, PHP, etc, весьма не хватает такой возможности. Для сохранения модульности предлагается использовать подключение внешних файлов следующим образом (работает аналогично import url(...) в CSS):
window.include("url"[,mime/type])

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

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

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

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

Пользователи хабра наверняка сразу провели аналогии с тегом <sоurce>, использующимся здешним редактором, который в данном случае можно было бы упразднить.
<source lang="Язык"></sоurce>
Подсвечивает исходный код (на выбор: bash, cpp, cs, xml, html, java, javascript, lisp, lua, php, perl, python, ruby, sql, scala, tex).


Еще больше идей от разработчиков в виде баг-листа можно посмотреть тут.
Пишем свои идеи того, что по вашему мнению было бы уместно в HTML.next.
Tags:
Hubs:
+60
Comments 124
Comments Comments 124

Articles