Web標準を使用して任意のデバイス用のサイトを構築する方法

開示: あなたのサポートはサイトの運営を維持するのに役立ちます!このページで推奨する一部のサービスについては、紹介料を稼ぎます.


Tim Berners-Leeが最初にINQUIRE(Webの前身)を作成したとき、彼はすべての人が自由に移動できる情報スーパーハイウェイのビジョンを持っていました。まだ初期の段階で、ワールドワイドウェブは情報、コミュニティ、そしてもちろんビジネスチャンスへの自由なアクセスを約束しました。しかし、ウェブが徐々に形を整えているため、その自由は内部から脅かされているように見え、今日私たちが楽しんでいるインターネットは独自の可能性の下で崩壊する可能性がかなりありました.

W3CとWeb標準プロジェクト

Webが世界に導入されて間もなく、NetscapeとMicrosoft(ソフトウェア開発の主要な2つ)は着実に拡大するブラウザ戦争を始めました。他の企業をしのぐために、各企業は、基盤となるソフトウェアに新しい要素を導入し、オンラインコンテンツを取得して処理する新しい方法を設計していました。その結果、2つの競合するブラウザーが次第に互換性を失っていました。これは、自由なインターネットの夢を複雑な悪夢に変える可能性があり、ウェブサイトの設計と開発のコストを押し上げながら、ユーザーがあらゆる種類のオンラインコンテンツにアクセスすることを事実上拒否しました。.

進行中のブラウザ戦争とインターネットプロジェクトの潜在的な破壊に対応して、バーナーズリーはWorld Wide Web Consortium(W3C)を設立しました。その仕事は、インターネット用に広く受け入れられている一連のプロトコルとガイドラインを作成することでした。これらは、将来のプログラマーとソフトウェア開発者の作業を導くルールブックとなり、インターネットの継続的な成長とアクセシビリティを確実にするでしょう。.

1998年、Webデザイナーと開発者の独立したグループがWeb Standards Project(WaSP)を設立しました。その使命は、W3Cのベストプラクティスのリストを洗練して宣伝し、ブラウザ戦争を一度に終わらせることでした。 WaSPは成功し、自由に移動できる情報ハイウェイのビジョンが大体実現しました。今日、WaSPはインターネットを無料でオープンで、すべての人がアクセスできるようにする努力を続けています。.

Web標準の重要性

Web Standards Projectとそれらが推進するガイドラインの重要性を過大評価することは難しいでしょう。インターネットがその完全な可能性を実現するためには、いくつかの一般的な原則によって導かれる必要があります。これらの「ウェブ標準」は一連の基本的なものであり、インターネットのコンテンツを作成して普及させるための普遍的なガイドラインであることが望まれます。これらのWeb標準の必要性は明らかであり、プログラミングとWebデザインのいくつかの重要な側面に対応しています.

  • 効率的なコード— Web標準は、Webデザインに効率的なコーディングをもたらします。すべてのプログラミングがHTMLに限定されていた場合、結果としてファイルが肥大化し、必要以上のダウンロード時間を必要とする不合理なファイルになります。これは、ユーザーのオンラインエクスペリエンスに影響を与えるだけでなく、ダウンロードにメガバイト単位で支払うユーザーのオンラインコンテンツへのアクセスコストを実際に増加させる可能性があります.
  • コーディングの互換性— Webページ、アドオン、ソフトウェアアプリケーションのいずれであっても、プログラミングのほとんどすべての部分がさまざまな設計者の手に渡ります。受け入れられたコーディング標準があることで、すべてのプログラマが同じ「言語」を話すことが保証され、作成者に関係なく、コードは合理化され、効率的です。.
  • メンテナンスの簡素化—これは、標準化されたコーディング手法の価値をさらにサポートします。リーンで効率的なコードは、更新と保守が簡単でコストもかかりません。スタイルとレイアウトの情報が1か所(つまりCSS要素)で指定されているため、更新をアクティブなサイトのすべてのページに適用する必要はありません。.
  • デバイスの互換性— Web標準に準拠しているため、さまざまなブラウザーやデバイスに合わせてオンラインコンテンツを迅速かつ効率的に再フォーマットできます。モバイルデバイスがオンラインユーザーの間で非常に人気になった今、これは特に重要です.
  • 検索エンジンの互換性—すべてのWeb開発者は、オンラインコンテンツをGoogleや他の検索エンジンで簡単に検索できるようにしたいと考えています。検索エンジンがユーザー検索で関連コンテンツをランク付けして返すには、そのコンテンツをWebクローラーでスキャンする必要があります。そのWebクローラーがコンテンツを解釈できない場合、ランキングは当然低下します。 W3Cによって定められた承認済みの標準に従うことにより、開発者は、作成したコンテンツが検索エンジンボットによって迅速かつ正確にスキャンされることをより簡単に保証できます。.
  • アクセシビリティ—最後に、Web標準は視覚障害者のアクセシビリティの問題にも対処します。視覚障害を持つユーザーは、多くの場合、スクリーンリーダーを使用してWeb上のコンテンツにアクセスします。これらの読者は文字通りWebページを読み上げます。セマンティック構造を規定する承認済みのWeb標準に準拠することで、オンラインコンテンツを簡単に解読できるようになり、視覚障害者がWebを開いてアクセスできるようになります。これは、法律に成文化されたWeb標準プロジェクトの数少ない側面の1つです。.

W3C標準

WaSPはさまざまな問題に対処しますが、W3Cによって最初に定められた主要なガイドラインは、ウェブ標準のルールブックのコアとして広く受け入れられています。これらは、インターネットの継続的な成長とアクセシビリティが依存する基盤を形成し、いくつかの基本的なトピックに分類できます.

  • マークアップ言語 テキスト自体とは別の情報をドキュメントに追加するシステムです。 Web標準ガイドラインは、HTMLとその後続のバリエーション(HTML5とXHTMLを含む)の使用を管理します。マークアップ言語として、HTMLバリアントは、オンラインドキュメントのさまざまなタイプのコンテンツを変更するために使用されます。これらの言語を構成する要素は、コンテンツの各ビットをWebブラウザーでレンダリングする方法(つまり、見出し、段落、箇条書きリストなど)を指定します。基本的なマークアップ要素は実際のコンテンツを定義しますが、追加の属性を使用すると、そのコンテンツに関するより具体的な情報が提供されます.
  • HTML (ハイパーテキストマークアップ言語)は、最も古いWebコーディング言語です。そのため、Web開発者が使用する最も一般的なマークアップ言語であり、すべてのオンラインコンテンツの重要な部分を形成しています。 HTMLの使用は、かなり効率的ではありますが、かなり緩やかな一連の構文規則によって管理されます。要素では大文字と小文字が区別されず、終了タグは厳密に規定されておらず、特定の属性にショートカットを使用できます。基本的なHTMLは長年標準でしたが、HTML 2.0やHTML 3.0など、いくつかの改訂が行われました。最新のイテレーションはHTML5です.
  • HTML5 基本的なHTMLマークアップ言語の最新版です。以前のバージョンの一部の要素を破棄する一方で、いくつかの新しいルールと機能を導入しています。 HTML5は、新しいセマンティック要素とコントロール属性、およびドラッグアンドドロップ機能、ジオロケーション、およびCookieの使用を排除するローカルストレージをサポートするいくつかのアプリケーションプログラミングインターフェイス(API)を導入しました.
  • XHTML eXtensible HyperText Markup Languageの略です。 HTMLの構造属性とXMLアプリケーションの機能を組み合わせます。 XHTMLは通常、モバイルデバイスとの互換性のためにオンラインコンテンツを再処理する必要がある場合や、ブラウザのデザインが範囲外の場合に使用されます。 XML要素の追加により、コンテンツを標準のHTMLよりも迅速かつ簡単に再処理できます。 XHTMLは、言語に対してより厳密な意味規則ももたらします。 XHTMLの要素と属性は大文字と小文字が区別され、すべての要素を閉じ、属性値を引用符で囲む必要があります.
  • CSS (カスケードスタイルシート)は、オンラインコンテンツの外観または位置の変更をドキュメントのHTMLまたはXHTML要素に割り当てることができるメカニズムを提供します。 CSSを使用すると、Webサイトの全体的な外観が定義され、Webサイトを迅速かつ効率的に再構築できます。つまり、CSSを使用すると、Web開発者はドキュメントのフォーマットとレイアウトをより巧みに制御できます。これにより、Web開発者は、背景の変更、フォントとテキストのサイズの変更、およびWebページ上のコンテンツの再配置を簡単に行うことができます。これの多くは基本的なHTMLで可能ですが、CSSを使用すると、プログラマーやWeb開発者は、より効率的で効率的なコードに支えられたコンテンツを作成できます。.
  • JavaScript オブジェクト指向のスクリプト言語です。主にWebページに動作を追加するために使用されます。フォーム上のデータの検証、ドラッグアンドドロップ機能の提供、ボタン機能の有効化、ページ要素のアニメーション化に使用できます。 JavaScriptは、Webページをよりインタラクティブにするのに役立ち、マウスクリック、ページナビゲーション、入力された検索などのユーザーイベントにより正確に応答できるようにします。.

これらは、W3CとWeb Standards Projectによって規定されたプログラミングとWebデザインの基本です。単なる「ベストプラクティス」のセットではなく、それらの使用を順守することで、World Wide Webの継続的な開発と拡張が保証されます。.

オンラインチュートリアル

Web標準プロジェクト、およびW3Cが成文化したガイドラインは、研究のための豊富な分野を提供します。 Web標準の紹介として役立つオンラインチュートリアルが多数あり、最新のソフトウェア開発とWebデザインにとっての重要性.

  • Web標準が必要な理由:この標準ビデオは、Jeffrey Zeldman(Web標準プロジェクトの共同創設者の1人)が作成したもので、Web標準のコンセプトと、成長し、オープンなインターネットに欠かせない理由を簡単に紹介しています。 ZeldmanはWeb標準の詳細については詳しく説明していませんが、このビデオは、このテーマに関心のある人にとって有益な出発点になります.
  • Web標準と開発:ワシントン大学によって準備されたこのチュートリアルは、プログラミングとWebデザインのためのWeb標準の技術的応用に焦点を当てています。このチュートリアルでは、HTML、XHTML、XML、CSSの適切な使用法を検証し、Web Standard Projectで設定されたベストプラクティスを示す演習と例を示します。.
  • アクセス可能なHTML / XHTMLフォーム:このチュートリアルは、Web標準プロジェクトから直接提供されます。スクリーンリーダーや点字コンピュータと互換性のあるWebコンテンツの設計と開発におけるHTMLとXHTMLの使用を調べます。多くの国でWebアクセシビリティが法に体系化されている今、これはすべてのWeb開発者にとって不可欠な読み物です.
  • HTMLとXHTMLの共通の考え方:繰り返しますが、これはWeb標準プロジェクトから直接来ています。このチュートリアルでは、HTMLの進化と、基本的なHTMLとXHTMLの違いについて説明します.
  • Web標準とWebサイトの品質を実現する方法:このガイドはW3Cによって作成され、Web標準のすべての基本的な懸念と、それらが高品質のWebサイトの設計にどのように適用されるかについて説明しています。この記事では、HTML、XHTML、およびCSSについて説明します。 Web標準プロジェクトの承認された標準を満たしていることを確認するためにWebサイトのコンテンツを検証するために使用できるベストプラクティスとツールについて議論する.

オンラインチュートリアルは、Web標準の一般的な概要を提供できますが、Webデザインおよびソフトウェア開発の受け入れられたプロトコルに精通することを希望する人は、主題をさらに調査したいと思うでしょう。次の本は、Web開発者と一般の両方にとって貴重なリソースです。.

  • ZeldmanとMarcotteによるDesigning with Web Standards(2009):Jeffrey ZeldmanはWeb Standards Projectの共同創設者であり、ここではWeb標準とそのWebデザインへの応用に関する決定的な成果の1つを提供しています。 ZeldmanとMarcotteは、魅力的で理解しやすいスタイルで記述されており、Web標準の重要性、WebデザインにおけるHTML5とCSS3の適用、および標準準拠のWebサイト向けのオーサリングテクニックについて、より速く読み込まれ、より完全に実現されたユーザーエクスペリエンスを提供します。.
  • CSS Mastery:Collinson et alによるAdvanced Web Standards Solutions(2009):中級および上級のWebデザイナーを主な対象とするこの本では、最新のWebデザインにおけるカスケードスタイルシートの役割と、Web標準への準拠にベストプラクティスを適用する方法について説明しています。この本には、CSS3を効果的に使用する方法の多数の例と、CSS関連の多くの設計問題を特定して修正する方法に関するガイドが含まれています.
  • Web Accessibility:Web Standards and Regulatory Compliance(2006)by Rutter et al:Recommended by the Web Standards Project、この本は、ウェブ開発者の法的義務を調べ、視覚障害を持つユーザーがコンテンツに完全にアクセスできるようにします。著者は、コンプライアンスの道徳的側面と法的側面の両方を検討し、コーディング例を提供して、ベストプラクティスを説明します.
  • Jennifer NiederstによるWeb Design in a Nutshell(2006):このデスクトップリファレンスは、プログラマーとソフトウェア開発者に便利なガイドを提供します。 Niederstは、Webデザインのベストプラクティスと、インターネットの初期からどのように変わったかについて説明します。トピックは、基本的なHTML構造から、強化されたプレゼンテーションと動作のためのCSSやJavaScriptの組み込みにまで及びます.
  • JavaScript:Visual QuickStart Guide(2014)by Smith and Negrino:この本は、標準に準拠したブラウザーのWebデザインにおけるJavaScriptの役割を取り上げています。スクリーンショットと詳細な例を使用して、著者はJavaScriptをW3Cの基準を満たすWebデザインプロジェクトに組み込む際の初心者および中級のスクリプト作成者向けの簡単なガイドを提供します。.

概要

自由でオープンなインターネットは、明確に定義された一連のプロトコルと、ウェブの設計と開発のためのガイドラインを採用しなければ実現できません。これらの広く受け入れられているWeb標準は、単なる一連のベストプラクティスではなく、Webデザイナーが高速で効果的なユーザーフレンドリーなWebコンテンツを作成するのに役立ち、そのコンテンツが検索エンジンやWebサーファーによって簡単に検索できるようにします。 W3Cのウェブ標準は優れたウェブデザインの基盤であり、その継続的な改良により、インターネットは自由でオープンであり、すべての人がアクセスできることを保証します。.

参考資料とリソース

Webのコーディングに関連するガイド、チュートリアル、およびインフォグラフィックが他にもあります。

  • JavaScript入門:Webページをよりインタラクティブにするこのクライアント側言語のすべてを学ぶ.
  • 初心者向けHTML —究極のガイド:Web開発者になりたい場合は、ここから始めてください.
  • CSS —イントロ、ガイド、リソース:Webページのレイアウトについてすべて学びます.

忘れられないWebデザインのトレンド

私たちがウェブ標準を持っているからといって、ウェブサイトが常に魅力的であるように見えるとは限りません。インフォグラフィックのWebデザイントレンドでは、人々が素晴らしいと思っていた古いデザインをいくつか紹介しています。.

忘れられないWebデザインのトレンド
忘れられないWebデザインのトレンド

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map