SI385 – IHC Y TECNOLOGÍAS MÓVILES

EXAMEN FINAL
2023-1

Sección: SI41, SI42, SI43, SI44, SI45, SI46, SI47, SS34, SS41, SS4A, SS4B, SV41, SV42, SV43,
SX41, SX43, SX44
Profesores: Campos Benites, Silvia Adelma
Flores Moroco, Juan Antonio
Gutierrez Gutierrez, Alan Tito
Requejo Chaname, Walter Juan
Rojas Malasquez, Royer Edelwer
Duración: 170 minutos
Indicaciones:

1. El examen consta de 1 pregunta y tendrá 170 minutos para resolverlo.

2. El examen consta de 1 pregunta en relación con un caso de Proyecto de Software y la entrega de
su respuesta es a través del envío de dos archivos, uno en formato Word que contiene la captura
de pantalla, el código fuente del Landing Page y la especificación del Landing Page, con nombre
de archivo upc-pre-202301-si385-<sección>-eb-<código-estudiante>.docx que se encuentra en
el aula Virtual y otro archivo empaquetado que contiene el código fuente en formato .zip, con
nombre de archivo upc-pre-202301-si385-<sección>-eb-<código-estudiante>.zip.
3. Para el desarrollo del examen se requiere archivos que se encuentran en la actividad del Examen
Final (upc-pre-202301-si385-examen-final_v1-screenshot.zip).
4. Cada examen cuenta con un equipo académico, el cual estará conectado durante el examen.
5. El alumno debe revisar las preguntas del examen y de presentarse alguna duda o tener algún
inconveniente enviar un correo al profesor asignado a su sección:
- Secciones SS4A y SI41: Jorge Luis Delgado Vite, correo pcsijdev@upc.edu.pe
- Secciones SI44 y SV41: Royer Edelwer Rojas Malasquez, pcisrroj@upc.edu.pe
- Secciones SI45 y SI46: Walter Juan Requejo Chaname, correo pcsiwreq@upc.edu.pe
- Secciones SI42 y SV42: Ernesto Ocampo Tello, correo pcsieoca@upc.edu.pe
- Secciones SS4B y SI43: Alan Tito Gutierrez Gutierrez, correo pcsiagut@upc.edu.pe
- Secciones SS41 y SI47: Jorge Luis Mayta Guillermo, correo pcsijmay@upc.edu.pe
- Secciones SS34 y SX44: Marco Antonio Leon Baca, correo pcsimleo@upc.edu.pe
- Secciones SV43 y SX41: Fidel Eugenio Garcia Rojas, correo pcsifgar@upc.edu.pe
- Sección SX43: Juan Carlos Morales Arevalo, correo pcsijumo@upc.edu.pe
6. Los profesores en mención solo recibirán correos provenientes de las cuentas UPC, de ninguna
manera se recibirán correos de cuentas públicas.
7. Ante problemas técnicos, debe de forma obligatoria adjuntar evidencias del mismo, como
capturas de pantalla, videos, fotos, etc. Siendo requisito fundamental que, en cada evidencia se
pueda apreciar claramente la fecha y hora del sistema operativo del computador donde el alumno
está rindiendo el examen.
8. Los problemas técnicos solo se recibirán durante el examen.

Página 1 de 8
Enunciado:

Caso Helia, Inc.

Helia, Inc., es una Startup Europea que nace en el año 2010 buscando satisfacer la demanda de
reservaciones de Alojamientos como son Hoteles, Resorts, Villas y Departamentos en toda Europa. Cuya
Frase es: “Alojamientos únicos en todo el mundo para escapar de la rutina”.

Helia es un mobile App que permite encontrar el Alojamiento Ideal, mostrando toda la información de los
alojamientos con precios atractivos y competitivos.

La Startup tiene dos segmentos objetivos, el primero segmento son los Huéspedes conformado por
varones y mujeres entre 35 y 55 años, con un poder adquisitivo medio que pueden reservar y pagar un
Alojamiento por adelantado y que tenga un dispositivo móvil de 6 pulgadas como mínimo. Como segundo
segmento están los Hoteles, Resorts, Villas y Departamentos de Europa que deseen usar la aplicación
para alquilar sus habitaciones y otros ambientes que posean.

Considere que el número de característica es el número de imagen que se encuentra en el archivo upc-
pre-202301-si385-examen-final_v1-screenshot.zip

Entre las principales características y pantallas de Helia están las siguientes:

Del Registro, inicio y personzalicación.

- (01) Registro (sign up) a la aplicación mediante una cuanta Facebook, Google, Apple o mediante
correo electrónico.
- (02) Acceso (Sign in) a la aplicación mediante una cuanta Facebook, Google, Apple o mediante
correo electrónico.
- (03) Gestión de Profile del usuario registrado en la aplicación.
- (04) Reseteo de contraseña mediante el envio de mensaje al celular o correo electrónico.

Página 2 de 8
Home y Dashboard:
- (05) Home de Bienvenida con la visualización de Hoteles recomendados.
- (06) Visualización del listado de los últimos hoteles reservados (Recently Booked).
- (07) Visualización del listado de los hoteles marcados como favoritos (My Bookmark).

Búsqueda o filtrado:
- (08) Visualización del listado de todos los hoteles recomendados.
- (09) Búsqueda de Hotel mediante un texto de búsqueda.
- (10) Filtrado de búsqueda por Pais, orden, precio, estrellas, instalaciones y tipo.
- (11) Visualización del resultado de la búsqueda de hoteles

Detalle de Hotel:
- (12 y 13) Visualización del detalle, descripción, instalaciones y localización de un hotel.
- (14) Visualización de la galeria de fotos de un hotel.
- (15) Visualización de la calificación y comentarios de un Hotel.

Reserva de Hotel:
- (16) Reserva de Hotel especificando el Check in, Check out y cantidad de personas.
- (17) Selección de diferentes medios de pago como Paypal, Google Pay, Apple Pay, tarjeta de
crédito y débito.
- (18) Confirmación de pago de reserva con el detalle de reserva seleccionado.
- (19) Generación y descarga del Ticket (Comprobante de pago) de forma automática con el detalle
de reserva.

Gestión de Reservas:
- (20) Visualización del Historial de reservas realizadas en la Aplicación (My Booking).
- (21) Cancelación de la reserva de un hotel con devolución incluida.
- (22) Selección del medios de pago donde se realizará la devolución del 80%.
- (23) Confirmación de la cancelación de la reserva y devolución del 80% del dinero.

Características adicionales:
- (24) Pantalla de Bienvenida a la Aplicación
- (25) Notificación para recibir estados de procesos realizados en la aplicación y novedades de
promociones y ofertas.
- (26) Calificar y comentar la experiencia de alojarse en un Hotel.

Helia, Inc. le encarga elaborar una propuesta de Landing Page que permita a los visitantes conocer su
oferta de valor, características y funcionalidades del Mobile Application y lograr la mayor cantidad de
descargas y uso de la aplicación.

Bag UPC S.A.C. tiene cuentas de redes sociales en Facebook, Instagram, LinkedIn y YouTube, las cuales
deberían ser referenciadas en el footer del Landing page.

Página 3 de 8
En base al caso:

Se requiere que se desarrolle un Landing Page que cuente con las características y restricciones técnicas
expresadas a continuación:

Technical Constraints

Debe respetar los constraints que se especifica en las siguientes secciones.

General Technical Constraints

- Debe implementar el Landing Page usando HTML5, CSS3, JavaScript.
- Utilice semantic HTML5.
- Si desea apoyarse en frameworks o bibliotecas de fonts, los únicos autorizados son: Google
Fonts, Fontawesome.
- Los únicos CSS frameworks o bibliotecas autorizadas: Bootstrap, ZURB Foundation, Materialize.
- Todos los frameworks o bibliotecas deben ser vínculos externos, no deben estar descargados
como parte del proyecto.

Responsiveness Technical Constraints

- Al presentarse, el Landing Page debe adaptarse a las dimensiones del área de visualización del
browser.

Inclusive Design Technical Constraints

- El Landing Page debe ser accesible y su mensaje pueda llegar a la mayor audiencia posible,
incluyendo personas con discapacidades, por lo que le solicitan considerar las heurísticas de
usabilidad e inclusive design.
- También considere que las imágenes deben ser accesibles, incluyendo el atributo “alt”. Puede
ver una referencia de buenas prácticas sobre el uso del atributo “alt” en:
https://help.siteimprove.com/support/solutions/articles/80000863904-accessibility-image-alt-
text-best-practices.
- Igualmente le indican que aplique ARIA labels cuando sea necesario. Aquí un enlace al ARIA
Authoring Practices Guide (APG): https://www.w3.org/WAI/ARIA/apg/patterns/.

Information Architecture.
El Landing Page debe estar conformado por una sola página HTML. Esto quiere decir que, si por
ejemplo incluye una barra de navegación, esta debe contener solo hipervínculos internos a
secciones en la misma página.

Color Palette Technical Constraints

Alineado con el estilo de diseño limpio que aplica, le indican que la paleta de colores que utilizan
es “164”, que está basada en el blanco (#ffffff) como color de fondo, #072a16 para los títulos
principales, #2d6b22 para los párrafos de contenido y variantes de #acc864 para los títulos de
niveles inferiores. Es decir:

Background: #ffffff
Level-1 Title: #072a16
Level-2 Title: #acc864
Paragraph: #2d6b22

Página 4 de 8
 Puede ver la referencia de la paleta de colores en: https://colorpalettes.net/color-palette-164/

Typograhy Technical Constraints

En términos de tipografía, le indican que la tipografía institucional está basada en los siguientes
fonts:
Heebo, para los títulos (https://fonts.google.com/specimen/Heebo).
Jost, para los textos de párrafos (https://fonts.google.com/specimen/Jost).
Dichos Fonts deben usarse para el contenido de texto en la implementación del Landing Page.

Images Technical Constraints

- Las imágenes del Mobile Application a utilizar en el Landing Page están en el archivo adjunto upc-
pre-202301-si385-examen-final_v1-screenshot.zip

Icons Technical Constraints

- Los íconos de redes sociales del footer deben estar en un nivel de gris que haga contraste con el
color de fondo del footer. Puede utilizar otros íconos como parte de su diseño.
- En caso de utilizar los íconos de Google Material Icons (https://fonts.google.com/icons), incluya
enlace en el head del documento HTML:
<link href=https://fonts.googleapis.com/icon?family=Material+Icons rel="stylesheet">
- Para incluir los íconos en el documento, vea la sección “Using the icons in HTML” en la guía
https://developers.google.com/fonts/docs/material_icons.
- En caso de usar los íconos de Font Awesome, utilice la última versión reléase (6.1.1). Puede
importarlos vía enlace en el head o vía su archivo styles.css. Aquí la ruta del CDN donde puede
encontrar dichos enlaces:
https://cdnjs.com/libraries/font-awesome

Badges Technical Constraints

- Para el badge de Apple AppStore, puede acceder a: https://developer.apple.com/app-
store/marketing/guidelines/
- Para el badge de Google PlayStore, la versión oficial se encuentra en:
https://play.google.com/intl/en_us/badges/. Puede acceder a una versión en blanco y negro en:
https://www.pngitem.com/middle/JJibmT_google-play-png-google-play-black-logo-transparent/

Language Technical Constraints

En esta etapa el público objetivo es de Sudamérica, por lo que el idioma del contenido debe ser
español latinoamericano. Por ello le brindan la versión en español que debe utilizar como su frase
representativa en el Hero section: “Alojamientos únicos en todo el mundo para escapar de la
rutina.”

Text Content Technical Constraints

Se considera la redacción como parte del Diseño y la Arquitectura de información, por ello debe
redactar el texto real para su implementación de Landing page, en base a la información que se
ofrece en el enunciado de la evaluación. No utilice texto autogenerado (lorem ipsum).

Coding Technical Constraints

Aplique convenciones de programación para HTML, CSS y JavaScript nombrando todos los objetos
de programación como identificadores, elementos de programación, archivos y carpetas en
inglés. Aplique kebab-case para id, nombres de identificadores o CSS classes. Aplique buenas
prácticas para organizar el código fuente. Utilice comentarios para aclarar el código desarrollado.

Página 5 de 8
 Project Structure Technical Constraints
Organice su proyecto en base a una carpeta public, dentro de la cual debe ubicar los archivos
index.html. Debe crear una subcarpeta assets y dentro de ella subcarpetas para los archivos .css
(styles), .js (scripts) y los archivos de imágenes (images).

Metadata Technical Constraints

Incluya tags de metadata apropiados para el caso y tipo de contenido, orientado a un adecuado
posicionamiento SEO. Adicionalmente, incluya su código de estudiante en el metatag author. Aquí
una referencia: https://www.ionos.com/digitalguide/websites/web-development/the-most-
important-meta-tags-and-their-functions/

Pregunta 1 (20 p.)

Elabore una implementación del Landing Page para el caso descrito, la cual permita conocer la oferta de
valor, características y funcionalidades del Mobile Application Helia, esté dirigida al segmento Huéspedes
y satisfaga las características y restricciones técnicas solicitadas (Technical Constraints).

Del entregable

El entregable del examen son dos archivos (El principal y el anexo) que se deben de subir en la actividad
del Examen Final, los cuales se detallan a continuación:
- Archivo principal upc-pre-202301-si385-<sección>-eb-<código-estudiante>.docx en formato Word
que se encuentra en la actividad del Examen Final, que debe contener captura de pantalla
(screenshot) del Landing page, código fuente del archivo html (en formato texto no imagen), código
fuente del archivo css (en formato texto no imagen), y la especificación de los principios y elementos
de diseño visual, cuáles ha considerado y cómo los ha aplicado, la especificación del sustento de
aplicación de heurísticas de Usabilidad, Arquitectura de información e Inclusive Design.
- Archivo anexo upc-pre-202301-si385-<sección>-eb-<código-estudiante>.zip en formato .zip que
contiene la carpeta del código fuente del proyecto del Landing page.

Importante:

Los únicos formatos permitidos para los archivos son DOCX para el principal y ZIP para el anexo.
No puede utilizar plantillas (templates) ni generadores de código de ningún tipo. Ello invalida toda la
solución (cero).

Página 6 de 8
Rúbrica de calificación
Criterio de Excelente
Calificación
C01. Se evidencia que la implementación del
Business Landing Page se encuentra alineada con
Alignment la oferta de valor, características y
funcionalidades del Mobile Application. Se
incluyen todas las secciones de un
landing Page, evidenciando que el
contenido cumple con los Goals de los
Visitantes para los segmentos a los que
se dirige el negocio, e incluyendo los
adecuados Call-To-Action.
3.5 puntos
C02. Web La implementación del Landing Page
Design evidencia la aplicación de los principios y
elementos de diseño visual. La
implementación es Responsive, pudiendo
visualizarse de forma adecuada en
Browser de Desktop o Mobile. Se
evidencia que el diseño implementado
aplica patrones de Web UI Design. Se
evidencia que la implementación cumple
con las características y restricciones
técnicas solicitadas.
4.0 puntos
C03. Se evidencia la aplicación de los
Information principios y heurísticas de arquitectura de
Architecture información en la implementación del
Landing Page. Se evidencia que la
implementación cumple con las
características y restricciones técnicas
solicitadas.
3.0 puntos
C04. Usability Se evidencia la aplicación de las
and Inclusive heurísticas de Usabilidad e Inclusive
Design Design en la implementación del Landing
Page. Se evidencia que la implementación
cumple con las características y
restricciones técnicas solicitadas.
3.0 puntos
C05. Project El proyecto se elabora con los lenguajes
Structure, establecidos: HTML5, CSS3 y JavaScript.
Technologies, Los frontend frameworks o blbiotecas
Code Quality aplicados están dentro del conjunto de
& Naming Frontend Frameworks autorizados:
Conventions. Bootstrap, ZURB Foundation, Materialize,
Google Fonts, Fontawesome. La
estructura del proyecto aplica buenas
prácticas y convenciones de nomenclatura
en inglés para los folders. Se aplica la
nomenclatura en inglés y convenciones
para los objetos y elementos de
programación en HTML, CSS, JavaScript
y assets (imágenes, etc.). El código fuente
tiene una estructura clara, aplica
espaciado e indentación adecuados,
permitiendo el entendimiento y
mantenibilidad. Se evidencia que la
implementación cumple con las
características y restricciones técnicas
solicitadas.
3.0 puntos
C06. Sustento Redacta de forma clara, específica y
de Landing completa los lineamientos principales que
Page dirigen la propuesta de Landing Page
implementada, en términos de principios,
elementos de diseño, heurísticas de
usabilidad, inclusive design y arquitectura
de información. La especificación. El
sustento se encuentra en el archivo
principal.
3.5 puntos
Total 20 puntos
Promedio
Se evidencia parcialmente la alineación
con la oferta de valor, características y
funcionalidades del Mobile Application,
o se incluyen en parte las secciones de
un Landing Page, cumpliendo el
contenido de forma parcial con los
Goals de los Visitantes para los
segmentos a los que se dirige el
negocio, o incluye de forma parcial los
adecuados Call-To-Action.
2.0 punto
La implementación del Landing Page
evidencia de forma parcial la aplicación
de los principios y elementos de diseño
visual, o la implementación es
parcialmente Responsive, no pudiendo
visualizarse de forma adecuada en
Browser de Desktop o Mobile, o no se
evidencia que el diseño implementado
aplica patrones de Web UI Design. O la
implementación cumple de forma
parcial con las características y
restricciones técnicas solicitadas.
2.5 punto
Se evidencia la aplicación de forma
parcial de los principios y heurísticas
de arquitectura de información en la
implementación del Landing Page. O la
implementación cumple de forma
parcial con las características y
restricciones técnicas solicitadas.
1.5 punto
Se evidencia de forma parcial la
aplicación de las heurísticas de
Usabilidad e Inclusive Design en la
implementación del Landing Page. O la
implementación cumple de forma
parcial con las características y
restricciones técnicas solicitadas.
1.5 punto
El proyecto se elabora con los
lenguajes establecidos: HTML5, CSS3
y JavaScript. Los frontend frameworks
o blbiotecas aplicados están dentro del
conjunto de Frontend Frameworks
autorizados: Bootstrap, ZURB
Foundation, Materialize, Google Fonts,
Fontawesome. Sin embargo, la
estructura del proyecto aplica
parcialmente buenas prácticas y
convenciones de nomenclatura en
inglés para los folders, o se aplica
parcialmente la nomenclatura en inglés
y convenciones para los objetos y
elementos de programación en HTML,
CSS y JavaScript, o en algunos
archivos, el código fuente tiene una
estructura parcialmente clara, o no
aplica espaciado e indentación
adecuados, generando dificultad para
el entendimiento y mantenibilidad. O la
implementación cumple de forma
parcial con las características y
restricciones técnicas solicitadas.
1.5 punto
Redacta de forma parcial los
lineamientos principales que dirigen la
propuesta de Interfaz de Usuario. El
sustento se encuentra en el archivo
principal.
2.0 puntos
11 puntos
Deficiente Calificación
No implementa Landing Page o
la implementación no tiene
relación con la oferta de valor,
características y funcionalidades
del Mobile Application.
0 puntos
No implementa Landing Page o
la implementación no evidencia
aplicación de principios o
elementos de Web UI Design. O
no satisface ninguna de las
características y restricciones
técnicas solicitadas.
0 puntos
No implementa Landing Page o
no evidencia la aplicación de los
principios o heurísticas de
arquitectura de información en la
implementación del Landing
Page. O no satisface ninguna de
las características y restricciones
técnicas solicitadas.
0 puntos
No implementa Landing Page o
no evidencia la aplicación de
heurísticas de Usabilidad e
Inclusive Design en la
implementación del Landing
Page. O no satisface ninguna de
las características y restricciones
técnicas solicitadas.
0 puntos
No implementa Landing Page o
la implementación no se realiza
con los lenguajes o frameworks
autorizados, o no aplica
convenciones ni buenas
prácticas en estructura de
folders o en archivos de código
fuente. O no satisface ninguna
de las características y
restricciones técnicas
solicitadas.
0 puntos
No implementa Landing Page, o
no redacta los lineamientos
principales para la propuesta de
Interfaz de usuario. O los
lineamientos no tienen relación
con la propuesta presentada. O
el sustento no se encuentra en el
archivo principal.
0 puntos
0 puntos
Lima, 07 de julio del 2023
Página 7 de 8
Anexo A.
Landing page de Referencia:

https://html.dynamiclayers.net/at/enovo/index.html

https://html.dynamiclayers.net/it/astra/index.html

http://html.phoenixcoded.net/appestia/creative/index-video.html

http://tanguyalbrici.com/Rego/Rego-ios.html#about

http://gfxpartner.com/Zapper/?storefront=envato-elements

https://www.prismmoney.com/

https://soft-html-template.webflow.io/

https://www.fitnessai.com/

Anexo B.
Enlaces de utilidad

https://www.pexels.com/

https://unsplash.com/

https://getbootstrap.com/

https://get.foundation/

https://materializecss.com/

https://css-tricks.com/

https://www.w3schools.com/html/

https://www.w3schools.com/css/default.asp

https://www.w3schools.com/js/default.asp

https://www.w3schools.com/bootstrap/bootstrap_ver.asp

https://www.w3schools.com/icons/fontawesome_icons_intro.asp

Página 8 de 8