スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
CSS Nite Vol.11 Part.5
●作業時間の確保●
どんなに色々な技術を駆使して制作をしても、作業時間の確保がなければいいものは出来ない。
出来そうだと思う時間の2~3倍の作業時間を確保する。それにより、作業にも余裕が生まれる。

時間的に余裕を持つことは決して悪いことではない。
余裕を持つことで、緊急の仕事にも対応でき、更にはクオリティアップにも繋がる。常に忙しくしている人には「あの人忙しそうだから…」ということで、仕事を頼みにくい。

技術と時間的に余裕を持って、より良いものを作りましょう!

これにてCSS Nite Vol.11のレポート終了です。
スポンサーサイト
CSS Nite Vol.11 Part.4
●JavaScript編●
JQuery
prototype.jsにインスパイアされたもので、JavaScriptをCSSっぽく書くことが出来る。CSSの1~3をサポートしていて、IE、Safari、Opera、Firefoxでサポートされている。
加えて独自の擬似クラスもある。
使用するには、きっちり(X)HTMLで構造化されている必要がある。

JQueryについて詳しく知りたい方は、はてなブックマークのJQuery関連ページをご覧ください。
CSS Nite Vol.11 Part.3
●CSS●

『WEB標準の日』のレポートで、CSSは各モジュール別に分けて書いた方がいいのではないか? と記述しました。
でも小規模かつ一人で設計をやっている人には、果たして向いているのだろうか? との疑問が…
今回のCSS Niteで中村さんもその点を語られていました。

小規模かつ一人で設計をしている人には「モジュール化」は向かないのかもしれない。モジュール化には、全体を通しての設計がかなり重要で、この点にかなり時間を取られる。
個人でやっている場合は、この時間がもったいない。

そこで、自分のパターンを決めてしまうのがよさそうだ。

XHTML+main.css…これを基本とする
main.cssにそれぞれbasic.css(要素に関してのみ記述)、layout.css(レイアウトのみ記述)、class.css(メインコンテンツのデザインに関して記述)をリンクさせる。

としていけば、使いまわしが出来るのではないだろうか?

ファイル数を少なくすることの利点
・管理がしやすい
・読み込みが早い


ページ数や大人数でサイトを構築していくときは、モジュール化したものを使った方が便利である。
サイトの規模によって使い分けるのが望ましい。
CSS Nite Vol.11 Part.2
●バッチ処理とドロップレット●

●バッチ処理
アクションは開いている画像か、「開く」のアクションで設定した特定の1ファイルにしか適用することが出来ない。
フォルダ内の画像に全部設定したアクションを行いたいときには、「バッチ処理」が便利である。
バッチ処理は、ファイルメニュー→自動処理→バッチから選択する。

●ドロップレット
ドロップレットとはアクションのエイリアスもしくはショートカットみたいなものである。ドロップレットにフォルダもしくは画像をドラッグ&ドロップするだけで、PhotoShopを自動的に起動して、アクションを実行してくれる。

ドロップレットは、ファイルメニュー→自動処理→ドロップレット作成から行う。
その際、ドロップレット作成前にアクションをきちんと記録しておく必要がある。

バッチ処理・ドロップレットを使用することで、作業時間の短縮を図れる。
仕事柄(バイナリ→JPEGに変換など)バッチ処理やドロップレットを使用しているが、それをWEBに使用するとは思わなかった。色んなことに応用が利くんだなぁと感じました。
CSS Nite Vol.11 Part.1
先日行われたCSS Nite Vol.11のレポートです。
今回は株式会社ロクナナの中村京介さんの『優雅なWeb制作のためのテクニック』です。

●優雅なWeb制作とは何だろう?

仕事の無駄をなくして、自由に出来る時間を確保することである。

●PhotoShop編●
スライスの切り出しの高速化テクニック
PhotoShopで画像を切り出す際、通常はガイドを引いて、それに沿ってスライスをしていくという作業手順を踏みます。それが何十点もある時に有効な手段です。

1.スライスを切り出すPhotoShopの画像を開く。大抵の場合、PhotoShopの画像は何枚ものレイヤー(背景・文字など)が重なった状態である。

2.長方形選択ツールで切り出す箇所を、大まかに選択範囲を取る。

3.編集→結合部分をコピーを選ぶ。

4.新規ファイルを開き、コピーしたものをペーストする。

5.イメージ→トリミングを選び、トリミング対象カラーとトリミングする位置を選ぶ。大抵の場合デフォルトのままで大丈夫。

6.そうすると不必要な部分をコンピューターがトリミング処理をしてくれ、スライスした状態になる。

7.Web用に保存する。

8.画像を閉じる。

別に一つならどうってことないが、これが何十個もスライスが続く場合、この一連の作業をアクションに記録する。そして任意のショートカットキーを割り当てる

あとは長方形ツールでスライスしたい画像を大まかに選択範囲を取って、先ほど割り当てたショートカットキーを押す。すると自動的にスライスの切り出しとWeb用に画像を保存してくれる。
これにより時間の短縮が図れる。

※しかしこれだと透過GIFのマット処理などが出来ないので、マット処理しなければならない箇所があるときなどは、臨機応変(その箇所のみ新たなアクションを割り当てるなど)に対処する。
CSS Nite Vol.10 Part.3
●クラス名の共有範囲●
クラス名をつけるときには、名前付けの約束事を事前に取り決めておくことが重要。

その時に注意しておかなければいけないことは、特定範囲内でのみ通用するものでは駄目だということである。

グローバルな情報共有の枠組みとしてRDFが上げられる。
RDFは(Resource Description Framework)の略である。

RDFによる利点
・トリプルによるリソース表現
主語→述語→目的語のトリプルで関係を記述する
URIを用いたグローバルな名前付け

・対象(ノード)をURIで表す
分散記述とグラフの併合が可能になる
グローバルな「ネットワーク効果」がもたらされる

・ノードの関係(プロパティ)もURIで示す
語彙の明確化と共有、語彙のマッピングが可能になる


RDFについては神崎さんのホームページで詳しく解説がされているので、是非ご覧ください。

グローバルな情報共有を可能にすれば様々なものに利用できる。

例)
・様々なデータから「場所」の情報だけを取り出して、それをGoogleMap上で表示させたり出来る。

・場所のデータから緯度と経度を割り出し、地図に表示出来るようにする。


RDFの説明のあたりから自分にはちょっとムズカシイ話だなぁと感じるようになった。でも情報を共有化することによって、様々なことに再利用が可能になるという点にはとても興味を抱きました。
これにてレポート終了になります!
CSS Nite Vol.10 Part.2
●XHTMLの特徴●

・汎用性が高い
・完全なツリー構造になっている
・コードにエラーがあったらカバーしない

多くの場合、XHTMLと宣言しているにもかかわらず、XHTMLくずれな場合が多い。気をつけるのは以下の3点。

・終了タグの省略はしてはいけない
※特に気をつけるのは空要素タグ(img、brなど)の終了タグ「/」の付け忘れ
・裸の&は駄目
※&ではなく&の後にamp;と記述する。特にリンクを貼ろうとしてURLをそのままコピー&ペーストするときに注意が必要。
・裸の属性値も駄目
※数字だけでも属性値は必ず引用符で囲む
例)width=50ではなくwidth=50

●XHTMLの拡張構造●

再利用可能な役割:class
classタグ…普通名詞につける。1つの文章の中に何回出てきても大丈夫

要素の固有名:id
idタグ…固有名詞につける。1つの文章の中に登場するのは1回のみ。

●共有可能なclass名をつける●
class属性値には一般に通用する(わかりやすい)言葉をつける。その際、普及しているアプリケーションのタグ名を参考にしてもいい。

例)hCalendar
情報ブロックとして「vevent」クラス、日付は「dtstart」、場所は「location」などのクラス名が付けられている。

CSS Nite Vol.10 Part.1
CSS Nite Vol.10 神崎正英さんの『フォーマルでいこう』のレポートです。

人に何かを伝える時に大切な事=情報を整理して伝える事である。

そのためには情報を形式化する。そしてそれに名前を与えてやることによって、共有可能なものとすることが大事。
つまり自分の考えを、相手が理解できる言葉なり単語に置き換えるのである。

ではWEBにおけるフォーマルとは何だろう?
・枠組みをつける
・枠組みを知識と関連付ける

枠組みをつけるのに必要なこと、それはマークアップである。

●マークアップの必要性●
タグによるマークアップは、文章情報の形と名前を示すことになる。これにより共有可能なものになる。

ここで一つ問題がある。グローバルに理解できる名前とそうでない名前である。前者は、DTD(Document Type Definition:文章型定義の略)で定義されている名前。後者は制作者が独自につける名前である。

先にも書いたが、名前は共有できてはじめて意味があるのだ。だから誰が見てもすぐに理解できる名前にする必要がある。
CSS Nite Vol.11
本日CSS Nite Vol.11に参加してきました。
今回は株式会社ロクナナの中村京介さんによる『優雅なWEB制作のためのテクニック』というテーマでの講演でした。
PhotoShop(効果的なスライス、ドロップレット)、CSS、JavaScriptを使っての効率的なWEBデータの作成方法を聞くことが出来ました。
後日まとめてアップしたいと思います。
といいつつ、前回のVol.10の神埼さんのセッションもまだアップしていないんですよねぇ…
『WEB標準の日』 レポート13
大変遅くなりました。WEB標準の日の最後のレポートになります。
最後のセッションはパネルディスカッションで、『WEB標準はビジネスをどう変えるか?』についてでした。

結論はそれ自体では変わらない! でした。

・WEB標準はあくまでWEBの実装技術の一つに過ぎないから
・ブラウザ間でのCSSの解釈の違いがある
・オーサリングツールもCSSを完全にカバーしきれていない
・制作者サイドでのスキルの差


こういった問題点がまだまだ存在します。ですからWEB標準によってビジネスが変わるか? といったらNO! というのが結論でした。

『WEB標準の日』公式サイト内にリンクされている個人ブログ内で、パネルディスカッションに参加された住太陽さんと森田雄さんの『WEB標準』に関する個人的意見が公開されています。ご覧ください。

『WEB標準の日』の全てのセッションと音声データが『WEB標準の日』公式サイトからダウンロードが出来るようになりました。ご利用下さい。

これにて『WEB標準の日』のレポート、終了になります。
『WEB標準の日』 レポート12
神森さんのセッションの続きです。

●Contributeについて●
□問題点□
詳細なソースコントロールができない
DIVタグの挿入ができない
デフォルトのままでは、自由に編集ができてしまうので危険

★解決策★
DreamWeaverのテンプレートを使い、編集可能領域を設定する。簡単なテキストの差し替えなどの作業を行うだけにする。
Contributeを使うことで、スキルの差を多少埋めることができる。

神森さんは『Web Designing8月号』の誌面で、新しい連載を開始されました。DreamWeaverではじめるCSS+XHTML講座です。要チェックです!

神森さんのプレゼン資料(PDF 2.2MB)
音声ファイル(64分 22.1MB)

これにてセッションEのレポート終了です。
『WEB標準の日』 レポート11
HTMLのマークアップの箇所で一つ書き忘れていたものがありました。<p>タグをリストに変換する方法です。

1.リストに変換したい箇所を選択します。

 <p>業務内容</p>
 <p>営業部門</p>
 <p>製造部門</p>

2.選択したらプロパティパネルの「ページプロパティ」ボタンの上の「リスト」ボタンをクリックします。

3.選択した箇所がリストタグに変換されます。

<ul>
 <li>業務内容</li>
 <li>営業部門</li>
 <li>製造部門</li>
</ul>

4.この方法はご存知の方は多いかと思います。ここからは、リストをさらに入れ子にしたい場合、便利な「技」です。

5.入れ子にしたい箇所を選択します。わかりやすい様に「青色」にしてあります。

<ul>
 <li>業務内容</li>
 <li>営業部門</li>
 <li>製造部門</li>

</ul>

6.選択した状態で、先ほどと同じ「リスト」ボタンを押すと、リストが解除されてしまいます。入れ子の状態にはなりません。入れ子にしたい場合は、リストボタンの三つ右にある「テキストインデント」ボタンを押します。するとリストが入れ子状態になります。

7.

<ul>
 <li>業務内容
  <ul>
   <li>営業部門</li>
   <li>製造部門</li>
  </ul>
 </li>
</ul>

使える便利な技です。
『WEB標準の日』 レポート10
昨日の神森さんのセッションの続きです。

●CSSの自動補完機能●
DreamWeaver8からはCSSの自動補完機能が充実しています。
CSSの設定を行うのは、HTMLのマークアップが終了して、divタグで全体のレイアウトを整えた後で行う。
そしてCSSの設定をしたいところ(div ●●のh1)
にカーソルを立て、CSSパネルの新規CSSルールをクリックします。すると自動的に「詳細設定」にチェックが入り、#●● h1などと記述されます。
子孫セレクタなどの設定の際、非常に便利です。

●スニペットの使用●
コードスニペットの機能を使うと、後に再利用するときのために作成したコンテンツを保存することができます。
スニペットにはHTMLだけでなく、CSS、JavaScript、サーバー側のスクリプトなど色々保存ができる。

簡単なスニペットを作成してみましょう。
1.HTMLタグを打ちます。
<div id="footer">
<address>Copyright 2006 All rights reserved.</address>
</div>

2.このコードを選択した状態で、ファイルパネル→スニペットを選択。Windowsなら右クリック、もしくは右上のプルダウンから新規スニペットを選択します。

3.名前は分かりやすい名前「footer:normal」をつけましょう。説明の箇所も「フッター部分コピーライトのみ」などとつけると良いでしょう。

4.スニペットの種類は「ブロックの挿入」にします。「ブロックの挿入」は選択したコードそのものが後に挿入されることになります。
「選択範囲を囲む」は、現在の選択範囲の前・後に挿入するコードを記述します。
OKボタンを押します。

5.スニペットパネル内に今作成したものが出来ていると思います。フォルダなどを作って、わかりやすく保存しましょう。

6.新規ファイルを開き、スニペットパネルから今作成したスニペットを「デザインビュー」のステージ上に、ドラッグ&ドロップします。

7.自動的にfooterが作成されます。

★解説★
スニペットは覚えるとかなり使える機能だと思います。例えばCSSのブラウザの初期化のコードなどを一度作成して、スニペットに登録しておけば、使いまわしがききます。
個人でサイトを作成していく場合には別段問題はありませんが、複数人でサイトを作成する場合には注意が必要です。
スニペットは各自のマシンに登録されています。これを共有ファイルとして使用する場合には、ちょっと面倒な作業があります。
WindowsXPの場合はC:\Document and Setting→[user]→Application Data→Macromedia →DreamWeaver8→Configuration→Snippets内に保存されているので、そこからデータをコピーして、他の作成者のマシンの同じ箇所に保存します。
これで他のマシンでも作成したスニペットが使えます。

続きはまた明日。
『WEB標準の日』 レポート9
セッションの最後は株式会社アンカーテクノロジーの神森勉さんによる『DreamWeaver8/Contribute3を使ったWEB標準実装ガイド』です。

オーサリングツールの問題点
・HTMLが本来の働き(仕様)を失い「ホームページ制作言語」のようになってしまった
・CSSの表示が正確ではない(レンダリングが不十分)

オーサリングツールの利点
・大量ページを効率的に作成出来る
・ブラウザでのプレビューの前に、ある程度ビジュアルを確認出来る

オーサリングツールの普及に伴いHTMLは本来の使われ方ではなく、ビジュアル重視の使われ方をするようになってきました。そこで今一度、HTMLを本来の仕様に従って使いましょう! という考えになったのです。これがいわゆる「WEB標準」の考え方です。

さて、いよいよすぐにでもWEB制作で使える小技集に入りたいと思います。

●テキストエディタのテキストをDreamWeaverで使用する方法●
1.テキストエディタでテキストを作成します。
2.その際テキストとテキストの間は1行空けるようにします。
3.テキストを打ち終わったら、テキストを選択し、コピーします。
4.DreamWeaverを起動し、新規ファイルの「デザインビュー」にペーストします。
5.コードビューを見てみると、テキストが<p></p>タグで囲まれています。
6.見出しなど必要に応じてマークアップをしていきます。

★解説★
ここで大事なのは、2のテキストとテキストの間は1行空けるという箇所です。これをきちんと行うと<p></p>タグで囲まれます。しかし1行空けずにペーストしてしまうと、最初と最後は<p>タグで囲まれますが、途中は全て<br />タグになってしまいます。
これではその後のマークアップの際に「修正」という手間が掛かってしまいます。それは避けましょう!

★マークアップの仕方★
見出しなどをマークアップしていく時に覚えておくと便利な技です。
通常マークアップする箇所にカーソルを立て、画面下のプロパティパネルのフォーマットからフォーマットを選択して行うと思いますが、もっと簡単な方法です。
マークアップする箇所にカーソルを立てます。そして「Ctrl」+1を押します。すると見出し1とマークアップされます。こっちの方が便利です。ショートカットを覚えましょう!

ショートカット一覧(Windows版 DreamWeaver8の場合)
h1→Ctrl+1
h2→Ctrl+2
h3→Ctrl+3
h4→Ctrl+4
h5→Ctrl+5
h6→Ctrl+6
p →Ctrl+Shift+p
キャンセル→Ctrl+0


●WordのテキストをDreamWeaverで使用する方法1●
工程はテキストエディタの時と同じです。
1.テキストは1行空きで打っていきます。
2.テキストを打ち終わったら、選択しコピーします。
3.DreamWeaverの「デザインビュー」にペーストします。
4.テキストが<p></p>タグで囲まれます。
5.必要に応じてマークアップしてきます。

●WordのテキストをDreamWeaverで使用する方法2●
DreamWeaver側でマークアップをしてもいいのですが、Wordには便利な機能があります。Word側でマークアップしてDreamWeaverにコピーする方法です。
1.テキストを打ちます。
2.Word側で必要に応じてマークアップを行います。
3.テキストを選択して、コピーします。
4.DreamWeaverの「デザインビュー」にペーストします。
5.するとWord上でマークアップした通りに、DreamWeaver上でもコードがマークアップされています。

●FireWorksのテキストをDreamWeaverで使用する方法●
次にFireWorks上でページを構成(レイアウト)している方に便利な方法です。
1.FireWorksのテキストを選択します。
2.テキストとテキストは1行空けるようにします。
3.テキストを選択し、コピーします。
4.DreamWeaverの「デザインビュー」にペーストします。
5.するとテキストが<p></p>で囲まれます。
6.必要に応じてマークアップしていきます。

★解説★
背景、テキスト、画像などをfireWorks上で配置してページレイアウトを行っている方にはかなり使えるネタだと思います。
FireWorksの利点は、そのソフト一つでレイアウト、ボタンの作成、スライスなどが出来てしまうことです。自分も今後FireWorksでのページレイアウトに挑戦してみようと思っています。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。