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 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 mi blog te he mostrado cómo descargar un canvas de HTML y JavaScript como PNG, pero no te mostré cómo hacerlo en otro formato. Por ello es que en este post te mostraré cómo descargar un canvas como imagen ya sea PNG o JPG, respetando el tipo MIME image/jpeg o image/png. ...
Hoy voy a mostrarte cómo usar un if dentro de una plantilla HTML cuando utilizas Webpack, HtmlWebpack o html-webpack. Concretamente yo estoy usando Webpack con la CLI de Vue y tuve la necesidad de incluir un script de JavaScript solo en el entorno de producción, cosa que fue muy sencilla de hacer con EJS y Webpack. En este post te mostraré cómo hacer una condicional dependiendo de si estamos en producción o desarrollo dentro de HTML. ...
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 con JavaScript del lado del servidor te mostraré cómo crear un PDF usando Node.js y el paquete html-pdf. Gracias a esto vamos a generar un PDF usando una plantilla HTML. Aunque al inicio puede parecer complejo verás que en realidad es una forma muy simple de crear facturas, tickets y todo tipo de documentos PDF. Además de guardar el PDF en el almacenamiento, te enseñaré cómo mostrar el PDF directamente en el navegador usando Express. ...
En este tutorial te enseñaré cómo alojar tu sitio web o aplicación web en GitHub totalmente gratis. Si bien GitHub no está pensado como un servicio de hosting, podemos ejecutar nuestras aplicaciones dentro del servicio. Te enseñaré cómo usar GitHub para servir tu proyecto web. Por ahora solo te mostraré cómo usarlo para servir JavaScript, HTML y CSS (pues no podemos procesar nada del lado del servidor). Así que, que quede claro: solo va a funcionar para las cosas del lado del cliente y no del lado del servidor sin importar el lenguaje de programación. Pero no te preocupes, para un portafolio o aplicación web funcionará de maravilla, siempre y cuando no utilice backend. ...
En este post te enseñaré cómo incorporar un vídeo de YouTube en una página web. Siempre buscamos la manera de colocar un enlace de YouTube en el src de una etiqueta <video> pero eso no es posible por el momento, solo que siempre hay una solución y es la que te mostraré en el post. ...