miércoles, 6 de diciembre de 2017

WP - Diseño Web - Panel de carga (loading panel)


Hola nuevamente. Tratando de manternerme conectado, (y mientras espero a que se termine de instalar SQL Server), en esta ocasión quiero compartirles una forma bastante sencilla de hacer un panel de cargado con CSS y javascript. El panel de cargado usualmente es un componente que se utiliza para invalidar un área determinada de la página web mientras se realiza algún proceso, para evitar que el usuario realice alguna acción dentro de dicha área.

El panel que les mostraré básicamente es un DIV que poseerá un GIF animado como indicador de procesamiento. Este “panel” se superpondrá a otro elemento DIV, que es el área a invalidar.

Primeramente, este es el HTML de la página web:



Obsérvese que el DIV que se desea invalidar es el que posee el ID "area_invalidar". Dentro de este se ha colocado el DIV que servirá de panel de cargado, como primer elemento hijo (ID="panel_carga").

Luego, tenemos el archivo CSS ("estilos.css"):



La parte de mayor interés está marcada entre los comentarios "Clases CSS de interés". Nótese que el DIV que representa el área a invalidar tendrá la propiedad position con el valor relative, mientras que el DIV que será nuestro panel de carga tendrá el valor de absolute. Esto se debe a que queremos indicar que las propiedades de posición y tamaño del DIV panel de carga serán relativas con respecto al DIV área a invalidar. Gracias a ello podemos especificar el ancho y alto del DIV panel de carga como 100%, para indicar que éste ocupará todo el espacio del área a invalidar.

Luego, en la misma clase utilizada para el panel de carga, tenemos la propiedad de opacidad (alpha para Internet Explorer, opacity para Mozilla Firefox y otros), con la cual especificamos la razón o porcentaje de opacidad del panel de cargado. Al combinarla con un color de fondo (background-color) se logra un efecto de oscurecimiento y transparencia sobre el área invalidada. Adicionalmente a ello se coloca una imagen de fondo, que en este caso es un GIF animado, mediante la propiedad background-image, para que muestre al usuario un indicador de que se está realizando alguna clase de procesamiento. La imagen es centrada y aparece solamente una vez, gracias a las propiedades background-position:center y background-repeat:no-repeat, respectivamente.

También se tiene la propiedad z-index, que indica la “altura” o nivel del elemento. Dicha propiedad tiene significado dentro del elemento padre, por lo que tiene influencia para todos los nodos hermanos. El valor por defecto es cero, por lo que al colocar un valor de, por ejemplo, 10, nos aseguramos de que el panel de cargado estará sobre el resto de elementos contenidos en el DIV de área a invalidar.

Finalmente tenemos la propiedad de visibilidad, que le colocamos el valor de hidden, para que el panel de carga aparezca oculto al mostrarse la página.

Por otra parte se tiene el archivo de código fuente de Javascript. El javascript es necesario para realizar el cambio de las propiedades CSS a través de las acciones del usuario.



En este caso, según puede observarse en la página HTML (arriba), al presionar el botón "Enviar" se ejecutará la función procesar, que recibe como parámetro el ID del DIV que sirve de panel de carga. Dicha función básicamente se encarga de mostrar el DIV de carga.

Nótese que para efectos demostrativos, al final de la función se colocó una llamada a la función setTimeout, para que el panel de cargado se oculte después de 5 segundos. En una aplicación web real, el panel debería de ocultarse una vez se haya obtenido alguna respuesta o resultado después del proceso solicitado.

Este es el resultado final, antes de presionar el botón:


Luego de presionar el botón, nótese el aparecimiento del panel de cargado solamente sobre el área a invalidar, que para efectos de este ejemplo corresponde al mismo formulario web:


Finalmente después de 5 segundos se oculta el panel de cargado, gracias al uso de la función SetTimeOut.

Como pueden observar este método es una forma fácil, rápida y directa de crear un panel de cargado DIV, utilizando solamente HTML, CSS y javascript puros.

Les debo el código fuente para descargar, ya que lo dejé en otra computadora que he prestado por el momento.

Saludos.

Publicado originalmente el 13/02/2013, en https://itsouvenirs.wordpress.com/2013/02/13/diseno-web-panel-de-carga-loading-panel/.

WP - Nueva sección: SQL Server Snippets

Saludos. En este día quiero anunciarles que he decidido iniciar una nueva sección, llamada SQL Server Snippets, con el objetivo de no dejar de lado el blog debido a la falta de tiempo, y compartir algunas de las cosas que aprendo día a día en mi trabajo con SQL Server. Esta sección consistirá básicamente en entradas breves con segmentos de código (snippets) generalmente cortos, pero muy útiles e interesantes.

Los invito a ver mi primera entrada de esta sección: Tablas con columna autonumérica

Feliz día.

Publicado originalmente el 09/02/2013, en https://itsouvenirs.wordpress.com/2013/02/09/nueva-seccion-sql-server-snippets/.

domingo, 5 de noviembre de 2017

Importar datos desde Excel en C#



Este es un requerimiento con el que muchas veces nos encontramos: ¿Cómo leer datos desde una hoja de cálculo de Microsoft Excel (o similares), utilizando C#? Bueno, existen muchas herramientas y técnicas en el salvaje internet para leer archivos de Excel, desde utilizar las librerías de objetos para interoperabilidad provistas al instalar Excel, utilizar un proveedor OleDB, hasta crear tu propia librería para manipular los archivos de Excel, que después de todo, solo son conjuntos de archivos XML comprimidos con una extensión especial (al menos desde Office 2007).

Sin embargo, mi forma preferida de hacerlo desde hace un par de años, ha sido utilizar la librería EPPlus, que es una librería de código abierto creada por Jan Källman, que provee una API amigable y avanzada para la manipulación de archivos con el formato Office Open XML. Esta librería, publicada bajo la licencia GNU Lesser General Public License, provee funcionalidades que van desde acceder a las celdas de las hojas de cálculo, hasta crear gráficos y tablas dinámicas, así como protección y encriptación de documentos.

EPPlus no necesita librerías de interoperabilidad, ni posee otras dependencias aparte del .NET Framework. Esto permite distribuir la librería como parte de nuestro proyecto, sin requerir la instalación de componentes de terceros. Y lo mejor de todo: está disponible como un paquete de NuGet. Gracias a ello, solo basta con buscar el paquete EPPlus desde el administrador de paquetes de NuGet de Visual Studio, e instalarlo en nuestro proyecto, para hace uso de la librería.

Supongamos por ejemplo que se desea leer un archivo de Excel que contiene en la primera hoja un listado de productos, con los datos Código, Nombre y Precio en las columnas A, B y C, respectivamente. Por simplicidad, asumiremos que todos los productos poseen todos los datos, y que finalizaremos la lectura al alcanzar la primera fila cuyo valor en la columna A esté en blanco. También tendremos en consideración que la primera fila de la hoja posee los encabezados de las columnas. Tendríamos algo así:


Nuestro objetivo será hacer una aplicación de consola sencilla, que lea el listado de productos, y los muestre en la línea de comandos. Para ello, creamos una nueva aplicación de consola de .NET Framework, desde Visual Studio, e instalamos el paquete EPPlus:


Luego, importamos el espacio de nombres OfficeOpenXml, provisto por el paquete EPPlus para el acceso a los archivos de Excel, y System.IO, para la lectura de archivos desde el disco duro. Luego, se procede a escribir el código en el método Main de la clase Program. A continuación se muestra el código fuente final, en el que se explica paso a paso a través de los comentarios el proceso para la lectura del archivo:


El resultado de ejecutar el programa anterior, con el archivo de Excel mostrado, es el siguiente:


Cabe mencionar que el archivo de Excel no debe estar abierto, para poder ser leído. De lo contrario, la aplicación lanzará una excepción al intentarlo leer.

Espero que este ejemplo les haya sido de utilidad, y que se animen a utilizar EPPlus como una alternativa para la manipulación de hojas de cálculo. Que tengan un feliz día.

viernes, 3 de noviembre de 2017

Complementos del navegador para pruebas automatizadas - SideeX


Saludos, en esta ocasión quería compartirles acerca de una herramienta que puede ser de ayuda para la creación de pruebas automatizadas utilizando Selenium: SideeX.

SideeX es, según su sitio web, una versión extendida del Selenium IDE (no sabía que existía hasta la semana pasada :P), el cual es una herramienta del tipo grabar-repetir para la generación de conjuntos de pruebas de UI (Interfaz de usuario) utilizando Selenium. Es extendida debido a que posee funcionalidades adicionales a las de Selenium IDE, y ha sido adoptada oficialmente por el SeleniumHQ como punto de partida para las siguientes versiones de Selenium IDE. Adicionalmente, no solo está disponible como extensión para Firefox, sino también para Google Chrome.

Tomando como ejemplo la versión de Google Chrome, para instalarlo basta con instalarlo en el navegador desde el respectivo enlace (https://chrome.google.com/webstore/detail/sideex-an-extended-versio/nefadabeoagfkgmkgegmjgdhegbllple), presionando el botón Agregar a Chrome.


La versión instalada durante la escritura de esta entrada es la v2.3.0. Una vez instalado, el botón con el logo de SideeX aparecerá en la parte superior derecha del navegador. Dicho botón sirve para iniciar la extensión.



Crearemos un caso de pruebas sencillo para ver SideeX en acción. Para ello, accederemos a la página de inicio de sesión de pruebas del artículo anterior: http://www.phptravels.net/admin

Una vez allí, presionamos el botón de SideeX, para iniciar la extensión. Ello nos despliega la ventana principal de SideeX.


Con ello, podemos proceder a grabar nuestro primer caso de pruebas, presionando el botón Record (Grabar), ubicado en la parte superior izquierda de la ventana de SideeX.


Inmediatamente procedemos a realizar nosotros mismos los pasos de la prueba que deseamos realizar en la página de login. Por ejemplo:

1. Hacer clic sobre la caja de texto del correo electrónico. Nótese como se van registrando los pasos en la tabla de comandos de SideeX. Para este primer paso se registran dos comandos: Abrir la página web, y hacer clic sobre la caja de texto del correo electrónico.


2. Digitar el correo electrónico.
3. Cambiar a la caja de texto de la contraseña y digitarla. En este caso se observará que no se registró comando de clic, debido a que el cambio a la siguiente caja de texto se hizo presionando el botón de tabulación.
4. Hacer clic sobre el botón Login.

Por simplicidad dejaremos el caso de pruebas hasta acá. Para detener la grabación, basta con presionar el botón Stop en la ventana de SideeX.


Para reproducir el caso de pruebas, basta con presionar el botón PlayThisCase. Se observará como SideeX reporduce los pasos grabados en el navegador, mostrando en la tabla de comandos el paso ejecutado, y pintando de verde las filas cuya ejecución fue exitosa. También, en la parte inferior irá apareciendo la bitácora de las acciones ejecutadas.


Para guardar la colección de pruebas que contiene el caso creado, en la lista de TEST CASE ubicada al lado izquierdo de la ventana, se hace clic derecho sobre Untitled Test Suite, y se selecciona la opción Save Test Suite As... 


Luego, solo basta con elegir la ubicación donde se desea guardar, y el nombre del archivo.



Cabe notar que el archivo generado es un HTML, el cual contiene la descripción del conjunto de pruebas y los casos grabados, y puede ser visualizado desde cualquier navegador.


Esto es todo por el momento, para mostrar las características generales de SideeX. En ogtra oportunidad intentaré explorar más a fondo la creación de conjuntos de pruebas, con verificación de datos y todo eso, utilizando esta herramienta.

Ejemplo de aplicación web C# con ServiceStack, MongoDB y AngularJS

En esta ocasión quería compartir una aplicación web de prueba que hice hace casi 3 años. Fue una de mis primeras aplicaciones de tipo SPA (Single Page Application), y mi primer encuentro con las 3 tecnologías mencionadas, por lo que puede que tenga algunas inconsistencias. Sin embargo, podría dar una idea básica del uso de ServiceStack 3.9.71 con C#, AngularJS 1.2.16 y MongoDB (no recuerdo qué versión :P). El ejemplo fue hecho con Visual Studio 2012, usando el .NET Framework 4.5.

Este es el enlace del repositorio: https://github.com/guillegr123/sampletraders

¡Saludos, que Dios les bendiga!

domingo, 22 de octubre de 2017

Tutorial de Vue.js 2 - 1. Qué es Vue.js y preparación del entorno


Hola, este es un pequeño tutorial acerca de Vue.js 2 (que espero sí pase de la primera entrega, a diferencia de mis intentos fallidos con Symfony 2 - que por cierto ya van por la v3 - y WebAPI 2 - que por cierto ya esta siendo sustituida por ASP.NET Core 2). La idea de este tutorial surgió como una forma de práctica, después de seguir el tutorial Build a To-Do App with Vue.js 2 de Jeremy Kithome en scotch.io, y para compartir acerca del framework en español.

En esta primera entrega se explicará un poco acerca de qué es Vue.js, y cómo preparar el entorno de desarrollo utilizando Node JS y la herramienta de línea de comandos provista por el framework.

Sin más que agregar, ¡empecemos!

¿Qué es Vue.js?

Vue (pronunciado viú) es un framework progresivo para construir interfaces de usuario utilizando HTML, CSS y Javascript. Es progresivo porque ha sido diseñado para ser adoptado de forma gradual, siendo posible integrarlo con otras librerías en proyectos existentes. Este framework ha sido influenciado desde sus inicios por AngularJS (Angular 1); sin embargo, es más liviano que este, y que otras alternativas similares.

Preparación del entorno de desarrollo

Aunque Vue no depende de ningún framework o herramienta de terceros, y puede codificarse usando cualquier editor de texto, para este tutorial se hará uso de Node JS y la herramienta Vue CLI para la creación del "esqueleto" de la aplicación y su ejecución, y Visual Studio Code con una extensión para el soporte de los componentes de Vue, para la codificación.

Primeramente, se procede a instalar Node JS. Para ello, se recomienda descargar e instalar la versión LTS desde el sitio web oficial (6.11.4 con NPM 3.10.10), para el sistema operativo que se esté utilizando: https://nodejs.org/es/download/

Una vez instalado Node JS, procedemos a instalar la herramienta Vue CLI, que provee un conjunto de plantillas para la creación rápida de aplicaciones. También facilita su ejecución con recarga en caliente, y su compilación para ambiente de producción. Para instalar la herramienta se ejecuta en una terminal el siguiente comando:

npm install -g vue-cli

Para verificar que Vue CLI ha sido instalado correctamente, ejecutamos el comando vue en la línea de comandos, lo cual nos muestra las opciones de uso disponibles:


Luego, con respecto a la edición del codigo fuente, se procede a descargar e instalar Visual Studio Code. La última versión del editor puede descargarse en el siguiente enlace, para el sistema operativo que se esté utilizando: https://code.visualstudio.com/download

Finalmente, para facilitar la edición de los componentes de Vue, buscamos e instalamos "Vetur" en las extensiones de Visual Studio Code.



Vetur es un conjunto de herramientas para trabajar con Vue, que incluye un servidor de lenguaje para VS Code, y provee las funcionaliedades de embellecimiento de código, revisión se errores, auto-completamiento, depuración, entre otras.

Con esto ya se tiene un entorno listo para el desarrollo de nuestra primera aplicación con Vue. En la próxima entrada explicaré como crear el proyecto a partir de la plantilla de webpack, ejecutarlo, y agregar las primeras funcionalidades básicas.

Hasta entonces...

sábado, 26 de agosto de 2017

Crear un proyecto de pruebas con Visual Studio y Selenium


Saludos. Esta entrada es un tutorial acerca de cómo crear un proyecto de pruebas en Visual Studio utilizando Selenium (por si el título que dice casi lo mismo no es lo suficientemente claro - comentario sarcástico para mí mismo).

¿Qué es Selenium?

Selenium es un conjunto de herramientas de automatización para navegadores, que permite programar y ejecutar pruebas repetitivas para aplicaciones web.

Creación del proyecto y adición de Selenium

El tutorial se ha realizado utilizando Visual Studio Community Edition 2017, y C#. Los pasos para crear el proyecto y ejecutar una prueba de ejemplo se describen a continuación:

El primer paso es abrir Visual Studio, y crear un nuevo proyecto de pruebas unitarias, a través del menú Archivo > Nuevo > Proyecto, y seleccionando la plantilla Proyecto de Prueba Unitaria (.NET Framework), ubicada en las plantillas instaladas bajo la categoría Visual C# > Prueba.


Luego de ello, se procede a agregar los paquetes de Selenium en la solución. Para ello, se abre el panel del Explorador de soluciones, se da clic derecho sobre el proyecto, y se selecciona la opción Administrar paquetes NuGet.


Esto despliega en pantalla el administrador de paquetes NuGet para el proyecto seleccionado. En él se selecciona la opción Examinar, y se procede a realizar la búsqueda de paquetes con la palabra Selenium.


De la lista obtenida, procedemos a instalar los paquetes Selenium.WebDriver (publicado por Selenium Committers) y Selenium.Support (también publicado por Selenium Committers). Estos paquetes incluyen soporte para los navegadores Internet Explorer y Firefox. Para soportar el navegador Google Chrome, es necesario instalar un paquete que lo contenga, como por ejemplo Selenium.Chrome.WebDriver publicado por jbaranda, el cual incluye el ejecutable del driver en la carpeta bin respectiva del proyecto luego de compilarlo.

Una vez descargados e instalados los paquetes ya estamos listos para realizar nuestra primera prueba.

Primera prueba con Selenium

Para nuestra primera prueba, haremos uso de un formulario de inicio de sesión de un sitio de web de demostración llamado PHPTravels, en la URL http://www.phptravels.net/admin

Para ello, abrimos la clase creada al momento de crear el proyecto (por defecto es llamada UnitTest1), y agregamos las referencias para Selenium:

Luego, agregamos el siguiente método de ayuda para poder verificar si un elemento existe en la página web:

Finalmente sustituimos el método de prueba vacío, que fue creado por defecto, y creamos uno nuevo, llamado InicioSesion_ConCredencialesIncorrectas_MuestraAviso que consistirá en probar que si intentamos iniciar sesión ingresando credenciales incorrectas, se nos mostrará en pantalla una notificación indicando el error. El código final de la clase, con el nuevo método, es el siguiente:

Nota: El código fuente completo se encuentra disponible en GitHub: https://github.com/guillegr123/PruebaSelenium

Ejecutando la prueba unitaria

Para ejecutar la prueba unitaria, seleccionamos el nombre del método a probar, damos clic derecho, y seleccionamos la opción Ejecutar pruebas.


Esto abre el panel de Exploador de pruebas, y procede a ejecutar la prueba de forma automatizada, utilizando el navegador Google Chrome, elegido a través del driver utilizado. Se podrá observar como el navegador es abierto, y los pasos descritos en la prueba son ejecutados uno a uno, culminando con la verificación de que el elemento de notificación fue creado.


Una vez culminada la prueba, el resultado de esta es mostrado en el panel del Explorador de pruebas, con un ícono verde en caso de éxito, y uno rojo en caso de fallo.


Con la tecnología de Blogger.