VS 2008 Web Designer y el soporte CSS

Una de las caracteristicas que los desarrolladores web descubrirán pronto en VS 2008 son las increíbles mejoras del diseñador HTML, y el nuevo soporte de CSS que tiene.

VS 2008 usa el mismo diseñador que incorpora Expression Web. A parte de las nuevas funcionalidades que veremos, os daréis cuenta que es mucho más rápido que la versión del VS 2005 (que estaba basado en un código fuente muy antiguo).

Aquí tenéis un pequeño resumen de algunas de las nuevas características que veremos en VS 2008 y en Visual Web Developer 2008 Express:

Edición a pantalla partida

Además de soportar las vistas de código y diseño, VS 2008 ahora soporta el modo "split-view" o pantalla partida mientras trabajamos con páginas web. Esto nos permite tener el código HTML y la vista diseño a la vez en la pantalla, y cualquier cambio que hagamos en una de las partes se verá reflejada en la otra:

Administrador de estilos CSS

VS 2008 tiene una nueva herramienta llamada "Manage Styles". Esta herramienta nos muestra todas las hojas de estilo CSS y sus reglas correspondientes de la página que estamos editando. Puede usarse tanto en vista diseño como en la vista de código de la página:

Un círculo sobre una regla del CSS en esta ventana nos está indicando que esa regla está siendo utilizada en el documento actual. Con el raton podemos navegar sobre las reglas CSS y ver sus valores:

Podemos hacer clic con el botón derecho en una regla CSS y seleccionar "Modify Style" para irnos a un editor de CSS, o podemos hacer doble clic en la regla en la ventana de estilos para abrir el archivo de estilos y ver el código del CSS para modificarlo (con intellisense):

Para ver más trucos sobre el uso de esta herramienta leed este post.

Ventana de propiedades CSS

Otra de las nuevas características tanto en la vista de diseño y en la de código es la nueva ventana de propiedades de CSS:

Cuando seleccionamos un elemento HTML o un control de ASP.NET, la ventana de propiedades de CSS nos mostrará todas las opciones de CSS que se le están aplicando. También podemos cualquier valor de ese grid. El desplegable "target rule" en la barra de estilos nos indica bajo que regla se estan aplicando los cambios (leed este post para aprender más sobre la barra de estilos y el desplegable del "target rule").

Si, como yo, habéis estado viendo una hoja de estilos css enorme y de repente gritais :¿porqué C!"·$%s se ve esto así?, encontraréis que la vista "resumen" de la ventana de CSS es muy util (sólo haced clic en el boton "summary" en la parte de arriba de la ventana de propiedades de CSS). Este botón os mostrará todas las herencias css del elemento html o control ASP.NET actual:

En el grid de propiedades vemos que algunos valores están duplicados - tachados con una línea roja con los valores que se sobreesciben. Podemos ver tanto el valor original como el valor con el que se sobreescribe.

Podemos seleccionar valores individuales y ver en que lugar de la jerarquía se han sobreescrito. En el ejemplo siguiente podemos ver que el color final del elemento actual está en color marrón oscuro. Si seleccionamos este color como final, la ventana de propiedades de CSS pintará una caja azul en la lista de reglas aplicadas indicando que esa propiedad está en la regla "singlecontent h3":

Si hacemos clic en el marrón más claro que esta regla sobreescribe (y que tiene el tachón en rojo), podemos ver que se originó con el cuerpo HTML de la página (fijáos cómo la regla del cuerpo de abajo se selecciona en la lista de relgas cuando seleccionamos el valor sobreescrito):

Leed este post dedicado a la ventana de propiedades de CSS para aprender cómo usarla.

Intellisense en la vista código de CSS

El diseñador HTML tiene la capacidad de seleccionar un elemento o control en vista diseño, y seleccionar gráficamente una regla de la lista de CSS para aplicarselo.

También veréis que en el modo de código también tenemos intellisense en las CSS:

Esto se puede hacer tanto para elementos HTML (como el de arriba) como para controles ASP.NET:

Este intellisense está soportado en páginas HTML y ASP .NET, pero tambien en páginas basadas den Master Pages y en Master Pages anidadas.

Soporte de Master Pages anidadas.

A principios de mes escribí un post sobre el soporte de VS 2008 para Master Pages anidadas. Todo lo que hemos visto anteriormente sobre las características de CSS también funcionan en este caso:

Resumen

En este post hemos visto algunas de las características del diseñador HTML y el soporte de CSS que tiene VS 2008 (todas esas características también están en Visual Web Deveolper 2008 Express edition).

Debido a que VS 2008 tiene soporte multi-targeting podemos usar estas características sin tener que instarla .NET 3.5 en nuestros servidores. Podemos abrir nuestros proyectos de ASP.NET 2.0 con VS 2008 y aprovecharnos de todo esto.

En la proxima semana empezaré una nueva serie de post sobre el nuevo control <asp:listview> que viene con ASP.NET en .NET 3.5. Uno de los grandes beneficios de éste control es que permite a los desarrolladores tener control total sobre el HTML que se emite en escenarios con datos. Esto funciona perfectamente con las características de CSS, y nos permite crear fácilmente sitios y aplicaciones web  muy vistosas.

Espero que sirva.

Scott.

Traducido por: Juan María Laó Ramos. Microsoft Student Partner.

toH tlhIngan Hol DajatlhlaH ‘e’ DaneH’a’?

5 pensamientos en “VS 2008 Web Designer y el soporte CSS

  1. Pingback: ASP.NET AJAX en .NET 3.5 y VS 2008 « Thinking in .NET

  2. Pingback: Habilitando la pantalla partida vertical en VS 2008 « Thinking in .NET

  3. Pingback: El control asp:ListView (Parte 1 - Creación de una página de listado de productos con una CSS limpia « Thinking in .NET

  4. Pingback: ASP.NET MVC Framework (Primera parte) « Thinking in .NET

Los comentarios están cerrados.