fladdict.net blog: HATENA-TUBEの技術的な話
なんか予想より好意的に受け入れられてほっとした、HATENA-TUBEのテクニカルなお話。 みなさんHATENA-TUBEをajaxだと思ってますが、実は非同期通信なってまったくやってなかったりします。 サーバー言語 サーバーはPHP5で組んでます。 使ってるプロバイダは他にも Perl, ColdFusion,Rubyと選択肢が豊富だったのですが、PHP5。 なぜなら、ColdFusionはインストールして２時間、Perlは１５分で挫折したからです。 コード書く前にどれだけ前提知識が必要なんだ！と問い詰めたい気分。PHP5は、Keitap先生がXMLのパースが楽と進めてくれたので採用。 ただ、シンタックスが「->」なのはキモくて困ります。 テンプレートエンジンにはSmartyというのを使いました。 使い方は本屋で、１万円使ってPHPの本３冊買って電車の中で覚えました。 データベース sq
Internet Explorer 7ベータ2の不具合からWebデザイン業界の混乱が見えてきた - 日経トレンディネット
次期Windows OS「Vista」に標準搭載される「Internet Explorer 7（IE7）」（日本語版）のベータ2が連休明けの9日公開された、という表向きの話はデジタルARENAのニュース「マイクロソフトがInternet Explorer 7 ベータ2を公開」を読んでいただくこととして、こちらはWeb業界には気になる、Web表示の互換性の問題に踏み込んでみよう。 まず、単純な話、IE7って使いものになるのか。なる。最初はメニューが見えないので戸惑うけど、Altキーを押せば出てくる。RSSリーダーの機能だってFirefoxとどっこいどっこい程度には付いている（笑）。マクロソフトの看板アプリケーションに抜かりがあるはずはない。 ところが、IE7で表示したとき、レイアウトが崩れてしまうサイトがいくつかあった。例えば、このコラムを書いている12日現在、「はてなダイアリー日記」はIE
効率よく育てやすくデザインする - tikeda's blog
デザイナーが1人だと効率のよいデザインワークってのが肝で最近意識してる事です。 CSS 言わずとしれてますが、後でページ追加したり、機能追加する時など上の項目をコピーして書き換えただけで、デザイナーじゃなくても項目追加を簡単にできます。 テキスト要素はなるべく画像にしない 特にタイトルとか画像にすると、後でページ追加したり項目を増やすのにデザイナーの作業が入るので。なるべく避けてます。 シンボルイメージはグローバルなイメージで サービスシンボルは一番の特徴を捉えるだけのシンプルに（ダイアリーだと「日記を書く」、人力だと「質問と回答」）。細かい特徴を含ませると後で追加された特徴や削除された機能がある度に手を加えないといけないので。 シンボル作りはillustratorで粘る 特にサービスのシンボルや利用頻度の高いアイコンはどんな使い方をどんなサイズで利用されるかが分からないので、photoh
画面レイアウトを考える その１モニターサイズとwebブラウザ可視領域について
実際にサイトをレイアウトする手始めの段階で必ず考えておかなければならないのが、ターゲットとするユーザーのサイト利用環境、ターゲットモニターサイズである。サイトを閲覧するために一般ユーザーが使っているPCのモニター表示解像度は、人によって大きく異なる。現在標準と言われている表示解像度は、XGA（1024×768ドット）だ。現在の標準的なPCがこの解像度を使っており、比較的古いタイプのPCでもこの程度のサイズをカバーしている。古いラップトップパソコンを使っているユーザーであれば表示解像度はSVGAの可能性があるが、PCの最小表示サイズVGAモード同様、新型のOSが対応するPCではあまり日常的に使われていないと考えてよい。また現在ではSXGA（1280×1024ドット）の解像度も優勢で、WindowsXPやMacOS X世代のOS対応機はこの環境に対応するものがほとんどだ（図１）。 モニターサイ
Niceformでエレガントなフォーム生成:phpspot開発日誌
badboy.media.design :: articles :: Niceforms Web forms. Everybody knows web forms. Each day we have to fill in some information in a web form, be it a simple login to your webmail application, an online purchase or signing up for a website. They are the basic (and pretty much the only) way of gathering information on the web. 配布されているJavascriptのファイルとCSSファイルを読み込むだけで、フォームデザインが早代わり。 HTMLに組み込む例） <scrip
CSSレイアウトのサンプル集:phpspot開発日誌
Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download! In November 2005 I presented on pro.html.it a three-part article on creating CSS layouts using techniques like negative margins, any order columns and in some case opposite floats. CSSで段組デザインをする際に、とても参考になるサイトを発見。 ＣＳＳでの段組レイアウトのサンプルがサムネイル付きで４０種類紹介されています。 お好みのデザインを見つけてソースを開いてコピー＆ペーストすればお好みのデザインを素早く作れますね。 ＣＳＳも
ブラウザによる見え方の違いをチェック | *LOVE IS DESIGN*
Webデザインや配色に役立つ（かもしれない）テクニック、便利なツールを紹介しています。 /*無駄にエロいのは仕様です*/ 01 About 02 Blog 03 Color 04 Design 05 Love 06 etc CSS をいじりだすと気になるのが、ブラウザによる見え方の違い。 このブログでは訪問者の約65％が Internet Explorer ユーザですが、最近は Firefox など Mozilla系や、Opera・Safariといったブラウザの方も増えているようです。 わたしはWinXP+スレイプニルという環境で更新作業をすることが多いのですが、はてなツールバーがスレイプニルでは使えないので、最近は Firefox をメインブラウザとして使用しています。（もうすっかりはてなっ子） CSS をいじったり記事をアップした後、スレイプニルで見た時は思ったとおりのデザインだったの
DOCTYPEとCSS - tikeda's blog
最近、同じCSS・同じブラウザなのに、あのサイトではできていて、このサイトじゃできないみたいな事があって思い当たってるのがページ「DOCTYPE」が違ってたって事が何度かありました。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> IEでIMGにpaddingがつかない FFでanchorのかかったimgにtext-decorationがつかない table内でのtext-alignが普通（？） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> IEでIMGにpaddingがつく FFでanchorのかかったimgにtext-decorationがつく ta
非CSSのデザインをCSSデザインにする会社 | 秋元@サイボウズラボ・プログラマー・ブログ
XHTMLized では、一画面分のウェブページを送ると、一週間以内に XHTML/CSS で同じデザインを作り直して返送する、という単機能に特化した有料のサービスを提供している。 「非CSSのデザインをCSSデザインにする『ネットサービス』」だったらすごいなあ、と思うが、残念ながら人力。さすがにプログラム的にそれを実現するのは難しいと思う。 一般のサイト訪問者から見れば、CSS デザインであろうとなかろうとたいした違いはないが、提供者側からみた多数のメリットを考えると、今からサイトを作るときに CSS デザインにしないことは考えにくいだろう。 コンテンツ製作者がデザインを気にする必要がなくなる(分業による効率化) デザイナーがコンテンツを気にする必要がなくなる(分業による効率化) 将来のデザイン変更にかかる工数の削減 コンテンツ追加時のデザイン再利用(工数削減) 検索エンジンにコンテンツ
CSS Showcase | CSS Navigation Menus, Tabs and CSS Navigation Techniques Showcase
Hint: due to my provider's problems this option was deactivated. Sorry for inconvenience. Aqua & Chrome by M.Samy Silva Orange, Blue by Daniel Constantin Blue & Red by V. Friedman Blue, Black, Pink by V. Friedman Make the world prettier! If you'd like to share your css navigation designs with other web-developers, use this template for creating the menus. Please make sure that your css-code valida
CodeWeb: [CSS]クロスブラウザな半透明フィルタ
IEには独自拡張のCSSでフィルターが使えます。こいつは便利なやつで半透明化やらグラデーションやら色々出来るのですが、なんだかんだ言っても独自拡張。互換性がありません。 しかし、アルファ値に限って言えばは他のブラウザでも独自拡張にて実装されているのでクロスブラウザ化することが出来ます。（クロスブラウザってJavaScript以外でも呼んでよかったけ？） [Internet Explorer対応] 0～100の数字で制御します。0に近づくほど薄くなります。 MacIEだと確か動きません。 img{ filter: alpha(opacity=20); } [Mozilla / FireFox / Netscape 対応] 0～1の数字、または0～100％で制御します。0に近づくほど薄くなります。 こちらは最新版のMozilla FireFox Netscapeで動作します。 -moz-opa
角丸テーブル簡単作成ツール
角の丸いテーブルの作成ツール。 画像あり、画像なしのパターンを選択でき、 角のデザインなども自由にカスタマイズできます。 [ 画像あり版 - 画像なし版 ]
CSSレイアウトの定石 WinIE6バグ回避法
CSSを使ったレイアウトをする際にWinIE6のバグを回避するための「定石」をまとめておきます。 とくに重要だと思うものは強調してあります。参考としてバグ辞典へのリンクも用意しました（つまり回避法を用いない場合にどんなバグが発現するか）。 フォントサイズ関係 font-sizeは%かpxで指定する。 キーワードで文字サイズを指定すると標準モードと互換モードで文字サイズが変わる(IE6) em単位で指定した値が文字サイズ変更後に正しく反映されない(IE6) ボックスモデル関係 widthと同時に左右borderや左右paddingを指定しない。heightと同時に上下borderや上下paddingを指定しない。 ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう （ブロックレベル要素を内包するボックスにはpaddingを指定しない。） 左右ボーダーとパディングを設
mixiのデザイン変更から学ぶ、ウェブサイトの最小横幅を800px以下にすべき理由 : akiyan.com
mixiのデザイン変更から学ぶ、ウェブサイトの最小横幅を800px以下にすべき理由 2006-02-09 mixiのレイアウトが大幅に変更された。右側にサイドバーが出現して、全体の横幅が大きく広がったのだ。全体の横幅は900pxほどだ。このため、私の環境ではブラウザの横スクロールバーが現れるようになってしまった。以下がその様子だ。 これはユーザビリティ的にかなりよくない状況だ。横スクロールは可能な限り避けなければならない。なぜなら多くのユーザーは横スクロールすること自体に不慣れだから。 しかし、画面を見てお気づきの方もいると思うが私はWindowsのタスクバーを縦に配置している。このレイアウトはマイノリティな類であろう。このレイアウトのためにブラウザの横幅が縮まっているので「それは例外だ。みんなブラウザの幅は900px以上にしてるよ」という声が聞こえてきそうだ。しかしこれには反論の余地があ
TinyMCE JavaScript Content Editor - naoyaのはてなダイアリー:
とある友人に教えても経ったTinyMCEという WYSYWIGWYSIWYG な HTML エディタライブラリがやばそう。 JavaScript で記述された LGPL でオープンソースな クロスプラットフォームの 多言語対応もしてて 簡単に使える ライブラリ。似たようなものに htmlArea というのがあって結構昔に話題になってたんですが、導入がめんどくさかったりブラウザによってはまともに動かなかったりとか色々面倒な感がありました。TinyMCE の方はと言いますと、Installation instructions にもあるとおり、 <html> <head> <title>TinyMCE Test</title> <script type="text/javascript" src="/js/tiny_mce/tiny_mce.js"></script> <script type=
ヤコブ・ニールセンによる 「ブログデザインの間違いトップ10」 - モジログ
先日の「Top Ten Web Design Mistakes of 2005」（和訳）が注目を集めていたヤコブ・ニールセンが、ブログ版「デザインの間違いトップ10」を発表した。 Jakob Nielsen's Alertbox - Weblog Usability: The Top Ten Design Mistakes http://www.useit.com/alertbox/weblogs.html 以下がそのトップ１０。 （近々日本サイトに和訳が載ると思うので、タイトルだけ） 1. No Author Biographies 著者のバイオグラフィーがない 2. No Author Photo 著者の写真がない 3. Nondescript Posting Titles 記事のタイトルが説明的でない 4. Links Don't Say Where They Go リンクが行き先に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Buttonator
Online Diagram Software - Gliffy
ユーザビリティコラム：Jakob Nielsen博士のAlertbox
CSSによる段組（マルチカラム）レイアウト講座