社内 Web勉強会 第1回

社内草の根勉強会

Webの知識と一言で言っても、その実、知らなければ行けない知識の範囲はかなり広く、技術的側面に絞ってざっと思いつく範囲だけでも HTML, CSS, JavaScript, セキュリティー, ユーザビリティー, アクセシビリティー, Webデザイン, SEO, Blog, SNS, Wiki, SBM, RSS, Trackback, Zope, Plone, Xoops, MovableType, OpenPNE, TurboGears, Django, Ruby-on-Rails, Python, Ruby, PHP, Perl, ....と挙げていったらきりがありません。

全てのプロになるのは無理だとは言え、知らない、では済まないものも多いので、まずはそれぞれの概要を勉強しよう、ということで、数名に声をかけて勉強会を行うことにしました。

1回目の勉強会はHTMLの基礎について5人くらいで行いました。HTML基礎ということで、マークアップを正しく使う事の意味について、プログラマ的な観点・デザイン的な観点・原理原則について勉強しました。

HTMLを正しく書く・構造化する意味

• 元々が論文用の構造化文書
  • タイトルがある
  • ヘッドラインがある
  • パラグラフがある
  • 関連文書へリンクする
  • 図を入れられる
  • 表で表現する
• SEO
  • 検索エンジン最適化
  • 数年前は
    • ページ内のキーワード出現数重視
    • meta keywords重視
    • リンク数重視
  • Webページの解釈が人間に近づいている
    • title重要
    • meta description重要
    • HTMLの先頭に近いほど単語の価値が高い
    • ヘッドライン（Hタグ）重要
    • strongは検索語ランクが高まる
    • でも画像は解釈できない
  • HTMLが本来持つタグの意味が重要に
  • HTML構造が間違っているとページランクが下がる
  • デザイン要素がHTML内にあると解釈の妨げに？
• アクセシビリティー
  • JIS X 8341-3：2004
    • 略称：ウェブコンテンツJIS
    • Webでアクセシビリティーと言ったらこれ
    • 高齢者・障害者への配慮
    • ※ファインダビリティーはまた別。
  • 音声読み上げソフトがHTMLの構造を元に読み上げる
  • パラグラフ（P）やDL/DT/DD、UL/LIなども解釈される
  • HTMLが本来持つタグの意味が重要
• CSS
  • CSSは構造化されたXHTMLに最適化されている
  • CSSを上手に使うには、構造のきれいなXHTMLが必須
  • 親要素のスタイルを子要素が継承する
    • デザインのグループ化
• Javascript
  • JavascriptはHTMLやXHTMLそのものは扱わない
  • ブラウザが解釈したDOMを扱う
    • Document Object Model
  • 要素のグループ化や親子関係がきれいだとプログラムを書きやすい

上に挙げたような概要説明から、それぞれの具体例を簡単に示しながら1時間で勉強会を終わりましたが、初回ということもあり、ほとんど講義形式になってしまいました。あと、Web勉強会と銘打ったからには今後勉強する範囲を広くしていきたいところでもあります。

ということで、今回は一人KPT。

Keep/Probrem/Try