En el post de hoy te mostraré algo muy simple: cómo centrar una imagen HTML usando CSS, sin frameworks.alinear una imagen al centro Si bien es algo sencillo, en ocasiones olvidamos cómo hacerlo. Así que en este artículo te mostraré el estilo CSS para centrar un elemento img. ...
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. 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. ...
En el post de hoy te mostraré cómo prevenir que el usuario navegue a otra página o pestaña, recargue la página o la cierre. Todo esto con JavaScript. Desde ahora te digo que (si bien contradice el título del post) no es posible prevenirlo al 100 %, solo se puede mostrar una advertencia que el usuario puede ignorar. Si bien no vamos a prevenir, te mostraré cómo mostrar un mensaje para darle al usuario la posibilidad de no cerrar la pestaña o navegar a otro lugar. Esto funciona con Chrome y Firefox en sus últimas versiones al momento de escribir este post. ...
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. ...
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. ...
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. 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. ...
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á. ...
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. ...
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. ...
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. 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. ...