Mostrando entradas con la etiqueta Blog antiguo. Mostrar todas las entradas
Mostrando entradas con la etiqueta Blog antiguo. Mostrar todas las entradas
domingo, 23 de septiembre de 2018
SQL Server Snippets - Aproximación de valor real a N-ésimo decimal superior/inferior
Supóngase que se tiene un valor real o float, que se quiere aproximar al N-ésimo decimal superior. Por ejemplo:Nuevo proyecto: Juego para Android
Hola. Esta entrada la escribí en mi antiguo blog de WordPress, en marzo de 2013. Tristemente a la fecha no he siquiera iniciado el proyecto, e incluso ha sido reemplazado por otros... pero quién sabe, tal vez algún día retome la idea. Por completitud, les dejo la entrada original a continuación (con algunas notas nuevas en rojo 😅):
Después de algunos sucesos, me he sentido motivado y animado a iniciar un proyecto a mediano-largo plazo, que consiste en un juego para Android. El único detalle está en que jamás en mi vida he hecho un juego, y mucho menos un programa para Android, jejeje... Lo más que hice fue una guardar una tabla de resultados para un proyecto en la materia de Gráficos por Computadora de la universidad. Pero me gusta correr antes que caminar (en este caso en particular), así que quiero hacer un juego 3D. A continuación describo mis ideas.
El juego
De momento, mi idea es que el juego sea más o menos estilo Star Fox 64, pero solamente en el espacio. ¿Por qué? Primero, porque me gustan los aviones. Segundo, porque creo que es más fácil que la nave siga una ruta predefinida, en vez de un mundo abierto. Tercero, porque creo que es difícil hacer un terreno y que el avión interactúe con él, así que mejor contar con la libertad del espacio.
![]() |
| Star Fox 64 |
Por otra parte, quiero tomar las partes más adictivas que se me ocurran de juegos como Space Invaders (variedad de enemigos con dificultad variable), Asteroids (asteroides, jejeje) y Fury 3 (múltiples armas agotables), para hacerlo entretenido. Finalmente, quiero que parte o todo el juego sea de código abierto (open source), pero hasta el momento en que lo termine, o que ya esté considerablemente maduro.
![]() |
| Asteroids |
![]() |
| Fury 3 |
Algo importante que quiero es que las misiones no estén quemadas en el juego, sino que sea posible programarlas mediante algún metalenguaje, como YAML o XML o JSON, o bien un lenguaje de programación, pero de forma completamente externa al juego. Es decir, el kernel sería el juego, y las misiones serían como plugins. E incluso, me gustaría que los usuarios pudieran programar las misiones a su creatividad, dejando abierto todo un mundo de posibilidades. (Se me ocurrió un año antes que anunciaran Super Mario Maker 😮😮😮)
¿Por qué para Android?
Bueno, porque creo que para esta plataforma los gráficos no son lo principal, y considerando que soy un principiante (o menos que eso, jajaja...), creo que es adecuado. En segundo lugar, me llama la atención los juegos en dispositivos móviles, y creo que hay muchas posibilidades. Tercero, espero algún día poder publicar el juego en Google Play, y creo que los usuarios de Android están más abiertos a juegos pequeños.¿Cómo hacer el juego?
Bueno, usualmente me gusta reinventar la rueda, y hacer todo desde cero, pero para este caso creo que sería muy difícil, así que mejor probaré primero con algún motor de juegos ya existente. Las características que espero del motor son las siguientes:- Idealmente que sea de código abierto, y gratuito. Si no es gratuito, que al menos pueda usarlo gratis para la etapa de desarrollo, pruebas y uso personal, y que adquiera la licencia (relativamente barata) en caso de que lo quiera publicar.
- Que permita importar modelos 3D desde programas como Blender, o bien algún programa CAD gratuito.
- Que no sea muy pesado o sobrecargue la memoria RAM de los dispositivos móviles.
- Muy ideal sería que fuera multiplataforma, es decir, que no se limitara a Android, sino que también permitiera desarrollar juegos para computadoras, e incluso para consolas.
¿El plan? ¡Cuál plan!
Son bromas. Ahorita, el plan es simple: conseguir un motor de juegos para Andorid que cumpla los requisitos previos. Una vez lo encuentre, veremos que estrategia seguir...Saludos.
Publicado originalmente el 2013-03-24, en https://itsouvenirs.wordpress.com/2013/03/24/nuevo-proyecto-juego-para-android/.
jueves, 16 de agosto de 2018
SQL Server Snippets - Columna de fecha de última modificación en SQL Server
Supongamos que por cuestiones de control de modificaciones y auditoría, se quiere contar con un campo de fecha de última modificación en todas las tablas de una base de datos de SQL Server.El inconveniente es que SQL Server no posee nativamente un tipo de dato que guarde la fecha de última modificación de un registro, el cual se actualice automáticamente al modificar una fila de datos. Por ello, una alternativa a esto es definir una columna de tipo datetime en cada tabla que se actualice cada vez que se modifique uno o más registros de esta, a través de un trigger.
Futuros nuevos posts... (viejo post del 2013)
¡Howdy! No pude resistirme, tengo varios posts en mente, pero no he tenido el tiempo de escribirlos, así que para mientras, quiero comentarles mis ideas, que espero alguna vez publicar:- Técnicas DRY para SQL Server: Son varias ideas para evitar código repetitivo en SQL Server.
- Más SQL Server Snippets:Sé que tengo un par más por allí...
- El regreso de las ventanas DIV: Ventanas DIV móviles, con sombra y otros efectos.
- Symfony 2 y casos especiales de Symfony 1.4: Casi siento que he traicionado a Symfony por MVC, pero espero retomar el tema en este año, y compartir algunas cosas interesantes sobre la vieja y confiable versión 1.4.
- Instalación de Oracle en Ubuntu: Ya tengo el PDF, y me gustaría publicarlo. Fue una tarea que hicimos en conjunto con unos amigos para la materia de Administración y Seguridad de Bases de Datos en la universidad. Ha sido el proyecto de computación más frustrante que he hecho hasta la fecha, creo que repetimos la instalación al menos unas 15 veces en dos semanas, hasta que sirvió... Menos mal que existía VirtualBox, porque si no, nos hubiera tocado formatear la computadora de pruebas 15 veces, jajaja...
- FluentViewModel: La cereza de mi sundae, jejeje. Es un proyecto en C# que hice, que consiste en una interfaz fluida para la definición de Modelos de Vista (View Models) en MVC Framework, que hace uso de clases genéricas y expresiones lambda. Está basado en FluentValidation para .NET. Espero publicar el código fuente como Open Source algún día.
Saludos, feliz viernes :)
Publicado originalmente el 2013-03-14, en https://itsouvenirs.wordpress.com/2013/03/14/futuros-nuevos-posts/.
Viejos posts publicados
Saludos a todos. Estuve revisando un poco mis documentos y encontré algunos posts que ya tenía listos para publicar desde hace varios años. Un par de ellos fueron colaboraciones al blog de un amigo de la universidad, y otros en realidad son manuales que escribí para acordarme cómo hacer las cosas. Les dejo abajo los enlaces a dos de estos posts, y espero posteriormente incluir otros más:
- Conexión a fuente de datos (PostgreSQL) en iReport 3.7.3
- PLT Scheme – Verificar que una cadena contiene solo letras minúsculas
Para finalizar esta entrada, les dejo una frase un tanto soberbia de Nikola Tesla, con respecto al trabajo de Thomas Alva Edison:
"If Edison had a needle to find in a haystack, he would proceed at once with the diligence of the bee to examine straw after straw until he found the object of his search... I was a sorry witness of such doings, knowing that a little theory and calculation would have saved him ninety per cent of his labor."
- Nikola Tesla, New York Times, October 19, 1931
Traducido:
"Si Edison tuviera que encontrar una aguja en un pajar, procedería inmediatamente con la diligencia de una abeja a examinar paja por paja hasta que encontrara el objeto de su búsqueda... Fui testigo arrepentido de tales hechos, sabiendo que un poco de teoría y cálculo le hubiera ahorrado el noventa por ciento de su tarea."
- Nikola Tesla, New York Times, 19 de octubre de 1931
Es muy curioso que esta frase parece mostrarse reactiva o contrastante a la siguiente frase de Edison:
"No me equivoqué mil veces para hacer una bombilla, descubrí mil maneras de cómo no hacer una bombilla."
- Thomas Alva Edison
Esta frase la encontré en un archivo viejo en el que tenía una recopilación de frases que me habían llamado la atención. Nikola Tesla es uno de mis científicos favoritos, y según parece sus invenciones no son muy conocidas incluso en la actualidad, en comparación con el trabajo de Thomas Alva Edison.
Feliz día.
Publicado originalmente el 2013-03-04, en https://itsouvenirs.wordpress.com/2013/03/04/viejos-posts-publicados/.
PLT Scheme - Verificar que una cadena contiene solo letras minúsculas
Hola otra vez! Ahora espero no extenderme demasiado, como la primera vez. Bueno, esta es una pequeña “abstracción funcional” en PLT Scheme (ahora Racket), que verifica que una cadena este compuesta solamente por letras minúsculas.Aunque parezca una función sencilla, contemplad que tiene algo interesante: se transforma la cadena de caracteres a una lista de caracteres (que contiene elementos tipo char), y se envía como parámetro a la función auxiliar, soloMinAux?, donde luego se extrae cada caracter, se transforma en un entero correspondiente al código ASCII en base diez, y he alli la magia, solo se verifica que este número esté entre los correspondientes a las letras minúsculas. Voilá (creo que así se escribe). Esto facilita mucho el trabajo a la hora de verificar si un carácter pertenece a una lista de caracteres consecutivos en el código ASCII. Además, las funciones string->list (que convierte una cadena a lista de caracteres) y char->integer (que convierte un caracter a un entero decimal correspondiente a su código ASCII) pueden ser de utilidad para manipular de muchas formas las cadenas de caracteres y los caracteres por si solos.
Bueno, espero que esta función les sea de utilidad, al menos para ver como se puede trabajar con caracteres y el código ASCII, y también supongo que les alegrará saber que hoy no me extendí mucho (aunque alguien dijo que ojala argumentara bastante cuando hablo, así como cuando escribo), pero bueno... Así que por el momento me despido, y les dejo esta frase, para todos aquellos que tienen una forma particular de ubicar sus cosas en el grandioso desorden que con mucho cariño llaman escritorio.
If a cluttered desk is the sign of a cluttered mind, what is the significance of a clean desk?
- Laurence J. Peter
Publicado originalmente el 2013-03-04, en https://itsouvenirs.wordpress.com/2013/03/04/plt-scheme-verificar-que-una-cadena-contiene-solo-letras-minusculas/.
domingo, 15 de julio de 2018
Conexión a fuente de datos (PostgreSQL) en iReport 3.7.3
Para crear reportes utilizando el asistente de reportes (Report Wizard), es necesario conectarse previamente a una fuente de datos, y para realizar esto, es necesario crear previamente una conexión a una fuente de datos.
Para crear una conexión a una fuente de datos para generar reportes, es necesario seguir los siguientes pasos:
- Presionar el botón Report Datasources, ubicado en la barra de herramientas.
- A continuación se muestra una ventana de diálogo que muestra las conexiones y fuentes de datos existentes. Se asumirá que aún no existe una conexión a la fuente de datos que se va a utilizar, y por lo tanto se procederá a crearla. Para ello, se hace clic en el botón New, ubicado en la parte superior derecha de la ventana.
- Aparece en pantalla otra ventana de diálogo, que muestra los distintos tipos de fuentes de datos. Para este caso, se elegirá el tipo de fuente más utilizado, Database JDBC Connection. Una vez seleccionado, se hace clic en el botón Next >.
- Luego aparecerá una tercera ventana de diálogo, que muestra las propiedades del tipo de conexión seleccionado. Es necesario darle un nombre mnemónico a la conexión. Para este caso, se llamará EjemploCon.
- En la misma ventana, se debe seleccionar el tipo de controlador JDBC (JDBC Driver), de acuerdo al sistema gestor de base de datos utilizado. En este ejemplo, se selecciona PostgreSQL (org.postgresql.Driver).
- También debe especificarse la URL de la base de datos a utilizar. En este ejemplo se utilizará la siguiente URL: jdbc:postgresql://localhost:5432/ejemplo
En la URL de conexión a base de datos a través de JDBC, se especifica el protocolo de conexión, el subprotocolo, la dirección del servidor, el puerto y el nombre de la base de datos. En este ejemplo, estos parámetros son, respectivamente: jdbc, postgresql, localhost y ejemplo. Al utilizar la palabra localhost para especificar la dirección del servidor, se está haciendo referencia a la computadora actual, por lo que el servidor será la misma computadora desde la cual se generarán los reportes.
- Finalmente, debe detallarse el nombre de usuario y la contraseña, para poder acceder a la base de datos. Para este ejemplo, ambas palabras son postgres. Es posible indicar a iReports que almacene la contraseña, para evitar la molestia de ingresarla cada vez que se intente acceder a la base de datos, marcando la caja de Save password. En este ejemplo, se seleccionará la opción de recordar la contraseña, ya que no interesa la seguridad. A continuación, se ilustra mediante una captura de pantalla, la ventana de diálogo de propiedades de conexión, con todos los campos llenos:
iReport advierte que la contraseña se almacena como texto plano, sin ninguna clase de encriptación. Por ello no se recomienda utilizar esta opción, a menos que se considere que no se requiere mayor seguridad. Si se elige no almacenar la contraseña, esta se solicitará cada vez que se intente acceder a la base de datos utilizando esta conexión.
- Una vez declarados todos estos parámetros, se presiona el botón de prueba (Test), para verificar que es posible realizar la conexión con los datos especificados.
- Si la prueba es exitosa, aparecerá el mensaje Connection test succesful!, indicando que fue posible establecer la conexión con la base de datos. En caso contrario, se mostrará un mensaje de error, indicando la posible causa de éste. Si se da esto último, es necesario verificar si los parámetros son correctos, o bien si el software servidor de bases de datos está activo y funcionando correctamente. También debe revisarse que la base de datos especificada exista, y se tengan los permisos adecuados para acceder a ella.
- Una vez que la conexión haya sido probada como exitosa, se hace clic en el botón Save, para que iReport guarde la nueva conexión.
Publicado originalmente el 2013-03-04, en https://itsouvenirs.wordpress.com/2013/03/04/conexion-a-fuente-de-datos-postgresql-en-ireport-3-7-3/.
lunes, 12 de febrero de 2018
Tecnología - Google Glass
Publicado originalmente el 2013-02-22, en https://itsouvenirs.wordpress.com/2013/02/22/tecnologia-google-glass/. Es posible que algunos enlaces ya no estén disponibles o posean un contenido distinto el descrito en esta entrada.Hola a todos. Solo quería compartirles este vídeo que acabo de encontrar en YouTube. Es acerca de la propuesta de tecnología de Google en la categoría de los aparatos "Smart", llamada "Glass". Básicamente consisten en unos lentes con cámara integrada, reconocimiento de voz, y conexión a Internet y redes sociales. Así como existen Smart Phones y Smart TV's, esto podría llamarse algo así como "Smart Glasses", jejeje.
Aparentemente este proyecto fue revelado desde el año 2012, y ya se han realizado demostraciones y pruebas con algunas personas. El vídeo es una especie de vídeo promocional del aparato, e incluye una compilación de tales pruebas: https://youtu.be/wTxFxk2dwaQ (en febrero de 2018 ya no está disponible el vídeo que ví originalmente, así que dejo el link a una copia del vídeo).
Para mayor información pueden visitar el Sitio web oficial de Google Glass. Y si viven en Estados Unidos, podrían aplicar para ser una de las personas elegidas para ser uno de los "Exploradores", respondiendo la pregunta: ¿Qué harías si tuvieras Glass?.
Realmente la tecnología está avanzando muy rápido a tal punto de ver cosas que hace unos 20 años solo existían en las películas de ciencia ficción.
jueves, 8 de febrero de 2018
SQL Server Snippets - Buscar columna en base de datos
Publicado originalmente el 2013-02-19, en https://itsouvenirs.wordpress.com/2013/02/19/sql-server-snippets-buscar-columna-en-base-de-datos/.Saludos a todos. Aprovechando un poco mi hora de almuerzo (para escribir el post, aunque lo publiqué en la noche, jejeje), quería compartirles este pequeño snippet, que consiste en una consulta para obtener el listado de tablas en las que exista una determinada columna, y es básicamente el siguiente:
Dónde nombre_columna es el nombre de la columna que se desea buscar.
El snippet puede modificarse para buscar también las columnas en cuyo nombre se incluya cierta palabra, cambiando el igual (=) de la condición por un LIKE, así:
En este caso, el nombre de las tablas podría repetirse, en casos en los que más de una columna de la tabla posea la palabra buscada.
A modo de ejemplo, al ejecutar el siguiente script en la base de datos AdventureWorks:
La consulta nos devuelve los siguientes resultados:
Esta consulta me ha sido de gran ayuda en casos en los que la base de datos “relacional” no posee todas las debidas relaciones entre las tablas, ya que me permite encontrar las tablas en las que aparece cierta columna, para tratar de descubrir las posibles relaciones faltantes.
La consulta ha sido probada en SQL Server 2005 hasta SQL Server 2012, y funciona sin problemas. Muy posiblemente funcionará en versiones posteriores.
SQL Server Snippets - Pausa
Publicado originalmente el 2013-02-13, en https://itsouvenirs.wordpress.com/2013/02/13/sql-server-snippets-pausa/.En esta ocasión les dejo un snippet corto, pero muy interesante, que consiste en hacer cómo hacer una pausa en SQL Server. Esto vendría siendo similar a un sleep en otros lenguajes de programación.
El comando es sencillo:
waitfor delay '00:01:00'En dicho ejemplo se muestra el comando para hacer una pausa por un minuto.
Ahora, ¿por qué diantres quería yo hacer una pausa en SQL Server? En mi caso, lo utilicé para hacer pruebas con un trigger. Puse el comando dentro de un trigger "on update" porque quería saber si la aplicación actualizaba los datos de cierta tabla antes de realizar una determinada acción. Si la acción se realizaba luego de la pausa, sabría que el trigger se ejecutaba antes de dicha acción, y esto a su vez me indicaría que los datos de la tabla eran actualizados antes de la acción.
Este es solo un ejemplo, pero pueden haber muchos otros casos. La verdad es que si la sentencia existe, es porque alguien pensó que serviría para algo, jejeje...
Por cierto, esta sentencia solo la he probado en SQL Server 2005, pero probablemente aún siga disponible, incluso en la versión
domingo, 14 de enero de 2018
WP - Atributo de MVC 2 para filtrar acciones para solicitudes AJAX
Ya llevo un par de meses trabajando con ASP.NET MVC Framework 2, y debo decir que me ha encantado. Y sé que van por la versión 4, pero en el trabajo contamoscon Visual Studio 2008, así que hay que aprovechar lo que se tiene, y debo decir que en realidad no es poco.En esta ocasión quiero mostrar una forma de crear un atributo de filtrado para acciones que deben ser ejecutadas solamente mediante solicitudes Ajax. Esto es útil para acciones que deseamos utilizar exclusivamente para estas solicitudes, y que queremos que el usuario común tenga acceso a ellas solamente a través de esta forma, mediante alguna interacción con la interfaz de usuario (UI), por ejemplo.
Primero, es necesario encontrar una forma de identificar que el tipo de solicitud es XML HTTP request, que es la clase de solicitudes que se hacen mediante AJAX. El objeto HttpRequest del que disponemos en una aplicación ASP.NET no cuenta con un método propio para identificar este tipo de solicitud, por lo que es necesario trabajar un poco en esta parte. Para ello, crearemos un método de extensión que se encargue de verificar esto. El método que presento a continuación es prácticamente una copia de la respuesta de Charlino a la pregunta de StackOverflow titulada How to check if request is ajax or not in codebehind - ASP.NET Webforms, que a su vez se basa en el código fuente del MVC Framework (que es open source, o código libre, por cierto).
Como puede observarse, el método revisa directamente el encabezado del request, para verificar el tipo de solicitud. Si el tipo de solicitud es XMLHttpRequest, devuelve verdadero, y falso en caso contrario.
Actualización: Existe un método de extensión para la clase HttpRequestBase en el espacio de nombres System.Web.Mvc, con el mismo nombre y funcionalidad que el del método propuesto (IsAjaxRequest). Podría usarse este en vez de crear una nueva extensión, solamente incluyendo el espacio de nombres System.Web.Mvc.
Teniendo este método disponible, podemos proceder a crear el atributo de filtro. Este es un atributo de filtro convencional, por lo que será descendiente o derivado de la clase ActionFilterAttribute. Como se observa a continuación, el atributo es bastante simple:
Como puede observarse, todo el proceso de verificación se realiza sobrecargando el método OnActionExecuting, que se ejecuta justo antes de proceder a ejecutar la acción. Acá hacemos uso del método de extensión para verificar si la solicitud (request) es de tipo Ajax, y si no lo es, devolvemos como resultado una vista completa, que bien puede ser una página de error personalizada. Cabe mencionar que digo vista completa porque el resultado a generar es un ViewResult. Dado que sabemos que no es una solicitud Ajax, lo común no sería devolver una vista parcial, sino una página completa (.aspx). También, en vez de devolver de una sola vez la página de error, podríamos redireccionar hacia otra acción que consideremos conveniente, a través de un RedirectResult.
Finalmente, decoramos la acción que deseamos filtrar con el atributo que hemos creado, de la siguiente manera:
Acá les dejo un enlace que encontré por allí, que tiene varios ejemplos de atributos de filtro de acciones bastante interesantes, que puede que les sean de utilidad: Creating Custom Action Filters in ASP.NET MVC
NOTA: Aunque este atributo fue elaborado y probado en MVC Framework 2, creería que de igual forma es aplicable para las versiones 3 y 4 del framework.
Cualquier comentario será bien recibido, y como dicen por allí, Happy coding!
Publicado originalmente el 30/10/2012, en https://itsouvenirs.wordpress.com/2013/02/13/diseno-web-panel-de-carga-loading-panel/.
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/.
martes, 4 de noviembre de 2014
WP - Resposive Web Design
La ventaja y objetivo de los diseños responsivos (Responsive Web Design, RWD) es que la página web se pueda ver bien desde dispositivos con casi cualquier resolución (smartphones, tablet, netbooks, PCs, televisores). He de comentar que desde hace algunos años quise hacer algo así sin éxito, pero no conocí este término de RWD hasta que hace un par de meses leí un post de Ryan Boudreaux en TechRepublic, titulado "How to get started with Responsive Web Design". Les recomiendo los artículos de este señor sobre desarrollo web, ya que incluyen nuevos conceptos y ejemplos prácticos en este ámbito. Que Dios les bendiga.Publicado originalmente el 20/09/2012, en http://itsouvenirs.wordpress.com/type/aside/
Como dato curioso, esta entrada la publiqué al cambiar el tema de mi blog de Wordpress a uno responsivo, llamado "Twenty Eleven".
jueves, 18 de septiembre de 2014
WP - Diseño web - Ventana DIV simple 1
¡Hola nuevamente! Tenía un rato de no escribir por acá, pero es que han sucedido varias cosas en los últimos meses... mis disculpas por ello. En realidad desde hace algún tiempo quería mostrar una forma de hacer ventanas con DIV, basándome en el diseño que utilizamos para nuestro proyecto de graduación. Luego de organizar un poco mis ideas, decidí hacer una serie de posts en donde explicara como hacer una ventana DIV, e ir mejorando el diseño en cada uno de ellos. Este es el primer post de la serie.
En esta ocasión quiero mostrar una forma sencilla de crear una ventana
modal a partir de elementos DIV dentro de una página web. Una ventana modal
consiste en una ventana que mantiene el foco respecto a las demás en
una aplicación o sistema. En este caso, la ventana modal mantendrá el
foco con respecto al resto de la página web.
Por el momento, la estructura de la ventana modal consistirá en dos
elementos DIV. El primero de ellos será la ventana en sí. El segundo
servirá para cubrir toda la página web, oscureciéndola, dando así la
apariencia de que el resto de la página web está deshabilitada. Además,
al estar encima del resto de elementos de la página, impedirá que los
usuarios puedan hacer clic sobre éstos, dando el efecto de modalidad.
Este DIV será conocido como DIV de fondo en el resto de este post. Está
de más mencionar que el único DIV que estará sobre este fondo será el
DIV de la ventana modal.
![]() |
| Partes de ventana DIV. |
Esta ventana modal será manejada como una "clase" Javascript,
con el objetivo de que más adelante podamos manejar múltiples ventanas
modales dentro de una misma página web, como objetos. Por otra parte, el
diseño completo de la ventana se manejará por separado, desde un
archivo CSS.
Primeramente, esta es la definición de la clase VentanaDiv, contenida en el archivo ventanadiv.js:
function VentanaDiv(idventana, idfondo) {
//Obteniendo las referencias a los DIV que utilizaremos
this.ventana = window.document.getElementById(idventana);
this.fondo = window.document.getElementById(idfondo);
//Creando funciones para manipular la ventana
this.mostrar
= function() {
this.fondo.style.visibility = 'visible';
this.ventana.style.visibility = 'visible';
};
this.ocultar
= function() {
this.fondo.style.visibility = 'hidden';
this.ventana.style.visibility = 'hidden';
};
}
Como puede observarse, en la primera parte de esta clase se obtienen las
referencias a los DIV que se utilizarán para la ventana. Esto implica
que los DIV deben existir ya dentro de la estructura DOM de la página
web. Las referencias a los objetos se guardan en variables con ámbito
global dentro de la clase, y se utilizan para mostrar u ocultar los DIV,
en las funciones mostrar() y ocultar(),
respectivamente. Éstos métodos han sido definidos dentro de la misma
función constructor, y como puede observarse, lo único que hacen es
mostrar u ocultar los DIV.
Luego, tenemos la hoja de estilos CSS, que define la forma en que se mostrarán los DIV dentro del sitio web:
/* Clase CSS que define el fondo oscuro */
div.fondoventana
{
/* Para que el DIV aparezca oculto inicialmente */
visibility:hidden;
/* Para que el DIV cubra toda el área de la página web */
position:fixed;
top:0px;
left:0px;
width:100%;
height:100%;
/* Fondo negro con opacidad del 60%, que da un efecto de transparencia */
background-color:#000000;
/* Opacidad para Internet Explorer */
filter:alpha(opacity=60);
/* Opacidad en CSS3 estándar */
opacity:0.6;
/* Este índice debe ser mayor que el del resto de los demás elementos de la página web, para que aparezca sobre ellos */
z-index:9;
}
/* Clase CSS que define el formato de la ventana */
div.ventana
{
/* Para que el DIV aparezca oculto inicialmente */
visibility:hidden;
/* Para que la ventana aparezca centrada en la página web, con un tamaño de 300x160 píxeles */
position:fixed;
left:50%;
margin-left:-150px;
top:50%;
margin-top:-80px;
width: 300px;
height:160px;
/* Borde gris de la ventana */
border-width:5px;
border-color:#999999;
border-style:solid;
/* Color de la ventana */
background-color:#FFFFFF;
/* Espacio de 10 píxeles desde el borde de la ventana hasta el texto interno */
padding:10px;
/* Este índice debe ser mayor que el del fondo, para que la ventana esté sobre él */
z-index:10;
}
Como puede observarse, se han definido dos clases CSS, una de ellas
para el DIV fondo y otra para el DIV ventana. Se han usado clases con el
objetivo de que las características definidas en la hoja de estilo
puedan utilizarse en varios elementos de la página web, en caso de que
quiera tenerse más de una ventana en ella.
Por otra parte, en este
ejemplo sencillo las propiedades principales de la ventana ya están
predefinidas: la ubicación, color, tamaño e índices verticales de los
DIV ventana y fondo. Nótese que el índice z del fondo debe ser superior
al de los demás elementos de la página, para poder aparecer sobre ellos y
cubrirlos. El único elemento con índice z superior es el del DIV de la
ventana, ya que debe aparecer por encima del fondo.
Cabe mencionar también que las posiciones de ambos DIV son fijas (position:fixed;).
Esto se debe a que su posición debe estar fija con respecto a la
ventana que lo contiene, y no debe afectar las posiciones de los demás
elementos de la página. El DIV de fondo estará extendido en toda la
ventana del explorador web, y el DIV ventana estará centrado. También
debe observarse que la propiedad visibility:hidden sirve para indicar que ambos DIV estarán ocultos al abrirse la página web.
Algo
que considero importante mencionar es que las características CSS
aplicadas a un elemento de la página web se heredan a sus hijos. Por
ello, podemos colocar cualquier cosa dentro del DIV de la ventana,
confiando que esto se ocultará y mostrará cuando la ventana lo haga (a
menos, claro, que estableciéramos características especiales para estos
elementos).
Finalmente, se tiene el código fuente de la ṕágina web:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Ventana DIV 1 - Ventana DIV simple</title>
<!-- Importando archivos CSS y Javascript - Inicio -->
<link rel="stylesheet" type="text/css" href="ventanadiv.css" />
<script language="javascript" type="text/javascript" src="ventanadiv.js" ></script>
<!-- Importando archivos CSS y Javascript - Fin -->
</head>
<body>
<!-- Contenido de la página web - Inicio -->
<h1>Ejemplo de ventana DIV 1</h1>
<br />
<a href="#" onclick="ventana.mostrar()">Haga click aquí para mostrar la ventana</a>
<!-- Contenido de la página web - Fin -->
<!-- DIV de fondo - Inicio -->
<div id="divfondo"></div>
<!-- DIV de fondo - Fin -->
<!-- DIV de ventana - Inicio -->
<div id="divventana">
<p>
<center><h3>Ventana modal</h3></center>
<br />Bienvenido a mi primera ventana modal web.
</p>
<p><center><a href="#" onclick="ventana.ocultar()" >Cerrar</a></center></p>
</div>
<!-- DIV de ventana - Fin -->
</body>
<script type="text/javascript" >
//Creación de la ventana
var ventana = new VentanaDiv("divventana", "divfondo");
</script>
</html>
Primeramente es necesario incluir los archivos CSS y Javascript que
hemos creado especialmente para las ventanas, en el encabezado del
documento. Luego de ello, en el cuerpo de la página web se ha colocado
el contenido a mostrar, y después de este, los DIV de fondo y ventana.
En realidad, en este diseño sencillo no importa donde se coloquen estos
DIV, ya que como se dijo anteriormente, al inicio ambos estarán ocultos,
y luego se mostrarán de forma fija en la ventana, por lo que no
afectarán la ubicación de los demás elementos, al menos de forma visible
para el usuario.
Algo muy importante que hay que recalcar es el
script ubicado al final del documento. Este script es el encargado de
crear el objeto VentanaDiv a partir de la clase Javascript, y
que permite el funcionamiento de ésta. Se ha ubicado al final del
documento debido a que la estructura DOM del sitio web se va creando
conforme al orden de los elementos en el documento HTML (es decir, de
izquierda a derecha y de arriba hacia abajo), y es necesario que los DIV
ya existan para que el constructor de la clase VentanaDiv
pueda obtener sus referencias. Por ello es de suma importancia que este
script se ubique después de los DIV en el documento HTML.
Hay que notar que aunque la variable ventana
se declara e instancia al final del documento, su ámbito (por así
decirlo) abarca todo el documento, una vez que su declaración ha sido
procesada. Por ello puede observarse que se hace referencia a ella en
los dos hipervínculos que están en el cuerpo de la página web. Éstos
hipervínculos no referencian a ninguna página web (por ello solo tienen
el # en su propiedad HREF), sino que en el evento onclick de estos se han colocado las invocaciones a los métodos mostrar() y ocultar()
de la ventana DIV, para ejecutarlos al momento de dar clic derecho
sobre ellos. Esta de más decir que el hipervínculo que invoca al método mostrar()se ubica en el cuerpo visible de la página web, mientras que el hipervínculo que ejecuta el método ocultar() se ubica dentro de la ventana DIV.
Y voilá, tenemos nuestra primera ventana DIV en funcionamiento.
![]() |
| Ventana DIV en funcionamiento. |
Que Dios les bendiga.
Referencias
Publicado originalmente el 18/08/2012, en http://itsouvenirs.wordpress.com/2012/08/18/diseno-web-ventana-div-simple-1/.
lunes, 1 de abril de 2013
WP - Enviar mensajes a sesiones de terminal server desde línea de comandos
Anoche se presentó un problema en mi trabajo. Debido al incremento de trabajo por parte de los usuarios conectados vía Terminal Server a uno de los servidores de la empresa, este se quedó sin recursos suficientes para poder iniciar otra sesión más. Se decidió reiniciar el servidor, pero era necesario informar a los usuarios. ¿Cómo enviar un mensaje directo vía Terminal Server, sin iniciar sesión en el servidor ni entrar al administrador de TS? Una opción sencilla y directa es hacer uso del comando msg desde la línea de comandos en una computadora conectada a dicho servidor:msg { nombre_usuario | id_sesion_ts | * } [/SERVER:servidor] “mensaje”
El primer parámetro puede ser el nombre del usuario, el ID de la sesión, o asterisco, que indica que el mensaje se enviará a todas las sesiones activas en la computadora. El segundo parámetro, que es el de servidor es opcional, y puede colocarse el nombre del equipo o bien la IP. Si no se especifica, el mensaje se enviará a todas las sesiones activas en la computadora local. El parámetro final es el mensaje, que debe especificarse entre comillas dobles en caso de poseer caracteres de espacio en blanco.
Por ejemplo:
msg juanperez “Hola mundo” msg DOMINIO\juanperez /SERVER:mi-servidor “Hola mundo”
Cabe mencionar que no he especificado todas las opciones del comando msg. Para consultar todas las opciones que ofrece este comando, basta con digitar msg en la línea de comandos de Windows, y presionar Enter. Si no me equivoco, este es el comando que se recomienda usar en vez de NET SEND a partir de Windows XP y Windows Server 2003 (corríjanme si me equivoco, jejeje).
Publicado originalmente el 19/02/2012, en http://itsouvenirs.wordpress.com/2012/02/19/enviar-mensajes-a-sesiones-de-terminal-server-desde-linea-de-comandos/.
WP - Social Coding
Al ver este título, alguien por allí me dirá que soy un transculturizado. Creo que todos los de informática somos así, y yo me considero de los más conservadores. Bueno, antes de continuar, les comento que iré desarrollando este tema poco a poco, posiblemente en esta misma entrada (o post, como le llamarían los transculturizados, jejeje). Comenzando con el tema, considero apropiado partir de una definición:Social Coding (Programación Social) se refiere al desarrollo de software por parte de una “comunidad” de personas. Aunque usualmente todo proyecto de software se lleva a cabo por un conjunto de desarrolladors, este término ha sido acuñado a partir del auge de las redes sociales, por lo que ese conjunto se extiende a una comunidad virtual, variada y distribuida de personas.
Otra de las características que diferencia la programación social es que rompe con las barreras de la colaboración, ya que abre la posibilidad a que sea la comunidad quien se autodirija en el desarrollo del proyecto, pues la idea desarrollada por alguien puede ser materializada, mejorada y revisada por toda la comunidad. Ello permite crear productos de software robustos en corto tiempo.
Publicado originalmente el 13/02/2012, en http://itsouvenirs.wordpress.com/2012/02/13/social-coding/.
WP - ¡Renovación del blog!
Después de casi 3 años de inactividad (y luego de un año de haberme convertido en ermitaño aislado de la web, jejeje), he decidido revivir este blog. Más que revivirlo, extenderlo para que pase de un blog dedicado a una de mis materias preferidas en la universidad, que fue Programación Funcional, a un compendio de aquellas cosas que he aprendido y siga aprendiendo a lo largo de mi carrera en el área de informática, que actualmente se orienta mayormente al desarrollo de software.Básicamente este es el inicio de uno de mis sueños, que es compartir aquellas cosas de mi carrera que me emocionan, y también aquellas cosas que me han sido útiles, principalmente con las nuevas generaciones (no es que esté viejo, aún estoy empezando a explorar estos vastos territorios…). Debo mencionar que esto es algo que he admirado primeramente de mis profesores (desde primaria hasta la universidad), y de todas aquellas personas que se toman un momento de su ajetreado día en compartir su conocimiento a través de la web. Si no fuera por ellos, mi trabajo diario sería inmensurablemente más largo de lo que ya es.
Espero poco a poco ir llenando este blog con información que les sea de mucha utilidad, les ayude en sus estudios y trabajos, y se convierta poco a poco en una de esas bibliotecas en línea de recursos de informática a la que tranquilamente puedan acudir.
Muchas gracias a mis apreciables educadores, y también a todos ustedes que se toman un momento para visitar este blog. Que el Señor Jesús les bendiga mucho y les regale muchos éxitos en su vida.
Atentamente.
Guillermo.
Publicado originalmente el 13/02/2012, en http://itsouvenirs.wordpress.com/2012/02/13/renovacion-del-blog/.
WP - Programación funcional 01-2009 - Práctica No. 3

http://www.dccia.ua.es/dccia/inf/asignaturas/LPP/2007-2008/tema-07.html
La verdad es que contempla totalmente lo que se pretendía abarcar con la tercera práctica, más un par de cosas extras. El objetivo de la práctica era aprender a construir funciones que permitieran utilizar una cantidad de parámetros variable, por lo que, para efectos del curso, no es necesario leer lo de la introducción, quasiquotation y unquote-splicing, aunque son cosas interesantes que podrían serles útiles en algún futuro (cercano, lejano, o infinitamente lejano, o sea, nunca). También hay algunos ejemplos un poco más elevados, como hacer su propio let o su propio cond.
Hasta dentro de una semana tendré tiempo de continuar con el blog, y de revisar las tareas, asi que les pido las disculpas del caso. Hasta entonces, les debo las explicaciones de estas últimas prácticas.
Publicado originalmente el 25/04/2009, en http://itsouvenirs.wordpress.com/2009/04/25/practica-no-3/.
viernes, 29 de marzo de 2013
WP - Programación funcional 01-2009 - Práctica No. 1

Construya un programa que lea desde teclado las coordenadas reales de tres puntos del plano cartesiano, y las coordenadas de un cuarto punto, del mismo plano, que diga en pantalla si el cuarto punto está o no dentro del triángulo (si está sobre los lados o vértices, está adentro). Cada punto se ingresará mediante dos números reales que representan la coordenada X y la coordenada Y. Asuma que los puntos forman efectivamente un triángulo.
Del enunciado hay que notar lo siguiente:
Con la tecnología de Blogger.
















