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 y¬†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¬†y¬†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 anteriores.¬†Evidentemente 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.js,¬†jquery.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.