HTML から始めて情報を学ぶアーキテクチャ_html/css_WEB-ITnose

WBOY
リリース: 2016-06-21 08:57:48
オリジナル
1316 人が閲覧しました

【記事概要】 情報アーキテクチャを理解していなければ、インタラクションデザインに関しては常に素人のままかもしれません。 Hyper Text Markup Language は、シンプルかつ柔軟な情報記述です。これを学習して使用することで、抽象的思考と構造的思考を確立し、画面インタラクションの本質を統合できるだけでなく、モーション エフェクト/フロントエンド エンジニアとの関係を確立することもできます。コミュニケーションの利点はまさにこれです。

勤勉は勤勉につながり、無駄は遊びから生まれます。学習は常に自分自身の仕事です。この記事は HTML の学習方法に関するものではなく、HTML の重要性を理解するのに役立つものです。

マークアップ言語ファミリーについて知る

ティム・バーナーズ・リーは 1990 年に世界初の Web サイトを作成し、そこから World Wide Web が誕生しました (インターネットとワールドワイドウェブですか? 3 分間の沈黙を守ってください。)ハイパーテキスト マークアップ HTML はティムの発明ではありませんが、マークアップ言語の大規模なファミリーから分離したものです。

GML はマークアップ言語の祖先であり、SGML、MathML、(x)HTML、XML、WML、SVG およびその他の子孫を生み出し、XForms を生み出しました。 、XPath、XQuery、SOAP、PDF、およびその他のサブタイプ (リストするには多すぎないため、Wiki を参照してください) とにかく、ほぼすべてのコーディング プロトコルは、モノのインターネット、スマート ホーム、スマート トランスポートに関連しています。 ...すべてマークアップ言語を使用します。

HTML は情報アーキテクチャの記述 (エンコード) です

『「情報」がわからないなら、「アーキテクチャ」の話はやめなさい』を読んだ人は、次のことを覚えておく必要があります。パッセージ:

言語は特別な媒体です。一般に、「言語と文字を使用すると、あらゆるものを正確に説明できます。」説明が不明確な場合、人間はそれを説明するために新しい言葉を作成します。

ハイパーテキスト マークアップ言語 HTML は、画像、マルチメディア、サウンド、その他のテキスト以外のコンテンツ (「テキストだけ」を超えたものであるため、ハイパーテキストと呼ばれます) を挿入できるように人間によって作成された言語です。この言語は「何でも記述できる」のです。この言語エンコーディングを読み取ることができる役割は、ライターとブラウザーの 2 種類です。

HTML は、「情報アーキテクチャを記述する」ために設計された抽象テキストです。

例:

HTML 宣言 "これには馬の絵があります" (抽象);

ブラウザは宣言を理解し、実際に馬を表示します (インスタンス化)。

HTML を通じてセマンティクスを深く理解

情報アーキテクチャの学習に最大の助けとなります。 ! !

DIV+CSS という用語に非常に嫌悪感を抱きます。その大雑把な説明は、「デザイナー」を「アーティスト」と呼び、「シェフ」を「料理人」と呼ぶなど、[セマンティクス] の重要な概念を完全に放棄しています。 、「運用と保守」を「ネットワーク管理」と呼んでいます...

実際、各 HTML タグには独自のセマンティクスがあります。例:

リスト

これらのタグ/属性の意味を理解していれば、基本的なセマンティクスをマスターできます (HTML 作成者もタグの意味を理解している場合):

< ;p>この記事で、ホジンは「熟練は勤勉から生まれ、浪費は遊びから生まれる。」韓愈の『金雪傑』について言及した。アーキテクチャIA を整理する正しい方法。

  1. 要件から概念を抽象化し、概念を具体化します。
  2. 情報アーキテクチャを強化するために属性と属性を変更する方法をリストします。

は、おおよそ次のように中国語の意味に翻訳されます。

この記事では、Hozin が < について言及しました。 Quote>「最高の仕事は勤勉から生まれ、無駄は遊びから生まれる。」韓国瑜の『晋雪傑』情報アーキテクチャについて解説<略称title="情報「アーキテクチャ」>IAを整理する正しい方法。 <順序付きリスト><リスト項目> 要件から概念を抽象化し、概念を具体化します。

DOM はコンテキスト関係です

多くの人は、書籍「Web 情報アーキテクチャ」で言及されている内容を理解していません。 (これはプログラム開発におけるコンテキストと同じ概念ではありません); DOM ドキュメント オブジェクト モデルが何であるかを理解し、HTML から DOM ビューを抽出できれば、基本的にコンテキストを理解できます。

たとえば、上記の例の DOM は大まかに次のとおりです。

シソーラスの具体的な使用法

制御された語彙とシソーラスは、いくつかの特定の固有名詞です。それらの定義と等価関係を記録することで、秩序正しく組織化された用語ネットワーク (DOM と同様) を形成します。

などの HTML のフレーズ要素は、検索パターンの学習にも非常に役立ちます。

DTD 構文ルールは、HTML タグで構成されるシソーラスです。

フォームの設計はもう難しくありません

HTML には、フォーム用の多数のプリセット タグが組み込まれています。これらに慣れていて使用できる場合は、便利です。 Web 側の場合、インタラクション デザインに関しては、半分の労力で 2 倍の結果が得られます。

次のタグ/属性は、フォームの相互作用を理解するのに非常に役立ちます:

HTML に熟達している必要はありません

フロントエンドエンジニアは注目の職業ですが、HTML+CSS だけでなく、JS ベースのさまざまなスクリプト言語も使用する必要があります。HTML にはコンピューティング機能がなく、学習が非常に簡単です。インタラクション デザイナーにとって、多数の一般的なタグは家族と同じくらい馴染みがあり、理解し、覚え、手書きで書くことができます。CSS のような遠い親戚であれば、使い慣れていれば十分です。

モバイル インタラクション デザイナーも HTML を学ぶ必要があります

画面ベースのインタラクションである限り、HTML は思考モードのトレーニングとして非常に役立ちます。また、ほとんどのモバイル開発者は HTML にも精通しています。Android および IOS のコントロール開発構文は HTML に似ており、コミュニケーションに非常に役立ちます。

H5 をカプセル化する方法が今後数年間でネイティブ APP に取って代わるかどうかは誰も保証できません。自分のアートについてストレスを感じず、どんな災害にも備えてください。当時 Flash AS を開発したエンジニアのことを思い出してください。

HTML5 を学ぶ必要はありません

HTML5 は HTML の単なる主流バージョンであり、まったく神秘的なものではありません (最新のテクノロジーではなく、N 年前に存在していました)。 H5 は以前のバージョンをベースとしており、一部の構文が緩和されており、情報アーキテクチャを理解するという観点から、HTML5 を学ぶ必要はありません。

モーション デザイナーやフロントエンド エンジニアとシームレスにコミュニケーション

ドキュメントを書くときでも、対面でのインタビューを行うときでも、開発用語を使用すると、エンジニアはほぼ瞬時に理解します。 !

この記事は Product 100 によって推奨され、紹介されています

記事の出典: WeChat 公開アカウント: Hozin

記事の著者: Honjin

友情のヒント:

出典が間違ってマークされている場合は、タイムリーに修正するために QQ: 2977686517 にご連絡ください。ご理解とご支援をお願いいたします。

公式 Weibo @product100 と WeChat 購読アカウント chanpin100ghsd をフォローしてください。サプライズがあるでしょう!

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート