ASP.NET Webforms nhà phát triển và thiết kế web: làm thế nào để tương tác?

Tôi là một nhà phát triển ASP.NET Webforms và tôi gặp một số vấn đề khi giao dịch với các nhà thiết kế.

Nhà thiết kế luôn phàn nàn về asp.net server controls. Họ chỉ muốn có một tệp html và tạo csscác tệp cùng với các hình ảnh được yêu cầu để đi cùng với những hình ảnh đó. Đôi khi, nếu giai đoạn thiết kế được thực hiện trước, tôi nhận được các tệp html với các tệp css có liên quan, nhưng sau đó chúng tôi gặp nhiều vấn đề khi tích hợp thiết kế với các aspxtệp (sever điều khiển telerik điều khiển ... vv).

Điều tôi muốn hỏi là:

• Làm thế nào để tôi khắc phục những vấn đề này? Các nhà thiết kế thích các nhà phát triển php- và mvc vì các vấn đề với các điều khiển máy chủ .net. Tôi cần biết cách tương tác với các nhà thiết kế một cách chính xác.
• Có bất kỳ công cụ hoặc ứng dụng nào để cung cấp cho các nhà thiết kế kết xuất (trang html) của các trang .aspx không? Điều đó có nghĩa là trang trong thời gian chạy chứ không phải là aspx trong Visual Studio. Họ cũng sử dụng Web Expression nhưng họ cũng muốn trang được hiển thị bằng html.

Nhà thiết kế cũ ở đây, đã biến Dev và tôi cũng đã từng tức giận và than vãn về Kiểm soát web. Thành thật mà nói, RẤT NHIỀU nhà thiết kế có thể điều chỉnh các thực hành của họ rẻ hơn so với Nhà phát triển .NET để nghiên cứu về sự thay đổi tùy chỉnh của GridView vì nhà thiết kế đã HIỂU rằng mỗi TD có thẻ 'rel' (hoặc bất cứ điều gì).

Như Arseni Mourzenko đã chỉ ra rất khôn ngoan, quyết định sử dụng Webforms là một lựa chọn của công ty nhằm hạn chế một số quyền kiểm soát đối với HTML trong khi vẫn mang lại một số hiệu quả trong mã hóa. Trừ khi công ty sẵn sàng xem xét lại (điều mà họ KHÔNG nên làm chỉ để làm hài lòng các nhà thiết kế), thì các nhà thiết kế cần phải chấp nhận thực tế này. Đây là một vài điều họ có thể làm:

1) Dừng tùy thuộc vào ID cho bất cứ điều gì . Mặc dù điều này ban đầu cảm thấy sai, tôi thấy rằng cuộc sống thực sự dễ dàng hơn rất nhiều khi tôi tạo kiểu mọi thứ với các lớp (và tất nhiên là cả sự kế thừa). Trước hết, nó cân bằng tất cả các trọng số chọn của tôi. Trong kế thừa CSS, ID bỏ qua LỚP. Thật là tốt khi có tất cả mọi thứ là một đứa trẻ và / hoặc người chọn lớp, và làm cho việc tìm ra thứ tự cụ thể đơn giản hơn một chút. Điều tương tự trong lớp JS, nó mang lại cho tôi nỗi đau KHÔNG THỂ để trao đổi các bộ chọn dựa trên ID của tôi cho các bộ chọn dựa trên lớp.

2) Dạy cho họ những gì RadioButtonLists và CheckboxLists chuyển đổi thành , cùng với Label = span, Panel = div và các công cụ điều khiển-to-html không rõ ràng khác. Cách .NET kết xuất những thứ này thành HTML hơi lạ hơn tôi mong đợi và tôi đã dễ dàng tạo màn hình hơn khi tôi biết HTML sẽ ra khỏi những điều khiển đó như thế nào.

3) Yêu cầu họ làm các nhà thiết kế của họ TRỰC TIẾP TRỰC TIẾP , không phải HTML thô ( ! Quan trọng ). Dạy cho các nhà thiết kế những điều cơ bản về GridViews, ListViews, v.v. Cung cấp cho họ một số đoạn mã để đẩy bộ sưu tập đối tượng ẩn danh vào điều khiển Grid / ListView. Nếu họ có thể học CSS thì họ có thể học cách sao chép-dán mã này. Họ có thể sử dụng phiên bản miễn phí của VS Web Express, khá tốt trong công việc CSS & JS bây giờ. Các dự án web giả này sẽ cung cấp cho các nhà thiết kế cơ hội nhập một số điều khiển, sau đó Xem Nguồn để xem cách chúng được hiển thị.

4) Giải thích cách sử dụng thẻ FORM trong .NET . Quên về điều này sớm hơn, nhưng một điều khác mà nhà thiết kế phải làm quen là thông thường, một thẻ FORM duy nhất bao bọc toàn bộ trang. Điều này thay đổi cách điều khiển biểu mẫu hoạt động và bạn không thể lồng các thẻ FORM mà không có tác dụng phụ thực sự kỳ lạ. Hãy chắc chắn rằng các nhà thiết kế hiểu điều này nếu không HTML dạng của họ sẽ là một cơn ác mộng khi đưa vào WebForms.

5) Tránh xa Chủ đề và Da . Mặc dù .NET framework có các công cụ này để giúp điều khiển kiểu trên một ứng dụng, nhưng chúng rất kỳ quặc và kỳ lạ đối với các Nhà thiết kế Web thông thường và tôi không bao giờ thấy chúng đáng giá với thời gian của mình. Chúng có vẻ như là một công cụ tuyệt vời cho các nhà phát triển không thành thạo CSS, nhưng sẽ chỉ làm chậm các nhà thiết kế. Hãy để các nhà thiết kế làm việc trong môi trường tự nhiên của họ (tệp html & css) và họ sẽ hạnh phúc hơn và năng suất hơn.

6) Giữ các dự án "nguyên mẫu" trong các giải pháp trang web của bạn . Để đảm bảo các nhà phát triển luôn có mục tiêu để mã hóa, hãy yêu cầu các nhà thiết kế tạo một dự án web giả trong giải pháp thực sự của bạn để giữ cho các trang chỉ có ASPX của họ được bảo tồn và không bị ảnh hưởng bởi các nhà phát triển thực. Điều này có nghĩa là các nhà thiết kế có thể nhìn lại các nguyên mẫu của họ trong cùng một giải pháp như dự án thực tế để kiểm tra xem các nhà phát triển đã làm như thế nào và các nhà phát triển có thể chạy nguyên mẫu bất cứ lúc nào để đảm bảo công việc của họ phù hợp với ý định của nhà thiết kế.

Cuối cùng, chống lại mọi khiếu nại để chuyển đổi sang MVC, trừ khi bạn sẵn sàng đào tạo lại Devs của mình. Tôi yêu thích MVC cá nhân, nhưng nếu bạn đã có một nhóm có rất nhiều kiến ​​thức về WebForms, đừng bỏ qua điều đó mà không có lý do. Nếu các ứng dụng của bạn đang gặp vấn đề về ViewState, các vấn đề về SEO hoặc các vấn đề về khả năng truy cập, thì hoàn toàn cung cấp cho MVC một cái nhìn khó khăn. Nhưng sẽ mất nhiều thời gian hơn để đào tạo các nhà phát triển WebForms trên MVC so với việc đào tạo các Nhà thiết kế cách sử dụng Điều khiển web.

Vào cuối ngày, KHÔNG CÓ THIẾT KẾ I CAME ACROSS, mà tôi không thể tự mình làm việc trong WebForms, ngay cả khi cuối cùng tôi đã chửi thề với GridView chết tiệt đó trong một giờ trước khi tìm ra nó.

Có bất kỳ công cụ hoặc ứng dụng nào để cung cấp cho các nhà thiết kế kết xuất (trang html) của các trang .aspx không?

Quên biểu hiện (tôi không bao giờ thích nó). Nhận cho họ phiên bản miễn phí của Visual Studio (Web Developer Express). Nó có thể kết nối với bất kỳ giải pháp kiểm soát nguồn nào mà bạn có và nó sẽ cho phép các nhà thiết kế chạy các trang ASPX của họ và xem HTML được hiển thị trong trình duyệt. Công cụ CSS và JS tốt hơn nhiều so với trước đây và có một số công cụ tuyệt vời được đưa vào các phạm vi như Web Essentials. Chuyển đổi quy tắc CSS chỉ bằng một cú nhấp chuột thành tất cả các độ lệch, bộ chọn màu và bảng màu dành riêng cho nhà cung cấp của họ ngay trong giao diện VS, nhúng hình ảnh vào một lần nhấp vào các tệp css, 'LESS' chuyển đổi CSS (bạn có thể 'mã' trong CSS), F12 'Điều hướng đến' trên JavaScript, cộng với sự quan tâm thực sự và nhiều hơn nữa. Đó là một kho báu cho các nhà thiết kế bây giờ, FYI,

Có một giải pháp cho các vấn đề của bạn nhưng nó liên quan đến việc thay đổi mẫu thiết kế thành MVP . Đây là một khoản đầu tư trực tiếp về thời gian cần được xem xét nghiêm túc trước khi bắt đầu.

Về cơ bản, các vấn đề mà bạn đang gặp phải không phải là mới. Nói tóm lại, bạn cần giới thiệu một bản tóm tắt khung nhìn thông qua giao diện xác định mô hình dữ liệu mà khung nhìn hỗ trợ.

Đây là chủ đề rất toàn diện có ý nghĩa để xem mô hình như một ví dụ cuộc sống. Bạn sẽ thấy ví dụ này khá nhiều thông tin cho trường hợp của bạn - Các hình thức web tốt hơn với Mẫu MVP .

Chỉnh sửa: Nếu đề xuất trên quá tốn kém (về thời gian và tài nguyên) để làm theo, tôi chắc chắn sẽ khuyên bạn nên làm việc với nhà thiết kế của bạn gần gũi hơn . Tôi tin rằng việc truyền đạt các vấn đề của bạn trong một nhóm sẽ giúp giải quyết rất nhiều trở ngại trong công việc của bạn (nhà thiết kế và nhà phát triển). Đây là một công việc nhóm và cộng tác tốt các vấn đề để loại bỏ tất cả các trở ngại để thực hiện công việc là cách để thành công trong một dự án như là một nhóm ! Đây là điều mà chúng tôi làm trong dự án của chúng tôi.

ASP.NET là một khung công tác, tóm tắt mã HTML được tạo. Điều này có nghĩa là bạn không thể được yêu cầu sao chép chính xác một mã HTML đã cho trong một ứng dụng ASP.NET, trừ khi bạn có đủ ngân sách để viết lại bất cứ thứ gì được tạo bởi các điều khiển ASP.NET .

Các bên liên quan sẽ quyết định: bạn sử dụng các điều khiển ASP.NET với những điểm mạnh và nhược điểm của họ, hoặc bạn chuyển sang HTML thủ công (hoặc sang ASP.NET MVC), làm tăng chi phí của dự án hiện tại lên hàng ngàn đô la .

Không thể tùy chỉnh HTML trong ngữ cảnh này là một ràng buộc như bất kỳ khác. Các nhà thiết kế nên xem xét hạn chế kỹ thuật này trong công việc của họ. Trường hợp này rất giống với việc nhà thiết kế sẽ cho bạn biết rằng một văn bản sẽ được hiển thị ở phông chữ chính xác với kích thước chính xác: đó là hỗ trợ web, không in, có nghĩa là kích thước của văn bản sẽ thay đổi.

Đối với các công cụ, tôi không biết các công cụ sẽ chuyển đổi HTML đơn giản thành một mẫu ASP.NET. Làm thế nào có thể đoán rằng một bảng cụ thể phải được chuyển đổi thành một điều khiển ASP.NET cụ thể?

Ở công việc cuối cùng của tôi, các nhà phát triển sẽ xây dựng ứng dụng và sau đó sẽ chuyển nó cho các nhà thiết kế để họ có thể làm cho nó trông giống như một nhóm lập trình viên phần mềm đã không tạo ra nó. :)

Khi chúng tôi lần đầu tiên bắt đầu quá trình này, có rất nhiều sự trở lại giữa các nhà phát triển và nhà thiết kế. Họ không hiểu những trang mà họ được tặng. Trời cấm nếu chúng ta đang xây dựng một trang năng động! Nó giống như tình huống mà bạn đang mô tả ở đây.

Tôi ngồi xuống với từng nhà thiết kế và dạy họ cách cài đặt ứng dụng web trên hộp cục bộ của họ. Tôi chỉ cho họ cách chạy nó và mọi thứ. Tôi đã giải thích về cách các điều khiển asp được hiển thị trên màn hình. Và sau đó chúng tôi đã mở nó trong trình duyệt và sử dụng fireorms để xem liên kết giữa các điều khiển asp và những gì được hiển thị.

Điều này đã giúp họ, rất nhiều. Một khi họ có thể nhìn thấy nó và chạy nó trên hộp của họ và sử dụng các công cụ thiết kế của họ để điều chỉnh và chơi với các phong cách, nó làm cho cuộc sống của họ dễ dàng hơn.

Sau khi tôi làm điều này, tôi đã có một cuộc họp với các nhà phát triển và cho họ biết rằng họ nên sử dụng thẻ CssClass và đảm bảo rằng các kiểu được xác định. Và bất cứ thứ gì được đưa lên màn hình một cách linh hoạt đều cần phải có một lớp css gắn liền với nó, các nhà thiết kế sẽ không thể thêm nó vào.

Đó là một quá trình. Phải mất một thời gian để cả hai bên có thể sử dụng để sắp xếp. Nhưng nó đã mở ra các dòng giao tiếp. Thay vì phàn nàn về các điều khiển được sử dụng, các nhà thiết kế có thể yêu cầu các kiểu được thêm vào các yếu tố khác nhau.

Vì vậy, đề nghị của tôi sẽ là ngồi lại với các nhà thiết kế và chỉ cho họ cách trang hiển thị. Sử dụng fireorms để phân tích trang và xem qua cách trang nếu được hình thành.

Đây là một số cách tiếp cận hữu ích mà tôi đã thực hiện trong quá khứ với các nhà thiết kế khi họ phải làm việc trong một dự án ASP.NET WebForms đang được phát triển.

1. Triển khai tại địa phương: Các nhà phát triển cung cấp một phiên bản trung gian của dự án được triển khai tại địa phương. Điều này tiết kiệm thời gian cho cả hai. Nhà thiết kế yêu cầu .aspx nhưng tương tác với HTML được kết xuất thay vì với mã máy chủ. Cách tiếp cận này trừu tượng mã máy chủ từ người thiết kế. Anh ta không cần biết HTML được tạo như thế nào hoặc cách thức javscript và csscác tệp được gửi đến máy khách. Tất nhiên, điều này giả định rằng các nhà thiết kế có kỹ năng với trình gỡ lỗi trình duyệt / trình kiểm tra DOM. Nhà thiết kế có thể áp dụng tất cả các cssthay đổi của mình bên trong trình duyệt và sau đó áp dụng chúng cho các csstệp.
2. Cung cấp các mô hình: Để làm cho các nhà thiết kế hợp lý hơn với HTML, hãy cung cấp cho họ một mô hình HTML được điều khiển bởi máy chủ. Họ có thể điều chỉnh HTML đó đến điểm mà họ thích và đề xuất các thay đổi sẽ được áp dụng trong triển khai phía máy chủ. Điều này cần phải được thực hiện sớm và thường xuyên , vì bạn không muốn kết thúc với cấu trúc HTML mà việc triển khai phía máy khách dựa vào và sau đó để nhà thiết kế đề xuất các thay đổi trên cấu trúc đó.

Các nhà thiết kế nói chung nên có càng ít điểm tiếp xúc với mã phía máy chủ càng tốt, vì vậy hãy trừu tượng nó ra khỏi chúng càng nhiều càng tốt.

Là một nhà phát triển lai, bản thân tôi (đã thực hiện rất nhiều công việc ở cả vai trò back-end và front-end, thường cùng nhau), tôi cũng không thích mô hình ASP.NET WebForms ... trong khi ban đầu thiết kế thúc đẩy là cung cấp các công cụ thiết kế dễ dàng, kéo và thả để dân chủ hóa phát triển web (giống như cách mà Visual Basic tạo lập trình ứng dụng có thể truy cập cho người không phải là CS), các phương thức mà nó đã sử dụng để cố gắng ép buộc môi trường không trạng thái (web) bị bó tay và bị ép buộc (oh ViewState, làm thế nào tôi ghê tởm bạn!).

Chúng cũng vi phạm một số nguyên tắc trung tâm về phát triển và tạo kiểu đánh dấu, bởi thực tế, theo mặc định, ASP.NET chiếm lấy thuộc tính ID, buộc các nhà thiết kế CSS sử dụng các lớp giống như cách sử dụng ID, các yếu tố phân lớp trong các ngăn xếp sâu của div và các thẻ lồng nhau có thể khiến việc điều khiển kiểu dáng trở thành một cơn ác mộng trong tất cả các hệ thống đơn giản nhất.

Với những điều này, đường dẫn của bạn không phải là một điều dễ dàng, vì tôi cho rằng việc viết lại cho MVC sẽ là chi phí hoặc thời gian bị cấm.

Có cách nào để cung cấp cho nhà thiết kế một môi trường để chạy ứng dụng web, để họ có thể thấy các thay đổi CSS của họ trong thời gian thực không? Khi tôi đang thực hiện công việc thiết kế trong ASP.NET WebForms, tôi thấy thật vô giá khi có thể kích hoạt ứng dụng web trên máy của riêng tôi, thực hiện các chỉnh sửa cho CSS và chạy nó cục bộ để xem điều đó ảnh hưởng đến ứng dụng như thế nào.

Một tùy chọn có thể là thiết lập một máy ảo được thiết kế riêng cho phát triển ASP.NET mà nhà thiết kế có thể chạy từ máy trạm của họ, vì vậy họ không phải trộn hai bộ công cụ của mình và nếu chúng tình cờ làm hỏng thứ gì đó trong dev- không gian, nó luôn có thể được tải lại từ một hình ảnh hoạt động.

Vâng, điều này có nghĩa là nhà thiết kế sẽ phải học cách nhấn F5 để chạy ứng dụng. (Hoặc chỉ cấp cho họ quyền truy cập FTP vào các thư mục chứa CSS, JS và hình ảnh, thậm chí, trên môi trường thử nghiệm!) Điều đó cũng có nghĩa là họ sẽ thấy rất nhiều mã back-end, mặc dù nếu bạn bảo họ chỉ cần bỏ qua các tệp .cs hoặc .vb của bạn, điều đó sẽ đi một chặng đường dài để giữ cho chúng không bị hoảng loạn ... Tất nhiên, điều đó có nghĩa là bạn phải chắc chắn rằng bạn không làm những việc như cài đặt kiểu từ các tệp mã của bạn .. (nhưng bạn sẽ không làm điều đó, vì bạn sẽ liên kết dữ liệu và xem quá chặt chẽ phải không?).

Nếu trang web của bạn được cấu trúc tốt, với các tệp CSS và JS riêng biệt và không có nhiều kiểu dáng nội tuyến bắt buộc khi đánh dấu, có thể họ có thể hoàn thành phần lớn công việc của mình bằng cách chỉ cần tránh các khu vực <%%>. Mặt khác, nó cũng có thể giúp nhà thiết kế đánh giá cao hơn một chút về những gì bạn phải trải qua, khi cố gắng dịch HTML / CSS tĩnh của họ sang thứ gì đó hoạt động cho một ứng dụng động.

Bạn cần làm cho họ nói chuyện với nhau, hiểu nhu cầu và sở thích của nhau. Đó là một "vấn đề" không thể giải quyết bằng phần mềm và công cụ. Đừng cố gắng làm hài lòng cả hai bên, điều đó sẽ không bao giờ hoạt động. Họ cần phải thỏa hiệp - nó giống như một cuộc hôn nhân.

Một cách là sắp xếp f.ex. hội thảo nơi mỗi bên có cơ hội giải thích lý do tại sao họ thích những gì họ thích. Giao tiếp tốt luôn là chìa khóa trong những tình huống như thế này. Tập hợp như vậy có thể được coi là đầu tư.

Hay nói một cách đơn giản, vấn đề là định hướng tổ chức, không phải kỹ thuật và đó là nơi bạn cần cung cấp giải pháp.

Tùy chọn khác là tăng lương và bảo họ im lặng (thường là giải pháp ngắn hạn ...).