Desarrollo web

Visual Studio 2010 SP1 para desarrolladores web

Scott Hanselman

Visual Studio 2010 SP1 se publicó en marzo. Este Service Pack resuelve problemas detectados por los clientes en comentarios de los socios y pruebas internas. Junto con Visual Studio 2010 SP1 apareció una gran cantidad de componentes nuevos para los desarrolladores web. Este artículo explora las mejoras para el desarrollo web en Visual Studio 2010 SP1. La mayoría de las mejoras se realizaron para integrar Visual Studio SP1 con las nuevas ofertas de la plataforma web de Microsoft, como IIS Express 7.5, SQL Server Compact Edition 4.0 (en adelante SQL Server CE), la nueva sintaxis Razor y el Instalador de plataforma web (Web PI). Otras mejoras incluyen compatibilidad con las dependencias implementables en la carpeta bin (como ASP.NET MVC 3), así como también compatibilidad con HTML5 y CSS3 dentro del propio Visual Studio 2010 SP1.

Este artículo supone que tiene instalado Visual Studio 2010 SP1. Puede descargarlo como instalador independiente o mediante Web PI. Para descubrir dónde encontrarlo visite bit.ly/hnU6mm.

Web PI es una herramienta gratuita que facilita la obtención de los últimos componentes de la plataforma web de Microsoft. Podrá encontrar más detalles en bit.ly/a6dLu.

Se destacan nuevas características en Visual Studio 2010 SP1

IIS Express 7.5, SQL Server CE, Visual Studio Tools para SQL Server CE y ASP.NET MVC 3 con Razor son componentes separados que se instalan después de Visual Studio 2010 SP1. De hecho, Visual Studio 2010 SP1 es compatible en forma latente con estas características hasta el momento de instalarlos en el equipo.

Existen diversas maneras de descargar e instalar los componentes. Hay algunas formas difíciles y existe la forma fácil de hacerlo. Se puede buscar y descargar cada componente independiente por si solo. Esto probablemente sea adecuado para un empresa o una implementación controlada de Visual Studio 2010 SP1. También se puede usar Web PI para encontrar, descargar e instalar cada paquete en forma separada, lo que es útil cuando sólo se necesitan determinadas características. Las instalaciones individuales se abordarán más adelante. Sin embargo, la forma más fácil es usar un “paquete” con todas estas características dentro de Web PI. Nos tomamos la libertad de crear esta dirección URL corta que inicia Web PI y selecciona automáticamente las opciones adecuadas para que usted pueda obtener todo a la vez: hnsl.mn/VS2010SP1Bundle.

Web PI toma decisiones inteligentes en función de lo que ya está instalado en el equipo. Si literalmente no hay nada, ninguna herramienta de desarrollo, el vínculo instalará automáticamente Visual Studio Web Developer Express SP1 y todas las nuevas características. Pero si ya está instalada alguna versión de Visual Studio o incluso si ya está Visual Studio 2010 SP1 más alguna de las herramientas, Web PI obtendrá automáticamente solamente lo mínimo para quedar al día. Este es el vínculo para “obtenerlo todo”.

Asegúrese de que cerró todas las instancias de Visual Studio (recuerde revisar en el Administrador de tareas que no aparezca devenv.exe) antes de comenzar la instalación.

 Puede que tenga que abrir un proyecto que utilice algún componente nuevo que usted no tiene. Visual Studio 2010 SP1 detectará el componente faltante si abre un proyecto web existente que utilice alguna de estas nuevas características y utilizará Web PI para instalarlas.

Integración de Web PI

En esta sección explicaremos cómo Visual Studio 2010 SP1 puede detectar automáticamente los componentes web faltantes necesarios para un proyecto web, y también presentaremos la barra de herramientas de Web PI.

Cuadro de diálogo de componente ausente Este cuadro de diálogo nuevo se introdujo en este Service Pack. Aparece cuando se abre un proyecto web existente que utiliza IIS 7.5 Express, SQL Server CE o la sintaxis Razor de ASP.NET MVC, y alguno de estos componentes no está instalado en el equipo. Permite descargar e instalar el componente que falta mediante Web PI.

En la Figura 1 por ejemplo, se puede observar la información que entrega el cuadro de diálogo en un sistema sin SQL Server CE cuando se abre un sitio web que usa una base de datos de SQL Server CE.

Figura 1 Advertencia acerca de un componente ausente y la propuesta de instalarlo

En este punto, si hace clic en Sí, Visual Studio 2010 SP1 intentará detectar si Web PI está instalado en el equipo. Si no lo está, abrirá la página de descarga en una ventana del explorador para descargar Web PI, como mínimo.

Si Web PI ya está instalado, lo iniciará y seleccionará el componente faltante. Simplemente descargará lo que hace falta. No se preocupe, es inteligente. No descargará Visual Studio 2010 SP1, porque que éste ya está instalado.

En la Figura 2 se explica lo que pasa después de hacer clic en Sí o en No en el cuadro de diálogo del componente ausente (las figuras naranjas indican dónde debe actuar el usuario; las figuras azules indican los pasos que toma Visual Studio 2010 SP1).

Figura 2 Pasos que se toman después del cuadro de diálogo de componente ausente

La barra de herramientas de Web PI Si desea descargar cualquier otro componente con Web PI, también se agrega una nueva barra de herramientas con un botón “Instalar componentes web” en Visual Studio.

Cuando hace clic en el botón, se inicia Web PI, y si no está instalado, lo lleva a la página de descarga. Puede seleccionar Ver | Barras de herramientas | Instalador de plataforma web para mostrar la barra de herramientas cuando no se muestre desde un principio. La opción “Instalar componentes web” también está disponible en el menú Herramientas.

Compatibilidad con IIS Express 7.5

Ahora que sabe cómo obtener e instalar los diferentes componentes, exploremos la característica IIS Express 7.5 en Visual Studio.

IIS Express 7.5 es una versión ligera de IIS optimizada para los desarrolladores. Podrá encontrar más información en bit.ly/cOfrt4.

IIS Express 7.5 se desarrolla a partir de la misma base de código que IIS 7.5, de modo que proporciona a los desarrolladores web las características de IIS (tales como SSL, URL Rewrite y los tipos MIME) en el equipo del desarrollador, en forma similar al servidor web con el producto completo.

IIS Express 7.5 se puede descargar e instalar mediante Web PI (bit.ly/dfikKe) o el instalador independiente (bit.ly/g5RMgc).

Tal vez tenga un sitio web o un proyecto existente que utilice Visual Web Development Server (el servidor web diminuto conocido anteriormente como Cassini). Puede hacer clic con el botón secundario en el proyecto en el Explorador de soluciones y convertirlo para que use IIS Express 7.5 (consulte la Figura 3).

Figura 3 Conversión de Visual Web Development Server a IIS Express 7.5

Visual Studio 2010 SP1 pide la confirmación y luego muestra que el proyecto web se configuró correctamente para usar IIS Express 7.5.

Pero puede resultar tedioso tener que configurar una y otra vez los diferentes proyectos para que usen IIS Express 7.5. Si lo desea, puede establecer IIS Express 7.5 como el servidor web predeterminado para todos sus proyectos en el cuadro de diálogo de Herramientas | Opciones, en el menú Proyecto y soluciones | Proyectos web. Compruebe la opción “Usar IIS Express para nuevos sitios web y proyectos basados en archivos” (consulte la Figura 4).

Figura 4 Configuración de IIS Express 7.5 como el servidor web predeterminado

Por supuesto, puede elegir cada proyecto, e incluso volver a convertir a Visual Studio Web Development Server desde IIS Express 7.5. Basta con que haga clic con el botón secundario en un proyecto en el Explorador de soluciones y conviértalo para que use Visual Studio Web Development Server.

IIS Express 7.5 y los usuarios sin privilegios de administrador

Para crear o abrir un sitio web IIS o un proyecto web existente tiene que ejecutar Visual Studio 2010 SP1 como un usuario elevado (modo de administración). Este es un problema para muchos usuarios que no tienen estos privilegios. Puede que el departamento de TI haya impuesto restricciones o quizás simplemente prefiera evitar ejecutar programas como administrador sin una buena razón.

Afortunadamente se puede usar IIS Express 7.5 como el servidor web para los proyectos web sin que Visual Studio 2010 SP1 se tenga que ejecutar con una cuenta de administrador. Una vez que está instalado cualquier usuario sin privilegios de administrador puede trabajar con Visual Studio 2010 SP1 e IIS Express 7.5.

Propiedades de IIS Express 7.5

IIS Express 7.5 tiene una gran cantidad de propiedades personalizadas que se pueden configurar desde la ventana de propiedades (seleccione el proyecto en el Explorador de soluciones y presione F4 para que aparezca la ventana de propiedades). En la Figura 5 se muestra la ventana de propiedades.

Figura 5 La ventana de propiedades del proyecto

A continuación se entregan las propiedades específicas de IIS Express 7.5:

1. Autenticación anónima: para activar o desactivar la autenticación anónima. La autenticación anónima permite que cualquier usuario tenga acceso al sitio sin imponer al explorador del cliente la dificultad del nombre de usuario y contraseña. Está activado de manera predeterminada.

2. Modo de canalización administrada (puede ser integrado o clásico):

   Integrado: el objeto ApplicationPool usa las canalizaciones de procesamiento de solicitud integradas de IIS 7 y ASP.NET para procesar las solicitudes del código administrado.

   Clásico: IIS 7 redirige las solicitudes del código administrado a aspnet_isapi.dll, y así las solicitudes se procesan tal como si la aplicación se estuviera ejecutando en IIS 6.

3. SSL habilitado: configúrelo en verdadero para habilitar SSL para el sitio.

4. URL de SSL: la dirección URL de SSL.

5. URL: la dirección URL del sitio web.

6. Autenticación de Windows: puede estar habilitada o no; use la autenticación de Windows para autenticarse mediante los protocolos de Windows NT LAN Manager (NTLM) o Kerberos.

Las configuraciones que se cambian en la caja de herramientas de las propiedades se guardan en “Mis documentos\IISExpress\config\applicationhost.config”. Tenga presente que estas configuraciones no se encuentran en la carpeta “C:\Archivos de programa”. Cada usuario tiene su propia configuración de IIS Express 7.5. Debe tener presente que las configuraciones no se conservan en el control de código fuente, ya que las configuraciones están establecidas estrictamente en la instancia local de IIS Express 7.5 y el archivo de configuración no está incluido en el archivo de solución.

Compartir proyectos de IIS Express 7.5 con Visual Studio 2010 RTM

Digamos que tiene un proyecto que usa IIS Express 7.5 en localhost:20221, y desea compartirlo con un compañero que todavía tiene Visual Studio 2010 RTM. En cuanto abra el proyecto web en su equipo recibirá un error similar a “No se pudo encontrar el servidor ‘http://localhost:20221’ en el equipo local”.  

La razón detrás de este error es que Visual Studio 2010 RTM no sabe nada acerca de IIS Express e intenta encontrar locahost:20221.

Para solucionar esto en un proyecto de aplicación web puede desmarcar “Aplicar configuración del servidor a todos los usuarios (almacenar en archivo de proyecto)” en la pestaña Páginas de propiedades | Web (consulte la Figura 6).

(haga clic para acercar la imagen)

Figura 6 Establecer la selección del servidor y configuración relacionada para cada usuario

Haga clic con el botón secundario en el proyecto en el Explorador de soluciones y seleccione Propiedades en el menú contextual para que aparezcan las páginas con las Propiedades.

Así la selección del servidor (Visual Web Development Server o IIS Express 7.5) y la configuración relacionada se guardan para cada usuario en el archivo del usuario en vez del archivo del proyecto. Por tanto, la selección de servidor no se conserva en el control de código fuente.

Esto permite que los miembros del equipo que usan Visual Studio 2010 RTM puedan seguir usando Visual Studio Development Server mientras los usuarios de Visual Studio 2010 SP1 pueden usar IIS Express 7.5 para el mismo proyecto. En el caso de los proyectos de sitio web, todo el equipo tiene que usar Visual Studio 2010 SP1 para poder compartir los proyectos y usar IIS Express 7.5.

Compatibilidad con SQL Server CE

Microsoft SQL Server CE es una base de datos incrustada gratuita que se puede usar para desarrollar sitios web ASP.NET y aplicaciones de escritorio. Es una base de datos ligera que no requiere de instalación. En un servidor de producción, basta con dejar los ensamblados del motor de la base de datos SQL Server CE en la carpeta bin para que un proyecto web pueda usar la base de datos SQL Server CE. (Consulte la sección “Dependencia implementable” de este artículo para ver cómo Visual Studio permite agregar automáticamente los ensamblados necesarios en la carpeta de binarios).

Puede obtener más información acerca de SQL Server CE en bit.ly/dsWBbM y bit.ly/hvgQQV. Para habilitar la compatibilidad de SQL Server CE en Visual Studio 2010 SP1, puede descargar los componentes con Web PI (bit.ly/maOfQX) o con el instalador independiente. Para este último, instale los dos siguientes componentes: el tiempo de ejecución de SQL Server CE (bit.ly/f86AyF) y las herramientas Visual Studio para SQL Server (bit.ly/kvxEQi).

En esta sección, exploraremos las características de SQL Server CE que se habilitan al instalar los componentes necesarios.

Con Visual Studio 2010 SP1, ahora puede crear una base de datos de SQL Server CE con las nuevas plantillas (consulte la Figura 7). (Para que aparezca el cuadro de diálogo “Agregar un nuevo elemento”, haga clic con el botón secundario en el proyecto en el Explorador de soluciones y seleccione “Agregar un nuevo elemento”). Mientras agrega el archivo .sdf en un proyecto de aplicación web, Visual Studio 2010 SP1 agrega automáticamente una referencia a System.Data.SqlServerCE, mientras que para un sitio web actualiza web.config para agregar el ensamblado.

(haga clic para acercar la imagen)

Figura 7 Creación de una base de datos de SQL Server CE

Para realizar diversas tareas con los archivos .sdf, haga doble clic en el archivo .sdf en el Explorador de soluciones, y se abrirá el panel del Explorador de servidores (consulte la Figura 8).

Figura 8 Al hacer clic con botón secundario en un archivo .sdf se pueden realizar diversas tareas

El Explorador de servidores permite realizar diferentes tareas, tales como crear una tabla nueva, editar una existente, editar el esquema de la tabla, mostrar los datos de la tabla, y más.

También se actualizaron otras características de datos en Visual Studio 2010 SP1, tales como la administración de claves e índices, Entity Framework Designer y el Explorador de servidores/bases de datos para ser compatibles con las bases de datos SQL Server CE.

Compatibilidad con Razor

En Visual Studio 2010 SP1 se realizaron cambios en los sistemas del proyecto web y en el editor de HTML para que sean compatibles con la nueva sintaxis Razor. Esta nueva sintaxis se usa en las páginas web de ASP.NET y en ASP.NET MVC 3.

Lea más acerca de la sintaxis Razor de ASP.NET MVC en bit.ly/aj0AuM.

Para habilitar la compatibilidad con la sintaxis Razor en Visual Studio 2010 SP1, debe descargar ASP.NET MVC 3.

El vínculo de Web PI para descargar ASP.NET MVC 3 es bit.ly/biXkTD. El instalador independiente de ASP.NET MVC 3 se encuentra en bit.ly/hd2LDs.

La siguiente publicación describe qué es lo que se instala con ASP.NET MVC 3: bit.ly/e7T4A3.

Se agregó la siguiente compatibilidad para la sintaxis Razor:

Coloreado Al abrir un archivo Razor (.cshtml o .vbhtml) en Visual Studio 2010 SP1 y ASP.NET MVC 3, el editor de Visual Studio colorea el código en HTML, C# y Visual Basic.

También puede cambiar el color de fondo predeterminado para los bloques de código de Razor en el cuadro de diálogo de Herramientas | Opciones, al seleccionar Entorno | Fuentes y colores (consulte la Figura 9).

Figura 9 Cambio del color de fondo predeterminado para los bloques de código de Razor

IntelliSense Proporciona una compatibilidad completa con IntelliSense para los lenguajes HTML, C# y Visual Basic en los archivos Razor. En la Figura 10 se muestra un ejemplo.

(haga clic para acercar la imagen)

Figura 10 Compatibilidad con IntelliSense para el código Razor

Depuración En forma análoga a los otros lenguajes, puede agregar puntos de interrupción en los archivos Razor y usar todas las características de depuración del IDE (tales como paso a paso, lista de observación, etc.).

En el caso de las expresiones en línea de Razor, no se puede hacer clic en el margen para agregar puntos de interrupción. La solución está en mover el cursor a una expresión y luego presionar F9 (el método abreviado para agregar un punto de interrupción).

Dependencias implementables

En las secciones previas vimos cómo descargar, instalar y explorar características para SQL Server CE, Razor y ASP.NET MVC 3. Ahora queremos publicar nuestro proyecto web que usa estas características en un servidor web remoto. No sabemos con certeza si el servidor remoto tiene instalado SQL Server CE, Razor o ASP.NET MVC 3, y no tenemos control sobre lo que se puede instalar en él. Visual Studio 2010 SP1 nos puede ayudar a implementar (en la carpeta bin) los archivos binarios de estos componentes mediante la característica Agregar dependencias implementables (consulte la Figura 11).

Figura 11 La característica Agregar dependencias implementables

La carpeta bin es una carpeta especial en los proyectos web que reconoce ASP.NET. La carpeta de binarios puede contener ensamblados compilados para los controles personalizados de ASP.NET, componentes u otros tipos de código a los que se hace referencia en la aplicación web.

Nuestra aplicación web puede depender de algún componente (por ejemplo, SQL Server CE) y queremos publicar nuestro sitio web en un servidor que no tiene esta dependencia instalada (no tiene SQL Server CE instalado).

“Implementar en la carpeta bin” significa copiar las dependencias en la carpeta bin de la aplicación al implementarla en vez de instalar las dependencias en la memoria Caché global de ensamblados (GAC) mediante un instalador.

Para que aparezca el cuadro de diálogo, haga clic con el botón secundario en el proyecto web en el Explorador de soluciones y seleccione “Agregar dependencias implementables…”.

Visual Studio 2010 SP1 presentará un cuadro de diálogo con una lista de componentes que se instalan en el equipo y que se pueden implementar. ASP.NET MVC sólo aparece como opción adicional para los proyectos ASP.NET MVC 3 (consulte la Figura 12).

Figura 12 Cuadro de diálogo Agregar dependencias implementables para una implementación en la carpeta bin

Esto es lo que pasa cuando hace clic en Aceptar. En el caso de un sitio web, los ensamblados necesarios para los componentes seleccionados se copian desde la ubicación de instalación de la dependencia en su equipo a la carpeta bin de la aplicación. Ahora, cuando copia o publica el sitio web en el servidor web, el componente funciona mediante los ensamblados de la carpeta bin.

En el caso de un proyecto de aplicación web, los ensamblados de los componentes seleccionados se copian a la carpeta _bin_deployableassemblies. Cuando el proyecto de la aplicación web se compila o empaqueta para la implementación, los archivos binarios se copian desde la carpeta _bin_deployableassemblies a la carpeta bin.

Así, cuando se publica el proyecto, todas las dependencias se pueden volver a copiar en forma correcta desde la carpeta _bin_deployableassemblies, incluso si durante el proceso de desarrollo se eliminaron algunos archivos de la carpeta bin.

Compatibilidad con HTML5 y CSS3

El editor de HTML es compatible en forma preliminar con HTML5, de modo que IntelliSense valida los elementos y atributos de HTML. En las versiones futuras de Visual Studio se proporcionará una versión más completa que incluye una experiencia más íntegra de HTML5.

Para habilitar la compatibilidad con HTML5, vaya a Herramientas | Opciones, seleccione Editor de texto | HTML | Validación y luego seleccione HTML5 desde la lista desplegable. O también puede seleccionar HTML5 desde la barra de herramientas de edición de código fuente HTML (consulte la Figura 13). Para activar la barra de herramientas mientras edita un archivo en HTML o Razor, seleccione Ver | Barra de herramientas | Edición de código fuente HTML.

Figura 13 Selección de HTML5 en la barra de herramientas de edición de código fuente HTML

Visual Studio 2010 SP1 mejoró algunos aspectos de la compatibilidad con CSS3, aunque estas mejoras no son tan elaboradas como las de HTML5. El editor de CSS ahora reconoce selectores más avanzados, tales como div:nth-child(2n+1), y los nuevos valores de color en rgba, hsl y hsla, y los valores hexadecimales de ocho dígitos.

Conclusión

Para resumir, Visual Studio 2010 SP1 realiza algunos ajustes en Visual Studio, pero lo que realmente hace que el desarrollo web sea una tarea más placentera son los nuevos componentes web en conjunto con elementos como IIS Express 7.5, ASP.NET MVC 3 con Razor, SQL Server CE con herramientas y HTML5/CSS3, unidos con Web PI. Esperamos que disfrute tanto de estas herramientas como nosotros.

Scott Hanselman trabaja como arquitecto principal de comunidad para Microsoft en las afueras de Redmond, Wash. Puede seguirlo en Twitter en twitter.com/shanselman, leer su blog en hanselman.com o escuchar sus podcasts en hanselminutes.com.

Deepak Vermatrabaja como un ingeniero de desarrollo de software de pruebas para Microsoft en Redmond, Wash. El blog de su equipo se encuentra en blogs.msdn.com/b/webdevtools.