Novedades de Desarrollo de ASP.NET y web en Visual Studio 2012
por el equipo de Web Camps
La nueva versión de Visual Studio presenta una serie de mejoras centradas en mejorar la experiencia y el rendimiento al trabajar con tecnologías web. Los editores de Visual Studio para CSS, JavaScript y HTML se han renovado completamente para incluir muchas de las ayudas de código más a petición, como IntelliSense y la sangría automática. En cuanto al rendimiento, la unión y la minificación ahora se incluyen como características integradas para reducir fácilmente el tiempo de carga de las páginas.
Visual Studio le permite trabajar con las tecnologías para sitios web más recientes. Puede usar fragmentos de código CSS3 entre exploradores para asegurarse de que el sitio funciona independientemente de la plataforma cliente, al tiempo que aprovecha los nuevos elementos y características de HTML5.
Escribir y generar perfiles de código JavaScript debe ser más fácil con esta versión de Visual Studio. Las listas de IntelliSense, la documentación XML integrada y las características de navegación ahora están disponibles para código de JavaScript. Ahora tiene el catálogo de JavaScript a su alcance. Además, puede comprobar el cumplimiento de ECMAScript5 de los scripts y detectar errores de sintaxis en una fase temprana.
Por último, pero no menos importante, esta versión de Visual Studio implementa la unión y la minificación integradas. Los archivos de script y las hojas de estilos se empaquetarán y comprimirán para que el sitio funcione más rápido.
En este laboratorio se le guía por las mejoras y las nuevas características descritas anteriormente mediante la aplicación de cambios menores a una aplicación web de ejemplo proporcionada en la carpeta Source.
Objetivos
En este laboratorio práctico, obtendrá información sobre lo siguiente:
- Uso de las nuevas características y mejoras en el editor CSS
- Uso de las nuevas características y mejoras en el editor HTML
- Uso de las nuevas características y mejoras en el editor JavaScript
- Configuración de la unión y la minimización
Requisitos previos
- Microsoft Visual Studio Express 2012 para Web o superior (lea el Apéndice A para obtener instrucciones sobre cómo instalarlo).
- Windows PowerShell (para scripts de instalación, ya está instalado en Windows 8 y Windows Server 2008 R2)
- Internet Explorer 10 o un explorador compatible con HTML5
Ejercicios
Este laboratorio práctico incluye los siguientes ejercicios:
- Ejercicio 1: Novedades del Editor de CSS
- Ejercicio 2: Novedades del Editor HTML
- Ejercicio 3: Novedades del Editor de JavaScript
- Ejercicio 4: Unión y minimización
Tiempo estimado para completar este laboratorio: 60 minutos.
Ejercicio 1: Novedades del Editor de CSS
Los desarrolladores web deben estar familiarizados con muchas de las dificultades relacionadas con la edición de CSS. Uno de los problemas más importantes de los estilos CSS es la compatibilidad entre exploradores. Es habitual que, después de aplicar estilos al sitio, observe que tiene un aspecto diferente si lo abre en otro explorador o dispositivo. Por tanto, es posible que tenga que dedicar un tiempo considerable a corregir esos problemas visuales para darse cuenta de que, cuando finalmente consigue que funcione en un explorador, se interrumpe en los demás.
Visual Studio ahora incluye características que ayudan a los desarrolladores a acceder, trabajar y organizar hojas de estilos CSS de forma eficaz. A lo largo de este ejercicio, conocerá las nuevas características de organización y edición eficaces, así como fragmentos de código CSS3 para la compatibilidad entre exploradores.
Tarea 1: Nuevas características del editor
En esta tarea, descubrirá las nuevas características del Editor de CSS. Este nuevo editor le ayudará a aumentar la productividad y sacar provecho de la nueva sangría inteligente, los comentarios de código mejorados y la lista de IntelliSense mejorada.
Inicie Visual Studio y abra la solución WhatsNewASPNET.sln ubicada en la carpeta Source\WhatsNewASPNET de este laboratorio.
En el Explorador de soluciones, abra el archivo Site.css ubicado en la carpeta Styles. Asegúrese de que las herramientas del Editor de texto sean visibles en la barra de herramientas. Para ello, seleccione la opción de menú Ver | Barras de herramientas y active las opciones del Editor de texto. Observará que, desde esta nueva versión, los botones Comentario (
) y Quitar marca de comentario (
) también están habilitados para el editor de CSS.
Habilitación del editor y las herramientas CSS
Desplácese por el código y seleccione cualquier definición de clase CSS. Haga clic en el botón Comentario (
) para comentar las líneas seleccionadas. Después, haga clic en el botón Quitar marca de comentario (
) para deshacer los cambios.Haga clic en los botones Contraer (
) y Expandir (
) situados en el margen izquierdo del texto. Observe que ahora puede ocultar los estilos que no usa para tener una vista más limpia.
Contracción de clases CSS
Asegúrese de que la característica de sangría inteligente está habilitada. Seleccione la opción de menú Herramientas | Opciones y, después, seleccione la página Editor de texto | CSS | Formato en el panel izquierdo de la pantalla. Active la opción Sangría jerárquica.
Habilitación de la sangría jerárquica
Busque la definición de clase principal (.main) y anexe un estilo a los elementos div. Observará que el código se alinea automáticamente, lo que ayuda a los usuarios a encontrar las clases primarias de un vistazo.
CSS
.main { padding: 0px 12px; margin: 12px 8px 8px 8px; min-height: 420px; } .main div { border: 0px; }
Alineación jerárquica en CSS
Dentro de la clase .main div, busque el cursor al final de border: 0px y presione Entrar para mostrar la lista de IntelliSense. Empiece a escribir top y observe cómo se filtra la lista a medida que escribe. La lista mostrará los elementos que contienen top en cualquier parte de la palabra (en versiones anteriores de Visual Studio, la lista se filtraba por los elementos que empezaban por el término).
Mejoras de IntelliSense en CSS
Tarea 2: Selector de colores
En esta tarea, descubrirá el nuevo Selector de colores CSS integrado en IntelliSense de Visual Studio.
En Site.css, busque la definición de clase de encabezado (.header) y coloque el cursor junto al atributo background-color, entre los caracteres ":" y "#" de esa línea de código .
Búsqueda del cursor
Elimine los dos puntos (:) y vuelva a escribirlos para mostrar el selector de colores. Observe que los primeros colores que verá son los más frecuentes del sitio. Si hace clic en el color blanco, su código de color HTML (#fff) reemplazará el código de color actual en la hoja de estilos.
Selector de colores
Presione el botón Expandir (
) del selector de colores para mostrar el degradado de color y, después, arrastre el cursor de degradado para seleccionar otro color. Después, haga clic en el botón Cuentagotas y seleccione cualquier color de la pantalla. Observe que el valor de color de fondo cambia dinámicamente mientras mueve el cursor.
Degradado del selector de colores
En el control deslizante Opacidad, mueva el selector al centro de la barra para reducir la opacidad. Observe que el valor de color de fondo ahora cambia su escala a RGBA.
Opacidad del selector de colores
Nota:
La definición de color RGBA (Rojo, Verde, Azul, Alfa) en CSS3 le permite definir el valor de opacidad de color para un solo elemento. A diferencia de opacity, un atributo de CSS similar- los colores RGBA también son compatibles con los exploradores más recientes.
Tarea 3: Fragmentos de código compatibles con CSS
En esta tarea, aprenderá a usar fragmentos de código CSS3 compatibles entre exploradores para implementar algunas características en el sitio web.
En el archivo Site.css, busque la definición de clase CSS de encabezado (.header) y coloque el cursor debajo del marcador de posición /*border radius*/ para agregar un nuevo fragmento de código. Presione Entrar para mostrar la lista de IntelliSense y escriba radius para filtrar la lista. Seleccione la opción border-radius en la lista con un doble clic y presione la tecla TAB para insertar el fragmento de código. Después, escriba un tamaño de radio en píxeles y presione Entrar. Por ejemplo, escriba 15px.
Los atributos CSS3 agregados por el fragmento de código representarán los bordes redondeados en la mayoría de los exploradores compatibles con HTML5, incluidos los basados en Mozilla y WebKit.
Uso de un fragmento de código de radio de borde
Aplique los mismos fragmentos de borde en el estilo de página (.page).
CSS
.page { width: 960px; background-color: #fff; margin: 20px auto 0px auto; border: 1px solid #496077; /*border radius*/ -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; }Presione F5 para ejecutar la solución. Observe que cada página ahora tiene bordes redondeados.
Esquinas redondeadas
Cierre el explorador y vuelva a Visual Studio.
Abra el archivo Custom.css ubicado en la carpeta Styles y coloque el cursor dentro de la definición de clase div.images ul li img.
Presione Entrar para mostrar la lista de IntelliSense, escriba box-shadow y presione la tecla TAB dos veces para insertar el fragmento de código de sombra predeterminada dentro de la definición de clase. Establezca los valores de sombra en 10px 10px 5px #888. Después, escriba border-radius e inserte el fragmento de código. Escriba 15px para establecer el tamaño del radio y presione ENTRAR.
Esquinas redondeadas con sombra
Nota:
En este momento, el atributo shadow se inserta con el prefijo correspondiente (moz, webkit, o) para admitir exploradores Mozilla y Webkit (Chrome, Safari, Konkeror).
Cree una clase div.images ul li img:hover debajo de la definición de clase div.images ul li img y coloque el cursor dentro de los corchetes .
CSS
div.images ul li img { ... } div.images ul li img:hover { }Escriba transform y presione la tecla TAB dos veces para insertar el fragmento de código de transformación. Después, escriba rotate(-15deg) para cambiar el valor de ángulo de rotación cuando se mantenga el puntero sobre las imágenes.
CSS
div.images ul li img { padding-top: 50px; padding-right: 15px; width: 150px; ... } div.images ul li img:hover { -moz-transform: rotate(-15deg); -ms-transform: rotate(-15deg); -o-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); transform: rotate(-15deg); }Presione F5 para ejecutar la solución y vaya a la página CSS3. Observe que las imágenes tienen esquinas redondeadas y sombras de cuadro. Mantenga el mouse sobre las imágenes y observe que giran.
Fragmento de código de transformación para girar una imagen
Nota:
Si usa Internet Explorer 10 y no puede ver las sombras, asegúrese de que el modo de documento está establecido en estándares de IE10. Presione F12 para abrir las herramientas de desarrollo de Internet Explorer y haga clic en Modo de documento para cambiar a los estándares de IE10.
Ejercicio 2: Novedades del Editor HTML
Visual Studio tiene un editor HTML mejorado. Algunas de las mejoras incluidas en esta versión son la sangría inteligente en documentos HTML, los fragmentos de código HTML5, la coincidencia de etiquetas de inicio y finalización de HTML, y la validación HTML. A lo largo de este ejercicio, verá cómo estos cambios mejoran la fluidez al trabajar en el marcado del sitio web.
Al igual que el editor CSS, también se ha mejorado el editor HTML. La mayoría de estas mejoras son pequeñas y facilitan la vida del desarrollador web. Algunas de estas mejoras son más fragmentos de código para HTML5, sangría inteligente o etiquetas de inicio y finalización coincidentes al editar y validar el DOCTYPE del documento HTML.
Tarea 1: Validación de DOCTYPE mejorada
El editor HTML ahora tiene la capacidad de comprobar el DOCTYPE de la página, aunque la definición podría estar en la página maestra. Según el DOCTYPE de la página, el editor HTML se validará con el conjunto correcto de reglas y filtrará la lista de IntelliSense teniendo en cuenta los elementos DOCTYPE.
En esta tarea, cambiará el DOCTYPE de una página para ver cómo cambia el comportamiento del editor HTML en consecuencia.
Si aún no lo ha abierto, inicie Visual Studio y abra la solución WhatsNewASPNET.sln ubicada en la carpeta Source\WhatsNewASPNET de este laboratorio.
Abra la página Site.Master.
Observe el esquema de destino para la barra de herramientas de validación. El comportamiento del editor HTML (Validación, IntelliSense, etc.) cambiará correctamente para ajustarse al tipo de documento seleccionado.
Uso de DOCTYPE en la barra de herramientas de edición de código fuente HTML
Cambie el esquema de destino a HTML 4.01.
Cambio de DOCTYPE en la barra de herramientas de edición de código fuente HTML
Coloque el cursor bajo el elemento body y empiece a escribir el nombre de un elemento HTML5 (por ejemplo, video). Observe que el elemento no está disponible en la lista de IntelliSense.
Elementos HTML5 no incluidos en la lista
Deshaga los cambios en la barra de herramientas Esquema de destino para validación y seleccione DOCTYPE: XHTML5 en la lista desplegable.
Restablecimiento de DOCTYPE en la barra de herramientas de edición de código fuente HTML
Coloque el cursor bajo el elemento body y empiece a escribir un elemento HTML5 otra vez (por ejemplo, video). Observe que los elementos HTML5 ahora están disponibles en la lista de IntelliSense.
Elementos HTML5 mostrados en la lista
Tarea 2: Actualización automática de etiquetas de inicio y finalización
En Visual Studio ahora se actualizan las etiquetas HTML de apertura o cierre del elemento que se edita para que coincidan entre sí. Esta nueva característica mejorará la productividad al editar etiquetas HTML.
En la página Default.aspx, agregue un elemento H3 con un título (por ejemplo, ¡Visual Studio 2012 Rocks!).
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> <br /> <asp:Image ImageUrl="~/images/Web11.JPG" runat="server" /> <h3>Visual Studio 2012 Rocks!!</h3> </asp:Content>Cambie la etiqueta H3 y escriba H2 o H1.
Observe que la etiqueta final se actualiza automáticamente. También puede modificar la etiqueta final para ver que la etiqueta de inicio se actualiza en consecuencia.
Actualización automática de la etiqueta final
Tarea 3: Nuevos fragmentos de código HTML5
Visual Studio ahora incluye varios fragmentos de código HTML5. En esta tarea, usará algunos de estos fragmentos de código.
Agregue una nueva carpeta denominada audio a la raíz de la carpeta del sitio web. Abra el Explorador de Windows y copie cualquier archivo de audio en la carpeta audio de la solución WhatsNewASPNET.sln.
En la página Default.aspx, coloque el cursor bajo Web11 Rocks!! Encabezado. Escriba audio y presione la tecla TAB.
El nuevo editor HTML incluye fragmentos de código para contenido HTML5. Recuerde usar la definición DOCTYPE adecuada para habilitar los fragmentos de código HTML5.
Inserción de fragmentos de código HTML5
Actualice el origen de audio para que apunte a un archivo de audio existente.
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> <br /> <asp:Image ImageUrl="~/images/Web11.JPG" runat="server" /> <h2>Visual Studio 2012 Rocks!!</h2> <audio controls="controls"> <source src="audio/Kalimba.mp3" /> </audio> </asp:Content>Nota:
Tendrá que agregar el archivo de audio a la solución.
Presione F5 para ejecutar el sitio y reproducir el audio.
Ejecución del control de audio
Nota:
También puede probar más fragmentos de código incluidos en Visual Studio, como video, figure, etc.
Ahora, intente insertar un control en alguna parte de la página. Por ejemplo, intente insertar un control GridView, pero en lugar de escribir <Gri, empiece a escribir <GV. Observe que la lista de IntelliSense muestra el control asp:GridView.
IntelliSense en el Editor HTML ahora proporciona búsqueda en mayúsculas y minúsculas, así como coincidencias parciales (se recuperan todos los elementos que contienen el término).
Inserción de un control GridView con listas de IntelliSense
Si escribe <grid, obtendrá todos los elementos que coinciden con el término, pero Visual Studio sugerirá el control gridview:
Inserción de un control GridView con listas de IntelliSense y coincidencia parcial
Tarea 4: Etiquetas inteligentes del Editor HTML
Otra mejora en el Editor HTML es la característica Etiquetas inteligentes. Las etiquetas inteligentes facilitan la realización de tareas de desarrollo comunes o repetitivas en cada control. Esta característica ya estaba disponible en el Diseñador HTML, pero no en el Editor HTML.
Abra Site.Master y busque el elemento asp:Menu. Coloque el cursor en la etiqueta de inicio y observe el glifo pequeño que se muestra en la parte inferior del elemento : haga clic en él para abrir el menú Tareas inteligentes. Observe que tiene acceso rápido a algunas tareas relacionadas con el control Menú.
Tareas inteligentes para el control Menú
Tarea 5: Sangría inteligente
Uno de los procedimientos recomendados en HTML es aplicar sangría a los elementos anidados para mantener la legibilidad del código. En Visual Studio 2012, observará que el editor aplica sangría automáticamente a los elementos mientras escribe el código.
Nota:
En la versión anterior de Visual Studio, la sangría inteligente estaba disponible en el editor XML, pero no en el editor HTML.
Asegúrese de que la configuración de sangría en el Editor HTML esté establecida en Sangría inteligente. Seleccione la opción de menú Herramientas | Opciones y, después, seleccione la página Editor de texto | HTML | Pestañas en el panel izquierdo de la pantalla. Seleccione la opción Sangría inteligente.
Valores del Editor HTML
En la página Default.aspx, quite todo el contenido debajo del elemento audio.
Coloque el cursor al final del elemento audio de apertura y presione ENTRAR.
Observe que la nueva posición del cursor tiene un nivel de sangría adicional.
Sangría inteligente en el Editor HTML
Restaure la etiqueta audio con el contenido que ha quitado, o bien cierre Default.aspx sin guardar los cambios.
Tarea 6: Extracción al control de usuario
Las herramientas de refactorización incluidas en Visual Studio, como la extracción de una parte del código en una función, son características excelentes que facilitan la mejora y la refactorización del código existente. El homólogo de las páginas ASP.NET sería la extracción de código HTML en un control de usuario. Hacerlo manualmente implicaría varios pasos, como crear un control de usuario, mover la sección de código al control de usuario, registrar un prefijo de etiqueta para el control de usuario y, por último, crear instancias del control de usuario en las páginas. Ahora, la nueva herramienta Extraer al control de usuario realiza automáticamente todos esos pasos.
En esta tarea, usará la nueva operación contextual Extraer al control de usuario para generar un nuevo control de usuario a partir del código seleccionado.
En la página Default.aspx, seleccione los elementos H2 y audio.
Haga clic con el botón derecho y seleccione Extraer al control de usuario.
Opción de menú Extraer al control de usuario
Escriba un nombre para el nuevo control de usuario. Por ejemplo, Jukebox.ascx y, después, haga clic en Aceptar.
Guardado del control de usuario extraído
Observe que el código seleccionado se ha extraído en un control de usuario y la ubicación original del código seleccionado se ha reemplazado por una instancia del nuevo control de usuario.
Página actualizada automáticamente para usar el nuevo control de usuario
Presione F5 para ejecutar la página y comprobar que el control funciona.
Ejercicio 3: Novedades del Editor de JavaScript
Escribir o editar código de JavaScript no es una tarea fácil, especialmente cuando la aplicación empieza a crecer de tamaño y se encuentra con archivos largos y cientos de funciones. Normalmente, los desarrolladores de scripts tienen que realizar trabajo adicional para mantener la legibilidad del código y navegar por los archivos. Con la inclusión de bibliotecas de JavaScript como jQuery, la navegación por scripts se ha convertido en un desafío debido a la longitud del código.
Visual Studio ha renovado el editor de JavaScript con la promesa de hacer que el modo de código sea accesible y esté organizado. Muchas características de Visual Studio que ya existían en los editores de C# o VB ahora se implementan en el editor de JavaScript: Ir a definición, sangría automática, documentación y validación al escribir. Con la lista de IntelliSense renovada, tendrá el catálogo de funciones de JavaScript a su alcance.
En este ejercicio, aprenderá algunas de las nuevas características y mejoras del editor de JavaScript. Examinará los archivos de ejemplo y verá cada una de las nuevas características que harán que la programación de JavaScript sea más eficaz en Visual Studio 2012.
Tarea 1: Nuevas características del editor de JavaScript
En esta tarea se presentarán algunas de las nuevas características del editor de JavaScript, que se centran en organizar el código y aportar una mejor experiencia del usuario.
Si aún no lo ha abierto, inicie Visual Studio y abra la solución WhatsNewASPNET.sln ubicada en la carpeta Source\WhatsNewASPNET de este laboratorio.
Presione F5 para ejecutar la aplicación y, después, haga clic en el vínculo JavaScript de la barra de navegación. Actualice la página varias veces y compruebe cómo se incrementa el contador.
Contador de páginas
Cierre el explorador y vuelva a Visual Studio.
Abra la página JavaScript.aspx y busque el bloque <script> (que se muestra a continuación).
En el código siguiente se usa el almacenamiento local HTML5 para almacenar una variable pageLoadCount que almacena el número de veces que el usuario actual ha visitado la página. El almacenamiento local es una base de datos de clave-valor del lado cliente introducida con el estándar HTML5. Los datos se guardan en el equipo local, dentro del explorador del usuario.
<script> addCount(1); document.getElementById('count').innerHTML = getCount(); function getCount() { var storage = window.localStorage; if (!storage.pageLoadCount) storage.pageLoadCount = 0; return storage.pageLoadCount; } function addCount(value) { window.localStorage.pageLoadCount = parseInt(getCount(), 10) + value; } ... </script>Nota:
Asegúrese de que DOCTYPE está establecido en XHTML5 antes de continuar con los pasos siguientes.
Edite el código y observe que IntelliSense para JavaScript incluye características de HTML5, como el almacenamiento local y sus métodos internos.
Características de JavaScript HTML5 en JavaScript
Haga clic en cualquier corchete de apertura ({) en el código de scripting y observe que los corchetes se resaltan.
Los corchetes están resaltados
Quite la marca de comentario de la función testAutoAlign() (seleccione las tres líneas y presione CTRL + K; CTRL + U) y busque el cursor dentro del código de la función. Presione Entrar para anexar una segunda línea. Observe que el código ahora está alineado y tiene sangría automática.
El código de JavaScript se alinea automáticamente
Tarea 2: Validación de JavaScript
En esta tarea, descubrirá la nueva validación de JavaScript para el estándar ECMAScript5. Esta característica le ayudará a escribir código JavaScript compatible, a la vez que impide problemas de scripting antes de la implementación del sitio.
Nota:
En Visual Studio 2010 se implementó el cumplimiento de ECMAStript3, mientras que en Visual Studio 2012 se proporciona compatibilidad con ECMAScript5.
Abra ECMA5script5.js ubicado en la carpeta del proyecto Scripts\custom. Ahora probará la validación del estándar ECMAScript5.
"use strict"; if (true) { function StrictModeError() { } }Puede consultar la dirección " use strict " en la primera línea del archivo, que habilita el modo strict de ECMAScript5. Este modo consta de un subconjunto del lenguaje que aclara las ambigüedades de la edición anterior y agrega algunas características nuevas, como captadores y establecedores, compatibilidad de biblioteca con JSON y reflexión más completa sobre las propiedades del objeto.
Abra la Lista de errores si aún no está abierta (menú Ver | Lista de errores). Observe que la declaración de función está subrayada. Esto se debe a que en las funciones estándar de ECMA5 no se puede anidar dentro de estructuras de lenguaje. En la lista de errores siguiente verá los detalles de la advertencia.
Mensaje de error de validación de JavaScript
Quite la marca de comentario de la dirección "use strict" y observe que los errores desaparecen, pero las advertencias permanecen.
En la última línea del archivo, escriba cualquier cadena como "test" (incluya las comillas para indicar que es una cadena). Escriba un punto junto a la cadena para mostrar la lista de IntelliSense y seleccione la opción trim.
En el estándar ECMAScript5, los valores de cadena y las variables también tienen métodos de cadena definidos, como trim, uppercase, search y replace.
Lista de IntelliSense en JavaScript
Tarea 3: Documentación XML para JavaScript
En esta tarea, explorará las características de Visual Studio para la documentación XML en JavaScript. Verá que la lista de IntelliSense de JavaScript ahora muestra la documentación XML de cada función. Además, descubrirá la característica de navegación en JavaScript.
Abra el archivo XMLDoc.js ubicado en la carpeta del proyecto Scripts/custom. Este archivo contiene documentación XML sobre cada una de las funciones de JavaScript.
Documentación XML de JavaScript integrada en IntelliSense
Debajo de la función add en el archivo XMLDoc.js, cree una función con el nombre test.
En la función test, llame a la función multiply que recibe dos parámetros. Observe que en el cuadro de información sobre herramientas se muestra la documentación de la función multiply.
function test() { multiply( }
Documentación XML para funciones de JavaScript
Complete la instrucción de llamada de función y escriba un punto para abrir la lista de IntelliSense por el valor devuelto. Observe que Visual Studio detecta el valor devuelto en la documentación y lo trata como un número.
Documentación XML para tipos de valor devuelto
Ahora, inserte una llamada a la función add. Observe que el editor de JavaScript ahora admite sobrecargas de función. Al escribir un nombre de función, podrá seleccionar cualquiera de las sobrecargas disponibles especificadas en la documentación.
Documentación XML para las sobrecargas
Abra el archivo GotoDefinition.js y busque la llamada de función $().html(). Busque el cursor en html.
Presione F12 y vaya a la definición. Observe que ahora puede acceder al código JavaScript y examinarlo sin usar la herramienta Buscar.
Busque el cursor en la instrucción jQuery anterior al bloque de firma en la parte inferior del archivo de código. Presione F12. Navegará al archivo de biblioteca jQuery. Observe que también puede navegar por los archivos jQuery mediante F12.
Navegación a definiciones de jQuery
Nota:
Asegúrese de que GotoDefinition.js no tiene errores de sintaxis antes de guardar el archivo.
Ejercicio 4: Unión y minimización
¿Cuántas veces en los sitios web se incluye más de un archivo JavaScript o CSS? Se trata de un escenario muy común en el que la minificación y la minificación pueden ayudar a reducir el tamaño del archivo y hacer que el sitio funcione más rápidamente. La nueva característica de unión en ASP.NET 4.5 empaqueta un conjunto de archivos JS o CSS en un solo elemento y reduce su tamaño al minificar el contenido ( es decir, quitar espacios en blanco no necesarios, quitar comentarios, reducir identificadores).
La unión y la minificación en ASP.NET 4.5 se realizan en tiempo de ejecución, de modo que el proceso pueda identificar al agente de usuario (por ejemplo, IE, Mozilla, etc.) y, por tanto, mejorar la compresión al seleccionar como destino el explorador del usuario (por ejemplo, quitar elementos específicos de Mozilla cuando la solicitud procede de IE).
En este ejercicio, aprenderá a habilitar y usar los diferentes tipos de unión y minificación en ASP.NET 4.5.
Tarea 1: Instalación del paquete de unión y minificación desde NuGet
Si aún no lo ha abierto, inicie Visual Studio y abra la solución WhatsNewASPNET.sln ubicada en la carpeta Source\WhatsNewASPNET de este laboratorio.
Abra la consola del Administrador de paquetes NuGet. Para ello, use el menú Ver | Otras ventanas | Consola Administrador de paquetes.
Apertura de la consola del Administrador de paquetes
En la consola de Administrador de paquetes, escriba Install-Package Microsoft.Web.Optimization y presione ENTRAR.
Tarea 2: Agrupaciones predeterminadas
La manera más sencilla de usar la unión y la minificación consiste en habilitar las agrupaciones predeterminadas. Este método usa convenciones para permitirle hacer referencia a la versión agrupada y minimizada para los archivos JS y CSS en una carpeta.
En esta tarea, aprenderá a habilitar y hacer referencia a los archivos JS y CSS agrupados y minificados, y ver la salida resultante.
Si aún no lo ha abierto, inicie Visual Studio y abra la solución WhatsNewASPNET.sln ubicada en la carpeta Source\WhatsNewASPNET de este laboratorio.
En el Explorador de soluciones, expanda las carpetas Styles, Scripts\custom y Scripts\bundle.
Observe que la aplicación usa más de un archivo CSS y JS.
Varias hojas de estilos y archivos JavaScript en la aplicación
Abra el archivo Global.asax.cs.
Observe que el nuevo espacio de nombres Microsoft.Web.Optimization tiene comentario al principio del archivo. Quite la marca de comentario de la directiva using para incluir las características de unión y minificación.
using System; using Microsoft.Web.Optimization;Busque el método Application_Start.
En este método, quite la marca de comentario de la llamada a EnableDefaultBundles como se muestra en el fragmento de código siguiente. Esto le permite hacer referencia a una colección agrupada de archivos CSS en una carpeta con la ruta de acceso a esa carpeta, además del sufijo "CSS" o "JS".
void Application_Start(object sender, EventArgs e) { // Default behavior // Bundles all .js files in folders such as "scripts" if URL pointed to it: http://localhost:54716/scripts/custom/js BundleTable.Bundles.EnableDefaultBundles(); ... }Abra el archivo Optimization.aspx y busque el control de contenido de HeadContent.
Observe que los archivos CSS y JS tienen una sola etiqueta a la que se hace referencia.
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server"> <link href="Styles/CSS" rel="stylesheet" type="text/css" /> <script src="Scripts/custom/JS"></script> </asp:Content>Nota:
Este código es para fines de demostración. Idealmente, tendría que hacer referencia a las agrupaciones en el archivo Site.Master. En este código de ejemplo, verá que también se hace referencia a algunos de los archivos agrupados por el archivo Site.Master, lo que hace que esta última referencia sea redundante.
Observe que los vínculos usan las convenciones de unión en el atributo href para obtener todos los archivos CSS o JS de la carpeta Styles y Scripts\custom respectivamente.
Puede usar la ruta de acceso Scripts/custom/JS como se muestra a continuación para agrupar y minificar todos los archivos JS dentro de una carpeta Scripts/custom. Es el comportamiento predeterminado de las agrupaciones predeterminadas.
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <ul> <li> <h2><a href="Styles/CSS">CSS Bundle</a></h2> </li> <li> <h2><a href="Scripts/custom/JS">JS Bundle</a></h2> </li>Abra el archivo Styles\Site.css.
Observe que el archivo CSS original contiene código con sangría, espacios en blanco y comentarios que amplían el archivo. (El archivo JavaScript también contiene espacios en blanco y comentarios).
Uno de los archivos CSS originales de la carpeta Scripts
Presione F5 para ejecutar la aplicación y vaya a la página Optimización.
Haga clic en el vínculo Paquete CSS para descargar y abrir el archivo.
Extraiga el archivo agrupado minificado. Observará que se han quitado todos los espacios en blanco, los comentarios y los caracteres de sangría, lo que genera un archivo más pequeño.
Archivos CSS agrupados
Ahora haga clic en el vínculo Paquete de JS para abrir el archivo agrupado de JavaScript. Puede ignorar de forma segura la advertencia del explorador. Observe que los archivos JavaScript de la carpeta custom también se agrupan y minimizan.
Archivos JavaScript agrupados
Habilitar la compresión para archivos CSS o JS era mucho más complicado en la versión anterior de ASP.NET. Ahora, como ha visto, solo tiene que agregar una línea en el archivo Global.asax para habilitar la unión y, después, hacer referencia a los archivos agrupados desde el sitio.
Tarea 3: Agrupaciones estáticas
El enfoque de agrupación estática permite personalizar el conjunto de archivos para el método de unión, referencia y minificación que se va a usar.
En esta tarea, configurará una agrupación estática para definir un conjunto específico de archivos para agrupar y minificar.
Cierre el explorador.
Abra el archivo Global.asax.cs y busque el método Application_Start.
Quite la marca de comentario del código de agrupación estática como se muestra en el código siguiente.
Va a definir un paquete estático al que se hará referencia con la ruta de acceso virtual "~/StaticBundle" y usará JsMinify para la minificación de todos los archivos especificados con el método AddFile. Por último, va a agregar la agrupación estática a BundleTable y la habilitará.
Observe que los archivos no se encuentran en el mismo lugar; es otra ventaja con respecto a la unión predeterminada.
void Application_Start(object sender, EventArgs e) { // Default behavior // Bundles all .js files in folders such as "scripts" if URL pointed to it: http://localhost:54716/scripts/custom/js BundleTable.Bundles.EnableDefaultBundles(); // Static bundle. // Access on url http://localhosthost:54716/StaticBundle Bundle b = new Bundle("~/StaticBundle", typeof(JsMinify)); b.AddFile("~/scripts/custom/ECMAScript5.js"); b.AddFile("~/scripts/custom/GoToDefinition.js"); b.AddFile("~/scripts/bundle/JScript1.js"); b.AddFile("~/scripts/bundle/JScript2.js"); BundleTable.Bundles.Add(b); // Dynamic bundle // Bundles all .coffee files in folders such as "script" when "coffee" is appended to it: http://localhost:54716/scripts/coffee // DynamicFolderBundle fb = new DynamicFolderBundle("coffee", typeof(CoffeeMinify), "*.coffee"); // BundleTable.Bundles.Add(fb); }Abra el archivo Optimization.aspx.
Observe que el vínculo a la agrupación estática de JS usa la ruta de acceso que ha declarado al configurar la agrupación estática en el archivo Global.asax.cs: /StaticBundle.
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <ul> <li> <h2><a href="Styles/CSS">CSS Bundle</a></h2> </li> <li> <h2><a href="Scripts/custom/JS">JS Bundle</a></h2> </li> <li> <h2><a href="StaticBundle">Static JS Bundle</a></h2> </li> <li> <h2><a href="Scripts/bundle/Coffee">Dynamic JS Bundle</a></h2> </li> </ul> </asp:Content>Presione F5 para ejecutar la aplicación y, después, vaya a la página Optimización.
Haga clic en el vínculo Agrupación estática de JS para abrir el archivo.
Observe que el archivo JavaScript agrupado minificado es la salida de todos los archivos de JavaScript configurados en el archivo de agrupación estática en la ruta de acceso "/StaticBundle".
Agrupación de archivos JavaScript estáticos
Cierre el explorador y vuelva a Visual Studio.
Tarea 4: Agrupaciones de carpetas dinámicas
En esta tarea, aprenderá a configurar agrupaciones de carpetas dinámicas. La eficacia de la agrupación dinámica es que puede incluir JavaScript estático, así como otros archivos en lenguajes que se compilan en JavaScript y, por tanto, exigir algún procesamiento antes de que se ejecute la unión.
En este ejemplo, aprenderá a usar la clase DynamicFolderBundle para crear una agrupación dinámica para los archivos escritos en CofeeScript. CofeeScript es un lenguaje de programación que se compila en JavaScript y proporciona una sintaxis más sencilla para escribir código de JavaScript, lo que mejora la brevedad y legibilidad de JavaScript.
Abra el archivo Global.asax.cs y busque el método Application_Start.
Quite la marca de comentario del código de agrupación dinámica como se muestra en el código siguiente.
Va a definir una agrupación de carpetas dinámicas que usará el procesador de minificación personalizado CoffeeMinify que solo se aplicará a los archivos con la extensión ".coffee" (archivos CoffeeScript). Tenga en cuenta que puede usar un patrón de búsqueda para seleccionar los archivos que se van a agrupar dentro de una carpeta, como "*.coffee".
void Application_Start(object sender, EventArgs e) { // Default behavior // Bundles all .js files in folders such as "scripts" if URL pointed to it: http://localhost:54716/scripts/custom/js BundleTable.Bundles.EnableDefaultBundles(); // Static bundle. // Access on url http://localhosthost:54716/StaticBundle ... // Dynamic bundle // Bundles all .coffee files in folders such as "script" when "coffee" is appended to it: // http://localhost:54716/scripts/coffee DynamicFolderBundle fb = new DynamicFolderBundle("coffee", typeof(CoffeeMinify), "*.coffee"); BundleTable.Bundles.Add(fb); }Abra la consola del Administrador de paquetes NuGet. Para ello, use el menú Ver | Otras ventanas | Consola Administrador de paquetes.
En la consola de Administrador de paquetes, escriba Install-Package CoffeeSharp y presione ENTRAR.
Haga clic en el botón Mostrar todos los archivos en la ventana Explorador de soluciones
Mostrar todos los archivos
Haga clic con el botón derecho en el archivo CoffeeMinify.cs en el Explorador de soluciones y seleccione Incluir en el proyecto
Inclusión del archivo CoffeeMinify.cs en el proyecto
Abra el archivo CoffeeMinify.cs.
Esta clase hereda de JsMinify para minificar la salida de JavaScript resultante de la compilación del código de CoffeeScript. Llama primero al compilador de CoffeeScript para generar el código JavaScript y, después, lo envía al método JsMinify.Process para minificar el código resultante.
public class CoffeeMinify : JsMinify { public override void Process(BundleResponse bundle) { var compiler = new CoffeeScriptEngine(); bundle.Content = compiler.Compile(bundle.Content); base.Process(bundle); } }Abra los archivos Script1.coffee y Script2.coffee de la carpeta Scripts/bundle.
Estos archivos incluirán el código CoffeScript que se va a compilar mientras se realiza la unión con la clase CoffeeMinify.
Con fines de simplicidad, los archivos CoffeeScript proporcionados solo incluyen código de ejemplo de CoffeeScript. El proceso JsMinify excluye los comentarios.
Archivos de CoffeeScript
Nota:
CofeeScript proporciona una sintaxis más sencilla para escribir código JavaScript, mejorar la brevedad y legibilidad de JavaScript, así como agregar otras características, como la comprensión de matrices y la coincidencia de patrones.
Abra el archivo Optimization.aspx y busque los vínculos de agrupación.
Observe que el vínculo a Agrupación dinámica de JS hace referencia a la carpeta Scripts/bundle mediante el sufijo /Coffee que ha configurado para la agrupación de carpetas dinámica.
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> <ul> <li> <h2><a href="Styles/CSS">CSS Bundle</a></h2> </li> <li> <h2><a href="Scripts/custom/JS">JS Bundle</a></h2> </li> <li> <h2><a href="StaticBundle">Static JS Bundle</a></h2> </li> <li> <h2><a href="Scripts/bundle/Coffee">Dynamic JS Bundle</a></h2> </li> </ul> </asp:Content>Presione F5 para ejecutar la aplicación y, después, vaya a la página Optimización.
Haga clic en el vínculo Agrupación dinámica de JS para abrir el archivo generado.
Observe que el contenido que se ha incluido en esta agrupación solo contiene archivos .coffee. También puede ver que el código de CoffeeScript se ha compilado en JavaScript y que se han quitado las líneas comentadas.
Agrupación dinámica de archivos JS
Nota:
Además, puede implementar esta aplicación en sitios web de Windows Azure si sigue Apéndice B: Publicación de una aplicación ASP.NET MVC 4 mediante Web Deploy.
Resumen
Este laboratorio le ayuda a comprender las novedades de ASP.NET y desarrollo web en Visual Studio 2012 y cómo aprovechar la variedad de mejoras de Visual Studio 2012.
Al completar este laboratorio práctico, ha aprendido a usar las nuevas características y mejoras en los editores de Visual Studio 2012 para CSS, JavaScript y HTML. Además, ha aprendido cómo Visual Studio 2012 implementa la unión y la minificación integradas.
Apéndice A: Instalación de Visual Studio Express 2012 para Web
Puede instalar Microsoft Visual Studio Express 2012 para Web u otra versión "Express" mediante el Instalador de plataforma web de Microsoft . En las instrucciones siguientes se le guía por los pasos necesarios para instalar Visual Studio Express 2012 para Web mediante Instalador de plataforma web de Microsoft.
Vaya a [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169). Como alternativa, si ya ha instalado el Instalador de plataforma web, puede abrirlo y buscar el producto "Visual Studio Express 2012 para Web con el SDK de Windows Azure".
Haga clic en Instalar ahora. Si no tiene Instalador de plataforma web se le redirigirá para descargarlo e instalarlo primero.
Una vez que abra Instalador de plataforma web, haga clic en Instalar para iniciar la instalación.
Instalación de Visual Studio Express
Lea todas las licencias y términos de los productos, y haga clic en Acepto para continuar.
Aceptación de los términos de licencia
Espere hasta que finalice el proceso de descarga e instalación.
Progreso de la instalación
Cuando finalice la instalación, haga clic en Finalizar.
Instalación completada
Haga clic en Salir para cerrar el Instalador de plataforma web.
A fin de abrir Visual Studio Express para Web, vaya a la pantalla Inicio, empiece a escribir "VS Express" y, después, haga clic en el icono de VS Express para Web.
Icono de VS Express para Web
Apéndice B: Publicación de una aplicación ASP.NET MVC 4 mediante Web Deploy
En este apéndice se muestra cómo crear un sitio web desde el portal de administración de Windows Azure y publicar la aplicación que ha obtenido al seguir el laboratorio, y aprovechar la característica de publicación Web Deploy proporcionada por Windows Azure.
Tarea 1: Creación de un sitio web desde el portal de Windows Azure
Vaya al Portal de administración de Windows Azure e inicie sesión con las credenciales de Microsoft asociadas a la suscripción.
Nota:
Con Windows Azure puede hospedar 10 sitios web de ASP.NET de forma gratuita y, después, escalar a medida que crezca el tráfico. Puede registrarse aquí.
Inicio de sesión en el Portal de administración de Windows Azure
Haga clic en Nuevo en la barra de comandos.
Creación de un sitio web
Haga clic en Proceso | Sitio web. Después, seleccione la opción Creación rápida. Proporcione una dirección URL disponible para el nuevo sitio web y haga clic en Crear sitio web.
Nota:
Un sitio web de Windows Azure es el host para una aplicación web que se ejecuta en la nube que puede controlar y administrar. La opción Creación rápida permite implementar una aplicación web completada en el sitio web de Windows Azure desde fuera del portal. No incluye pasos para configurar una base de datos.
Creación de un sitio web mediante Creación rápida
Espere hasta que se cree el Sitio web.
Una vez que se cree el sitio web, haga clic en el vínculo bajo la columna Dirección URL. Compruebe que el nuevo sitio web funciona.
Navegación al nuevo sitio web
Sitio web en ejecución
Vuelva al portal y haga clic en el nombre del sitio web en la columna Nombre para mostrar las páginas de administración.
Apertura de las páginas de administración del sitio web
En la página Panel, en la sección de vista rápida, haga clic en el vínculo Descargar perfil de publicación.
Nota:
El perfil de publicación contiene toda la información necesaria para publicar una aplicación web en un sitio web de Windows Azure para cada método de publicación habilitado. El perfil de publicación contiene las direcciones URL, las credenciales de usuario y las cadenas de base de datos necesarias para conectarse y autenticarse en cada uno de los puntos de conexión para los que está habilitado un método de publicación. Microsoft WebMatrix 2, Microsoft Visual Studio Express para Web y Microsoft Visual Studio 2012 admiten la lectura de perfiles de publicación para automatizar la configuración de estos programas para publicar aplicaciones web en sitios web de Windows Azure.
Descarga del perfil de publicación del sitio web
Descargue el archivo de perfil de publicación en una ubicación conocida. Más adelante en este ejercicio verá cómo usar este archivo para publicar una aplicación web en un sitio web de Windows Azure desde Visual Studio.
Guardado del archivo de perfil de publicación
Tarea 2: Configuración del servidor de bases de datos
Si la aplicación usa bases de datos de SQL Server, deberá crear un servidor de SQL Database. Si quiere implementar una aplicación sencilla que no use SQL Server, puede omitir esta tarea.
Necesitará un servidor de SQL Database para almacenar la base de datos de la aplicación. Puede ver los servidores de SQL Database de la suscripción en el Portal de administración de Windows Azure en Bases de datos SQL | Servidores | Panel del servidor. Si no tiene un servidor creado, puede crear uno mediante el botón Agregar de la barra de comandos. Anote el nombre y la dirección URL del servidor, el nombre de inicio de sesión de administrador y la contraseña, ya que los usará en las tareas siguientes. Aún no cree la base de datos, ya que se creará en una fase posterior.
Panel del servidor SQL Database
En la siguiente tarea probará la conexión de base de datos desde Visual Studio, por ese motivo debe incluir la dirección IP local en la lista de Direcciones IP permitidas. Para ello, haga clic en Configurar, seleccione la dirección IP en Dirección IP del cliente actual y péguela en los cuadros de texto Dirección IP de inicio y Dirección IP final. Escriba un nombre para la regla y haga clic en el botón
.
Adición de la dirección IP del cliente
Una vez que se agregue la Dirección IP del cliente a la lista de direcciones IP permitidas, haga clic en Guardar para confirmar los cambios.
Confirmación de los cambios
Tarea 3: Publicación de una aplicación ASP.NET MVC 4 mediante Web Deploy
Vuelva a la solución ASP.NET MVC 4. En el Explorador de soluciones, haga clic con el botón derecho en el proyecto de sitio web y seleccione Publicar.
Publicación del sitio web
Importe el perfil de publicación que ha guardado en la primera tarea.
Importación del perfil de publicación
Haga clic en Validar conexión. Una vez que se complete la validación, haga clic en Siguiente.
Nota:
La validación se completa una vez que aparezca una marca de verificación verde junto al botón Validar conexión.
Validación de la conexión
En la página Configuración, en la sección Bases de datos, haga clic en el botón situado junto al cuadro de texto de la conexión de base de datos (es decir, DefaultConnection).
Configuración de Web Deploy
Configure la conexión de base de datos de la siguiente manera:
En Nombre del servidor, escriba la dirección URL del servidor de SQL Database con el prefijo tcp:.
En Nombre de usuario escriba el nombre de inicio de sesión del administrador del servidor.
En Contraseña escriba la contraseña de inicio de sesión del administrador del servidor.
Escriba un nuevo nombre de base de datos, por ejemplo: MVC4SampleDB.
Configuración de la cadena de conexión de destino
A continuación, haga clic en Aceptar. Cuando se le pida que cree la base de datos, haga clic en Sí.
Creación de la base de datos
La cadena de conexión que usará para conectarse a SQL Database en Windows Azure se muestra en el cuadro de texto Conexión predeterminada. A continuación, haga clic en Siguiente.
Cadena de conexión que apunta a SQL Database
En la página Vista previa, haga clic en Publicar.
Publicación de la aplicación web
Cuando finalice el proceso de publicación, el explorador predeterminado abrirá el sitio web publicado.
Aplicación publicada en Windows Azure
Comentarios
Próximamente: A lo largo de 2024 iremos eliminando gradualmente GitHub Issues como mecanismo de comentarios sobre el contenido y lo sustituiremos por un nuevo sistema de comentarios. Para más información, vea: https://aka.ms/ContentUserFeedback.
Enviar y ver comentarios de