ASP.NET Webforms 개발자와 웹 디자이너 : 상호 작용하는 방법?

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를 돌리고 웹 컨트롤에 대해 화를 내고 신음했습니다. 솔직히 디자이너가 각 TD에 'rel'태그 (또는 무엇이든)가 있다는 것을 설계했기 때문에 디자이너가 .NET 개발자보다 GridView의 사용자 지정 구현을 조사하는 것보다 실습을 조정하는 것이 훨씬 저렴합니다 .

Arseni Mourzenko가 매우 현명하게 지적했듯이 Webforms를 사용하기로 결정한 것은 HTML에 대한 일부 제어를 제한하면서 코딩의 효율성을 높이는 회사의 선택입니다. 회사가 (디자이너를 기쁘게하기 위해하지 말아야 할) 재고를 기꺼이 고려하지 않는 한, 디자이너는이 현실을 받아 들여야합니다. 그들이 할 수있는 몇 가지가 있습니다 :

1) ID에 따라 중지하십시오 . 처음에는 이것이 잘못되었다고 생각했지만 클래스 (및 상속)로 모든 것을 스타일링하면 인생이 실제로 훨씬 쉽다는 것을 알았습니다. 우선, 그것은 모든 선택기 가중치를 동일하게했습니다. CSS 상속에서 ID는 CLASS보다 우선합니다. 실제로 모든 것이 어린이 및 / 또는 클래스 선택자가되는 것이 좋았으며 특이성 순서를 조금 더 간단하게 파악했습니다. JS 레이어에서 똑같이, 그것은 ZERO가 ID 기반 선택기를 클래스 기반 선택기로 교체하는 데 어려움을 겪었습니다.

2) Label = span, Panel = div 및 기타 명확하지 않은 control-to-html 항목과 함께 RadioButtonLists 및 CheckboxLists 가로 변환되는 것을 가르쳐주십시오 . .NET에서 HTML로 렌더링하는 방식은 예상보다 조금 이상했으며 HTML이 해당 컨트롤에서 어떻게 나오는지 알면 화면을 만드는 것이 훨씬 쉬웠습니다.

3) 원시 HTML ( ! 중요 )이 아닌 ASPX에서 디자이너를 직접 수행 하게 하십시오. 디자이너에게 GridViews, ListViews 등의 기본 사항을 가르치십시오. 익명의 객체 컬렉션을 Grid / ListView 컨트롤로 푸시하는 코드 스 니펫을 제공하십시오. CSS를 배울 수 있다면이 코드를 복사하여 붙여 넣는 방법을 배울 수 있습니다. 무료 버전의 VS Web Express를 사용할 수 있습니다. 이는 CSS & JS 작업에 상당히 좋습니다. 이러한 더미 웹 프로젝트는 디자이너에게 컨트롤을 입력 한 다음 소스보기를 통해 렌더링 방법을 확인할 수있는 기회를 제공합니다.

4) .NET에서 FORM 태그가 어떻게 사용되는지 설명하십시오 . 이것에 대해 이전에 잊어 버렸지 만 디자이너가 익숙해 져야 할 또 다른 것은 일반적으로 단일 FORM 태그가 전체 페이지를 감싸는 것입니다. 이렇게하면 양식 컨트롤의 동작 방식이 변경되고 별난 부작용없이 FORM 태그를 중첩 할 수 없습니다. 디자이너가 이것을 이해해야하며 그렇지 않으면 양식 HTML이 WebForms에 악몽이 될 것입니다.

5) 테마와 스킨을 피하십시오 . .NET 프레임 워크에는 응용 프로그램 전체의 스타일 컨트롤을 돕기위한 이러한 도구가 있지만 일반 웹 디자이너에게는 어색하고 이상합니다. CSS에 정통하지 않은 개발자에게는 훌륭한 도구 인 것 같지만 디자이너 속도가 느려집니다. 디자이너가 자연 환경 (html 및 css 파일)에서 작업하게하면 더 행복하고 생산적입니다.

6) "시제품"프로젝트를 사이트 솔루션에 보관하십시오 . 개발자가 항상 코드 대상을 갖도록하려면 디자이너가 실제 솔루션에서 가짜 웹 프로젝트를 작성하여 실제 개발자가 ASPX 전용 페이지를 보존하고 그대로 유지하도록하십시오. 즉, 디자이너는 실제 프로젝트와 동일한 솔루션으로 프로토 타입을 다시 검토하여 개발자의 작업 방식을 확인할 수 있으며 개발자는 언제든지 프로토 타입을 실행하여 작업 내용이 디자이너의 의도와 일치하는지 확인할 수 있습니다.

마지막으로 개발자를 다시 훈련시킬 준비가되지 않은 경우 MVC로 전환 할 수있는 불만에 저항하십시오. 개인적으로 MVC를 좋아하지만 WebForms 지식이 많은 팀을 보유한 경우 아무 이유없이 버리지 마십시오. 응용 프로그램에 ViewState 문제, SEO 문제 또는 내게 필요한 옵션 문제가있는 경우 MVC에 어려운 모양을 부여해야합니다. 그러나 MVC에서 WebForms 개발자를 교육하는 데 디자이너가 웹 컨트롤을 사용하는 방법을 교육하는 것보다 많은 시간이 걸립니다.

하루가 끝날 무렵, DESIGN I CAME ACROSS가 없었습니다. WebForms에서 개인적으로 작업을 할 수 없었습니다.

디자이너에게 .aspx 페이지의 렌더링 된 (html 페이지)를 제공하는 도구 나 응용 프로그램이 있습니까?

식을 잊어 버려요. 무료 버전의 Visual Studio (Web Developer Express)를 제공하십시오. 소스 제어 솔루션을 원하는대로 사용할 수 있으며 디자이너는 ASPX 페이지를 실행하고 렌더링 된 HTML을 브라우저에서 볼 수 있습니다. CSS와 JS 툴링은 예전보다 훨씬 우수하며 Web Essentials와 같은 확장 기능으로 구워진 멋진 툴이 있습니다. VS 인터페이스에서 CSS 규칙을 공급 업체별 편차, 색상 선택기 및 팔레트로 한 번 클릭으로 변환, CSS 파일에 'LESS'CSS 변환 (CSS로 '코딩'가능) F12 JavaScript의 '탐색'과 실제 인텔리전스 등 디자이너들을위한 보물 창고입니다

문제에 대한 해결책이 있지만 MVP 로 디자인 패턴을 변경해야 합니다. 이것은 시작하기 전에 신중하게 고려해야하는 시간에 대한 선행 투자입니다.

기본적으로 발생하는 문제는 새로운 것이 아닙니다. 요컨대, 뷰가 지원하는 데이터 모델을 식별하는 인터페이스를 통해 뷰 추상화를 도입해야합니다.

패턴을 삶의 예로 보는 것은 매우 포괄적 인 주제입니다. 이 예 는 MVP 패턴을 사용하여보다 나은 웹 양식을 만드는 데 도움이 됩니다.

편집 : 위의 제안 이 시간과 자원 측면에서 너무 비싸면 디자이너와 더 가깝게 작업하는 것이 좋습니다. 팀 내에서 문제 를 전달 하면 (디자이너 및 개발자) 작업의 장애를 해결하는 데 큰 도움이 될 것입니다. 이것은 팀 작업 이며 작업을 수행하기 위해 모든 장애물을 제거하기 위해 문제를 잘 협력 하여 팀으로서 프로젝트에서 성공 하는 방법입니다 ! 이것은 우리 프로젝트에서하는 것입니다.

ASP.NET은 생성 된 HTML 코드를 추상화하는 프레임 워크입니다. 이는 ASP.NET 컨트롤에 의해 생성 된 내용을 다시 작성할 예산이 충분하지 않은 한 ASP.NET 응용 프로그램에서 지정된 HTML 코드를 정확하게 재현하라는 요청을받을 수 없음을 의미 합니다 .

ASP.NET 컨트롤을 장점과 단점으로 사용하거나 수동 HTML (또는 ASP.NET MVC)로 전환하여 현재 프로젝트의 비용을 수천 달러 증가시키는 것은 이해 관계자의 결정에 달려 있습니다. .

이러한 맥락에서 HTML을 사용자 정의 할 수 없다는 것은 다른 어떤 것과도 같은 제약입니다. 설계자는 자신의 업무에서이 기술적 제약을 고려해야합니다. 디자이너가 텍스트를 정확한 크기로 정확한 글꼴로 표시해야한다고 말하는 경우와 매우 유사합니다. 인쇄되지 않은 웹 지원이므로 텍스트의 크기가 다양합니다.

도구에 관해서는 일반 HTML을 ASP.NET 템플릿으로 변환하는 도구를 모릅니다. 특정 테이블을 특정 ASP.NET 컨트롤로 변환해야한다고 어떻게 추측 할 수 있습니까?

마지막 작업에서 개발자는 응용 프로그램을 빌드 한 다음 디자이너에게 전달하여 소프트웨어 프로그래머가 만들지 않은 것처럼 보일 수 있도록했습니다. :)

우리가이 프로세스를 처음 시작했을 때 개발자와 디자이너 사이에는 많은 것이있었습니다. 그들은 주어진 페이지를 이해하지 못했습니다. 페이지를 동적으로 구축하는 경우 천국은 금지합니다! 여기에서 설명하는 상황과 거의 동일했습니다.

나는 각 디자이너와 함께 앉아서 로컬 상자에 웹 응용 프로그램을 설치하는 방법을 가르쳤습니다. 나는 그들에게 그것을 실행하는 방법과 모든 것을 보여주었습니다. ASP 컨트롤이 화면에 어떻게 렌더링되는지 설명했습니다. 그런 다음 브라우저에서 열어서 방화범을 사용하여 ASP 컨트롤과 렌더링 된 항목 사이의 링크를 확인했습니다.

이것은 그들에게 많은 도움이되었습니다. 그들이 그것을보고 그들의 상자에서 그것을 실행할 수 있고 그들의 디자인 도구를 사용하여 스타일을 조정하고 놀기만하면, 그들의 생활은 더 쉬워졌다.

이 작업을 수행 한 후 개발자와 회의를 가졌으며 CssClass 태그를 사용해야하고 스타일이 정의되어 있는지 확인해야한다고 알 렸습니다. 또한 화면에 동적으로 배치 된 모든 것에는 디자이너가 추가 할 수없는 CSS 클래스가 있어야합니다.

과정이었다. 양측이 합의에 익숙해 지려면 약간의 시간이 걸렸다. 그러나 그것은 의사 소통의 선을 열었습니다. 사용 된 컨트롤에 대해 불평하는 대신 디자이너는 다양한 요소에 스타일을 추가하도록 요청할 수있었습니다.

그래서 제 제안은 디자이너와 함께 앉아서 페이지가 어떻게 렌더링되는지 보여줄 것입니다. 방화범을 사용하여 페이지를 해부하고 페이지가 형성되는 방식을 살펴 봅니다.

다음은 디자이너가 개발중인 ASP.NET WebForms 프로젝트에서 작업해야 할 때 과거에 사용했던 유용한 방법입니다.

1. 로컬로 배포 : 개발자는 로컬로 배포 된 프로젝트의 중간 버전을 제공합니다. 이렇게하면 시간이 절약됩니다. 디자이너는 .aspx를 요청하지만 서버 코드 대신 렌더링 된 HTML과 상호 작용합니다. 이 접근 방식은 디자이너의 서버 코드를 추상화합니다. 그는 HTML이 어떻게 생성되는지와 javscript 및 css파일이 어떻게 클라이언트에 전달 되는지 알 필요가 없습니다 . 물론 이것은 디자이너가 브라우저 디버거 / DOM 관리자에 능숙하다고 가정합니다. 디자이너는 css브라우저 내에서 모든 변경 사항을 적용한 후 css파일에 적용 할 수 있습니다.
2. 모델 제공 : 디자이너가 HTML로 작업하는 것이보다 합리적으로 이루어 지도록하려면 서버 컨트롤에서 렌더링 한 HTML 모델을 제공하십시오. HTML을 원하는 지점으로 조정하여 서버 측 구현에 적용 할 변경 사항을 제안 할 수 있습니다. 클라이언트 측 구현이 의존하는 HTML 구조로 설계 한 다음 디자이너가 해당 구조에 대한 변경을 제안하지 않기 때문에이 작업은 조기 에 자주 수행해야합니다 .

설계자는 일반적으로 가능한 서버 측 코드와의 터치 포인트가 적어야하므로 최대한 추상화하십시오.

백엔드 및 프론트 엔드 역할에서 많은 작업을 수행 한 하이브리드 개발자 인 저는 ASP.NET WebForms 모델을 오랫동안 싫어했습니다. 디자인 자극은 웹 개발을 민주화 할 수있는 손쉬운 드래그 앤 드롭 디자인 도구를 제공하는 것이 었습니다 (비주얼 베이직이 비 주요 사용자가 앱 프로그래밍에 액세스 할 수 있도록하는 것과 같은 방식). 무국적 환경 (웹)은 무모하고 강제적입니다 (오 ViewState, 어떻게 내가 당신을 혐오하는지!).

또한 기본적으로 ASP.NET은 ID 속성을 대신하여 CSS 디자이너가 ID를 사용하는 것과 같은 방식으로 클래스를 사용하도록한다는 사실만으로 마크 업 개발 및 스타일링의 핵심 원칙 중 일부를 위반합니다. 가장 단순한 시스템을 제외한 모든 시스템에서 컨트롤의 스타일을 악의적으로 만들 수있는 div와 중첩 태그의 깊은 스택에 요소를 계층화합니다.

이러한 점을 감안할 때 MVC의 재 작성이 비용 또는 시간이 엄청나다고 가정하므로 경로는 쉽지 않습니다.

디자이너에게 웹 응용 프로그램을 실행할 수있는 환경을 제공하여 CSS 변경 사항을 실시간으로 볼 수있는 방법이 있습니까? ASP.NET WebForms에서 디자인 작업을 수행 할 때 내 컴퓨터에서 웹앱을 실행하고 CSS를 조정 한 다음 로컬로 실행하여 앱에 어떤 영향을 미치는지 확인할 수 있다는 것이 매우 중요합니다.

한 가지 옵션은 디자이너가 워크 스테이션에서 실행할 수 있도록 ASP.NET 개발에 맞게 가상 머신을 설정하는 것입니다. 따라서 두 툴셋을 혼합 할 필요가없고 개발자가 무언가를 망치는 경우 공간이 있으면 항상 작동하는 이미지에서 다시로드 할 수 있습니다.

예, 이는 디자이너가 F5를 눌러 앱을 실행하는 방법을 배워야한다는 것을 의미합니다. (또는 테스트 환경에서도 CSS, JS 및 이미지가있는 디렉토리에 대한 FTP 액세스 권한을 부여하십시오!) 또한 많은 백엔드 코드를 볼 수 있음을 의미합니다. .cs 또는 .vb 파일을 무시하면 당황하지 않을 수 있습니다. 물론 코드 숨김 파일에서 스타일을 설정하는 등의 작업을 수행하지 않아야합니다. (하지만 데이터를 연결하고 너무 가깝게 볼 수 있으므로 그렇게하지 않겠습니까?).

사이트가 뚜렷한 CSS 및 JS 파일로 잘 구성되어 있고 마크 업에 많은 인라인 스타일이 적용되지 않은 경우 <% %> 영역을 피함으로써 대부분의 작업을 수행 할 수 있습니다. 반면, 정적 HTML / CSS를 동적 앱에 적합한 것으로 변환하려고 할 때 디자이너가 좀 더 이해해야 할 수도 있습니다.

서로 이야기하고 서로의 요구와 선호도를 이해해야합니다. 소프트웨어와 도구로는 해결할 수없는 "문제"입니다. 결코 작동하지 않을 두 당사자를 기쁘게하려고하지 마십시오. 그들은 타협해야합니다-결혼과 같습니다.

한 가지 방법은 f.ex를 정리하는 것입니다. 각 당사자가 자신이 선호하는 것을 선호하도록 이유를 설명 할 수있는 워크샵. 이와 같은 상황에서는 항상 의사 소통이 중요합니다. 이와 같은 수집은 투자로 볼 수 있습니다.

간단히 말해서, 문제는 기술적 인 문제가 아니라 조직 지향적 인 것이며 솔루션을 제공해야하는 곳입니다.

다른 옵션은 임금을 인상하고 폐쇄하도록 지시하는 것입니다 (보통 단기 해결책 ...).