ASP.NET y Bootstrap: GridView

ASP.NET y Bootstrap: GridView

Hoy volvemos con el desarrollo de un control de servidor ASP.NET GridView, utilizando para su maquetación el framework Bootstrap.

Para llevar a cabo el ejemplo, hemos utilizado una Base de Datos muy conocida y utilizada en cientos de tutoriales. Nos estamos refiriendo a Northwind de Microsoft y más concretamente a una de sus tablas: Clientes.

Vamos a materializar una codificación completa para posibilitar listar por pantalla de forma paginada los registros de la tabla, así como posibilitar la edición de alguno de sus campos: “Nombre de contacto” y “Teléfono”. También se podrán eliminar registros, tanto de forma individual como en conjunto.

ASP.NET-GridView-Bootstrap

Como se puede apreciar en la imagen, el GridView se complementa con un contador total de registros en la parte superior derecha.

En la parte inferior, un paginador basado en un control DropDownList (parte izquierda) y un Label como contador de páginas (parte derecha).

Por último, dispone de un botón para eliminar los registros seleccionados del GridView mediante los controles ChekBox situados en el extremo izquierda de cada fila.

 

ASP.NET-GridView-Bootstrap

 

A su vez, se podrán modificar los campos Nombre de Contacto y Teléfono.

Se pretende que todas las acciones, estén acompañadas de mensajes informativos, bien en forma de pop-up con rutinas JavaScript (generalmente los mensajes de confirmación), bien con controles label-bootstrap para notificar las acciones realizadas.

Bueno, pues vamos allá…

A continuación se muestra la parte de diseño. Ten en cuanta, que al igual que el anterior ejemplo y lo que vengan después, utilizan una MasterPage llamada MasterPage.master.

Fíjate en los siguientes detalles:

1.- Empleamos clases de Bootstrap para maquetar la parrilla del GridView: “table table-bordered”. En este caso ponemos borde a la tabla.

2.- Utilizamos del GridView  los siguientes eventos y manejadores:

  • OnRowDeleted->GridView_Clientes_RowDeleted,
  • OnRowUpdated->GridView_Clientes_RowUpdated, y
  • OnRowEditing->GridView_Clientes_RowEditing,

para materializar los mensajes informativos de cada una de las acciones

2.- Damos estilo a la cabecera: Color azul oscuro de fondo, texto blanco y negrita

3.- Damos estilo a una fila en edición: color de fondo amarillo suave

4.- Damos estilo al caso posible de no haber datos, donde volvemos a utilizar de nuevo clases Bootstrap: Color del texto en rojo

5.- Para el paginador, utilizamos controles DropDownList y label y clases de Bootstrap para darles estilo

6.- Para darle más funcionalidad, hemos incluido un control chekBox en cada fila del GridView para poder seleccionar múltiples registros que posteriormente puedan ser borrados. Ponemos un botón maquetado con Bootstrap para materializar el borrado de los elementos seleccionados.

Y ahora veremos el codeBehind.

Declaración de variables públicas

GridView_Clientes_DataBound

GridView_Clientes_PreRender

GridView_Clientes_RowDeleted

GridView_Clientes_RowUpdated

GridView_Clientes_RowEditing

btnQuitarSeleccionados_Click

chk_OnCheckedChanged

PageDropDownList_SelectedIndexChanged

SqlDataSource1_Selected

Puedes ver el ejemplo completo funcionando en Ejemplo 2

Esperemos que te haya resultado práctico. En próximos artículos seguiremos tratando desarrollo de controles utilizando para su maquetación Bootstrap. De forma paralela te iremos enseñando el manejo de Bootstrap en otros post.

Saludos.

¿Que sabemos del framework Bootstrap?

¿Que sabemos del framework Bootstrap?

¿Que sabemos del framework Bootstrap?

Pues que es un conjunto de herramientas de software libre desarrollado por Twitter, para el diseño de sitios y aplicaciones web. La versión actual es la 3.0.

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, CSS y JavaScript, que nos facilita y estandariza el desarrollo de nuestros Sitios Web, adaptándose, a partir de la versión 2.0, a todo tipo de dispositivos.

Como decimos, este framework ha sido desarrollada y es mantenido por la empresa Twitter y la ha liberado como un producto Open Source (código abierto).

Su filosofía de maquetado es tan intiuitiva, que puede ser rápidamente aprendida por desarrolladores que no vienen del mundo del diseño web.

 

Descargar Bootstrap

Puedes descargar el código CSS y JavaScript compilado, que es la forma más sencilla de empezar a utilizarlo, accediendo al repositorio de getbootstrap: http://getbootstrap.com.

Una vez descomprimidos los archivos descargados con la versión compilada, te quedará la siguiente estructura de archivos y directorios:

bootstrap/

  • css
    • css
    • min.css
    • bootstrap-theme.css
    • bootstrap-theme.min.css
  • js
    • js
    • min.js
  • fonts
    • glyphicons-halflings-regular.eot
    • glyphicons-halflings-regular.svg
    • glyphicons-halflings-regular.ttf
    • glyphicons-halflings-regular.woff

 

Estos archivos son la forma más sencilla de utilizar el framework en cualquier proyecto web. Para cada archivo se ofrecen dos variantes: los archivos compilados (bootstrap) y los archivos compilados comprimidos (bootstrap.min).

También se incluyen las fuentes de los iconos del proyecto Glyphicons y el tema opcional de Bootstrap.

Todos los plugins JavaScript de Bootstrap, utilizan la librería jQuery, por lo tanto, deberás incluirla también en tus Sitios Web.

 

Empezar a utilizar Bootstrap

Bootstrap, para facilitar la maquetación del Sitio Web, utiliza un sistema de rejillas (grids), donde podemos crear filas de hasta 12 columnas (de 1 a 12), de manera que cada columna disponga de un ancho relativo y proporcional.

Y ¿para que utiliza este sistema?

Pues para poder colapsar las columnas en caso de ser vista la Web desde un dispositivo de pantalla pequeña.

Para que entiendas a que nos referimos cuando hablamos de colapsar columnas, puedes ver las siguientes imágenes:

 

bootstrap-columnas

 

En esta primera, puedes ver una maquetación típica compuesta de una cabecera con elementos de autenticación, un elemento grande y muy destacado (denominado jumbotron), y un cuerpo compuesto de 3 columnas proporcionales.

¿Qué ocurre cuando este diseño se ve en un dispositivo pequeño como un teléfono móvil?

 

bootstrap-columnas

 

Pues sencillamente que las columnas se colapsan y se muestran una debajo de la anterior. Por otro lado, los elementos de autenticación de la cabecera, se han sustituido por un icono de “ver más” pues aquellos eran demasiado grandes para esta nueva resolución.

Cuando el usuario pulsa sobre ese icono, se mostrarán los elementos de autenticación como columnas colapsadas, una debajo de la otra:

 

bootstrap-columnas

 

Esto es lo que llamamos diseño sensible o “responsive”.

Bueno, pues nada más por ahora. Seguiremos tratando el tema de Bootstrap en otros post. Y no te olvides de seguir nuestra sección “Diseño & ASP.NET” donde utilizamos este framework para el diseño de programas

Bootstrap y ASP.NET: TextBox, Button y LinkButton

Bootstrap y ASP.NET: TextBox, Button y LinkButton

Nuestra primera misión, en el proceso de diseño de una interfaz de usuario (UI) profesional para un programa de gestión desarrollado con ASP.NET, consistirá en, intentar aplicar Bootstrap dentro del propio entorno de desarrollo de ASP.NET.

¿Con que objeto? Te preguntarás. Pues muy sencillo para obtener un resultado sensitive adaptable a diferentes dispositivos y al mismo tiempo ganar en calidad de diseño.

Diseño por partes: Bootstrap y ASP.NET

Como bien sabes, el framework .NET, permite separar en diferentes páginas, la parte de diseño, y la de código (Code behind), y es posible programar en diferentes lenguajes. Los más comunes -que no los únicos- son VB.Net y C# (C Sharp).

No obstante, sea el que sea el lenguaje utilizado, el código se convertirá finalmente en un lenguaje común a todos ellos, a fin de ser procesado por .NET.

¿Y la cosa queda ahí? Pues no. Al final, es I.I.S. (El servidor de Internet de Windows), el que  reducirá todo, por muy complejo que sea el código, a HTML, CSS y JavaScript. Lo que hará posible que se pueda mostrar en los navegadores de los usuarios.

Ante este modelo, podemos intuir diferente formas de “meterle mano” al diseño de nuestros elementos y objetos. Por un lado tenemos las propiedades nativas de los objetos de servidor de ASP.NET destinadas a la apariencia de los citados objetos. Por otro lado, tenemos la posibilidad de aplicar temas y máscaras (skin) a esos objetos. Por último, tenemos los estilos CSS.

Realmente son muchas las posibilidades que se nos ofrece para poder aplicar la tecnología de Bootstrap a cualquier objeto ASP.NET, ya que, a la larga, esos objetos serán reducidos a simples elementos del DOM (Modelo de Objetos de Documentos) de la página Web.

¿Y cómo empezar?

Pues como siempre, la casa no se puede comenzar por el tejado ¿verdad?, empezaremos con la construcción de una maqueta donde quedará perfectamente determinada la estructura del proyecto. Os aconsejo que antes de emprender este viaje, te leas nuestros artículos sobre “El diseño web en los programas de gestiónhttp://blog.siinet.com/2015/07/24/el-diseno-web-en-los-programas-de-gestion-1/

Nosotros, para diseñar la estructura, preferimos trabajar en un entorno diferente al de desarrollo de Visual Studio, en nuestro caso, utilizamos Dreamweaver. También nos valemos de herramientas como Viewport Resizer para simular el resultado del diseño “responsive” en diferentes dispositivos y tamaños de pantalla. Evidentemente, esas preferencias, quedan a gusto de cada uno.

Una vez diseñada la estructura, lo que tenemos que hacer es copiarla, tal cual, en un fichero maestro, agregando a nuestro proyecto un nuevo elemento: Página Maestra (Master Page). Copiamos todos los archivos CSS y Javascript a los que haga referencia, y ¡Listo! Ya tenemos nuestros cimientos preparados para programar sobre ellos.

A continuación, y como ejemplo te mostramos una plantilla básica y sencilla con bootstrap:

Como puedes ver, esta plantilla hace referencia a los ficheros:

  • bootstrap.min.css
  • bootstrap.min.js
  • jquery.min.js

 

Por lo tanto, estos ficheros han de ser estar presentes en nuestro proyecto, bien añadiéndolos físicamente al proyecto, o haciendo referencia a las URL,s de sus repositorios.

Por ejemplo: http://code.jquery.com/jquery.min.js

Aunque esto sé que lo sabes, te recuerdo que la MasterPage tendrá una zona de contenido común que solo se podrá modificar desde la propia página, y otra zona de contenido variable que será diseñada y programada desde las páginas asociadas a la Maestra. Esta zona variable de la MasterPage, estará contenida en un control de servidor ContentPlaceHolder.

¡Bueno! Ya que tenemos nuestra estructura, vamos a empezar con los controles de servidor  ASP.NET más comunes: asp:TextBox y asp:Button.

El control <asp:TextBox>, como sabes es una caja de texto, y una vez compilado por IIS, queda  reducido a un simple objeto HTML, concretamente a un <input type=”text” >. A su vez, el control <asp:Button> que es el botón de toda la vida, tras la compilación, se convierte en otro  objeto HTML <input type=”submit”>. Es decir, que ambos, pasan a ser los típicos elementos que suelen formar parte de un formulario.

Por otro lado, sabemos que Bootstrap, aplica formatos muy elegantes y prácticos a los elementos de un formulario… ¡Pues ya está! No tenemos más que asignar alguna clase de Bootstrap a nuestros controles de servidor para darles “vidilla”.

Veamos un ejemplo.

Incluimos en nuestra página un control TextBox y un control Button y ponemos un título: “Formulario sencillo”

El resultado es:

Bootstrap y ASP.NET

Ahora asignamos las clases CSS de bootstrap y cambiamos el título

Y el resultado es:

Bootstrap y ASP.NET

Como ves, el cambio es abismal ¿verdad? Y sin embargo solo han cambiado unas cuantas propiedades respecto del primer formulario

  • Al div le aplicamos la propiedad CssClass=”input-group” para que los elementos del formulario permanezcan agrupados
  • Al TextBox le aplicamos la propiedad CssClass=”form-control” para darle un efecto de entrada de datos, además se le puede aplicar también la propiedad placeholder para que aparezca un texto por defecto

 

Todavía podemos dar una vuelta más a la tuerca. ¿No te gustaría que apareciera en el botón un icono representativo? Para ello, hay que aplicar un truquito, y cambiar ligeramente la filosofía de los controles sin perder funcionalidad. Vamos a utilizar un control de servidor asp:LinkButton en vez del asp:Button.

Y el resultado es:

Bootstrap y ASP.NET

¿Chulo verdad? Pues solo hemos tenido que cambiar el control Button por un LinkButton y añadir la etiqueta <span> aplicándole la propiedad CssClass= ”glyphicon glyphicon-search”

Esto es posible, gracias a la magnífica galería de iconos de que dispone Bootstrap: “Glyphicon”, con más de 250 iconos que pueden utilizarse como fuentes de letra ¡una pasada!

Puedes verlos en http://getbootstrap.com/components/

También puedes ver el código funcionando en tutoriales.siinet.com/ejemplo1.aspx

Fíjate que la clase CSS para poner el icono, consta de dos partes: “glyphicon” y el nombre del icono (en este caso: “glyphicon-searh” que representa una lupa).

Y hasta aquí hemos llegado por hoy. En los próximos post, seguiremos avanzando en el maravilloso mundo del diseño Web aplicado al entorno de desarrollo de ASP.NET con Bootstrap.

¿Qué es Creative Commons?

¿Qué es Creative Commons?

Constantemente nos preguntamos ¿Qué esCreative Commons?, o simplemente CC, sobre todo en lo referente a imágenes y otros recursos en Internet. Y quizás tú en algún momento te habrás peguntado:

 

¿Qué es eso de Creative Commons?

 

Bueno, pues en este post, te lo vamos a explicar para que no te quepa ninguna duda al respecto.

Como su propio nombre anglosajón indica, el CC, es una organización sin ánimo de lucro, fundada en 2001 por Lawrence Lessig, cuya sede está en Mountain View (California), y que se dedica a compartir obras y recursos creativos de todo tipo: vídeos, imágenes, fuentes de letra, música, artículos, etc.

Pero lo que hace realmente interesante y grande a la propuesta de CC, es su modelo del  uso compartido de dichas obras mediante acuerdos gratuitos.

Estos acuerdos denominados “Licencias Creative Commons”, vienen a representar  conceptualmente a los ya  tradicionales derechos de autor, pero ¡ojo!, esto no significa que “todo vale”, no es eso. La genialidad de esta fórmula, estriba en que los autores, ofrecen sus trabajos creativos a través de estas licencias, de forma estándar, para su uso y tratamiento público, según determina el propio autor. Es decir una especie de copyright concreto para cada obra según los términos o condiciones que su autor determina.

Ahora bien, la licencia CC, no sustituye al derecho de autor propiamente dicho. De hecho, el autor es precisamente el que tiene el derecho de otorgar a su obra los términos de uso de su obra mediante la citada licencia.

CC, que en la actualidad tiene infinidad de afiliados, ayuda a promover las licencias y a expandirlas por todo el planeta, tratando de ayudar a la gente a expresar esta preferencia por compartir, ofreciendo al mundo un conjunto de licencias en Internet, sin coste alguno.

¿Qué términos o acuerdos propone Creative Commons para sus licencias?

 

Creative Commons_licencias

¿Y qué licencias se pueden crear Creative Commons combinando sus términos?

 

Creative Commons_licencias_UsoLicencias

 

¿Cómo añado los términos de la licencia Creative Commons a una obra?

 

Ante esta pregunta, CCEspaña explica con claridad en las FAQ,s de su Web que todas las licencias CC requieren que los usuarios atribuyan la autoría al creador original de una obra, a menos que el creador haya renunciado a ese requisito o haya pedido que se elimine su nombre de una adaptación o colección.

Y para ello, deberá reflejar el icono correspondiente a la combinación de términos que conforma la licencia, y los datos del autor.

Por si te quedan dudas, te aconsejo que eches una ojeada a la guía de uso de CCAustralia (en inglés)

Creative Commons en la actualidad

 

CCEspaña, nos resume en su blog, datos de un informe publicado por Creative Commons internacional, en el que se refleja un avance muy significativo del uso de CC en los últimos años (hasta el 2014). La cantidad de obras disponibles bajo licencia CC supera en la actualidad los 880 millones de trabajos.

 

Creative Commons - estadísticas

 

Nos sigue diciendo el informe que una parte de este crecimiento se puede atribuir a importantes sitios webs que las han incorporado, demostrando que las licencias CC pueden coexistir con todo tipo de operaciones, sean estas sin fines de lucro (como la Wikipedia) o de carácter comercial (como Youtube, Flickr, o Scribd).

Creative Commons - estadísticas

Por último cabe destacar, según el informe, que la forma en que distintos autores escogen distintos tipos de licencia. Las licencias que no imponen restricciones al uso comercial o a los trabajos derivados son las más elegidas por los creadores que usan licencias CC, pero existe también una importante minoría que prefiere imponer ciertas restricciones.

Creative Commons - estadísticas

Y ahora una moraleja:

¡No hay nada peor que pillar recursos en Internet y apropiarte de ellos como si tal cosa!  Bueno si, hay algo peor: Utilizarlos después como si fueran propios. Tenemos que ser consecuentes con nuestros actos, y pensar en global. La Sociedad Digital, se fundamenta en la palabra “compartir” no en “quitar”. Lo primero enriquece, lo segundo perjudica a todos, incluso al infractor.

Fuentes:

CC Internacional: http://creativecommons.org/
CCEspaña: http://es.creativecommons.org/blog/
http://www.freepik.es/

Diseño y 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:

  • Controles de Servidor ASP.NET
  • Código de servidor ASP.NET
  • Código de cliente en lenguaje JavaScript
  • JQuery
  • Reglas CSS
  • BootStrap

 

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.