HTML

Directiva v-for en Vue JS

Resumen

En este post te mostraré cómo repetir cosas en la vista de una app con Vue.JS usando v-for.

v-for permite iterar arreglos, objetos y también hacer ciclos.

Veremos cómo usar v-for, además de proporcionar la clave con :key y finalmente tomar el índice y el valor por separado.

Nota: a través de los ejemplos usaré Bootstrap 4 para un mejor diseño, aunque esto no va a interferir con el tema principal de v-for y Vue.

Continue reading…

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.

Continue reading…

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.

Continue reading…

PHP – Formulario con dos botones

En este post te mostraré cómo tener un formulario en PHP con dos botones de tipo submit y cómo saber cuál botón de los dos fue presionado para enviar el formulario.

A partir del botón presionado en el formulario de dos botones podemos hacer diferentes acciones, sin tener que usar JavaScript ni otras técnicas.

Continue reading…

Dibujar figuras geométricas en Canvas con JavaScript

En este post recopilo algunos ejemplos de figuras geométricas dibujadas sobre un lienzo o canvas (elemento de HTML5) usando el lenguaje de programación JavaScript.

Las figuras que veremos son:

  1. Rombo
  2. Romboide
  3. Trapecio
  4. Trapezoide
  5. Pentágono
  6. Hexágono
  7. Heptágono

Nota: recuerda que ya vimos cómo dibujar triángulos, y también cómo dibujar rectángulos o cuadrados.

Para dibujar las figuras vamos a unir unas simples líneas con lineTo.

Continue reading…

Dibujar curvas en Canvas usando JavaScript

El elemento canvas de JavaScript tiene un gran soporte para dibujar formas. Por ejemplo, podemos dibujar líneas o curvas cuadráticas.

En este post te voy a mostrar cómo dibujar curvas de Bézier en JavaScript (o bueno, sobre un canvas) a través del método bezierCurveTo.

Nota: este tipo de curva tiene dos puntos de apoyo, si quieres una curva más simple utiliza el método quadraticCurveTo.

Continue reading…

Curva cuadrática de Bézier – Canvas en JavaScript

En este post te voy a mostrar un ejemplo de cómo dibujar o trazar una curva cuadrática de Bézier en un canvas de HTML5 usando JavaScript a través del método quadraticCurveTo.

Recuerda que una curva de Bézier tiene un inicio, un final y un punto de apoyo que define cómo será la curvatura.

Más adelante veremos el método que utiliza dos puntos de apoyo, igualmente con la curva de Bézier.

Continue reading…