Non-ProgrammerによるWebプログラミングメモ

2013年4月21日日曜日

セマンティックWebを実現するためのセクショニング（HTML5）

セマンティックWebとは、「Webページおよびその中に記述された内容について、それが何を意味するかを表す情報(メタデータ)を一定の規則に従って付加することで、コンピュータが効率よく情報を収集・解釈できるようにする構想。」だそうです。（IT用語辞典より）

個人的な見解としては、以下のとおりです。（間違ってるかもしれないですが…。）
（１）スマートフォン・タブレットの普及により、ホームページを閲覧できる情報端末の多様化が起きた。

（２）困ったことに、画面のサイズも違えば、使っているブラウザもまちまちときた。

（３）各端末・ブラウザ間で、見栄えよく同じ文章構造を保った形でホームページを閲覧できるようにするために、ホームページの文章構造を階層化・グループ化（セクショニング）する必要があった。

それでは、具体的なセクショニングの方法についてのメモを書いて行きたいと思います。

セクショニングを行うのは、おもに<body>…</body>タグ内での作業になります。

（１）ナビゲーション
ホームページを見ているとよく上部もしくは左側に「メニューボタン」がくっついていますよね（例えば、HOME、ABOUT、LINKSなど）。それがナビゲーションです。

<nav>
</nav>

（２）メインコンテンツ
ホームページの本文に当たる部分のマークアップします。

<article>
</article>

（３）メインコンテンツのグループ化
ホームページの本文に当たる部分をグループ化することで細分化します。

<section>
</section>

（４）補足情報
ホームページの下部などにある補足情報に当たる部分をマークアップします。

<aside>
</aside>

上記の内容をまとめると、

<body>
　<nav>
　…
　</nav>
　<article>
　…
　</article>
　<aside>
　…
　</aside>
</body>

こんな感じです。

2013年4月19日金曜日

Webページの基本形（HTML5）

HTML5で記述されたWebページの基本的な構造についてのメモです。以下がHTMLの基本的なカタチになります。

（１）DOCTYPE宣言を行う
このファイルはHTML5で記述されてますよと明記します。

<!DOCTYPE html>

（２）Webページで使用されている言語を指定する
日本語であれば「ja」、英語であれば「en」と指定します。

<html lang="ja">
</html>

（３）ページの付加情報を記載する領域の設定
ここでは、Webページのタイトルやスタイルシート、スクリプトの内容を記載します。

<head>
</head>

（４）Webページの内容を記載する領域の設定
ここでは、Webページを閲覧した時に表示される内容を記載します。

<body>
</body>

上記の内容をまとめると、

<!DOCTYPE html>
<html lang="ja">
<head>
…
</head>
<body>
…
</body>
</html>

こんな感じです。

2013年3月24日日曜日

MySQLモニタの起動・終了（Windows）

まずは基本的な動作から入ってみたいと思います。

〈MySQLの起動〉
（１）rootユーザーとしてMySQLにログインする。
$ mysql -u root -p1234 #任意のパスワード

Welcome to the MySQL monitor. Commands end with ; or \g.
Your MySQL connection id is 10
Server version: 5.5.16 MySQL Community Server (GPL)

Copyright (c) 2000, 2011, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

MySQLを起動できると、上記のようにMySQLのVersionなどの情報が出てきて、起動できたことが確認できます。

〈MySQLの終了〉
（１）MySQLを終了させる。
$ exit (もしくはquit)

Bye

「Bye」と表示され、MySQLが終了したことが確認できます。