Editor WYSIWYG con JavaScript

En estos días estuve buscando un editor HTML o un editor WYSIWYG, parecido al editor de WordPress pero de una manera muy simple. Las siglas hacen referencia a What you see is what you get, que es algo como: lo que ves, es lo que obtienes. Puedes probar el resultado final en el siguiente enlace: https://parzibyte.github.io/ejemplos-javascript/wysiwyg/ Esto es debido a que el HTML resultante, al momento de ser mostrado en otro lugar, se verá igual que en el editor. El punto es que estuve buscando un editor WYSIWYG para integrar con JavaScript en el navegador web, de manera simple y rápida, permitiendo alinear el texto, insertar imágenes y obtener el HTML resultante. Después de buscar y revisar las licencias (está disponible bajo la licencia MIT), encontré summernote y lo quiero recomendar así como mostrarte cómo usar ese editor de HTML en tu web. ...

abril 9, 2024 · 4 min · 654 palabras · Parzibyte

Punto de venta con PHP, jQuery y Bootstrap - Gratuito y open source

Hoy traigo al blog otro punto de venta gratuito y open source, pero este es especial pues fue el primer programa que hice y que fue usado por varias personas. El punto de venta que presento es un POS web, totalmente open source y gratuito, además de simple y bonito. Está hecho con PHP y JavaScript con jQuery (era el año 2016), usa MySQL/MariaDB como motor de base de datos y Bootstrap para los estilos, con varios temas. Como ya dije anteriormente, este fue mi primer punto de venta oficial que comencé como por el 2015 (apenas iniciaba la universidad, qué tiempos) y luego terminé en el 2016. Aunque parezca antiguo sigue funcionando como un encanto incluso con PHP 8. En este post te mostraré los módulos del sistema y cómo puedes descargarlo e instalarlo en tu computadora o en tu hosting compartido. El programa es totalmente responsivo y permite la impresión de tickets de manera local. ...

mayo 6, 2022 · 6 min · 1184 palabras · Parzibyte

Conversor de unidades con JavaScript

Hace mucho tiempo en mis inicios en la programación hice un conversor de unidades usando JavaScript, HTML, CSS y los frameworks Bootstrap y jQuery. Era para mi clase de física. Hoy vengo a presentarlo y compartirlo por si a alguien más le sirve. Es un simple convertidor de unidades web que transforma de una unidad a otra. Soporta: Longitud Masa Tiempo Energía Frecuencia Presión Tamaño de datos Temperatura Velocidad Volumen Área A través de este post te mostraré cómo funciona, cómo descargarlo y cómo está hecho. ...

marzo 17, 2021 · 10 min · 1965 palabras · Parzibyte

jQuery - Seleccionar elementos creados dinámicamente

Resumen: mostrar cómo seleccionar (con un selector de jQuery) elementos que son creados o dibujados de manera dinámica con jQuery. Como sabemos, podemos seleccionar elementos que ya existen, usando un selector como cuando usamos querySelector. Por ejemplo: $(".producto") O también: $("#nombreUsuario") El problema viene cuando dibujamos los datos de manera dinámica (por ejemplo usando AJAX) y debemos agregar un listener dinámico. ...

noviembre 28, 2019 · 2 min · 231 palabras · Parzibyte

AJAX, PHP y jQuery: carga de datos

AJAX, PHP y jQuery si bien no están ligados, se relacionan para crear aplicaciones web dinámicas usando tecnologías libres. En este post te mostraré cómo usar la librería jQuery para traer datos HTML y JSON desde PHP, todo eso sin refrescar la página. Para ello haremos una petición HTTP GET usando el método $.get de jQuery; de este modo vamos a poder usar la técnica de AJAX usando jQuery y PHP. ...

septiembre 24, 2019 · 5 min · 930 palabras · Parzibyte

Enviar formulario a PHP con jQuery y AJAX

Acabamos de ver cómo hacer una petición HTTP GET usando AJAX, jQuery y PHP. Ahora veremos cómo enviar un formulario con jQuery usando AJAX, procesarlo con PHP y recibir la respuesta de nuevo del lado del cliente. Para lograr esto, usaremos el método $.post y la librería de jQuery. Nota: recuerda que puedes hacer esto sin jQuery. ...

septiembre 24, 2019 · 3 min · 530 palabras · Parzibyte

Select y jQuery: obtener seleccionado, agregar opción, limpiar y escuchar cambios

jQuery sigue siendo una librería usada en estos últimos tiempos. Me atrevo a decir que es el framework más usado en el entorno de JavaScript, aunque claro, existen mejores por mucho, pero no vamos a discutir eso hoy. La librería de jQuery y su forma de seleccionar los elementos permite interactuar con los mismos de una manera muy fácil, pero debemos aprender los métodos. Por eso es que en este post veremos cómo trabajar con el elemento select de HTML desde jQuery. Veremos cómo: Obtener elemento seleccionado del select (la opción) Agregar una opción al select Limpiar el select, es decir, remover todas las opciones Escuchar cuando el usuario seleccione otra opción del select. Todo esto con jQuery, si quieres ver cómo se hace con JavaScript puro mira este post. ...

julio 8, 2019 · 3 min · 625 palabras · Parzibyte

Menú responsivo de Bootstrap 4 sin dependencias

En este post voy a mostrarte un ejemplo de código para tener el menú responsivo de Bootstrap sin dependencias como jQuery, usando únicamente algunas líneas de JavaScript puro. Bootstrap es el framework CSS por excelencia. Casi todo programador web lo conoce, es de hecho una base que hay que tener. Sin embargo, tiene una desventaja y es que normalmente no funciona sin jQuery (u otros frameworks). ...

junio 26, 2019 · 2 min · 338 palabras · Parzibyte

De cómo JSON salvó mi vida una vez

Introducción Esta es una entrada personal, algo así como una historia. Realmente JSON no salvó mi vida pero no podía poner un título como “De cómo cambié el content type para usar JSON en lugar de HTML y mandar cadenas complejas para evitar un error desconocido”. ...

octubre 25, 2018 · 4 min · 667 palabras · Parzibyte

Subir foto desde jQuery a un servidor con PHP y CodeIgniter utilizando AJAX

Introducción Hoy veremos cómo subir una foto o imagen a un servidor PHP. Dicha foto será elegida por el usuario desde un input de tipo file. La subiremos utilizando la clase FormData de Javascript en conjunto con la clase para recibir archivos en CodeIgniter. Esto lo haremos utilizando AJAX, por lo que la experiencia del usuario será mejor. Este post funciona para imágenes GIF, PNG o JPG pero supongo que igualmente podemos subir archivos de cualquier tipo. ...

abril 20, 2018 · 3 min · 478 palabras · Parzibyte