開発者が知っておくべき、6つのUIアーキテクチャ・パターン - ＠IT
.NET開発者中心 厳選ブログ記事 開発者が知っておくべき、6つのUIアーキテクチャ・パターン ―― 「matarillo.com」より ―― 猪股 健太郎 2011/12/15 「.NET開発者中心 厳選ブログ記事」シリーズでは、世界中にある膨大なブログ・コンテンツの中から、特にInsider.NET／.NET開発者中心の読者に有用だと考えられるブログ記事を編集部が発掘・厳選し、そのブログ記事を執筆したブロガーの許可の下、その全文を転載・翻訳しています。この活動により、.NET開発者のブログ文化の価値と質を高め、より一層の盛り上げに貢献することを目指しています。 Martin Fowler氏の『GUI Architectures』を訳して公開しようと思ったのだが、FAQページに「PofEAAの続編などは商業出版する予定なので翻訳はしないでほしい」と書いてある。なので翻訳の公開はやめて、「
Live Simply
2020年春に妻を自死で亡くし、シングルファザーとなりました。遺された一人息子と生活する中で感じたこと、思うところを記事にしています。
ページフッタに置いてスマートに使えるfacebook風管理パネル実装チュートリアル:phpspot開発日誌
Facebook Style Footer Admin Panel Part 1 ページフッタに置いてスマートに使えるfacebook風管理パネル実装チュートリアル。 ページ下部にツールバーとして表示される管理パネルの実装チュートリアルです。 友達一覧のウィジェットもカッコいいです。 デザインがクールにページになじむのでどんなレイアウトでも合いそうなのがいいですね。 管理パネルだけといわず、様々な用途に使うことができそうです。 今回がPart1ということで全部解説されているわけではありませんが、こういうUIが欲しいというときに参考にできそうなので覚えておいてもよさそうです。 関連エントリ 有償だけどかなりカッコいい管理画面のテンプレート「Simpla Admin」
ブラウザごとの面倒で分かり辛いCSSハックとはサヨナラできそうな「PHP CSS Browser Selector」:phpspot開発日誌
ブラウザごとの面倒で分かり辛いCSSハックとはサヨナラできそうな「PHP CSS Browser Selector」 2009年09月14日- ブラウザごとの面倒で分かり辛いCSSハックとはサヨナラできそうな「PHP CSS Browser Selector」。 CSS の記述の単純化 PHPでUserAgentを解析し、<html> に class を振ってしまうことで、CSSの指定が次のように楽になります。 /* IEのみに適用 */ .ie body { background-color: yellow } /* IE7のみに適用 */ .ie7 body { background-color: orange } /* geckoベースのブラウザのみに適用 */ .gecko body { background-color: gray } 使い方 (1) 必要なPHPファイルをインク
jQueryで実装する進捗グラフ付き複数ファイルアップローダー:phpspot開発日誌
Multiple File Upload With Progress Bar Using jQuery jQueryで実装する進捗グラフ付き複数ファイルアップローダー。 次のようなマルチファイルアップローダーが実装できるjQuery＋PHPなソースが公開されています。 アップロード部分には swfupload を使っているみたい。 サイトではjQueryを使っていて、こういう機能を実装したいという場合に覚えておくと使えるかも。 関連エントリ jQueryでチェックボックスをすごい形にカッコよくしちゃう方法 jQueryでリアルタイムにCSSを書き換えるサンプル jQuery用のGUIコンポーネントプロジェクト「mbideasproject」がすごい ナビゲーションのUIはこれで完璧かもなjQueryプラグイン集
PHPとjQueryのAjax連携の学習用チュートリアル:phpspot開発日誌
Learning jQuery: Submit form PHP Mac style Modal window | AEXT.NET PHPとjQueryのAjax連携の学習用チュートリアルが公開されています。 macスタイルのログインフォームからjQueryでAjax送信してリアルタイム認証を行うサンプルです。 それぞれ簡単なコードになっているので入門にも最適で、かつ成果物もクール。 デモページ 入門としてだけでなく、サンプルとして応用して使ってみるのもよさそうです。 関連エントリ ナビゲーションメニューを1歩進んだものに引き上げるjQueryチュートリアル集 JavaScriptのウィジェット作成や各種メニュー作成等、便利なチュートリアル集のまとめ jQueryでアコーディオン作成のチュートリアル 無限に回転するカルーセルＵＩ実現用jQueryプラグイン実装チュートリアル
jQueryでチェックボックスをすごい形にカッコよくしちゃう方法:phpspot開発日誌
jQueryでチェックボックスをすごい形にカッコよくしちゃう方法が紹介されていました。 具体的なデザインは以下。もうチェックボックスの原型がないという、面白くて分かりやすいＵＩに調整されています。 マークアップ上も、次のように綺麗になっています。 実際のタグは、不可視にしちゃって、jqueryによって、on/off を切り替えればいいわけですから、まさに何でもありで、参考にして他にも面白く、使いやすいデザインはいくらでも作れるかもしれません。 jQueryによるクロスブラウザ対応が出来るので、昔のように神経質になる必要もないですね。 詳細は以下のエントリから参照。 Pretty checkboxes with jQuery | Aaron Weyenberg
これは注目！様々なタイプのCAPTCHAが作れるPHPライブラリ「Securimage PHP CAPTCHA」:phpspot開発日誌
これは注目！様々なタイプのCAPTCHAが作れるPHPライブラリ「Securimage PHP CAPTCHA」 2009年09月30日- Securimage PHP CAPTCHA - Free PHP Captcha Script 次のように、実に様々なタイプのCAPTCHAが作れるPHPライブラリ「Securimage PHP CAPTCHA」というのがあるみたい。 一種類のタイプだと解析していくと比較的簡単に破られてしまうのかもしれませんが、これならよりセキュアにCAPTCHAを実装できそうです。 ドキュメントなんかもしっかりしているようで導入も簡単そうです。 Ajax と session を使って実装しているようです。クイックスタートガイドはこちら 関連エントリ PHPで独自CAPTCHAを作るチュートリアル これは新しい妹CAPTCHA「妹認証」 PHPで使えるCAPTCHA
使えるユーザビリティーガイドライン10 – creamu
遅いエントリーですが、Smashing Magazineで使えるユーザビリティーガイドラインがまとまっています。 ざっとご紹介しますね。 1. フォームのラベルはフィールドの上がベスト study by UX Mattersによると、フォームのラベルはフィールドの上が理想的とのこと。多くのフォームで、ラベルはフィールドの左に置かれ、2カラムのレイアウトになっている。いいデザインだが、最も使いやすいレイアウトとは言えない。なぜなら、フォームは一般的に垂直方向に並んでおり、ユーザーは上から下に向かって入力していく。ユーザーは視線を下の方向に向けていくのだ。そのため、ラベルが左にあるよりも、同じ方向にある方が認識しやすい。 2. ユーザーの視線は人の顔に向く Webページを見るとき、人の顔や目に視線が行く。マーケッターにとっては、注目を集める有効なテクニック。ユーザーは画像の中の人の視線が向いて
PowerPointを使ってプロトタイプを作ろう·PowerPoint Prototyping Toolkit MOONGIFT
世の中には何でもPowerPointでやらないと気が済まないという人たちがいる。Excel使いがそうであるように、PowerPoint使いがいるのだ。余計なソフトウェアを購入するよりはよっぽども良いが、再利用性のない方法をとられても困る気はするのだが…細かいところは気にしないでおこう。 PowerPointを使ってアプリケーションの画面を作る そんなPowerPointウィザードな方々に送る、プロトタイプ作成ツールキットがPowerPoint Prototyping Toolkitだ。 今回紹介するフリーウェアはPowerPoint Prototyping Toolkit、PowerPointを使ってアプリケーションのプロトタイプを作成するツールキットだ。 PowerPoint Prototyping Toolkitは画面や画面を構成するオブジェクトを作成し、PowerPoint2007の
User Heat : どこが読まれているか見える！無料ヒートマップ・ツール
ヒートマップとは ヒートマップとは、温度を色で表すサーモグラフィーと同様に、ユーザーが注目している閲覧場所を赤緑青といった色で可視化する技術です。ユーザーのページ内行動を、マウスの動きから推定しています。 たとえば、 「ページをどこまで読み進めたのか(終了エリア)」「ページのどの位置を長く読んだのか(熟読エリア)」「ページのどの位置をクリックしたのか(クリックエリア)」を見える化します。これを利用すると、「読んでほしいのに読まれなかった箇所」、「意外とクリックされているリンクやボタン」「クリックしてほしいのにされていないリンクやボタン」などを発見でき、従来のページビュー(PV)やユニークユーザー数(UU数)などのアクセス解析だけではわからなかった改善点を、素早く浮き彫りにできます。 終了エリア 熟読エリア クリックエリア ヒートマップのメリットはどんなものですか？ ヒートマップツールを使う
無料でウェブページ内のユーザーの行動を可視化してヒートマップを見せてくれる「ユーザーヒート」
通常のアクセス解析は単純にどのページがどれだけ見られたかという程度のものですが、実際にユーザーがどこをクリックしているのか、どこから見始めているのか、どこを重点的に見ているのかなどを分析する「ヒートマップ」を無料で作成してくれるのがこの「ユーザーヒート」です。 実際にどのような感じで解析できるのかというサンプルは以下から。 ユーザーローカル、Webページ内の行動を分析する無料アクセス解析ツール「ユーザーヒート」を公開 User Heat : どこが読まれているか見える！無料ヒートマップ・ツール http://userheat.com/ マウスの軌跡・クリックが多い場所・熟読エリアの3パターンの可視化が可能となっており、それぞれ以下のようになります。 マウストラック分析。ページが表示されてから離脱するまでの訪問者のマウスの動き（ページを開いたときのマウス場所や移動箇所、クリックした場所）を表
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.iaspectrum.net/2011/12/23/designing-interfaces-2nd/
Loading
Future of Screen Technology
IDEA * IDEA
テーブル操作に使えそうなjQueryプラグイン色々:phpspot開発日誌
Engadget | Technology News & Reviews
IDEA * IDEA
Facebook風のサムネイル付きサジェストボックスを実装するサンプル:phpspot開発日誌