Actividad 13

 Unidad de aprendizaje: Desarrollo de páginas web estáticas

Practica 13: Definición de propiedades para el control del aspecto de los formularios usando hojas de estilos en cascada.

Propósito: Mejorar el aspecto de los formularios diseñados mediante el uso de hojas de estilos en cascada para su desarrollo.


Actividad: 

Un taller mecánico llamado “AutoFix Express” ha comenzado a ofrecer citas en línea para sus clientes. Sin embargo, el formulario actual de registro es poco atractivo, desordenado y difícil de usar, lo que ha provocado que muchos usuarios abandonen el proceso antes de terminarlo.

El dueño del taller te ha contratado como desarrollador web para mejorar visualmente el formulario utilizando CSS, logrando que sea más claro, uniforme y amigable para los usuarios.

Problema a resolver

Diseñar y aplicar estilos CSS a un formulario HTML para que:

  • Sea visualmente atractivo
  • Mantenga uniformidad en todos sus campos
  • Mejore la experiencia del usuario
  • Destaque los campos cuando el usuario interactúe

Requerimientos del cliente

El formulario debe incluir los siguientes campos:

  • Nombre completo
  • Correo electrónico
  • Número telefónico
  • Tipo de servicio (select: Afinación, Cambio de aceite, Reparación, Diagnóstico)
  • Fecha de cita
  • Comentarios (textarea)
  • Botón de envío

Actividades:

1. Crear la estructura base (HTML)

Construye el formulario con todos los campos solicitados.

2. Aplicar estilos CSS (parte principal del problema)

El cliente solicita que cumplas con lo siguiente:

 Bordes

  • Todos los campos deben tener bordes uniformes
  • Deben ser visibles pero elegantes

 Tipografía

  • Usar una fuente clara y legible
  • Mantener consistencia en todos los campos

 Espaciado

  • Agregar espacios internos (padding)
  • Separar los campos entre sí (margin)

 Tamaño de campos

  • Los inputs deben ocupar el 100% del ancho del contenedor

 Efecto de interacción

  • Cambiar el fondo del campo cuando el usuario haga clic (focus)

 Botón

  • Debe ser llamativo
  • Cambiar ligeramente al pasar el cursor (hover)

Contenedor

  • Centrar el formulario en la pantalla
  • Agregar borde o sombra para destacarlo

3. Mejora adicional (reto)

Implementar al menos una de las siguientes opciones:

  • Agregar un icono dentro de un campo
  • Usar colores personalizados del taller (ej. rojo, negro, gris)
  • Quitar el contorno azul por defecto y reemplazarlo por otro estilo

 Producto esperado

Un formulario completamente funcional y estilizado que:

  • Sea visualmente atractivo
  • Sea uniforme en todos sus elementos
  • Mejore la interacción del usuario

Criterio

Cumple

No cumple

Estructura HTML completa

☐

☐

Uso correcto de bordes

☐

☐

Tipografía uniforme

☐

☐

Espaciado adecuado

☐

☐

Uso de :focus

☐

☐

Botón estilizado

☐

☐

Diseño centrado y ordenado

☐

☐

Creatividad en mejoras

☐

☐

Comentarios

Publicar un comentario

Entradas populares de este blog

CSS

Imagen
   Uso de elementos CSS en HTML ¿Qué es CSS? CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web complejas. Separar la definición de los contenidos y la definición de su aspecto presenta numerosas ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos y con significado completo (también llamados "documentos semánticos"). Además, mejora la accesibilidad del documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en infinidad de dispositivos diferentes. Al crear una página web, se utiliza en primer lugar el lenguaje HTML, para marcar los contenidos, es decir, para designar la función de cada elemento dentro de la página: párrafo, titular, texto destacado, tabla, lista de elementos, etc. Una vez creados los contenidos, se utiliza...
Leer más

Repaso de etiquetas HTML

  Resumen de etiquetas HTML para poner texto en una web   Resaltar textos   <strong> Texto de mayor importancia</strong> Normalmente devuelve el texto en negrita, pero fundamentalmente se usa para dar mayor importancia a ciertas palabras o frases dentro de un texto.    <b>texto en negrita</b> La etiqueta que convierte el texto en negrita, simplemente. Para darle a un texto mayor importacia es más correcto usar <strong>.   <em> texto en cursiva </em> Crea énfasis en el texto seleccionado, normalmente mostrando el texto en cursiva. Es una manera de resaltar parte del texto. Usa esta etiqueta en lugar de <i>.   <h1> títulos y encabezados</h1> Crea títulos, para dar más o menos importancia a frases de tu texto y establecer orden dentro de la narración. Hay 6 niveles de mayor a menor importante, de H1 a H6. Estas etiquetas título son importantes para el SEO.   <big>texto más grande</b...
Leer más

Actividad 11

Imagen
 Una cafetería local quiere publicar su menú en su página web. Actualmente, el menú está organizado en una tabla HTML, pero los clientes se quejan de que: La tabla se ve desordenada El texto está mal alineado Es difícil distinguir los precios No hay separación clara entre los productos El diseño no es atractivo El dueño te contrata como desarrollador web para mejorar la presentación usando CSS . Situación inicial (tabla sin estilo) <table> <tr><th> Producto </th><th> Precio </th><th> Descripción </th></tr> <tr><td> Café </td><td> $25 </td><td> Caliente </td></tr> <tr><td> Té </td><td> $20 </td><td> Natural </td></tr> <tr><td> Pastel </td><td> $30 </td><td> Chocolate </td></tr> </table> Problema a resolver Diseña los estilos CSS en un archivo externo, necesar...
Leer más