Laboratorio práctico: Visual Studio 2013 Web Tools

por equipo de Web Camps

Descarga del kit de formación de Web Camps

Visual Studio es un entorno de desarrollo excelente para proyectos de Windows y web basados en .NET. Incluye un editor de texto eficaz que se puede usar fácilmente para editar archivos independientes sin un proyecto.

Visual Studio mantiene un árbol de análisis completo a medida que edita cada archivo. Esto permite a Visual Studio proporcionar acciones sin precedentes de finalización automática y basadas en documentos al tiempo que hace que la experiencia de desarrollo sea mucho más rápida y agradable. Estas características son especialmente eficaces en documentos HTML y CSS.

Toda esta potencia también está disponible para extensiones, lo que facilita la ampliación de los editores con nuevas características eficaces para satisfacer sus necesidades. Web Essentials es una colección de mejoras relacionadas con la web (principalmente) para Visual Studio. Incluye muchas nuevas finalizaciones de IntelliSense (especialmente para CSS), nuevas características de Browser Link, JSHint automático para archivos JavaScript, nuevas advertencias para HTML y CSS, y muchas otras características que son esenciales para el desarrollo web moderno.

Todos los fragmentos de código de ejemplo están incluidos en el Web Camps Training Kit, disponible en https://aka.ms/webcamps-training-kit.

Visión general

Objetivos

En este laboratorio práctico, aprenderá a:

• Usar nuevas características del editor HTML incluidas en Web Essentials, como fragmentos de código HTML5 enriquecidos y codificación Zen
• Utiliza las nuevas características del editor CSS incluidas en Web Essentials, como el selector de color y la información sobre la matriz del explorador.
• Usar nuevas características del editor de JavaScript incluidas en Web Essentials, como Extract to File e IntelliSense para todos los elementos HTML
• Intercambio de datos entre el explorador y Visual Studio mediante el vínculo del explorador

Prerrequisitos

Se requiere lo siguiente para completar este laboratorio práctico:

• Microsoft Visual Studio Professional 2013 o superior
• Web Essentials 2013
• Google Chrome

Configuración

Para ejecutar los ejercicios en este laboratorio práctico, primero deberá configurar el entorno.

1. Abra una ventana del Explorador de Windows y vaya a la carpeta Origen del laboratorio.
2. Haga clic con el botón derecho en Setup.cmd y seleccione Ejecutar como administrador para iniciar el proceso de instalación que configurará el entorno e instalará los fragmentos de código de Visual Studio para este laboratorio.
3. Si se muestra el cuadro de diálogo Control de cuentas de usuario, confirme la acción para continuar.

Uso de los fragmentos de código

A lo largo del documento de laboratorio, se le pedirá que inserte bloques de código. Para mayor comodidad, la mayoría de este código se proporciona como fragmentos de código de Visual Studio, a los que puede acceder desde Visual Studio 2013 para evitar tener que agregarlo manualmente.

Ejercicios

Este laboratorio práctico incluye los siguientes ejercicios:

1. Trabajar con Browser Link y Web Essentials
2. Aprovechar los fragmentos de código e IntelliSense

Ejercicio 1: Trabajar con Browser Link y Web Essentials

Web Essentials es una extensión de Visual Studio que agrega una variedad de características útiles para el desarrollo web moderno, principalmente centrado en hacer que la experiencia de desarrollo web sea mucho más rápida y agradable. Puede instalar Web Essentials desde la Galería de extensiones en Visual Studio.

Browser Link es una nueva característica incluida en Visual Studio 2013 que proporciona un canal entre el IDE de Visual Studio y cualquier explorador abierto para intercambiar datos entre la aplicación web y Visual Studio. Web Essentials amplía Browser Link con herramientas para manipular el modelo de objetos DOM y los estilos CSS de las páginas web directamente desde el explorador.

En este ejercicio, explorará algunas de las características compatibles con Web Essentials y Browser Link para mejorar una página de prueba sencilla.

Tarea 1: Ejecutar el proyecto en varios exploradores

En esta tarea, configurará la aplicación web para que se ejecute en varios exploradores a la vez, lo que resulta útil para las pruebas entre exploradores.

1. Abra Microsoft Visual Studio.

2. En el menú Archivo , seleccione Abrir | Proyecto/solución... y vaya a Ex1-WorkingwithBrowserLinkandWebEssentials\Begin en la carpeta Source del laboratorio (C:\WebCampsTK\HOL\VSWebTooling\Source). Seleccione Begin.sln y haga clic en Abrir.

3. En la barra de herramientas de Visual Studio, expanda el menú del explorador y seleccione Examinar con....

   

   Opción de menú Explorar con

4. En el cuadro de diálogo Examinar con , seleccione Google Chrome e Internet Explorer manteniendo presionada la tecla CTRL y haga clic en Establecer como predeterminado.

   

   Selección de varios exploradores predeterminados

5. Google Chrome e Internet Explorer ahora deben aparecer como exploradores predeterminados. Haga clic en Cancelar para cerrar el cuadro de diálogo.

   

   Google Chrome e Internet Explorer como exploradores predeterminados

   Nota:

   Después de configurar los exploradores predeterminados, la opción Varios exploradores está seleccionada en el menú del explorador.

   

6. Presione CTRL + F5 para ejecutar la aplicación sin depurar.

7. Cuando ambas ventanas del explorador se abran, coloque una de ellas encima de la otra para ver las actualizaciones en ambos exploradores simultáneamente. Los exploradores deben mostrar una página web con un rectángulo azul claro.

   

   Colocación de un explorador encima del otro

8. No cierre los exploradores. Los usará en la siguiente tarea.

Tarea 2: Uso de la codificación Zen para crear elementos HTML

Zen Coding es un complemento de editor para codificación y edición HTML, XML, XSL (o cualquier otro formato de código estructurado). El núcleo de este complemento es un potente motor de abreviaturas que permite expandir expresiones -similar a selectores CSS, en código HTML. Zen Coding es una manera rápida de escribir HTML mediante una sintaxis de selector de estilo CSS.

En este ejercicio, usará la función de codificación Zen de Web Essentials para generar los botones HTML que representan las opciones de la pregunta.

1. Vuelva a Visual Studio.

2. Abra el archivo Index.cshtml ubicado en la carpeta Vistas | Home.

3. Sustituya el comentario <-- TODO: agregue opciones aquí--> por el código siguiente y presione TAB.

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

4. El código debe expandirse a HTML.

   

   HTML expandido

   Nota:

   Para obtener más información sobre la sintaxis de Zen Coding, consulte el siguiente artículo.

5. Haga clic en el botón Actualizar exploradores vinculados para actualizar ambos exploradores.

   

   Actualizar exploradores vinculados

   

   Internet Explorer: página actualizada con cuatro botones

   

   Google Chrome: página actualizada con cuatro botones

6. Vuelva a Visual Studio.

7. Ha agregado los botones a la página, pero todavía necesita agregar una pregunta de plantilla. Para ello, usará una nueva característica en Web Essentials denominada generador Lorem Ipsum. Ubique el elemento div con el atributo classfront.

8. Agregue el código siguiente como primer elemento secundario del div y presione TAB.

   p.lead>lorem5
   

9. El código debe expandirse a HTML.

   

   Lorem Ipsum generado automáticamente

   Nota:

   Como parte de la codificación zen, ahora puede generar código Lorem Ipsum directamente en el editor HTML. Simplemente escriba lorem y presione TAB y se insertará un texto Lorem Ipsum de 30 palabras. Por ejemplo, lorem10 inserta 10 palabras de Lorem Ipsum.

10. Agregará un logotipo en la parte superior de la pregunta usando otra nueva funcionalidad en Web Essentials llamada Lorem Pixel generator. Agregue el código siguiente como primer elemento secundario del elemento div con contenedor como valor de clase y presione TAB.

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

11. El código debe expandirse a HTML.

    

    Lorem Pixel autogenerado

    Nota:

    Como parte de Zen Coding, también puede generar código Lorem Pixel directamente en el editor HTML. Simplemente escriba pix-200x200-animals y presione TAB y una etiqueta img con una imagen de 200x200 de un animal se insertará.

12. Haga clic en el botón Actualizar exploradores vinculados para actualizar ambos exploradores.

    

    Internet Explorer: imagen y texto generados automáticamente

    

    Google Chrome: imagen y texto generados automáticamente

    Nota:

    Dado que la imagen se selecciona aleatoriamente al agregar el fragmento de código, la imagen que se muestra en los exploradores puede diferir.

13. No cierre los exploradores. Los usará en la siguiente tarea.

Tarea 3: Actualización de una propiedad de estilo

En esta tarea, usará la característica Modo de inspección del vínculo del explorador para detectar la ubicación exacta donde se genera el elemento DOM específico y, a continuación, actualizará la propiedad de color de ese elemento mediante un selector de colores proporcionado por Web Essentials.

1. En el explorador Internet Explorer, presione CTRL + ALT + I para habilitar el modo inspeccionar.

2. Mueva el puntero sobre el borde azul claro y haga clic en .

   

   Mover el puntero sobre el borde azul claro

3. Vuelva a Visual Studio. Observe cómo también se selecciona el elemento HTML seleccionado en el explorador en el editor HTML de Visual Studio.

   

   Elemento HTML seleccionado en el editor HTML de Visual Studio

4. Ahora actualizará la clase CSS frontal para cambiar el estilo del elemento seleccionado. Para ello, presione CTRL + para abrir el cuadro de búsqueda Navegar a. Escriba site.css y presione ENTRAR para abrir el archivo.

   

   Abrir archivo Site.css

5. Presione CTRL + F y escriba .flip-container .front para buscar el selector CSS.

6. Haga clic en el cuadrado azul claro de la propiedad de borde de la clase para abrir el selector de colores.

   

   Abrir el selector de colores

7. Expanda el Selector de colores haciendo clic en el botón desplegable y seleccione un nuevo color.

   

   Expandir el selector de colores

8. Presione CTRL + ALT + ENTRAR para actualizar los exploradores vinculados.

9. Cambie a Internet Explorer y observe cómo ha cambiado el color del borde.

   

   Internet Explorer: color de borde actualizado

10. Cambie a Google Chrome y observe cómo ha cambiado el color del borde.

    

    Google Chrome: color de borde actualizado

11. Vuelva a Visual Studio.

12. Vaya al final del archivo Site.css y presione CTRL + F para buscar el selector .btn .

13. Observe que la propiedad -webkit-border-radius está subrayada en verde.

    

    Propiedad -webkit-border-radius del selector btn

14. Coloque el cursor en la propiedad -webkit-border-radius. Una línea azul debe aparecer bajo la primera letra de la primera palabra de la propiedad. Esta es la etiqueta inteligente.

15. Presione CTRL + . para abrir el menú de sugerencias y haga clic en Agregar propiedad estándar que falta (radio de borde) .

    

    Agregar sugerencia de propiedad estándar que falta

16. La propiedad border-radius se agrega automáticamente a la regla CSS.

    

    Propiedad estándar faltante añadida

17. Mueva el puntero sobre la propiedad border-radius para mostrar el visor de matriz del navegador. La sugerencia de herramienta de matriz del explorador muestra la disponibilidad de la propiedad en cada navegador.

    

    Sugerencia de herramienta de matriz del navegador

18. Observe que el valor de la propiedad border-radius sigue subrayado. Mueva el puntero sobre el valor para ver el mensaje de advertencia.

    

    Advertencia sobre el valor de la propiedad border-radius

19. Quite la unidad del valor de la propiedad border-radius según lo sugiere el mensaje de ayuda.

20. Como border-radius es la propiedad estándar para definir cómo de redondeadas son las esquinas de los bordes, puede eliminar la propiedad -webkit-border-radius y su valor de la regla CSS.

21. Coloque el símbolo de intercalación en la propiedad word-wrap y observe que la etiqueta inteligente también aparece debajo.

22. Abra el menú y haga clic en Agregar detalles del proveedor que faltan.

    

    Adición de sugerencias específicas del proveedor que faltan

23. La propiedad -ms-word-wrap se agrega automáticamente a la regla CSS.

    

    Propiedad específica del proveedor agregada

Tarea 4: Actualización del código HTML desde el explorador

En esta tarea, usará la característica Modo de diseño del vínculo del explorador para editar el objeto DOM desde el explorador y transferir los cambios al archivo de origen HTML en Visual Studio.

1. En Google Chrome, presione CTRL + ALT + D para habilitar el modo de diseño.

2. Mueva el puntero sobre la etiqueta lorem Ipsum dolor sit amet y haga clic.

   

   Edición de la pregunta

3. Debería aparecer un cursor. Reemplace el texto original por ¿Cómo se ve cuando escribo una pregunta más larga? y, a continuación, presione ESC para salir del modo de diseño.

   

   Pregunta editada

4. Vuelva a Visual Studio y abra Index.cshtml, si aún no se ha abierto. Observe que se ha actualizado el texto interno del <elemento p> .

   

   Pregunta actualizada en la página HTML

Tarea 5: Revisión de advertencias relacionadas con SEO

La optimización del motor de búsqueda (SEO) es el proceso de hacer que un sitio web sea más alto en la lista de resultados de un motor de búsqueda. Cuanto mejor sea la clasificación del sitio y más consistentemente figure, más visitantes obtendrá el sitio de dicho motor de búsqueda. Web Essentials incorpora una herramienta analítica que examina HTML, notifica los problemas encontrados y proporciona ayuda para corregirlos.

1. Vaya al menú Ver y haga clic en Lista de errores para abrir la ventana Lista de errores .

   

   Lista de errores en el menú Ver

2. Observe que hay una advertencia de SEO que notifica que falta una <etiqueta meta> para la descripción de la página. Haga doble clic en la entrada de advertencia de SEO para corregirla.

   

   Ventana de lista de errores

3. En el cuadro de diálogo Web Essentials, haga clic en Sí para insertar una etiqueta meta< de descripción>.

   

   Cuadro de diálogo Web Essentials

4. Se abre el editor de _Layout.cshtml y la <meta> etiqueta se agrega automáticamente a la sección principal del archivo HTML.

   

   Etiqueta meta agregada automáticamente a la página _Layout

5. Cambie el valor del atributo content a GeekQuiz y guarde el archivo.

Ejercicio 2: Aprovechar los fragmentos de código e IntelliSense

Con Web Essentials, el editor HTML se ha ampliado con funcionalidad adicional. En este ejercicio, verá algunas características nuevas que son útiles al desarrollar aplicaciones web.

Tarea 1: Uso de IntelliSense en documentos HTML

La primera característica nueva que verá en esta tarea se denomina IntelliSense dinámico. IntelliSense dinámico lee otras etiquetas y atributos para deducir los posibles identificadores que utilizarás.

En esta tarea, creará un nuevo elemento de formulario HTML que contiene una etiqueta y un campo de entrada. A continuación, agregará un for atributo a la etiqueta para enlazarlo a la entrada y verá sugerencias de IntelliSense basadas en los identificadores de las entradas en el contexto.

1. Abra Visual Studio Express 2013 para Web y la solución Begin.sln ubicada en la carpeta Source/Ex2-TakingAdvantageofCodeSnippetsandIntelliSense/Begin . Como alternativa, puede continuar con la solución que obtuvo en el ejercicio anterior.

2. En el Explorador de soluciones, abra el archivo Index.cshtml ubicado en la carpeta Views | Home.

3. Agregue el siguiente formulario dentro del <section> elemento.

   (Fragmento de código: VisualStudio2013WebTooling - Ex2 - Formulario)

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

4. La etiqueta de entrada debe ir precedida de una etiqueta con una descripción del campo. Agregue la siguiente etiqueta antes de la etiqueta de entrada.

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

5. El atributo for de una <etiqueta> especifica a qué elemento de formulario está enlazado una etiqueta. El valor del atributo debe ser igual al identificador del elemento relacionado. Agregue el atributo for al <elemento label> . Como se muestra en la ilustración siguiente, el valor "name" aparece en el cuadro IntelliSense, en función del identificador de los elementos dentro del mismo ámbito (el formulario< envolvente>).

   

   Mostrar el identificador en IntelliSense

6. Elimine el elemento de formulario< agregado> recientemente y su contenido.

Tarea 2: Usar fragmentos de código HTML

HTML5 introdujo más de 25 nuevas etiquetas semánticas. Visual Studio ya tenía compatibilidad con IntelliSense para estas etiquetas, pero Visual Studio 2013 facilita la escritura de marcado mediante la adición de nuevos fragmentos de código. Aunque estas etiquetas no son complicadas, vienen con algunas sutilezas pequeñas, como agregar las alternativas de códec correctas para la etiqueta audio. En esta tarea, verá los fragmentos de código HTML de la etiqueta de audio.

1. En el archivo Index.cshtml , escriba <aud dentro del <elemento section> como se muestra en la ilustración siguiente.

   

   Inserción de un elemento de audio

2. Presione TAB dos veces y observe cómo se agrega el código siguiente en la página y el cursor se coloca en el atributo src del primer origen.

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

   Nota:

   Al presionar la tecla TAB dos veces, se inserta el fragmento de código. El fragmento de código de audio muestra el uso estándar de la etiqueta de audio , con dos archivos de origen para mejorar la compatibilidad.

3. Elimine la segunda línea y actualice el origen de la primera línea con el vínculo siguiente a la presentación instalación de ASP.NET y herramientas web : https://learn.microsoft.com/shows/asp-net-site-videos/installing-aspnet-web-tools. A continuación se muestra el código resultante.

   <audio controls="controls">
        <source src="http://media.ch9.ms/ch9/11d8/604b8163-fad3-4f12-9607-b404201211d8/KatanaProject.mp3" type="audio/mp3" />
   </audio>
   

   Nota:

   El archivo de origen se usa como ejemplo. Si lo prefiere, puede usar otro origen.

4. Presione CTRL + S para guardar el archivo.

5. Presione CTRL + F5 para iniciar la aplicación.

6. Observe que se agregó un reproductor de audio a la aplicación.

   

   Reproductor de audio en Internet Explorer

   

   Reproductor de audio en Google Chrome

7. No cierre los exploradores. Los usará en la siguiente tarea.

Tarea 3: Uso de IntelliSense en documentos de JavaScript

Con Web Essentials 2013, las hojas de estilos y las páginas HTML generan una lista de identificadores y nombres de clase. En esta tarea, aprenderá cómo esas listas mejoran la compatibilidad de IntelliSense de JavaScript en Web Essentials 2013.

1. En el archivo Index.cshtml , agregue el código siguiente para definir una etiqueta de script para código JavaScript.

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

2. Agregue el código siguiente dentro de la etiqueta de script para definir la función de devolución de llamada preparada.

   (Fragmento de código: VisualStudio2013WebTooling - Ex2 - ReadyFunction)

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

3. Coloque el cursor en la etiqueta script y presione CTRL + . para abrir el menú de sugerencias.

4. Haga clic en Extraer al archivo.

   

   Sugerencia para extraer JavaScript a un archivo

5. En la ventana Guardar como , seleccione la carpeta Scripts , asigne al archivo el nombre init.js y haga clic en Guardar.

   

   Ventana Guardar como

   Nota:

   El archivo init.js se crea y el contenido del script se mueve al archivo.

   

   Init.js archivo creado con el contenido incluido

6. Abra el archivo Index.cshtml y compruebe que la etiqueta de script se ha reemplazado por una referencia al archivo init.js .

   

   referencia html deInit.js

7. Vaya al Explorador de soluciones y observe que el archivo init.js se incluyó automáticamente en la solución.

   

   Init.js archivo incluido en la solución

8. Vuelva al archivo init.js para actualizar la función ready de devolución de llamada.

9. Dentro de la definición de la función de devolución de llamada que se pasa a la función ready, agregue el código siguiente para obtener todos los elementos mediante un atributo de clase específico.

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

10. Presione CTRL + Espacio entre las comillas dentro de la llamada a la función getElementsByClassName .

    

    Mostrar IntelliSense para la función getElementsByClassName

    Nota:

    Observe que IntelliSense muestra las clases definidas en las hojas de estilos del proyecto.

11. Reemplace la línea que ha creado por el código siguiente.

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

12. Coloque el cursor después de au dentro de las comillas de la función getElementsByTagName y presione Ctrl + Espacio.

    

    Mostrar IntelliSense para el método getElementsByTagName

13. Seleccione "audio" en la lista y presione ENTRAR. El resultado se muestra en la ilustración siguiente.

    

    Recuperación de elementos de audio

14. En el Explorador de soluciones, haga clic con el botón derecho en el archivo init.js de la carpeta Scripts y seleccione Minify JavaScript file(s) en el menú Web Essentials .

    

    Minimizar archivos JavaScript

15. Cuando se le pida que habilite la minificación automática cuando cambie el archivo de origen, haga clic en Sí.

    

    Habilitación de la advertencia de minificación automática

    Nota:

    El init.min.js se crea y se agrega como dependencia del archivo init.js .

    

    Init.min.js archivo creado

16. Abra el archivo init.min.js y observe que el archivo está minificado.

    

    Init.min.js contenido del archivo

17. En el archivo init.js , agregue el código siguiente debajo de la llamada a la función getElementsByTagName para reproducir todos los elementos de audio.

    (Fragmento de código: VisualStudio2013WebTooling - Ex2 - PlayAudioElements)

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

18. Haga clic en CTRL + S para guardar el archivo. Dado que el archivo minificado ya está abierto, verá un cuadro de diálogo que indica que el archivo se modificó fuera del editor de origen. Haga clic en Sí.

    

    Advertencia de Microsoft Visual Studio

19. Vuelva al archivo init.min.js para comprobar que el archivo se actualizó con el nuevo código.

    

    Init.min.js archivo actualizado

20. Haga clic en el botón Actualizar vínculo del explorador .

21. Una vez que se actualicen ambos exploradores, los reproductores de audio que vio en la tarea anterior comenzarán a reproducirse automáticamente.

    

    Reproductor de audio incluido en la vista

Resumen

Al completar este laboratorio práctico, ha aprendido a:

• Usar nuevas características del editor HTML incluidas en Web Essentials, como fragmentos de código HTML5 enriquecidos y codificación Zen
• Utiliza las nuevas características del editor CSS incluidas en Web Essentials, como el selector de color y la información sobre la matriz del explorador.
• Usar nuevas características del editor de JavaScript incluidas en Web Essentials, como Extract to File e IntelliSense para todos los elementos HTML
• Intercambio de datos entre el explorador y Visual Studio mediante el vínculo del explorador