ASP.NET Webforms開発者とWebデザイナー：対話方法

私はASP.NET Webforms開発者であり、デザイナーに対処するときにいくつかの問題に直面します。

デザイナーはいつも不満を言っていasp.net server controlsます。むしろ、単にhtmlファイルを持ち、それらにcss必要な画像とともにファイルを作成したいのです。設計段階が事前に完了している場合、関連するcssファイルを含むhtmlファイルを取得することもありますが、設計をaspxファイルと統合する際に多くの問題に直面します（telerikコントロールを制御するなど）。

私が尋ねたいのは：

• これらの問題を克服するにはどうすればよいですか？.netサーバーコントロールの問題のため、デザイナーはphp-およびmvc開発者を好みます。デザイナーと正しい方法でやり取りする方法を知る必要があります。
• .aspxページのレンダリングされた（htmlページ）をデザイナーに提供するツールまたはアプリケーションはありますか？つまり、Visual Studioのaspxではなく、実行時のページを意味します。Web Expressionを使用しますが、HTMLでレンダリングされたページも必要です。

元デザイナーはここで、Devになりました。私はかつてWebコントロールについても怒り狂っていました。正直なところ、デザイナーは、各TDに「rel」タグ（または何でも）があると主張したため、。

Arseni Mourzenkoが非常に賢明に指摘したように、Webformsを使用する決定は、HTMLの制御の一部を制限する一方で、コーディングの効率をある程度高める企業の選択です。会社が（デザイナーを喜ばせるためだけに行うべきではない）再考する意思がない限り、デザイナーはこの現実を受け入れる必要があります。できることは次のとおりです。

1）何でもIDに依存して停止します。最初はこれが間違っているように感じましたが、クラス（およびもちろん継承）ですべてのスタイルを設定すると、実際に生活がずっと楽になることがわかりました。まず、セレクターの重みをすべて均等にしました。CSS継承では、IDはCLASSよりも優先されます。実際、すべてを子セレクターまたはクラスセレクター、あるいはその両方にすることができて、すこし素晴らしかったです。JSレイヤーでも同じことでしたが、IDベースのセレクターをクラスベースのセレクターと交換することに苦労しました。

2）RadioButtonListsおよびCheckboxListsの変換先を、Label = span、Panel = div、およびその他の明らかでないcontrol-to-htmlのものとともに教えます。.NETがこれらをHTMLにレンダリングする方法は予想より少し奇妙で、HTMLがこれらのコントロールからどのように出力されるかを知っていれば、画面を作成するのがはるかに簡単になりました。

3）生のHTML（！important）ではなく、直接ASPXでデザイナーを実行させます。デザイナーにGridView、ListViewなどの基本を教えます。匿名のオブジェクトコレクションをGrid / ListViewコントロールにプッシュするためのコードスニペットを提供します。CSSを学ぶことができれば、このコードをコピーアンドペーストすることを学ぶことができます。VSWeb Expressの無料バージョンを使用できます。これらのダミーWebプロジェクトにより、デザイナーはコントロールを入力し、ソースを表示してそれらがどのようにレンダリングされるかを確認できます。

4）.NETでFORMタグがどのように使用されるかを説明します。これについては以前は忘れていましたが、デザイナーが慣れなければならないもう1つのことは、通常、単一のFORMタグでページ全体をラップすることです。これにより、フォームコントロールの動作が変わり、実際に奇妙な副作用がなければFORMタグをネストできません。デザイナーがこれを理解しているか、フォームのHTMLがWebFormsを作成する悪夢であることを確認してください。

5）テーマとスキンを避けてください。.NETフレームワークには、アプリケーション全体のスタイルコントロールを支援するこれらのツールがありますが、通常のWebデザイナーにとっては不格好で奇妙であり、時間をかけるだけの価値はありません。CSSに精通していない開発者にとっては便利なツールのように見えますが、設計者の速度が低下するだけです。デザイナーに自然な環境（htmlおよびcssファイル）で作業させると、彼らはより幸せで生産的になります。

6）サイトソリューションに「プロトタイプ」プロジェクトを保持します。開発者が常にコードの対象となるようにするには、設計者に実際のソリューションで偽のWebプロジェクトを作成させ、ASPXのみのページを保存し、実際の開発者が手を触れないようにします。これは、デザイナーが実際のプロジェクトと同じソリューションでプロトタイプを振り返って開発者がどのように行ったかを確認できることを意味します。開発者はいつでもプロトタイプを実行して、作業がデザイナーの意図に合っていることを確認できます

最後に、開発者を再訓練する準備ができていない限り、MVCに変換する苦情に抵抗します。私は個人的にMVCが大好きですが、もしWebFormsの知識が豊富なチームを持っているなら、理由もなくそれを捨てないでください。アプリケーションでViewStateの問題、SEOの問題、またはアクセシビリティの問題が発生している場合は、MVCに絶対的な注意を払ってください。ただし、デザイナーがWebコントロールを使用する方法をトレーニングするよりも、MVCでWebForms開発者をトレーニングする方が時間がかかります。

その日の終わりに、私はWebFormsで個人的に仕事をすることができなかったデザインはありませんでした。

.aspxページのレンダリングされた（htmlページ）をデザイナーに提供するツールまたはアプリケーションはありますか？

式を忘れる（私はそれが好きではない）。Visual Studio（Web Developer Express）の無料版を入手してください。それはあなたが持っているどんなソース管理ソリューションにもフックすることができ、デザイナーがASPXページを実行し、ブラウザでレンダリングされたHTMLを見ることができるようにします。CSSとJSのツールは以前よりもはるかに優れており、Web Essentialsなどの拡張機能に組み込まれた素晴らしいツールがいくつかあります。VSインターフェース内でCSSルールをベンダー固有の偏差、カラーピッカー、パレットにすべて1クリックで変換、CSSファイルにイメージを1クリックで埋め込み、「LESS」CSS変換（CSSで「コーディング」できます）、 JavaScriptのF12 'Navigate To'に加えて、実際のインテリジェンス、およびその他の方法。デザイナーにとっての宝庫、FYI、

問題に対する解決策はありますが、MVPへの設計パターンの変更を伴います。これは時間の先行投資であり、開始する前に真剣に検討する必要があります。

基本的に、発生している問題は新しいものではありません。つまり、ビューがサポートするデータモデルを識別するインターフェイスを介して、ビューの抽象化を導入する必要があります。

パターンを人生の例として見るのは理にかなっている非常に包括的なトピックです。この例は、あなたのケースにとって非常に有益です-MVPパターンを備えたより良いWebフォーム。

編集：上記の提案が（時間とリソースの点で）従うには高すぎる場合、私は間違いなくあなたのデザイナーともっと近くで作業することをお勧めします。チーム内で問題を伝えることは、（設計者と開発者の）仕事の障害を解決するのに大いに役立つと信じています。これはチームワークであり、作業を実行するためにすべての障害を取り除くための問題の良いコラボレーションは、チームとしてプロジェクトで成功する方法です！これはプロジェクトで行うことです。

ASP.NETは、生成されたHTMLコードを抽象化するフレームワークです。これは、ASP.NETコントロールによって生成されたものを書き換えるのに十分な予算がない限り、ASP.NETアプリケーションで特定のHTMLコードを正確に再現するように求められないことを意味します。

決定するのは利害関係者次第です：長所と短所を備えたASP.NETコントロールを使用するか、手動HTML（またはASP.NET MVC）に切り替えて、現在のプロジェクトのコストを数千ドル増やす。

このコンテキストでHTMLをカスタマイズできないことは、他の制約と同じです。設計者は、仕事においてこの技術的な制約を考慮する必要があります。このケースは、デザイナーがテキストを正確なサイズの正確なフォントで表示するように指示した場合と非常に似ています。これは、印刷ではなくWebサポートです。つまり、テキストのサイズは異なります。

ツールについては、プレーンHTMLをASP.NETテンプレートに変換するツールを知りません。特定のテーブルを特定のASP.NETコントロールに変換する必要があると、どのように推測できますか？

私の最後の仕事で、開発者はアプリケーションをビルドし、デザイナーに渡して、多くのソフトウェアプログラマーが作成していないように見せるようにしました。:)

このプロセスを最初に開始したとき、開発者とデザイナーの間には多くのやり取りがありました。彼らは与えられたページを理解していませんでした。ページを動的に構築している場合、天国は禁じられています！ここで説明している状況とほぼ同じでした。

各デザイナーと一緒に座って、ローカルアプリケーションにWebアプリケーションをインストールする方法を教えました。私は彼らにそれとすべてを実行する方法を示しました。ASPコントロールが画面にどのようにレンダリングされるかについて説明しました。そして、ブラウザでそれを開き、firebugを使用して、aspコントロールとレンダリングされたものの間のリンクを確認しました。

これは彼らを大いに助けました。一度それを見て、ボックスで実行し、デザインツールを使用してスタイルを調整したり、遊んだりすると、生活が楽になりました。

これを行った後、開発者とミーティングを行い、CssClassタグを使用してスタイルが定義されていることを確認する必要があることを彼らに知らせました。そして、画面に動的に配置されたものはすべて、CSSクラスをアタッチする必要があります。デザイナーはそれを追加できません。

それはプロセスでした。双方が配置に慣れるのに時間がかかりました。しかし、それはコミュニケーションの線を開きました。使用されたコントロールについて文句を言う代わりに、デザイナーはスタイルをさまざまな要素に追加することを要求できました。

したがって、私の提案は、デザイナーと一緒に座って、ページがどのようにレンダリングされるかを示すことです。firebugを使用してページを分析し、ページがどのように形成されているかを確認します。

開発者が開発中のASP.NET WebFormsプロジェクトで作業しなければならないときに、私が過去にデザイナーに対して行ったいくつかの便利なアプローチを次に示します。

1. ローカルにデプロイ：開発者は、ローカルにデプロイされたプロジェクトの中間バージョンを提供します。これにより、両方の時間を節約できます。デザイナーは.aspxを要求しますが、サーバーコードではなく、レンダリングされたHTMLと対話します。このアプローチは、デザイナーからサーバーコードを抽象化します。彼は、HTMLがどのように生成されるか、javscript およびcssファイルがクライアントにどのように配信されるかを知る必要はありません。もちろん、これはデザイナーがブラウザーデバッガー/ DOMインスペクターに精通していることを前提としています。デザイナーはcss、ブラウザ内ですべての変更を適用し、その後それらをcssファイルに適用できます。
2. モデルの提供：デザイナーがHTMLで作業するのをより賢明にするために、サーバーコントロールによってレンダリングされるHTMLのモデルを提供します。彼らは、そのHTMLを好きなところまで微調整し、サーバー側の実装に適用する変更を提案できます。これは、クライアント側の実装が依存するHTML構造になりたくないため、設計者がその構造の変更を提案するため、早期かつ頻繁に行う必要があります。

一般に、設計者はサーバー側のコードとの接触点をできるだけ少なくする必要があります。そのため、できる限りそれを抽象化します。

私自身（多くの場合、バックエンドとフロントエンドの両方の役割で多くの仕事を一緒にした）ハイブリッド開発者として、ASP.NET WebFormsモデルも長年嫌いです...デザインの原動力は、Web開発を民主化するための簡単なドラッグアンドドロップデザインツールを提供することでした（Visual Basicがアプリプログラミングを非CSメジャーにアクセス可能にしたのと同じ方法）。ステートレス環境（ウェブ）は無差別に強制されます（ViewStateよ、私はあなたを嫌っています！）。

また、デフォルトでは、ASP.NETがID属性を引き継いで、CSSデザイナーがIDを使用するのと同じ方法でクラスを使用するという事実だけで、マークアップの開発とスタイリングの中心原則のいくつかに違反しています。 divの深いスタック内の要素の階層化と、最も単純なシステムを除くすべてのシステムでコントロールのスタイリングを悪夢にすることができるネストされたタグ。

これらのことを考えると、MVCの書き直しはコストや時間のかかるものになると思いますので、あなたの道は簡単ではありません。

デザイナーにWebアプリケーションを実行する環境を提供する方法はありますか。そうすれば、デザイナーはリアルタイムでCSSの変更を確認できますか？ASP.NET WebFormsで設計作業をしているとき、自分のマシンでWebアプリを起動し、CSSを調整し、ローカルで実行してアプリにどのように影響するかを確認できることは非常に重要です。

1つのオプションは、デザイナーがワークステーションから実行できるASP.NET開発専用に調整された仮想マシンをセットアップすることです。そのため、2つのツールセットを混在させる必要はありません。機能するイメージからいつでもリロードできます。

はい、これはデザイナーがF5を押してアプリを実行する方法を学ぶ必要があることを意味します。（または、テスト環境でさえ、CSS、JS、および画像があるディレクトリへのFTPへのアクセスを許可するだけです！）また、それらに指示すると、多くのバックエンドコードが表示されることも意味します。 .csファイルまたは.vbファイルを無視してください。パニックを防ぐのに非常に役立ちます。もちろん、コードビハインドファイルからスタイルを設定するようなことをしていないことを確認する必要があります。 （ただし、データとビューを密接に結びつけるので、そうしませんか？）

明確なCSSファイルとJSファイルを使用してサイトを適切に構成し、マークアップに多くのインラインスタイリングを強制しない場合、<％％>領域を回避するだけでほとんどの仕事を完了できる可能性があります。一方、静的なHTML / CSSを動的なアプリで動作するものに変換しようとする場合、デザイナーがあなたが経験しなければならないことについてもう少し感謝するかもしれません。

あなたは彼らが一緒に話し、お互いのニーズと好みを理解する必要があります。ソフトウェアとツールでは解決できない「問題」です。両者を喜ばせようとしないでください、それは決して機能しません。彼らは妥協する必要があります-それは結婚のようなものです。

1つの方法はf.exを手配することです。ワークショップでは、各当事者が、その理由を説明する機会を得て、彼らが好むものを好むようにします。このような状況では、良好なコミュニケーションが常に重要です。このような収集は投資と見なすことができます。

または簡単に言えば、問題は組織指向であり、技術的なものではないため、ソリューションを提供する必要があります。

もう1つのオプションは、給与を引き上げて黙らせるように指示することです（通常は短期的な解決策...）。