Compartir a través de

Laboratorio práctico: Web Tools de Visual Studio 2013

  • Artículo

por el equipo de Web Camps

Descarga del kit de formación de Web Camps

Visual Studio es un entorno de desarrollo excelente para proyectos web y Windows 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 (en su mayoría) relacionadas con la web 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 y código de ejemplo se incluyen en el Kit de formación de Web Camps, disponible en https://aka.ms/webcamps-training-kit.

Información general

Objetivos

En este laboratorio práctico, aprenderá a:

  • Uso de nuevas características del editor HTML incluidas en Web Essentials, como fragmentos de código HTML5 enriquecidos y Zen Coding
  • Uso de nuevas características del editor CSS incluidas en Web Essentials, como el selector de colores y la información sobre herramientas de matriz del explorador
  • Uso de 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 Vínculo con exploradores

Requisitos previos

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

Configuración

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

  1. Abra la ventana del explorador de Windows y vaya a la carpeta Source 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.

Nota:

Asegúrese de que ha comprobado todas las dependencias de este laboratorio antes de ejecutar la instalación.

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 Code, a los que puede acceder desde Visual Studio 2013 para evitar tener que agregarlo manualmente.

Nota:

Cada ejercicio va acompañado de una solución inicial ubicada en la carpeta Begin del ejercicio que le permite seguir cada ejercicio independientemente de los demás. Tenga en cuenta que los fragmentos de código que se agregan durante un ejercicio faltan en estas soluciones iniciales y es posible que no funcionen hasta que haya completado el ejercicio. Dentro del código fuente de un ejercicio, también encontrará una carpeta End que contiene una solución de Visual Studio con el código que resulta de completar los pasos del ejercicio correspondiente. Puede usar estas soluciones como guía si necesita ayuda adicional a medida que trabaja en este laboratorio práctico.

Ejercicios

Este laboratorio práctico incluye los siguientes ejercicios:

  1. Trabajo con Vínculo con exploradores y Web Essentials
  2. Aprovechamiento de los fragmentos de código e IntelliSense

Nota:

Cuando inicie Visual Studio por primera vez, debe seleccionar una de las colecciones de configuración predefinidas. Cada colección predefinida está diseñada para coincidir con un estilo de desarrollo determinado y determina los diseños de ventana, el comportamiento del editor, los fragmentos de código de IntelliSense y las opciones del cuadro de diálogo. Los procedimientos de este laboratorio describen las acciones necesarias para realizar una tarea determinada en Visual Studio al usar la colección Configuración de desarrollo general. Si elige una colección de configuraciones diferente para el entorno de desarrollo, puede haber diferencias en los pasos que debe tener en cuenta.

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.

Vínculo con exploradores 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 Vínculo con exploradores 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 Vínculo con exploradores para mejorar una página de prueba sencilla.

Tarea 1: Ejecución del 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....

    Browse With menu option

    Opción de menú Examinar 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.

    Browse with dialog box

    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 and Internet Explorer as default browsers

    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.

    Multiple browsers

  6. Presione CTRL + F5 para ejecutar el programa 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.

    Placing one browser above the other

    Colocación de un explorador encima del otro

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

Tarea 2: Uso de Zen Coding 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 le permite expandir expresiones (similares a los 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 característica Zen Coding proporcionada por 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 | Inicio.

  3. Reemplace el comentario <--TODO: agregar opciones aquí--> con el código siguiente y presione TAB.

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

  4. El código debe expandirse a HTML.

    Expanded 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.

    Refresh linked browsers

    Actualización de exploradores vinculados

    Internet Explorer - Page updated with four buttons

    Internet Explorer: página actualizada con cuatro botones

    Google Chrome - Page updated with four buttons

    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. Busque el elemento div con el atributo classfront.

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

    p.lead>lorem5

  9. El código debe expandirse a HTML.

    Lorem Ipsum autogenerated

    Lorem Ipsum generado automáticamente

    Nota:

    Como parte de Zen Coding, 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 característica en Web Essentials llamado Generador Lorem Pixel. Agregue el código siguiente como primer elemento secundario del elemento div con container como el valor de class y presione TAB.

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

  11. El código debe expandirse a HTML.

    Lorem Pixel autogenerated

    Lorem Pixel generado automáticamente

    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 - Autogenerated image and text

    Internet Explorer: imagen y texto generados automáticamente

    Google Chrome - Autogenerated image and text

    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 tarea siguiente.

Tarea 3: Actualización de una propiedad Style

En esta tarea, usará la característica Modo de inspección de Vínculo con exploradores 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 de inspección.

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

    Moving the pointer over the light blue border

    Movimiento del 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.

    HTML element selected in the Visual Studio HTML editor

    Elemento HTML seleccionado en el editor HTML de Visual Studio

  4. Ahora actualizará la clase CSS front 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.

    Opening file Site.css

    Apertura del 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 border de la clase para abrir el selector de colores.

    Opening the Color Picker

    Apertura del selector de colores

  7. Expanda el selector de colores haciendo clic en el botón de contenido adicional y seleccione un nuevo color.

    Expanding the Color Picker

    Expansión del 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 - Border color updated

    Internet Explorer: color de borde actualizado

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

    Google Chrome - Border color updated

    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.

    -webkit-border-radius property of the btn selector

    Propiedad -webkit-border-radius del selector btn

  14. Coloque el símbolo de intercalación en la propiedad -webkit-border-radius. Debe aparecer una línea azul debajo de la primera letra de la primera palabra del texto. Esta es la etiqueta inteligente.

  15. Presione CTRL + . para abrir el menú de sugerencias y haga clic en Add missing standard property (border-radius).

    Add missing standard property suggestion

    Sugerencia de adición de la propiedad estándar que falta

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

    Missing standard property added

    Propiedad estándar que falta agregada

  17. Mueva el puntero sobre la propiedad border-radius para mostrar la información sobre herramientas de matriz del explorador. La información sobre herramientas de matriz del explorador muestra la disponibilidad de la propiedad en cada explorador.

    Browser matrix tooltip

    Información sobre herramientas de matriz del explorador

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

    Border-radius property value warning

    Advertencia de valor de la propiedad border-radius

  19. Quite la unidad del valor de la propiedad border-radius como sugiere la información sobre herramientas.

  20. Como border-radius es la propiedad estándar para definir cómo son las esquinas de borde redondeadas, puede quitar la propiedad -webkit-border-radius y el 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 a continuación.

  22. Abra el menú y haga clic en Add missing vendor specifics.

    Add missing vendor specifics suggestion

    Sugerencia de adición de elementos específicos del proveedor que faltan

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

    Vendor specific property added

    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 de Vínculo con exploradores 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.

    Editing the question

    Edición de la pregunta

  3. Debería aparecer un cursor. Reemplace el texto original por What does it look like when I write a longer question? y, a continuación, presione ESC para salir del modo de diseño.

    Question edited

    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>.

    Updated question in the HTML page

    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 mayor sea la clasificación del sitio y más coherente, más visitantes obtendrá el sitio de ese 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.

    Error List in View menu

    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.

    Error List window

    Ventana Lista de errores

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

    Web Essentials dialog box

    Cuadro de diálogo Web Essentials

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

    Meta tag automatically added in _Layout page

    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: Aprovechamiento de 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 usará.

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

  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 Vistas | Inicio.

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

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

    <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 <form> envolvente).

    Showing the id in IntelliSense

    Muestra del identificador en IntelliSense

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

Tarea 2: Uso de 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 reservas 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.

    Inserting an audio element

    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 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.

    Audio player in Internet Explorer

    Reproductor de audio en Internet Explorer

    Audio player in Google Chrome

    Reproductor de audio en Google Chrome

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

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á a mejorar la compatibilidad con IntelliSense de JavaScript en Web Essentials 2013.

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

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

    </script>
}

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

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

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

    });
}());

  3. Coloque el símbolo de intercalación en la etiqueta de script y presione CTRL + . para abrir el menú de sugerencias.

  4. Haga clic en Extract To File.

    JavaScript extract to file suggestion

    Sugerencia de la extracción de JavaScript en archivo

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

    Save As window

    Ventana Guardar como

    Nota:

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

    Init.js file created with the content included

    Archivo init.js 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.

    Init.js html reference

    Referencia html de init.js

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

    Init.js file included in solution

    Archivo init.js incluido en la solución

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

  9. Dentro de la definición de devolución de llamada de función que se pasa a 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.

    Showing IntelliSense for the getElementsByClassName function

    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.

    Showing IntelliSense for the getElementByTagName method

    Muestra de IntelliSense para el método getElementsByTagName

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

    Retrieving Audio Elements

    Recuperación de elementos de audio

  14. En 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.

    Minify JavaScript file(s)

    Minify JavaScript file(s)

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

    Enabling automatic minification warning

    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 file created

    Archivo init.min.js creado

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

    Init.min.js file content

    Contenido del archivo init.min.js

  17. En el archivo init.js, agregue el código siguiente debajo de la llamada de 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í.

    Microsoft Visual Studio warning

    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 file updated

    Archivo init.min.js actualizado

  20. Haga clic en el botón Actualizar Vínculo con exploradores.

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

    Audio player included in view

    Reproductor de audio incluido en la vista

Resumen

Al finalizar este laboratorio práctico habrá aprendido a:

  • Uso de nuevas características del editor HTML incluidas en Web Essentials, como fragmentos de código HTML5 enriquecidos y Zen Coding
  • Uso de nuevas características del editor CSS incluidas en Web Essentials, como el selector de colores y la información sobre herramientas de matriz del explorador
  • Uso de 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 Vínculo con exploradores