Incorporar vídeo de YouTube en HTML con iframe

Incorporar vídeo de YouTube en HTML5

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.

(más…)

Validar formulario con JavaScript y HTML

Validar formularios en JavaScript

En este post te enseñaré a validar formularios HTML usando JavaScript nativo o JS puro, sin usar frameworks ni librerías externas.

Validar formulario con JavaScript y HTML

Validar formulario con JavaScript y HTML

De este modo vas a poder comprobar si un formulario se envía dependiendo de los valores que el usuario haya colocado. Te enseñaré un ejemplo para que veas cómo validar un formulario en JavaScript apoyándote además de la validación nativa de HTML.

Solo recuerda que la validación del lado del cliente se hace por mera decoración, y no por seguridad; ya que la seguridad se aplica en el lado del servidor.

(más…)

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…)

Conversor de unidades con JavaScript

Hace mucho tiempo en mis inicios en la programación hice un conversor de unidades usando JavaScript, HTML, CSS y los frameworks Bootstrap y jQuery. Era para mi clase de física. Hoy vengo a presentarlo y compartirlo por si a alguien más le sirve.

Conversor de unidades web con JavaScript

Conversor de unidades web con JavaScript

Es un simple convertidor de unidades web que transforma de una unidad a otra. Soporta:

  1. Longitud
  2. Masa
  3. Tiempo
  4. Energía
  5. Frecuencia
  6. Presión
  7. Tamaño de datos
  8. Temperatura
  9. Velocidad
  10. Volumen
  11. Área

A través de este post te mostraré cómo funciona, cómo descargarlo y cómo está hecho.

(más…)

Por parzibyte, hace
Extraer cuerpo de archivo HTML usando ANSI C - Trabajo con cadenas

C – Extraer contenido de archivo HTML

En este post de programación en C te enseñaré cómo obtener el texto (ignorando etiquetas) que se encuentra dentro de las etiquetas <body> de un archivo HTML.

Vamos a extraer lo que hay en el cuerpo de la página, pero además vamos a obtener solo el texto, ignorando todas las etiquetas que existan. Por poner un ejemplo, si la página es:

El programa en ANSI C debe extraer el contenido y además ignorar las etiquetas, produciendo la siguiente salida:

Veamos cómo resolver este ejercicio propuesto en C, ya que en otro lenguaje con soporte nativo de expresiones regulares sería fácil, pero aquí no lo es tanto.

(más…)

CRUD con MySQL, PHP, JavaScript y AJAX

CRUD con PHP, MySQL y AJAX

En este post te mostraré un ejemplo completo de CRUD que hace las operaciones fundamentales de la base de datos usando MySQL y PHP, pero además las llamadas se hacen con AJAX desde JavaScript.

CRUD con MySQL, PHP, JavaScript y AJAX

CRUD con MySQL, PHP, JavaScript y AJAX

Al final te dejaré el código completo que podrás descargar, probar y modificar, mismo que tendrá todas las operaciones para enviar y recibir datos desde JavaScript a un servidor PHP que se conecta a MySQL.

Básicamente todo se hará del lado del cliente, no vamos a procesar formularios con PHP, solo llamadas AJAX con JSON. Así que tendremos un CRUD con PHP y AJAX.

No vamos a usar ninguna librería como React, Vue o Angular; será JavaScript puro.

(más…)

Gráfica de línea con varios dataset usando chart.js - Tutorial con ejemplos

Chart.js – Tutorial con ejemplos para gráficas en la web

En este post te voy a mostrar un tutorial de chart.js para el manejo de gráficas en la web. Ya llevo bastante tiempo usando esta librería pero hasta ahora es que escribiré esta introducción con varios ejemplos acerca de esta maravillosa librería.

Lo único que necesitas para el tutorial son conocimientos básicos de JavaScript y HTML, aunque igual si estás aprendiendo puede que esto lo refuerce.

(más…)

Plantilla para mostrar temperatura y humedad – Diseño web

En este artículo te mostraré una plantilla de ejemplo para mostrar la temperatura y humedad. Será una plantilla simple y minimalista que solo tendrá el propósito de mostrar los datos de un termómetro.

Como lo dije anteriormente, será una plantilla de ejemplo para mostrar los datos de un termómetro como lo son la temperatura y humedad. Puedes basarte en ella para mostrar los datos de un sensor físico o de una API.

(más…)

Cuadrícula de imágenes con HTML y CSS

En este tutorial sobre diseño web te mostraré cómo mostrar una cuadrícula de imágenes en HTML usando CSS. Vamos a hacer que las imágenes ocupen determinado tamaño de la pantalla usando columnas y filas.

Por ejemplo, hacer una cuadrícula de 2 x 3 imágenes, o de 2 x 2, distribuyendo correctamente el tamaño de la página para que las imágenes tengan el mismo tamaño.

No vamos a usar Bootstrap, solo usaremos CSS, pues Bootstrap ya ofrece clases para hacer este tipo de cosas.

Al final tendremos algo parecido a una tabla de imágenes que ocupan el mismo ancho de la pantalla, usando HTML y CSS.

(más…)

Especificar extensión de archivo en input file de HTML

En este post de HTML 5 te mostraré cómo aceptar determinada extensión de archivo en un input de tipo file de HTML.

Anteriormente te mostré cómo aceptar solo imágenes en un seleccionador de archivos de HTML, ahora te enseñaré como especificar la extensión de los archivos permitidos para el input.

Recuerda que esto solo es validación del lado del cliente, y que su propósito es meramente de diseño, no de seguridad.

(más…)

Imágenes responsivas con CSS

En este post sobre diseño responsivo en CSS te mostraré cómo hacer que una imagen sea responsiva o responsive. Es decir, que se adapte a cualquier tamaño de pantalla.

Hacer una imagen adaptable es útil cuando no usamos frameworks de diseño como Bootstrap, Bulma, etcétera, y queremos que la imagen sea responsiva.

(más…)

HTML a PDF con JavaScript

En este post te mostraré cómo exportar una página web a PDF a través de un botón, enlace o cualquier cosa soportada por JavaScript. A este proceso también se le conoce como convertir HTML a PDF.

Convertir HTML a PDF con JavaScript

Es decir, convertir web a PDF usando programación con JavaScript y las siguientes librerías:

De hecho, html2pdf usa las dos librerías anteriores. Aunque parece complejo, verás que no lo es realmente. Con esta librería podemos crear un PDF muy parecido a la página web, incluyendo imágenes.

(más…)

Conecta 4 en JavaScript y HTML

En este post te mostraré el juego de Conecta 4 programado en JavaScript con HTML y Vue, con estilos de Bootstrap.

Conecta 4 en JavaScript, HTML – Versión web

Es el juego de Conecta 4 pero versión web con opción jugador contra jugador, así como jugador contra CPU que usa una pequeña inteligencia artificial.

A lo largo del post te mostraré cómo funciona el juego, qué tecnologías he usado, estilos, etcétera. También te mostraré cómo descargar el código fuente, pues el juego es totalmente gratuito y open source. Finalmente te dejaré una demostración para jugar conecta 4 en línea.

(más…)

Limpiar elemento HTML con JavaScript

En este corto post te mostraré cómo limpiar un elemento HTML con JavaScript, es decir, algo como el método “empty” de jQuery, pero con JavaScript puro.

Por ejemplo, con esto que te mostraré sabrás cómo eliminar todo el contenido de un elemento HTML ya sea una tabla, una lista, etcétera. A lo que haremos también se le conoce como Remover todos los hijos de un elemento HTML.

(más…)