Geekly Articles each Day

HTML6またはHTML.nextのアイデア

画像

HTML6のアイデアは、HTML5仕様が計画に従って完全に実装され、2014年までに最大限の互換性を達成することになっているにもかかわらず、現在、この仕様の次世代がどのように見えるかについての考えが現れ始めました-通常はHTML.next W3Cコンソーシアム。

新しいセマンティック要素


<解凍>


この要素は、ZIPアーカイブ（メインはZIP形式ですが、他のファイルも可能）から直接Webページにファイルを統合するために提案されました。 このアプローチの利点は、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]  …  ..


<場所>


この要素（<time />に類似）は、地理情報を記述するために使用されます。 緯度、経度、高度の属性を使用することが提案されているため：

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

<ティーザー>


この要素は、完全なブロックへのリンクを持つコンテンツでブロックをラップすることを目的としています。 このような構造はどこでも見ることができます。ブログの最初のページの検索結果、メディアリソースの有無にかかわらず履歴書のあるブロックなどです。 一般に、ナビゲーションページなどの他のセクション要素にネストできるセクション要素である必要があります。

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

このアイテムを使用する利点：


フォーム


フォームフィールドの自動資本化


フォームフィールドに書き込まれるデータのタイプのセマンティック記述。 この属性のおかげで、ブラウザはテキストを入力するためのより便利なインターフェースをユーザーに提供できます。

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

autocapitalize = "words"は、すべての新しい単語が大文字で始まることを意味します。 これは、名前を指定する必要があるフィールドに役立ちます。 「ジョン・ドー」 autocapitalize = "characters"は、各文字が大文字になることを意味します。 これは略語に役立ちます。

拡張認証フォーム


現在、ほとんどのブラウザには、ページに認証、パスワードの変更などの形式があることを決定するヒューリスティックがあります。 多くの場合、これらのヒューリスティックアルゴリズムは常に正しく動作するとは限りません。 フォームやフィールドにメモを追加すると、ブラウザでスクリプトをより正確に処理し、コミュニケーションを改善できます。

ローカリゼーション管理


多くの場合、開発者はコントロールをローカライズすることができません。たとえば、/>フィールドの[参照]ボタン、日付/時刻を設定するためのコントロール

マルチメディア


レスポンシブ画像


HTML6では、クライアント側の現在の設定に応じて、さまざまなサイズの画像をアップロードできます。

アダプティブストリーミング


さまざまなアダプティブストリーミング形式があります（コンテンツをダウンロードするためのいくつかの異なるプログレッシブメディア形式もあります）。 多くの場合、ストリーミングメソッドを使用して保護されたコンテンツをストリーミングする必要があります。 現在、HTML5マルチメディア要素はさまざまな形式をサポートしています。 ただし、アダプティブデータストリーミングとセキュリティで保護されたコンテンツには、広範な使用のために改善されたHTML機能が必要な特定の側面があります。 特に、次のものが含まれます。


サウンドバランス


HTML5を使用して、ステレオトラックのサウンドバランス（左/右チャンネル）を調整します。

ビデオ再生の改善



フルスクリーンとスクリーンショット


全画面を処理してスクリーンショットを撮る方法の例を次に示します。

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


テキスト編集


<Edit®r>要素


このアイテムを使用すると、入力したテキストを保存できます。

<textarea type =” wysiwyg”>


主な目標：構造化（セマンティック）テキスト用のWYSIWYGエディター。 使用目的：ブログ、メール、CMS上の記事編集サイトなど サポートされているアイテムのサンプルリスト。



機能：


コピー/貼り付け機能


テーブルの左側に表示されるリストは、右側に示すように表示されます。

  • ロレム
  • イプサム
  • ドロア
  • 座る
  • など

  1. ロレム
  2. イプサム
  3. ドロア
  4. 座る
  5. など

（ コメントperev。リストの左側にある元の記事のサイトにはマーカーがありません。ここでそれらを削除する方法を見つけられませんでした ）

「Dolor」アイテムをコピーして、通常のWYSIWYGテキストエディターに貼り付けると、「3。 アイテム番号をコピーする必要なく

コンポーネントとECMAScript


「振る舞い」またはDOM要素の動的サブクラス


この機能は、ユーザーインターフェイスコンポーネントの構造とツールに非常に役立ちます。

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


「ビヘイビア」は、広告のセレクターに対応するすべての要素に割り当てられるメソッドのセットです。 要素でイベントが発生すると、対応する関数が呼び出されます。 CSSを使用することもお勧めします。 この動作は、jQueryのイベントの「チェーン」に似ています。

include（ 'url'）;


C ++やPHPなどで書くことに慣れている多くのプログラマーは、この機能を著しく欠いています。 モジュール性を維持するには、次のように外部ファイルの接続を使用することをお勧めします（CSSのインポート URL（...）と同様に機能します）。

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


JavaScript：名前空間とクラス


JavaScriptコードはますます複雑になっています。 1つのページでいくつかの異なるライブラリを使用できますが、開発者にとって名前空間（およびクラス）の欠如はますます深刻な問題になりつつあります。

<code>要素の選択構文


ブラウザにはすでにHTML、JS、およびCSSの解析ツールが用意されているため、JavaScriptを使用してクライアント側のコードを解析することなく、選択構文のサポートが組み込まれていると便利です。 手始めに、上記の言語はすべて十分であり、適切なCSSを接続することで他の言語を追加できます。

Source: https://habr.com/ru/post/J249207/

More articles:


All Articles