中国におけるWEB標準の継続的な普及に伴い、その影響により、構造的なパフォーマンス動作の分離、モジュール化、セマンティクス、エレガントな劣化などの概念も、フロントエンドスタッフのWEB標準に対する理解を評価するための重要な項目となっています。 SEO の背後にある商業的価値の中で、「セマンティゼーション」は大きな注目を集めています。新人フロントエンド ワーカーとして、私はかつて「セマンティゼーション」とは、検索エンジンにとって最も有益なタグを使用して HTML 構造を整理する方法だと単純に信じていました。重さ。
多くのフロントエンドの本や先人の論文を読んだ後、私は自分の意識の浅さを実感し始め、徐々に「意味化」の価値に気づきました。以下の内容は、日々の生活における個人的な実践の要約にすぎません。これは、複数の先輩の意見を集め、さらに先を見据えるために巨人の肩の上に立っています。
「セマンティック」とは何ですか
「セマンティック」とは、人間の介入を少なくして情報を調査および収集する機械の能力を指し、Web ページを機械が理解できるようにし、最終的には人間に利益をもたらします。具体的には、BI フォーラムのネチズンからの一般的な説明を借りると、「セマンティックとは、ガールフレンドを普通の友達として扱わないことを意味します。」は、単純な XML フォームの例です。
しかし、CSS 制御を使用すると、プレゼンテーション層だけに着目すると、ラベルは CSS と JS が処理するために提供される単なる「フック」にすぎません。依然として「意味化」を重視していますが、これについては以下で詳しく説明します。
意味論的な意味
1.検索エンジン
検索エンジンの最適化については、Hx の重みや隠しテキストなどについてすでに多くの先輩方が詳しく解説していますので、ここでは詳しく説明しません。少し前に、Wolfram (http://www.wolframalpha) というソフトウェアが登場しました。 .com/) の検索エンジンは、Google が各 Web サイトの PR 値に基づいて検索結果を並べ替えることがわかっており、Wolfram はユーザーの入力内容を「理解する」と主張しています。 . という前提で判断してください 「エイドリアンは誰か」と入力すると、結果はあまり正確ではありませんでしたが、Wolfram はこのようなフィードバックをくれました。
フロントエンドの仕事に関連して、私たちが賞賛する「セマンティクス」とは、コンピューターにコンテンツを理解させることだけではないでしょうか?この <頭字語タイトル="世界自然保護基金">WWF</頭字語> のような単純な例を使用すると、コンピューターは、WWF が世界水フォーラムではなく世界自然保護基金であることを理解できますが、それを完全に理解するのは非現実的です。はい、Wolfram のような検索エンジンは短命かもしれませんが、世界の知識を計算可能にするという彼らが追求するビジョンは、確かに私たちが追求する価値があります。
2.ユーザーエクスペリエンス
まず例を見てみましょう。以下は Dangdang.com (https://login.dangdang.com/Register.aspx) のユーザー登録フォームであり、XHTML 構造の一部がインターセプトされています。
<span class="span_n">Set Nickname:</span> を <label class="span_n" for="txtNickName">Set Nickname:</label> に変更するとどうなるかを実験してみましょう。
マウスで「ニックネームの設定」をクリックすると、ID 名「txtNickName」のテキスト入力ボックスが自動的にフォーカスされます。ラベル label 自体の定義は、コントロール (http://www. w3school.com.cn/tags/tag_label.asp)、すべての主流ブラウザは基本的に同じラベルをサポートしています。CCS フォレスト グループのヒーローによるテストの結果、ブラウザのフォーム コントロール自体は非常に完成度の高い対話型コントロールです。音声コントロール操作にも非常に効果的です。
Dangdang.com も同様で、ホームページ上の製品リストはまだ小さな XHTML コードです
インターセプトされたコードは価格部分です。クラスの名前は関係なく、「span class="del grey s10""￥94.00 "/span」を「del class="del grey s10" date=」に変更して実験してみましょう。 ” cite=””》￥94.00《/del》《ins》￥46.00《/ins》, 見た目の変化はありませんが、裸でページを走り回ると。
結果は明らかです。フロントエンド ワーカーとしては、ユーザーのインターネット速度が遅すぎる可能性がある (おそらく、ユーザーは Thunder BT を使用している) ため、CSS をロードできなくなることや、携帯電話の状況も考慮する必要があります。さらに、HTML の基本的な知識を追加するだけで、コンテンツを WORD 2007 にコピーできます。
abbr タグの alt 属性やスクリーン リーダーの img タグの重要性もありますが、条件がそれを許可していないため、私はそれを直接体験することはできません。政府のウェブサイトで障害のある人々が軽視されないように保護します。
3. 開発効率
セマンティックリッチな Web ページ構造は、初期の開発とその後のバグ修正に大きな影響を与えます。具体的には、次の単純な製品リストのコードのようなものです。
「セマンティック」タグを通じて、製品リストの「フック」が強化され、親レイヤーに ID とクラスの名前を追加することで、理想的な条件下で製品リストの全体的なパフォーマンスを制御できます。しかし、現実に戻って、製品や上司のさまざまなニーズに直面すると、CSS を変更するだけでスタイルを完全に変えることはまだ現実的ではありません。ニーズやバグを考慮すると、開発の初期段階でページの「フック」を合理的に確保し、後の変更や使用を容易にすることが最善の方法です。現時点では、リッチ セマンティック タグが非常に実用的です。
チームのコラボレーションでは、セマンティック ID とクラスの名前付けにより、チームの全員に構造を明確にすることができます。要件の変更により、クラスが赤のラベルが青に変更されたと想像するだけで、セマンティックな名前付けが必要な理由が理解できます。
これまでのラスタライゼーションとフレームワークに関する議論では、命名規則について考えてきました。以下は命名方法についてのみ説明しており、他の要素の影響は含まれていません。最近、私は完全なレイアウトに触れるようになりました。初めてこの仕様に接したとき、誰もが私と同じように、「area_01」、「layout_01」などの名前にめまいを感じたと思います。チームが現在引き継いでいるプロジェクトの規模が大きいため、この方法が適切かどうかはわかりませんが、1 つ確かなことは、これにより新しい人材の学習コストが増加することです。将来の開発のためには、この方法が適切だと思います。結局のところ、その目的は、チームの開発効率を向上させ、競合を減らすことでもあります。これは、YUI、Blueprint、および 960 Grid System が生まれた方法だと思います。推測ですが、将来的にそれが裏付けられることを願っています。
4. 業界標準
同様に、1,000 人のフロントエンドで、同じパフォーマンスで異なる構造の 1,000 個のページを作成することもできます。これは、CSS を通じてあらゆる側面をいじることができます。 HTML タグのセマンティクスが欠如しているため、この部分の問題はある程度解決されます。さらなる理由は、Gui Ge 氏が「素人は扉を見、専門家は興奮を見る」と述べたように、フロントエンドの作業にあると思います。この業界に変化をもたらしたいのであれば、専門性は必須です。つまり、開発を考えていないのであれば、「意味論化」の問題を議論する必要はありません。
「意味論化」の目標は、統一された標準を達成することです。「将来のインターネットはオープンなインターネットでなければなりません。データが妨げられずに流れることができず、マイクロフォーマットが多数存在するようなものではありません。」グッド プラクティス、オープン インターフェイス、および共有コンテンツについては、以下で詳しく説明します。
意味論的実践
上記の内容には実践的な内容がほとんど散りばめられていますが、ここでは概要を紹介します。
1.文書構成
「意味化」する最も簡単な方法は、構造から始めて、コンテンツの意味に最もよく一致するタグを選択し、「HTML および XHTML の権威ガイド」をもう一度見直して、単なるコンテンツの意味ではなく、コンテンツの意味についてさらに考えることです。ページのレンダリングに基づいて判断します。合理的なセマンティクスを追求するために、単純な効果を確認するには、実装が容易ではない解決策を選択する必要があることがよくあります。これはフロントエンドワーカーの WEB 標準に対する良心でもあり、バランスの取れた選択を行う方法も非常に深い知識だと思います (http://realazy.org/blog/2009/06)。 /29/エンジニア vs 科学者/)。
制作前段階では、将来の状況を考慮し、コンテンツのセマンティクスに基づいてページのフックを予約することもできます。もちろん、プロジェクトのさまざまな要件に応じて、特定の問題を詳細に分析する必要があります。たとえば、プロモーション用の特別ページの場合は、会議の基本的な前提の下で、後で調整する必要が少ないため、採用される開発は柔軟で適応的である必要があります。ユーザビリティとアクセシビリティを重視する場合、開発はデザインドラフトの効果を復元することに重点を置いた開発を採用する必要がありますが、大規模な Web サイトの効果については、要件が明らかに異なります。
2.命名規則
ID とクラスの標準的な命名スキームは、コンテンツの意味に従って命名することが一般的な原則です。インターネットから画像を借用してみましょう。
サイドバーの位置を変更したい場合は、Web ページの構造を変更せずに CSS を変更するだけで済みます。頻繁に発生するページ モジュールについては、ヘッダー/フッターなど、開発プロセス中に徐々に独自の命名規則を形成することを個人的にお勧めします。 /main/hd/bd /nav/box/mode などは、ハイフン「-」またはキャメルケースを使用して、site-nav/quick-menu/secondaryContent/ などのより複雑な名前を形成します。
しかし、特定の状況に戻ると、さまざまなプロジェクトでも、特定の状況に応じてさまざまな名前付けルールを選択する必要があります。淘宝網などの大規模な Web サイトでは、ラスター化とセマンティックな名前付けを組み合わせて使用するのが適しています。ページの場合、スタイルの変更により、対応する調整を迅速かつ機敏に行うことができます。ほとんどの宣言タイプの単一ページでは、ページ作成者が迅速かつ簡単にページを完成させることができます。ネーミングを考えるのに時間を費やすよりも、
3. マイクロフォーマット
Microformat は、標準 XHTML コードに構造化データを埋め込む新しい方法です。簡単に言えば、確立されたクラス命名標準のセットを使用してドキュメントのコンテンツを宣言します。ほとんどの人は、hCard から理解します。これは、James Oppenheim によってフッターに適用された hCard の簡単な例です。
このうち、vcard url fn Given-name Given-name adr localityregion クラス名はすべて、マイクロ形式をフォーマットするために生成されます。また、クラス名を追加するためにいくつかの spam タグが追加されていることにも注意してください。それでは、マイクロフォーマットの重要性は何でしょうか? Firefox の Operator プラグインを使用して、履歴書 (http://adriancheng.name/resume.html) から名刺をエクスポートしました。
エクスポートされた vcf を連絡先情報としてさまざまな電子メール クライアントにインポートしたり、携帯電話のアドレス帳 (http://tommyfan.com/blog/skill/add_phone_from_hcard/) にインポートしたりすることができます。これはマイクロフォーマットを通じて確認できます。現時点でのマイクロフォーマットの役割は、Web ページの API と同様であり、他のフォーマット標準にも対応できます。詳細については、http://microformats.org/ をご覧ください。
結論
「意味化」の実践は非常にシンプルであり、フロントエンドの最も基本的な部分であると言えますが、さまざまな理由により、これまで十分に注目されてこなかったのです。この記事は私のこれまでの学びの蓄積を整理するものであり、読者の皆様が WEB 標準について考えるきっかけになれば幸いです。