Formatear fechas en JavaScript

En este post voy a mostrarte una forma de formatear la fecha (o en términos específicos un objeto de tipo Date) en JavaScript.

No vamos a usar el método toLocaleString ni parecidos, crearemos un método propio ya que aunque hay métodos que pueden servir mejor, en ocasiones es necesario formatear la fecha en JavaScript de acuerdo a un formato manual.

(más…)

JavaScript: primera letra mayúscula

En este post vamos a ver un ejercicio con JavaScript. Se trata de una función que convierta a mayúscula la primera letra o primer carácter de una string.

Es el equivalente a la función ucfirst que existe en otro lenguaje, y convierte a mayúscula el primer carácter de la cadena. Por ejemplo, transforma “hola” a “Hola”.

(más…)

Creando una librería HTTP de JavaScript

En este post te mostraré una envoltura de la función fetch para encerrar las peticiones básicas que se hacen con los verbos GET, POST, PUT y DELETE.

De este modo nos ahorramos repetir código y aprendemos un poco sobre la reutilización del mismo.

Al final tendremos una librería que nos permitirá hacer peticiones HTTP como cualquier otra usando AJAX.

He usado esta librería y evitado usar Axios o proveedores de terceros. El primer uso es en mi sistema de ventas, aunque también lo he usado en el sistema escolar que hice recientemente.

(más…)

Demostración openlayers con marcadores y coordenadas

Tutorial OpenLayers: marcadores, coordenadas, eventos y datos dinámicos

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.

(más…)

Sweet Alert 2 – Tutorial con ejemplos

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í.

(más…)

Comandos de voz en la web con JavaScript y Annyang - Demostración

Comandos de voz en la web con JavaScript y Annyang

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.

(más…)

Reemplazar ocurrencias en cadena de JavaScript

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.

(más…)

Control escolar - Bienvenida al sistema

Control escolar – Software web para gestión de escuelas

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.

(más…)