1
Diseño Front-end
Harold Mauricio Ángel Suarez
SENA
Análisis y desarrollo de software
Fase 3
Deivid Triviño
09/07/2025
Nombre del destinatario
ámbito laboral
Página 2
Introducción
El presente trabajo tiene como objetivo analizar y describir detalladamente la estructura y
funcionalidad de una página web desarrollada en lenguaje HTML, con estilos CSS incorporados y
funciones básicas en JavaScript. El sitio, titulado "ROGCOMCERSESAS", representa un
proyecto educativo orientado a la presentación de productos industriales, específicamente
transformadores de alta calidad, y cuenta con un diseño moderno, responsive y centrado en la
experiencia del usuario.
A lo largo del desarrollo del documento se examinarán las distintas secciones que componen el
código fuente: desde la configuración inicial del documento, los estilos aplicados, el encabezado
con navegación, el contenido informativo principal, el formulario de contacto interactivo, hasta el
pie de página institucional y los scripts de validación integrados. Cada bloque será explicado en
detalle para demostrar su propósito, comportamiento visual y funcional dentro de la estructura
general de la página.
.
Captura de código
[Link] general y configuración inicial
Esta primera parte define la base del documento HTML. Establece el idioma en español,
configura la codificación UTF-8 para permitir caracteres especiales, carga la fuente
Poppins desde Google Fonts y contiene los estilos CSS que dan forma visual a toda la
página. Se utiliza un diseño limpio, moderno y adaptable con bordes redondeados, colores
institucionales y una tipografía legible.
Nombre del destinatario
ámbito laboral
Página 3
h
Nombre del destinatario
ámbito laboral
Página 4
2. Cabecera con título y menú de navegación
Aquí se define el encabezado visible de la página. Contiene el nombre del sitio web y un
menú de navegación con enlaces internos que permiten al usuario desplazarse hacia otras
secciones del mismo documento. Este menú es sencillo, pero funcional, y cambia de color
al pasar el ratón sobre los enlaces.
Nombre del destinatario
ámbito laboral
Página 5
3. Contenido con información tecnicaa e imagen
La sección principal está dividida en dos columnas mediante flexbox. A la izquierda se
encuentra un texto informativo sobre los transformadores eléctricos, sus características
técnicas, materiales y normas. A la derecha, se presenta una imagen ilustrativa del
producto. Este diseño hace que el contenido sea equilibrado y visualmente agradable.
4. Formulario de contacto con acciones dinámicas
Esta sección permite a los usuarios enviar un mensaje. Incluye campos para ingresar
nombre y comentario, además de un contador en tiempo real que limita el texto a 200
caracteres. El botón de envío se encuentra desactivado por defecto y se activa solo cuando
se empieza a escribir un mensaje válido.
Nombre del destinatario
ámbito laboral
Página 6
5. Pie página institucional
El pie de página indica el origen educativo del sitio. Está diseñado para reforzar la
identidad institucional del proyecto, usando los mismos colores que el encabezado para
mantener la coherencia visual.
Nombre del destinatario
ámbito laboral
Página 7
6. JavaScript: Validaciones, interacciones y protección del formulario
Este bloque contine toda la lógica de comportamiento del formulario. Se encarga de:
Validar que el nombre no contenga números y tenga al menos 3 caracteres.
Impedir el envío si el mensaje está vacío o contiene palabras ofensivas.
Pedir confirmación antes de enviar.
Actualizar el contador de caracteres en tiempo real.
Saludar automáticamente al escribir el nombre.
Advertir si el usuario intenta salir de la página sin haber enviado su mensaje.
Nombre del destinatario
ámbito laboral
Página 8
Nombre del destinatario
ámbito laboral
Página 9
Nombre del destinatario
ámbito laboral
Página 10
Conclusiones
En conclusión, el desarrollo del sitio web "ROGCOMCERSESAS" permitió aplicar de
forma práctica todo lo aprendido en clase con el profesor Deivid, utilizando únicamente
código nativo en HTML, CSS y JavaScript. Gracias a ello, conseguimos crear una
estructura organizada, un diseño visual moderno y funcionalidades interactivas sin
recurrir a librerías o frameworks externos. A través de esta experiencia, reforzamos
conceptos clave como la validación de formularios, el control del flujo de datos, la
accesibilidad y la adaptación a distintos dispositivos. Este proyecto demuestra que, con
una base sólida en código nativo, es posible construir sitios web funcionales,
profesionales y centrados en el usuario final.