Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。

[html5]①HTML5の特徴、代表的な機能

html5
  • HTML5の特徴、代表的な機能
  • マークアップに関する機能
    • 構造化要素
    • フォーム要素
    • マルチメディア要素
    • Canvas機能
    • ドラッグ&ドロップ
    • オフライン機能
    • クロスドキュメント通信機能
  • アプリケーション開発のためのAPI
    • Web Strage
    • Web Socket
    • Indexed DB
    • Geolocation API
    • File API
  • CSS3機能
  • 既存機能

HTML5の特徴と代表的な機能

  • HTML4.01で定義されているHTMLの仕様を継承
  • 誰にでも簡単に情報が配信できる仕組み
  • ブラウザのみで色々処理できるWebシステムを開発できる

マークアップに関する機能

構造化要素
  • これまでのHTML以上に、文書構造がより体系的になるよう要素が追加
  • 検索エンジンの精度を上げる
  • リスティング広告(検索結果に連動表示される広告)のサイトへの配信がより的確になる
フォーム要素
  • フォーム作成時にメールアドレスを、電話番号など専用の属性が追加
  • 数値や日付などの入力欄に制御
  • 入力サポート機能や入力値のチェックなどもマークアップで対応
マルチメディア要素
Canvas機能
ドラッグ&ドロップ
  • Webページ内で要素を移動、ファイルをアップロードできる
  • File APIと併用して
オフライン機能
  • オフラインでWebページを閲覧、Webアプリケーションを動作
  • ローカルにキャッシュしたリソースを使用しWebアプリケーションを動かせる
クロスドキュメント通信機能
  • 異なるウインドウ（フレーム）間でメッセージの送受信ができる
  • いままではJavaScriptなどを使って異なるドメイン間でメッセージの送受信はできなかった
  • クロスドキュメント機能を使うと別のドメインに対してリクエストを送信したりデータのやり取りが可能になる

アプリケーション開発のためのAPI

  • API…アプリケーション・プログラム・インターフェイス
  • あるコンピュータプログラム(ソフトウェア)の機能や管理するデータなどを、外部の他のプログラムから呼び出して利用するための手順やデータ形式などを定めた規約のこと
Web Strage
Web Socket
Indexed DB
  • ブラウザ側でリレーショナルデータベースが扱えるAPI
  • データはKey-Value形式でローカルに保存
  • クライアント側でデータを加工したり保存できるようにすることで、サーバとの通信を減らしてパフォーマンスを向上することを目的とする
Geolocation API
  • ブラウザで位置情報を取得できるAPI
  • 実行環境に依存せず、共通の方法で位置情報が取得できる
File API
  • 　ローカルファイルの情報を取得してJavaScriptで扱うことができるAPI

CSS3機能

CSSセレクタ
アニメーション
  • 文字や画像を動かしたり、背景色を変化させる機能
  • CSS3には「Transitions」「Animations」の二種類が用意される
フォント機能
  • サーバ上のフォントを指定して利用できる
  • Webフォントともいう
  • テキストに影をつける機能も追加

既存機能

SVG
  • Scalable Vector Graphics…XMLで記述された２Dベクタグラフィックス言語
  • ベクタグラフィック…画像を図形の集合として扱う描画方法
  • 環境に応じて最適な表示ができる、FlashやJavaScriptで実現できるようなアニメーション機能ももつ
  • HTML5ではインラインSVGとしてサポート、HTML内に直接記述出来るようになった
MathML
  • Mathematical Mackup Language…数式を表示するマークアップ言語
  • HTML5ではMaｔｈMLもHTML構文で利用できる
WebGL


d.hatena.ne.jp