Html

En este tutorial sobre diseño web te mostraré cómo mostrar una cuadrícula de imágenes en HTML usando CSS. Vamos a hacer que las imágenes ocupen determinado tamaño de la pantalla usando columnas y filas. Por ejemplo, hacer una cuadrícula de 2 x 3 imágenes, o de 2 x 2, distribuyendo correctamente el tamaño de la página para que las imágenes tengan el mismo tamaño. No vamos a usar Bootstrap, solo usaremos CSS, pues Bootstrap ya ofrece clases para hacer este tipo de cosas. Al final tendremos algo parecido a una tabla de imágenes que ocupan el mismo ancho de la pantalla, usando HTML y CSS. ...

En este post de HTML 5 te mostraré cómo aceptar determinada extensión de archivo en un input de tipo file de HTML. Anteriormente te mostré cómo aceptar solo imágenes en un seleccionador de archivos de HTML, ahora te enseñaré como especificar la extensión de los archivos permitidos para el input. Recuerda que esto solo es validación del lado del cliente, y que su propósito es meramente de diseño, no de seguridad. ...

Hoy veremos cómo reproducir sonidos con JavaScript, desde sonidos de efectos (como para un videojuego) o una canción completa. Todo esto lo vamos a lograr usando JavaScript y HTML, sin que se muestre un reproductor de sonido. ...

En este post te mostraré cómo exportar una página web a PDF a través de un botón, enlace o cualquier cosa soportada por JavaScript. A este proceso también se le conoce como convertir HTML a PDF. Es decir, convertir web a PDF usando programación con JavaScript y las siguientes librerías: html2canvas jsPDF html2pdf De hecho, html2pdf usa las dos librerías anteriores. Aunque parece complejo, verás que no lo es realmente. Con esta librería podemos crear un PDF muy parecido a la página web, incluyendo imágenes. ...

En este post te mostraré el juego de Conecta 4 programado en JavaScript con HTML y Vue, con estilos de Bootstrap. Es el juego de Conecta 4 pero versión web con opción jugador contra jugador, así como jugador contra CPU que usa una pequeña inteligencia artificial. A lo largo del post te mostraré cómo funciona el juego, qué tecnologías he usado, estilos, etcétera. También te mostraré cómo descargar el código fuente, pues el juego es totalmente gratuito y open source. Finalmente te dejaré una demostración para jugar conecta 4 en línea. ...

En este corto post te mostraré cómo limpiar un elemento HTML con JavaScript, es decir, algo como el método “empty” de jQuery, pero con JavaScript puro. Por ejemplo, con esto que te mostraré sabrás cómo eliminar todo el contenido de un elemento HTML ya sea una tabla, una lista, etcétera. A lo que haremos también se le conoce como Remover todos los hijos de un elemento HTML. ...

En este post te mostraré el atributo a establecer para aceptar solo imágenes en un campo de formulario de HTML 5 de tipo file, es decir, de un input type file. Por ejemplo, aceptar todo tipo de imágenes, solo imágenes PNG, etcétera. Recuerda que esto solo es para validar del lado del cliente y que es una ayuda al usuario, pues no implica seguridad que se debe aplicar del lado del servidor. ...

Este post es muy corto. Solo vamos a ver cómo centrar una tabla en una página web, usando CSS. ...

En este post te mostraré cómo leer códigos de barras en el navegador web ya sea de una computadora o dispositivo móvil, usando la cámara del teléfono o la cámara web; y el lenguaje nativo JavaScript. Esto hace que podamos hacer nuestras aplicaciones web todavía más diversas y con más características; en un ejemplo simple se me ocurre escanear el código de barras para un sistema de ventas. La librería que vamos a usar se llama QuaggaJS y es capaz de leer códigos de barras con formato EAN, CODE 128, CODE 39, EAN 8, UPC-A, UPC-C, I2of5, 2of5, CODE 93 y CODABAR. Con esto, podremos leer códigos de barras en dispositivos móviles o computadoras en tiempo real. ...

En este post te mostraré cómo puedes agregar campos de la tabla “users” en Laravel para así poder añadir algunos campos al modelo User. Explicado con otras palabras vamos a modificar la tabla de usuarios. Con este modelo me refiero al usuario que se usa para iniciar sesión y en general hacer la autenticación en Laravel. Veremos cómo agregar otro campo además de los que ya existen. ...