Entradas

Entrada destacada

Creando botones en Python usando pygame

Imagen
Existen distintas librerías de python para implementar interfaces gráficas y que puedan usarse junto a pygame, pero también podemos crear nuestros componentes GUI (graphical user interface) si estos no requieren de mucha complejidad usando alguna librería de dibujo de gráficos como pygame.
Si bien pygame no tiene incorporado componentes GUI, soporta la carga de imágenes y la gestión de eventos de teclado y ratón los cuales son suficientes para implementar botones Figura 1.
Figura 1: Ejemplo final de implementación de botones 
Implementar botones usando imágenes y eventos de ratón también nos puede servir a modo de práctica de programación.
Base de la aplicación y dibujo de imágenes del botón
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50importpygameimportrandomfrompygame.localsimport*FONDO=(32,30,32)BLANCO=(255,255,255)COLOR_TEXTO=(50,60,80)defdibujar_panel():panel=pygame.transform.sc…

Contador de clicks en JavaScript

El siguiente ejemplo es un contador de clicks(clicks sobre un botón), el número de clicks se muestra en un elemento <p></p>.
Código del ejemplo. <html><head><metacharset="utf-8"><title>Ejemplo 1.1</title><style type="text/css">#areaContador{font-size:40px;font-weight:bold;font-family:impact;margin:10px;}</style></head><body><buttonid="botonClick">Click</button><pid="areaContador"></p><script type="text/javascript">varbotonElement=document.getElementById("botonClick");varpElement=document.getElementById("areaContador");varcontador=0;botonElement.onclick=function(){contador++;pElement.textContent=contador;}</script></body></html>
El código html consta de un "botón" con id igual a "botonclick" y una etiqueta "p" con id igual a "areaContador" con los cuales podremos acced…

Cambiar zona horaria Laravel 5.7 o superior (America/Mexico_City)

Imagen
La instalación de un proyecto Laravel viene configurada con la zona horaria como UTC, para poder cambiar está configuración tenemos que modificar la propiedad 'timezone' del app.
Esta configuración debe hacerse en el archivo app.php que se encuentra en el directorio config Una vez tengamos ubicado el archivo buscamos el indice  'timezone'. Y cambiamos su valor por 'America/Mexico_City' o la zona horaria que se requiere utilizar. 'timezone'=>'America/Mexico_City', Una vez guardado los cambios, los resultados ya pueden ser visibles, no es necesario reiniciar el servidor.

Comenta tus dudas en los comentarios.

Personalizar los estilos de una tabla Bootstrap

Imagen
Bootstrap es una biblioteca que nos ayuda en el diseño de páginas web, la forma más básica de utilizar esta librería es utilizando el conjunto de clases predefinidas que ya trae. Por ejemplo, si queremos que un elemento ancla (<a></a>) tenga estilo de botón podemos hacer lo siguiente.
<aclass="btn btn-primary">Hola</a>
Para documentarte más sobre bootstrap puedes ir a su página oficial https://getbootstrap.com/ o al tutorial https://www.w3schools.com/bootstrap/ .

En esté tutorial explicaremos como modificar correctamente los estilos de bootstrap para hacer una combinación de estilos exitosa.
Importar bootstrap en html. Podemos agregar bootstrap a nuestra página bootstrap de la siguiente manera. <metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> Pero también podemos descargar los archivos d…

Introducción al acceso de elementos html en JavaScript

Imagen
En el siguiente ejemplo se muestra como obtener los valores de los campos "input" desde javascript.
<!DOCTYPE html><htmllang="es"><head><metacharset="utf-8"><title>Ejemplo Uno</title><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><style type="text/css">.form-group{padding:15px;}</style></head><body><divclass="container"><divclass="form-group"><inputtype="text"id="textoEntrada"value="hola"name=""class="form-control"><script type="text/javascript">varinputEntrada=document.getElementById("textoEntrada");//ObjetovartextoInputEntrada=inputEntrada.value;//Obteniendo texto del inputconsole.log(textoInputEntrada.toUpperCase());</script></div></div></body></html>
El ejemplo es un …

Aplicación de edición de texto en canvas de HTML5

Imagen
El siguiente código consta de un archivo html, un CSS y javascript es un ejemplo que podemos usar para editar las características de un texto algo parecido a los WordArt.
See the Pen Texto canvas by Jesus Tepec (@JesusTepec) on CodePen.

Mover objetos con el teclado en Pygame

Imagen
En este tutorial se muestra como mover objetos de dibujo en la pantalla utilizando el teclado, para lo cual usaremos un ejemplo anterior en el que se simulaba una pista de carreras en la cual los objetos se movían pero de manera automática. Haremos algunas modificaciones a ese ejemplo para poder interactuar con la escena. El ejemplo anterior puede verlo en el siguiente link: AnimacionesBasicas

Mover el objeto en la pantalla en distintas direcciones Comenzaremos con un programa base que dibuje la pista y dibuje un rectángulo azul que representara el personaje que moveremos.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50importpygameimportrandomNEGRO=(10,8,12)COLOR_PISTA2=(50,58,52)BLANCO=(255,255,255)VERDE=(90,232,64)ROJO=(255,20,20)AZUL=(10,222,255)COLOR_FUENTE=(255,122,88)defdibujar_texto(screen,texto,pos):fuente=pygame.font.SysFont('Barber Street_PersonalUseOnly',50)text=fue…