Skip to content

Latest commit

 

History

History
87 lines (74 loc) · 4.25 KB

README.md

File metadata and controls

87 lines (74 loc) · 4.25 KB

Koala Mundia

Codo a codo 4.0 / Node.js / Comisión 24.126

Primer cuatrimestre de 2024

Primera entrega para el curso de Full Stack - Desarollo Web (Javascript/Node.js) dictado por Gabriel Múñoz.

Criterios de Evaluación

  • El sitio web debe poseer al menos 4 páginas HTML o 4 secciones si se trata de un sitio One Page.

    • El sitio incluye las siguientes páginas:
      • 🏠 Inicio
      • 📸 Galería
      • 🐨 Diversión
        • ✨ Koala Curiosidades ✨
        • ✨ Koala Nombre ✨
        • ✨ Koala TV ✨
      • 🫂 Quiénes Somos
      • 💬 Contacto
        • Confirmación de Formulario Enviado
      • Política de Privacidad
      • Términos de Uso
    • El header y el footer están almacenados en /wrapper

  • El sitio web debe incluir un formulario de contacto, con al menos 5 campos que incluya (un checkbox o radiobutton), un select y una imagen, con validación realizada mediante JavaScript para que los campos sean obligatorios.

    • El formulario de contacto (/pages/contacto.html) incluye 6 campos y 2 botones de imagen:
      • nombre [text]
      • apellido [text]
      • mail [email]
      • origen [select]
      • mensaje [textarea]
      • koalamor [checkbox]
      • botón de enviar [image]
      • botón de borrar [image]
    • La validación se realiza mediante la funcion valideishan() en /js/contacto.js

  • Tener al menos una página totalmente responsive con mínimo 3 puntos de corte con media querys para 3 tamaños de dispositivos (PC escritorio, Tablet, Celular). Para el diseño debe usarse CSS.

    • La disposición del menú (horizontal / hamburguesa) se decide mediante @media query en /css/wrapper.css
    • También hay tres puntos de corte mediante @media query para la galería en /css/galeria.css
      • celular: disposición vertical (una foto por fila, texto debajo)
      • tablet: disposición semi-vertical (una foto por fila y texto al lado)
      • PC escritorio: disposición semi-horizontal, (tres fotos por fila, texto debajo)

  • Utilizar al menos una animación, transformación o una transición.

    • Animación
      • Se usó un fade-in de los elementos del main en /css/wrapper.css
      • Se usó un fade-in más lento de los figure en /css/pages.css
    • Transformación
      • Se usó transform: scale() para hacer que las imágenes en figure se agranden al pasar el ratón encima

  • Poseer una estructura HTML maquetada con Flexbox o Grid.

    • Algunos de los usos de flexbox incluyen
      • La estructura general de las páginas
      • El dimmer / lightbox que aparece al hacer click en ciertas imágenes del sitio (como en la galería)
      • Dentro de la galería para la disposición de cada <figure>
      • El formulario de contacto
      • La caja .boxy de las págines de diversión

  • Se considerará la presentación general del proyecto, la legibilidad del mismo, la navegación sin llegar a puntos de no retorno, la optimización de imagenes para la web y el uso de favicon.

    • La página es legible y presentable
    • La navegación está funcionando bien con menú hamburguesa para diapositivos con pantallas más pequeñas
    • Hay un favicon enlazado a cada página mediante /js/main.js

  • El trabajo práctico deberá subirse a un servidor online y compartirse mediante un repositorio de Git. (Mandatorio)

  • La página deberá subirse a un servidor on-line para poder ser navegada por el Docente. Ejemplo: Netlify o similar. (Mandatorio)

  • El sitio web debe estar estructurado utilizando etiquetas semánticas HTML correctamente. Debe pasar la validación de https://validator.w3.org/ sin errores. (Mandatorio)

    • Se usaron las siguientes etiquetas semánticas:
      • <header>
        • <nav>
      • <main>
        • <section>
        • <h1>, <h2>, <p>
        • <a>
        • <ul>, <ol>, <li>
        • <figure>
          • <figcaption>
        • <form>
      • <footer>
    • El sitio web pasó la validación de W3.org

  • Utilizar iframes y/o iconos de FontAwesome y/o fuentes locales o bien de Google Fonts. Es optativo incluir algún elemento de Bootstrap.

    • Se usó un iframe en /pages/koala-tv.html
    • Se usaron fuentes de Google en /css/wrapper.css y /css/contacto.css