HTML6 ideas or HTML.next

HTML6 ideas or HTML.next

0 44240
HTML.next

HTML6 notion, despite the fact that the HTML5 specification was planned to fully adopt and achieve the broadest possible compatibility in 2014, now began to appear ideas about how this specification of the next generation looks like – HTML.next, as it routinely referred to in the W3C-consortium.

New elements of semantics

<d?compress>

This element is proposed for the integration of files from a ZIP-archive (ZIP format as the main, however others are possible too) directly into a web page. Advantages of this approach: web-browser access to files from ZIP, reduction of requirements for bandwidth (which is especially important for mobile platforms).

Example of use:

<decompress href="http://example.com/mobile/familyreunion.zip">
<a href="familyreunion.zip/html/activities.html">Activities from our family reunion</a>
<img src="familyreunion.zip/img/family.jpg">

Semantics to describe titles and authors

It is used to identify the names of books, blog posts, movies, and so on to its associated authors even if the layout applies only for a few paragraphs. This semantics may be implemented as a pseudo-markings and define the relationships between the elements.

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

<l?cation>

This element (similar to <time />) is used to describe geo-information. It is proposed to use the attributes: lat, long, altitude:

<location lat=27.9 long=-71.3 altitude=-100>The Bermuda Triangle</location>

<t?aser>

The element is designed to wrap the content block having a link to a complete block. Such structures we can see everywhere: in the search results on the first page of the blog, resume block with (or without) media resources and so on. In general, it should be a sectional element that can be located in other sectional elements, such as navigation page:

<nav>
  <teaser>
    <header>
      <h1><a href="http://www.example.com/myFirstPost.html">My First Post</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.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">My Second Post</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.example.com/mySecondPost.html">http://www.example.com/mySecondPost.html</a>
      </div>
    </footer>
   </teaser>
</nav>

The advantages of using this element:

  • description of the general frequently used structures in HTML
  • helps to optimize search engines and management components, because different widgets can use this structure in different ways
  • it is not necessary to participate in the mechanism of lists numbering
  • can be used in conjunction with anchors to create fast ToC
  • works well in HTML5 blogs, apparently, taken as a basis for separation of content

Forms

Automatic writing in input-forms with capital letters

The semantic description of the type of data to be recorded in the field. This attribute allows the browser to provide the user with a better interface for text entry.

  <form>
    Name: <input name="name" autocapitalize="words">
    State: <input name="state" autocapitalize="characters">
  </form>

The tag autocapitalize="words" means that each new word is written with a capital letter. This is actual for fields where you need to specify names, eg. “John Doe”. The tag autocapitalize="characters" means that each character will be written with a capital letter. That is actual for abbreviations.

Improved forms authentication

Today, most browsers have heuristics that determine that the page has a form of authentication, password change, and so on. Often these heuristic algorithms does not always work correctly. Adding annotations to forms and fields allows browsers to more accurately handle scenarios and improve communication.

Localization of controls

Web developers often have a lack of ability to localize the controls, such as: the button «Browse» to fields <input type=’file’ />, controls for setting the date/time

Multimedia

Adaptive images

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

Adaptive streaming

There is a number of different adaptive streaming formats (as well as have a number of different progressive media formats for downloading content). In many cases, through streaming we need to transfer some protected content. The current HTML5 media elements support a choice of different formats. Nevertheless, there are certain aspects of adaptive streaming and protected content that require improvements in HTML capabilities for general use. In particular, they include:

  • additional media element for status, that allows you to display the current status (eg. synchronization of data with the server)
  • additional media element for errors (eg. transmission error)
  • additional media element for events (eg. change bitrate of a stream)
  • additional media item for properties (eg. the current bit rate, which may be associated with other indicators QoS)

Audio balance

Adjusting audio balance (right / left channel) with HTML5 for stereo tracks.

Improving video playback

  • fast / slow motion / fast forwarding
  • previous / next frame

Fullscreen mode and screenshots

Here is example of how we can handle with fullscreen and obtaining of screenshotes:

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

Text editing

Element <edit?r>

This element allows to save the typed text.

<t?xtarea type=”wysiwyg”>

The main objective: WYSIWYG-editor for structured (semantic) text. Intended use: blogs, emails, editing articles of CMS sites, and so on. Estimated list of supported elements:

  • blocks: p, ul/li, ol/li, dl/dt/dd, blockquote, pre
  • spans: strong/em/a/sup/sub/u/code/strike
  • inline-blocks: img, br
  • tables: table/tr/th/td

Features:

  • support copy / paste images from / to the system clipboard (connected by attribute)
  • support copy / paste text and HTML from/in the system clipboard (connected by attribute)
  • should not support inline styles
  • may have an attribute content-style=«style.css», specifies the style of elements within the editor

Features of copy / paste

The list presented on the left side of the table will be rendered as shown in the right part of the table.

<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. etc

If you copy the item ‘Dolor’ and insert it into an ordinary WYSIWYG text editor, instead of a simple recording without the need to get the item number “3. Dolor”.

Components and ECMAScript

«behaviors» or dynamic subclasses of DOM elements

This function is very useful for the user interface component frameworks and tools

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

«behaviors» is a set of methods that are assigned to all elements that match the selector in the declaration. When an element receives an event, it invokes the associated function. Likewise proposed to work with CSS. This behavior is similar to the “chain” of events in jQuery.

include(‘url’);

For many programmers who are used to write in C ++, PHP, etc, did not quite have enough of such a possibility. To preserve modularity are encouraged 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. On the same page can be used several different libraries and the lack of namespaces (and classes) is becoming increasingly troublesome for web developers.

Syntax highlighting for items <c?de>

Given the fact that browsers already have the instruments of parsing HTML, JS and CSS, it would be nice to have the native support for syntax highlighting without having to parse the code on the client side with Javascript. For a start it would be enough all listed above languages, others can be added by connecting the appropriate CSS.

SIMILAR ARTICLES


NO COMMENTS

Leave a Reply