Menu

Diseño y ASP.NET

2 Noviembre, 2015 - Diseño & ASP.NET
Diseño y ASP.NET

Diseño y ASP.NET: Presentación

Cuando el diseño se une al desarrollo

 

Vamos a hablar de diseño y de ASP.NET. Ya en anteriores artículos, hemos tratado largo y tendido el diseño Web aplicado tanto en páginas y sitios, de carácter corporativo o comercial, como en interfaces de usuario para programas de gestión vía navegador/http.

Con este post, inauguramos una nueva sección denominada Diseño & ASP.NET, con la que pretendemos dar un pasito más en el mundo del diseño de las estructuras con la que confeccionamos los programas, y más concretamente, en un entorno de programación como es Microsoft ASP.NET.

Si eres programador de esta herramienta ¿No te ha pasado alguna vez que quieres hacer más bonito y “diferenciador“, por ejemplo, un típico control de servidor GridView, y por más que eliges las plantillas que se incluye en el framework, todas te parecen ¡PFuu!, y no terminan de convencerte?

¡Seguro que más de una vez…!

Pues estás de suerte, ya que a lo largo de estos artículos, irás viendo como personalizar controles de servidor que utilizas en tu entorno de Visual Studio, yendo más allá de las configuraciones de estilo propias del framework -de por sí bastante potentes, todo hay que decirlo-.

En esta tarea, no solo trataremos las clases propias del estilo, sino que intentaremos desarrollar todo el conjunto para obtener el resultado final de un diseño funcional, personalizado y completo. Para ello, nos basaremos en ejemplos reales y mostraremos y explicaremos reglas de estilo CSS; las propias clases de estilo de los controles de servidor; máscaras; eventos; rutinas de JavaScript; e incluso utilizaremos el framework BootStrap para que nuestros diseños sean elegantes, modernos y adaptables al dispositivo donde corran (“sensitive”).

Lo que intentamos decirte, es que no nos limitaremos a ponerte un control de servidor,  mostrarte sus reglas de estilo, y ¡ale, a correr!, sino que iremos mucho más allá. Mostraremos todo el código fuente necesario para implementar completamente dicho control de forma totalmente funcional.

Como decíamos, para conseguir nuestro propósito, vamos a aunar y utilizar las siguientes tecnologías:

 

Por si no lo conoces, BootStrap se trata de un framework o conjunto de herramientas de software libre que contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS, así como, extensiones de JQuery (JavaScript) adicionales opcionales, ya listas para ser usadas, dándole estilo a los elementos de nuestros programas.

Como siempre digo: para muestra: un botón… Por lo tanto, para abrir boca, te dejo dos imágenes con el volcado de pantalla de un proyecto real llamado NewsLetter, que utilizaremos cono laboratorio de pruebas a lo largo de estos posts, y que, entre otras, contiene una página con una tabla de datos encuadrados en un famoso y bien conocido control de servidor “GridView”.

 

Diseño y ASP.NET - GridView 1

 

Como puedes apreciar, esta primera página está virgen de diseño, y utiliza una plantilla estándar del control GridView en tiempo de diseño (concretamente la denominada “Pino nevado”). El resto de controles, como botones y etiquetas, están tal cual salen del cuadro de herramientas.

¡Un poco sosa, la verdad!

 

 

Diseño y ASP.NET - GridView 2

 

Sin embargo, en esta segunda página, la cosa cambia. Hemos aplicado un estilo mucho más moderno, profesional y atractivo a los controles que contienen la página ¿verdad?

Además, empleamos colores en los botones para identificar a primera vista la acción que va a resultar al ser pulsados, e incluso algunos, indican su finalidad mediante iconos descriptivos de dicha acción…

El diseño de esta página representa una gran diferencia respecto a la anterior. ¡No cabe duda!

Bueno amigo, y hasta aquí hemos llegado por hoy…

Y ya sabes, si quieres seguir nuestros pequeños consejos, síguenos e iremos desgranando los trucos y técnicas para conseguir estos diseños tan guapos.

Espero que te gusten.

Deja un comentario

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