Faint: 「Web2.0 を使用して標準に準拠したページを作成する」

今日、ある人がウェブサイト開発プロジェクトについて話をしてくれました。具体的な要件について話すと、「Web2.0 を使って標準ページを作成してください」と言われました。分からないなら分からないふりをするのはやめよう、と考えてその場で気絶してしまいました。でも結局、面接を受けることにしました。しかし、彼の言葉がウェブサイトの再構築を考え直すきっかけとなりました。
Web2.0は歴史的な概念であり、段階であり、インターネットモデルですが、決して技術ではありません。Web標準は標準の集合です。その核心は、コンテンツ、構造、プレゼンテーション、動作の完全な分離です（コンテンツも自分で追加しました）。これは、将来の改訂やメンテナンスに非常に便利です。ブラウジング速度がどれだけ向上したかについては、私は同意しません。
再構築に関しては、コンテンツから始める必要があります。あらゆる改善は、コンテンツの表示を改善するためです。ではコンテンツとは何でしょうか?コンテンツは、データ、ドキュメント、画像など、ページが実際に伝えたい実際の情報である必要があります。本質的に、コンテンツは最もオリジナルなデータを指し、ページの基礎となります。
次に、ページの要点である構造について話す必要があります。構造のないコンテンツはほとんど使えないからです。意味論的に優れた構造は、コンテンツをより論理的で使いやすくします。つまり、コンテンツと構造は切り離せない一体です。おそらくこれが、標準がコンテンツの分離を明確に指摘していない理由でもあります。
構造について言えば、多くの人の頭に「レイアウトに div css を使用する」という概念が浮かびます。この意識が正しいか間違っているかは気にしません。なぜなら、私は常に物事の概念を最初に明確にしたいからです。構造は現在、2 つの部分に分かれています。1 つはセマンティック構造で、もう 1 つはコード構造です。セマンティック構造は、タグ自体のセマンティクスによって生成されます (注: セマンティクスが何であるかを完全に理解したことはありませんが、今では 1 つのことを明確にすることができます。セマンティクスには何らかの構造の概念が含まれていますが、構造と同じではなく、セマンティクスはスタイルとは関係ありません)。コード構造はプログラム指向であり、人間の参加が必要です。次に、上記の意識について私の意見を述べたいと思います。まず、「レイアウト」という言葉は登場すべきではないと思います。これはすべて IE のせいかもしれません。また、間違った概念を修正する必要があります。標準では、div css ではなく xhtml css の使用を推奨しています。これは、標準を推進している友人たちのせいです。すぐに結果を得るために学習者を混乱させてはいけません。単なる冗談です。 div と table について話しているときに、両者の違いについてお話ししたいと思います。div はセマンティックでコード構造指向であり、部分を表し、ドキュメント内の区分を定義するために使用されます。div は、区分によって XML ベースのノード構造を表示し、区分によって構造化された行を生成します。ノードと行の具体的な応用は、セクションを使用してノードを表し、行を使用して行を表す、今後の xhtml2.0 ですでに登場しています。table の焦点は、データ列の生成と表形式のデータの表示にあり、構造を分割するために使用されるべきではありません。しかし、この時点で、何人かの友人が質問したいかもしれません。表示される表形式のデータが複数の行を持つ単一の列である場合、ul/ol を使用して実現することはできないのでしょうか?もし本当にそのような疑問を抱いているのであれば、あなたは表形式データの概念を理解していないと言わざるを得ません。表形式データとは、列が拡大する傾向にあるデータのことです。したがって、列が 1 つしかなくても、列が拡大する傾向にあると予想される場合は、リストではなくテーブルを使用する必要があります。ul/ol の焦点はデータの生成にあるためです。この 2 つを正しく把握して適用する鍵は、将来のページ構造を予測できるかどうかにかかっています。
少し話がそれるのでこれ以上はやめておきます。構造に戻りましょう。デザインによって与えられたレンダリングに基づいて、始める前にすべての要素を考慮し、共通の構造を使用して同じ効果を達成するように努めるべきであり、それらの小さなdivユニットを絶えず定義するのではなく、デザインで最も理想的な状態を達成するように努めます。フロントデスクは、バックデスクがどのようなxhtml構造コードを出力するかを目を閉じて知ることができます。この目的のために、xhtmlを修正する必要があります。具体的な実装方法は、Hシリーズを使用してページの大きな構造を分割し、divを使用してローカル領域をモジュール化することです。
部品をモジュール化する場合、XHTML では意味のある専用要素だけでは不十分な場合があり、XML のように独自の要素を作成することはできないため、ID やクラスを追加して追加の意味を持たせる必要があります。簡単に言えば、2 つの違いは、id は最初に構造/コンテンツを見つけて、そのスタイルを定義するのに対し、class は最初にスタイルを定義し、それを複数の構造/コンテンツに適用することです。具体的に言うと、XHTML の構造では、大きな構造、特に周辺要素では id をできるだけ使用し、構造内では class をできるだけ使用して普遍性を持たせるのが科学的方法ですが、class に id を含めないのがベストです。両者の関係は親子関係に少し似ていますが、決して父と息子、祖父と孫の関係として理解されるべきではありません。
パフォーマンスや動作についてはあまり言及したくありません。ただ簡単に説明すると、スタイルが追加されていない純粋な XHTML 構造には UE がありますが UI がないため、CSS が XHTML のコアポジションを超えることは不可能です。もちろん、パフォーマンスが重要ではないと言っているわけではありません。個人的には、味付けのないバーベキューやアートのない映画は魅力的ではないからです。 JavaScript に関しては、Ajax に慣れて理解するにつれて、その特殊効果の素晴らしさがますますわかるようになります。ただし、動作レベルでは、JavaScript は CSS と組み合わせて使用されることが多く、CSS を学習するときに別のタスクが発生します。
オリジナルリンク: http://blog.5u96.cn/article.asp?id=30

<<: スライダー検証コードを実装するJavaScript

>>: マージンのマージの問題を解決する