VS2008: CSS for Developer (Dummies Designers)

En alguna presentaciones de VS2008 en las que me toco participar, el hecho de tener una mejor herramienta con soporte para CSS, no llamo mucho la atención, y si no recuerdo mal, se dijo: “eso yo lo hacía con VS2005 y CSS”. La demo que presente fue una similar a la demo de ScottGu’s, que este caso es crear un nuevo estilo con todo el diseño, e ir viendo como lo vamos creando. Quizás el ejemplo no quedo muy claro, de ahí el origen de este post, para ver las verdadera utilidad de estas nueva feature en la IDE.

Pasemos a meter floro ver un poco más de esta herramienta y hacia quien esta orientada.

En primer lugar no creo que estas features de VS2008 reemplacen a una herramienta de diseño, ni tampoco convierte a VS2008 en una herramienta para hacer diseños espectaculares siendo un developer.

A mi parecer creo que esta feature esta orientada para un developer que quiere hacer algunos cambios o ajustes a un diseño, sin necesitar de un designer. No se si les ha pasado, pero hasta el cuadrar un tabla en los navegadores es un tarea “compleja”, he visto muchas preguntas en los foros, de gente con este problema. Mi recomendación es que si eres un developer, no designer, tiene que haber otra persona encargada del diseño, sobre todo si quieren un diseño personalizado, un buen diseño, y que respete los estándares. La tarea de nosotros viene al momento de integrar ese diseño (archivos html, images, CSS, y javascript si los hubiera), en las páginas aspx, e integrar la funcionalidad.

Muchas veces en un presupuesto para un proyecto sólo hay para developers con un sueldo respetable y por ahí un dba, y contratar un designer profesional es lo último para lo que alcanza ni modo que se quite el presupuesto para las reuniones extra de trabajo (B). Y si uno no hace nada con respecto al incluir un designer en el equipo, cuando estén entregando el software al cliente, y no lo vea bien en Firefox U Ppera, vendrán los problemas y las amanecidas para corregir esto.

¿Cuál es la estrategia?. Recordarles a nuestros jefes, que no somos designers, y que si quieren que nosotros hagamos el diseño es bajo su responsabilidad. Si el proyecto esta interesante, renunciar no es una buena opción. Una alternativa razonable es que podemos usar una plantilla de algún sitio existente y que este disponible para descarga: Templates for ASP.NET (también hay unas plantillas para Webs en general, es decir que igual las pueden usar con php, jsp, o lo que usen). Esta demás decir que estas plantillas están respetando los estándares, por los menos de las que he revisado ha sido así.

Y eso, presentar al jefe estas plantillas y que escoja una, y si no le gusta, tomar unas cervezas para bajar el coraje recomendarle contratar un designer profesional, y que disminuirá su presupuesto, aunque después de esto van a terminar aceptando una de esas de plantillas.

Ahora estamos sobre el supuesto que ya tenemos un plantilla, o el designer profesional ya nos envió su trabajo. En nuestro caso vamos a descargar: Visual C# Corporate Design para el ejemplo, obviamente C#, por cierto no se pierdan la gran batalla: C#.Net vs VB.Net, nótese que primero nombraron a C# :D, por algo será no?.

Después de descargar la plantilla, sólo le hacemos doble clic al archivo, e iniciará el asistente para instalar la plantilla y tenerla disponible en Visual Studio. Uno de los problemas es la plantilla esta disponible como Web Site, y no como Web Application Project, sólo es cosa de crearlo como Web Site, y después movemos los archivos a nuestra Web Application Project.

En la página de templates, unos para ASP.NET y otros html, la diferencia es que los de ASP.NET viene implementados con algunas features como master pages, y algunos controles de ASP.NET. En el template que estamos usando, viene con el servicio membership, pero como ni lo voy a usar, no hago las configuraciones respectivas en el web.config

Después de hacer un View in Browser, tenemos lo siguiente:

Si queremos podemos ver el código fuente de la página, y copiarlo y llevarlo al Validator de la W3C: http://validator.w3.org/#validate_by_input, y comprobarán como todo el html es válido, en su labor mantenerlo así :D.

Este tema no me gusta, así que vamos al web.config, y cambiamos al tema a otro disponible “Paper”:

Ahora se ve mejor, a aunque faltan hacer unos ajustes en el menú principal, para que se vea bien, en IE, Firefox, y Opera se ve bien, pero podemos hacer un ajuste para que en Safari, también se vea bien.

Si nos vamos a la master page, seleccionamos el menú en cuestión y nos vamos a la ventana CSS Properties, veremos que aparece seleccionado el estilo #mainnav, que es el estilo del div que contiene al menú:

Ahora en la ventana de propiedades, en el estilo padding-bottom le asignamos 2px:

Ahora hacemos View in Browser, nuevamente y veremos que ya se ve mejor la Web:

Vamos haciendo algunas conclusiones:

  1. Este no es un cambio del código agregando style inline, la herramienta automáticamente ha hecho el cambio en la hoja de estilo:

    Nótese además que este cambio lo ha hecho, dentro del skin que contiene este estilo.
  2. Tenemos soporte en Design del cambio aplicado, es decir que visualmente puedo ir cambiando la propiedad, y ver como va quedando, y todo automáticamente es actualizado en la hoja de estilo.
  3. La mejora o ajustes de diseños, deja de ser una tarea difícil para un developer.

Este puede ser un primer requerimiento, ajustar el estilo para que se vea bien en la mayoría de navegadores, aunque mayoría es muy subjetivo, al inicio del desarrollo se debería determinar cuales son los navegadores en los cuales la aplicación web se debe ver correctamente, aunque la idea es hacerlo bajo estándares y que sea posible que en todos se vea igual.

Ahora como segundo requerimiento, en una determinada página quieren mostrar una información de “la página”, en la zona derecha del menú principal:

Si sólo fuera un mensaje simple, podría hacerse con un literal, y desde la página lo busco en la master page, pero vamos a crear un nuevo content para esto.

Primero vamos a copiar un estilo parecido a este. Nos vamos a la ventana Manage Styles, seleccionamos el estilo #search, hacemos clic derecho sobre el y seleccionamos “New Style Copy…“:

Podemos modificar el estilo antes de copiarlo, o simplemente hacer clic en Ok, nótese que agrega el nuevo estilo a la hoja actualmente usada por la página, no se olviden de cambiar el nombre del estilo a #msjPage:

Ahora muevo el estilo que ha sido agregado al final, debajo del estilo #mainmenu, no se si esto sea necesario o no, pero así este lo demás xD (*creo que si era necesario por lo de la posición relativa y absoluta del estilo):

Ahora nos vamos al contenido de la página y agrego un div, que use el estilo creado, y agrego un texto para hacer las pruebas respectivas:

Si vamos a la vista diseño (de la master page), se podrán percatar, a los que también están haciendo la demo a modo de HOL, que el estilo sale muy abajo, pero después de unos ajustes (y con el soporte visual), podremos llegar al estilo deseado eso creíamos:

Y que es lo mejor de arriba?, que todo se guarda automáticamente en la hoja de estilo.

Ahora agrego un ContentPlaceHolder a mi estilo:

   1: <div id="msjPage">
   2:     <asp:ContentPlaceHolder ID="newsPage" runat="server">
   3:     </asp:ContentPlaceHolder>
   4: </div>

Ahora nos vamos a la página de contenido y agregamos lo que quisiéremos poner en el top, la cantidad de resultados de una búsqueda, alertas, o lo que se necesite:

   1: <asp:Content ContentPlaceHolderID="newsPage" ID="newsContent" 
   2:           runat="server" >
   3:     Aqu&iacute; un control Literal
   4: </asp:Content>

Ahora si nos vamos a la parte de diseño, no se ve como quisiéremos, sale muy a la izquierda:

Pero como ya sabemos el nombre del estilo podemos ir directamente a el y darle algunas modificaciones:

Tener en cuenta que esta es una posición absoluta, pero el contenedor inmediato superior no es relativo. Por ejemplo si dejamos toda la pantalla para el diseñador:

Al hacer View in Browser, podrán notar diferencias cuando minimizan el navegador como queda el search, y como queda este nuevo estilo. El contenedor del estilo search, que es le header, tiene posición relativo, esto  hace que se acomode automáticamente cuando se redimensiona el navegador. Debe haber un poquito más que hay que saber, pero la cosa es hacer que funcione, que se vea bien, y pase la validación de la W3C. Recordar siempre para este tipo de situaciones, escoger un tipo ideal de resolución ideal, por ejemplo definir que tu resolución mínima sea 1024×768. Así les estas avisando a los que tengan un 800×600, que no se podría ver como esperan la web.

Verán como haciendo uso de esta feature de Visual Studio 2008, hasta te hace aprender un poco de CSS sin querer queriendo.

Conclusiones:

  • CSS de VS2008 esta orientado a developers sin o con algo de experiencia en diseño, para darles soporte y poder hacer ajustes, mantenimientos, o hasta agregar nuevos estilos.
  • Se puede tener soporte en diseño e ir viendo como va quedando el diseño.
  • Todos los cambios son guardados automáticamente en la hoja de estilo.
  • Aprendes CSS, sin querer queriendo xD!

P.D.: CSS for Developer + ASP.NET AJAX + Support Javascript (mejorado) + Linq to Objects + ListView, a mi parecer es una razón suficiente para dejar al viejo VS2005, y empezar a usar VS2008. Y recuerden que ahora es más fácil migrar sus proyectos que tengan en VS2005, es más quizás ni sientan la migración.

Saludos,

6 comentarios en “VS2008: CSS for Developer (Dummies Designers)”

  1. Saludos de Nuevo Sergio.

    Te digo una de las cosas que me tiene realmente trancado es el bentido css, me he leido un libro de introducción pero ni modo puro conceptos basicos.

    Cuando veo ciertos web sites, desarrollados en php, asp.net, o xxx. Tremendas presentaciones muy bonitos, algunos con flash o silverligth. Y yo comento pero yo me lei el libro ASP.NET Profesional de Wrox y porque no puedo desarrollar mi web site que impacte a mis clientes. – Realmente la respuesta seria soy un programador y no un diseñador –

    Este articulo es de gran ayuda, fijate que yo tengo instalado el VS2008 y no sabia como utlilizar esa barra de herramientas de CSS que aparecia junto a los controles de asp.net.

    Me parece muy bueno tu articulo y bien interesante.

    Recuerdo cuando instale el web expresion, pense que me ayudaria a diseña un pagina web, como dibujar en paint, pero no fue asi. Despues de observarlo un poco descubri que es visual web express, con otro skin – eso pienso -.

  2. Perucho, si entra mucha frustración cuando nuestro diseño (que nos cuesta un montón de tiempo) no queda bonito como otros que están en la web… pero es porque no somos designers 😀

    Aupa Perucho, nos vemos…

    Saludos,

  3. @RodrigoJuarez, yo recomendaría la herramienta LQMSU…

    P.D.: Entiéndase por LQMSU: la que mejor sabes usar. En un proyecto, otra persona puede hacer el diseño y cuando lo tenga listo enviarte el html, y eso lo integras con VS (master pages, aspx, etc). Al final, cualquier herramienta que genera diseño html, es de fácil integración con Visual Studio.

    Saludos,

  4. sin duda la q mejor se integra visual studio es microsoft expression web 2, ya q permite trabajar con los controles asp.net y asp.net ajax con las mismas herrameintas q usa visual studio, es muy practico para armar hasta el diseño de la web usando asp.net, y luegos con visual studio le das la funcionalidad, asi trabajo yo y me da un buen resultado.saludos

  5. yo tambien he tenido problemas con el diseño, lo que pasa es que soy programador y no diseñador, en esta pagina (www.oswd.org) se pueden descargar templates web gratis y pueden modificarlos con el expression sin problemas, a veces me ha sacado de apuros para hacer diseños rapidos….

    Saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *