バリデーターエラー： ない鬼ごっこ

説明：アイテムは、開くのと逆の順序で閉じる必要があります

右：
< li >...

DOCTYPEの大文字と小文字の区別

例：

バリデーターエラー： DOCTYPEがありません

説明：DOCTYPEでは大文字と小文字が区別されます

右:

クロージング「/」は登録されていません

例：
…style.css "type =" text / css "media =" screen " >

説明：「空の要素」のような imgまた br、前にスペースを入れて「/」で終了する必要があります

右:
…style.css "type =" text / css "media =" screen "/>

タグは大文字で書かれています

例：

バリデーターエラー：そのような要素はありません...

説明：XHTMLドキュメントでは、すべての要素と属性は小文字である必要があります。 この言語では大文字と小文字が区別されます

右:

属性値は引用符なしで記述されています

例：

バリデーターエラー：ない ""

説明：属性値は引用符と一緒に書かれています

右:

Imgにalt属性がありません

例：

バリデーターエラー：必須属性「alt」が指定されていません

説明： 鬼ごっこ img属性 alt画像が装飾に使用されている場合は、値を空白のままにすることができます。

右:

その結果、サイトのエラーを修正し、サイトを有効にすることができます。

サイトの開発やプロモーションに何らかの形で興味を持っている人は誰でも、コードの有効性などの概念に出会ったと思います。 このフレーズは、World Wide Web Consortium（World Wide Web Consortium（W3C））によって開発された特定の標準に従ってサイトのHTMLコードを記述することを意味します。 この標準で規定されているルールへの準拠は、ブラウザ間の互換性、つまり、作成されたページがすべてのブラウザで正しく表示されること、および読み込み速度やその他のパラメータに影響するエラーがないことを保証します。

現代のインターネットでは、サイトレイアウトの品質の基準が重要な役割を果たし始めています。これは、ウェブマスターが固定PCやラップトップだけでなく、多くの場所でもリソースを正しく表示する必要があるためです。 モバイルデバイスさまざまな解像度で。

開発者がコードをどのようにクリーンで構造化したかは、サイトの有効性をチェックすることで検出できます。これは、W3Cの公式リソースの特別なチェッカーを介して実行されます。 validator.w3.orgで無料で入手できるオンラインHTMLバリデーターがあります

これは、次の3つの方法でHTMLコードの有効性を確認するために使用できます。

• URIによる検証-アドレスによる検証
• ファイルアップロードによる検証-アップロードされたファイルの分析
• 直接入力による検証-特定のコードの検証。

必要な方法の選択は、適切なタブに切り替えることによって実行されます。

Runetで有名なWebサイト（Habrahabrなど）の有効性を確認するとどうなるか見てみましょう。 分析のためにフィールドに貼り付けて、「チェック」ボタンを押します。 数秒後、W3Cバリデーターは次の結果を返します。

ほとんどのリソースをチェックすると、数十、さらには数百のエラーが発生するため、非常に良い結果が得られます。

ページを少し下にスクロールすると、チェッカーがエラーを見つけた場所とその説明を正確に確認でき、行を示します。 さらに、正確な問題が詳細に説明されているため、簡単に修正できます。

いずれにせよ、サイトでエラーが見つかった場合でも、動揺しないでください。まず、W3C標準に完全に準拠するWebサイトがほとんどないため、次に、HTMLバリデーターが検出したすべてのエラーを修正できます。 。

HTMLコードの有効性についてサイトをチェックすると、コードのクリーンさと適切な構造が内部最適化の重要なコンポーネントであるため、修正とレイアウトの最適化が必要かどうかを理解できます。 よくできたセマンティックレイアウトにより、別のパフォーマーが他の人のコードをすばやく理解できるだけでなく、テキストの関連性を高め、ページの読み込みを高速化できます。

検証エラーの検索の実現可能性と必要性​​について多くの記事が書かれています。上記では、W3C標準に従ってサイトのコードを適合させることで得られる主な利点についてすでに説明しました。 さらに、そのような手段は、大きなポータルまたはサービスの場合と、小さなブログまたは名刺サイトの場合の両方で等しく役立ちます。

検証-これは、標準（要件）に準拠しているかどうかのチェックです。 ウェブマスターのコンテキストでは、ウェブサイトの検証とは、コードをチェックすることを意味します。 正しさと 間違い..。 言い換えれば、理解できないタグや構造があってはならず、当然、htmlエラーがあってはなりません。

検証の影響

1.サイトの検証は、主にブラウザでのサイトの表示に影響します。 各ブラウザには、htmlコードを処理するための独自のメカニズムがあります。 レイアウトにエラーがある場合（ほとんどの場合エラーが発生します）、ブラウザー自体がエラーを排除し、サイトが正しい形式で表示されます。 しかし、ブラウザは常にそれほど機能的であるとは限らず、初期のウェブマスターはレイアウトの正確さに関してより多くの問題を抱えていました。 正しい検証は、ブラウザ間の互換性に直接影響します。

2.検証は、検索エンジンに対するサイトの信頼にも影響を与える可能性があり、したがってサイトの位置にも影響を与える可能性があります。 ただし、有効なhtmlコードが重大なランキング要素であるとは言えません。 正しいレイアウトは、物議を醸す瞬間にのみ考慮される多くの要因の1つにすぎません。

しかし、検索エンジンの場合、検索ロボットが見るのはhtmlコードだけです。 エラーがある場合、彼は単に重要になる可能性のあるいくつかの要素を誤って解釈します。 たとえば、サイトに誤ったタグがある場合

..

, （たとえば、終了タグはありません）。 検索システムブラウザのように修正することはありません。 その結果、そのようなエラーのためにサイトの位置が大きく損なわれる可能性があります。

実際の例

これは、SEOとユーザーの両方の観点から検証がサイトにどのように悪影響を与える可能性があるかの実際的な例です。 昔々、サイトの修正をしていて、誤ってタグを1つ閉じるのを忘れてしまいました

..。 人気のブラウザでリビジョンの正しさを確認した後、サイトに変更を加えました。

しばらくして、Yandex Metricaを介してトラフィックを分析していたときに、ブラウザでの平均訪問時間が気づきました。 インターネットエクスプローラはるかに少ない。 このブラウザでサイトを開いてみて、どうしたのかわかりました。 サイト全体が歪んでいて、コンテンツを読むことは単に不可能でした。 そして、これは一度に2つの問題を引き起こします。 最初の問題-私はIEからのすべてのトラフィックを失っていました、そして2番目の問題-私は行動要因を台無しにしていました。

HTMLコードの有効性についてWebサイトを確認する方法

1.オンラインhtmlバリデーター

がある 無料サービス http://validator.w3.org/。 それを通して、htmlコードの有効性がチェックされます。 このサービスの仕事をもっと詳しく考えてみましょう。

現代のトレンドとWebアプリケーションは、開発者の能力を劇的に変えました。 新しいファイルをエンコードして後で配置するために保存するには、何らかのIDEが必要であることは間違いありません。 コードスニペットをチェックするだけではどうなりますか？ 幸いなことに、私たちの時代には、これのための非常に多くの異なるツールがあります！

この記事では、オンラインコードテスト用の15のWebアプリケーションを共有します。 それらはすべてインターネット接続の条件で動作します。 それらのいくつかは、プロパティの追加パッケージのプロプランを提供しています。 それらのほとんどは、JavaScriptまたはPHPの一部を見つけてデバッグしようとするときに役立ちます。

1.コードパッド

Stephen Hazelによって作成された、Web全体で構文をコーディングできる独自のWebアプリケーションです。 デバッグに加えて、Codepadを使用すると、ユーザーは重要なコードをコピーして貼り付け、オンラインで共有できます。

出力画面には、コードに関連するエラーに関するメッセージが表示されます。 左側のメニューのボタンを使用して、言語（C / C ++、Perl、PHP、Python、Rubyなど）を変更できます。 コードパッドは開発者向けです ソフトウェア最も問題のあるプログラムを共同でデバッグする必要がある人。

2.オンラインでコードを書く

メインのWebサイトから、Javaスクリプトエディターにリダイレクトされます。 JS、PHP、ベースURLエンコードから選択できます。 アプリは安全で信頼性が高いだけでなく、非常に使いやすいです。

興味深いことに、テキストボックスのすぐ下に作業の結果が表示されます。 したがって、「コードの実行」をクリックすると、結果が表示されます。 大規模なデバッグ PHPスクリプト他のファイルを含める必要があるため、より困難になる可能性があります。

それにもかかわらず、このアプリケーションは、新しいアイデアの強度をテストする上で不可欠なヘルプを提供します。

3.ティンカービン

コードを編集するための私のお気に入りのオンラインリソースと言っても過言ではありません。 HTML5 / CSS3 / JSをサポートし、結果を直接画面に出力します。 アプリはまだアルファ版の開発中ですが、ほとんどのツールはうまく機能し、プログラムのバグをすばやく見つけます。

レンダリングエンジンは、CSS内のCoffeescriptやSassなどの言語をサポートしています。 彼らはあなたがあなたの将来の仕事のために使用したいと思う多くのウェブデザインブランドのための高度な管理システムとサポートを誇っています。

最も人気のあるオプションのホットキーがあるという事実を無視することはできません。 また、この機能は、ブラウザに組み込まれているコードエディタは言うまでもなく、すべてのWebアプリケーションに含まれているわけではありません。 新しいタグを入力すると、IDEは自動的に新しい行を挿入します。 Tinkerbinは、間違いなくWeb開発ツールの1つであるはずのフロントエンドツールです。

4.JSビン

初心者の場合、インターフェイスの操作はいくつかの問題を引き起こす可能性があります。 これを回避するために、彼らは利用することができます。 JS Binには、jQuery、jQuery UI、jQM Prototype、MooToolsなどのさまざまなライブラリが用意されています。

異なる要素をコーディングすると、プロジェクトは自動的に保存されます。 さらに、作業の最終結果をダウンロードしたり、ソースをオンラインで保存したりする機会があります。 このシステムは、通常のテンプレートよりもコードのエクスポートと保存に適しています。

5.JsFiddle

StackOverflowにアクセスしたことのある人は誰でも知っておく必要があります。 それらのインターフェースは、より多くのオプションを提供するという点でJSBinとは異なります。

PrototypeやjQueryなどのライブラリもサポートしています。 さらに、テスト対象のドキュメントにJS / CSSファイルの追加の外部ソースを含めることができます。 信じられないことに、このアプリケーションはXHP Ajaxもサポートしており、サーバーからクライアントのブラウザーウィンドウに情報を渡したり、その逆を行ったりすることができます。

6.CSSDesk

スクリプトからスタイル言語への移行と。 すべてが前のツールと同じように見えます。ソーステキストが左側にあり、最終的なWebページが右側にあります。 このWebアプリケーションは、Webページテンプレートの作成とCSS3プロパティのテストに最適です。

7.Jsdo.It

一部のアプリは日本語で書かれているので、アジアのどこかで作成されたと思います。 私が彼らのインターフェースで最も気に入っているのは、新しく作成されたファイルをロードしてプロジェクトに保存することです。 Webページのレイアウト全体をオンラインで簡単に保存し、任意のコンピューターからそれらにアクセスして編集できます。

8.Google Code Playground

多くの開発者がその存在に気づいていないことに驚きました。 あなたは得ています 全権アクセス APIに変換し、同じウィンドウですべてのコードをデバッグできます。

APIとは、Bloggerからの投稿、Googleマップからのランドマーク、さらにはYouTubeからの動画など、最大のGoogle製品からデータを取得できることを意味します。 さまざまなオプションをクリックすると、ウィンドウ内のデータ プレビューも更新されています。

このツールは、作成するすべてのものに適しているとは言えないため、リソースとしてのみ保持することをお勧めします。 ただし、Googleは多くのソースコードデータAPIを備えた大企業です。 YouTubeの資料が必要な場合、または グーグル検索エンジン、このツールは確かにあなたのために役立ちます。

9.IDEOne

-「深い」プログラミングとソフトウェア開発のための別のツール。 彼らのオンラインエディタは、Objective-C、Java、C＃、VB.NET、SQLなどの多くの重要な言語の構文強調表示をサポートしています。 博士

10.Viper7コードパッド

このWebアプリケーションは、とも呼ばれ、同じオンラインエディタにリダイレクトされるサイトにあります。 彼らのツールは出力をデバッグするように設定されています PHP変数選択に応じて、PHP5とPHP4の間で異なります。

アカウントを作成することで、Codepadをパーソナルストレージシステムとして使用できます。 ここでは、他のオンラインエディターと同様に、それぞれに電話をかけることができます PHPプロジェクトオンラインで無料で保存できます。 このコードエディタは、ユーザーが自分のコンピュータにソフトウェアをインストールする必要がないという点で異なります。 各スクリプトを解釈する際、エディターはブラウザーの呼び出しや応答ヘッダーなどの追加のメタ詳細を提供します。

11.JSLint

コードエディタは完全に標準的なスキームに従って動作しますが、それ自体は少し奇妙です。

この種のテンプレートにこれまで出会ったことがない場合、提供されるオプションは混乱を招く可能性があります。 特定のスキルのセットを使用すると、オープンソースで作業できます。 ただし、多くのソースは構文の強調表示さえサポートしていません。これは、このような幅広いオプションを考えると明らかな見落としです。 時間があれば一緒に作業することをお勧めしますが、それがお気に入りのjavascriptデバッグツールになる保証はありません。

12.SQLフィドル

以前、jsFiddleと呼ばれるWebアプリケーションを見ました。 今度は、同じように機能することについて話します。 SQLデータベース構文データ。 私はデータベースコードをテストするためのまともな代替手段を見つけることができました。

SQLコードからのすべての出力は、エディターの下の表に表示されます。 新しいコードを記述して、右側にデータを適用し、左側にスキーマを生成できます。 このデータベーススキーマは、現在のデータベースをエクスポートしてすべてを新しいサーバーに再インストールするために保存できるSQLコードです。

データベースに精通していない場合、または SQL言語その場合、このアプリケーションはあなたにとって有用ではないでしょう。 しかし、SQLの理解に関心のある開発者にとって、このツールは完璧です。

13.Cloud9 IDE

私の意見では、それはネット上で利用可能な最高のソースエディタです。 これは単なるエディターではなく、ツールとリソースのシステム全体です。 それらのサーバーには、すべてのソースコードリポジトリを保存できます。

すべてのコミュニティプロジェクトの登録は無料です。 開発前に個人用スペースが必要な場合は、月額15ドルまたは年額180ドルかかります。 プライベートコードリポジトリは、選択した任意のユーザーと共有できます。 このオプションにより、開発者は実装できます 共同作業さまざまなプロジェクトで。

新しいプロジェクトはそれぞれ、実際の物理ファイルを作成できるサブフォルダーに保存されます。 HTMl、CSS、JS、PHP、およびコーディングに必要なものはすべてアカウントに含まれます。 時間の経過とともに、これらのファイルをプロジェクト全体として送信したり、コンピューターにダウンロードしたりできるようになります。

Cloud9が提供する可能性の範囲は非常に広いです。 無料のアカウントで10〜15分見て回ることをお勧めします。そうすれば、すぐにUIの動作に夢中になります。 同社は引き続き勢いを増しているので、今後数年間で有用な新しいオプションを追加することを楽しみにしています。

14.CodeRun

動的なWebアプリケーション用のオンラインエディターです。 テキストエディタ Microsoft VisualStudioと非常によく似ています。 ASP.NETのC＃でコーディングすることもできます。 彼らのライブラリには、FacebookConnectやSilverlightなどのサードパーティのリソースが含まれています。

MicrosoftベースのWebアプリケーションに加えて、JavaScriptまたはPHPで直接コーディングできます。 CodeRunの動作方法は、Visual Studioと大差ありません。つまり、新しいWebサイトプロジェクトを作成し、個々のファイルを操作します。 画面の下部には、コンソールウィンドウからのデバッグツールと結果があります。

VisualStudioの使用経験がある場合は必須です。 インターフェースはほとんど同じで、プロジェクトファイルをコンピューターにダウンロード/アップロードすることもできます。 これは、経験豊富なWeb開発者がメモできるもう1つのツールです。

15.Compilr

テンプレートはテンプレートと非常によく似ています Windowsアプリケーション..。 あなたは一緒に働くことができます ドキュメントを開く外出先でファイルを編集します。 ただし、新しいプロジェクトの作成を開始する前に、登録する必要があります。

ページレイアウトは通常のデスクトップアプリケーションに似ているため、初心者でも簡単に操作できます。 これらのツールは、C ++、C＃、VisualBasicなどのプログラミング手法をサポートしています。 全体として、Compilrは、ソースコードをテストおよびデバッグするためのフォールバックアプリケーションである必要があります。

ついに

相互に接続されているコンピューターの数が増えるにつれて、開発者がブラウザーで共同作業することが容易になります。 新しいテクノロジーはローカルアプリケーションの一部として出現しており、これがどこまで進むかは誰にもわかりません。

うまくいけば、このコードテストツールのコレクションによって、最新の開発スペースについて考えることができます。 今日では、HTML / CSS Webプロジェクトをまとめて、短いデモビデオを入手するのに、ほんの数分で費用はかかりません。 これらのツールは、最終的な製品作成プロセスを支援するためにのみ役立つことに注意してください。