ITを表現する

別の古い学校のメモリ補足...

なぜ我々はwindos.status有効にするか？
JavaScriptでは、あなたがデバッグするための何かを持っているときに悪夢になる可能性。 Firefoxは、Firebugののthats私たちの生活が容易になり、また、JavaScriptの中で最も人気のデバッグ技術の投票は（） "ALERT"に行かなければならないように、いくつかの便利なアドオンを持っています。 Anywaz！ ALERTは、MIS-振る舞いJavascriptが単なる社会運動では良いアイデアですデバッグしない追加するときにいくつかのインスタンスがあります。 例えば！ あなたは、その位置に警告する必要がありますdragbleアイテムを持っている.... NO NO！ それを行うにはいけない！ お前はただ無限のアラートを取得するか、実際にドラッグ可能にDRAPことができる習慣。 よく！ あなたは、はるかにうれしい！、ステータスバーにデバッグテキストを書き出すかもしれませんもっと良い状況ではありますが、...私を信じて！ その体験！

デフォルトではIEは構文"window.status = 'デバッグするには何か" " を使用してブラウザのステータスバーへの書き込みを残したが、Firefoxにはありません。 したがって、Windowsのステータスの変更を有効にするには、次のいずれかを行うことができます。

約開きます：configのブラウザで（タイプに"about：config"このアドレスバーに）、および検索
DOM。disable_window_status_change。 これをfalseに変更する...ちょうどその状態を切り替えるには、エントリをクリックします。

あるいは

" ツール→オプション→コンテンツ→JavaScriptを有効にする/詳細は→Changeステータスバーのテキスト "

また、あなたは短い構文、すなわちステータスを使用している場合=しかしFireFoxで"いくつかのデバッグテキスト'... JavaScriptでステータスバーに書き込むために、IEだけでokです、あなたは完全な構文すなわちwindow.status ='で使用しなければならないことに注意してくださいデバッグするには何か"

どちらも私は、ユーザーインターフェイス（UI）開発にとって非常に新しいですしないも私はベテランと私はいつもそれを置くとして、私は後悔して、より多くのデザイナーに比べてUI開発者のプロファイルに適合します。 まあ！ 私はについて何を書いていた？ 私はUIデザイン（プロのデザイナーが休日になっている場合）ビットになるかと...しばらくの間はすべての今して、現在（任意の小さくない年である必要があります）、私は常にカントストップは私のデザインはする必要があるかどうかを考える正しくcomplientかどうかである（心から、私はあまりにたい場合は、100％の標準への準拠を逆説ことができませんでしたが）。 それから私は自分自身を伝え、何がらくた！ ...デザインは、それが（技術的であるため）、訪問者が逃げるように...またはバウンスべきではない、シンプルな素敵な、主に使用可能なように見える必要があります。 素敵なテーブルレスCSSレイアウトは、すべてのスマートハイパーテキストとウェブページの皮膚の下にカスケーディングスタイルシートを知らない訪問者、...大失敗するに良い何だろう！
それが格好よく見えて、使いやすいはず...そしてすべての規格のものを付属しています。

私はaccrossにのジェイソン·フリードによるこのブログエントリstumbbled 37の信号を 2004年に似たようなことを書いて、ほぼ5年間、私を信じて（知って37の信号はBasecampやキャンプファイヤーなどのようないくつかの素晴らしいWebアプリを作成しましたoncesではありませんている人用）ずっとその...私は完全に彼はまた、事実を言うとしなければならないものに同意するとして、私は彼のポストを読むことが幸せだったので、変わっていないと、彼女はちょうど彼の直感について語っているかについて確認されていませんので、私のものです

ジェイソン·フリード： "あまりにも多くのCSSとXHTMLと規格の話とアクセシビリティと十分な人々について話をしない方法はありません。 CSSと標準準拠のコードは単なるツールです - あなたは、これらのツールを使用してビルドするかを知っている必要があります。 偉大な、私はあなたのUIは、テーブルを使用していませんうれしいです。 だから何？ それはまだ人々が彼らの目標を達成することはできません、誰が気に。 Web標準はすばらしいですが、人々の独自の基準では、物事が（そしてそれがオンラインで行うにはまだ難しすぎ）やり遂げるが含まれています。

この時間を除いて、そのコード良く見える - UI設計者は同じ古い基本的なミス "の反対側の人間を忘れ"を行っています。 人間 - ないコードバリデータ - を使用するインタフェース "を参照してください。

レジに進むジェイソン·フリードの記事全文

DISCALIMER：これは、我々はすべてで基準について悩むべきではないという意味ではありません。 基準があり、可能な限り、それらに固執する良いです。 私たちは良いUIデザインは、常に100％の基準Complienceまたはその逆を意味するものではないことを理解する必要があります....

私の教訓の私のリストから、私はいくつかのUIの設計と開発ゴールデンルール... HERESにトップ10に従ってください...あなたがあまりにもそれに従っていないことを...

1。ユーザの注意を払ってください。 ユーザーが作成またはあなたのサイトを破ることができる。 ユーザーがウェブサイトを使用することの全くできない合計idoit、ように見えるようDONOT。 それはBADです！

2。シンプルさと、プライマリguidlinesを使用しての使いやすさを保持します。 画面上であまりにも多くのものは、ユーザーが混乱したり、元のタスクから気が紛れることが高い確率で。

3 LIMITSである... DONOTは、ユーザビリティ、アクセシビリティや標準にあまりにもお楽しみください。 事実上の標準を使用し、それらをチームに理解させる。 これは、製品の右側の一貫性を確保する

4要件をプロトタイプ。 ますので、ご使用のインターフェースが豊富で、これらの日、プロトタイピングは、常に単純なワイヤーフレームを作るよりも優れていると、後者はまともな相互作用は無効となり、それがクライアントに開発されている最終製品の鮮明な画像を提供するために失敗しました。 常に、それは最終的な成果にプロトタイプを変換する方が簡単です。 また！ プロトタイピングで任意の相互作用の問題は、開発サイクルの早い時点で問題視することができます。

5。デザインとインタラクションの一貫性は非常に重要です。 予期しない相互作用およびギズモを使用してユーザーを混乱させるDonot。

6。あなたの"デザインのミッション·ステートメント"を理解する。 遠かっは、設計ページbeignの主な行動に焦点を当てています。 また、ページ上のsecondayアクションのリストを作り、それらに優先順位を設定します。

7。サイトのユーザーに適切なフィードバックを提供します。 AJAXの周りに設計されたウェブサイトのほとんどは、ページへの変更についてユーザーに視覚的な手がかりを提供しています。 ユーザは、彼が実行するすべてのタスクの完了の承認を与えなければなりません。 Donotは、例えばのために、ユーザーが待機して推測します。 ファイルuplaodsの進行状況インジケータを提供しています。

8。適切なコントロールを使用します。 例えば、使用する場合のみ、donotは、ユーザーが選択ボックスを使用して、200都市のいずれかを選択できるように小さなリストのドロップダウンリストを選択します。 ボタンとリンクの違いを理解しています。 リンクやボタンが異なる目的を持っているdonotは、他のための1つを使用しています。 簡単にページと相互作用するように右のコントロールを提供しています。 メニューを使用することは避けてください、それはより多くの、2つのレベルの深さがあります。 車輪を再発明しない。 標準コントロールを使用して、非常に必要に応じてカスタマイズすることができます。 それらが作成および使用accrossサイトの準備ができて、独立してテストすることができますので、あなたのサイトに最初に手に必要なすべてのカスタムコントロールを定義します。

9 Donotは、デザインにあまり反復します。 忘れないでください！ 製品全体は、単独でより多くのその設計をされています。 設計の反復のためのプロジェクトのスケジュールに適切なタイムラインを構築し、それに固執する。 反復は、私たちが働き、どのような、問題点をピックアップしません何かを見つけるのに役立ちます。 良いインタフェースには時間がかかりますので、設計の繰り返しが直接リワークに等しく鞭ように、開発サイクルの冒頭の反復のための時間を提供しています。 あまりにも多くのリワークは、期限をjeopradize可能性があります。

10後ろに座ると、時にはユーザーのように考える。

私は状況がそれをcommanedので、周りに掘ってあったことをJavascriptの策略の別の小さなピースはHERESに。 私のWebサイトのいずれかで、私は二回 "windows.onload"を実装しなければならなかったこのような状況があった。 私のような未熟な心（私は正直なところ私はjavascriptのフレームワークやライブラリを使用しているので、私は自分自身...悲しいですが本当で、単純な物事を行うには忘れられたました、と言わざるを得ない）となりましたでしょうまず最初に、次のメソッドです。 ...

にwindow.onload = onloadfn1。
にwindow.onload = onloadfn2。
にwindow.onload = onloadfn3。
等..

残念ですが、これは文句を言わない仕事... Javascriptの多くの実行科学を議論したくない...しかし、私の最近の経験によれば、最後の関数（onloadfn3）病気が実際に実行されます。

通常の状況では、私（私は後で少し話をします）とは違って...あなたはmutlipleのonload関数を実行するには、次のいずれかを行うことができ....

このようにまたは何か

関数doOnLoad（）{
         onloadfn1（）;
         onloadfn2（）;
         onloadfn3（）;
 }
にwindow.onload = doOnLoad。

私の現在の状況については、私は上記のいずれかを使用することはできません。...
なぜ私は、単一のonload関数内の2つの関数を呼び出すことなく、windows.onload回呼び出す必要がありましたか？ ここに私の問題文をざっと見ては...

"個人用サイトのページは、WordPressのテーマのように構成されています.... つまり、すべてのサイトのページに含まれる共通のheader.phpのとFooter.phpがあります。 いくつかの共通のonload関数を実行するFooter.phpのonload関数のimplementaionがあります。 とは別に共通のonload関数によって行われたものから自分のONLOADの何かに必要があるいくつかのページがあります。 私はにwindow.onloadハンドラに直接、コールバック関数を割り当てる場合は、 "Footer.phpで以前に割り当てられた、コールバックを介して、乗ります。

.... 私の問題は理解されている ？

よく！ 私が見つけなかったことをいくつかのソリューションがあります。 彼らはすべての非常に類似しており、主にサイモン·ウイルソン（で指定された溶液のimplementions http://simonwillison.net/2004/May/26/addLoadEvent/ ）...

ソリューション：

単にサイトにこのjavascriptのコードを追加します。...

機能addLoadEvent（FUNC）{
     VAR oldonload =にwindow.onload;
    もし（typeof演算にwindow.onload！= '関数'）{
       にwindow.onload =関数
     する} else {
       にwindow.onload =関数（）{
            {（oldonload）の場合
                   oldonload（）
           }
           func（）を
        }
    }
 }

代わりに、通常の "windows.onload"のそれを呼び出す

 addLoadEvent（FunctionToRunOnPageLoad）;
 addLoadEvent（関数（）{
ページのロード*上で実行する/ *さらにコード
 }）; 

このコードスニペットの利点は...
1。 主に、それは以前の定義をオーバーライドすることなく、あなたのコードの別々の部品から呼び出され、複数のwindows.onloadイベントを持っていることができます
2。 それは本当に控えめです。 それはあなたの他のスクリプトとファイル内、または別のファイルに配置することができます。
3。 それはにwindow.onloadがすでに設定されている場合でも機能します。

私はこの1つは、あなたは、Googleで見つけることがいたずら書きなどの多くの私達のUIとスクリプトライターになると考え日常的にこれを実行する必要があり、その中にPHPコードスニペットのピースは（PHP）のビットが含まれておりますSmartyのテンプレート（。TPL）。 私は簡単に/人気のクエリ、さらに困難に正確な答えを見つけるために...百万、検索結果が、それらのほとんどは、 "ファイル"にrefferedは、Smartyに含まれている...これは、次の構文を持って実現

{ファイルをインクルードする= "/ header.phpを含む"}

これは実際には細かいファイルとして含むが、テキストとして、私が欲しかったのはインクルードファイルの結果であった。（上記は、テンプレートファイル内のテンプレートが含まれて使用されます）。 最後に、ビットpersiveranceと.... 既に1を発見したやりなさい場合、私は私の要件への答えだったslighty変更された構文、...ので、ここでは...に出くわし

は、{include_phpファイルには、= "/ header.phpを含む"}

別のクイックちぇ。 ここでCSSの電源を使用してシンプルで素敵な何かがある...しかし、始まることは困難concieve（それはきっと私ではありませんでした）であった。 ドロップシャドウを追加すると、PhotoshopのANF花火などのような編集ツールをいくつかの画像を使用して、私たちの多くのためにケーキのピースはあるかもしれ
私はCSSを使ってドロップシャドウを選んだ理由は、通常、アプリケーションのページデザイン/ HTMLを作成するときに、要件が反復しておく、ということです。 私は何を意味することは、多くのイメージを持つ既存のWebサイトでは、のfreindsリストまたはイメージギャラリーの表示であるような、それはそのために、再処理に既に影を追加または削除するには、アンロードされた画像の全体の負荷が困難になり、ある問題。
これらの余分部門または追加するには、HTMLテキストの作成中に少し前進思考を行っているそうだとすれば、通常状況では、XSL、PHPでこれらのアイコン/サムネイルを生成ループロジックを持っているということです。 JAVAやその他のプログラミング/スクリプト言語は、いつでも追加することができますし、ちょうどショーやこれまでの要件を変更するクライアントごとに、CSSのdisplayプロパティを使用して、これらの影を隠すことの問題です...私は前方に考え、この種を行ってやりなさいこの前に...しかし、ahevは今始まった！

以下の例では、元のイメージは影は無料ですし、必要に応じてdropshadowsが適用されます！ また、私についての私の以前のツタンカーメンのトリックを（Well!これらは、おそらくチュートリアルの最短様々ですので、それが唯一のそれらの"ツタンカーメン"の呼び出しに正当化される）を使用して、少し余分を行っているCSSのClipプロパティを使用して見せびらかすためだけに

オリジナル画像

CSSのドロップシャドウの結果

デモ表示 | ダウンロード、ソースファイルを

なぜ私はこれを理解したいか？ ヒュム...！！

CSSの作家のほとんどは、そのCSSのClipプロパティは、おそらくほとんどの未使用のCSSプロパティの一つです同意するだろう。 それはあまりにも私にとっては本当だったので、私は変更を開始するまでは、それを無視するのが最も幸せだったMooToolsのTWOノブ（ピン）Sliderコンポーネントを（レンジ·インジケータを含む） 。

スライダの範囲を示すために切り取られbackgroudのイメージ（可変幅の分割に対して）を使用して、Sliderコンポーネントを変更するコンポーネントのいずれかのユーザーから良い提案がありました。 したがって、私の楽しみを入力する時間はなく、CSSのClipプロパティの非チャーター（私のためにofcourseの）水が来ました。

よく！ それはどのように困難になることができますか？ あまりすべてで... YESとNO。 CSSのClipプロパティを使用する構文はかなり直立であるが、意味は/ usuageビットcroockedです。 私のようなメモリでは、毎回私は、スライダのスクリプトの手直しに座っている...私は自分自身に私のスクリプトで作成したロジックを思い出させるために、このClipプロパティの使用方法に戻ってtokeepを参照している.... それゆえ！ それは未来（とも思われる人々の利益のためにCSSのクリッププロパティでboggled）覚えておくべき希望をもって、ペンをダウンすると考え

CSSのクリップは何をしますか？

クリップはCSS 2.1のビジュアルエフェクト·モジュールの一部です。 簡単に言えば、そのジョブは追加のファイル（作成しなくても、それ故に画像をクリッピングしてサムネイルを作成、クリッピングされているオブジェクトの上に表示されるウィンドウを配置することです私はすでに、Sliderコンポーネントの活用には、この機能を入れている ）

CSSのClipプロパティを使用して、四角形の図形を使用してクリッピングを作成することができます。 rectを使用して、多くの他のCSSプロパティ（マージン、パディングなどのように）、同様に必要とする4つの座標上、右、下、左（TRBL）。 あなたはこれらの4つの座標を（しばらくの間、トスに脳を送信します）を使って、クリップがクリッピング領域を計算する方法を詳しく見てみたときに、このプロパティのcroocked性質が反映されます。 今、あなたを混乱させるボトムは、トップから始まり、右は左から始まります。 。 あなたは私が言った？を参照してください。 .... したがって、このポスト...

この小さな混乱は簡単に以下のCSSクリップ/ RECTプロパティのこの視覚的な説明と、消えることができます！！

CSSクリップの要件

我々が開始したタスクは、正方形を見た画像（また、広角画像）に次のサムネイル画像をクリップすることである

オリジナルThumbnal /イメージ	Sqaure Thumbmailのクリップの要件

CSSのクリップが見つかりました

デモ表示 | ダウンロード、ソースファイルを

この問題は、数回前に私の心を交差させ、私は/ PHPとWordPressの周りの初心者をportal.Beingサイトの一部のコンテンツのブログや新しい種類を表示するためにWordPressを使用している、以前もサイト上で働いていたとき、私は続け"これはケーキのピースは私ではありません"と考え、それをprocastinating。 ついに！ ソリューションのためのビットの周り掘りを開始したとき、この要件は、私の鼻件まで来ました。
私はそれが本当に私は実際にそれだけでPHPを少しと、WordPressのAPIを使用して 、WordPressのパワーセクションの外に他のページに見出しの一覧や最新の記事を表示するには、思ったより簡単だったことを知って驚いた。

ここで何をすべきかです： -
説明上の理由から、あなたのサイトがあると仮定http://www.inchembur.com/ 、あなたがこのサイトのニュースセクションがあるhttp://news.inchembur.com/を （WordPressを実行している）。 現在の要件は、最新の記事を表示することですhttp://news.inchembur.com/すなわち、メイン·サイトのホームページにhttp://www.inchembur.com/index.php

ステップ1：あなたのindex.phpに次のコードを追加するピースは、WordPressのAPIファイルをインクルードします。 あなたがあなたの投稿が上に表示するページの先頭にこれを追加することができます。

<？PHP
'WP_USE_THEMES' , false ) ; // Disbable use of WordPress Theme DEFINE（ 'WP_USE_THEMES'、false）を WordPressのテーマ/ / Disbable使用
（ 'は/ var / news.inchembur.com / WP-ブログ-header.phpの'）を必要とする/ /は、WordPressのAPIを含む
; // Get Latest Post query_posts（ 'showposts = 1'）; / /取得最新の投稿
？>

インクルードの上記のピースは、我々は唯一の単一の最も最近のポストを得ています。 あなたがしようとする場合は、より多くのバリエーションが、掘り下げてお気軽にquery_posts()のドキュメント 。

ステップ2：さて、あなたはから最新のWordPressの記事を表示するインデックス/ホームページの一部でhttp://news.inchembur.com 、次のコードを使用します。 デザインのニーズに従って広告あなたのスタイリング部門、スパンとクラスにお気軽に、言うまでもない。

ステップ3：noステップ3はありません...それをThats ...あなたはこれで完了です！

最新の記事とは対照的に、どのように特定のポスト/ページを表示する： -
これは簡単に引数を変えることで回避できますquery_posts()ページIDやページスラッグを含むように

) ; query_posts（ 'page_idの= 7'）;
) ; query_posts（ 'ページ名=約'）;

またはあなたはポストの数を制御することができます。
) ; query_posts（showposts = 3）;

時にはpageweightを保つために...私たちは断片に私たちのスクリプトを分割している...必要な時にこれらのJavaScriptの断片は次のようにロードされ、することができます（イベントまたはその他のリンクやボタンのクリックを参照）。

Javascriptをロードすると、動的にシンプルで単純明快以下のようには...

= “text/javascript” > < スクリプトの タイプ = "text / javascriptに">
機能loadNewScript（ソース）{
varの= document.createElement（ 'スクリプト'）;
s.setAttribute（ 'タイプ'、 'テキスト/ javascriptの'）;
s.setAttribute（ 'src'には、ソース）;
document.body.appendChild（秒）。
}
</ SCRIPT>

とどこにでも体内の次の呼び出しリンクを持つことができるか、文書自体は、このスクリプトの "onload"を持つことができます...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a >は、<a href = の"javascript：loadNewScript（ 'myDynamicScript.js'）;">負荷動的スクリプト</ a>を

または

<body onload="loadNewScript('myDynamicScript.js');">

あなたは、CSSの方であれば、クロスブラウザの作業、レイアウトを得ることに痛みを知っているだろう。 IE8はまだ私達の開発のための作品内の別のスパナです。 Anywaz！ 私はあなたの完璧な作業IE7のCSS（およびそれ以前）とFirefoxが突然IE8でかんしゃくを投げ始めた昨日、行ったようにあなたは、この問題にヒットした場合、次を試してみてください...それは素敵な瞬間のための私の問題を解決するように見えた....

META宣言を使用して、我々はIE8を使用したいレンダリングエンジンを指定することができます。 ので、IE8はIE7のようにレンダリングするために強制的に...あなたの文書の頭に次のメタタグを挿入します -

<meta http-equiv="X-UA-Compatible" content="IE=7" />

デフォルトではIEのメタは次のようになります -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
これは、IE8の新しい標準モードを使用してページをレンダリングすることになります。

必要な場合は、この構文は以下の通り、他のブラウザのために収容するために使用することができます。

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />

DOCTYPESについての詳細：

あなたはまだ "DOCTYPE"と呼ばれる動物の種類に精通していない場合は...ここにいくつかの簡単な読み取りです。
DOCTYPESは何ですか？ BROWSERの癖＆STRICTモードは何ですか？
XSLにDOCTYPEを設定する

DOCTYPESに関する深い理解の詳細については、これらのリンクを訪問してみてください...
List Apartの：右DOCTYPEでサイトを修正！
別にリスト：DOCTYPEを越えて：Web標準、前方互換性、およびIE8

注：しかし私たちの多くはHTML / CSSの人が右のDOCTYPEを設定すると、私たちの文書にDOCTYPE declerationの重要性を無視されているが、通常、ほとんどのクロスブラウザの問題への答えです。

CSSのリセットは/さまざまなブラウザ間で一貫性を作成し、特定のベースラインに要素のスタイルの数を設定するCSSです。

我々は、すべてのクロスブラウザのCSSのを書いている悪夢をしてきた。 だから我々はCSSを書き始めるときに、これは、任意のクロスブラウザの矛盾を削除/リセットすることは、最初にリセットする習慣があります。 CSSをリセットし、あなたはあなたにあなたの構築を開始するために、クリーンなベースを与えて、使ってCSSを開始することをCSSの簡単な数行があります。

私が通常使用する傾向があることをCSSのリセットは、次のようになります。

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
html {font-size: 76%;}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}

オール、UL {
リストスタイル：なし;
}

H1、H2、H3、H4、H5、H6 {
フォントサイズ：100％;
フォント重量：ノーマル;
}

ブラウザのフォントサイズをリセットする
また、次の行でブラウザのフォントサイズに適用されているリセットに注意してください。...

html {font-size: 76%;}

CSSをリセットするブラウザのフォントサイズを10ピクセルに上、これは相対的なフォントサイズ（prespective WAI準拠のすべての重要である）で動作することが可能になります
例については、以下の定義では、スパン内のフォントサイズは​​10ピクセルとparagarphに14ピクセルに設定されていることに設定されています...

span {font-size: 1em;}
p {font-size: 1.4em;}