スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
CSS Nite Shuffle Part.1
最初のセッションは、長谷川恭久さんによる『エコなWebデザイナーになろう。』でした。
前編・後編に分けてレポートしたいと思います。

まずは前編。

昨今、テレビや新聞などで地球温暖化が叫ばれています。
アル・ゴアさんの『不都合な真実』という映画もありました。
我々一人一人が地球に対して「エコ」にならなければいけません。
でも、この「エコ」という考えは環境問題に限ったことではありません。
私達がWebサイトを作成していく時にも当てはまるのです。

tableタグのネスト、fontタグを使った文字の制御、見栄えの為のspacer.gifの使用により、ソースコードは肥大化しました。
もっと(x)htmlとcssを使って、ソースコードもクリーンにし、「エコなWeb制作」を!

そのためにすることは、以下の四点。

1.リサイクル
2.節約
3.テクノロジー
4.コミュニティ


まずはリサイクルから。リサイクルするものは次の三つ。

1.コード
2.画像
3.システム


コードのリサイクル…Dreamweaverなどでスニペットやライブラリとしてコードを登録しておき、ドラッグ&ドロップやショートカットで再利用。これを行うことで、コードを記述していく時に、再利用のことを考え自然と綺麗なソースコードを書くようになってくる。

画像のリサイクル…背景色のみが違う画像を作成する時は、色違いのものを何個も作成するのではなく、背景色を透明にして画像を切り出し、CSS側の背景色でカラーを替える。

システムのリサイクル…既存のCMSなどを使ってカスタマイズしてもよいし、オリジナルのシステムを作成して併用するのも良い。

次に節約。節約するものは次の三つ。

1.コード
2.画像
3.言葉


1と2はリサイクルにも共通していることである。クリーンなマークアップをすることで、流用しやすくなり、拡張しやすくなる。

言葉の節約

1.明確かつ率直に
2.専門用語とその説明
3.グラフィックの活用

1.明確かつ率直に…Webは紙媒体を違い、文章を読ませるのには不向きである。そのため、ダラダラと長い文章を書くと、ユーザーは途中で読むのを止めてしまう。
だから、明確かつ率直(シンプル)にメッセージを伝えることが重要になってくる。

2.専門用語とその説明…専門用語とその説明は、その業界内で通用する言葉でも他の業界では通用しないということ。誰が読んでも理解出来るように、きちんと説明を加えるべき。

3.グラフィックの活用…グラフィックの活用は、言葉で長々と説明するよりも、イラストや図で表現した方が伝わりやすい場合がある。

これにて前編終了です。
CSS Nite Shuffle
昨日、CSS Nite Shuffleに参加してきました。
スペシャルパフォーマンスとして、クラシックの演奏が…
クラブでクラシック。なかなかオツなものです。

イベントのレポートは、後日まとめてアップしようかと思っています。

Googleの新たなるサービス
Googleの新たなサービスが利用できるようになりましたね。
GoogleノートブックDocs&Spreadsheetsです。

ノートブックはFirefoxの機能拡張をインストールすれば、ブラウザの右下にショートカットキーが表示され、そこから簡単にノートブックを開くことが出来ます。
何かメモをしたくなったら、ノートブックを開き、保存したいテキストにカーソルを立て、あとは「切り抜き」をクリックするだけで、簡単にメモとして保存できます。
テキストだけでなく、画像も保存できるみたいです。

Docs&Spreadsheetsは、文章やスプレッドシートをWordやExcel、PDFの形式で保存が出来るという優れもの。
WordやExcelのソフトがインストールされていない環境でも、文章が作れちゃう…
Docs(文章)作成の段階で、用意されているスタイル(段落、ヘッダー、番号つきリスト)などを適用してあげる。
そして丸々コピーして、DreamWeaverのデザインビューにペースト。
Wordの時と同じように、HTMLタグがきちんと反映されます!

いやー、スゴイ!
Googleはどこまで行くんだろう…
PhotoShop無償版
CNET Japanに凄い記事が載っていた。
半年以内にAdobeがPhotoShopウェブアプリ版を無償提供するらしい…
凄い! そのうちイラレタの無償版とかも出るのだろうか…

→PhotoShopウェブアプリ版を無償提供の詳しい記事(CNET Japan)
XSLTの基礎知識
株式会社ロクナナの中村享介さんによる『XSLT活用の基礎知識』です。

●XSLTとは?

XMLファイルを別のXMLファイルやテキストベースのファイルに変換するための言語。
(XMLファイルをXSLTを用いて、XHTMLに変換など)

●XPathとは?

XMLデータ内の特定な要素や属性を指定するための言語。

●DreamweaverでのXSLT作成

ファイル→新規作成→新規ドキュメント→基本ページから、XSLTを選びます。

XSLT(フラグメント)…一部分を変換する場合
XSLT(ページ全体)…ページ全体を変換する場合

●XMLソースの指定

XSLTファイルを新規作成すると、「XMLソースの指定」というダイアログボックスが現れます。
ローカルエリアもしくは、インターネット上から指定します。
ブログなどのRSSフィードなどを選択してあげるといいでしょう!
指定してあげると、「バインディング」パネルにツリー構造で表示されます。

あとは必要に応じて、パネルからステージにドラッグ&ドロップ。その後は、htmlタグでマークアップしたり、CSSを適用させたりしていきます。

●Dreamweaverの利点

コードビューでマークアップ作業をしていくと、XSLTの場合にもコードヒントが表示される。
Dreamweaverのリファレンスには、XSLTのリファレンスもあるので、それを参考にすると良い。
何かキーワードを打ち込んだら、右クリック→リファレンス(Windowsの場合)か、Shift+F1でもリファレンスを表示出来る。

加えて作業が終了したら、F12(ブラウザプレビュー)をするだけで、XMLからXHTMLに変換されたものが表示される。


これにて中村さんのセッションのレポート終了です。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。