Category Archives: WEBデザイン

IE7でfavicon.ico（ファビコン）が表示されない時の解決方法

Posted on by
Reply

favicon.ico（ファビコン）がIE7で表示されなかったので、調べたところ
下記サイトに対処方法が載ってました。

参考サイト：
http://shimax.cocolog-nifty.com/search/2007/07/faviconie7_4243.html

以下、参考サイトから引用。

教訓：「faviconが表示されない場合、キャッシュだけでなく履歴もクリアしてみるべし。
（その後、念のため、起動しているIEもすべて終了させてから、IEを再び起動させてみる。）」

無事、表示出来ました～。

ありがとうございます！

新しいブラウザ「Google Chrome」を使ってみたよ！

Posted on by
Reply
Google Chrome

Google Chrome

Googleが提供しているブラウザ「Google Chrome」をみんなが早いって言うものだから
インストールして使ってみたよ。

使用した感想は、みんなが言うとおり体感的に早かったよ（笑）
ページが一瞬で「パッ」って表示される感じ！

まだ試してない方は、是非試してみて～。
ダウンロードはこちらから。

http://www.google.com/chrome

でも、ブラウザの種類が増えるとデザインの崩れなどを
確認するのが大変そうだよねえ。

覚えておくと便利な会員登録フォームを構築するポイント

Posted on by
Reply

入力フォームのユーザビリティについて。

参考url：
http://www.web-20.net/2008/08/post_81.html

以下、参考urlから引用。

ユーザーに信頼性・安心感を与えるポイント

  • いきなり登録させない
  • 必ず利用する項目以外は必須にしない
  • 非公開項目には非公開と出す
  • 暗号化通信（SSL）のページにはその旨明示する
  • プライバシーポリシー（個人情報への扱い）は上部に明示する

入力ミスを減らすポイント

  • メールアドレスを2度確認したほうがミスが減る
  • ログインIDはメールアドレスで
  • 登録ボタンは大きくする
  • クリアボタンとかいらない！

ユーザビリティ向上

  • 初期入力位置にフォーカスさせる
  • ラジオボタンやチェックボックスにはfieldset、label要素をつける
  • ラジオボタンは初期状態で選択しないほうがいい
  • サイト独自の用語などはその場でヘルプを表示する
  • 生年月日の年はセレクトボックスでなく、テキストで入力してもらう
  • 生年月日のセレクトボックス初期値を主要ユーザー層に合わせる
  • 会員フローにナビゲーションバーを表示する
  • 「その他」->自由入力のベスト解
  • 長文入力欄（テキストエリア）には残り文字数表示

以上です。詳細は参考サイトを参照して下さい。

なお、個人的には最後に紹介した

「長文入力欄（テキストエリア）には残り文字数表示」を是非実装したいなと思いました。

残り何文字入力出来るって結構重要だと思いました。

webpod（iPod）の使い方及び設置方法

Posted on by
Reply

webpod（iPod）という面白いWEBアプリを見つけたので使用方法等をご紹介。

webpod

ダウンロード先はこちら：
http://www.search-this.com/tools/webpod/

１．まずは上記ダウンロード先からzipファイルをダウンロードし解凍します。

２．次に、二つのスクリプトタグを タグの間にコピペします。

<script type="text/javascript" src="swfobject.js" ></script>
<script type="text/javascript" src="js-to-flash.js" ></script>

３．webPodを表示させたい場所に下記のコードをコピペします。

   <div id="flashcontent" style="text-align:center;">
         webPodを使うためにアドビからFlashプレーヤーをダウンロードする必要があります。
   </div>
   <script type="text/javascript">
   var so = new SWFObject("webPod.swf", "webPod", "165", "265", "8", "#ffffff");
   so.addParam("quality", "best");
   so.addParam("wmode", "transparent");
   so.addParam("flashvars", "xmlFile=tunes.xml");
   so.write("flashcontent");
   </script>

・webPod.swfファイルへのパスは適宜変更して下さい。（解凍したままアップロードするのであれば、変更は必要ありません。）

・もし、webPod-slimを使っているならば、webPod.swfからwebPod-slim.swfに上記のコードを変えて、165から125に幅を変えてください。

・flashvars「xmlFile=tunes.xml」のパスも適宜変更して下さい。（解凍したままアップロードするのであれば、変更は必要ありません。）

４．playSongメソッドのリンクを作ります。

<a href="javascript:playSong('Lost Someone')">Lost Someone</a>

tunes.xmlファイルで指定したタイトルと曲名が同一であることを確認してください。これは大文字と小文字の区別されますので注意して下さい。

５．最後にMP3ファイルをアップロードして、tunes.xmlファイルを修正します。

tunes.xmlファイルの書式参考です。

<tunes>
  <tune>
    <mp3>http://domain.com/music/song.mp3</mp3>
    <title>Lost Someone</title>
    <artist>James Brown</artist>
    <album>Live At The Apollo (1962)</album>
    <bitrate>192</bitrate>
    <image></image>
    <link>http://www.link.com</link>
  </tune>
</tunes>

実際に設置してみたサンプルページはこちらです：
http://blog.96q.org/webpod-ipod-sample/

XHTML（Valid）規格に準じたFlashソースの書き方

Posted on by
1

FlashコンテンツをWEBサイトに埋め込むに当たって、
XHTML Validエラーの壁にぶち当たったのでメモとしてエントリー。

参考url：
http://kyosuke.jp/portfolio/seminar/2006-04csslite/flash.html

自分はHTML編集ソフトとして「Dreamweaver8」を使ってるのですがそれでFlashオブジェクトを挿入すると、こんな感じのソースが挿入されます。

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="500" height="200" title="SlideShow">
  <param name="movie" value="SlideShow.swf" />
  <param name="quality" value="high" />
  <embed src="SlideShow.swf" width="500" height="200" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object>

上記のソースを【The W3C Markup Validation Service】でチェックすると「there is no attribute “src”」とか、「there is no attribute “width”」でエラーが出ます。

最新の「Dreamweaver CS3」では対応されてるかもしれないが、未だ旧バージョンを使用してる場合に、Flashを挿入したときバリデータでエラーを出さないようにするためには次のように修正する。

１．まずは、「embed」タグを消去する。

「embed」タグはXHTMLでは使えないタグなので削除

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="500" height="200" title="SlideShow">
  <param name="movie" value="SlideShow.swf" />
  <param name="quality" value="high" />
</object>

２．「classid」要素を削除し「type」要素に変更

「classid」要素の代わりに、MIME typeを指定する「type=”application/x-shockwave-flash”」に変更する

<object type="application/x-shockwave-flash" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="500" height="200" title="SlideShow">
  <param name="movie" value="SlideShow.swf" />
  <param name="quality" value="high" />
</object>

３．「codebase」要素を削除し「data」属性に変更

「data」属性にmovieのvalueと同じFlashへのパスを追加しないと表示されないので追加。

<object type="application/x-shockwave-flash" data="SlideShow.swf" width="500" height="200" title="SlideShow">
  <param name="movie" value="SlideShow.swf" />
  <param name="quality" value="high" />
</object>

以上で、W3CのXHTML（Valid）規格に準じたFlashソースの書き方でした。