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

pela equipa Web Camps

Descarregar o Kit de Treino Web Camps

O Visual Studio é um excelente ambiente de desenvolvimento para projetos Windows e web baseados em .NET. Inclui um editor de texto poderoso que pode ser facilmente usado para editar ficheiros autónomos sem necessidade de um projeto.

O Visual Studio mantém uma árvore de análise analítica completa à medida que edita cada ficheiro. Isto permite que o Visual Studio ofereça ações de auto-preenchimento e documentação incomparáveis, tornando a experiência de desenvolvimento muito mais rápida e agradável. Estas funcionalidades são especialmente poderosas em documentos HTML e CSS.

Todo este poder também está disponível para extensões, tornando simples expandir os editores com novas funcionalidades poderosas para satisfazer as suas necessidades. Web Essentials é uma coleção de melhorias (maioritariamente) relacionadas com a web para o Visual Studio. Inclui muitas novas versões do IntelliSense (especialmente para CSS), novas funcionalidades de Browser Link, JSHint automático para ficheiros JavaScript, novos avisos para HTML e CSS, e muitas outras funcionalidades essenciais para o desenvolvimento web moderno.

Todo o código de exemplo e excertos estão incluídos no Kit de Formação dos Web Camps, disponível em https://aka.ms/webcamps-training-kit.

Descrição geral

Objetivos

Neste laboratório prático, vai aprender como:

• Use as novas funcionalidades do editor HTML incluídas nos Web Essentials, como excertos de código HTML5 enriquecidos e programação Zen
• Use as novas funcionalidades do editor CSS incluídas nos Web Essentials, como o seletor de cores e a dica de ferramenta da matriz do navegador
• Use as novas funcionalidades do editor JavaScript incluídas nos Web Essentials, como Extrair para Ficheiro e IntelliSense, para todos os elementos HTML
• Troque dados entre o seu navegador e o Visual Studio usando o Browser Link

Pré-requisitos

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

• Microsoft Visual Studio Professional 2013 ou superior
• Web Essenciais 2013
• Google Chrome

Configuração

Para realizar os exercícios neste laboratório prático, terá de preparar primeiro o seu ambiente.

1. Abra uma janela do Explorador do Windows e navegue até à pasta Source do laboratório.
2. Clique com o botão direito Setup.cmd e selecione Executar como administrador para iniciar o processo de configuração que irá configurar o seu ambiente e instalar os excertos de código do Visual Studio para este laboratório.
3. Se aparecer a caixa de diálogo Controlo da Conta de Utilizador, confirme a ação para prosseguir.

Utilização de Fragmentos de Código

Ao longo do documento do laboratório, ser-se-á instruído a inserir blocos de código. Para sua conveniência, a maior parte deste código é fornecida como Excertos de Código do Visual Studio, aos quais pode aceder dentro do Visual Studio 2013 para evitar ter de o adicionar manualmente.

Exercícios

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

1. Trabalhar com Browser Link e Web Essentials
2. Aproveitando Trechos de Código e IntelliSense

Exercício 1: Trabalhar com Browser Link e Web Essentials

Web Essentials é uma extensão do Visual Studio que adiciona uma variedade de funcionalidades úteis para o desenvolvimento web moderno, principalmente focadas em tornar a experiência de desenvolvimento web muito mais rápida e agradável. Podes instalar Web Essentials a partir da Galeria de Extensões no Visual Studio.

O Browser Link é uma nova funcionalidade incluída no Visual Studio 2013 que fornece um canal entre o IDE do Visual Studio e qualquer navegador aberto para trocar dados entre a sua aplicação web e o Visual Studio. O Web Essentials estende o Browser Link com ferramentas para manipular o modelo de objetos DOM e os estilos CSS das suas páginas web diretamente a partir do navegador.

Neste exercício, irá explorar algumas das funcionalidades suportadas pelo Web Essentials e pelo Browser Link para melhorar uma página de questionário simples.

Tarefa 1 - Executar o Projeto em Múltiplos Navegadores

Nesta tarefa, irá configurar a sua aplicação web para correr em vários navegadores ao mesmo tempo, o que é útil para testes entre navegadores.

1. Abre o Microsoft Visual Studio.

2. No menu Ficheiro , selecione Abrir | Projeto/Solução... e navegue para Ex1-WorkingwithBrowserLinkandWebEssentials\Begin na pasta Source do laboratório (C:\WebCampsTK\HOL\VSWebTooling\Source). Selecione Begin.sln e clique em Abrir.

3. Na barra de ferramentas Visual Studio, expanda o menu do navegador e selecione Navegar Com....

   

   Opção Navegar com o menu

4. Na caixa de diálogo Navegar Com , selecione tanto o Google Chrome como o Internet Explorer mantendo pressionada a tecla CTRL e clique em Definir como Padrão.

   

   Selecionar múltiplos navegadores predefinidos

5. Tanto o Google Chrome como o Internet Explorer devem agora aparecer como navegadores predefinidos. Clica em Cancelar para fechar a caixa de diálogo.

   

   Google Chrome e Internet Explorer como navegadores predefinidos

   Observação

   Após configurar os navegadores predefinidos, a opção Múltiplos Navegadores é selecionada no menu do navegador.

   

6. Pressiona CTRL + F5 para executar a aplicação sem depuração.

7. 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 mostrar uma página web com um retângulo azul-claro.

   

   Colocar um navegador acima do outro

8. Não fechem os browsers. Vais usá-los na próxima tarefa.

Tarefa 2 - Usar Codificação Zen para Criar Elementos HTML

Zen Coding é um plugin editor para codificação e edição de HTML, XML, XSL (ou qualquer outro formato de código estruturado) de alta velocidade. O núcleo deste plugin é um poderoso motor de abreviaturas que permite expandir expressões -similar a selecionadores CSS — para código HTML. Zen Coding é uma forma rápida de escrever HTML usando uma sintaxe seletora de estilo CSS.

Neste exercício, irá utilizar a funcionalidade Zen Coding fornecida pelo Web Essentials para gerar os botões HTML que representam as opções da pergunta.

1. Voltar ao Visual Studio.

2. Abra o ficheiro Index.cshtml localizado na pasta Views | Home .

3. Substitua o <-- TODO: adicione opções aqui —> comente com o seguinte código e pressione TAB.

   button.btn.btn-info.btn-lg.option{Answer $}*4
   

4. O código deve ser expandido para HTML.

   

   HTML expandido

   Observação

   Para saber mais sobre a sintaxe da Codificação Zen, consulte o artigo seguinte.

5. Clique no botão Atualizar navegadores ligados para atualizar ambos os navegadores.

   

   Atualizar navegadores ligados

   

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

   

   Google Chrome - Página atualizada com quatro botões

6. Voltar ao Visual Studio.

7. Adicionaste os botões à página, mas ainda precisas de adicionar uma pergunta modelo. Para isso, irá usar uma nova funcionalidade no Web Essentials chamada gerador Lorem Ipsum. Localiza o elemento div com o atributo classfront.

8. Adicione o seguinte código como primeiro elemento filho da div e pressione TAB.

   p.lead>lorem5
   

9. O código deve ser expandido para HTML.

   

   Lorem Ipsum autogerado

   Observação

   Como parte do Zen Coding, agora pode gerar código Lorem Ipsum diretamente no editor HTML. Basta digitar lorem e pressionar a tecla TAB para que seja inserido um texto Lorem Ipsum de 30 palavras. Por exemplo, lorem10 insere 10 palavras Lorem Ipsum.

10. Vai adicionar um logótipo no topo da pergunta usando outra funcionalidade nova no Web Essentials chamada gerador de píxeis Lorem. Adicione o seguinte código como primeiro elemento filho do elemento div com o contentor como valor de classe , e pressione TAB.

    div.row.header>pix-436x185-abstract
    

11. O código deve expandir-se para HTML.

    

    Lorem Pixel gerado automaticamente

    Observação

    Como parte do Zen Coding, também pode gerar código Lorem Pixel diretamente no editor HTML. Basta escrever pix-200x200-animals e carregar TAB para que seja inserida uma tag img com uma imagem 200x200 de um animal.

12. Clique no botão Atualizar navegadores ligados 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 excerto de código, a imagem mostrada nos navegadores pode ser diferente.

13. Não fechem os browsers. Vais usá-los na próxima tarefa.

Tarefa 3 - Atualizar uma propriedade de estilo

Nesta tarefa, irá utilizar a funcionalidade Inspect Mode do Link do Browser para detetar a localização exata onde o elemento DOM específico é gerado e depois atualizar a propriedade de cor desse elemento usando um seletor de cor fornecido pelo Web Essentials.

1. No navegador Internet Explorer, pressione CTRL + ALT + I para ativar o Modo Inspecionar.

2. Move o ponteiro sobre a borda azul clara e clica.

   

   Mover o ponteiro sobre a borda azul clara

3. Voltar ao Visual Studio. Repare como o elemento HTML que selecionou no navegador também é selecionado no editor HTML do Visual Studio.

   

   Elemento HTML selecionado no editor HTML do Visual Studio

4. Agora irá atualizar a classe front CSS para alterar o estilo do elemento selecionado. Para isso, pressione CTRL + para abrir a caixa de pesquisa Navegar Para. Digite site.css e pressione ENTER para abrir o ficheiro.

   

   Abrir ficheiro Site.css

5. Pressione CTRL + F e escreva .flip-container .front para encontrar o seletor CSS.

6. Clique no quadrado azul claro na propriedade de margem da classe para abrir o Seletor de Cor.

   

   Abrir o Seletor de Cor

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

   

   Expansão do Seletor de Cor

8. Pressione CTRL + ALT + ENTER para atualizar os navegadores ligados.

9. Mude para o Internet Explorer e repare como a cor da borda mudou.

   

   Internet Explorer - Cor da borda atualizada

10. Mude para o Google Chrome e repare como a cor da borda mudou.

    

    Google Chrome - Cor da borda atualizada

11. Voltar ao Visual Studio.

12. Vai ao final do ficheiro Site.css e carrega em CTRL + F para localizar o seletor .btn .

13. Repare que a propriedade -webkit-border-radius está sublinhada a verde.

    

    propriedade -webkit-border-radius do seletor btn

14. Coloque o caret na propriedade -webkit-border-radius. Deve aparecer uma linha azul sob a primeira letra da primeira palavra da propriedade. Esta é a etiqueta inteligente.

15. Prima CTRL + . para abrir o menu de sugestões e clica em Adicionar propriedade padrão em falta (raio de fronteira).

    

    Adicionar sugestão para propriedade padrão faltante

16. A propriedade de raio de fronteira é automaticamente adicionada à regra CSS.

    

    Propriedade padrão em falta adicionada

17. Mova o ponteiro sobre a propriedade de raio de fronteira para mostrar a dica de ferramenta da matriz do navegador. A tooltip da matriz do navegador mostra a disponibilidade da propriedade em cada navegador.

    

    Dica de ferramenta da matriz do navegador

18. Note que o valor da propriedade de raio de fronteira continua sublinhado. Move o ponteiro sobre o valor para veres a mensagem de aviso.

    

    Aviso de valor de propriedade no raio da fronteira

19. Remova a unidade do valor da propriedade border-radius, conforme sugerido na dica de ferramenta.

20. Como border-radius é a propriedade padrão para definir quão arredondados são os cantos da borda, pode remover a propriedade -webkit-border-radius e o valor da regra CSS.

21. Coloque o caret na propriedade word-wrap e repare que a etiqueta inteligente também aparece abaixo.

22. Abra o menu e clique em Adicionar especificidades de fornecedores em falta.

    

    Adicionar sugestão de especificidades de fornecedores em falta

23. A propriedade -ms-word-wrap é automaticamente adicionada à regra CSS.

    

    Propriedade específica do vendedor adicionada

Tarefa 4 - Atualizar o Código HTML a partir do Browser

Nesta tarefa, irá utilizar a funcionalidade Design Mode do Link do Browser para editar o objeto DOM do navegador e transferir as alterações para o ficheiro de origem HTML no Visual Studio.

1. No Google Chrome, pressione CTRL + ALT + D para ativar o Modo Design.

2. Move o ponteiro sobre o rótulo Lorem Ipsum dolor sit amet e clica.

   

   A editar a pergunta

3. Deverá aparecer um cursor. Substitui o texto original por Como é que fica quando escrevo uma pergunta mais longa?, e depois pressiona ESC para sair do Modo de Design.

   

   Pergunta editada

4. Volte ao Visual Studio e abra o Index.cshtml, se ainda não estiver aberto. Note que o texto interno do <elemento p> foi atualizado.

   

   Pergunta atualizada na página HTML

Tarefa 5 - Rever Avisos Relacionados com SEO

A Otimização para Motores de Busca (SEO) é o processo de fazer com que um site fique mais posicionado na lista de resultados de um motor de busca. Quanto mais alto o site estiver posicionado e mais consistentemente for listado, mais visitantes receberá desse motor de busca. O Web Essentials incorpora uma ferramenta analítica que analisa o HTML, reporta os problemas encontrados e presta assistência para os corrigir.

1. Vá ao menu Visualizar e clique em Lista de Erros para abrir a janela da Lista de Erros .

   

   Lista de Erros no menu Ver

2. Repara que existe um aviso de SEO a notificar que falta uma <meta> tag para a descrição da página. Clique duas vezes na entrada de aviso de SEO para corrigir o problema.

   

   Janela de Lista de Erros

3. Na caixa de diálogo Web Essentials, clique em Sim para inserir um meta <tag de descrição>.

   

   Caixa de diálogo Web Essentials

4. O editor do _Layout.cshtml abre-se e a <meta> tag é automaticamente adicionada à secção principal do ficheiro HTML.

   

   Meta tag adicionada automaticamente à página _Layout

5. Muda o valor do atributo de conteúdo para GeekQuiz e guarda o ficheiro.

Exercício 2: Aproveitar os Fragmentos de Código e o IntelliSense

Com o Web Essentials, o editor HTML foi ampliado com funcionalidades adicionais. Neste exercício, verá algumas novas funcionalidades que são úteis ao desenvolver aplicações web.

Tarefa 1 - Utilização do IntelliSense em Documentos HTML

A primeira funcionalidade nova que verá nesta tarefa chama-se Dynamic IntelliSense. O IntelliSense dinâmico lê outras etiquetas e atributos para inferir os IDs possíveis que irá usar.

Nesta tarefa, irá criar um novo elemento de formulário HTML que contém um rótulo e um campo de entrada. Depois, vais adicionar um atributo for ao rótulo para o associar à entrada, e vais ver sugestões do IntelliSense baseadas nos IDs das entradas no escopo.

1. Abra Visual Studio Express 2013 para Web e a solução Begin.sln, localizada na pasta Source/Ex2-TakingAdvantageofCodeSnippets e IntelliSense/Begin. Em alternativa, pode continuar com a solução que obteve no exercício anterior.

2. No Explorador de Soluções, abra o ficheiro Index.cshtml localizado na pasta Views | Home .

3. Adicione a seguinte forma dentro do <elemento de secção> .

   (Excerto de Código - VisualStudio2013WebTooling - Ex2 - Forma)

   <form>
        <input type="text" id="name" />
   </form>
   

4. A etiqueta de entrada deve ser precedida por uma etiqueta com alguma descrição do campo. Adicione a seguinte etiqueta antes da etiqueta de entrada.

   <form>
       <label id="name">Name</label>       
       <input type="text" id="name" />
   </form>
   

5. O atributo for de um <rótulo> especifica a que elemento de forma o rótulo está ligado. O valor do atributo deve ser igual ao id do elemento relacionado. Adicione o atributo for ao <elemento de etiqueta> . Como mostrado na figura seguinte, o valor "nome" aparece na caixa do IntelliSense, com base no id dos elementos dentro do mesmo âmbito (a forma< anexa>).

   

   Mostrar o id no IntelliSense

6. Elimine o elemento de formulário recentemente adicionado e o seu conteúdo.

Tarefa 2 - Utilização de Excertos de Código HTML

O HTML5 introduziu mais de 25 novas etiquetas semânticas. O Visual Studio já tinha suporte IntelliSense para estas etiquetas, mas o Visual Studio 2013 torna a escrita de marcação mais rápida e fácil ao adicionar novos excertos de código. Embora estas tags não sejam complicadas, apresentam algumas pequenas subtilezas, como a adição de alternativas de codecs corretos para a etiqueta áudio. Nesta tarefa, verá os excertos de código HTML para a tag áudio.

1. No ficheiro Index.cshtml , escreva <aud dentro do <elemento de secção> , como mostrado na figura seguinte.

   

   Inserção de um elemento áudio

2. Pressione TAB duas vezes e repare como o código seguinte é adicionado na página e o cursor é colocado sobre o atributo src da primeira fonte.

   <audio controls="controls">
        <source src="file.mp3" type="audio/mp3" />
        <source src="file.ogg" type="audio/ogg" />
   </audio>
   

   Observação

   Ao pressionar a tecla TAB duas vezes, insere-se o fragmento de código. O excerto de áudio mostra o uso padrão da etiqueta de áudio , com dois ficheiros fonte para melhor suporte.

3. Apague a segunda linha e atualize o link da primeira linha com o seguinte link para o evento Installing ASP.NET and Web Tools: 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 ficheiro fonte é usado como exemplo. Podes usar outra fonte, se preferires.

4. Pressione CTRL + S para guardar o ficheiro.

5. Pressione CTRL + F5 para iniciar a aplicação.

6. Note que um leitor de áudio foi adicionado à aplicação.

   

   Leitor de áudio no Internet Explorer

   

   Leitor de áudio no Google Chrome

7. Não fechem os browsers. Vais usá-los na próxima tarefa.

Tarefa 3 - Utilização do IntelliSense em Documentos JavaScript

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

1. No ficheiro Index.cshtml , adicione o seguinte código para definir uma etiqueta de script para código JavaScript.

   ...
   </section>
   @section scripts{
       <script type="text/javascript">
   
       </script>
   }
   

2. Adicione o seguinte código dentro da tag script para definir a função de callback "ready".

   (Excerto de Código - VisualStudio2013WebTooling - Ex2 - ReadyFunction)

   (function () {
       $(document).ready(function () {
   
       });
   }());
   

3. Coloque o caret na tag script e pressione CTRL + . para abrir o menu de sugestões.

4. Clique em Extrair Para Ficheiro.

   

   Extração JavaScript para sugestão de ficheiro

5. Na janela Guardar Como , selecione a pasta Scripts , nomeie o ficheiroinit.js e clique em Guardar.

   

   Janela de Guardar Como

   Observação

   O ficheiroinit.js é criado e o conteúdo do script é transferido para o ficheiro.

   

   Init.js ficheiro criado com o conteúdo incluído

6. Abra o ficheiro Index.cshtml e verifique se a tag script foi substituída por uma referência ao ficheiroinit.js .

   

   Referência html do Init.js

7. Vá ao Explorador de Soluções e repare que o ficheiro init.js foi incluído automaticamente na solução.

   

   Init.js ficheiro incluído na solução

8. Volte ao ficheiro init.js para atualizar o callback da função ready.

9. Dentro da definição de função de callback que é passada para ready, adicione o seguinte código para obter todos os elementos por um atributo de classe específico.

   (function () {
        $(document).ready(function () {
             document.getElementsByClassName("")
        });
   }());
   

10. Pressione CTRL + Espaço entre as aspas dentro da chamada de função getElementsByClassName .

    

    Mostrar o IntelliSense para a função getElementsByClassName

    Observação

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

11. Substitua a linha que criou pelo seguinte código.

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

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

    

    Mostrar IntelliSense para o método getElementsByTagName

13. Selecione "áudio" da lista e pressione ENTER. O resultado é mostrado na figura seguinte.

    

    Recuperação de Elementos de Áudio

14. No Explorador de Soluções, clique com o botão direito do rato no ficheiro init.js na pasta Scripts e selecione Compactar ficheiro(s) JavaScript no menu Web Essentials.

    

    Minificar ficheiro(s) JavaScript

15. Quando solicitado para ativar a minificação automática quando o ficheiro de origem muda, clique em Sim.

    

    Ativação do aviso automático de minificação

    Observação

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

    

    Init.min.js ficheiro criado

16. Abra o ficheiroinit.min.js e repare que o ficheiro está minificado.

    

    Conteúdo do ficheiro Init.min.js

17. No ficheiroinit.js , adicione o seguinte código abaixo da chamada da função getElementsByTagName para reproduzir todos os elementos de áudio.

    (Excerto de Código - VisualStudio2013WebTooling - Ex2 - PlayAudioElements)

    var len = audioElements.length;
    for (var i = 0; i < len; i++) {
        audioElements[i].play();
    }
    

18. Clica em CTRL + S para guardar o ficheiro. Como o ficheiro minificado já está aberto, verá uma caixa de diálogo a dizer que o ficheiro foi modificado fora do editor de código-fonte. Clique em Sim.

    

    Aviso para Microsoft Visual Studio

19. Volte ao ficheiroinit.min.js para verificar se o ficheiro foi atualizado com o novo código.

    

    Init.min.js ficheiro atualizado

20. Clique no botão Atualizar o Link do Navegador .

21. Assim que ambos os navegadores são atualizados, os reprodutores de áudio que viste na tarefa anterior começam a reproduzir automaticamente.

    

    Leitor de áudio incluído na visualização

Resumo

Ao completar este laboratório prático, aprendeu como:

• Use as novas funcionalidades do editor HTML incluídas nos Web Essentials, como excertos de código HTML5 enriquecidos e programação Zen
• Use as novas funcionalidades do editor CSS incluídas nos Web Essentials, como o seletor de cores e a dica de ferramenta da matriz do navegador
• Use as novas funcionalidades do editor JavaScript incluídas nos Web Essentials, como Extrair para Ficheiro e IntelliSense, para todos os elementos HTML
• Troque dados entre o seu navegador e o Visual Studio usando o Browser Link