Laboratório Prático: Ferramentas da Web do Visual Studio 2013

O Visual Studio é um excelente ambiente de desenvolvimento para projetos Windows e web baseados em .NET. Ele inclui um editor de texto poderoso que pode ser facilmente usado para editar arquivos autônomos sem um projeto.

O Visual Studio mantém uma árvore de análise completa enquanto você edita cada arquivo. Isso permite que o Visual Studio forneça ações incomparáveis baseadas em documentos e preenchimento automático, tornando a experiência de desenvolvimento muito mais rápida e agradável. Esses recursos são especialmente poderosos em documentos HTML e CSS.

Todo esse poder também está disponível para extensões, simplificando a extensão dos editores com novos recursos poderosos para atender às suas necessidades. O Web Essentials é uma coleção de aprimoramentos (principalmente) relacionados à Web para o Visual Studio. Ele inclui muitas novas conclusões do IntelliSense (especialmente para CSS), novos recursos de Link do Navegador, JSHint automático para arquivos JavaScript, novos avisos para HTML e CSS e muitos outros recursos essenciais para o desenvolvimento moderno da Web.

Todos os exemplos de código e snippets estão incluídos no Web Camps Training Kit, disponível em https://aka.ms/webcamps-training-kit.

Visão geral

Objetivos

Neste laboratório prático, você aprenderá a:

Use novos recursos do editor HTML incluídos no Web Essentials, como snippets ricos de código HTML5 e codificação Zen
Usar novas funcionalidades do editor CSS incluídas no Web Essentials, como o seletor de cores e a dica de ferramenta da matriz de compatibilidade de navegadores.
Usar novos recursos do editor JavaScript incluídos no Web Essentials, como Extração para Arquivo e IntelliSense para todos os elementos HTML
Trocar dados entre o navegador e o Visual Studio usando o Link do Navegador

Pré-requisitos

O seguinte é necessário para concluir este laboratório prático:

Microsoft Visual Studio Professional 2013 ou superior
Web Essentials 2013
Google Chrome

Configuração

Para executar os exercícios neste laboratório prático, você precisará configurar seu ambiente primeiro.

Abra uma janela do Windows Explorer e navegue até a pasta Origem do laboratório.
Clique com o botão direito em Setup.cmd e selecione Executar como administrador para iniciar o processo de instalação que configurará seu ambiente e instalará os trechos de código do Visual Studio para este laboratório.
Se a caixa de diálogo Controle de Conta de Usuário for mostrada, confirme a ação para continuar.

Observação

Verifique todas as dependências deste laboratório antes de executar a instalação.

Usando os trechos de código

Ao longo do documento do laboratório, você será instruído a inserir blocos de código. Para sua conveniência, a maior parte desse código é fornecida como Snippets do Visual Studio Code, que você pode acessar de dentro do Visual Studio 2013 para evitar ter que adicioná-lo manualmente.

Observação

Cada exercício é acompanhado por uma solução inicial localizada na pasta Begin do exercício que permite que você siga cada exercício independentemente das outras. Lembre-se de que os snippets de código adicionados durante um exercício estão ausentes dessas soluções iniciais e podem não funcionar até que você tenha concluído o exercício. Dentro do código-fonte de um exercício, você também encontrará uma pasta End contendo uma solução do Visual Studio com o código resultante da conclusão das etapas no exercício correspondente. Você pode usar essas soluções como orientação se precisar de ajuda adicional enquanto trabalha neste laboratório prático.

Exercícios

Este laboratório prático inclui os seguintes exercícios:

Trabalhando com Browser Link e Web Essentials
Aproveitando trechos de código e IntelliSense

Observação

Ao iniciar o Visual Studio pela primeira vez, você deve selecionar uma das coleções de configurações predefinidas. Cada coleção predefinida foi projetada para corresponder a um estilo de desenvolvimento específico e determina layouts de janela, comportamento do editor, snippets de código do IntelliSense e opções de caixa de diálogo. Os procedimentos neste laboratório descrevem as ações necessárias para realizar uma determinada tarefa no Visual Studio ao usar a coleção Configurações gerais de Desenvolvimento . Se você escolher uma coleção de configurações diferente para seu ambiente de desenvolvimento, poderá haver diferenças nas etapas que você deve levar em conta.

Exercício 1: Trabalhando com o Browser Link e o Web Essentials

O Web Essentials é uma extensão do Visual Studio que adiciona uma variedade de recursos úteis para o desenvolvimento da Web moderno, principalmente focado em tornar a experiência de desenvolvimento da Web muito mais rápida e agradável. Você pode instalar o Web Essentials por meio da Galeria de Extensões no Visual Studio.

O Link do Navegador é um novo recurso incluído no Visual Studio 2013 que fornece um canal entre o IDE do Visual Studio e qualquer navegador aberto para trocar dados entre seu aplicativo Web e o Visual Studio. O Web Essentials estende o Link do Navegador com ferramentas para manipular o modelo de objeto DOM e os estilos CSS de suas páginas da Web diretamente do navegador.

Neste exercício, você explorará alguns dos recursos compatíveis com o Web Essentials e o Browser Link para aprimorar uma página de teste simples.

Tarefa 1 – Executando o projeto em vários navegadores

Nesta tarefa, você configurará seu aplicativo Web para ser executado em vários navegadores ao mesmo tempo, o que é útil para testes entre navegadores.

Abra o Microsoft Visual Studio.
No menu Arquivo , selecione Abrir | Projeto/solução... e navegue até Ex1-WorkingwithBrowserLinkandWebEssentials\Begin na pasta Origem do laboratório (C:\WebCampsTK\HOL\VSWebTooling\Source). Selecione Begin.sln e clique em Abrir.
Na barra de ferramentas do Visual Studio, expanda o menu do navegador e selecione Procurar com....

Opção procurar com menu
Na caixa de diálogo Procurar com , selecione Google Chrome e Internet Explorer mantendo pressionada a tecla CTRL e clique em Definir como Padrão.

Selecionando vários navegadores padrão
O Google Chrome e o Internet Explorer agora devem aparecer como os navegadores padrão. Clique em Cancelar para fechar a caixa de diálogo.

Google Chrome e Internet Explorer como navegadores padrão

Observação

Depois de configurar os navegadores padrão, a opção Vários Navegadores é selecionada no menu do navegador.
Pressione CTRL + F5 para executar o aplicativo sem depuração.
Quando ambas as janelas do navegador abrirem, coloque uma delas acima da outra para ver as atualizações em ambos os navegadores simultaneamente. Os navegadores devem exibir uma página da Web com um retângulo azul-claro.

Colocando um navegador acima do outro
Não feche os navegadores. Você os usará na próxima tarefa.

Tarefa 2 – Usando a Codificação Zen para criar elementos HTML

Zen Coding é um plugin de editor para codificação e edição de HTML, XML, XSL (ou qualquer outro formato de código estruturado). O núcleo deste plug-in é um poderoso mecanismo de abreviação que permite expandir expressões—semelhante aos seletores CSS—em código HTML. A Codificação Zen é uma maneira rápida de escrever HTML usando uma sintaxe do seletor de estilo CSS.

Neste exercício, você usará o recurso de Codificação Zen fornecido pelo Web Essentials para gerar os botões HTML que representam as opções da pergunta.

Retorne ao Visual Studio.
Abra o arquivo Index.cshtml localizado na pasta Views | Home .
Substitua o <-- TODO: adicione opções aqui–> comente com o código a seguir e pressione TAB.
```
button.btn.btn-info.btn-lg.option{Answer $}*4
```
O código deve ser expandido para HTML.

HTML expandido

Observação

Para saber mais sobre a sintaxe de Codificação Zen, consulte o artigo a seguir.
Clique no botão Atualizar navegadores vinculados para atualizar ambos os navegadores.

Atualizar navegadores vinculados

Internet Explorer – Página atualizada com quatro botões

Google Chrome – Página atualizada com quatro botões
Retorne ao Visual Studio.
Você adicionou os botões à página, mas ainda precisa adicionar uma pergunta modelo. Para fazer isso, você usará um novo recurso no Web Essentials chamado gerador Lorem Ipsum. Localize o elemento div com o atributo de classefront.
Adicione o código a seguir como o primeiro elemento filho do div e pressione TAB.
```
p.lead>lorem5
```
O código deve ser expandido para HTML.

Lorem Ipsum gerado automaticamente

Observação

Como parte da Codificação Zen, agora você pode gerar código Lorem Ipsum diretamente no editor HTML. Basta digitar lorem e pressionar TAB e um texto Lorem Ipsum de 30 palavras será inserido. Por exemplo, lorem10 insere 10 palavras Lorem Ipsum.
Você adicionará um logotipo na parte superior da pergunta usando outro novo recurso no Web Essentials chamado gerador Lorem Pixel. Adicione o código a seguir como o primeiro elemento filho do elemento div com o contêiner como valor de classe e pressione TAB.
```
div.row.header>pix-436x185-abstract
```
O código deve ser expandido para HTML.

Lorem Pixel gerado de forma automática

Observação

Como parte da Codificação Zen, você também pode gerar código Lorem Pixel diretamente no editor HTML. Basta digitar pix-200x200-animals e atingir TAB e uma marca img com uma imagem 200x200 de um animal será inserida.
Clique no botão Atualizar navegadores vinculados para atualizar ambos os navegadores.

Internet Explorer – Imagem e texto gerados automaticamente

Google Chrome – Imagem e texto gerados automaticamente

Observação

Como a imagem é selecionada aleatoriamente ao adicionar o snippet de código, a imagem mostrada nos navegadores pode ser diferente.
Não feche os navegadores. Você os usará na próxima tarefa.

Tarefa 3 – Atualizando uma propriedade de estilo

Nesta tarefa, você usará o recurso Modo de Inspeção do Link do Navegador para detectar o local exato em que o elemento DOM específico é gerado e, em seguida, atualizará a propriedade de cor desse elemento usando um seletor de cores fornecido pelo Web Essentials.

No navegador Internet Explorer, pressione CTRL + ALT + I para habilitar o Modo de Inspeção.
Mova o ponteiro sobre a borda azul clara e clique.

Movendo o ponteiro sobre a borda azul claro
Retorne ao Visual Studio. Observe como o elemento HTML selecionado no navegador também está selecionado no editor html do Visual Studio.

Elemento HTML selecionado no editor HTML do Visual Studio
Agora você atualizará a classe CSS frontal para alterar o estilo do elemento selecionado. Para fazer isso, pressione CTRL + para abrir a caixa de pesquisa Navegar para. Digite site.css e pressione ENTER para abrir o arquivo.

Abrindo o arquivo Site.css
Pressione CTRL + F e digite .flip-container .front para localizar o seletor CSS.
Clique no quadrado azul claro na propriedade de borda da classe para abrir o Seletor de Cores.

Abrindo o Seletor de Cores
Expanda o Seletor de Cores clicando no botão chevron e selecione uma nova cor.

Expandindo o Seletor de Cores
Pressione CTRL + ALT + ENTER para atualizar navegadores vinculados.
Alterne para o Internet Explorer e observe como a cor da borda foi alterada.

Internet Explorer – Cor da borda atualizada
Alterne para o Google Chrome e observe como a cor da borda foi alterada.

Google Chrome – Cor da borda atualizada
Retorne ao Visual Studio.
Vá até o final do arquivo Site.css e pressione CTRL + F para localizar o seletor .btn .
Observe que a propriedade -webkit-border-radius está sublinhada em verde.

Propriedade -webkit-border-radius do seletor btn
Coloque o cursor na propriedade -webkit-border-radius. Uma linha azul deve aparecer sob a primeira letra da primeira palavra da propriedade. Essa é a tag inteligente.
Pressione CTRL + . para abrir o menu de sugestões e clique em Adicionar propriedade padrão ausente (raio de borda).

Sugestão de adicionar propriedade padrão ausente
A propriedade border-radius é adicionada automaticamente à regra CSS.

Propriedade padrão ausente adicionada
Mova o ponteiro sobre a propriedade border-radius para exibir o tooltip de matriz do navegador. A tooltip matriz do navegador mostra a disponibilidade da propriedade em cada navegador.

Dica de ferramenta de matriz do navegador
Observe que o valor da propriedade border-radius ainda está sublinhado. Mova o ponteiro sobre o valor para ver a mensagem de aviso.

Aviso de valor de propriedade border-radius
Remova a unidade do valor da propriedade border-radius, conforme sugerido pelo tooltip.
Como o raio de borda é a propriedade padrão para definir o quão arredondados são os cantos de borda, você pode remover a propriedade -webkit-border-radius e o valor da regra CSS.
Coloque o cursor na propriedade word-wrap e observe que a marca inteligente também aparece abaixo.
Abra o menu e clique em Adicionar detalhes do fornecedor ausentes.

Adicionar sugestão específica do fornecedor ausente
A propriedade -ms-word-wrap é adicionada automaticamente à regra CSS.

Propriedade específica do fornecedor adicionada

Tarefa 4 – Atualizando o código HTML do navegador

Nesta tarefa, você usará o recurso Modo de Design do Link do Navegador para editar o objeto DOM do navegador e transferir as alterações para o arquivo de origem HTML no Visual Studio.

No Google Chrome, pressione CTRL + ALT + D para habilitar o Modo de Design.
Mova o ponteiro sobre o rótulo do Lorem Ipsum dolor sit amet e clique.

Editando a pergunta
Um cursor deve aparecer. Substitua o texto original por Como fica quando eu escrevo uma pergunta mais longa?, e pressione ESC para sair do Modo de Design.

Pergunta editada
Volte para o Visual Studio e abra Index.cshtml, se ainda não estiver aberto. Observe que o texto interno do <elemento p> foi atualizado.

Pergunta atualizada na página HTML

A SEO (Otimização do Mecanismo de Pesquisa) é o processo de fazer com que um site seja mais alto na lista de resultados de um mecanismo de pesquisa. Quanto maior a classificação do site e mais consistentemente ele estiver listado, mais visitantes o site obterá desse mecanismo de pesquisa. O Web Essentials incorpora uma ferramenta analítica que examina HTML, relata os problemas encontrados e fornece assistência para corrigi-los.

Vá para o menu Exibir e clique em Lista de Erros para abrir a janela Lista de Erros .

Lista de erros no menu Exibir
Observe que há um aviso SEO notificando que uma <meta> tag para a descrição da página está ausente. Clique duas vezes na entrada de aviso SEO para corrigi-la.

Janela de Lista de Erros
Na caixa de diálogo Web Essentials, clique em Sim para inserir uma meta< tag de descrição>.

Caixa de diálogo Web Essentials
O editor de _Layout.cshtml é aberto e a <meta> tag é adicionada automaticamente à seção principal do arquivo HTML.

Meta tag adicionada automaticamente à página _Layout
Altere o valor do atributo de conteúdo para o GeekQuiz e salve o arquivo.

Exercício 2: Aproveitando trechos de código e IntelliSense

Com o Web Essentials, o editor HTML foi estendido com funcionalidade extra. Neste exercício, você verá alguns novos recursos que são úteis ao desenvolver aplicativos Web.

Tarefa 1 – Usando o IntelliSense em documentos HTML

O primeiro recurso novo que você verá nesta tarefa é chamado IntelliSense Dinâmico. O IntelliSense Dinâmico lê outras marcas e atributos para inferir as IDs possíveis que você usará.

Nesta tarefa, você criará um novo elemento de formulário HTML que contém um rótulo e um campo de entrada. Em seguida, você adicionará um atributo for ao rótulo para associá-lo à entrada e verá sugestões do IntelliSense com base nas IDs das entradas no escopo.

Abra o Visual Studio Express 2013 para Web e a solução Begin.sln localizada na pasta Source/Ex2-TakingAdvantageofCodeSnippetsandIntelliSense/Begin . Como alternativa, você pode continuar com a solução obtida no exercício anterior.
No Gerenciador de Soluções, abra o arquivo Index.cshtml localizado na pasta Views | Home .
Adicione o seguinte formulário dentro do elemento <section>.

(Snippet de código – VisualStudio2013WebTooling - Ex2 - Formulário)
```
<form>
     <input type="text" id="name" />
</form>
```
A marca de entrada deve ser precedida por um rótulo com alguma descrição do campo. Adicione o rótulo a seguir antes da marca de entrada.
```
<form>
    <label id="name">Name</label>       
    <input type="text" id="name" />
</form>
```
O atributo for de um <rótulo> especifica a qual elemento de formulário um rótulo está associado. O valor do atributo deve ser igual à ID do elemento relacionado. Adicione o atributo for ao elemento label<>. Conforme mostrado na figura a seguir, o valor "name" surge na caixa IntelliSense, com base na ID dos elementos dentro do mesmo escopo (o <formulário abrangente>).

Mostrando o ID no IntelliSense
Exclua o elemento de formulário< adicionado> recentemente e seu conteúdo.

Tarefa 2 – Usando snippets de código HTML

HTML5 introduziu mais de 25 novas marcas semânticas. O Visual Studio já tinha suporte do IntelliSense para essas tags, mas o Visual Studio 2013 torna mais rápido e fácil escrever marcações ao adicionar novos snippets de código. Embora essas tags não sejam complicadas, elas vêm com algumas sutilezas, como adicionar as alternativas corretas de codec para a tag de áudio. Nesta tarefa, você verá os trechos de código HTML para a tag de áudio.

No arquivo Index.cshtml, digite< aud dentro do elemento <section>, conforme mostrado na figura a seguir.

Inserindo um elemento de áudio
Pressione TAB duas vezes e observe como o código a seguir é adicionado na página e o cursor é colocado no atributo src da primeira origem.
```
<audio controls="controls">
     <source src="file.mp3" type="audio/mp3" />
     <source src="file.ogg" type="audio/ogg" />
</audio>
```
Observação

Pressionando a tecla TAB duas vezes, o snippet de código é inserido. O trecho de áudio mostra o uso padrão da marca de áudio, com dois arquivos de origem para melhor suporte.
Exclua a segunda linha e atualize a origem da primeira linha com o seguinte link para a apresentação Instalando ASP.NET e Ferramentas Web: https://learn.microsoft.com/shows/asp-net-site-videos/installing-aspnet-web-tools. O código resultante é mostrado abaixo.
```
<audio controls="controls">
     <source src="http://media.ch9.ms/ch9/11d8/604b8163-fad3-4f12-9607-b404201211d8/KatanaProject.mp3" type="audio/mp3" />
</audio>
```
Observação

O arquivo de origem é usado como exemplo. Você pode usar outra fonte se preferir.
Pressione CTRL + S para salvar o arquivo.
Pressione CTRL + F5 para iniciar o aplicativo.
Observe que um player de áudio foi adicionado ao aplicativo.

Player de áudio no Internet Explorer

Player de áudio no Google Chrome
Não feche os navegadores. Você os usará na próxima tarefa.

Tarefa 3 – Usando o IntelliSense em documentos JavaScript

Com o Web Essentials 2013, folhas de estilo e páginas HTML produzem uma lista de IDs e nomes de classe. Nesta tarefa, você aprenderá como essas listas melhoram o suporte do IntelliSense do JavaScript no Web Essentials 2013.

No arquivo Index.cshtml , adicione o código a seguir para definir uma marca de script para código JavaScript.
```
...
</section>
@section scripts{
    <script type="text/javascript">

    </script>
}
```
Adicione o código a seguir dentro da tag script para definir a função de retorno de chamada 'ready'.

(Snippet de código – VisualStudio2013WebTooling - Ex2 - ReadyFunction)
```
(function () {
    $(document).ready(function () {

    });
}());
```
Coloque o cursor na marca de script e pressione CTRL + . Para abrir o menu de sugestão.
Clique em Extrair para Arquivo.

Extração de JavaScript para sugestão de arquivo
Na janela Salvar como , selecione a pasta Scripts , nomeie o arquivo init.js e clique em Salvar.

Janela Salvar como

Observação

O arquivo init.js é criado e o conteúdo do script é movido para o arquivo.

Init.js arquivo criado com o conteúdo incluído
Abra o arquivo Index.cshtml e verifique se a marca de script foi substituída por uma referência ao arquivo init.js .

Referência de html do Init.js
Acesse o Gerenciador de Soluções e observe que o arquivo init.js foi incluído automaticamente na solução.

Init.js arquivo incluído na solução
Volte para o arquivo init.js para atualizar o callback da função ready.
Dentro da definição de retorno de chamada de função que é passada para pronto, adicione o código a seguir para obter todos os elementos por um atributo de classe específico.
```
(function () {
     $(document).ready(function () {
          document.getElementsByClassName("")
     });
}());
```
Pressione Ctrl + Space entre as aspas dentro da chamada de função getElementsByClassName .

Mostrando o IntelliSense para a função getElementsByClassName

Observação

Observe que o IntelliSense mostra as classes definidas nas folhas de estilo do projeto.

Substitua a linha que você criou pelo código a seguir.

(function () {
     $(document).ready(function () {
          var audioElements = document.getElementsByTagName("au");
     });
}());

Posicione o cursor após au dentro das aspas na função getElementsByTagName e pressione CTRL + Space.

Mostrando o IntelliSense para o método getElementsByTagName
Selecione "áudio" na lista e pressione ENTER. O resultado é mostrado na figura a seguir.

Recuperando elementos de áudio
No Gerenciador de Soluções, clique com o botão direito do mouse no arquivo init.js na pasta Scripts e selecione Minify JavaScript file(s) no menu Web Essentials .

Minificar arquivo(s) JavaScript
Quando solicitado a habilitar a minificação automática quando o arquivo de origem for alterado, clique em Sim.

Habilitando o aviso de minificação automática

Observação

O init.min.js é criado e adicionado como uma dependência do arquivo init.js .

Init.min.js arquivo criado
Abra o arquivo init.min.js e observe que o arquivo está minificado.

conteúdo do arquivo Init.min.js
No arquivo init.js , adicione o seguinte código abaixo da chamada da função getElementsByTagName para reproduzir todos os elementos de áudio.

(Snippet de código – VisualStudio2013WebTooling - Ex2 - PlayAudioElements)
```
var len = audioElements.length;
for (var i = 0; i < len; i++) {
    audioElements[i].play();
}
```
Clique em CTRL + S para salvar o arquivo. Como o arquivo minificado já está aberto, você verá uma caixa de diálogo informando que o arquivo foi modificado fora do editor de origem. Clique em Sim.

Aviso do Microsoft Visual Studio
Volte para o arquivo init.min.js para verificar se o arquivo foi atualizado com o novo código.

Init.min.js arquivo atualizado
Clique no botão Atualizar link do navegador .
Depois que ambos os navegadores forem atualizados, os players de áudio que você viu na tarefa anterior começarão a ser reproduzidos automaticamente.

Player de áudio incluído na exibição

Resumo

Ao concluir este laboratório prático, você aprendeu a:

Use novos recursos do editor HTML incluídos no Web Essentials, como snippets ricos de código HTML5 e codificação Zen
Usar novas funcionalidades do editor CSS incluídas no Web Essentials, como o seletor de cores e a dica de ferramenta da matriz de compatibilidade de navegadores.
Usar novos recursos do editor JavaScript incluídos no Web Essentials, como Extração para Arquivo e IntelliSense para todos os elementos HTML
Trocar dados entre o navegador e o Visual Studio usando o Link do Navegador

Comentários

Esta página foi útil?

Last updated on 2023-06-16

Compartilhar via

Laboratório Prático: Ferramentas da Web do Visual Studio 2013

Visão geral

Objetivos

Pré-requisitos

Configuração

Usando os trechos de código

Exercícios

Exercício 1: Trabalhando com o Browser Link e o Web Essentials

Tarefa 1 – Executando o projeto em vários navegadores

Tarefa 2 – Usando a Codificação Zen para criar elementos HTML

Tarefa 3 – Atualizando uma propriedade de estilo

Tarefa 4 – Atualizando o código HTML do navegador

Tarefa 5 – Revisão de avisos relacionados à SEO

Exercício 2: Aproveitando trechos de código e IntelliSense

Tarefa 1 – Usando o IntelliSense em documentos HTML

Tarefa 2 – Usando snippets de código HTML

Tarefa 3 – Usando o IntelliSense em documentos JavaScript

Resumo

Comentários

Recursos adicionais