Aplicación de notas con localStorage, JavaScript, Bootstrap y Vue js

Aplicación web para tomar notas con JavaScript, Vue.js, Bootstrap y localStorage

Hace algún tiempo creé una aplicación web como un ejercicio para aplicar para un trabajo. Decidí hacerla con Vue.js, Bootstrap y localStorage en conjunto.

Al final resultó en algo como lo de la imagen:

Aplicación de notas con localStorage, JavaScript, Bootstrap y Vue js

Aplicación de notas con localStorage, JavaScript, Bootstrap y Vue js

Es una simple aplicación de notas que puedes crear, eliminar, editar y listar. También se puede cambiar el color de todas las notas (fue un requisito, no cosa mía, así como el idioma).

(más…)

Creación de tabla dentro de MySQL con migración de Laravel

CRUD de Laravel con MySQL: administrador de canciones

CRUD de Laravel con MySQL o MariaDB

Hoy toca el turno de Laravel (un framework de PHP) para conectarse a la base de datos más popular: MySQL.

Creación de tabla dentro de MySQL con migración de Laravel

Creación de tabla dentro de MySQL con migración de Laravel

En este post voy a explicar cómo conectar Laravel con MySQL o MariaDB, comenzando por configurar la base de datos, pasando a través de las rutas, repasando el motor de plantillas de Blade y tocando un poco el tema de los mensajes flash.

Al final vamos a tener un CRUD o ABC, en donde se verán las operaciones básicas de Laravel con MySQL: insert o insertar, update o actualizar, select o seleccionar y finalmente delete o eliminar.

(más…)

Estructura de CSS y Fuentes de Font Awesome

Configuración e instalación de Iconos de Font Awesome 5.7 para uso offline

Descargar Iconos de Font Awesome para usar sin internet

En este post voy a explicar cómo descargar y configurar los iconos de la librería Font Awesome para alojarlos localmente o en nuestros propios servidores.

Alojar estos iconos de manera offline es importante cuando creamos aplicaciones web que no van a tener acceso a internet, es decir, que serán aplicaciones fuera de línea.

También es necesario saber cómo configurar el directorio de carpetas, fuentes y CSS dentro de nuestro proyecto, de esta manera podemos tener los iconos de Font Awesome en nuestro propio servidor o en localhost, sin depender del internet.

(más…)

Blade y Laravel: ciclos, condicionales, token CSRF y componentes

Ya vimos cómo funcionan las vistas en Laravel y ahora sabemos que utilizan Blade.

Blade tiene muchas directivas que permiten hacer ciclos, mostrar cosas usando if o switch, generar el input para el token CSRF y muchas cosas más.

También nos permite definir componentes para más tarde usarlos en otras vistas superiores, e incluso incluir vistas en otras vistas.

Antes que nada, dejo el enlace a la documentación oficial.

(más…)

Cargar sitios web de manera instantánea con instant.page

Mejorar y agilizar la carga de las páginas web precargando enlaces

Hace algún tiempo estuve presente en una conversación donde se discutía por qué las páginas de la documentación de cierto sitio web se cargaban de manera instantánea. Es decir, hacías click en un enlace y la carga era inmediata.

Analizando algunas cosas se descubrió que los componentes eran precargados cuando el usuario ponía el cursor sobre un enlace, es decir, cuando el usuario estaba a punto de hacer click para navegar a otro lugar.

Después de eso vi que se crearon muchas librerías, y justamente hoy vamos a ver cómo usar una de ellas para hacer más rápida la carga de una página web a la que navega el usuario: instant.page.

(más…)

Consultar datos de una tabla usando un cursor - PDO, PHP y MySQL

PHP y PDO parte 2: iterar con cursor y comprobar si elemento existe

Continuación de PDO con PHP para trabajar con bases de datos

En otro post ya hemos visto las bases para trabajar con PHP, PDO y MySQL (también SQLite). Ahora veremos dos cosas que vienen de ayuda al trabajar con PDO:

  1. Seleccionar datos y recorrerlos con un cursor en lugar de obtenerlos como arreglo
  2. Comprobar si un elemento existe en la base de datos
Consultar datos de una tabla usando un cursor - PDO, PHP y MySQL

Consultar datos de una tabla usando un cursor – PDO, PHP y MySQL

El primer punto viene de maravilla cuando hablamos de rendimiento. El segundo sirve para muchas cosas, por ejemplo, ver si un usuario ya existe al registrarse o cosas de esas.

(más…)

Escuchar click de botones en JavaScript

Escuchar el click de un botón o botones con JavaScript

En este post explicaré algo muy simple: cómo saber cuando un usuario hace click en un botón de JavaScript, también cuando hace click sobre muchos botones y cómo acceder al elemento del DOM.

Esto también funcionará para saber cuando alguien hace click sobre otro elemento.

Escuchar click de botones en JavaScript

Escuchar click de botones en JavaScript

Foto tomada con Polacode y marca de agua puesta con waterpy.

Vamos a usar querySelector, querySelectorAll y addEventListener para ejecutar una función en el click del elemento.

(más…)

Paquete de iconos Eva Icons para la web o para escritorio. Iconos Open source

Eva Icons: un paquete de iconos open source para la web o para descargar

Hoy vengo a presentar un paquete de iconos totalmente open source y descargable (no es mío) llamado Eva Icons. Son unos iconos que se pueden usar en la web, o como PNG y SVG en distintos proyectos.

Gracias a que son unos iconos open source y descargables, podemos usarlos como PNG o en la web para nuestro siguiente proyecto.

Paquete de iconos Eva Icons para la web o para escritorio. Iconos Open source

Paquete de iconos Eva Icons para la web o para escritorio. Iconos Open source

En este post voy a explicar cómo descargar los iconos y cómo usarlos en la web.

(más…)

Página web de parzibyte.me renovada

He renovado mi página principal y ahora es open source

Justo hoy he publicado mi página principal totalmente renovada y hecha por mí, además de que es totalmente open source (he puesto el repositorio en línea).

Ya era hora, pues no estaba mostrando mi portafolio y la última actualización fue en diciembre del 2017.

Página web de parzibyte.me renovada

Página web de parzibyte.me renovada

Voy a explicar en este post cómo fue la creación y las cosas que usé para crearla; además de exponer cómo hice para que cargara rápido y otras cosas.

(más…)

Sistema web para cotizaciones y presupuestos

Presentando un sistema web para hacer cotizaciones y presupuestos, gratuito y open source

Hoy vengo a presentar un software para realizar cotizaciones o presupuestos, el cual es totalmente gratuito de usar en la nube; así como open source. Es decir, aparte de que puedes usarlo en mi sitio, puedes descargarlo y modificarlo.

Sistema web para cotizaciones y presupuestos

Sistema web para cotizaciones y presupuestos

Características del software

No es la gran cosa, pero entre sus principales características encontramos las siguientes:

  • Realizar cotizaciones o presupuestos
  • Estimar el costo requerido, el cual se configura por cada servicio
  • Calcular tiempo requerido por cada servicio
  • Describir características y/o condiciones del trabajo
  • Agregar clientes para ligarlos a las cotizaciones
  • Imprimir la cotización o guardarla como PDF (esto depende del navegador la mayoría de veces)
  • Multiusuario: cualquier usuario puede registrarse y usarlo, así de simple. Eso sí, las cotizaciones, servicios y características son separadas por usuario
  • Totalmente open source
  • Escrito con PHP, utiliza PDO para interactuar con la base de datos
  • Base de datos MySQL
  • Lado del cliente con Vue.JS y Bootstrap
  • Mensaje de agradecimiento, presentación y pie totalmente configurables

Se me ocurre que puede servir tanto como para estudiantes que tienen que entregar un proyecto con PHP simple, así como para personas que necesitan un software como estos.

Voy a explicar cómo fue creado, en dónde se puede probar y también dónde se puede leer el código fuente.

(más…)

Cálculo del factorial de un número en JavaScript. Aplicación web online

Aplicación web para calcular el factorial de un número online

Para ejemplificar y combinar el uso de BigInt con los Web Workers en JavaScript me di a la tarea de crear una sencilla aplicación web que permite calcular el factorial de cualquier número, todo desde el navegador, es decir, online.

El uso de los Web workers es para hacer cálculos extensos, y el de BigInt para no quedarnos cortos a la hora de trabajar con números grandes. Por el momento sólo funciona en Chrome y Opera, ya que usa BigInt y no quise usar el polyfill.

Cálculo del factorial de un número en JavaScript. Aplicación web online

Cálculo del factorial de un número en JavaScript. Aplicación web online

Voy a explicar la creación de la aplicación web y cómo utilicé cada cosa para crear todo esto.

(más…)