Designer e Suporte CSS do Visual Studio 2008

Mudámos de casa – visitem o novo site em www.istomesmo.com

    image

    O novo designer do Visual Studio 2008 foi completamente renovado, rompendo com o que já vinha deste o tempo do antigo FrontPage. Este designer tenta aproximar-se de um dos seus maiores concorrentes, o Dreamweaver, estando agora bastante semelhante.

    Quando abrimos o designer da versão beta 2 do Visual Studio 2008, deparamo-nos logo com uma vista dividida, ou seja, podemos estar a visualizar o código HTML e o design ao mesmo tempo.

    Split View Visual Studio 2008

    Qualquer alteração que se efectue quer no código quer no design, irá reflectir-se no outro lado. Se seleccionarmos um elemento na página, o código correspondente será destacado, e vice-versa. Além desta melhoria, é notória, o aumento de velocidade da actualização da vista do design. Na versão 2005, quando mudávamos da vista do código para o design, demorava sempre algum tempo até que vissemos alguma coisa. Com este novo designer, a transição é quase instantânea.

    O Visual Studio 2008 permite agora a visualização e edição de “Nested MasterPages”. As Nested MasterPages, são MasterPages encadeadas umas dentro das outras. Esta funcionalidade é bastante interessante para sites que contém secções/departamentos que necessitam de ser diferenciados através de um estilo próprio, mas ao mesmo tempo manter a lógica do site. Nestes casos, cria-se uma masterpage com o que é comum a todo o site, e depois criam-se outras masterpages que são colocadas dentro da masterpage principal com o resto do estilo que é diferente para cada departamento. Nesta versão beta ainda existem alguns problemas com esta funcionalidades, nomeadamente em relação ao suporte visual no editor, tendo-me deparado algumas vezes com o seguinte erro :

    page has one or more <asp:Content> controls that do not correspond with <asp:ContentPlaceHolder> controls in the Master Page

    image

    Ao fim de algumas tentativas lá consegui dar a volta ao problema. Bastou-me alterar alguma coisa na MasterPage principal depois de estar tudo concluido, e o Visual Studio lá actualizou o designer correctamente, como podem ver na imagem seguinte. Esperemos que na próxima versão este bug já venha corrigido.

    image

    A funcionalidade de Nested MasterPages também é muito interessante para a criação de templates de 3 colunas ou de 2 colunas, evitando-se a repetição de código que existiria se criássemos apenas duas MasterPages simples. Noutro artigo explicarei melhor este aspecto.

     

    Outra das novidades relacionada com o design é o novo gestor de CSS, que pode ser acedido através do menu Format » CSS Styles » Manage Styles.

    image

    Este gestor aparece como uma janela integrada no IDE.

    image

    Através deste gestor dos CSS, obtemos algumas informações bastante interessantes, que vou descrever de seguida:

    Distinção visual, através de cores, do que são classes, estilos de tags HTML e estilos de IDs.

    image

    Todos os estilos associados a elementos HTML aparecem a azul, os estilos associados a IDs aparecem a vermelho e as classes, aparecem a verde, como é visivel na imagem anterior.

    Distinção visual de quais os estilos que estão a ser ou não usados na página

    image

    Os estilos que estão a ser usados no documento em questão aparecem com um circulo cinzento à volta, e os que não estão a ser usados aparecem sem círculo, como podem ver pela imagem de cima.

    Previsão do Estilo e estilo onmouseover

    image

    Se passarmos com o rato por cima de um estilo, aparece-nos um tooltip com o código do estilo em questão, assim conseguimos ter acesso ao código sem termos de abrir o ficheiro de CSS. Outra funcionalidade também bastante interessante é a previsão do estilo em tempo real, como podemos ver na imagem anterior, em que na parte de baixo vemos a pré-visualização do estilo #header com uma imagem em background e tudo.

    Organização e Ordenação da lista de estilos

    image

    O gestor de estilos permite ainda organizar e categorizar a lista de estilos de diversas formas, por tipos, por elementos e por ordem, permite ainda mostrar todos os estilos, ou mostrar apenas os estilos que estão a ser usados naquela página.

    Criação de novo estilo

    image

    Podemos também criar um novo estilo logo a partir do gestor de estilos. Também o Wizard de criação foi melhorado.

    Aplicação de estilo directamente

    image

    O editor dispõe ainda de outra janela que permite aplicar estilos directamente, basta seleccionar o elemento ou o texto que vai receber o novo estilo, e depois clicar em cima do estilo, para que este seja aplicado automaticamente.

     

    Outra das novidades, ainda relacionadas com o uso de estilos (CSS), é a janela Propriedades CSS, que nos mostra informação sobre que estilos estão a afectar determinada parte da página, como por exemplo um botão.

    Através desta janela sabemos a hierarquia de estilos que afecta cada componente.

    image

    Existe também intellisense para CSS, ou seja, sempre que estivermos a atribuir uma class a um elemento, através de código, vamos ter acesso a uma lista com todos os estilos disponíveis.

    image

    Como podem ver, trabalhar com CSSs no novo Visual Studio 2008 é muito mais fácil e organizado.

    Durante os próximos dias sairão mais artigos com as novas funcionalidades do Visual Studio 2008.🙂

    Uma resposta

    1. […] » Designer e suporte de CSS bastante melhorado […]

    Deixe uma Resposta

    Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

    Logótipo da WordPress.com

    Está a comentar usando a sua conta WordPress.com Terminar Sessão / Alterar )

    Imagem do Twitter

    Está a comentar usando a sua conta Twitter Terminar Sessão / Alterar )

    Facebook photo

    Está a comentar usando a sua conta Facebook Terminar Sessão / Alterar )

    Google+ photo

    Está a comentar usando a sua conta Google+ Terminar Sessão / Alterar )

    Connecting to %s

    %d bloggers like this: