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!

Actualizaciones de Google

Actualizaciones de Google

Actualizaciones de Google

Con este artículo, comenzamos una nueva sección dedicada al SEO (Search Engine Optimization), o como comúnmente se le viene llamando “posicionamiento en buscadores”. En este caso nos vamos a estrenar hablando de las actualizaciones de Google.

De todos es sabido, que si quieres buscar algo en Internet, bien sea por ordenador o por dispositivo móvil, lo haces con, o a través de Google, a no ser que seas chino o ruso.

Google, es el líder mundial, haciéndose extraordinariamente significativo su uso en Europa y Latinoamérica, donde la mayoría de sus estados superan el 90% en cuota de búsquedas.

No obstante, existen dos países donde Google no es el buscador más utilizado pues Baidu y Yandex, lideran el mercado de búsquedas en China y Rusia con un porcentaje del 80% y 54% respectivamente.

En lo que respecta a nuestro país, Google mantiene desde hace años una cuota de búsquedas en torno al 95%.

De cualquier forma, Google también ha cambiado y evolucionado, ¡y mucho!, desde su nacimiento, sobre todo cuando en 1999, lanzó al mercado su algoritmo PageRank, cuyo éxito fue en gran medida lo que convirtió a Google en uno de los buscadores más efectivos de la historia, pues conseguía priorizar entre las páginas Web dándoles un ranking de popularidad.

La influencia del PageRank fue tan alta en el mundo del posicionamiento, que se convirtió en una fuente inagotable de manipulaciones por parte de usuarios que buscaban estar arriba a toda costa. Bastaba con generar o conseguir muchos enlaces que apuntaran a nuestra web, hacer intercambios con otros usuarios, o pagar por ellos.

Pero todo tiene un límite, y el pasado 7 de marzo de este año 2016 Google hizo desaparecer de forma oficial el PageRank visible, pasando a tener todas las páginas un PageRank visible de “cero”.

Hablamos del “PageRank visible”, pero lo que no ha dejado de existir es el PageRank “real” que es un valor numérico basado en una fórmula que usa Google para el posicionamiento.

Si quieres saber más sobre las fechas de actualización de PageRank: http://www.gassoftwares.com/tools/pagerank-info

Además de PageRank, había otra forma muy común de posicionarse, y era mediante la repetición de palabras clave en el contenido de la Web.

Al sumar ambas técnicas, podíamos encontrarnos en las primeras posiciones, páginas Web de pésima calidad. Desnaturalizadas y carentes de una estructura lógica, en definitiva, poco atractivas para los usuarios que tuvieran la poca fortuna de navegar por ellas.

Y así fue como Google comenzó a implementar progresivamente sus famosas “actualizaciones” de su algoritmo, de cara a revertir este despropósito y conseguir que los sitios Web que estuvieran bien posicionados, lo hicieran por méritos propios: calidad, buenos contenidos, y pensando en el usuario por encima de todo y no solo en el posicionamiento.

¡Y vaya si se lo tomaron en serio! Actualmente Google actualiza su algoritmo de indexación con pequeñas variaciones, a veces incluso poco relevantes para SEO, prácticamente a diario. Y cada cierto tiempo, con menos frecuencia, lleva a cabo cambios de mayor envergadura que afectan de forma significativa los resultados de búsquedas.

Esto, nos lleva a una conclusión a modo de “ley de leyes del SEO”: la batalla por el posicionamiento, ha de ganarse día a día, mientras esté “viva” la web en Internet. De lo contrario se corre el riesgo de pillar una determinada actualización y perder una posición privilegiada para no volver jamás…

Hay que estar muy atentos a todos los cambios y actualizaciones que se van publicando, para analizar en que puede afectar a nuestra web, y obrar en consecuencia.

¿Y cuáles han sido las actualizaciones más importantes que ha implementado Google en su algoritmo de indexación?

 

Google Caffeine

Google Caffeine

Caffeine (Cafeína)”, fue el nombre tan original que puso Google a su primer cambio, y que se implementó en el verano del año 2009.

Tenía como principal objetivo optimizar el rendimiento del motor de búsqueda reduciendo a la mitad sus tiempos y actualizar la información con los nuevos servicios que incluían las Redes Sociales: Facebook y Twitter.

 

Google Panda

Google Panda

Para no perder la originalidad en los nombres de sus actualizaciones, “Panda” fue la siguiente.

Puesta en marcha en el 2011. Y por fin, con el objetivo primordial de “hacer justicia” y hundir en los abismos infernales del buscador, aquellas web cuyos contenidos eran de baja calidad, por decirlo de una forma suave. Otros dirían “basura”.

Sitios web desnaturalizados sobre todo por el uso desenfrenado de palabras clave, contenidos copiados o duplicados, granjas de enlaces. En una palabra, web que no pensaban lo más mínimo en los usuarios sino en estar arriba.

¡Y vaya si afectaron los cambios del amigo “Panda”! Más del 12% de las búsquedas fueron alteradas por el nuevo algoritmo.

Desde entonces, englobados en la misma actualización, Google ha seguido lanzando versiones de mayor o menor calado hasta julio del año 2015, que fue la última.

 

Google Penguin

Google Penguin

La actualización “Penguin (pingüino)” fue lanzado en abril de 2012 con el objetivo principal de bonificar las buenas prácticas en busca de la “excelencia web”, y penalizar lo contrario.

Este algoritmo se centra en los elementos externos a los sitios web (off page), y como decimos,  otorga mayor valor al “buen hacer” mirando por el usuario, mientras que penaliza hasta límites insospechados aquellos sitios que buscan el posicionamiento mediante técnicas fraudulentas, spam, comentarios y enlaces en foros y blogs.

Esta actualización no ha afectado un porcentaje tan alto de búsquedas como Google Panda, y entre sus diferentes versiones, la más importante quizás, y tras varios años de pruebas, sea la última -hasta ahora- cuya versión es la 4.0, lanzada en septiembre de este año 2016.

Al igual que hiciera en su momento con “Panda”, Google da por “finiquitada” la actualización “Penguin”. Pero ¡ojo! Esto no quiere decir, que no haya más versiones, sino que no las anunciará.

 

Google EMD

Google EMD

La actualización “EMD“, lanzada en septiembre del año 2012, tenía el claro objetivo de dejar de bonificar, para incluso penalizar severamente, aquellos sitios web que, disponiendo de un nombre de dominio coincidente con las palabra de búsqueda, mantenían unos contenidos de baja calidad, y por lo tanto, poco atractivos para el usuario.

Y es que hasta la llegada de EMD, disponer de un nombre de dominio que coincidiera exactamente con una palabra clave muy utilizada, posibilitaba tener una posición privilegiada. Premio que en muchos casos, no era para nada merecido.

Fíjate bien y no te confundas. Para ser penalizado por esta actualización, Google ha de determinar que los contenidos web del sitio han de ser de baja calidad.

La técnica de disponer de un nombre de dominio coincidente con palabras muy buscadas, sigue siendo muy positivo, siempre y cuando la web tenga contenidos de calidad.

 

Google Hummingbird

Google Hummingbird

Coincidiendo con su 15º aniversario, Google lanzó a finales de septiembre del año 2013 la actualización “Hummingbird (Colibrí)”.

Con “Hummingbird” Google da un verdadero salto cualitativo, ya que no se trata de una actualización más, sino de un cambio absoluto en su concepción que ha llegado a afectar casi a la totalidad de las búsquedas, al modificar de forma significativa los criterios de indexación.

Cada vez más, los usuarios consideran a Google como un oráculo en el que depositan su confianza. Y la forma de interactuar entre ambos, se traduce en una semántica natural y cercana a base de preguntas y respuestas cortas, como si de una conversación humana se tratara, dando prioridad a la idea, en detrimento de la palabra coincidente.

Esta interactuación se acentúa más si cabe, con el uso de dispositivos móviles, donde ganan  terreno las consultas a través de voz.

 

Google Pigeon

Google Pigeon

Pigeon (Paloma)” fue lanzada por Google en el verano del año 2014, con el propósito de mejorar la experiencia de los usuarios que realizan búsquedas de ámbito local.

 

Mobilegeddon

Mobilegeddon

Mobilegeddon” que suena más a profecía bíblica anunciando el fin del mundo que a  actualización de un motor de búsqueda, tiene como lema “página optimizada para móviles” y fue lanzada por Google en la primavera del año 2015.

Como su lema indica, esta actualización afecta a los sitios web no preparados para móvil, siendo penalizados en los resultados de búsqueda desde dichos dispositivos.

Por supuesto, Google en su incansable actividad, ha implementado, implementa y seguirá implementando actualizaciones, quizás no tan rimbombantes como las mostradas aquí, pero igual de efectivas, por lo que hay que estar muy atentos para que nuestras web sigan en perfecto estado de posicionamiento.

¡Y esto es todo por hoy!

Pero no te preocupes que seguiremos hablando de temas SEO en próximos artículos.

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.