ASP.NET Webforms-Entwickler und Webdesigner: Wie interagieren?

Ich bin ein ASP.NET Webforms-Entwickler und habe beim Umgang mit Designern einige Probleme.

Designer beschweren sich immer über die asp.net server controls. Sie möchten lieber nur eine HTML-Datei haben und cssDateien zusammen mit den dazugehörigen Bildern erstellen . Wenn die Entwurfsphase im Voraus abgeschlossen ist, erhalte ich manchmal HTML-Dateien mit verwandten CSS-Dateien, aber dann treten viele Probleme bei der Integration des Entwurfs in die aspxDateien auf (Sever-Steuerelemente und Telerik-Steuerelemente usw.).

Was ich fragen möchte ist:

• Wie überwinde ich diese Probleme? Die Entwickler bevorzugen PHP- und MVC-Entwickler wegen der Probleme mit .net-Serversteuerelementen. Ich muss wissen, wie ich richtig mit den Designern umgehen kann.
• Gibt es Tools oder Anwendungen, mit denen die Designer die gerenderten (HTML-) Seiten der ASPX-Seiten bereitstellen können? Damit meine ich die Seite zur Laufzeit und nicht die ASPX in Visual Studio. Sie verwenden zwar Web Expression, möchten die gerenderte Seite jedoch auch in HTML.

Der ehemalige Designer hier, drehte Dev, und ich pflegte auch über Web Controls zu jammern und zu pissen. Ehrlich gesagt ist es VIEL billiger für einen Designer, seine Praktiken anzupassen, als für einen .NET-Entwickler, sich mit einer benutzerdefinierten Implementierung einer GridView zu befassen, da der Designer darauf bestand, dass jeder TD ein rel-Tag (oder was auch immer) hat.

Wie Arseni Mourzenko mit Bedacht hervorhob, ist die Entscheidung für die Verwendung von Webforms eine Entscheidung des Unternehmens, die die Kontrolle über HTML einschränkt und gleichzeitig eine gewisse Effizienz bei der Codierung gewährleistet. Wenn das Unternehmen nicht bereit ist, erneut darüber nachzudenken (was es NICHT tun sollte, um den Designern zu gefallen), müssen die Designer diese Realität akzeptieren. Hier sind einige Dinge, die sie tun können:

1) Stoppen Sie je nach ID für etwas . Obwohl sich das zunächst falsch anfühlte, fand ich, dass das Leben tatsächlich viel einfacher war, als ich alles mit Klassen (und natürlich Vererbung) gestylt habe. Zuallererst hat es alle meine Selektorgewichte ausgeglichen. Bei der CSS-Vererbung übertrifft ID CLASS. Eigentlich war es ein bisschen schön, dass alles ein Kind und / oder eine Klassenauswahl war, und es war ein wenig einfacher, die Spezifitätsreihenfolge herauszufinden. Das Gleiche in der JS-Ebene, es bereitete mir NULL Mühe, meine ID-basierten Selektoren gegen klassenbasierte auszutauschen.

2) Unterrichten Sie sie, was RadioButtonLists und CheckboxLists konvertieren , zusammen mit Label = span, Panel = div und den anderen nicht offensichtlichen Control-to-HTML-Inhalten. Die Art und Weise, wie .NET diese in HTML rendert, war etwas seltsamer als erwartet, und es war für mich viel einfacher, Bildschirme zu erstellen, wenn ich wusste, wie HTML aus diesen Steuerelementen herauskommen würde.

3) Lassen Sie sie ihre Designer DIREKT IN ASPX ausführen , nicht in rohem HTML ( ! Wichtig ). Bringen Sie den Designern die Grundlagen von GridViews, ListViews usw. bei. Geben Sie ihnen einige Codefragmente, um eine anonyme Objektsammlung in ein Grid / ListView-Steuerelement zu verschieben. Wenn sie CSS lernen können, können sie lernen, diesen Code zu kopieren und einzufügen. Sie können die kostenlose Version von VS Web Express verwenden, die jetzt recht gut in CSS & JS funktioniert. Diese Dummy-Webprojekte geben den Designern die Möglichkeit, einige Steuerelemente einzugeben und anschließend die Quelle anzuzeigen, um zu sehen, wie sie gerendert werden.

4) Erläutern Sie, wie das FORM-Tag in .NET verwendet wird . Ich habe dies früher vergessen, aber der Designer muss sich auch daran gewöhnen, dass normalerweise ein einziges FORM-Tag die gesamte Seite umschließt. Dies ändert das Verhalten von Formularsteuerelementen, und Sie können FORM-Tags nicht ohne wirklich seltsame Nebenwirkungen verschachteln. Vergewissern Sie sich, dass die Designer dies verstehen, oder dass ihr Formular-HTML-Code ein Albtraum für WebForms ist.

5) Halten Sie sich von Themen und Haut fern . Obwohl das .NET-Framework über diese Tools verfügt, mit denen sich Steuerelemente in einer Anwendung einfacher gestalten lassen, sind sie für normale Webdesigner umständlich und seltsam, und ich habe nie festgestellt, dass sie meine Zeit wert sind. Sie scheinen ein gutes Werkzeug für Entwickler zu sein, die sich mit CSS nicht auskennen, aber die Designer nur verlangsamen. Lassen Sie die Designer in ihrer natürlichen Umgebung (HTML- und CSS-Dateien) arbeiten und sie werden zufriedener und produktiver.

6) Behalten Sie "Prototyp" -Projekte in Ihren Standortlösungen . Um sicherzustellen, dass die Entwickler immer ein Ziel haben, gegen das sie programmieren können, lassen Sie die Designer ein falsches Webprojekt in Ihrer realen Lösung erstellen, damit ihre ASPX-only-Seiten von den realen Entwicklern beibehalten und unberührt bleiben. Dies bedeutet, dass die Designer auf ihre Prototypen in derselben Lösung wie das eigentliche Projekt zurückblicken können, um zu überprüfen, wie die Entwickler vorgegangen sind, und die Entwickler können den Prototypen jederzeit ausführen, um sicherzustellen, dass ihre Arbeit den Absichten der Designer entspricht.

Widersetzen Sie sich abschließend allen Beschwerden, die eine Umstellung auf MVC erfordern, sofern Sie nicht bereit sind, Ihre Entwickler neu auszubilden. Ich persönlich liebe MVC, aber wenn Sie ein Team mit vielen WebForms-Kenntnissen haben, sollten Sie das nicht ohne Grund wegwerfen. Wenn Ihre Anwendungen ViewState-Probleme, SEO-Probleme oder Probleme mit der Barrierefreiheit haben, geben Sie MVC auf jeden Fall einen harten Blick. Das Trainieren von WebForms-Entwicklern in MVC dauert jedoch VIEL länger als das Trainieren von Designern in der Verwendung von Websteuerelementen.

Am Ende des Tages gab es KEIN DESIGN, DAS ICH ÜBERWINDET, das ich nicht persönlich in WebForms arbeiten konnte, selbst wenn ich eine Stunde lang bei diesem verdammten GridView geschworen hätte, bevor ich es herausgefunden hatte.

Gibt es Tools oder Anwendungen, mit denen die Designer die gerenderten (HTML-) Seiten der ASPX-Seiten bereitstellen können?

Vergiss den Ausdruck (es hat mir nie gefallen). Holen Sie sich die kostenlose Version von Visual Studio (Web Developer Express). Es kann sich in jede Versionsverwaltungslösung einbinden, die Sie haben, und die Designer können ihre ASPX-Seiten ausführen und den gerenderten HTML-Code in einem Browser anzeigen. Das CSS- und JS-Tool ist viel besser als früher, und es gibt einige großartige Tools, die in Erweiterungen wie Web Essentials integriert sind. 1-Klick-Transformation von CSS-Regeln in alle herstellerspezifischen Abweichungen, Farbwähler und Paletten direkt in der VS-Oberfläche, 1-Klick-Einbettung von Bildern in CSS-Dateien, "WENIGER" CSS-Transformationen (Sie können in CSS "codieren"), F12 "Navigieren zu" in JavaScript sowie echte Intelligenz und vieles mehr. Es ist jetzt eine Fundgrube für Designer, FYI,

Es gibt eine Lösung für Ihre Probleme, die jedoch mit einer Änderung des Entwurfsmusters in MVP einhergeht . Dies ist eine Anfangsinvestition von Zeit, die vor dem Start ernsthaft in Betracht gezogen werden muss.

Grundsätzlich sind Probleme, die auftreten, nicht neu. Kurz gesagt, Sie müssen eine Ansichtsabstraktion über die Schnittstelle einführen, die das von der Ansicht unterstützte Datenmodell identifiziert.

Es ist ein sehr umfassendes Thema, das Sinn macht, Muster als Beispiel für das Leben zu sehen. Sie finden dieses Beispiel sehr informativ für Ihren Fall - Bessere Webformulare mit dem MVP-Muster .

Bearbeiten: Wenn der obige Vorschlag zu teuer ist (in Bezug auf Zeit und Ressourcen), würde ich definitiv raten , enger mit Ihrem Designer zusammenzuarbeiten . Ich glaube, dass die Kommunikation Ihrer Probleme in einem Team wesentlich dazu beitragen sollte, Hindernisse in Ihrer Arbeit (für Designer und Entwickler) zu beseitigen. Dies ist eine Teamarbeit und eine gute Zusammenarbeit von Themen, um alle Hindernisse für die Durchführung der Arbeit zu beseitigen, ist der Weg, um in einem Projekt als Team erfolgreich zu sein ! Das machen wir in unserem Projekt.

ASP.NET ist ein Framework, das den generierten HTML-Code abstrahiert. Dies bedeutet, dass Sie nicht aufgefordert werden können, einen bestimmten HTML-Code in einer ASP.NET-Anwendung exakt zu reproduzieren, es sei denn, Sie verfügen über ein ausreichendes Budget, um alles, was von ASP.NET-Steuerelementen generiert wird, neu zu schreiben .

Die Entscheidung darüber liegt bei den Stakeholdern: Entweder verwenden Sie ASP.NET-Steuerelemente mit ihren Stärken und Nachteilen, oder Sie wechseln zu manuellem HTML (oder zu ASP.NET MVC) und erhöhen die Kosten des aktuellen Projekts um Tausende von Dollar .

Die Unfähigkeit, HTML in diesem Kontext anzupassen, ist eine Einschränkung wie jede andere. Konstrukteure sollten diese technische Einschränkung bei ihrer Arbeit berücksichtigen. Der Fall ist dem sehr ähnlich, wenn der Designer Ihnen sagen würde, dass ein Text in der genauen Schriftart mit der genauen Größe angezeigt werden soll: Es handelt sich um eine Webunterstützung, nicht um eine Druckfunktion, was bedeutet, dass die Größe des Texts variieren wird.

Was die Tools betrifft, sind mir keine Tools bekannt, die einfaches HTML in eine ASP.NET-Vorlage konvertieren. Wie würde es möglicherweise erraten, dass eine bestimmte Tabelle in ein bestimmtes ASP.NET-Steuerelement konvertiert werden muss?

Bei meinem letzten Auftrag erstellten die Entwickler die Anwendung und übergaben sie dann an die Designer, damit sie sie so aussehen ließen, als hätten es einige Software-Programmierer nicht geschafft. :)

Als wir diesen Prozess zum ersten Mal begannen, gab es zwischen den Entwicklern und Designern viel Hin und Her. Sie haben die Seiten, die ihnen gegeben wurden, nicht verstanden. Himmel verbieten, wenn wir eine Seite dynamisch aufbauen würden! Es war ungefähr so ​​wie die Situation, die Sie hier beschreiben.

Ich setzte mich mit jedem Designer zusammen und brachte ihm bei, wie er die Webanwendung auf seiner lokalen Box installiert. Ich zeigte ihnen, wie man es und alles laufen lässt. Ich erklärte, wie die asp-Steuerelemente auf dem Bildschirm gerendert wurden. Dann haben wir es im Browser geöffnet und mithilfe von Firebug die Verknüpfung zwischen den ASP-Steuerelementen und dem Gerenderten überprüft.

Das hat ihnen sehr geholfen. Sobald sie es sehen und auf ihren Boxen ausführen konnten und ihre Designtools verwendeten, um Stile zu optimieren und damit zu spielen, erleichterte es ihnen das Leben.

Nachdem ich dies getan hatte, traf ich mich mit den Entwicklern und ließ sie wissen, dass sie das CssClass-Tag verwenden und sicherstellen sollten, dass Stile definiert wurden. Und alles, was dynamisch auf den Bildschirm gebracht wurde, muss eine CSS-Klasse haben, die von den Designern nicht hinzugefügt werden kann.

Es war ein Prozess. Es dauerte einige Zeit, bis sich beide Seiten an das Arrangement gewöhnt hatten. Aber es öffnete die Kommunikationswege. Anstatt sich über die verwendeten Steuerelemente zu beschweren, konnten die Designer verlangen, dass Stile zu verschiedenen Elementen hinzugefügt werden.

Mein Vorschlag wäre also, sich mit den Designern zusammenzusetzen und ihnen zu zeigen, wie die Seite gerendert wird. Verwenden Sie Firebug, um die Seite zu zerlegen und durchzugehen, wie die Seite gebildet wird.

Hier sind einige nützliche Ansätze, die ich in der Vergangenheit mit Designern verfolgt habe, als diese an einem ASP.NET WebForms-Projekt arbeiten mussten, das gerade entwickelt wird.

1. Lokal bereitstellen: Entwickler stellen eine Zwischenversion des Projekts bereit, die lokal bereitgestellt wird. Das spart beiden Zeit. Der Designer fordert eine ASPX-Datei an, interagiert jedoch mit dem gerenderten HTML-Code und nicht mit dem Servercode. Dieser Ansatz abstrahiert den Servercode vom Designer. Er muss nicht wissen, wie der HTML-Code generiert wird oder wie die javscript und css-Dateien an den Client übermittelt werden. Dies setzt natürlich voraus, dass die Designer mit Browser-Debuggern / DOM-Inspektoren vertraut sind. Der Designer kann alle seine cssÄnderungen im Browser übernehmen und anschließend auf die anwendencss Dateien .
2. Modelle bereitstellen : Damit die Designer sinnvoller mit HTML arbeiten können, stellen Sie ihnen ein Modell des vom Serversteuerelement gerenderten HTML zur Verfügung. Sie können diesen HTML-Code so anpassen, dass er ihnen gefällt, und die Änderungen vorschlagen, die in der serverseitigen Implementierung angewendet werden sollen. Dies muss früh und häufig erfolgen , da Sie nicht mit einer HTML-Struktur enden möchten, auf die sich die clientseitige Implementierung stützt, und der Designer dann Änderungen an dieser Struktur vorschlagen kann.

Die Designer sollten im Allgemeinen so wenig Berührungspunkte wie möglich mit dem serverseitigen Code haben, also abstrahieren Sie ihn so weit wie möglich von ihnen.

Als Hybridentwickler habe ich selbst (nachdem ich viel in Back-End- und Front-End-Rollen gearbeitet habe, oft zusammen) seit langem eine Abneigung gegen das ASP.NET-WebForms-Modell ... während es anfänglich war Der Entwurfsimpuls bestand darin, einfache Drag-and-Drop-Entwurfstools zur Demokratisierung der Webentwicklung bereitzustellen (genau wie Visual Basic die App-Programmierung für Nicht-CS-Major zugänglich machte) staatenlose Umgebungen (das Web) werden von Schinkenhand und gezwungen (oh ViewState, wie ich dich verabscheue!).

Sie verletzen auch einige der zentralen Prinzipien der Markup-Entwicklung und -Stilisierung, nur weil ASP.NET standardmäßig das ID-Attribut übernimmt und CSS-Designer dazu zwingt, Klassen so zu verwenden, wie IDs verwendet werden sollten. Schichtung von Elementen in tiefen Stapeln von Divs und verschachtelten Tags, die das Gestalten der Steuerelemente zu einem Albtraum machen können, mit Ausnahme der einfachsten Systeme.

Angesichts dieser Umstände ist Ihr Weg nicht einfach, da ein Umschreiben für MVC nach meiner Annahme zeit- oder kostenintensiv wäre.

Gibt es eine Möglichkeit, dem Designer eine Umgebung bereitzustellen, in der er die Webanwendung ausführen kann, damit er seine CSS-Änderungen in Echtzeit sehen kann? Wenn ich Entwurfsarbeiten in ASP.NET WebForms durchführe, ist es von unschätzbarem Wert, die Webanwendung auf meinem eigenen Computer zu starten, Änderungen am CSS vorzunehmen und sie lokal auszuführen, um festzustellen, wie sich dies auf die Anwendung auswirkt.

Eine Möglichkeit könnte darin bestehen, eine virtuelle Maschine einzurichten, die speziell auf die ASP.NET-Entwicklung zugeschnitten ist und die der Designer von seiner Workstation aus ausführen kann, damit er nicht seine beiden Toolsets mischen muss, und falls etwas in der Entwicklung schief geht. Raum, kann es immer von einem funktionierenden Bild neu geladen werden.

Ja, dies bedeutet, dass der Designer lernen muss, wie er F5 drückt, um die App auszuführen. (Oder geben Sie ihnen einfach Zugriff auf FTP auf die Verzeichnisse, in denen sich CSS, JS und Bilder befinden, auch in einer Testumgebung!) Dies bedeutet auch, dass sie eine Menge Back-End-Code sehen, wenn Sie ihnen dies mitteilen Ignorieren Sie einfach Ihre .cs- oder .vb-Dateien, damit sie nicht in Panik geraten. Das bedeutet natürlich, dass Sie sicherstellen müssen, dass Sie keine Stile aus Ihren codebehind-Dateien festlegen. (aber das würdest du doch nicht tun, weil das zu eng mit Daten und Ansichten zusammenhängt, oder?).

Wenn Ihre Site gut strukturiert ist, unterschiedliche CSS- und JS-Dateien und nicht viel Inline-Stil für das Markup erforderlich sind, können sie den größten Teil ihrer Arbeit erledigen, indem sie einfach die <%%> -Bereiche meiden. Auf der anderen Seite könnte es dem Designer auch ein wenig mehr Wertschätzung für das geben, was Sie durchmachen müssen, wenn Sie versuchen, ihr statisches HTML / CSS in etwas zu übersetzen, das für eine dynamische App funktioniert.

Sie müssen sie dazu bringen, miteinander zu sprechen, die Bedürfnisse und Vorlieben der anderen zu verstehen. Es ist ein "Problem", das nicht durch Software und Tools gelöst werden kann. Versuche nicht, beiden Parteien zu gefallen, das wird niemals funktionieren. Sie müssen Kompromisse eingehen - es ist wie eine Ehe.

Eine Möglichkeit besteht darin, z. Workshops, in denen jede Partei die Möglichkeit erhält, zu erklären, warum es so ist, dass sie das bevorzugt, was sie bevorzugt. Gute Kommunikation ist in solchen Situationen immer ein Schlüssel. Solche Zusammenkünfte können als Investitionen angesehen werden.

Oder einfach gesagt, das Problem ist organisationsorientiert, nicht technisch, und hier müssen Sie eine Lösung finden.

Die andere Möglichkeit ist, die Löhne zu erhöhen und sie anzuweisen, die Klappe zu halten (normalerweise eine kurzfristige Lösung ...).