Plantilla HTML con aside, footer, section y header - Barra a la derecha

Plantilla HTML con header, section, aside y footer

En este post te mostraré una plantilla HTML que tiene los elementos o etiquetas header, section, aside y footer. Es un simple ejemplo con HTML y CSS para una página web.

Plantilla HTML con aside, footer, section y header - Barra a la derecha

Plantilla HTML con aside, footer, section y header – Barra a la derecha

El aside y el section tienen la misma altura, y el aside es mostrado a la derecha con un borde. Obviamente tú podrás cambiar los colores o el estilo, aquí solo te dejo una plantilla HTML muy simple con CSS puro.

(más…)

JavaScript – Generar archivo txt con Blob

En este post te mostraré cómo crear un archivo de texto en el navegador con JavaScript, escribir contenido dentro del mismo y luego forzar su descarga. Básicamente vamos a guardar un Blob con JS.

De este modo vas a poder generar un txt con JS y descargarlo. Además, con lo que te mostraré podrás generar un CSV o cualquier tipo de archivo siempre y cuando sepas estructurarlo.

Todo lo que aprenderás será aplicado del lado del cliente, así que no harás llamadas al servidor. Por cierto, usaremos Blob y URL.createObjectURL.

(más…)

Mostrar ubicación de usuario en mapa usando JavaScript, GPS y OpenLayers

Mostrar ubicación en mapa en tiempo real – Programación

En el artículo de hoy te mostraré cómo mostrar la ubicación del usuario en un mapa en tiempo real e ir actualizando el marcador del mapa conforme el usuario se mueva.

Esto puede servir para varias cosas. La más simple es mostrarle al usuario su ubicación en el mapa, pero puede enfocarse a algo tan complejo como hacer algo como Uber (enviando la ubicación a un servidor y todo eso).

Por cierto, vamos a usar JavaScript y OpenLayers (alternativa a Google Maps): tecnologías gratuitas y open source que no nos obligan a aceptar licencias ni pagar.

Obviamente esto se puede usar en dispositivos móviles Android o iOS mientras tengan un navegador web decente. Y más tarde podemos convertir la app web en una PWA para que sea algo así como una app nativa (como hice con la app de transportes).

Pero bueno, vamos a lo interesante: cómo obtener la ubicación del usuario y mostrarla en el mapa mientras se mueve.

Puedes acceder a la demostración justo ahora desde este enlace. Te debería mostrar tu ubicación actual con el símbolo de un auto.

(más…)

Aplicación de temporizador con JavaScript - Programar tiempo restante

Temporizador con JavaScript – Open source

En este post sobre programación web y JavaScript te mostraré cómo hacer un temporizador usando JS puro sin ningún framework. Básicamente será una cuenta regresiva.

Temporizador en JavaScript - Indicar minutos y segundos para cuenta regresiva

Temporizador en JavaScript – Indicar minutos y segundos para cuenta regresiva

Le daremos al usuario la posibilidad de elegir los minutos y los segundos para comenzar la cuenta regresiva, el temporizador comenzará (se puede pausar en cualquier momento) y cuando llegue a 0 va a reproducir un sonido de alarma.

Todo esto lo haremos usando solo HTML, CSS y JavaScript.

(más…)

Recetario web con PHP y Vue - Open source y gratuito

Software para recetas – gratuito y open source

En este artículo te mostraré un software para recetas que es gratuito y open source. Esto también puede ser conocido como recetario online, libro de recetas, libro de recetas en línea, alternativa simple y open source a kiwilimón, libro de cocina online, programa para recetas, programa para gestionar recetas, sitio de cocina, etcétera.

Lo que te muestro aquí está hecho con Vue y PHP usando MySQL como base de datos. Permite:

  • Registrar recetas con foto, nombre, porciones, ingredientes y pasos
  • Los ingredientes cambian dependiendo de las porciones de manera automática
  • Listar recetas en tabla para editarlas y eliminarlas, es decir, gestionarlas
  • Mostrar recetario o libro de cocina en línea con opción de búsqueda
  • Imprimir receta de manera amigable
  • Ver detalles de receta con cajas de texto para marcar los ingredientes y pasos completados
  • Modificar el software a tus necesidades ya que es open source y gratuito

Oh, y si te lo preguntas, decidí crearlo porque en una ocasión busqué una receta y el sitio en donde la encontré no me daba la opción de imprimirlo.

Vamos allá.

(más…)

Código QR con HTML y JS - Descargar como imagen

Generar códigos QR con JavaScript

En este post de programación web te voy a mostrar cómo generar códigos QR desde JS o JavaScript para que puedas generar un QR desde la web.

Vamos a usar una librería de terceros; verás que es muy simple crear códigos QR y tal vez esto te anime para crear tu propio generador.

Te aviso que vamos a usar JavaScript puro, así que puedes portar este código para frameworks como Angular, React o Vue.

(más…)

Solucionar fracciones en línea - Suma, resta, producto y cociente

Solucionador de fracciones con JavaScript

Hace unos días te mostré cómo resolver fracciones o quebrados usando JavaScript y programación orientada a objetos para hacer las operaciones como suma, resta, multiplicación y división.

Hoy te traigo un ejemplo práctico de un solucionador de operaciones de fracciones online que recién he programado.

Por cierto, si tú solo eres un usuario que está interesado en usar el software puedes entrar directamente al solucionador de fracciones en línea.

(más…)

Máximo común divisor usando JavaScript JS

Máximo común divisor en JavaScript

En este post de programación en JS vamos a ver cómo sacar el máximo común divisor de dos números usando el algoritmo de Euclides con dos enfoques: recursivo y con ciclos.

Máximo común divisor usando JavaScript JS

Máximo común divisor usando JavaScript JS

Al final tendremos una función que te dice el máximo común divisor (MCD) de dos números usando JavaScript.

Recuerda que el Máximo común divisor es el mayor número que divide a dos números de manera entera. Hay varios enfoques pero hoy te enseñaré cómo hacerlo en JavaScript.

(más…)

Por parzibyte, hace
Reutilizar plantillas en Flask con Jinja - Plantilla base

Reutilizar plantillas en Flask con Jinja

En este post sobre Flask te mostraré cómo definir una plantilla base o plantilla maestra y después solo sobrescribir  el contenido y ciertos bloques, de modo que puedas definir y reutilizar una plantilla, evitando repetir código.

Para ello vamos a usar el template engine que Flask usa por defecto y que nos viene de maravilla: Jinja.

(más…)

Por parzibyte, hace

PHP – Iniciar sesión si no está iniciada

En este corto artículo te mostraré cómo iniciar una sesión de PHP solo si la misma no está iniciada. De este modo podemos invocar a la función que te mostraré sin importar si la sesión ya ha sido iniciada anteriormente, evitando el aviso que dice:

Notice: session_start(): A session had already been started – ignoring in archivo..php on line N.

(más…)

Por parzibyte, hace

Mostrar temperatura en servidor web de ESP8266

La tarjeta NodeMCU ESP8266 es capaz de ejecutar un servidor web en donde podemos responder con HTML, JSON, etcétera.

Además, se puede conectar a una red WiFi y a su vez a internet. Por otro lado, puede conectarse a varios sensores como lo es el DHT22 que sirve para medir la temperatura y humedad.

Termómetro digital – Mostrar temperatura y humedad en sensor DHT22 con servidor web

Gracias a eso podemos crear un servidor web que nos va a decir la temperatura y humedad del ambiente usando el sensor DHT22. De este modo podremos conectarnos a la tarjeta usando su IP, y la misma nos va a mostrar (gracias al web server) la última lectura del sensor.

(más…)

Servidor web con ESP8266

En un post que escribí hace un tiempo te mostré cómo hacer un servidor web con la tarjeta NodeMCU ESP8266 pero en ese caso tenías que conectarte a la red WiFi que la tarjeta crea, es decir, la misma creaba una red WiFi y actuaba como Access Point.

Ahora te mostraré cómo hacer un servidor web pero que a su vez se conectará a tu red local. De este modo te podrás conectar a la tarjeta dentro de tu red local, ya que la misma se conectará como cualquier otro dispositivo, pero va a tener un servidor web ejecutándose.

(más…)

Por parzibyte, hace

SPA con MERN: ejemplo de aplicación web

En este artículo te enseñaré un ejemplo completo de conexión a MongoDB y Express con React. Vamos a usar el stack MERN para hacer un CRUD completo.

Al final tendremos un proyecto completo que será una single page application escrita con React, misma que consumirá una API de Node creada con Express. Los datos van a residir en una base de datos de MongoDB a la que vamos a acceder usando Mongoose.

Como siempre, te explicaré el código más importante a través del post, y te dejaré el repositorio completo al final del post para que puedas explorarlo a tu gusto.

(más…)