Desenvolvedores e web designers do ASP.NET Webforms: como interagir?

Sou desenvolvedor de Webforms do ASP.NET e enfrento alguns problemas ao lidar com designers.

Os designers sempre reclamam do asp.net server controls. Eles preferem apenas ter um arquivo html e criar cssarquivos junto com as imagens necessárias para acompanhá-las. Às vezes, se a fase de design é feita com antecedência, recebo arquivos html com arquivos css relacionados, mas enfrentamos muitos problemas ao integrar o design com os aspxarquivos (sever controla um telerik controla ... etc).

O que eu quero perguntar é:

• Como supero esses problemas? Os designers preferem desenvolvedores de php e mvc por causa dos problemas com os controles do servidor .net. Eu preciso saber como interagir com os designers da maneira correta.
• Existem ferramentas ou aplicativos para fornecer aos designers a renderização (página html) das páginas .aspx? Por isso, quero dizer a página em tempo de execução, e não o aspx no Visual Studio. Eles usam a Expressão da Web, mas também querem a página renderizada em html.

O ex-designer aqui, virou Dev, e eu costumava mijar e lamentar sobre Web Controls também. Honestamente, é MUITO mais barato para um designer ajustar suas práticas do que para um desenvolvedor .NET mergulhar em uma impelmentação personalizada de um GridView porque o designer INSISTEU que cada TD tem uma tag 'rel' (ou qualquer outra coisa).

Como Arseni Mourzenko apontou com muita sabedoria, a decisão de usar Webforms é uma escolha da empresa que limita parte do controle sobre o HTML e concede algumas eficiências na codificação. A menos que a empresa esteja disposta a reconsiderar (o que NÃO deve fazer apenas para agradar os designers), os designers precisam aceitar essa realidade. Aqui estão algumas coisas que eles podem fazer:

1) Pare dependendo dos IDs para qualquer coisa . Embora isso tenha parecido errado no começo, descobri que a vida era realmente muito mais fácil quando estilizava tudo com classes (e herança, é claro). Primeiro de tudo, igualou todos os meus pesos de seleção. Na herança de CSS, o ID supera CLASS. Foi realmente bom ter tudo como criança e / ou seletor de classe, e simplificou um pouco mais a compreensão da ordem de especificidade. A mesma coisa na camada JS, deu-me ZERO para trocar meus seletores baseados em ID por seletores baseados em classe.

2) Ensine a eles o que RadioButtonLists e CheckboxLists se convertem , junto com Label = span, Panel = div e os outros itens não-óbvios de controle para html. A maneira como o .NET os processa para HTML foi um pouco mais estranha do que eu esperava, e foi muito mais fácil criar telas quando soube como o HTML sairia desses controles.

3) Faça com que eles projetem seus designers no ASPX diretamente , e não no HTML bruto ( ! Importante ). Ensine aos designers o básico sobre GridViews, ListViews, etc. Dê a eles alguns trechos de código para enviar uma coleção de objetos anônimos para um controle Grid / ListView. Se eles podem aprender CSS, podem aprender a copiar e colar esse código. Eles podem usar a versão gratuita do VS Web Express, que é bastante boa no trabalho de CSS e JS agora. Esses projetos fictícios da web darão aos designers a chance de inserir alguns controles e, em seguida, Exibir código-fonte para ver como eles são renderizados.

4) Explique como a tag FORM é usada no .NET . Esqueceu-se disso antes, mas outra coisa com a qual o designer deve se acostumar é que, geralmente, uma única tag FORM envolve a página inteira. Isso altera a maneira como os controles de forma se comportam e você não pode aninhar tags FORM sem efeitos colaterais realmente estranhos. Certifique-se de que os designers entendam isso; caso contrário, seu formulário HTML será um pesadelo para se transformar em WebForms.

5) Fique longe de Temas e Skin . Embora a estrutura .NET tenha essas ferramentas para ajudar a estilizar os controles em um aplicativo, elas são desajeitadas e estranhas para os Web Designers normais, e nunca achei que valessem a pena. Eles parecem uma boa ferramenta para desenvolvedores que não são bem versados ​​em CSS, mas que apenas retardam os designers. Deixe os designers trabalharem em seu ambiente natural (arquivos html e css) e eles serão mais felizes e produtivos.

6) Mantenha projetos de "protótipo" nas soluções do seu site . Para garantir que os desenvolvedores sempre tenham um alvo contra o qual codificar, peça aos designers que criem um projeto da Web falso em sua solução real para manter suas páginas somente ASPX preservadas e intocadas pelos desenvolvedores reais. Isso significa que os designers podem olhar para seus protótipos na mesma solução que o projeto real para verificar como os desenvolvedores foram, e os desenvolvedores podem executar o protótipo a qualquer momento para garantir que seu trabalho corresponda à intenção dos designers.

Por fim, resista a quaisquer reclamações para converter para MVC, a menos que você esteja pronto para treinar novamente seus Devs. Eu amo o MVC pessoalmente, mas se você tem uma equipe com muitos conhecimentos em WebForms, não jogue isso fora por nenhuma razão. Se seus aplicativos estão tendo problemas com o ViewState, problemas de SEO ou problemas de acessibilidade, dê uma olhada no MVC. Mas levará muito mais tempo para treinar desenvolvedores WebForms no MVC do que para treinar Designers como usar Web Controls.

No final do dia, não havia NENHUM PROJETO EM QUE EU ENCONTROU, que eu não poderia trabalhar pessoalmente nos WebForms, mesmo que eu acabasse xingando o maldito GridView por uma hora antes de descobrir.

Existem ferramentas ou aplicativos para fornecer aos designers a renderização (página html) das páginas .aspx?

Esqueça a expressão (nunca gostei). Obtenha a versão gratuita do Visual Studio (Web Developer Express). Ele pode se conectar a qualquer solução de controle de origem que você tiver, e permitirá que os designers executem suas páginas ASPX e vejam o HTML renderizado em um navegador. As ferramentas CSS e JS são muito melhores do que costumavam ser, e existem algumas ferramentas impressionantes incorporadas em extensões como o Web Essentials. Transformação em 1 clique das regras CSS em todos os seus desvios específicos do fornecedor, seletores de cores e paletas diretamente na interface VS, incorporação de imagens em arquivos CSS nos arquivos css, transformações CSS 'MENOS' (você pode 'codificar' em CSS), F12 'Navegue para' no JavaScript, além de inteligência real e muito mais. É um tesouro para designers agora, para sua informação,

Existe uma solução para seus problemas, mas isso envolve uma alteração no padrão de design para o MVP . Este é um investimento inicial de tempo que precisa ser levado em consideração antes do início.

Basicamente, os problemas que você está enfrentando não são novos. Em resumo, você precisa introduzir uma abstração de exibição por meio da interface que identifica o modelo de dados que a exibição suporta.

É um tópico muito abrangente que faz sentido ver o padrão como um exemplo de vida. Você encontrará este exemplo bastante informativo para o seu caso - Better Web Forms com o MVP Pattern .

Edit: Se a sugestão acima for muito cara (em termos de tempo e recursos) a seguir, eu definitivamente aconselho a trabalhar com seu designer mais de perto . Acredito que a comunicação de seus problemas dentro de uma equipe deve ajudar muito a resolver impedimentos no seu trabalho (do designer e do desenvolvedor). Este é um trabalho em equipe e uma boa colaboração de questões para remover todos os obstáculos para executar o trabalho é o caminho para obter sucesso em um projeto como uma equipe ! Isso é algo que fazemos em nosso projeto.

O ASP.NET é uma estrutura que abstrai o código HTML gerado. Isso significa que você não pode ser solicitado a reproduzir exatamente um determinado código HTML em um aplicativo ASP.NET, a menos que tenha orçamento suficiente para reescrever qualquer coisa gerada pelos controles do ASP.NET .

Cabe às partes interessadas decidir: ou você usa os controles do ASP.NET com seus pontos fortes e desvantagens ou muda para o HTML manual (ou para o ASP.NET MVC), aumentando o custo do projeto atual em milhares de dólares .

A incapacidade de personalizar o HTML nesse contexto é uma restrição como qualquer outra. Os projetistas devem considerar essa restrição técnica em seu trabalho. O caso é muito semelhante ao se o designer disser que um texto deve ser exibido na fonte exata com tamanho exato: é um suporte da Web, não é impresso, o que significa que o tamanho do texto variará.

Quanto às ferramentas, não conheço as ferramentas que converterão HTML simples em um modelo ASP.NET. Como é possível adivinhar que uma tabela específica deve ser convertida em um controle ASP.NET específico?

No meu último trabalho, os desenvolvedores construíam o aplicativo e depois passavam para os designers, para que parecessem que um monte de programadores de software não o faziam. :)

Quando começamos esse processo, havia muitas discussões entre os desenvolvedores e designers. Eles não entenderam as páginas que receberam. Deus nos livre se estivéssemos construindo uma página dinamicamente! Era o mesmo que a situação que você está descrevendo aqui.

Sentei-me com cada designer e ensinei como instalar o aplicativo da Web na caixa local. Eu mostrei a eles como executá-lo e tudo. Expliquei como os controles asp foram renderizados na tela. Em seguida, abrimos no navegador e usamos o firebug para ver o link entre os controles asp e o que foi renderizado.

Isso os ajudou muito. Uma vez que eles podiam vê-lo e executá-lo em suas caixas e usar suas ferramentas de design para ajustar e brincar com estilos, isso tornava suas vidas mais fáceis.

Depois disso, tive uma reunião com os desenvolvedores e avisei que eles deveriam usar a tag CssClass e garantir que os estilos estivessem sendo definidos. E qualquer coisa que estava sendo colocada na tela dinamicamente precisa ter uma classe css anexada a ela porque os designers não poderiam adicioná-la.

Foi um processo. Demorou algum tempo para ambos os lados se acostumarem com o arranjo. Mas abriu as linhas de comunicação. Em vez de reclamar dos controles usados, os designers puderam solicitar que estilos fossem adicionados a vários elementos.

Portanto, minha sugestão seria sentar com os designers e mostrar como a página é renderizada. Use o firebug para dissecar a página e passar por como a página se formou.

Aqui estão algumas abordagens úteis que tomei no passado com designers quando eles precisam trabalhar em um projeto ASP.NET WebForms que está sendo desenvolvido.

1. Implantar localmente: os desenvolvedores fornecem uma versão intermediária do projeto implantado localmente. Isso economiza tempo para ambos. O designer solicita um .aspx, mas interage com o HTML renderizado em vez de com o código do servidor. Essa abordagem abstrai o código do servidor do designer. Ele não precisa saber como o HTML é gerado ou como os arquivos javscript e csssão entregues ao cliente. Obviamente, isso pressupõe que os projetistas tenham experiência com depuradores de navegador / inspetor DOM. O designer pode aplicar todas as suas cssalterações dentro do navegador e depois aplicá-las aos cssarquivos.
2. Fornecer modelos: para tornar mais sensato os designers trabalharem com HTML, forneça a eles um modelo do HTML renderizado pelo controle do servidor. Eles podem ajustar o HTML ao ponto em que eles gostam e propor as alterações a serem aplicadas na implementação do lado do servidor. Isso precisa ser feito antecipadamente e com frequência , porque você não deseja finalizar com uma estrutura HTML na qual a implementação do cliente se baseia e, em seguida, para o designer propor alterações nessa estrutura.

Em geral, os designers devem ter o mínimo de pontos de contato possível com o código do lado do servidor, portanto, abstraia-os o máximo possível.

Como desenvolvedor híbrido, eu mesmo (tendo trabalhado muito em funções de back-end e front-end, muitas vezes juntas), também detesto o modelo ASP.NET WebForms de longa data ... enquanto sua inicial O ímpeto do design foi fornecer ferramentas de design fáceis de arrastar e soltar para democratizar o desenvolvimento da Web (da mesma maneira que o Visual Basic tornou a programação de aplicativos acessível para os que não são de nível superior em CS), os métodos usados ​​para tentar forçar o estado em um ambiente apátrida (a web) é forçado e forçado (oh ViewState, como eu te odeio!).

Eles também violam alguns dos princípios centrais do desenvolvimento e estilo de marcação, apenas pelo fato de, por padrão, o ASP.NET assumir o atributo ID, forçando os designers de CSS a usar classes da mesma maneira que os IDs deveriam ser usados, elementos de camadas em pilhas profundas de divs e tags aninhadas que podem tornar o estilo dos controles um pesadelo em todos, exceto nos sistemas mais simplistas.

Dado isso, seu caminho não é fácil, pois presumo que uma reescrita para MVC seja proibitiva em termos de custo ou tempo.

Existe alguma maneira de fornecer ao designer um ambiente no qual executar o aplicativo Web, para que eles possam ver suas alterações de CSS em tempo real? Quando estou fazendo um trabalho de design no ASP.NET WebForms, acho inestimável poder inicializar o aplicativo Web em minha própria máquina, fazer ajustes no CSS e executá-lo localmente para ver como isso afeta o aplicativo.

Uma opção pode ser configurar uma máquina virtual adaptada especificamente ao desenvolvimento do ASP.NET que o designer possa executar em sua estação de trabalho, para que não precisem misturar seus dois conjuntos de ferramentas e, se acontecer, estragar algo no desenvolvimento. espaço, ele sempre pode ser recarregado a partir de uma imagem em funcionamento.

Sim, isso significa que o designer precisará aprender a pressionar F5 para executar o aplicativo. (Ou apenas dê a eles acesso ao FTP aos diretórios em que o CSS, JS e as imagens estão, até, em um ambiente de teste!) Isso também significa que eles verão muito código de back-end, embora, se você lhes pedir para apenas ignore os arquivos .cs ou .vb, que ajudarão bastante a evitar que entrem em pânico ... É claro que isso significa que você deve ter certeza de que não está fazendo coisas como definir estilos dos arquivos por trás dos códigos .. . (mas você não faria isso, faria isso porque vincula dados e visualiza muito de perto, certo?).

Se o seu site estiver bem estruturado, com arquivos CSS e JS distintos, e não houver muito estilo embutido forçado na marcação, é possível que eles possam realizar a maior parte de seu trabalho, apenas evitando que as áreas <%%>. Por outro lado, também pode dar ao designer um pouco mais de consideração pelo que você deve passar ao tentar converter o HTML / CSS estático em algo que funcione para um aplicativo dinâmico.

Você precisa fazê-los conversar juntos, entender as necessidades e preferências do outro. É um "problema" que não pode ser resolvido por software e ferramentas. Não tente agradar as duas partes, isso nunca funcionará. Eles precisam se comprometer - é como um casamento.

Uma maneira é organizar o arquivo f.ex. oficinas onde cada uma das partes tem a chance de explicar por que é que prefere o que prefere. Uma boa comunicação é sempre a chave em situações como essa. Reuniões como essas podem ser vistas como investimentos.

Ou simplesmente, o problema é orientado para a organização, não técnico e é aí que você precisa fornecer a solução.

A outra opção é aumentar o salário e pedir que calem a boca (geralmente uma solução de curto prazo ...).