En este post aprenderás a mostrar un modal personalizado usando Bulma a través de Buefy. De este modo podrás mostrar una ventana superpuesta o lo que se conoce como un modal. Por cierto, vamos a usar componentes y propiedades de los mismos para separar los conceptos. Te invito a repasar la comunicación entre componentes y cómo usar Buefy. ...
Hoy te mostraré cómo hacer una cuadrícula o grid en donde cada sección se acople a la pantalla de manera automática y dinámica sin que tú sepas la cantidad de columnas que habrá. Esto es útil para cuando tenemos contenido dinámico (ya sea generado por el lado del cliente o del servidor) y queremos que las tarjetas o cuadros sobrantes se bajen automáticamente a otra fila. Básicamente haremos una cuadrícula que ajuste el contenido dinámico usando bulma y sus columnas. Verás que es muy sencillo. ...
Hoy vengo a presentar un generador de códigos QR que es gratis de usar para el usuario final (no necesitas registrarte ni usar una cuenta) además de que es open source para los programadores. En este post te voy a mostrar el enlace de la aplicación, cómo usarlo y cómo está hecho. Actualización: he actualizado este generador para que ya no necesite Vue ...
En este post te enseñaré cómo centrar una imagen dentro de un div usando el framework CSS Bulma. Hay varias formas, pero te enseñaré la que me ha funcionado hasta el momento. ...
En este post te mostraré un ejemplo completo de CRUD que hace las operaciones fundamentales de la base de datos usando MySQL y PHP, pero además las llamadas se hacen con AJAX desde JavaScript. Al final te dejaré el código completo que podrás descargar, probar y modificar, mismo que tendrá todas las operaciones para enviar y recibir datos desde JavaScript a un servidor PHP que se conecta a MySQL. Básicamente todo se hará del lado del cliente, no vamos a procesar formularios con PHP, solo llamadas AJAX con JSON. Así que tendremos un CRUD con PHP y AJAX. No vamos a usar ninguna librería como React, Vue o Angular; será JavaScript puro. ...
En este artículo te mostraré una plantilla de ejemplo para mostrar la temperatura y humedad. Será una plantilla simple y minimalista que solo tendrá el propósito de mostrar los datos de un termómetro. Como lo dije anteriormente, será una plantilla de ejemplo para mostrar los datos de un termómetro como lo son la temperatura y humedad. Puedes basarte en ella para mostrar los datos de un sensor físico o de una API. ...
Hoy te voy a mostrar cómo conectar dos tecnologías: PHP y React. Vamos a ver cómo traer y enviar datos a PHP (para guardarlos en MySQL) desde React también conocido como React JS. Al final podremos decir que estamos conectando React con PHP y MySQL. Lo que vamos a hacer será las 4 operaciones fundamentales (Crear, actualizar, eliminar y obtener) datos de MySQL para pasarlos a PHP y luego a React a través de una API. Como resultado vamos a tener una aplicación web creada totalmente con React que consume archivos de PHP a través de AJAX con JSON. Por cierto, será una SPA o Single Page Application. ...
Hoy te voy a presentar un software web programado con Laravel (en el lenguaje PHP, usando un poco de JavaScript) y Vue.js que gestiona un inventario de artículos; permite tomar fotos de los mismos, agregar áreas, etcétera. No es un software terminado ni listo para usarse en producción, de hecho sirve más para aprender sobre los conceptos de Laravel o para tomarlo como punto de partida. Al final del post dejaré la historia del mismo, que se resume a que era un software que ya no terminé pero que no me gustaría dejarlo en el olvido siendo que puede servirle a alguien más. Nota: en el post expongo los fragmentos de código más importantes, pero al final del post también dejaré el enlace al repositorio de GitHub en donde puedes explorar o descargar el código como tú gustes. ...
Buefy es un paquete de componentes que combinan BulmaCSS y Vue.js. Entre esos componentes encontramos el b-datepicker que no es más que un seleccionador de fechas, calendario o datepicker. Por defecto viene en inglés, pero provee la manera de especificar los meses y días en español, cosa que te enseñaré hoy: cómo poner el datepicker de Buefy en español. ...
El framework CSS de Bulma provee clases para agregar estilos a las tablas, así como contenedores de las mismas. Hoy vamos a ver cómo hacer una tabla responsiva utilizando la clase table-responsive, clase que funciona pero para que lo haga debemos hacer algunos cambios con los div padres. ...