Clase Diseño y programación semana 23/06/2026

Evaluación N°3 – Desarrollo de Sitio Web Onepage: Bebida Energética

Unidad II: Desarrollo de Interfaces de Aplicaciones Web y Uso de Frameworks

Introducción

La asignatura Diseño y Programación corresponde al área formativa de especialidad de diseño y posee un carácter práctico, orientado a la implementación de sitios web básicos mediante herramientas y metodologías utilizadas en la industria digital. Al finalizar la asignatura, el estudiante será capaz de aplicar conocimientos teóricos y técnicos para desarrollar interfaces web adaptables a múltiples dispositivos, utilizando técnicas de programación básica y respetando estándares de diseño y desarrollo web.

La presente evaluación tiene como propósito que los estudiantes integren los conocimientos adquiridos durante las unidades anteriores mediante el desarrollo de un proyecto de mediana complejidad, donde deberán investigar, planificar, diseñar y construir un sitio web tipo Onepage sobre una bebida energética de su elección. El trabajo se desarrollará en duplas, fomentando la organización, distribución de tareas, trabajo colaborativo y comunicación efectiva entre los integrantes del equipo.

 

Desarrollo

Aprendizaje Esperado

2.1 Propone interfaz de página web, para dar respuesta a los requerimientos de un encargo, considerando estándares para sitios responsivos, con funciones y roles definidos y colaborativos dentro del equipo de trabajo.

Para evidenciar este aprendizaje, cada dupla deberá desarrollar un sitio web Onepage que permita representar visualmente una marca de bebida energética, considerando investigación previa, diseño de interfaz, prototipado y posterior implementación utilizando WordPress y Elementor.

Duración del Proyecto

• Inicio del proyecto: 08/06
• Entrega final: 06/07

 

Etapa Uno: Investigación y Diseño de Wireframe o Layout

Duración: 1 semana

Cada dupla deberá seleccionar una marca de bebida energética y desarrollar una investigación visual y conceptual que incluya:

Investigación de Marca

• Fundador y/o dueños de la marca.
• Historia de la empresa.
• Tres patrocinados relacionados con la marca.
• Modelos, sabores y ediciones especiales.
• Logotipos utilizados por la marca.
• Paleta de colores corporativa.
• Imágenes de campañas publicitarias:
• Impresas.
• Digitales.
• Redes sociales.
• Spots publicitarios.
• Eventos y activaciones.

Diseño de Layout

Posteriormente deberán diseñar la estructura inicial del sitio web Onepage considerando las siguientes secciones:

• Menú de navegación.
• Historia.
• Patrocinados.
• Sabores.
• Gadgets solicitados:
• Pestañas.
• Acordeón.
• Galería de imágenes.
• Footer.

Toda la información deberá organizarse visualmente dentro de una pizarra digital en Miro o Canvas, manteniendo claridad visual, jerarquía de contenidos y organización gráfica adecuada.

 

Etapa Dos: Prototipo del Sitio Web

Duración: 1 semana

Diseño en Photoshop

Desarrollar un prototipo completo en formato pantalla utilizando Adobe Photoshop.

El prototipo deberá incluir:

• Diseño visual final.
• Imágenes definitivas.
• Textos reales.
• Aplicación de colores corporativos.
• Distribución definitiva de las secciones.
• Correcta jerarquía visual de la información.

 

Etapa Tres: Desarrollo del Sitio Web

Duración: 2 semanas

Implementación Técnica

CDmon

• Creación del servidor web.

WordPress

• Instalación y configuración del sitio.

Elementor

• Desarrollo completo del sitio Onepage.

Adaptación Responsive

El sitio deberá contemplar adaptaciones para:

• Pantalla (escritorio).
• Tableta.
• Celular.

Se evaluará la correcta visualización y funcionalidad en los distintos dispositivos.

 

Formato de Entrega

Cada dupla deberá entregar:

Documentación y Accesos

• Link público de Miro o Canvas.
• URL de administrador WordPress (wp-admin).
• Usuario y contraseña del servidor CDmon.
• Usuario y contraseña de WordPress.

Importante

Es responsabilidad de los estudiantes revisar y verificar que todos los accesos entregados funcionen correctamente antes de la fecha de entrega. Si alguno de los enlaces, usuarios o contraseñas no permite el acceso para la revisión del proyecto, este será evaluado con la nota mínima.

 

Conclusión

El desarrollo de este proyecto permitirá a los estudiantes aplicar de manera integrada los contenidos abordados durante la Unidad II, fortaleciendo competencias relacionadas con investigación, diseño de interfaces, planificación visual, trabajo colaborativo y desarrollo web responsive. Asimismo, permitirá experimentar un flujo de trabajo similar al utilizado en proyectos reales de diseño y desarrollo digital, desde la investigación inicial hasta la publicación final del sitio web.

En relación con los criterios de evaluación, los estudiantes deberán demostrar su capacidad para identificar los elementos que conforman un framework dentro de una interfaz web responsiva, seleccionar adecuadamente los componentes necesarios para satisfacer los requerimientos del encargo, aplicar técnicas de programación e implementación mediante WordPress y Elementor respetando estándares de desarrollo web, y finalmente evaluar el sitio publicado verificando que cumpla con los objetivos, funcionalidades y requisitos establecidos para el proyecto. Estas competencias permitirán evidenciar el logro del aprendizaje esperado y la correcta integración de los conocimientos adquiridos durante la unidad.

Indicaciones de entrega

En la plataforma AAI se habilitará la tarea para que carguen la documentación en la fecha correspondiente, está estará habilitada hasta 15 minutos iniciada la clase.  Para la recepción del proyecto el estudiante debe tener como mínimo el 60% de asistencia a clases de la unidad, caso contrario será evaluado directamente con la nota mínima. Una vez finalizado el plazo, se bloqueará el acceso a subir la tarea.  Se recomienda evitar realizar la carga en el último minuto, dado que existe la posibilidad de fallas en el sistema y problemas de conexión que podrían surgir. Es aconsejable planificar con antelación para prevenir inconvenientes. NO SE RECIBIRÁN ENTREGAS POR CORREO O CHAT sin excepciones.  Carpetas vacías o errores al enviar el link serán evaluadas con la nota mínima.  Aquellos que no envíen el proyecto en las fechas de evaluación recibirán una calificación mínima, a menos que justifiquen su ausencia de acuerdo con los protocolos establecidos en el Reglamento Académico. Criterio Excelente Bueno Aceptable Insuficiente Identifica elementos de un framework en un sitio web, considerando estándares de construcción de interfaces responsivas. Identifica correctamente todos los elementos del framework y explica su función dentro de una interfaz web responsiva, aplicando adecuadamente los estándares trabajados en clases. Identifica la mayoría de los elementos del framework y comprende su función, presentando leves errores en la aplicación de estándares responsivos. Reconoce algunos elementos del framework, pero presenta dificultades para relacionarlos con los estándares de diseño responsivo. No identifica correctamente los elementos del framework ni su función dentro de una interfaz web responsiva. Selecciona componentes en la construcción de una interfaz web, considerando los requerimientos de un encargo. Selecciona y utiliza correctamente todos los componentes requeridos, justificando su elección en función de los objetivos del proyecto. Selecciona la mayoría de los componentes necesarios, presentando pequeñas omisiones o errores de aplicación. Selecciona parcialmente los componentes requeridos, evidenciando dificultades para responder al encargo planteado. No selecciona adecuadamente los componentes necesarios para la construcción de la interfaz web. Aplica técnicas de programación de interfaces web, según reglas del lenguaje, codificación y funciones diferenciadas dentro del equipo de trabajo. Aplica correctamente las herramientas y técnicas de implementación web, respetando las reglas de codificación y cumpliendo eficazmente su rol dentro de la dupla. Aplica adecuadamente las técnicas de implementación web, presentando errores menores de configuración o codificación. Aplica parcialmente las técnicas requeridas, evidenciando dificultades en la implementación o en el cumplimiento de su función dentro del equipo. No aplica correctamente las técnicas de implementación web ni cumple con las responsabilidades asignadas. Evalúa sitio web publicado, considerando los requisitos del encargo. Evalúa exhaustivamente el sitio web publicado, verificando funcionamiento, responsividad y cumplimiento de todos los requisitos establecidos. Evalúa el sitio web identificando la mayoría de los aspectos relevantes y corrigiendo errores menores. Realiza una evaluación básica, detectando solo algunos problemas o incumplimientos del encargo. No evalúa adecuadamente el sitio web o no verifica el cumplimiento de los requisitos establecidos. Cumplen de manera individual con las tareas distribuidas internamente en la dupla. Cumple completamente y de manera autónoma con las tareas asignadas, contribuyendo activamente al avance y éxito del proyecto grupal. Cumple con la mayoría de las tareas asignadas, participando de forma constante en el desarrollo del proyecto. Cumple parcialmente con las tareas asignadas, requiriendo apoyo frecuente para completar sus responsabilidades. No cumple con las tareas asignadas o su participación es insuficiente para el desarrollo del proyecto.