RIAトピックス
リッチクライアント/RIAを主テーマに取り扱います。Flex、Ajax、AIR、Silverlight、JavaFX、etc。
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

画像を一切使わずにCSS3だけでドラえもんを描いてみた!
画像を一切使わずにCSS3だけでドラえもんを描いてみた! 【裏技shop DDより】
http://shopdd.blog51.fc2.com/blog-entry-932.html

先日、HTML5を使用した凄いサイトをいくつか紹介(下記参考リンク参照)しましたが、今回はCSS3を使用して凄い事をしているサイトを見つけたので紹介致します。
見ていただければわかると思いますが、XHTML+CSS3のみを使用してドラえもんを描いています。(直リンク

その証拠に右クリックメニューに「画像を~」がありませんし、ソースを見てもimgタグは見当たりません。
呼び出されているdora3.cssというcssを覗いてみると、675行にも及ぶCSSを観覧することができるので興味のある方は解析してみはいかがでしょう?

又、このドラえもんの作者は画像を一切使わないCSS3で製作したサイトというのも作成しています。
グラフィカルなサイトであり、一見それとはわからないですがソースを見たりすると確かに画像を使っていないようです。
こちらも一見の価値ありなので合わせてご覧になってください。(下記リンク参照)




画像を一切使わないCSS3で製作した新サイト「NetaGear」! 【裏技shop DDより】
http://shopdd.blog51.fc2.com/blog-entry-931.html

RIAトピックス HTML5であそんでみたクエスト
http://mfria.blog106.fc2.com/blog-entry-1790.html

RIAトピックス HTML5の可能性を肌で感じる事ができるWebサイト
http://mfria.blog106.fc2.com/blog-entry-1793.html

いま,見ておきたいウェブサイト 【gihyo.jpより】
http://gihyo.jp/design/serial/01/website-pickup/0016

K.Y

テーマ:コンピュータ - ジャンル:コンピュータ

テキストボックスで表示しきれないテキストを表示するスタイルシート
[CSS]テキストボックスで表示しきれないテキストを表示するスタイルシート 【コリスより】
http://coliss.com/articles/build-websites/operation/css/css-text-overflow.html

文字が画面端で見えなくなってしまったり、デザインの関係で文字をそこで切ってしまいたいという事はよくあると思います。
そんな時に使用できるのが今回紹介するスタイルシートです。

「text-overflow:ellipsis;」と指定することで、テキストボックスに入りきらない部分は「...」と表示されます。(firefox3.6.3では未実装)
そして、spanタグのhoverでカーソルが上に来たときに全文が表示するように指定しているようです。

ユーザビリティとデザインを両立するのは難しいですが、このようにマウスオーバー時の挙動を変化させる事などで改善は可能です。
どちらかをとると言う選択を行う前に、両立を行う手段を考えてみてはいかがでしょうか?

K.Y

テーマ:システム開発 - ジャンル:コンピュータ

HTML5の可能性を肌で感じる事ができるWebサイト
HTML5 Canvas and Audio Experiment 【Ruby on Rails Entwicklungより】
http://9elements.com/io/projects/html5/canvas/

先日、HTML5は凄いと言うことで「HTML5であそんでみたクエスト」を紹介しました。
しかし、上記URLにアクセスすることでHTML5の新たな凄さを知る事になると思います。

ここのサイトでは、HTML5で新たに定義されるCanvas要素やaudio要素などを使用した上で、processing.js(ブラウザ上でプログラミング言語Processingが実行できる)、Modernizr(ブラウザがCSS3の各種属性に対応しているかを確認できる)などのJavascriptを組み合わせて実現しているようです。

尚、このWebサイトはTOPから凄いので色々見てまわると面白いです。(右クリックするとFlashのメニューが出ない驚きを感じる事ができます)

HTML5と言われてピンと来ない方、凄さを実感してない方はご覧になってみるとよい刺激になると思います。



RIAトピックス HTML5であそんでみたクエスト
http://mfria.blog106.fc2.com/blog-entry-1790.html

いま,見ておきたいウェブサイト 【gihyo.jpより】
http://gihyo.jp/design/serial/01/website-pickup/0016

RIAトピックス HTML5 基礎知識
http://mfria.blog106.fc2.com/blog-entry-1751.html

HTML5.JP - 次世代HTML標準 HTML5情報サイト
http://www.html5.jp/

HTMLで図まで描ける!進化した「HTML5」ってどんなもの? 【はてなブックマークニュースより】
http://b.hatena.ne.jp/articles/201002/795

Flashだとここまでできる! HTML5とFlashの機能比較 【ClockMaker Blogより】
http://clockmaker.jp/blog/2010/02/flash-vs-html5/

HTML5サンプル集 【(株)あゆた へようこそより】
http://ayuta.co.jp/html5-samples/

K.Y

テーマ:システム開発 - ジャンル:コンピュータ

より明るいカラー、より暗いカラーを教えてくれるオンラインサービス -0to255
より明るいカラー、より暗いカラーを教えてくれるオンラインサービス -0to255 【コリスより】
http://coliss.com/articles/web-services/online-lighter-and-darker-colors-0to255.html

マウスオーバー、マウスアウト時の画像変更などに使用できると思われるサービスの紹介です。
サイトの基準となる色というのは決まっていると思いますが、その基準色の強弱を付ける際に参考にできると思います。

色の明るさ(明度)を変えて色を表示してくれるので、様々な用途に使用できます。
色に困った際には参考にしてみてください。



WEB色見本 原色大辞典 【WEB色見本 原色大辞典より】
http://www.colordic.org/

K.Y

テーマ:システム開発 - ジャンル:コンピュータ

QRコード~人間には読めないURLの罠
QRコード~人間には読めないURLの罠 【Web担当者Forumより】
http://web-tan.forum.impressrd.jp/e/2009/02/19/4418

QRコード

↑のようなQRコードはカメラで撮るだけで長いURLを打ち込むことなく、Webサイトに誘導できるため、雑誌や電車広告、blogなどモバイルでアクセスするにあたり、欠かせない手段となっています。
しかし、人が判別できないためどこに繋がっているURLなのかわからないという危険性をはらんでいます。

今はあまり話題となっていませんが、張ってあるポスターのQRコードの上から不正なURLのQRコードを貼り付けるなどの事象もあるようです。
これはフィッシング詐欺やウイルスなどの問題に直結します。
悪意のある人達が動き始める時期も近いでしょう。

それを防ぐためには以下のような対策を行って、正規のQRコードであることをユーザにアピールしていく必要があります。

・QRコードの前後にURLを記述し、URLの確認ができるようにする。
・QRコード自体に文字を埋め込んで不正なQRコードでない事がわかるようにする。


被害が出てから対応するのではなく、予防を行うことで被害を抑えていきたいですね。



QRコード(二次元バーコード)作成【無料】 【株式会社シーマンより】
http://www.cman.jp/QRcode/

K.Y

テーマ:システム開発 - ジャンル:コンピュータ

YOUもCSSプロパティ覚えてJavaScript楽しんじゃいなよ
YOUもCSSプロパティ覚えてJavaScript楽しんじゃいなよ 【三等兵より】
http://d.hatena.ne.jp/sandai/20100321/p1

Web製作を行うにあたり、CSSは欠かせない要素です。
しかし、CSSはプログラマーには取っ掛かりが難しくなかなか身につかない要素であることは間違いありません。

そんな事を思っているあなたにお勧めしたいのが今回の紹介記事です。
タイトルのまま内容もハイテンションで進んでいくので読みにくい所はありますが、実際のソース例を表示しながら重要な要素を説明してくれています。

また、Javascriptとの連携も兼ねて紹介しているため理解しやすく、実際に使用する際にも参考になると思います。

CSSに苦手意識を持っている方はこの記事をキッカケに克服してみてはいかがでしょうか?



とほほのスタイルシート入門 【とほほのWWW入門より】
http://www.tohoho-web.com/css/index.htm

スタイルシートとJavaScript - HTMLタグリファレンス/Tips 【eWeb - ホームページ作成支援,Web Designより】
http://html.eweb-design.com/0104_sj.html

K.Y

テーマ:システム開発 - ジャンル:コンピュータ

HTML5 基礎知識
HTML5 基礎知識 【web探偵団より】
http://d.hatena.ne.jp/hebita164/20100306/1267889468

HTML5の新要素と逆に廃止になった要素が一覧形式でまとめられています。
廃止された要素については代替手段も提示されているため、わかりやすいです。

frame、font、uなど、いまだよく(?)使用されているタグも含まれているため、目を通しておく必要があるでしょう。

又、TIPSとしてHTML5非対応のブラウザでも正しく表示する為のCSS定義も紹介されています。




HTMLで図まで描ける!進化した「HTML5」ってどんなもの? 【はてなブックマークニュースより】
http://b.hatena.ne.jp/articles/201002/795

HTML5.JP
http://www.html5.jp/

HTML5 - Wikipedia 【Wikipediaより】
http://ja.wikipedia.org/wiki/HTML5

大幅に進化した次世代 HTML 規格「HTML5」とは? 【japan.internet.comより】
http://japan.internet.com/busnews/20091027/8.html

HTML5 における HTML4 からの変更点 【Web標準Blogより】
http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/

K.Y

テーマ:システム開発 - ジャンル:コンピュータ

テキストリンクは「ユーザにわかる言葉」で
テキストリンクは「ユーザにわかる言葉」で 【ユーザビリティ実践メモより】
http://www.bebit.co.jp/memo/2010/03/post_170.html

毎度おなじみのユーザビリティ実践メモから、テキストリンクの張り方についての説明です。
コンテンツの内容が素晴らしいものであっても、そのコンテンツへの誘導が上手く行っていないと来訪者の数は大幅に変わってきます。
画像や動画などのリンクも増えてきていますが、やはりテキストリンクがメインになっているのは間違いないでしょう。
詳細は記事を見て頂きたいですが、改善前と後を引用させて頂きましたので比べてみて下さい。
一目瞭然で改善後の方がリンク先に訪問してくれるのがわかると思います。
ある意味コンテンツの内容よりも重要になってくる部分なので、気にかけて行きたいですね。

~~~改善前のリンク↓~~~
■スイーツ
アメリー
ベアトリス
クローデット
ジョゼフィーヌ
ヴィルジニー

~~~ここまで~~~

~~~改善後のリンク↓~~~
■洋菓子
香ばしい焼きチーズケーキ(アメリー)
甘さ控えめの栗の渋皮煮(ベアトリス)
ふわっと軽い紅茶シフォン(クローデット)
しっとり生地のロールケーキ(ジョゼフィーヌ)
かぼちゃのモンブラン(ヴィルジニー)

~~~ここまで~~~

K.Y

テーマ:システム開発 - ジャンル:コンピュータ

謝ったら負け!? アイコンも使い方次第
謝ったら負け!? アイコンも使い方次第 【ユーザビリティ実践メモより】
http://www.bebit.co.jp/memo/2009/06/post_148.html

ユーザの入力が誤っている時に、検索機能で検索結果が表示されなかった場合。
ユーザに実際にデータがないのではなく、自分の入力が誤っていた事に気づいてもらい、再度検索を行ってもらうための一案です。

検索というのは様々な方法がありますが、1度検索結果が表示されなかった場合にその様々な方法が使用される事は稀です。
例えばサイト内検索でAというキーワードで検索してなかった場合には、大抵はそのサイトには目的の情報が存在しないと思い別のサイトに移動してしまいます。
そんな時に再度検索してもらう方法の紹介です。

実際に見てもらえればわかると思いますがアイコン一つで印象が随分と変わり、検索失敗の原因がユーザ自身が入力した事にあることが気づいてもらいやすくなると思います。

K.Y

テーマ:システム開発 - ジャンル:コンピュータ

秀逸なユーザビリティのボタンをデザインするための5つの秘伝
秀逸なユーザビリティのボタンをデザインするための5つの秘伝 【GIGAZINEより】
http://gigazine.net/index.php?/news/comments/20090106_action_buttons/

目的のコンテンツにアクセする、検索を行う、登録するなどWebサイトにボタンは不可欠です。
そんな重要なボタンアイコンに関するポイントは以下の5点のようです。

・色
・場所
・説明
・大きさ
・余白


ボタンの場所がわかりずらかったり、ボタンと気づかなかったりした場合にはユーザの意識はすぐに別の所に移ってしまいます。
そんな事がないように気をつけて行きたいですね

やってしまいがちなユーザビリティのミスとその解決方法
http://mfria.blog106.fc2.com/blog-entry-1680.html

なぜその見出しはユーザに気づいてもらえないのか
http://mfria.blog106.fc2.com/blog-entry-1677.html

K.Y

テーマ:システム開発 - ジャンル:コンピュータ

copyright © 2005 RIAトピックス all rights reserved.
Powered by FC2ブログ.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。