Versión resumida de la quinta sesión del taller de diseño web donde trabajamos en la maquetación del formulario de contacto y del pie de página de nuestro prototipo usando componentes y propiedades de Bootstrap 5, incluyendo espaciados (Margin y Padding: https://formaciongrafica.net/u/bs5sp) y botones de Bootstrap 5 (https://formaciongrafica.net/u/bs5bt) entre otros, según la siguiente línea de tiempo:
00:00 Inicio y presentación de objetivos
00:19 Presentación de los materiales de la sesión (https://formaciongrafica.net/u/ptdw) y de avances realizados en las sesiones anteriores
00:42 Maquetamos el formulario de contacto. Mira la activación de formulario usando PHP y FormMail en este enlace: https://formaciongrafica.net/u/afphp
00:55 Los formularios de contacto en Bootstrap 5: https://formaciongrafica.net/u/fcbs5
02:09 El paquete Beautify de Atom. Puedes ver un tutorial sobre Atom aquí: https://formaciongrafica.net/u/fgva
02:49 Trabajamos el ancho del formulario de contacto
03:18 ¿Cuántos h1 utilizar en una misma página web? https://formaciongrafica.net/u/pcyh1
04:19 Cambia,ps el layout del formulario con Bootstrap 5
05:04 Detallamos los códigos de los formularios
07:11 El parámetro "type" y el valor "password" en un campo del formulario (input)
08:01 El parámetro "placeholder" en los campos de formularios
10:28 Entendemos el manejo de columnas para contener tres campos del formulario en una sola fila
10:53 Agregamos un campo memo (textarea)
11:28 Los botones en Bootstrap 5: https://formaciongrafica.net/u/bs5bt
11:46 Comprobamos la adaptabilidad del formulario a las distintas resoluciones (responsive)
12:26 Comenzamos a codificar el pie de página
12:48 Creamos el contenedor para el pie de página (nombrado fondoForm en los códigos de la sesión)
NOTA IMPORTANTE: En la asignación de las clases falta el signo de igual (se agregará más adelante)
13:28 Preparando las columnas de Bootstrap (row y col)
14:07 Cargamos las opciones del pie de página usando etiquetas p que luego sustituiremos por la estructura ul/li
14:20 Creamos dos contenedores separados, uno para el fondo del pie y otro para contener sus tres columnas
14:35 Ingresamos los datos de la segunda columna del pie
15:03 Trabajamos con la cuarta columna, mostrando la ventaja de la estructura ul/li para las opciones del pie de página
15:26 Creamos los estilos CSS para eliminar las viñetas de las opciones del menú: .fondoForm ul {list-style-type:none;}
15:45 Vinculamos la hoja de estilos con la página html y vemos los colores aplicados al pie del diseño. Agregamos estilos faltantes necesarios.
16:25 Sustituimos los párrafos por la estructura ul/li y comparamos resultados
16:37 Agregamos los íconos de redes sociales y el formulario de suscripción (no lo activamos, solo la maquetación)
17:57 Colocamos los íconos de redes sociales utilizando la biblioteca de Bootstrap: https://formaciongrafica.net/u/bsicon
Nota: Se muestran las opciones mediante códigos mediante estilos y copia del html con el formato SVG para reconocer los códigos de este tipo de archivo digital.
18:38 Trabajamos con los estilos para separar los íconos de las RRSS y agregamos enlaces a cada uno de ellos
21:23 Quitamos el estilo subrayado de los enlaces
21:38 Cerramos tareas, compartimos el archivo comprimido con los avances realizados en la sesión, invitación a unirse al canal de Formación Gráfica, Comunidad Creativa (+), despedida y objetivos de la próxima sesión
Accede a los materiales y enlaces compartidos durante el taller aquí: https://formaciongrafica.net/u/ptdw
Nota: La versión completa de la grabación se encuentra publicada aquí (https://formaciongrafica.net/u/tws5) para acceso exclusivo de los miembros de las Comunidades Creativas del canal, únete y participa de contenidos y sesiones únicas para miembros según el nivel elegido.
Saludos y bonita jornada para ti.
Plácido Luna
===== * ===== * ===== * ===== * ===== * ===== * =====
Únete a nuestro canal y accede a sus beneficios: https://www.youtube.com/formaciongrafica/join
Nuestra cuenta PayPal: https://www.paypal.com/paypalme/formaciongrafica
Contáctanos por nuestras redes sociales: https://linktr.ee/formaciongrafica/
Consúltanos por WhatsApp por el (+51) 992 386 197 para recibir información de nuestros cursos y talleres :)
===== * ===== * ===== * ===== * ===== * ===== * =====