FC2ブログ
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
『WEB標準の日』 レポート8
 今回は株式会社インフォアクシア植木真さんの『Web標準、SEOにも通じる"攻め"のアクセシビリティ』です。

攻めのアクセシビリティには何が必要か?
正しくマークアップをすること
代替テキスト、コンテンツを提供すること

この二つのことにより、サイト制作者(企業)が伝えたい情報を100%ユーザーに伝えられる

100%伝えるための手段として効果的なのが、WEB標準に準拠したデータの作成なのである。
そうしてソースコードを見れば、そのコンテンツの情報・構造・意味が理解出来る状態にすることが大事である。

そのためには(X)HTMLの正しい記述が何よりも大事になってくる。
・正しく見出し・段落・リストなどをマークアップする。
・titleを工夫してつける。サイト名を全部に付けるのではなく、そのページのタイトル+サイト名にするといい。
例)サイト名:SOCCER。ページタイトル:世界の名プレイヤーFW編ならば、タイトルはこのように付ける。「世界の名プレイヤーFW編・SOCCER」
・画像には必ず代替テキストを記述する。
・単語の途中で改行や空白文字を入れない。
・リンクを貼る際、「詳しくはこちら」などどリンクを貼らずに、"○○○のホームページへ"このようにする。

正しくマークアップしてアクセシビリティを確保することで、必然的にSEO対策になる。

最後に植木さんが提唱していた言葉で終わりたいと思います。
「これからのWEBは、とにかくWEB標準に準拠することが大事。
どんな制作者/運営者であっても、WEB標準やアクセシビリティを実践できないプロは使えない。
Webは、常に進歩していて、もっとユーザーが来るように、もっとアクセシブルかつクリエイティブにならなければいけない。
とにかくすべてが速くなっている。」


植木さんのスライドのダウンロード
音声のダウンロード
『WEB標準の日』 レポート7
 さて今回は株式会社ロクナナの中村京介さんと河内正紀さんによる『すぐに役立つWeb標準テクノロジーの効率化テクニック』です。

 作業の効率化を図るにはどうしたらいいのか?

ミスを減らす

これに尽きると思います。ミスを減らすことで、その空いた時間をクオリティの追及に回すことが出来る。

XHTML

 その為には、XHTMLを書いていく段階から、ID/classの名前のつけ方や文書型宣言の統一などを図り、制作チーム内の誰が書いてもXHTMLの構造が均一になることが望まれる。
 それにより、単一のサイトの効率化が後に複数のサイトの効率化に繋がっていく。

CSS

CSSを記述していく時、1枚のCSSに全てを記述するのではなく、複数のCSSに分けて記述していくとメンテナンスがし易い。

カテゴリ単位…サイト内で共通の部分とページごとに異なる箇所のCSSを分けて作成していく。
この作成の利点は、TOPページとカテゴリページでデザインが大きくことなるサイトなどに対応しやすいが反面、スタイルの検証がしにくかったり、同一スタイルの重複が起こる可能性が出てくる。

モジュール単位…CSSをモジュールごと(header部分、navi部分、footer部分など)に分けて作成していくやり方。
この利点は複数のプロジェクトで共通する部分の再利用が可能になるし、スタイルの検証や修正時間の短縮を図ることが出来る。

JavaScript

・再利用が可能
・制作効率を高めるのに非常に有効

XHTMLやCSSで行おうとすると、かなりソースコードが増えてしまうようなモノでも、JavaScriptを使用すると非常に簡単なソースコードで済ませることが出来る。

例)ロールオーバーやTableを使用して1行ずつカラーを変更するときなどに便利

お二方のプレゼン資料は見ることが出来ます。JavaScriptを使用したサンプルなどもご覧いただけます。
音声ファイルはこちらからどうぞ。
『WEB標準の日』 レポート6
 オーガナイズしていく時に注意すること

情報の設計図を作成する
共通言語を作成する
共通言語を使用する

情報の設計図を作成…サイトマップのようなもので、出来るだけ詳しく、全体を見渡せるようなものを作成すると便利

共通言語を作成する…使用する属性や使用言語などを決める。加えてファイル名を共通化しておくと便利。
ボタンに使う画像なら「btn_ファイル名.拡張子」などにすると誰の目にも分かりやすい。
cssファイルの頭には、タイトルや作者名、作成日などの情報を記述しておくと便利。

共通言語の使用…会社内などのコミュニティ内でのみ共通の言語を使用してもよいが、「microformats」などの簡単で柔軟性があるものを使用してもよい。
「microformats」の使用言語としては、hCalendar(予定)、hCard(プロフィール)、hReview(レビュー)、re-license(ライセンス)、rel-tag(タグ)などがある。このうちの幾つかはyahooやgoogleで使われている。

まとめ
常に全体を見渡し、共通のルールを使い、柔軟な頭を持ってサイト制作に望むのがよい。DreamWeaverを使ったスニペッツの簡単な作成手順などを、教えて欲しかったです、残念。

長谷川さんのスライドがご覧になれます。
音声はこちらからダウンロードできます。
『WEB標準の日』 レポート5
 さてさて今回は長谷川恭久さん(COULD)の登場です。『WEB標準テクノロジーの上手なマッシュアップ』という講演テーマでした。メガネ姿の長谷川さんに場内騒然。

最初に「Take Control」という文字が目に飛び込んできました。インパクトかなりあります!

 コントロールしたいと考えている人は2パターンいるとのこと。サイト利用者サイト製作者・開発者です。サイトの利用者は、自分のパソコンで見るために文字サイズやレイアウトをカスタマイズします。しかしサイト製作者は、自分が指定したとおりの文字のサイズとレイアウトで、サイトを閲覧してもらいたいのです。そこで格闘があります。

 ではサイトを作成する時はどうしたらいいのでしょう! そこで重要なのは『Web Standards Thinking』という考え方です。
 
 なぜWeb Standardなのか? 利点は2つ。

共通言語を用いる
拡張性がある

共通言語というのは、W3Cが提唱しているものや、クライアント間でのもの、友人同士の共通のものなど様々あります。

拡張性というのは、CSSと画像を変えることで簡単にサイトのデザインを変更することが出来るという利点があります。今までのTableレイアウトでは、デザインを変更する時には全て一から作り直さなければなりませんでした。その点Web Standardは融通性があります。

Webサイトを作成していく時には、パターン化するのもいいでしょう。パターン化するものとしては、マークアップファイル管理があります。

ここでファイルを管理するもので、長谷川さんは「スニペッツ」の利用を提案しておられました。自分はサイト作成していく時、この機能を使ったことがなかった(頭からCSSを記述していた)ので、とても興味深いお話でした。この機能はDreamWeaverにもあります。

スニペッツの利用の際は

ページをパーツごとに分けておく
必要な属性などはあらかじめ記述しておく
柔軟性のあるものにする
ID/class名は意味の通じる英単語で記述する
コメント


こうしておくことで、後々色々なサイトを作成するときに再利用が可能になるので便利である。

今回のテーマも2回に分けたいと思います。続きはまた明日。
『WEB標準の日』 レポート4
 昨日の続きです。

制作前に決めておくこと
1.更新作業はどちら(サイト制作側かクライアント側)が行うのか?
2.クライアントが使っているソフトウェア・ツールは何か?
3.ドメインの取得、サーバーの保守・管理はどちらが行うのか?
4.WEBアプリケーションの保守・管理はどちらが行うのか?
5.アクセスログ解析とデータレポートなどはどちらが行うのか?
6.ホワイトリストの作成

ホワイトリスト…利用できる要素・属性(値)をまとめたもの。これに加えて、Flashのembed要素の使用をどうやって避けるか? JavaScriptは使用するのか? など細かな点まで決めておく必要がある。
 そうしておくことによって、のちの制作がスムーズに運ぶようになる。

制作段階の注意点
製作段階に入ったら、バリデーション作業を行う必要がある。
無料ツールとして有名なのはこの3点。
1.W3C Markup Validation Service
2.W3C CSS Validation Servide
3.Fujitsu WebInspector

Bulletproofテストの実施
~Dan Cederholmの提案(木達一仁さんによるMYCOMジャーナル:@media2006レポートより)~

1.10秒間ユーザビリティテスト(CSSを無効にした状態で理解可能かを確認する)
2.画像を非表示にする(それでもコンテンツを読解できるか確認する)
3.マークアップとスタイルシートの文法チェックを行う
4.ディグダグテキストテスト(ファミコンのソフト「ディグダグ」でプレイヤーがモンスターをポンプで膨らませるのになぞらえている。文字サイズを大きくしてみるテストの意味。)

 最後に、WEB標準=XHTML+CSSとの考えがある。本当にそうなのだろうか? 確かにこの技術を使うことでの利点がかなりある。でもWEB標準はあくまで制作時のツールの一つとして考えるものだと思った。
 クライアントはどのようなモノを望んでいるのか? ガイドラインやホワイトリストは用意したのか? こういった項目の一つとして考えるのがベストなのではないだろうか。そのように感じた講演だった。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。