Especialidad de Internet - avanzado

Actividades Profesionales

Requisitos

  1. Tener la especialidad de Computación I - básico.

    Respuesta: Debes presentar al instructor la tarjeta debidamente firmada de la especialidad de Computación I (básico), comprobando que fue concluida antes de iniciar la especialidad de Internet Avanzado, conforme exige el prerrequisito oficial de la especialidad dentro del programa de Conquistadores. — Las especialidades secuenciales existen para garantizar que los conceptos de base estén sólidos antes de avanzar. Computación I cubre hardware, software, sistemas operativos y gestión de archivos; sin esto, el alumno queda perdido en discusiones avanzadas sobre HTML, HTTP, alojamiento y protocolos de red.

  2. Definir los siguientes términos (o sus equivalentes) e informar cuándo y cómo se usan:
    • HTTP
    • Hyperlink
    • HTML/PHP
    • Navegadores seguros y códigos de colores hexadecimales
    • URL
    • GIF/PNG
    • JPEG

    Respuesta: 1) HTTP: protocolo de transferencia de hipertexto, usado para la comunicación entre el navegador (cliente) y el servidor que envía las páginas web; es lo que hace posible acceder y cargar sitios (la versión segura es HTTPS, con cifrado). 2) Hipervínculo: enlace clicable (texto o imagen) que lleva al usuario a otra página, archivo o recurso de internet; se usa para navegar y conectar contenidos entre sí. 3) HTML/PHP: HTML es el lenguaje de marcado que estructura y organiza el contenido de la página (títulos, textos, imágenes, enlaces), interpretado por el navegador; PHP es un lenguaje que se ejecuta en el servidor para generar páginas dinámicas (ej.: formularios, inicio de sesión, datos que cambian) antes de enviar el HTML listo al navegador. 4) Navegadores seguros y códigos de colores hexadecimales: un navegador seguro es aquel que usa conexión HTTPS, se mantiene actualizado y protege los datos del usuario (candado en la barra de direcciones); los códigos de colores hexadecimales son la forma de definir colores en la web usando seis dígitos precedidos de '#' (ej.: #FFFFFF es blanco, #000000 es negro), usados en HTML/CSS para colorear textos, fondos y elementos. 5) URL: dirección completa de un recurso en internet (ej.: https://www.ejemplo.com/pagina), usada para localizar y acceder a una página o archivo específico; es lo que escribimos en la barra de direcciones. 6) GIF/PNG: formatos de imagen ideales para gráficos simples, logos, íconos y dibujos con pocos colores; ambos admiten fondo transparente y el GIF además permite animaciones, usándose cuando se quiere nitidez en bordes y áreas planas. 7) JPEG: formato de imagen con compresión ideal para fotografías e imágenes con muchos colores y variaciones; reduce bastante el tamaño del archivo (con una pequeña pérdida de calidad), usándose para fotos en sitios donde la carga rápida es importante. — HTTPS es la versión cifrada de HTTP; todo navegador moderno marca los sitios HTTP simples como 'no seguros'. Los códigos hex usan 6 dígitos: dos para el rojo, dos para el verde, dos para el azul (RGB). Los navegadores Chromium dominan más del 70% del mercado global actual.

  3. Aprender y demostrar el uso de estas etiquetas (TAGs) HTML o demostrar comandos equivalentes de construcción de sitios web en uno de los lenguajes actuales de desarrollo web (PHP, XML, JSP, ASP, etc.).
    • <html> </html>
    • <head> </head>
    • <body> </body>
    • <b> </b>
    • <i> </i>
    • <a href="URL"> </a>
    • <p>
    • <br> </br>
    • <img src="name"/>
    • <hr> </hr>
    • <table> </table>
    • <tr> </tr>
    • <td></td>

    Respuesta: Debes demostrar al instructor cada etiqueta HTML en uso: html (envuelve el documento), head (metadatos del encabezado), body (contenido visible), b (negrita), i (cursiva), a href (hipervínculo a otra página), p (párrafo), br (salto de línea), img src (inserta imagen), hr (línea horizontal), table con tr (fila) y td (celda). — HTML es declarativo: tú marcas el contenido y el navegador lo renderiza. Las etiquetas forman un árbol (DOM) que el CSS estiliza y JavaScript manipula. Las etiquetas semánticas (header, nav, main, article, footer) fueron introducidas en HTML5 (2014) y mejoran la accesibilidad y el SEO del sitio renderizado.

  4. Hacer una tabla simple: incluir texto, un gráfico, una regla horizontal y un enlace. Usar códigos hexadecimales para colorear el texto. Hacer tu título más grande y, después, el texto del documento principal.

    Respuesta: Debes presentar al instructor un archivo HTML que contenga una tabla simple (table con tr y td) con texto, una imagen/gráfico (img src), una regla horizontal (hr) y un enlace (a href), usando códigos hexadecimales (#FF0000 para rojo, #0066CC para azul) para colorear el texto, con título en h1 (más grande) y el contenido principal en párrafos p o h2 más pequeño. — La jerarquía de títulos h1 a h6 organiza el documento y mejora el SEO. Los colores hex son RGB de 0-255 expresados en hexadecimal: #000000 es negro, #FFFFFF es blanco. Hoy las tablas se usan solo para datos tabulares; para el diseño (layout), el estándar moderno es flexbox o CSS grid en lugar de table.

  5. Saber más sobre:
    • Gráficos para la Web y ser capaz de explicar el proceso utilizado para descargarlos rápidamente.
    • Colores seguros de la WEB y saber cuándo usarlos. Usar este conocimiento para crear un JPG y un GIF/PNG que estén ambos por debajo de 15k, pero que aún sean fácilmente visibles en un sitio web, y crear, al menos, 5 botones de navegación gráficos y un encabezado (header) para tu sitio.

    Respuesta: 1) Gráficos para la web y descarga rápida: para que los gráficos se descarguen rápidamente hay que usar el formato correcto (JPG para fotos, GIF/PNG para gráficos simples), reducir las dimensiones de la imagen al tamaño en que realmente aparece y comprimir/optimizar el archivo con herramientas como TinyPNG o Squoosh. Cuanto más pequeño sea el archivo (en KB), más rápido carga; por eso se evitan las imágenes pesadas y se aprovechan recursos como la caché del navegador. 2) Colores seguros de la web y creación de los elementos: los colores 'seguros de la web' son un conjunto de 216 colores que se ven prácticamente iguales en cualquier monitor o navegador, garantizando consistencia visual, usados principalmente cuando se quiere que el sitio tenga la misma apariencia para todos. Aplicando este conocimiento, crea un archivo JPG y un GIF/PNG ambos con menos de 15k pero aún nítidos en el sitio (usa JPG para la foto, GIF/PNG para el gráfico, y optimiza hasta que quede liviano sin perder visibilidad), y produce al menos 5 botones de navegación gráficos y un encabezado (header) para tu sitio manteniendo la misma paleta de colores seguros. — Los 216 'web safe colors' nacieron cuando los monitores tenían 8 bits (256 colores). Hoy los monitores muestran millones, pero el concepto sigue guiando una paleta accesible. Reducir el tamaño de las imágenes es crítico para móvil/3G: cada KB extra retrasa la carga. Squoosh de Google es la referencia actual en optimización de imágenes.

  6. Individualmente o en familia, la unidad u otro grupo, desarrollar un sitio web. Todas las páginas del sitio deben estar "enlazadas" entre sí para que alguien que visite tu página principal pueda hacer clic en cada una de las demás páginas de tu sitio. El sitio web debe estar compuesto por al menos 4 páginas. El sitio debe incluir:
    • Página de bienvenida, que indique la razón por la que se creó el sitio e incluya, al menos, una imagen o fotografía.
    • Una página de fotos que muestre las actividades y eventos que tú, tu familia o tu grupo han disfrutado.
    • Un libro de visitas o página de contacto, donde las personas puedan "firmar" comprobando que la visitaron o dejar una dirección de correo electrónico de contacto, para que las personas puedan enviar correos cuando visiten tu sitio.

    Respuesta: Debes presentar al instructor un sitio web con al menos 4 páginas interconectadas: 1) página de bienvenida (home) con la razón del sitio y al menos una imagen o fotografía; 2) página de fotos que muestre actividades y eventos tuyos, de la familia o del grupo; 3) libro de visitas o página de contacto donde los visitantes puedan dejar su correo electrónico o un comentario; 4) una página adicional (acerca de, misión, enlaces). — Un sitio con navegación interconectada es el estándar básico desde el inicio de la web. Hoy la página de contacto sustituye al libro de visitas, con un formulario que envía el correo electrónico mediante el backend. La página principal define la primera impresión; una imagen hero genera engagement e indica de inmediato de qué se trata el sitio.