Html | Parzibyte

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. 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. ...

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. ...

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. Es un simple convertidor de unidades web que transforma de una unidad a otra. Soporta: Longitud Masa Tiempo Energía Frecuencia Presión Tamaño de datos Temperatura Velocidad Volumen Área A través de este post te mostraré cómo funciona, cómo descargarlo y cómo está hecho. ...

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: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mi página web - By Parzibyte</title> </head> <body> Aquí va el contenido <p> Soy un párrafo</p> Yo no estoy dentro de una etiqueta <h1> Yo soy un encabezado</h1> <strong>Ejemplo de otra etiqueta</strong> </body> </html> El programa en ANSI C debe extraer el contenido y además ignorar las etiquetas, produciendo la siguiente salida: Aquí va el contenido Soy un párrafo Yo no estoy dentro de una etiqueta Yo soy un encabezado Ejemplo de otra etiqueta 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. ...

Enfocar input con Vue

En este post te enseñaré a enfocar un campo de texto o input de HTML usando el Framework Vue. Aunque parezca algo muy básico, en realidad hay algunos casos en donde enfocar no es tan fácil. Te enseñaré cómo enfocar un elemento con Vue, y también con Vuetify. ...

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. 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. ...

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. ...

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. ...

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. ...

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. ...