DEV Community: Juan Duque 🐉

Como hacer un generador de contraseñas con Python

Juan Duque 🐉 — Fri, 12 Jan 2024 00:09:01 +0000

Con esta explicación de cómo crear un generador de contraseñas por terminal busco que el aprendizaje sea práctico y accesible para cualquier persona que quiera aprender un poco más de Python ya con esto agregado podemos comenzar.

Imagen de ejemplo cuando generas una contraseña.

Para comenzar con nuestro programa debemos iniciar importando dos módulos de Python llamados: string y secrets.

En una breve explicación podemos decir que lo que hace el módulo string es proporciona varias constantes y funciones específicas para el manejo de cadenas de texto, pero nosotros solo usaremos las constantes para traer todas las letras en mayúsculas, minúsculas y también poder obtener todos los dígitos del 0 al 9 junto con los caracteres y el módulo secrecets se usa para generar números aleatorios criptográficamente fuertes de este solo vamos a usar choise() que devuelve un elemento elegido al azar de una secuencia no vacía.

Para poder usar string de forma cómoda, lo vamos a almacenar todo en una variable, concatenándolas de la siguiente manera.

string.ascii_letters, lo que hace es traerme todas las letras en mayúsculas y minúsculas, esto lo hace concatenado ascii_lowercase que tiene las letras en minúsculas y ascii_uppercase que trae las mayúsculas y así me evito de hacer el llamado de ambas constantes por separado.

El siguiente paso es pedirle al usuario que tan larga quiere su contraseña para luego almacenarla en una variable y convertirlo en un número entero, ya que los inputs en Python siempre son strings.

En este paso yo decidí encapsular el código que genera la contraseña al azar en una función simplemente porque me gusta, pero si quieren pueden simplemente no encapsular su código, ya que es un programa pequeño y no tendrían problemas, ya si quieren reutilizarlo, sí sería adecuado usar la función.

Como podemos ver, cree una función que recibe un argumento (pwd_len) que contiene el numero indicador de la longitud que tendrá la contraseña, además contiene un ciclo for que se utiliza para recorrer todos los caracteres, dígitos y signos de puntuación para crear la clave dentro del rango deseado y todo es almacenado en una variable que posteriormente será retornada para así imprimirla en la terminal y que se pueda visualizar.

A pesar de que el ciclo for es sencillo, lo voy a explicar de una manera que quede claro lo que hace.

Aqui va la explicación punto por punto.

Se crea la variable pwd que almacenara la clave.
Se inicia un bucle for que se ejecutará las veces de range(pwd_len). El valor es definido por el usuario y determina la longitud deseada de la contraseña y lo que está haciendo range() es utilizar el número de esa variable para determinar el rango específico en el que se ejecutara el bucle.
En cada iteración del bucle, se elige aleatoriamente un carácter de la cadena ALL_CHARACTERS utilizando la función secrets.choice() y .join() se utiliza para concatenar una secuencia de cadenas en una sola cadena para poder mostrarla en una sola linea. Luego, ese carácter se guarda en la variable pwd utilizando el operador +=.
Finalmente retornamos la variable pwd para ser impresa.

Solo quiero aclarar que en vez de usar el return puedes usar print() y así evitar hacer el llamado de la función para luego encerrarla en un print() para mostrar el resultado y quedando un código más feo visualmente.

Ya solo queda ejecutar el programa y ver la salida por consola que se vería de la siguiente manera.

Como punto final, si quieren mejorar el código para practicar, pueden darle más funcionalidad, dándole la opción de elegir siquiera mayúsculas o no también si quiere números y cosas así, además de manejar los errores como por ejemplo si el usuario se equivoca y no ingresa el número, sino una letra y evitar que al suceder eso el programa te tire un error inentedible para alguien que no sabe leer lo que le dice del fallo y finalice.

Espero haber podido ayudarlos en su aprendizaje.🤗

Algunos recursos para front-end

Juan Duque 🐉 — Fri, 14 Jan 2022 23:07:57 +0000

Normalmente, cuando estás creando un sitio web o un app sueles necesitar algunos recursos que te facilitan todo y puede que te ahorren tiempo, mi intención es compartir algunos de esos recursos que suelo usar para mis proyectos personales y en lo personal me gustan bastante, entonces comenzamos.

Paleta de colores

Una de las cosas más comunes al desarrollar una web sea como proyecto personal o no es tener que elegir una paleta de colores para tus botones, fondos, títulos etc... así que en esta parte les compartiré 2 de páginas que ayudan mucho en esa tarea.

Adobe color

Este sitio es uno de mis favoritos porque tiene varias funcionalidades como:

Comprobante de contraste
Temas para daltónicos
Colores Análogos, Monocromáticos, Tonos, etc..

Tiene más funciones de las que menciones y en general está muy completo.
=> Adobe color

Código de colores HTML

Esta fue la primera página web que utilicé para sacar mis paletas de colores y la verdad que tiene cosas muy interesantes.

Te permite convertir de RGBA a Hex y viceversa.
Tiene una sección con tablas de colores muy útiles.
Hay una parte del sitio web que tiene recursos a otras páginas web relacionadas con los colores.

Esta posee otros detalles interesantes así que les recomiendo que le dediquen unos minutos a examinarla.
=> htmlcolorcode

Fuentes (tipo grafía)

Las fuentes suelen pasan desapercibidas, pero son de lo más importante porque ayudan a transmitir la esencia de tu web, además de que si eliges una pésima tipo grafía puede que tus textos o títulos sean difíciles de leer para los usuarios o simplemente el título tenga una tipo grafía muy que no encaja con el texto o tu sitio en general, ya si tu logo es un logotipo es otro tema aparte, les voy a compartir dos sitios que te ayudan a elegir de la forma más adecuada posible.

Font Pair

Tiene una serie de recursos muy buenos, pero solo mencionaré algunos.

Combinaciones de fuentes entre títulos y el texto, con ejemplos.
Imágenes para inspirarte
Recomendación de fuentes populares

Todas las fuentes se pueden descargar y usar para que lo uses sin problemas, ya que estas son fuentes que vienen de Google fonts.
=> Fontpair

Google Fonts

Hay poco que decir de este servicio (creo yo tan conocido), en general es bastante bueno las licencias que tiene es de software libre y tiene incluso iconos.

1357 familias de fuentes.
Tiene una sección llamada Knowledge que te explica algunos temas relacionados.
Te permite descargar la fuente.

Es un sitio web bastante sencillo, pero útil y hay otros que le sacan provecho como lo hace font pair.
=> Google fonts

Imágenes

Conseguir buenas imágenes para poder usar sin tener que estar pagando por cada una con la posibilidad de que al final no te guste y no la uses jamás suena a estar desperdiciando dinero y por eso voy a compartir dos webs bastante buenas para solventar ese problema.

Pexels

Lo que me gusta de este banco de imágenes es que tiene un gran variedad de fotografías, las imágenes son completamente gratuitas y no es necesario mencionar el autor aunque no estaría mal hacerlo, ya que nos la proporciona sin ningún costo y no sería difícil mencionar a la persona.

Tiene videos.
Posee un apartado de retos en la cual puedes ganar premios.
Variedad de imágenes y fotos.

Dado que las imágenes son de dominio público no hay limitante a lo que se puede hacer con ellas, aun así les recomiendo leer la licencia que tienen Pexels.
=> Pexels

Unsplash

Unsplash tiene más de 2 millones de fotos y suele ser nombrado como uno de los principales sitios web de fotográfica, personalmente es el que uso.

Ofrece un explorador muy completo por categorías.
Posee diferentes productos.
Una comunidad muy amplia de fotógrafos que constante actualizan el banco de imágenes.

El uni, pero que podría tener es que ellos tienen una licencia con su mismo nombre Unsplash que te limita a no poder compilarlas y venta en forma de impresiones, desde mi punto de vista, una licencia bastante lógica, el punto bueno es que si las puedes utilizar con fines comerciales.
=> Unsplash

Iconos, Ilustraciones

De las cosas más comunes y que empleas con más frecuencia son los iconos para dejar claro el funcionamiento de ciertos botones o simplemente utilizar ilustraciones SBG para dejar bonito alguna parte de tu página web, a aquí tendrán dos sitios de donde suele sacar esas ilustraciones e iconos.

Undraw

unDraw tiene ilustraciones open source y son completamente gratuitas sin necesidad de atribución y es una chica que lo hace bastante bien así que dejo su Twitter Katerina Limpitsouni

SVG
Aún se actualiza
Gran variedad de ilustraciones

Estas ilustraciones son bastante populares y con buen motivo.
=> unDraw

DrawKit

Posee ilustraciones gratuitas y de pago, algo interesante es que te permite solicitar un trabajo específico al desarrollador de alguna ilustración.

ilustraciones profesionales gratuitas.
Posee iconos.
Tiene unas votaciones para elegir la próxima ilustración gratuita.

Personalmente tienen algunas me gustan ilustraciones que muchísimo y la recomiendo.
=> DrawKit

Espero que les haya gustado, si conocen algunas más interesantes no duden en comentarlas y no duden en seguirme en mis redes.

Como animar un corazón con keyframes (Básico)

Juan Duque 🐉 — Mon, 03 Jan 2022 22:05:47 +0000

Mi intención con esto es explicar como animar el corazón sin tener que dibujarlo con CSS3, en este caso es solo importar un icono o una imagen, esto va más que todo orientado a las personas que están comenzando a probar keyframes ya posteriormente en otro post explicaré como crear el corazón con puro CSS.
Empezamos con lo más simple de todo, el HTML, en este caso yo estare importando de Font Awesome y tomando este icono <i class="fas fa-heart"></i> con esto ya tendremos el HTML.

Ahora, como soy medio flojo agarre un color gradiente de una página web llamada CSS Gradient y seleccione el que más me gusto, ustedes pueden hacer lo mismo, luego al body le di estos estilos para poder centrar el elemento.
height: 100vh; display: flex; justify-content: center; align-items: center;
Hasta este momento vamos de esta forma:

Siguiendo con el corazón, usaré la clase que ya trae cuando importamos el icono para así darle su estilo y luego poder animarlo.
Solo le daremos dos estilos a la clase
.fa-heart { font-size: 6rem; color: #ee2130; }

Ya tenemos un corazón.

Pasemos a la etapa final que es animarlo para que parezca que está latiendo.
Para poder usar el keyframe necesitamos darle un nombre al corazón dentro del CSS utilizando la misma clase anterior.
También le indicaremos que la animación dure 1s y que se repita de forma infinita.
.fa-heart { font-size: 6rem; color: #ee2130; animation-name: heart; animation-duration: 1s; animation-iteration-count: infinite; }
Sigamos ahora con el keyframe y le diremos que cuando tenga un 25% tenga una propiedad transform y que escale 1.2 su tamaño original.
@keyframes heart { 5% { transform: scale(1.2); }

Ya con esto parecerá que está latiendo como un corazón normal, como pueden ver es algo sencillo y para nada difícil emplear una animación bien simple.

Pueden seguirme en mis redes sociales por este enlace.

El banner que use Pankaj Patel está en la plataforma de Unsplash
y la imagen puntualmente es esta: banner

Como crear un formulario de registro (3/3)

Juan Duque 🐉 — Sun, 02 Jan 2022 22:58:59 +0000

Hola, con esta publicación estaremos finalizando toda la maquetación del formulario, en esta parte final lo que haré para no estar alargando mucho es estar dando una serie de estilos y posteriormente explicarlos, también estaré dejando imágenes de como va que dando.^_^

Parte uno:

Lo que hice inicialmente fue darle un color gradiente al fondo y el contenedor principal que contiene a la imagen y al formulario le di los siguientes estilos:

Alto y ancho: 540px 600px.
Un color de fondo para que el formulario se separe del fondo: #4b6464.
Una sombra para que tenga un relieve interesante y no parezca pegado al fondo: box-shadow: 2px -1px 13px -2px rgba(0, 0, 0, 0.5);.
border-radius: 7px; porque me gusta como suaviza todo el formulario y no se ve tan tosco y anticuado.
Tiene un posicionamiento relativo para poder que el contenedor y la imagen se rendericen de forma correcta, ya que si no le coloco el posicionamiento al contenedor no podre usar el position absolute en el contenido porque se estarían desbordando y se verían como dos bloques uno abajo del otro y no es lo que queremos en este caso.
Para centrarlo en el body solo, use margin:70px auto Al que contiene la imagen le di un ancho de 50% para que solo ocupe la mitad del padre y un alto del 100% para que ocupe toda la altura que este disponible, tambien le di el posicionamiento absolute (esto lo aclaro en los puntos anteriores), el formulario comparte los mismos estilos efectuando uno en el que le pido que se mueva la mitad del contenedor hacia la izquierda que sería el form.

Parte dos:

Continuamos dando estilos, en este caso vamos a acomodar mejor todos esos label e inputs colocando un display flex al
, flexdirection colunm y por último centrar verticalmente, también le doy el color, ya que este puede ser heredado y no tener que cambiar el color del texto por cada elemento que quiera.
A los label les di un margen hacia la izquierda y convertí su contenido utilizando capitalize, al título del formulario lo centré y lo convertí todo en mayúsculas con text-transform.
En los inputs solamente coloco un margen de 7px a los lados y 16px en el eje vertical.
El botón le cambie la altura y el ancho, también le quite el border y le di un border radius junto con cursor pointer para que cuando coloques el clic sobre el btn aparezca la manito, siguiendo con el btn le di un margen de 8px vertical centre horizontalmente y le quite el margin de bottom, por último le entregue un sombreado. El párrafo exclusivamente lo centré y a la etiqueta < a > le cambia el color.
Como último estilo que le daremos será importar una fuente que les guste, en mi caso yo importo la fuente llamada Poppins.

El resultado final sería el siguiente:

Parte 1: Como crear un formulario de registro (1/3)
parte 2: Como crear un formulario de registro (2/3)
Link al formulario que está en Codepen

Pueden seguirme en mis redes sociales por este enlace.

Twitter

Codepen

Linktr

img formularios: Photo by Cash Macanaya on Unsplash - https://unsplash.com/photos/dMtlbRYVDZo

Como crear un formulario de registro (2/3)

Juan Duque 🐉 — Tue, 07 Dec 2021 01:50:28 +0000

Hola, continuamos con la parte de crear las etiquetas HTML5, antes de comenzar les informo que el código del formulario esta al final en CodePen para que puedan copiarlo y verlo.
Lo primero que aran es crear la carpeta donde van a guarda su trabajo y dentro de esta crearemos el archivo con la extensión .html, yo puntualmente le daré el nombre de 'index', quedaría así index.html, como último paso simplemente creamos la estructura básica de HTML como muestro en la imagen.

Pasamos a crear los contenedores para poder colocar todo el contenido que necesitamos, antes de continuar quiero aclarar que las etiquetas no las voy a explicar, si siento necesario estaré explicando cosas puntuales para no extenderme y volver a explicar cosas que ya mencione en la anterior publicación, también de aquí en adelante las imágenes con el html no se mostrara la estructura básica para que se puedan concentrar en lo importante, pero se sobreentiende que todas van dentro de body.

Ahora el siguiente paso es agregar los campos al form para que nuestro formulario vaya tomando forma, por lo menos a nivel de estructura HTML, lo que vamos hacer escrear un h2 como titulo y como texto le pondremos 'Regístrate' , también pueden colocarle otro si quieren, el próxima paso es crear cuatro inputs, el primero con el valor text, el segundo con email y los ultimos dos tienen que ser password, a cada uno se le asignara un label, lo siguiente es crear el botón con el texto Aceptar, por ultimo crearemos una etiqueta p que contenga un pequeño texto preguntando si tiene cuenta y si la tiene abra otro texto en el cual podra dar click en una etiqueta a para que lo lleve a 'otra página'.
Quiero aclarar tres atributos que coloque y no explique anterior mente.

required: Hace que el campo no pueda estar vacío.
placeholder: Es simplemente el texto que aparece como fondo en un input y que al dar clic desaparece.
minlength: Este limita la cantidad mínima de caracteres que puede tener un campo, el valor se determina según la necesidad, en este caso es para ayudar al usuario a elegir una contraseña un poco mas segura.

Pasamos a la parte final en la cual agregamos una imagen, puede elegir la que ustedes quieran, lo que vamos a hacer es generar un div por fuera del form, pero dentro de la etiqueta main y le damos un nombre a la clase para luego llamarlo y darle estilos, dentro de este div colocamos nuestra etiqueta img y la ruta relativa de la imagen que van a usar, que daría de esta forma.

Lo que tenemos hasta ahora seria esto.

Con esto estamos terminando esta parte y pasamos a la siguiente que seria darle estilo.

Pueden seguirme en mis redes sociales por este enlace.

Parte 1: Como crear un formulario de registro (1/3)
Parte 2: Como crear un formulario de registro (3/3)

Páginas para que puedan descargar imágenes gratuitas

Como crear un formulario de registro (1/3)

Juan Duque 🐉 — Sun, 05 Dec 2021 22:39:11 +0000

Hola, voy a estar explicar algunas etiquetas que vamos a utilizar para crear un formulario y posteriormente maquetar además les dejaré los enlaces a la documentación al final del post junto con el link a la página con la cual hice las imágenes de los fragmentos de HTML5.
Para no alargar mucho el post lo he dividido en tres partes:

Explicación de las etiquetas con las cuales vamos a trabajar.
Como estructurar el formulario.
Dar estilo con css

Etiqueta: form

Esta primer etiqueta que veremos es un contenedor que define formalmente un formulario, me refiero a form como un contenedor que específica y delimita el formulario, pero también puede contener cualquier otro elemento como: imágenes, listas, títulos etc.
Como pueden ver en la imagen esta etiqueta posee dos atributos, action y method, estos son los más importantes, voy a explicarlos de forma simple, ya que no le vamos a dar un uso real en este ejemplo.

action: Contiene el nombre del agente que procesará los datos remitidos al servidor (ejemplo: un script de PHP, Python u otro lenguaje orientado al backend).
method: Define la manera de enviar los datos al servidor con los valores get y post.

Etiqueta: label

Lo que hace esta etiqueta es bastante simple, pero importante para la accesibilidad, sirve para asociar un elemento con el atributo for, también puedes contenerlos dentro de la misma etiqueta para poder identificarlos fácilmente.

for: Toma el ID como valor para poder estar asociado.

Etiqueta: input

Lo que permite es crear un campo en el cual ingresas la información que este solicite, el comportamiento depende de los valores que se le otorguen al atributo type.
Dada la multiplicidad de valores que tiene type solo explicaré los que usaremos en el formulario, cabe aclarar que hay más valores, pero para simplificar este post no voy a explicarlos.

password: Específico para contraseñas, ya que a la hora de escribir solo se verán puntos.
email: Específico para direcciones de correo electrónico.
text: Simplemente representa una entrada de texto normal.

Etiqueta: a

Lo que te permite esta etiqueta es crear un enlace a otras páginas, dentro o fuera del mismo sitio web, el atributo que tiene es href y el valor que se le otorga es la dirección de alguna otra página.

Etiqueta: button

El elemento button también tiene el atributo type y se le pueden otorgar tres valores:

submit: que envía los datos del formulario por action de la etiqueta form.
reset: restablece el formulario.
button: lo que permite es crear botones personalizados con JavaScript.

Etiqueta: main

La etiqueta lo que hace es representar el contenido principal del body, no debe ser un elemento descendiente de elementos que no permitan el flow content.
No tiene atributos propios, pero puede usar los globales.

Etiqueta: p

Es una etiqueta que simplemente identifica un texto como párrafo y no posee atributos propios, su contenedor sería un bloque.

Etiqueta: div

Es un contenedor genérico que es definido como un elemento en bloque, posee tres atributos propios, pero no los estaré explicando porque no los vamos a usar y simplemente se los mencionaré para que sepan que existen, básicamente son estos tres: datasrc, datafld, dataformatas, al final de este blog les dejaré los enlaces a la documentación para que puedan investigar por su cuenta.

Etiqueta: img

Esta etiqueta lo que hace es representar una imagen en el documento HTML y posee un atributo obligatorio llamado src, estaré explicando este y dos atributos más que usaremos para esta etiqueta, ya que son muy importantes para la accesibilidad.

src: Este es un atributo obligatorio porque tiene como valor la ruta de la imagen.
alt: Representa un texto alternativo en caso de que la imagen no llegue a cargarse por algún motivo.
title: Es el título de la imagen y este se ve cuando posas el clic sobre la imagen.

Con estas etiquetas y sus respectivos atributos, podremos pasar a darle una estructura al formulario.
Espero que la explicación esté clara y si llega surgir alguna duda pueden comentarla y trataré de responder.

parte 2: Como crear un formulario de registro (2/3)
Parte 3: Como crear un formulario de registro (3/3)

Pueden seguirme en mis redes sociales por este enlace.

Enlaces a la documentación de mozilla

Página para dejar fragmentos de código bonitos

Carbon

Como escalar una imagen para reducir su tamaño con Gimp

Juan Duque 🐉 — Sun, 12 Sep 2021 23:46:09 +0000

Hola, hoy voy a explicar de una forma sencilla como escalar una imagen para poder reducir el tamaño de las imágenes y así utilizarlas en tu proyecto sin que afecten el rendimiento de tu sitio web.
Para este ejemplo estare usando esta imagen que saque de pixabay:

Les dejo el link de la imagen original por si desean descargarla: https://pixabay.com/es/photos/cyberpunk-calle-ciudad-plataforma-6061251/
El primer paso de todos y el más importante es abrir Gimp 😆 ya abierto vamos a la pestaña de archivo o file si lo tienen en inglés como yo y seleccionan abrir-(open)

Al seleccionar abrir les abrirá una ventana en la cual tendrán que buscar donde tienen guardado su archivo

Como notaran la ventana que se me abre a mí es diferente a la de ustedes si usan Windows, ya que mi sistema operativo es Ubuntu.
La imagen se verá de esta forma es Gimp

El siguiente paso es ir a la pestaña de imagen-(image) y seleccionar Escalar imagen-(Scale image)

en ese momento se les abrirá una ventana en la cual podrán colocar un width-(ancho) y un height-(alto) si quieren un tamaño especial, tengan en cuenta que al hacerlo de esa forma la imagen puede quedar deformada si no colocan una proporción adecuada.

Como verán la imagen que estoy utilizando tiene un tamaño bastante grande, lo que voy a hacer es cambiar solo el width y el programa va a mantener el height en la escala correcta para que la imagen no se distorsione.

Notarán que le di un ancho a mi imagen de 900px y Gimp automáticamente me dio un alto de 563px para que la imagen se mantenga sin distorsión, posteriormente le dan a escalar y la imagen se reducirá, la imagen se vera pequeña pero es solo darle un pequeño zoom (Le di uno de 50%) para puedan verla mejor

Ya casi terminamos, solo falta exportar la imagen y para eso es solo ir a archivo --> Exportar-(Export As)

al haberle dado clic se les abrira una ventana y solo tendran que buscar donde desan guarda su imagen y le dan al boton exportar en ese momento se volvera a abrir otra ventana (se que cansa 😫 un poco el que cada boton te abra una ventana pero prometo que esta sera la ultima 😉) el paso que tienen que hacer en esta ventana es Calidad-(Quality) colocarlo en 80, ya que este va a reducir el tamaño sin que la calidad de la imagen se vea muy afectada (pero también pueden modificarlo según sus necesidades y teniendo en cuenta que si lo dejan muy alto su peso no disminuirá considerablemente y caso contrario su tamaño si disminuya bastante, pero se tendrá una imagen muy borrosa), también seleccionen mostrar vista previa o show preview in image window (no sé realmente como les aparezca) esa opción les mostrara el tamaño del archivo.

Para finalizar le dan exportar y ya tendran su imagen escalada y con mucho menos Mb(megabyte) en su sitio web.
les dejo para que vean los cambios.

Verán que la imagen escalada tiene un zoom de 72% y la normal tiene uno de 11% y es porque si tuviese el mismo acercamiento la imagen que no reducimos no se vería completa y estaría enfocada en una parte de la foto.
Para finalizar les dejo la comparación de cuanto se redujo la imagen.
-📐 La imagen original tiene un tamaño de 5,7 Mb y ya cuando la modificamos quedo en 183,1 kB y su ancho y alto quedaron de 900 x 563 px mientras que la normal tiene 6000 x 3750 px.
Les dejo mi LinKtree por si desean seguirme.
https://linktr.ee/Boudgnosis
Espero que les haya servido y nos vemos en un proximo post 😺

DEV Community: Juan Duque 🐉

Como hacer un generador de contraseñas con Python

Algunos recursos para front-end

Paleta de colores

Adobe color

Código de colores HTML

Fuentes (tipo grafía)

Font Pair

Google Fonts

Imágenes

Pexels

Unsplash

Iconos, Ilustraciones

Undraw

DrawKit

Como animar un corazón con keyframes (Básico)

Como crear un formulario de registro (3/3)

Parte uno:

Parte dos:

Como crear un formulario de registro (2/3)

Como crear un formulario de registro (1/3)

Etiqueta: form

Etiqueta: label

Etiqueta: input

Etiqueta: a

Etiqueta: button

Etiqueta: main

Etiqueta: p

Etiqueta: div

Etiqueta: img

Como escalar una imagen para reducir su tamaño con Gimp