Hola mundo con Angular

Resumen: crear proyecto básico de Angular usando la CLI, es decir, hacer un hola mundo con Angular o mejor dicho, Hola angular.

En este post veremos cómo comenzar un proyecto de Angular, cómo modificarlo y finalmente cómo “compilarlo” para tener una versión lista para producción.

Recuerda que el desarrollo de Angular se hace con la angular CLI; si no cuentas con ella mira aquí cómo se instala.

(más…)

Formulario de contacto con PHP - Diseño de formulario

Formulario de contacto en PHP y Bootstrap

Resumen: Crear formulario de contacto en PHP y Bootstrap usando mail

Los formularios de contacto son esenciales en una página web donde hay interacción con clientes o usuarios, pues así pueden pedir más información o enviar un mensaje.

Hoy vamos a ver cómo crear un formulario de contacto con PHP muy simple:

  1. Será un formulario en donde se pedirá el nombre, correo y mensaje
  2. Esos 3 datos serán enviados al correo electrónico del administrador del sitio y se podrá responder directamente al correo del remitente

Para ello vamos a usar la función mail y un formulario de Bootstrap.

(más…)

Convertir página web a PDF con wkhtmltopdf

Convertir HTML a PDF con wkhtmltopdf

Hoy vamos a ver cómo convertir un documento HTML (o página web) a un documento PDF utilizando la línea de comandos y un ejecutable llamado wkhtmltopdf que convierte HTML a PDF.

Si te preguntas de qué nos sirve de esto yo te respondo: gracias a que se puede ejecutar desde la línea de comandos, CMD o como lo llames, podemos hacer que casi cualquier lenguaje de programación invoque al binario y así convertir documentos o páginas web HTML a PDF desde una página web o aplicación de escritorio.

(más…)

Formulario con Flask

Procesar formulario con Flask

Hoy vamos a ver cómo trabajar con los formularios web en Flask para introducir datos y enviarlos de tal manera que Flask pueda procesarlos.

Formulario con Flask

Procesar formulario usando Python y Flask

Para ello vamos a usar el módulo request y acceder a request.form.get, usando también render_template para renderizar las vistas.

(más…)

Tabla responsiva en Bootstrap – Ejemplo

Tabla responsiva en Bootstrap

En este post te mostraré cómo hacer que una tabla o elemento table de HTML sea responsiva en Bootstrap 4.

Una tabla responsiva en Bootstrap 4 es una tabla que se adapta a cualquier tamaño de pantalla, aunque específicamente hablando de tablas, las de Bootstrap se deben encerrar en un div que hace que al tabla sea “scrollable”, pero la tabla mantiene su tamaño.

Con los ejemplos verás a lo que me refiero.

(más…)

Enfocar input o textarea con JavaScript

En este post te mostraré a enfocar o darle focus a un elemento de un formulario de HTML usando JavaScript, ya sea un input o un textarea.

Enfocar un elemento en JavaScript es hacer que, cuando el usuario comience a escribir usando el teclado, el texto aparezca en el campo de texto, en pocas palabras que se enfoque el input o textarea.

Para esto vamos a usar querySelector, pues necesitamos una referencia al DOM.

(más…)

Documento modificado con querySelector y querySelectorAll en JavaScript

querySelector y querySelectorAll en JavaScript

Explicación de querySelector y querySelectorAll en JavaScript

Introducción a querySelector y querySelectorAll en JS.

En este post te explicaré dos funciones de JavaScript que funcionan para obtener referencia a un elemento del DOM. Estoy hablando de:

  • document.querySelector
  • document.querySelectorAll

Que bien son un remplazo de document.getElementById y otras funciones un poco complejas.

(más…)

Asociar información a elementos dinámicos con JavaScript

JavaScript – Asociar información a elementos dinámicos con data-*

Uso de los atributos data en HTML y JavaScript

Los atributos data de HTML son atributos personalizados que ayudan a asociar información a un elemento HTML (incluso si es creado de manera dinámica) con JavaScript.

Estos atributos vienen de maravilla cuando tenemos elementos dinámicos y queremos acceder a ellos en el click de un botón o de ellos mismos.

Lo que haremos hoy es ver cómo asociar información de una variable de JavaScript a un elemento HTML para después recuperarla en el click del botón:

Asociar información a elementos dinámicos con JavaScript

Demostración de click del botón al agregar información con los atributos data

Accede a la demostración aquí.

(más…)