psywalker January 29, 2015 at 15:38

Ideas for HTML6 or HTML.next

Transfer

The idea of HTML6, despite the fact that the HTML5 specification was supposed to be fully implemented according to plan and to achieve maximum compatibility by 2014, now thoughts began to appear about what the next generation of this specification might look like - HTML.next, as it is usually called in W3C Consortium.

New semantic elements

This element was proposed for integrating files from a ZIP archive (ZIP format as the main one, however others are also possible) directly into a web page. The advantages of this approach: browser access to files from ZIP, reduced bandwidth requirements (which is especially important for mobile platforms).

Usage example:

Деятельность нашего семейного воссоединения

Semantics for headings and authors

This is used to find out the name of books, blog entries, films, and so on, to related authors, even if the markup applies to only a few paragraphs. This semantics can be implemented in the form of pseudo-tags and determine the relationship between elements.

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

This item (similar to ) is used to describe geographic information. For it is proposed to use the attributes: lat, long, altitude:

Бермудский треугольник

The element is intended to wrap a block with content that has a link to the full block. We can see such structures anywhere: in the search results on the first page of the blog, in a block with a resume with or without media resources, and so on. In general, it should be a sectional element that can be nested in other sectional elements, such as a navigation page:

My First Post
Это моя первая статья на странице и это реально круто!
Три дня тому назадhttp://www.example.com/myFirstPost.htmlМоя вторая статья
Эта статья на сверхподходящем поле и поэтому она круче, чем первая статья.
Один день тому назадhttp://www.example.com/mySecondPost.html

Benefits of using this item:

description of common commonly used structures in HTML
allows you to optimize search engines and control components, because different widgets can use this structure in different ways
no need to use the list numbering mechanism
can be used in combination of anchors to create a quick table of contents
Apparently, it should work well in HTML5 blogs, if you take it as a basis for sharing content

Forms

Automatic capitalization in form fields

A semantic description of the type of data to be written to the form field. Thanks to this attribute, the browser can provide the user with a more convenient interface for entering text.


  Название: 
  Состояние:

autocapitalize = "words" means that every new word will start with a capital letter. This is useful for fields where you need to specify names, e.g. "John Doe." autocapitalize = "characters" means that each character will be capitalized. This is useful for abbreviations.

Enhanced Authentication Forms

Today, most browsers have heuristics that determine that a page has a form of authentication, password changes, etc. Often these heuristic algorithms do not always work correctly. Adding notes to forms and fields allows browsers to more accurately handle scripts and improve communication.

Localization management

Developers often lack the ability to localize controls, such as: the Browse button in the /> fields, controls for setting the date / time

Multimedia

Responsive Images

HTML6 provides the ability to upload images of different sizes, depending on the current settings on the client side.

Adaptive Streaming

There are a number of different adaptive streaming formats (as well as several different progressive media formats for downloading content). In many cases, we need to stream some protected content using the streaming method. HTML5 multimedia elements currently support a variety of formats. However, there are certain aspects of adaptive data streaming and secure content that require improved HTML capabilities for widespread use. In particular, they include:

additional media element for the state, which allows displaying the current state (e.g. data synchronization with the server)
additional media element for errors (e.g. transmission error)
additional media element for events (e.g. change in flow rate)
additional media element for properties (e.g. current speed, which is related to other QoS indicators)

Sound balance

Adjust sound balance (left / right channel) for stereo tracks using HTML5.

Video playback improvement

fast / slow motion / fast forward
previous / next frame

Full Screen and Screenshots

Here is an example of how we can handle the full screen and take screenshots:

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

Text editing

Element

This item allows you to save typed text.

Main goal: WYSIWYG editor for structured (semantic) text. Intended use: blogs, emails, article editing sites on CMS, etc. Sample list of supported items.

block : p, ul / li, ol / li, dl / dt / dd, blockquote, pre
lowercase : strong / em / a / sup / sub / u / code / strike
lower case : img, br
tabular: table / tr / th / td

Opportunities:

support for copying / pasting images from / to the system clipboard (associated with the attribute)
support for copying / pasting text and HTML from the system clipboard and vice versa (via the attribute)
should not support inline styles
may have the attribute content-style = "style.css", which defines the style of the element in the editor

Copy / Paste Features

The list presented on the left side of the table will be displayed as shown on the right side.

Lorem
Ipsum
Dolor
sit
et cetera

Lorem
Ipsum
Dolor
sit
etc

( note transl. On the original article’s site, the list has no markers on the left side. I didn’t find how to remove them here )

If you copy the “Dolor” item and paste it into a regular WYSIWYG text editor, you will get “ 3. Dolor ”without having to copy the item number.

Components and ECMAScript

“Behaviors” or dynamic subclasses of DOM elements

This feature is very useful for user interface component structures and tools.

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

A “behaviors” is a set of methods assigned to all elements that match the selector in the declaration. When an event is fired on an element, it calls the corresponding function. It is also suggested to work with CSS. This behavior is similar to the "chain" of events in jQuery.

include ('url');

Many programmers who are used to writing in C ++, PHP, etc., noticeably lack this feature. To preserve modularity, it is recommended to use the connection of external files as follows (works similarly to import url (...) in CSS):

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

JavaScript: namespace and classes

JavaScript code is becoming more and more complex. Several different libraries can be used on one page, and the absence of a namespace (and classes) is becoming an increasingly serious problem for developers.

Selection syntax for items

Given that browsers already have HTML, JS, and CSS parsing tools, it would be nice to have built-in support for selection syntax without having to parse client-side code using Javascript. For starters, all of the above languages would be enough, and others can be added by connecting the appropriate CSS.

Tags: