ELECTIVA I (GESTION DE REDES Y WEB) - SA26-2

El presente material es para dar un acercamiento al mundo de la creación de sitios web mediante la programación con etiquetas de HTML en un editor online y observando los cambios a medida que escribes el código fuente.

Aprenderás el uso de Tags de HTML de forma reactiva observando la salida mientras haces cambios en el código base.

¿Qué es el Box Model en CSS?  Es la estructura que define el comportamiento y las dimensiones de todos los elementos HTML. Cada "caja" consta de cuatro capas esenciales que se configuran desde el interior hacia el exterior: Contenido (Content), Relleno (Padding), Borde (Border) y Margen (Margin). Comprenderlo es clave para dominar la maquetación y el espaciado web.

 Descargar el archivo comprimido Tarea3.zip haciendo clic en el título de esta asignación. El mismo contiene una fuente woff y un archivo index.html que es una landing page que el estudiante debe editar y modificar para crear un aspecto mejorado aplicando conocimientos en BoxModel y temas anteriormente publicados.

Nota: El estudiante debe enfocarse en identificar los estilos que afectan cada parte del código bien sea del elemento nav y de los párrafos o elementos p. Si el estilo no existe es libre de crearlo. Debe enlazar las opciones del menú con los enlaces tipo ancla que están en cada sección del código según corresponda.

La presente práctica será enviada en por email a profesor.robyirloreto@gmail.com

Debe ser entregado sin prórroga el día sábado 11/07/2026

• Comprender la diferencia práctica entre el modelo de caja en 1 dimensión (Flexbox) y 2 dimensiones (CSS Grid).
• Manipular propiedades fundamentales como justify-content, align-items, flex-direction, grid-template-columns, grid-template-rows y la unidad fr.
• Dominar la sintaxis de definición de columnas y filas con y sin la función repeat().

•     Correcta ejecución de los ejercicios de Grid y Flexbox (40%)
•     Capturas de pantalla claras con el código y vista previa (40%)
•     Conclusión reflexiva y entrega puntual en formato PDF (20%)

Lectura sobre leyes de UX/UI que se trata  sobre la psicología que existe en cada sitio web que visitamos, la distribución de elementos utilizados para crear ciertos estímulos en los usuarios del sitio.

El video se realizó para hacer un repaso de fundamentos de HTML y CSS donde se exponen las tres formas existentes para aplicar estilos a una página web.  

En este recurso interactivo aprenderás a dominar las entidades HTML, una herramienta fundamental en el desarrollo web para representar caracteres especiales, acentos (acutes), eñes y espacios de no separación ( ) de forma segura y estándar.

¿Por qué es importante conocer y utilizar las entidades HTML?

1. Garantía de compatibilidad multiplataforma: Aunque la web moderna utiliza predominantemente la codificación UTF-8, trabajar con entidades garantiza que el texto en español (tildes, diéresis, caracteres especiales) se visualice correctamente sin importar el servidor, el navegador o el sistema operativo del usuario.

2. Evitar errores de sintaxis (Escapado de caracteres): Caracteres reservados como < y > pueden ser malinterpretados por el navegador como etiquetas HTML no cerradas o mal formadas. Utilizar < y > permite mostrar código sin romper la estructura visual o funcional de la página.

3. Control tipográfico y maquetación: Entidades como   (Non-Breaking Space) evitan saltos de línea inoportunos en frases clave o cifras, manteniendo la cohesión visual del texto y la estética del sitio.

4. Seguridad y buenas prácticas: Aprender a sustituir símbolos reservados es el primer paso para entender la neutralización de entradas en desarrollo web y prevenir vulnerabilidades básicas como la inyección de código script.

En esta practica aprenderas la importancia de la optimizacion de fuentes tipograficas para el rendimiento web, analizando las diferencias tecnicas entre los formatos WOFF2, WOFF y TTF.

Objetivos:

• Comprender el impacto del rendimiento tipografico en la velocidad de carga (Web Vitals).

• Conocer los algoritmos de compresion de WOFF2 (Brotli) frente a WOFF y TTF.

• Implementar la regla @font-face en CSS siguiendo las mejores practicas de la industria.

Instrucciones para la entrega:

1. Convierte un archivo de fuente TTF a WOFF y WOFF2 utilizando una herramienta en linea (como Font Squirrel o CloudConvert) y adjunta una captura donde se comparen sus pesos.

2. Responde brevemente por que no se deben utilizar archivos TTF/OTF en proyectos web modernos.

3. Entrega un archivo comprimido (.zip) con la estructura HTML y CSS donde implementes la fuente optimizada usando la regla @font-face.

El Modelo OSI, una arquitectura fundamental desarrollada por la Organización Internacional de Estándares para dividir la comunicación en red en un plano estructurado de siete capas independientes.

• Capa 7 - Aplicación: Constituye la interfaz directa con la que interactuamos a través de navegadores, aplicaciones de mensajería y clientes de correo.

• Capa 6 - Presentación: Funciona como traductor, cifrando y comprimiendo los datos para asegurar que el receptor los comprenda sin importar el formato interno.

• Capa 5 - Sesión: Se encarga de coordinar, aislar y mantener abiertas las distintas conversaciones para evitar cruces de información entre aplicaciones.

• Capa 4 - Transporte: Fracciona los datos en partes más pequeñas y determina el método de envío mediante protocolos como TCP para mayor seguridad o UDP para velocidad pura.

• Capa 3 - Red: Opera mediante routers utilizando direcciones IP para empaquetar la información y calcular la ruta global más eficiente de transmisión.

• Capa 2 - Enlace de datos: Utiliza direcciones MAC y tramas para organizar el tráfico a nivel local y verificar que no existan errores de transmisión.

• Capa 1 - Física: Representa el soporte del hardware donde los datos se convierten en señales eléctricas, pulsos de luz u ondas de radio para viajar a través del medio físico.

• Comprender el propósito del modelo OSI como una arquitectura de siete capas diseñada para estandarizar la comunicación entre diferentes dispositivos y evitar el caos digital.

• Identificar las funciones específicas de la capa 7 (aplicación) y la capa 6 (presentación), entendiendo cómo interactúan con el usuario, traducen, cifran y comprimen los datos.

• Analizarás el rol de la capa 5 (sesión) y la capa 4 (transporte) en la coordinación de conversaciones y en la decisión de envío mediante protocolos como TCP o UDP.

• Explicar el proceso de enrutamiento y direccionamiento a través de la capa 3 (red) y la capa 2 (enlace de datos), diferenciando el uso de direcciones IP y direcciones MAC.

• Conocer la transformación de los datos abstractos en energía física real (señales eléctricas, luz u ondas de radio) en la capa 1 (física).

• Entender la regla de independencia y el flujo completo de transmisión y recepción de la información entre capas vecinas.

En el enlace https://proferobyir.github.io/clases/redes12/tcpip/ dejo una guía detallada sobre el modelo TCP/IP. Aprende sobre la estructura y funcionamiento de sus cuatro capas: Aplicación, Transporte, Internet y Acceso a la Red.

Guía interactiva sobre normatividad, categorías de red y estándares de instalación.