El ahorcado (juego) en JavaScript

En este post te mostraré un juego que he programado recientemente. Se trata de El ahorcado o hangman, en su versión web programado con JavaScript; totalmente gratuito y open source.

El ahorcado en JavaScript – Programación de juego

El juego está escrito con el lenguaje JavaScript, usando Vue.js y Bootstrap. Cuenta con:

  • Gestión de palabras. Puedes agregar y eliminar palabras para jugar al ahorcado
  • Elección de palabra aleatoria: cada vez que juegas se selecciona una palabra aleatoria del banco de palabras que el usuario ha registrado
  • Botones con letras para adivinar la palabra, mismos que se deshabilitan una vez que se ha intentado esa letra
  • Imagen del ahorcado, misma que cambia con el número de intentos
  • Juego totalmente responsivo (adaptable a teléfonos, tabletas, etcétera)

A continuación te mostraré cómo está hecho, en dónde puedes descargarlo, etcétera. Pues es un juego open source y gratuito que puedes modificar sin problemas.

(más…)

Bootstrap: ocultar elementos al imprimir

En este post sobre estilos CSS y el framework Bootstrap 4 te mostraré cómo ocultar y mostrar ciertos elementos al momento de imprimir la página web.

De este modo puedes imprimir la página web ajustando solo ciertas características. Por ejemplo, mostrar el botón de impresión en la pantalla, pero ocultarlo al imprimir.

Todo esto lo haremos con clases que ya vienen en Bootstrap. No  vamos a programar nada manualmente, aunque si quieres, puedes hacerlo de manera nativa.

(más…)

Por parzibyte, hace
Clima con Angular - App que consume API

Angular – Aplicación para el clima con API

Clima con Angular - App que consume API

Clima con Angular – App que consume API

Hoy te voy a mostrar un sistema web hecho con Angular. Se trata de una app web que muestra el clima a través de una API.

Lo que hace este software es obtener la ubicación del usuario a través de su IP y obtener el pronóstico del tiempo usando otra API a partir de la latitud y longitud obtenidas anteriormente.

Verás que está implementado de una manera muy sencilla utilizando componentes y servicios. Al final vamos a tener una app web que muestra:

  • Ubicación del usuario con nombre de la ciudad y país
  • Reloj
  • Reporte del clima para los próximos 5 días usando imágenes
  • La temperatura máxima y mínima esperada para determinado día

Además, la aplicación web será responsiva pues vamos a usar Bootstrap. Al final del post dejaré el enlace del repositorio para que puedas explorar el código fuente y descargarlo si es necesario. Como lo dije, utiliza Angular.

(más…)

Laravel: paginación de registros

En este post te voy a mostrar cómo puedes realizar una paginación en Laravel; es decir, mostrar registros (de la base de datos) por página, en lugar de mostrarlos todos a la vez.

Laravel ya provee una manera realmente sencilla de agregar paginación, incluso da la opción de agregar los enlaces a la página, y por supuesto, también permite cosas como la búsqueda u otros métodos del Query Builder, todo esto sin escribir ninguna consulta SQL manual.

(más…)

Autocompletado con Bootstrap, Vue y API

En este post  te mostraré cómo hacer un autocompletado, autocomplete, auto completado o como le llames usando Bootstrap, Vue y una API.

De modo que al final (por si no sabes lo que es un autocompletado) se cuente con una caja en donde se complete mientras el usuario escribe, así como la búsqueda de Google.

Te mostraré dos ejemplos, uno en donde los resultados se completan localmente, y otro en donde se hace una búsqueda para traer los resultados de la API en tiempo real. Voy a dejar el código completo al final.

Nota: si buscas un autocompletado con JavaScript puro, mira Awesomplete.

(más…)

Problemas con Awesomplete al usar Bootstrap

En este artículo te explicaré un problema que me pasó hace algún tiempo usando la librería Awesomplete y el framework Bootstrap.

Pasa que al hacer un autocompletado con AJAX,  el input perdía su estilo y se mostraba a la derecha de la etiqueta. Algo así:

Awesomplete con Bootstrap – Cambiando estilo de input

Cuando en realidad, debería mostrarse así:

Input correcto con awesomplete y Bootstrap

(más…)

Sistema de ventas con Laravel, Bootstrap y MySQL – Open source

Hoy voy a presentar un sistema que acabo de hacer con Laravel. Se trata de un sistema de ventas, punto de venta, PDV o como le llames, que sirve para llevar el seguimiento de los productos que se venden, el registro de ventas, etcétera.

Es un sistema totalmente gratuito y además open source; lo que quiere decir que puedes usarlo sin costo, y modificarlo a tus necesidades o personalizarlo. Entre sus opciones encontramos:

  • Utiliza Laravel en su última versión (a la fecha de escribir esto)
  • Bootstrap es usado para los estilos
  • Iconos de FontAwesome
  • Sistema totalmente responsivo, es decir, funciona en móviles, tabletas y computadoras
  • Control de inventario con precio de venta, precio de compra, utilidad, existencia, etcétera
  • Opción para realizar venta, agregando productos
  • Comprobación de existencia de inventario al vender
  • Resta de existencia al vender
  • Impresión de tickets de venta en impresora térmica
  • Reporte de ventas
  • Inicio de sesión y registro de usuarios
  • Gestión de usuarios (novedad)
  • Registro de clientes (novedad)
  • Ticket que incluye el nombre del cliente (novedad)

Ahora veamos cómo está hecho, en dónde obtenerlo, etcétera.

(más…)

Formulario enviado a PHP usando Ajax, diseño Bootstrap 4

Enviar formulario con AJAX y PHP

Enviar datos a PHP usando AJAX

En este post vamos a ver cómo enviar un formulario de HTML a PHP pero sin recargar la página, simplemente usando AJAX.

Recordemos que AJAX es una técnica que permite enviar y recibir datos de manera asíncrona, sin bloquear el hilo principal, además de ahorrar ancho de banda pues solo cargamos lo que se necesita.

(más…)

Por parzibyte, hace

Tabla responsiva en Bootstrap – Ejemplo

Tabla responsiva en Bootstrap

En este post te mostraré cómo hacer que una tabla o elemento table de HTML sea responsiva en Bootstrap 4.

Una tabla responsiva en Bootstrap 4 es una tabla que se adapta a cualquier tamaño de pantalla, aunque específicamente hablando de tablas, las de Bootstrap se deben encerrar en un div que hace que al tabla sea “scrollable”, pero la tabla mantiene su tamaño.

Con los ejemplos verás a lo que me refiero.

(más…)

Por parzibyte, hace
Validar formularios en Spring Boot

Validar formularios en Spring Boot

Validar formularios con Spring Boot

En este post te mostraré a validar un formulario en Spring Boot y a mostrar los mensajes de error (para indicar en dónde se equivocó al llenarse) con Thymeleaf.

La validación es muy fácil, pues solo se utilizan anotaciones en la entidad.

Verás que es muy sencillo gracias a las anotaciones como Min, NotNull y Size, las cuales se encuentran en:

javax.validation.constraints.*

(más…)

Demostración de reCAPTCHA v2 con PHP

reCAPTCHA v2 con PHP – Ejemplo de integración

Integrar reCAPTCHA v2 con PHP en formulario

En este post te enseñaré a integrar el servicio llamado reCAPTCHA v2 con PHP, el cual es un simple captcha o checkbox de “no soy un robot” en un formulario HTML.

También te enseñaré a verificarlo con PHP del lado del servidor.

El servicio que vamos a integrar es reCAPTCHA v2, el cual funciona en varios lenguajes de servidor, pues se consume usando HTTP; hoy veremos cómo hacerlo en PHP.

Veremos un ejemplo del formulario y de la comprobación en el lado del servidor.

También dejaré una demostración. Al final tendremos algo como lo del gif:

Demostración de reCAPTCHA v2 con PHP

Formulario de Bootstrap 4 con reCAPTCHA v2 y PHP

(más…)

Juego de Memorama en JavaScript – Tutorial

Resumen: en este post te voy a explicar cómo hacer el juego de memorama en JavaScript. Pondré el código fuente y una demostración en línea.

Características del memorama con JavaScript

Memorama programado en JavaScript – Tutorial de juego

Este juego de memorama en JS que vengo a presentar tiene las siguientes características:

  • Totalmente responsivo, es decir, se adapta a cualquier pantalla
  • Las imágenes se pueden cambiar
  • Intentos máximos modificables
  • Alerta para cuando ganas y cuando pierdes
  • Código fuente modificable

Nota: otro videojuego que desarrollé con JavaScript fue el de snake.

(más…)

App de notas con PHP – Ejemplo de código

En este post te voy a explicar y mostrar un ejemplo de código con PHP, MySQL, Twig y Bootstrap en donde se gestionan notas y usuarios.

La app de notas es totalmente responsiva y hecha completamente con PHP, usando MySQL para la persistencia de datos.

El correo es posible gracias a Twig para renderizar la vista, y PHPMailer para enviarlos.

  • Un usuario puede ver, crear, editar y eliminar notas
  • Cualquier usuario puede registrarse usando su correo electrónico
  • Los usuarios pueden cambiar su contraseña
  • Para que el usuario se registre, se debe verificar el correo electrónico
  • Los usuarios pueden resetear su contraseña olvidada
  • Un usuario no puede ver ni modificar las notas de otro usuario
  • Las notas guardadas deben guardar la fecha y hora de creación

Como lo ves, está muy enfocado a la gestión de usuarios.

(más…)

Por parzibyte, hace

Mi caja de herramientas para PHP

Desde hace algunos meses he estado intentando encontrar el punto perfecto para desarrollar con PHP sin usar ningún framework como Laravel o CodeIgniter.

Como desarrolladores, queremos algo que sea sólido, fácil de usar y confiable; además de que tenga rica documentación y su uso sea entendible.

Hoy vengo a presentar mi caja de herramientas que uso al desarrollar con PHP, la cual podría ser llamada framework.

También quiero mostrar cómo es que se pueden juntar las herramientas para tener una base sólida de desarrollo con PHP.

Nota: puedes ver la plantilla en GitHub.

(más…)

Por parzibyte, hace