HTMLレイアウトの要件

1.レイアウト、アウトソーシング、技術仕様

レイアウトはWeb開発の比較的独立した段階であり、たとえば、小規模なWebスタジオでは、多くの場合、限られた労働リソースの条件でアウトソーシングの最初の候補になります。

偶然にもこの仕事を下請け業者に提供しなければならなかったので、結果の想定された一意性にもかかわらず、時々レイアウトデザイナーが本当に驚きました。 そしてより頻繁に-否定的な意味で。



フルタイムの植字工の労働力を節約するには、この仕事を注目を集めた最初のフリーランサーの肩に移すだけでは十分ではありません。 常に同じ請負業者に作業を外注する場合、すべてがはるかに簡単です。長期的な協力の過程で、何らかの種類の書面による一連の標準と要件が常に形成され、その履行は習慣です。 しかし、あなたが初めて人と仕事をしている場合-最高のポートフォリオと推奨事項は望ましい結果を保証するものではありません-さらに、請負業者があなたを正しく理解しているとさえ仮定しないでください。 したがって、レイアウトには詳細な技術仕様が必要です。



そして、この瞬間は無視されます。 多くの場合、これは、アウトソーシングのコストと併せて詳細なToRの作成に関わる労力が、通常のタイプセッターによって節約された時間を完済しないという仮定によるものです。 最終的に、通常のプロジェクトマネージャーが考えるように、レイアウトはそれほど複雑ではありません。 そして、原則として、それは本当に転がり、*人間の知性への賞賛*、プロのタイプセッターが実験精神の暴動を制限し、レイアウト内のどの技術的解決策がrrが地獄ではなく、タイプセッターを禁止することができるかを事前に知っています美しいHTMLレイアウトに対する喜びと賞賛。



それにもかかわらず、練習が示すように、fakapsの確率はそれほど小さくないので、これは無視できます。



ここでの主な誤解は、詳細なTKは複雑で時間がかかるということです。 いずれにせよ、レイアウトの特定の要件を記述する必要がありますが、原則として、一般的な要件と推奨事項が詰まっています。

2.ああ、私の悲しみは素晴らしいです！

私は最近、マネージャーがアウトソーシングしたレイアウトを手に入れましたが、笑うべきか泣くべきかわかりませんでした。 このレイアウトをCMSテンプレートシステムに統合しなかったとしても、私はまだ笑っていたでしょう。



CSSファイルに配置されていない表形式の組版とスタイル、およびボタンを強調表示するための標準のDreamweaverスクリプトは、私が見た後の欠陥としてさえ認識されません。 すべての入力フィールドはラベルタグ内に挿入され、個別のフォームに配置されました。何らかの形でそれを人間のフォームにしようとすると、レイアウト全体がバラバラになりました。 CSSクラスには、意味のないキリル名がありましたが、「。style1、.style2」という形式でした。 ほとんどのフォーム要素は、あまり知られていないひどく曲がったjQueryスクリプトによって様式化され、一部の要素は同じIDを持ち、それらの要素を操作してIDで取得するJSコードがあり、狂気の一番上はドキュメントの最後でメソッドを使用することですjQuery.cssを使用してスタイルを設定しましたが、CSSファイルに単純に登録することはまったく不可能でした。 また、サイトヘッダーとリンクの束（Tahomaフォントで、アンチエイリアスなし）が1つの画像として作成され、その上にMAPおよびAREA要素が重ねられています。 この素晴らしいレイアウトの失敗の説明であなたの精神を傷つけることはもうありません。



一般的に、私を信じて、仲間たち、それはまた締め切り前に忍び寄ったPPCだった。



この種の出来事により、HTMLレイアウト用にレイアウトを送信するユーザーとレイアウトデザイナー自身の両方に役立つ要件と推奨事項のリストを公開するようになりました。



これらの推奨事項を修正し、組版用の標準ToRで補足することができます。 リストされているものの多くは非常に明白ですが、すべてが1か所に集められているという事実から利益を得ることができます。 いくつかのポイント （たとえば、ブラウザーサポートの要件や使用するスクリプト）はさまざまなオフィスに固有ですが、曖昧なフレーズを書いて、特定の作業に合わせてこのリストを簡単にコピーおよびシャープできるようにします。

3.要件と推奨事項

1 ブラウザー間の互換性

このサイトは、IE7 +、FF3 +、Opera9 +、Safari4 +、Chromeの最新のメジャーバージョンで（またはクライアントとの契約条件とこの記事を読んだ年に応じて）正常に動作するはずです。



2 。 白であっても、常にボディの背景色を記述します。



３ 。 CSSハックを使用する場合は、CSSハックとは何か、どのブラウザー向けかをコメントしますが、 css_browser_selector.jsを使用します 。 後からこのレイアウトを操作する必要があるレイアウト設計者の注意を払ってください。



4 。 クラス名とIDはアプリケーションと一致している必要があります

例：ヘッダー、メニュー、フッター、ニュース



5 。 メインのHTMLブロックをコメントで区切ってください。 このようなもの：

<！--—フッター開始->

<！--—エンドフッター->



これは、HTMLレイアウトからCMSのテンプレートを作成するために必要です。その後、コメントは削除されます。



6 。 可能な場合、PNG-24の代わりに8ビットアルファチャネルでGIF / PNGを使用する機能を無視しないでください。



７ 。 Javascriptなしで実行できることはすべて、それなしで実行できます。



8 。 多くのJavascriptコードがある場合は、別のファイルに配置する必要があります。 また、イベントハンドラーを分離し、別のファイルで宣言することをお勧めします。



9 これがまだ顧客と合意されていない場合は、レイアウトレイアウトで使用する予定のJavaScriptライブラリを事前に指定します。これにより、たとえば、レイアウトでPrototypeJSが使用されたことが判明し、顧客がサイトにjQueryを確実に実装することを計画します。



10 。 ラバーモックアップの場合、最小幅と最大幅を指定する必要があります。



11 。 T.Zの場合 他のことは何も言わず、レイアウトは、画面解像度が1024pxの水平コンポーネントでフルスクリーンに拡張されたブラウザウィンドウに水平スクロールバーなしで配置する必要があり、レイアウトサイズが許せば800pxです。



12 画像のあるフォルダには、レイアウトで使用されていない画像があってはなりません。 レイアウトから何かを除外したりやり直したりする場合は、すでに不要な画像を削除することを忘れないでください。



13 1行に内接する必要がある異なる長さのテキストを含む可能性のあるすべての要素（たとえば、ボタンまたはヘッダーの場合、デザインが複数行を占めることができない場合）には、CSSプロパティを空白に設定してください：nowrap 。



14 CSSファイルは、次のように、目的の目的のためにコメント付きの行を使用してブロックに分割します。

/ * ___________1。 CSSリセット____________________ * /

/ * ___________2。 典型的な要素____________ * /

/ * _______________ 2.1。 リスト______________ * /

/ * _______________ 2.2。 参考資料________________ * /

/ * _______________ 2.3。 フォーム要素_________ * /

/ * ___________ 3。 HEADER（サイトヘッダー）__________ * /

/ * ___________ 4。 フッター（地下室）_______________ * /

/ * ___________ 5。 サイドバー（右）_______________ * /

スタイルを正確に構成する方法は少し全体的な質問ですが、主なことはそれを何らかの方法で行うことです。



15 レイアウトが複数のステップで完了している場合（たとえば、タイプセッターがページを1つずつ送信する場合、またはページが既に改訂のためにページに返されている場合）、バージョン管理システムをタイプセットに使用しない場合、請負業者は、レイアウトの変更の説明を含むファイルを添付する必要がありますそのようなコンテンツ：

• imgフォルダーに新しい写真を追加し、
• 写真btnHome.jpgとbtnFeedback.jpgは不要になりました。削除できます
• anketa.htmlファイルのセクションのhtmlコードを変更しました
• main.cssファイルの末尾に新しいスタイルを追加しました（.form_row以下で始まる）。

16 HTMLレイアウトのエンコーディングを指定します。 CSSおよびJSファイルは、レイアウトと同じエンコーディングである必要があります。そうしないと、長くて退屈なバグ検索の可能性が大幅に増加します。



17 。 レイアウトにDOMを変更するJSがある場合、この素晴らしいブラウザはボタンをクリックしてもページをリロードせず、キャッシュされたドキュメントを提供するため、すべてがOperaで正しく動作することを確認してください。また、JSを使用して行われたすべてのDOM変更を考慮に入れます



18 カーソルを処方することを忘れないでください：入力で作成されていないボタンのポインタ。 JSのイベントハンドラーがこのボタンにハングするのか、それがリンクになるのかわからない場合は、いずれにしても<a>タグを使用することをお勧めします。



19 。 リンクをクリックしたときにイベント処理を行う場合は、イベントハンドラーがfalseを返すことを確認するか、人気のあるhref = '＃'の代わりにhref = 'javascript：void（0）'を使用して、ページが上にスクロールしないようにします。



20 。 フォームを正しくレイアウトします。フィールドラベルは、正しく入力された属性を持つラベルタグ内になければなりません。 フォームを設計するとき、検証エラーを表示するための要素と、誤って入力されたフィールドのスタイルを提供します。 t.zで提供されていない場合。 そして設計、顧客とこれについて議論することを忘れないでいなさい。



21 レイアウトが非標準フォントを使用している場合は、非標準フォントを持つ要素を画像として作成できるかどうかを必ず指定してください。そうでない場合は、それらの表示に使用される技術（sIfr、Cufonなど）について話し合います。



22 特定の場合に特に明記されていない限り、高さによって動的なものが妨げられないすべてのブロックは、動的な（つまり、コンテンツに依存する）高さを持たなければなりません。最小の高さ。 高さを固定したブロックを作成する場合は、まず顧客に尋ねます。



23 。 ページの高さがコンテンツに依存するレイアウト（および、原則として、大多数）では、特に指定がない限り、コンテンツがない場合や少量の場合にフッターがブラウザの下部に固定されるようにします。



24 。 レイアウトが100％のHTML検証に合格しない場合は、少なくとも無効なコードの使用が正当化されることを確認してください。 「気に入った」または「短くなった」という理由だけで、レイアウトの妥当性を確認しないでください

PS

この要件と推奨事項のリストが役に立つことを願っています！ 建設的な考えがある場合は、コメントでそれを補う方法を提案してください。