5 plugin imprescindibles para un sitio Web WordPress profesional

Gracias a su potencia y facilidad de uso, WordPress, desde que viera la luz en el año 2003 se ha convertido sin duda en la plataforma CMS (sistema de gestión de contenidos) más famosa y utilizada por los usuarios de todo el mundo para crear y mantener toda clase de sitios web: sitio de empresa, blog, página de productos… En realidad, tal y como la propia Web oficial de WordPress nos dice: ¡tú pones los límites! Y en el post de hoy vamos ha hablar de algo fundamental de esta plataforma: Los PLUGIN

 

Respecto a los primeros, WordPress dispone de un sinfín de temas gratuitos o de pago, acorde a tus necesidades. Todo sitio Web debe partir de un tema base, aunque también lo puedes construir tú partiendo de una maqueta HTML si tienes los conocimientos adecuados.

En cuanto a los plugin, que es de lo que trata este artículo, WordPress nos brinda un abanico infinito de posibilidades, de tal manera, que casi cualquier necesidad para tu sitio Web, si lo buscas, los encontrarás en el repositorio oficial.

Aunque seguro que ya lo sabes de sobra, puede que te preguntes ¿Qué es realmente un plugin?

Los plugin, tal y como WordPress lo define, “son herramientas que extienden la funcionalidad del propio WordPress. El núcleo de WordPress está diseñado para ser escueto, para maximizar la flexibilidad y minimizar el empacho de código. Los plugin ofrecen funciones y características personalizadas que permiten al usuario diseñar su sitio web según sus necesidades específicas…

Los plugin están disponibles en diferentes fuentes “oficiales” que constituyen el Repositorio Oficial de Plugin WordPress.

En definitiva, cualquier programador/diseñador profesional de sitios Web que trabaja con WordPress, habrá seleccionado, descargado, utilizado y trabajado con plugin en algún momento.

Una visión profesional o doméstica del trabajo con plugin

Evidentemente, el trabajo profesional dista mucho del uso doméstico a la hora de programar/desarrollar un sitio Web.

En el primer caso, y por pura lógica de trabajo, todo proyecto WordPress tiene que estar normalizado e incluso, sometido a claros y concisos protocolos de actuación, pues llevar a cabo una correcta y funcional estructura profesional en WordPress, no es tarea sencilla: configuración del hosting; diseño y maquetación; SEO; seguridad… etc.

Por esa razón, en este artículo, queremos facilitarte un poco la vida y desvelarte una selección de 5 plugin que nosotros utilizamos profesionalmente para potenciar la estructura y funcionalidad de nuestros sitios Web.

Alguno lo conocerás, quizás todos ellos, pues se trata de plugin muy valorados por los usuarios. Para nuestros sitios Web, solo empleamos plugin que son actualizados y revisados con regularidad, y cuya optimización de código evitan un excesivo ralentizado de los sitios Web donde se han instalado.

No obstante, has de tener en cuenta que no se puede abusar alegremente del uso innecesario de plugin, ya que, al fin y al cabo, son programas que ocupan memoria. La selección que te proponemos y que utilizamos nosotros con regularidad en cada proyecto profesional, mantiene un buen equilibrio entre funcionalidad y velocidad de procesamiento.

¿Qué funcionalidad buscamos en los plugins seleccionados?

Cuando diseñamos/desarrollamos un sitio Web, tenemos que materializar ciertas necesidades más o menos obligatorias que cubrirán los plugin que te mostramos a continuación. Entre ellas: Gestionar el error 404; Evitar el SPAM; Incluir la política de cookies; Seguridad en los contenidos mediante copias de respaldo, y por último, pero no menos importante, llevar a cabo estrategias SEO.

 

Error 404

Cuando un usuario solicita una página que no existe o hace clic en un enlace obsoleto o erróneo, el servidor devolverá un código de estado HTTP de error 404 Not Found. Siel servidor no tiene configurada ninguna página de error personalizada, entonces el usuario verá simplemente un mensaje como este:

404 not found

Nosotros para evitar este horrible mensaje utilizamos el plugin 404page de Peter Raschendorfer.

Es un plugin gratuito, y si te fijas, ha sido actualizado hace 2 meses (1); tiene más de 40.000 instalaciones activas (2) y su valoración es de 5/5 (3).

404page

URL de descarga: https://es.wordpress.org/plugins/404page/

Anti SPAM

AKISMET

Ya sabemos lo pesado que puede llegar a ser lidiar con los “comentarios basura” y el tiempo que nos hace perder. Tampoco es plato de gusto que nos entre algún software malintencionado y nos fastidie el trabajo…

Menos mal que tenemos plugins que lo puede evitar. Nosotros hemos seleccionado Akismet de Automattic, pues consideramos que es el mejor antispam, superando ya el millón de descargas; actualización de hace 4 días (en el momento de escribir este post); y valoración de 5 sobre 5.

Este plugin, junto con “Hello Dolly” no hace falta descargarlo pues está incluído por defecto en la plataforma WordPress, eso sí, se necesita una clave (API key) para hacerlo funcionar, y la puedes conseguir registrándote en Akismet.com y seleccionando el plan preferido, gratis o de pago.

Política de Cookies

asesor de cookies

La Ley de los Servicios de la Sociedad de la Información y el Comercio Electrónico (LSSI-CE) exige que los sitios Web dispongan de una política de Cookies para que los usuarios sepan si el sitio que están visitando les dejará cookies en su ordenador o no, y en caso afirmativo, que sean ellos los que decidan si continúan en ella o prefieren irse.

Para ello, disponemos de un plugin que te facilita enormemente la vida. Se trata de Asesor de Cookies para normativa española de Carlos Doral Pérez

El funcionamiento consiste en mostrar un mensaje cada vez que un nuevo usuario visita su web avisándole que si pulsa el botón ACEPTAR consiente la instalación de cookies en su navegador web.

Además este plugin te proporciona los textos legales y técnicos iniciales para confeccionar la política de cookies, se generan automáticamente y los puede editar si lo deseas.

Tiene una valoración 4/5; más de 70.000 descargas y se actualizó hace 5 meses.

URL de descarga: https://es.wordpress.org/plugins/asesor-cookies-para-la-ley-en-espana/

SEO

Yoast Seo

En la Sociedad Digital, si no eres visible en la Web, simplemente “no existes”, por eso, las técnicas de optimización de los sitios Web para beneficiar el posicionamiento en los buscadores (SEO – Search Engine Optimization), se han convertido en un elemento más que imprescindible.

Para esta funcionalidad no existe rival que se pueda comparar con el plugin Yoast SEO de Team Yoast. Con más de 1 millón de instalaciones activas, actualizaciones casi a diario y más de 15.000 valoraciones 5 sobre 5.

Tan solo explicar toda la funcionalidad de Yoast SEO, nos llevaría varios post o un manual de usuario, y no es el objetivo de este artículo, pero baste decir que entre otras muchas cosas, este plugin, permite:

  • Editar el snippet con la palabra clave, título, descripción y el slug (sección de texto que sigue inmediatamente después de tu nombre de dominio, y forma la dirección URL de una página o post, por ejemplo: midominio.com/este-es-el-slug)
  • Analiza los contenidos de la Web y te orienta de las carencias o de las cosas que has hecho correctamente: imágenes, cabeceras, densidad de palabra clave, etc.
  • Permite crear el fichero sitemap.xml y editar el fichero robots.txt
  • Indicar si una página debe ser indexada, o no, por los buscadores

 

URL de descarga: https://es.wordpress.org/plugins/wordpress-seo/

Copias de seguridad

Updraft Plus

El código fuente de WordPress es muy conocido así como el de muchos de sus plugins. Esto lo convierte en un candidato ideal para ataques de Hackers. Del mismo modo, cualquier incidencia involuntaria, puede llevar al traste con todo o parte del contenido de nuestro sitio Web, por lo es importante hacer copia de seguridad regularmente de nuestro sitio WordPress.

Nosotros hemos escogido el plugin UpdraftPlus WordPress Backup Plugin de UpdraftPlus.Com, DavidAnderson, con más de un millón de instalaciones activas, actualizado casi a diario y casi 3000 valoraciones 5/5.

URL de descarga: https://es.wordpress.org/plugins/updraftplus/

 

Con estos 5 plugins, esperamos haberte facilitado un poco la vida como desarrollador/diseñador profesional de sitios Web.

¡Hasta la próxima!

Como insertar un captcha en un formulario web

Como diseñador/programador de aplicaciones y sitios Web, no hay nada más molesto y penoso, que te llamen los clientes quejándose por el bombardeo de correos basura que reciben a través de los formularios de contacto de las páginas Web que tú les has diseñado.

¿Qué puedo hacer? Nos dicen, aburridos por el aluvión incontrolado de spam que les hacen perder un buen rato de su tiempo laboral para revisar y poder discriminar lo útil de la basura y eliminarla.

Por esa razón, siempre que nos solicitan el diseño de una Web con formulario de contacto, implementamos un captcha.

¿Y que es un captcha? Te preguntarás

 

CAPTCHA son las siglas de “Completely Automated Public Turing test to tell Computers and Humans Apart” (prueba de Turing completamente automática y pública para diferenciar ordenadores de humanos), y se trata realmente de una prueba desafío-respuesta utilizada en computación para determinar cuándo el usuario es un robot o un ser humano.

Esta prueba consiste en que el usuario introduzca correctamente un conjunto de caracteres que se muestran en una imagen distorsionada que aparece en pantalla. Se supone que una máquina no es capaz de comprender e introducir la secuencia de forma correcta, por lo que solamente el humano podrá hacerlo.

reCAPTCHA es una extensión y mejora de Captcha que fue adquirida por la empresa Google.

A partir de 2012, Google empezó a incluir imágenes obtenidas de Google Street View, con el fin de que la palabra desconocida sean números o nombres de calles, para alimentar su base de datos y mejorar la precisión de direcciones.

 

Insertar un captcha

Vamos a la faena…

 

¿Como podemos implementar un reCaptcha en nuestra Web? Lo primero que necesitamos es ser usuario de Google y registrarte en google.com/recaptcha/

Una vez identificado e iniciado sesión en tu cuenta de Google te pedirá que registres un nuevo sitio donde incluir el reCaptcha.

 

Insertar un captcha

 

Etiqueta

 

Es el nombre con el que identificaras en el futuro el sitio o la sección que integrará el reCaptcha

A continuación, elegimos un tipo de reCaptcha.

La primera opción “reCAPTCHA v2” requiere que el usuario haga clic en una casilla de verificación que indica que el usuario no es un robot. Esta es la opción más sencilla para integrarse.

Insertar un captcha

 

Las otras opciones requieren llamadas a la API de JavaScript o a la Biblioteca Android reCAPTCHA. La implementación es más compleja que la primera opción y no las trataremos en este post.

 

Dominios

 

En este apartado incluiremos todos los dominios que estarán protegidos por el captcha. Se podrán añadir tantos como se quiera. Uno debajo de otro, es decir, uno por línea.

Al formar parte de un mismo sitio, todos ellos tendrán las mismas keys.

Por último habrá que aceptar los términos del servicio y solicitar, si quieres, que Google te  mande alertas si detecta algún problema con tu sitio, como errores de configuración o un aumento del tráfico sospechoso.

Pulsamos el botón de “Registrar” y listo.

 

Insertar un captcha

 

Fíjate que se han generado dos claves: Clave del sitio que hay que usar en el código HTML que muestra tu sitio a los usuarios, como veremos a continuación. Y la Clave secreta que se usará  para las comunicaciones entre tu sitio y Google.

Como el propio Google te recomienda, has de tener la precaución de no revelársela a nadie.

¡Enhorabuena! Ya estás en disposición de materializar el capctcha en tu formulario Web.

Vamos con ello. Después te explico algún detalle del código utilizado

Código HTML

 

 

 

Tendrás que incluir en el formulario la entrada al reCaptcha y la librería javscript.

¡Fíjate en el detalle de la URL, donde hemos incluido el idioma del recaptcha (hl=es)!

 

 

La pequeña función enviar(), se ejecutará cuando se envíe el formulario, con el evento “onSubmit

 

 

Esto es todo por hoy. Esperamos que te sea de ayuda.

Nos vemos en el siguiente post.

¡Hasta la próxima!

Validación de un formulario ASP.NET con HTML5

Utilizar los controles HTML5 para la validación de un formulario ASP.NET desde el lado del cliente

Como bien sabes, ASP.NET tiene sus controles de servidor destinados a la validación de formularios, tanto del lado del cliente como del servidor, pero en esta ocasión, nos vamos a valer de la potencia de HTML5 y su capacidad para llevar a cabo tareas de validación, para comprobar, desde el cliente, los datos introducidos en un formulario, antes de ejecutarse la funcionalidad deseada. En resumen: La Validación de un formulario ASP.NET con HTML5.

En este ejemplo, vamos a realizar un formulario de contacto con campos típicos (Nombre completo, DNI, fecha de nacimiento, domicilio, etc).

Nuestra aplicación tomará los valores de los <input>, los mandará por email y se registrarán en una tabla de una B.D. SQLServer.

En casos como este, vemos que un formulario con muchos campos puede resultar demasiado “pesado” si se utililzan controles de servidor de entrada de datos <TextBox>, de validaciones, etc., para unos requerimientos tan pequeños. Y es ahí, donde HTML5 puede sacar toda su potencia escondida para materializar esta sencilla pero necesaria función de validar del lado del cliente, toda vez que, en esta ocasión, no vamos a utilizar la validación del lado del servidor.

¡Ojo! Este es un simple ejemplo de validación del lado del cliente, pero esto no quiere decir que no demos la importancia necesaria a la validación del lado del servidor.

Validación de un formulario ASP.NET aprovechando la funcionalidad de HTML5

Validación de un formulario ASP.NET con HTML5

Ya que hemos decidido que vamos a utilizar para nuestro formulario ASP.NET controles nativos de HTML5, para aprovechar la funcionalidad intrínseca de validación, debemos tener en cuenta un par de salvedades:

  • Recuerda poner el atributo “server”  a la propiedad “runat” de los controles <input> de HTML, de lo contrario, y como es lógico, no podrás disponer de sus propiedades en tiempo de ejecución
  • Los controles <input> de HTML no disponen de la propiedad “Text” como sus hermanos mayores <TextBox>, en su caso, la propiedad que recoge el valor introducido es “Value
  • Resulta extremadamente práctico para la validación, hacer uso de CSS para remarcar las entradas correctas (verde) o incorrectas (rojo) de texto en los controles <input> y que veremos más adelante

 

Vamos con la parte de diseño

 

Llegados a este punto, es importante reseñar tres propiedades fundamentales para la validación “required“, “type” y “pattern“. La primera se utiliza  para decirle al navegador que es obligatorio que el campo <input> contenga algún valor. Esta propiedad no necesita atributos.

La propiedad type, no sólo sirve para indicar que el <input> es de tipo text, submit o password. HTML5 dispone de una gran variedad de valores para esta propiedad: email, date, month, number, url… etc. Por lo tanto, si un <input> es de tipo “email”, el navegador validará su contenido y mostrará un mensaje en caso de que dicho contenido no se adapte al formato correcto de un correo electrónico.

Si queremos mostrar un mensaje concreto de error, necesitamos la propiedad title:

<input runat=”server” type=”text” id=”txtEmail” name=”txtEmail” class=”form-control ” placeholder=”¿Cual es tu eMail?” pattern=”^[\w._%-]+@[\w.-]+\.[a-zA-Z]{2,4}$” required title=”El email introducido no tiene un formato correcto”>

La última propiedad: pattern, sirve para establecer el patrón que exigimos a HTML5 sobre como validar el elemento <input> en cuestión. Obviamente el patrón se basa en regex (expresiones regulares), pero para facilitarte la tarea, te vamos a dejar alguno de los patrones más comunes:

  • Documento nacional de identidad (8 dígitos y 1 letra, sin espacios: ejem. 01234567H): “[0-9A-Z][0-9]{7}[A-Z]
  • Fecha (formato dd/mm/aaaa): “(0[1-9]|[12][0-9]|3[01])[- /.](0[1-9]|1[012])[- /.](19|20)\d\d
  • Teléfono. (9 dígitos comenzando por 9, 8, 7 o 6): “^[9|8|7|6]\d{8}$
  • Correo electrónico: “^[\w._%-]+@[\w.-]+\.[a-zA-Z]{2,4}$
  • Código Postal: “^([1-9]{2}|[0-9][1-9]|[1-9][0-9])[0-9]{3}$
  • Tarjeta de crédito: “^((67\d{2})|(4\d{3})|(5[1-5]\d{2})|(6011))(-?\s?\d{4}){3}|(3[4,7])\ d{2}-?\s?\d{6}-?\s?\d{5}$

Ya te habrás fijado que para validar el contenido del campo txtEmal, no era necesario utilizar un expresión regular, puesto que estableciendo la propiedad type=”email” estaría implícita la valildación de un formato de correo electrónico. No obstante, nosotros seguimos prefiriendo la expresión regular, ya que en algunas ocasiones, la validación con type no ha sido demasiado concienzuda, dando como válido, por ejemplo, una dirección sin dominio ¿?

Si te preguntas porqué utilizamos el término propiedad en vez de atributo, como correspondería a la nomenclatura de un elemento o etiqueta HTML, es porque no debemos olvidar que estos elementos “no dejan de ser controles de .NET” por muy simples que sean.

Otra parte muy importante a la hora de jugar con las validaciones, es mostrar al usuario de forma rápida y visual, cuando un campo obligatorio contiene un valor válido y cuando no. Para ello vamos a utilizar las pseudo clases de CSS required, valid e invalid, para que cuando el contenido sea incorrecto, el <input> aparezca recuadrado en color ROJO, y VERDE cuando esté OK.

Validación de un formulario ASP.NET aprovechando la funcionalidad de HTML5

CSS

¿Y que haríamos con el contenido del formulario?, pues lo que quieras o necesites.

En este ejemplo, que es un formulario de contacto de una Web, generamos un email con los datos recibidos del formulario, los grabamos en la tabla “solicitantes” de una BD, y reseteamos a blancos los contenidos de los campos para evitar el viewstate, aunque también podríamos haber inhabilitado la propiedad en tiempo de diseño: enableviewstate=”False”. Por último, ponemos el foco en el control txtNombre y lanzamos un mensaje al usuario informando del correcto envío del formulario.

Ten en cuenta que para hacer uso de la clase MailMessage tienes que configurar los parámetros correspondientes <MailSettings></MailSettings> en el fichero Web.config (se muestra más adelante)

Code behind

Función contructorDelFormulario()

 

…Una parte de Web.config

 

Por último, nos valemos de la propiedad onSubmit del objeto form para lanzar un mensaje al usuario de que sus datos han llegado correctamente…

Si te interesa ver como implementamos las cajas de diálogo alerta() y confirmacion() que utilizamos en este ejemplo, y que son similares a alert y confirm de javaScript, aunque muy mejoradas, puedes ver nuestro post titulado “alert y confirm mejorados utilizando jQueryUI.Dialog y ASP.NET“. Y si quieres probar el código de este ejemplo, puedes verlo aquí.

Esperamos que este artículo te haya sido de ayuda. ¡Hasta otra!

 

alert y confirm mejorados utilizando jQueryUI.Dialog y ASP.NET

alert y confirm mejorados utilizando jQueryUI.Dialog y ASP.NET

jQueryUI.Dialog como sustituto de alert y confirm

Un día más, seguimos avanzando en el desarrollo de nuestras interfaces de usuario profesionales, maquetándolas con el el framework Bootstrap. Y en esta ocasión, vamos a poner un énfasis especial en las cajas de dialogos alert y confirm, tan utillizados y socorridos en nuestros programas, bien para solicitar la confirmación del usuario en una acción del programa, o simplemente para informar al usuario que una tarea se ha realizado correctamente, o que ha producido un error… etc.

Como ya sabes, para llevar a cabo esas tareas en las aplicaciones de escritorio, tenemos  la función MsgBox, pero como es obvio, la tecnología de los Windows Forms es muy diferente a la de los Web Forms, por eso, tenemos que buscarnos la vida para materializar en estos últimos, cajas de dialogo semejantes a MsgBox pero aptas para Internet.

Para hacerlo fácil, solo tenemos que hacer uso de las funciones alert y confirm de javascript, cuya funcionalidad está más que implementada en todos los navegadores, pero claro, la estética de estas simplonas cajas de dialogo no se puede decir que destaque por su diseño. Fíjate en el “confirm” del siguiente ejemplo en un navegador Google Chrome.

 

jQueryUI Autocomplete/Dialog y ASP.Net, maquetado con Bootstrap

 

¿No te gustaría disponer de cajas de dialogo profesionales para tus programas, con su iconos y colores descriptivos en función del mensaje que vayas a mostrar?

Pues no te preocupes, porque en este artículo verás como conseguirlo, y para ello nos valdremos de jQueryUI.Dialog. Podríamos utilizar otros plugins para materializar esta funcionalidad, incluso con objetos de servidor de la caja de herramientas del propio Visual Studio, pero finalmente nos hemos decantado por Dialog.

Ya en el post anterior “Envío de correo electrónico con ASP.NET mejorado” empezamos a utilizar también como apoyo al diseño los framework jQuery jQueryUI, haciendo uso de sus plugins jQueryUI.Autocomplete, y jQuery.MultipleFileSelection, y como nos resultó muy práctico para optimizar nuestros diseños, vamos a seguir utilizando jQueryUI, en el programa al que hace referencia este artículo. En esta ocasión nos serviremos de jQueryUI.Autocomplete (nuevamente) y como decíamos, pondremos la puesta en escena del plugin jQueryUI.Dialog.

¿Y porqué utilizar los widgets de jQuery, te preguntarás? Pues una sencilla razón: optimizar de forma exponencial nuestros diseños, dotándoles de extraordinaria versatilidad con muy poquito trabajo. Osea, obteniendo una relación trabajo/rendimiento sin precedentes. Y si sumamos la potencia de jQueryUI Bootstrap, a los desarrollos de nuestras aplicaciones ASP.NET, el resultado nunca puede decepcionar, te lo aseguro.

Vamos al asunto

Nuestro planteamiento para este post es, por un lado, materializar una funcionalidad que seguro te interesa y que consiste en distribuir el contenido de los ítem de un autocomplete en diferentes campos, una vez que se ha hecho la selección de dicho ítem. Por otro lado, queríamos utilizar las nuevas cajas de dialogo mejoradas con las funciones Confirmacion() y Alerta() utilizando el jQueryUI.Dialog.

Y para conseguir dicho propósito, hemos desarrollado una supuesta gestión de donativos a una O.N.G.

El programa, utiliza como fuente de datos una tabla añadida a la B.D. SQL “Northwind“ ya utilizada en ejemplos anteriores. Esta tabla se denomina Donativos y consta, entre otros, de los siguientes campos: NIF (varchar, 9), nombre (varchar, 25), apellido1 (varchar, 25), apellido2 (varchar, 25) y donativo (smallmoney)Evidentemente los datos contenidos en esta tabla se han rellenado mediante un generador aleatorio, por lo tanto son ficticios.

El programa es muy simple. Consiste en seleccionar mediante el autocomplete ubicado en el textBox del NIF (punto 1), un donante registrado en la B.D. Una vez rellenos los textBox con los campos del donante elegido, el foco se situará en el textBox de cantidad a donar (punto 2).

jQueryUI Autocomplete, jQueryUI Dialog y ASP.Net, maquetado con Bootstrap

 

Cada ítem se compone de la cadena: NIF + ” – ” + apellido1 + ” ” + apellido2 + “, ” + nombre. Al hacer clic sobre un ítem de la lista, es decir, cuando se selecciona, se cargan en los textBox correspondientes los valores de los campos del registro elegido. Para llevar a cabo esta funcionalidad, hemos desarrollado un servicio web.

 

jQueryUI Autocomplete, jQueryUI Dialog y ASP.Net, maquetado con Bootstrap

 

autocomplete.jQueryUI:

 

WebService2.asmx:

 

Si te fijas en el código, construimos la clase Contacto con cinco propiedades, cuyos valores serán utilizados para rellenar los textBox correspondientes en la función buscaDonante() del autocomplete.

Bueno, hecho este paréntesis, seguimos con la descripción del programa…

Cuando el usuario hace clic sobre el botón de “Ingresar Donativo“, se le pide la confirmación de la operación que va a realizar (función Confirmacion()) …

ASPNET_6_4
… Y si la confirmación es positiva, es decir, si se pulsa sobre el botón “SI”, se realizan las validaciones necesarias y se informa al usuario de cualquiera de los resultados posibles: de un error por problemas en la validación, o de OK si se ha generado la grabación correctamente (función Alerta()).

 

ASPNET_6_5 ASPNET_6_6

Cajas de dialogo: confirm y alert

Como puedes ver, las cajas de dialogo que hemos desarrollado, se adaptan perfectamente a la misión a la que están encomendadas. Son modales y utilizan un icono descriptivo relacionado con su función, así como distintos colores para complementar dicha descripción:

  • Interrogación: color naranja -> Confirmación
  • warning: color en rojo -> Alerta de error
  • ok: color  en verde -> Alerta de acción realizada
  • Info: color en azul -> Alerta informativa (En este ejemplo no empleamos ninguna alerta info, pero a continuación verás como utilizarla)

Los iconos utilizados forman parte de la galería glyphicon, de Bootstrap.

Además de su funcionalidad, puedes comprobar lo que gana estéticamente el diseño de la interfaz al utilizar estas cajas de dialogo.

Función Confirmacion()

Como hemos dicho, esta función viene a suplir a la confirm() clásica de javascript. Recibe 3 parámetros: titulo, texto y button. Este último, hace referencia al asp:Button o asp:linkButton cuya acción se quiere confirmar. Esta caja de dialogo, dispone de un icono de interrogación de color naranja y dos botones de “Si” y “No”. Cambiar estos botones por otros nombre, es tan fácil como cambiar el código javascript de su función:

 

Función Alerta()

Esta función sustituye a la clásica alert() de javascript. Al igual que la anterior función, Alerta() recibe 3 parámetros: titulo, texto y tipo. En función de éste último, dispondrá de un modelo de icono, y bajo el contenido del mensaje, tendrá un botón “Aceptar”. Igualmente, cambiar este botón por otro nombre (“OK”, “Vale”, “Entendido”…), es tan fácil como cambiar el código javascript de su función.

Los valores de tipo pueden ser: warning, info y ok, que como te habrás dado cuenta, coinciden con los nombres de los iconos de la galería glyphicon, de Bootstrap.

 

Pues una vez descrito el funcionamiento de este simple programa a modo de ejemplo para utilizar las nuevas cajas de dialogo y ver como se puede manipular una función autocomplete para rellenar textbox en función de los ítem seleccionados, pasamos a mostrarte la parte de diseño del interfaz de usuario.

 

Y ahora vamos con la parte de código

Page_Load:

 

Cada vez que se carga la página, ponemos el foco en el textBox txtNIF para buscar un nuevo donante. Sin embargo, si al hacer un postback este textoBox tuviera algún valor, significa que no se ha llegado a producir la donación, y ponemos el foco en el textBox txtDonativo para que el usuario complete la acción.

 

IngresarDonativo_Click:

 

Fíjate que para invocar a la función Confirmacion(), lo hacemos en tiempo de diseño con el parámetro onclientclick del objeto de servidor asp:LinkButton, donde le pasamos sus tres parámetros: Titulo, Texto y el botón que hace la llamada.

onclientclick=”return Confirmacion(‘Gestión de donativos’, ‘¿Seguro que quiere realizar el donativo?’, this);” 

 

Sin embargo, las llamadas a la función Alerta(), se hacen, como es lógico en tiempo de ejecución, a demanda de cualquier resultado que se quiera informar al usuario. Se invoca con el método RegisterStartupScript del control ScriptManager de la siguiente forma:

Script = “<script type=text/javascript>Alerta(‘Gestión de donativos’,’¡El donativo ha sido registrado OK!’,’ok’);</script>”
ScriptManager.RegisterStartupScript(Me, GetType(Page), “”, Script, False)

Como ves, a la función Alerta() se le pasan los parámetros Título, Texto y Tipo de icono.

 

Bueno, pues esto es todo por hoy. Espero que te haya sido útil este artículo y como siempre, si quieres “toquetear” la demo, lo puedes hacer en http://siinet.com/tutoriales/ejemplo6.aspx

¡Hasta la próxima!

Envío de correo electrónico con ASP.NET mejorado

Envío de correo electrónico con ASP.NET mejorado

Envió de correo electrónico con ASP.NET, Bootstrap y JQuery

El mes pasado, publicamos un post que enseñaba como programar el envío de correos electrónicos con ASP.NET y maquetado con Bootstrap, y hoy volvemos con otro artículo, en el cual, mejoramos un poco la anterior interfaz de usuario, a fin de dotarla de mayor funcionalidad.

 

Envío de correo electrónico Mejorado

La base del diseño y el maquetado Bootstrap, así como la funcionalidad, son prácticamente iguales que el anterior ejemplo, si bien, hemos optimizado la introducción de las direcciones de correo electrónico en los campos de texto “Para”, “CC” y “Bcc”, usando un autocompletador tipo GOOGLE (punto 1), de forma que según se vayan tecleando caracteres sobre dichos campos, se irán mostrando las coincidencias encontradas en una fuente de datos. Para llegar a cabo esta funcionalidad, hemos usado el widgets Autocomplete del famoso framework jQuery User Interface. Podríamos haber optado también por el control AutoCompleteExtender de AJAX Control Toolkit, pero nos pareció interesante mostrarte la inclusión de utilidades ajenas a ASP.NET.

Envío de correo electrónico Mejorado

Como fuente de datos para éste y posteriores ejemplos, hemos creado y posteriormente añadido una tabla a la B.D. SQL “Northwind“, ya utilizada en ejemplos anterioresEvidentemente los datos contenidos en esta tabla se han rellenado mediante un generador aleatorio, por lo tanto ficticios. No obstante, y al margen del autocompletador, siempre puedes optar por añadir emails auténticos de forma manual.

En este interfaz mejorado, hemos incluido, un editor de código HTML (punto 2) por si el usuario quisiera mandar por correo electrónico un contenido enriquecido (con textos de diferentes colores, tamaños de fuente de letra, sangrías, etc). Este editor permite, mediante botones en una barra de herramientas, crear contenido HTML sencillo con suma facilidad, incluso para aquellos que no controlen el lenguaje de etiquetas.

Para materializar el editor, hemos utilizado el control de servidor HtmlEditorExtender de AJAX Control Toolkit,

Hemos incorporado también 2 controles de servidor CheckBox. El primero (punto 2), para elegir entre un envío de email con contenido enriquecido HTML del cuerpo, o envío estándar con texto plano.

Envío de correo electrónico Mejorado

 

Cuando está seleccionado (checked) el campo para elegir el Cuerpo HTML, se muestra automáticamente la barra de herramientas con los botones del editor, y desaparece cuando se quita la selección del campo. El contenido de este campo, hará que el cuerpo del correo se envíe finalmente en formato HTML o no.

Envío de correo electrónico Mejorado

 

El segundo control CheckBox, (punto 5), ofrecerá la posibilidad de solicitar un acuse de recibo cuando esté seleccionado.

Envío de correo electrónico Mejorado

 

También, se ha incorporado la prioridad en el envío, con tres opciones: baja, normal y alta (punto 3).

Envío de correo electrónico Mejorado

 

Y por último, hemos añadido la funcionalidad de gestionar ficheros adjuntos (punto 4). Esta utilidad, permite seleccionar ficheros que serán incluidos en una lista visible. Cualquiera de los ficheros seleccionados, pueden ser eliminados de la lista antes de enviarse el email, pulsando sobre el cuadrado rojo. Para materializar esta funcionalidad, utillizamos el plugin Multiple File Selection de JQuery.

 

Envío de correo electrónico Mejorado

Antes de mostrarte el código fuente, te recuerdo que gran parte de la funcionalidad, no ha cambiado respecto del ejemplo anterior, por lo tanto, para no alargar demasiado este post, te mostraremos solo las novedades. Por eso, te aconsejamos que leas primero, si no lo has hecho ya, el Ejemplo 4, pues es la base de partida de éste.

Como has podido comprobar, hemos incluido un par de plugins de jQuery en el ejemplo, para que veas la grandes ventajas que nos puede ofrecer los frameworks externos en nuestros programas de ASP.NET. No olvides incorporar los ficheros jquery.min.jsjquery.MultiFile.js y la siguiente función entre las etiquetas <head>…</head>, para el autocompletador:

Esta función BindControls(), adapta la funcionalidad de “autocompletar” a los campos CPH_Cuerpo_txtPara, CPH_Cuerpo_txtCC y CPH_Cuerpo_txtBcc, que como habrás comprobado, son los campos HTML que dan como resultado, los controles de servidor textBox: txtPara, txtCC y txtBcc, una vez compilados. Toma la información de la BD a través de la función ShowEmail del Servicio Web y le indicamos que tiene que introducir un mínimo de 2 caracteres para que funcione.

WebService:

 

Capa de diseño:

Y ahora vamos con la capa de negocio. Para ello, solo te mostraremos aquellas funciones que hayan cambiado respecto del ejemplo anterior, por lo tanto, si no lo has hecho ya, te aconsejo que lo leas antes de continuar.

Enviar el mensaje

 

CheckBox para utillizar el editor HTML

el control editor de texto HTML está disponible cuando el CheckBox está seleccionado…

 

Como siempre, te dejamos el ejemplo para que puedas toquetear y probar todo lo que hemos visto en este post. ¡Espero que te haya gustado!

Ir al Ejemplo 5

Hasta la próxima.

ListView moderno y funcional maquetado con Bootstrap

ListView moderno y funcional maquetado con Bootstrap

Diseño & ASP.NET: ListView con Bootstrap

Hoy volvemos a la sección de Diseño & ASP.NET con un nuevo ejemplo de maquetación de controles de servidor de ASP.NET, utilizando el framework Bootstrap. Y en este caso vamos a utilizar el control  ListView, uno de los controles de servidor más potentes y funcionales que contiene la caja de herramientas de Visual Studio.

Si en el post anterior gestionábamos la tabla de clientes de la BD Northwind mediante el control de servidor GridView, hoy lo haremos con ListView, pues este último es mucho más moderno que el primero y por lo tanto más funcional. No me entiendas mal, GridView, fue y sigue siendo un gran control, pero sinceramente, el control ListView, mucho más moderno, lo ha superado con creces.

El ejemplo de hoy, consiste en gestionar los datos de la tabla clientes, mediante un formato tabular.

Esta tabla contiene todos los registros de clientes, paginados de 10 en 10. Cada fila, dispone de dos botones, uno para la modificación de los datos y otro para la eliminación del registro. Al final de la tabla, aparece un registro de inserción, y debajo de este, una gestión muy completa del paginado, mediante un control de servidor DataPager asociado al control ListView. Para completar la gestión, incluiremos un buscador de registros que compara la entrada con los campos Contacto (ContactName), Empresa (CompanyName) y Referencia (CustomerID).

En definitiva, este ejemplo intenta crear una completa gestión de una tabla de datos de la forma más sencilla posible de cara al usuario, pero con toda su funcionalidad, y con un aspecto moderno y atractivo. Un maridaje perfecto entre ASP.NET y Bootstrap.

¡Vamos a ello!

Este sería el Interfaz de usuario:

ListView&Bootstrap-1

 

El conjunto lo dividiremos en 6 partes.

1: Líneas de detalle en la estructura tabular del ListView,

2: Un buscador,

3: Agregar nuevo registro,

4: Navegación entre páginas,

5: Visor del paginado, y

6: Totalizador de registros

Para completar el interfaz de usuario, implementaremos mensajes de confirmación, con preguntas al usuario, para llevar a cabo las acciones de gestión: borrado, actualización, inserción, etc.

 

ListView moderno y funcional maquetado con Bootstrap

 

También queremos que los resultados de las acciones descritas anteriormente, vayan acompañadas de un mensaje informativo, de forma que si la acción se lleva cabo con éxito, el mensaje estará enmarcado en color verde (OK), mientras que si la acción no se puede efectuar, por la razón que sea, aparecerá el mensaje enmarcado en color rojo (Error).

 

ListView moderno y funcional maquetado con Bootstrap

 

Fíjate que estamos utilizando las clases bootstrap en, prácticamente, todo el diseño de la IU: formularios; textbox; botones; botones con iconos; tablas y etiquetas.

Para empezar verás el fichero de diseño ASP.NET y HTML: Ejemplo3.aspx. Como en el ejemplo anterior (ejemplo2.aspx), utilizamos una página maestra denominada MasterPage.master y el fichero Ejemplo3.aspx.vb con el codeBehind.

Ejemplo3.aspx

Encabezado

 

ListView

 

Paginado

 

SQLDataSource

 

Al control de servidor ListView se le indica que el DataKeyNames será el campo ClienteID, también le decimos que la inserción de registros se incorporará al final de la tabla: InsertItemPosition=”LastItem”

Así mismo, se le asigna los procedimientos correspondientes al borrado, inserción y actualización de registros y a la cancelación de edición:

  • OnItemInserted=”ListView_Clientes_ItemInserted”
  • OnItemUpdated=”ListView_Clientes_ItemUpdated”
  • OnItemDeleted=”ListView_Clientes_ItemDeleted”
  • OnItemEditing=”ListView_Clientes_ItemEditing”
  • OnItemCanceling=”ListView_Clientes_ItemCanceling”

 

Fíjate también como utilizamos las clases bootstrap para modelar la tabla contenedora del ListView en la plantilla LayoutTemplate:
class=”table table-hover table-bordered table-condensed”

Utilizamos la clase “table-hover” para que el registro por el que pasa el cursor, se muestre de color gris. La clase “table-bordered” pone un borde a todas las celdas de la tabla, y por último, “table-condensed”, reduce un poco el alto de las celdas.

También utilizamos la clase bootstrap “label-warning” para resaltar en color naranja los totales y las páginas activas en la navegación entre páginas del control DatePager.

Ahora vamos con el CodeBehind

CodeBehind

Load de la página

Renderizado del control DatePager

Subrutina de cancelar acción

Subrutina de editar registro

Subrutina de insertar registro

Subrutina de borrar registro

Subrutina de actualizar registro

Buscar cliente

 

Y hasta aquí hemos llegado. Puedes acceder directamente al ejemplo 3 y probar toda la funcionalidad explicada en este post. Esperamos te haya gustado.

En siguientes artículos, continuaremos trabajando con los conceptos de diseño de ASP.NET y el framework Bootstrap.

¡Hasta pronto!

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.

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.