Javascript

Los iconos de material design de Google son muy populares y se pueden integrar en varios frameworks o diseños. Hoy vamos a ver cómo usar los material icons en el framework Buefy, que es Bulma CSS con Vue. ...

En este post te mostraré un ejemplo de proyecto con OpenLayers en donde se muestran: Introducción a OpenLayers Descargar OpenLayers Creación de mapa Centrado de mapa en determinada ubicación Marcadores personalizados con imagen propia Listener de eventos como click o zoom cambiado Consumo de API PHP para obtener los marcadores Voy a desglosar cada cosa y al final dejaré el código del proyecto completo. ...

Resumen: mostrar una introducción (instalación y uso) a Sweet Alert 2, una librería de JavaScript para mostrar alertas y diálogos de confirmación con un diseño bonito. Te mostraré cómo descargar SweetAlert 2, además de: Mostrar una alerta Personalizar el contenido Mostrar un diálogo de confirmación y saber respuesta del usuario Diálogo personalizado con HTML Mostrar alerta con input para recoger información Todo esto usando JavaScript. Nota: el código mostrado aquí está en GitHub, y la demostración aquí. ...

En este artículo vas a aprender cómo subir tu aplicación web de Node.js en Heroku, sin importar el framework que uses (por ejemplo, express) de manera fácil, rápida y gratuita. Recuerda que para publicar tu app de Node en Heroku debes tener una cuenta de Heroku (no importa si es gratuita) e instalar la CLI de Heroku. También debes contar con Git, si no lo tienes, mira cómo comenzar con GitHub desktop. ...

Resumen: mostrar cómo controlar elementos en una página web usando la voz; es decir, implementar el reconocimiento de voz con JS para definir comandos de voz y ejecutar acciones (enviar un correo, mostrar un reporte, mostrar una gráfica, escribir texto) dependiendo de la acción. Para el reconocimiento de acciones de voz en la web (o mejor dicho, en el navegador con JavaScript) vamos a usar la librería annyang que internamente utiliza la API de speech recognition. Puedes ver lo que construiremos al final en este enlace. ...

En este post te voy a mostrar un sistema de control escolar o gestión de escuelas. Es un software web que hice hace algún tiempo y vengo a mostrar hoy. Lo que tiene a grandes rasgos es: Control de estudiantes o alumnos Registro de profesores o docentes Registro de materias Control de calificaciones Calificaciones por período y número de evaluación Asignación de materias a docentes Generación de boletas Control de horarios de materias Impresión de boleta Impresión de horario de clases Gráficas de comparación entre períodos Como lo dije, el sistema es un sistema web que puede trabajar en internet o de manera offline. Es compatible con Linux y Windows. También es totalmente responsivo, es decir, se adapta a cualquier pantalla. ...

Resumen: mostrar cómo hacer un replace y un replaceAll para remplazar caracteres en una string de JavaScript, ya sea solo la primera aparición o remplazar todas las apariciones; usando el método replace y expresiones regulares. Es importante mencionar que el método replace devuelve una nueva cadena con los caracteres o letras remplazados; es decir, no modifica a la cadena internamente. ...

Resumen: en este post te explico la importancia del evento DOMContentLoaded en JavaScript que afecta principalmente cuando recuperamos elementos del DOM antes de que el DOM esté listo. Esto es el equivalente a $(document).ready de jQuery. ...

Resumen: en este post te mostraré cómo usar JavaScript del lado del cliente (no necesitas nada del servidor) para generar un documento de Excel (extensión xlsx) a partir del contenido de una tabla HTML. Es decir, vamos a aprender cómo exportar a Excel desde JavaScript un simple elemento table de HTML usando la librería TableExport, permitiendo exportar desde la web una hoja de cálculo. De este forma puedes exportar reportes o tablas creadas por un framework, a mano, del lado del servidor, o del cliente. Al final tendremos lo que se ve aquí. Nota: esto es totalmente compatible con jQuery, pero no lo necesitas. Es decir, funciona con o sin jQuery. ...

Resumen: mostrar cómo autocompletar un campo con valores de una tabla de una base de datos MySQL; trayendo los datos con AJAX. En este post te mostraré cómo sugerir nombres conforme el usuario escribe; trayendo los datos de MySQL con una consulta LIKE y usando fetch para traer los datos por AJAX en tiempo real. ...