Diagrama de temas

  • BIENVENIDA

    ¡Bienvenidos al aula virtual! Para avanzar con éxito en este camino, la disciplina y el compromiso con el material que compartiremos aquí serán sus mejores aliados. Cada recurso ha sido minuciosamente diseñado para darles un enfoque realista y práctico del Desarrollo Web y las Redes. Recuerden que, con dedicación y constancia, habrá excelentes resultados en su aprendizaje. ¡Mucho éxito!


  • COMPETENCIA ESPECíFICA

    El estudiante estará en la capacidad de:

    • Usar los diversos tags HTML
    • Manejar hojas de estilos CSS  mediante el uso de contenedores flexbox para para obtener páginas web adaptables, con una excelente experiencia de usuario.
    • Capacidad de desplegar páginas webs Landing Pages en servidores para ser visualizadas desde cualquier ubicación donde exista internet.



    • Tema actual

      DATOS DEL DOCENTE:

      Profesor: Ing.Robyir Loreto

      Sección Según la Especialidad: SA26-2

      Semestre: III

      Datos de Contacto:

        *  Número de Teléfono: 0242-4216617

        *  WhatsApp: +582424216617

        *  Correo: profesor.robyirloreto@gmail.com

      HORARIO DE ASESORÍA:

      Asesoría: Explicación para actividades o contenidos asignados.

       – De 00:00 AM A 00:00 PM y de 00:00 PM a 00:00 PM


      Observación: El contenido será publicado en formato web en su  mayoría en forma de playgrounds, es importante que entren a los enlaces publicados por este medio.

      • I CORTE: Desde el 6/06/2026 hasta 8/07/2026

        • CRONOGRAMA DE EVALUACIÓN

          redes


          • Semana No. 1

          • Semana No. 2

            • Tags en HTML Archivo

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


          • Semana No. 3

            • Box Model Archivo

              ¿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.


            • PRÁCTICA SOBRE BOXMODEL EN EL DESARROLLO WEB 5% CORTE I Archivo

               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

          • Semana No. 4

            • CSS FlexBox URL
              En esta actividad pondremos en práctica los conceptos clave de maquetación moderna en CSS (Flexbox para diseños en 1D y CSS Grid para estructuras en 2D) utilizando un laboratorio interactivo con edición en vivo.

              Objetivos

              • 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().

              Instrucciones

              Accede al playground haciendo clic en el título de esta asignación de nombre CSS Flexbox ó
                  Copia y pega en tu barra de búsqueda del navegador el siguiente enlace:
                  
                

                  Realiza las prácticas:

              Sección con display flex: Experimenta modificando los valores en el editor CSS para centrar elementos, cambiarlos a columna vertical y ajustar espaciados (gap).

              Sección con display grid: Prueba los ejemplos explicativos y ejecuta los 5 ejercicios sugeridos al final de la página (creación de columnas fijas, flexibles, layouts mixtos y estructura tipo dashboard).

              Entregable:

              Toma capturas de pantalla donde se aprecie el código CSS que modificaste y el resultado visual generado en la vista previa.

              Redacta una breve conclusión (1 o 2 párrafos) explicando en qué casos prefieres usar Flexbox y en cuáles CSS Grid.

              Enviar documento en formato PDF a través de este buzón de Moodle.

              Criterios de Evaluación

              •     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%)
                 Debe ser entregado del 18 al 24 de Julio de 2026
                 Enviar la actividad a profesor.robyirloreto@gmail.com
                 




          • Semana No. 5

          • Semana No. 6

          • Semana No. 7

            • Guía Práctica: Entidades HTML, Acentos y Caracteres Especiales URL

              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 &lt; y &gt; permite mostrar código sin romper la estructura visual o funcional de la página.

              3. Control tipográfico y maquetación: Entidades como &nbsp; (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.

              Objetivo: Al finalizar la revisión de este recurso, serás capaz de identificar las entidades más comunes en el desarrollo en español, escribir texto codificado sin errores y aplicarlas en tus proyectos web responsive.

          • Semana No. 8

            • Optimización Tipográfica para el diseño de páginas web Archivo

              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.

              Enviar por email a profesor.robyirloreto@gmail.com

          • Semana No. 9

            • Evaluación de HTML y CSS Tarea

              Realizar lo descrito en el video y verificar la descripción del mismo donde se encuentra el enlace a google drive con el proyecto para modificarlo  

               

          • Semana No. 10

            • SEGUNDO CORTE - GESTIÓN DE REDES (FINALIZA EL 17 DE OCTUBRE DE 2026)

              • SEMANA 1

                • Video sobre el Modelo OSI URL

                  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.

                  Objetivo

                  • 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.


              • SEMANA 2

                • Modelo TCP/IP URL

                  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.


                • Asignación Evaluativa Nº 1 y Nº 2: Fundamentos de Redes, Medios Físicos y Diagnóstico en Windows Tarea

                  A continuación se presenta la asignación evaluativa correspondiente a las dos primeras unidades del período, orientada a consolidar los conceptos teóricos y prácticos de infraestructura tecnológica y redes de datos.

                  Instrucciones Generales

                  Responda de forma investigativa, clara y fundamentada cada uno de los puntos solicitados. El trabajo debe ser entregado de manera individual en un documento PDF.

                  Contenido de la Investigación Teórica (Parte I)

                  Investigue y responda detalladamente los siguientes aspectos:

                  1. Origen, historia de las redes informáticas, red de datos y sus componentes esenciales.

                  2. Concepto de topología de red y los tipos principales utilizados para estructurar las conexiones.

                  3. Diferencias principales entre una red de área local (LAN) y una red de área amplia (WAN).

                  4. El Modelo OSI, sus capas y la importancia de los protocolos de red.

                  5. Características principales de los medios físicos de transmisión (cable coaxial, STP y UTP).

                  6. Diferencias técnicas entre la fibra óptica monomodo y la multimodo.

                  7. Principios del cableado estructurado en las redes LAN y WAN.

                  8. Rol del conector RJ45 y descripción de la norma de cableado comercial T568B (detalle el orden exacto de los 8 hilos de colores).

                  Evidencia Práctica en Entorno Windows (Parte II)

                  1. Abra la consola de comandos (cmd) en un equipo con Windows, ejecute el comando ipconfig y tome una captura de pantalla clara. Señale e identifique en la imagen:

                    • Su dirección IPv4.

                    • La puerta de enlace predeterminada.

                  2. Explique con sus propias palabras qué muestra el comando ipconfig y por qué la puerta de enlace es vital para la comunicación de red.

                  Requisitos de Estructura y Presentación del Informe

                  El documento PDF debe entregarse rigurosamente bajo la siguiente estructura:

                  • Portada Institucional: Membrete del Instituto, título del trabajo, datos del estudiante, datos del docente y fecha.

                  • Introducción: Breve redacción sobre la importancia de los fundamentos de redes y medios físicos.

                  • Desarrollo: Respuestas claras y argumentadas a los puntos teóricos y prácticos.

                  • Evidencia Práctica: Capturas de pantalla con su respectiva explicación técnica.

                  • Conclusiones: Aprendizajes obtenidos sobre la relación entre la teoría y el diagnóstico local en Windows.

                  • Formato de entrega: Archivo único en formato PDF.

                  • Pautas: Céntrese en la redacción propia y el análisis técnico de los comandos.


              • SEMANA 3

              • SEMANA 4

                • Actividad Práctica: Ponchado de Cable de Red (T568A / T568B) Tarea

                  Objetivo: 

                  Demostrar la habilidad técnica para ensamblar un cable de red UTP utilizando conectores RJ-45 bajo la norma de ponchado asignada (T568A o T568B).

                  Materiales requeridos:

                  Cable UTP (Categoría 5e o 6).

                  2 conectores RJ-45. 

                  Pinza ponchadora (Crimpadora).

                  Pelacables o tijeras.

                  Probador de cables (Tester de red) o equipo informático para la prueba.

                  Instrucciones de Entrega 

                  1. Sube tu video a YouTube (en modo *Oculto/No listado*), Google Drive 

                  2. Asegúrate de que los permisos del enlace permitan la visualización al docente.

                  3. Copia el enlace y pégalo en el cuadro de texto de esta tarea en Moodle.


                  Alineación y código de colores (30%):Hilos ordenados correctamente según la norma especificada. 

                  Técnica de ensamblaje (30%):La chaqueta exterior del cable queda dentro del conector RJ-45 y el ponchado es firme. 

                  Verificación funcional (20%):Demostración exitosa del funcionamiento con tester o equipo. 

                  Calidad del video y claridad (20%):Explicación clara, buena iluminación y enfoque en los detalles técnicos.Problemas comunes por un mal ponchado



              • SEMANA 5

              • SEMANA 6

                • SEMANA 7

                  • SEMANA 8

                    • SEMANA 9

                      • SEMANA 10