Ir al contenido principal
Google Classroom
Classroom
Tecnología 4 ECO
4to ECO - 2025
Proyecto Web Multimedia
Proyecto Web Multimedia
Ricardo Leithner
•
17 nov
10 puntos
Fecha de entrega: Hoy
El proyecto Proyecto Web Multimedia tiene como finalidad la integración de aprendizajes logrados en Tecnología con los de otras materias como Música, Lengua y Literatura y Lengua Adicional (Inglés). El objetivo es construir una página web que aloje las producciones multimedia (imágenes, audios y videos) producidos para las propuestas de Taller de Arte y Tecnología, Laboratorio de Inglés  y Radioteatro (Lengua).
En esta tarea entregarán los archivos para la publicación de sus páginas web.
Las páginas web se realizan de acuerdo con los pasos aprendidos en las clases anteriores integrando las herramientas de IA (se propone usar Gemini) para la generación del código y demás consultas y referencias.
El trabajo de edición web se desarrolla en modo local (en cada computadora) empleando simplemente el Bloc de Notas como editor.
Se recomienda fuertemente la organización en carpetas debidamente identificadas en donde se encuentren los archivos básicos index.html styles.css y script.js, y los accesorios que sean necesarios (imágenes, audios y eventualmente, videos).
Aplicar lo trabajado y aprendido para preservar las producciones en proceso subiendo los archivos al Drive de la cuenta institucional.
AL ENTREGAR, NO OLVIDEN DEJAR EN CLARO QUIÉNES SON LOS ALUMNOS QUE HAN PARTICIPADO DEL PROYECTO ASÍ COMO TAMBIÉN DEJARLO EN EL CONTENIDO DEL PIE DE SUS PÁGINA WEB.
Las páginas web serán publicadas en línea por el docente a través del sitio profericardo.com.ar con la URL https://profericardo.com.ar/imfa/tallerti2025.html/. 
Sobre las páginas web:
Las páginas web deben mantener una estructura básica de encabezado, contenido (main) y pie. 
En el encabezado, colocar el nombre o título de la producción y el proyecto. 
Como parte del contenido, debe colocarse toda la explicación e información adicional posible acerca del mismo, además de los bloques multimedia para la reproducción directa de los archivos correspondientes. 
Finalmente en el pie, colocar la información de la materias involucradas y los alumnos que forman parte del equipo de trabajo.
Comentarios de la clase
Tu trabajo
Asignado
style.css
CSS

script.js
JavaScript

index.html
HTML

Comentarios privados
/* --- 1. Variables de Color y Tipografía --- */
:root {
    --color-celeste: #4ECDC4; /* Celeste Principal - Vibrante */
    --color-blanco: #ffffff;
    --color-amarillo-acento: #FFC107; /* Amarillo para acentos juveniles */
    --color-gris-oscuro: #34495e; /* Texto y Footer profesional */
    --color-fondo: #f8f9fa; /* Fondo muy claro */
    --ancho-maximo: 1200px;
}

/* --- 2. Reseteo y Estilos Generales --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    background-color: var(--color-fondo);
    color: var(--color-gris-oscuro);
}

.contenedor {
    width: 90%;
    max-width: var(--ancho-maximo);
    margin: auto;
}

h1, h2, h3 {
    color: var(--color-gris-oscuro);
    font-weight: 700;
}

/* --- 3. Header y Navegación --- */
header {
    background: var(--color-blanco);
    padding: 1.5rem 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

header .contenedor {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-celeste);
}

nav ul {
    list-style: none;
    display: flex;
}

nav ul li a {
    color: var(--color-gris-oscuro);
    text-decoration: none;
    padding: 0.5rem 1rem;
    transition: color 0.3s, border-bottom 0.3s;
}

nav ul li a:hover {
    color: var(--color-celeste);
    border-bottom: 2px solid var(--color-celeste);
}

/* --- 4. Sección Principal (Hero) --- */
.seccion-principal {
    background: var(--color-blanco);
    padding: 4rem 0;
    text-align: center;
}

.subtitulo-noticia {
    color: var(--color-celeste);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.seccion-principal h1 {
    font-size: 2.8rem;
    margin-bottom: 1rem;
    color: #2c3e50; /* Un gris más profundo para el título */
}

.fecha {
    color: #95a5a6;
    margin-bottom: 2rem;
}

.video-placeholder {
    width: 100%;
    height: 500px; /* Tamaño placeholder */
    background: #ecf0f1;
    border: 4px solid var(--color-celeste);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    margin-top: 2rem;
}

/* --- 5. Secciones de Contenido (Long Scrolling) --- */
.seccion-texto {
    padding: 4rem 0;
}

.seccion-texto h2, .seccion-info-curso h2 {
    text-align: center;
    margin-bottom: 2rem;
    font-size: 2rem;
    color: var(--color-celeste);
}

.seccion-texto p {
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    line-height: 1.8;
}

/* Botón de Llamada a la Acción (CTA) */
.boton-cta {
    display: inline-block;
    background: var(--color-amarillo-acento);
    color: var(--color-gris-oscuro);
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    margin-top: 1rem;
    transition: background-color 0.3s, transform 0.3s;
}

.boton-cta:hover {
    background: #f39c12;
    transform: translateY(-2px);
}

/* Sección Info Curso */
.seccion-info-curso {
    background-color: var(--color-blanco);
    padding: 4rem 0;
}

.destacados-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 2rem;
    text-align: center;
}

.destacado-item {
    padding: 2rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: var(--color-fondo);
    transition: box-shadow 0.3s;
}

.destacado-item:hover {
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
}

.icono {
    font-size: 3rem;
    display: block;
    margin-bottom: 0.5rem;
    color: var(--color-celeste);
}

/* --- 6. Footer --- */
footer {
    background: var(--color-gris-oscuro);
    color: var(--color-blanco);
    text-align: center;
    padding: 2rem 0;
    margin-top: 3rem;
}

footer a {
    color: var(--color-amarillo-acento);
    text-decoration: none;
    transition: color 0.3s;
}

footer a:hover {
    color: var(--color-blanco);
}

/* --- 7. Media Queries (Responsividad) --- */
@media (max-width: 768px) {
    header .contenedor {
        flex-direction: column;
        text-align: center;
    }
    
    header nav {
        margin-top: 1rem;
    }

    nav ul {
        justify-content: center;
    }
    
    nav ul li {
        margin: 0 0.5rem;
    }

    .seccion-principal h1 {
        font-size: 2rem;
    }

    .video-placeholder {
        height: 300px;
    }
}/* --- 6. Footer (ACTUALIZADO) --- */
footer {
    background: var(--color-gris-oscuro);
    color: var(--color-blanco);
    text-align: center;
    padding: 2.5rem 0; /* Más espacio */
    margin-top: 3rem;
    font-size: 0.95rem;
}

footer .nombre-instituto {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--color-amarillo-acento); /* Destacamos el nombre */
}

.informacion-contacto p {
    margin: 0.5rem 0;
    font-weight: 300;
}

.redes-sociales {
    margin: 1.5rem 0;
}

.redes-sociales p {
    margin-bottom: 0.75rem;
}

.enlace-red {
    color: var(--color-celeste);
    text-decoration: none;
    padding: 0 0.5rem;
    transition: color 0.3s;
}

.enlace-red:hover {
    color: var(--color-amarillo-acento);
}

.derechos {
    margin-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 1rem;
    font-size: 0.85rem;
    opacity: 0.8;
}

/* El resto del código CSS se mantiene igual... */
style.css
Mostrando style.css.