UNIVERSIDAD DE LAS FUERZAS ARMADAS ESPE

DISEO DE INTERFACES
Nombres: Oscullo Bryan, Junia Mauricio Fecha: 31/07/2017

RECORRIDO COGNITIVO

1. PLANIFICACIN
1.1.Determinar quines sern los usuarios.
a) Los usuarios de sitio web respondern en su mayora a los perfiles
siguientes:
- Estudiante Universitario
- Profesores
- Investigadores.

b) Conocimientos alcanzados relacionados con el sistema:

- Estudiantes Universitarios
Habilidad para programar.
Interaccin con diferentes personas.
Retroalimentacin al momento de realizar programas.
Identificar los procesos de un concurso web.
- Profesores
Tiene conocimientos avanzados de programacin.
Conoce el proceso para participar en concursos.
- Investigadores
Aprende las metodologas para realizar un programa.
Identifica los protocolos de una pgina de concursos.

1.2.Determinar las tareas a analizar y sus acciones.

Tarea 1: Registrarse en el Portal Web.

Lo podr hacer cualquier persona, en especial estudiantes universitarios,

que quiera registrarse o inscribirse en este portal web enfocado a la
resolucin y concursos de ejercicios de programacin.

Acciones que se pueden tomar con el prototipo mencionado:

- Registro en el portal por medio de cuenta ligada a redes sociales
(Facebook, Google)
- Registro por medio de formulario de inscripcin, proporcionando
cuenta de correo electrnico y datos personales.
- Aceptar trminos y condiciones.
- Comprobar el registro mediante confirmacin en el correo.
- Visualizar mensaje de xito en el registro.
 Tarea 2: Inscribirse en un Concurso de Programacin.

Lo podr hacer cualquier persona registrada en el aplicativo que quiera

inscribirse en alguno de los concursos que se ofertan en el portal web.

Acciones que se pueden tomar con el prototipo mencionado:

- Informarse sobre los concursos de programacin prximos a
realizarse.
- Visualizar informacin ms detallada de un concurso, como fecha de
realizacin, duracin, temtica, complejidad y premios para los
primeros lugares.
- Inscribirse en un concurso.

Tarea 3: Participar en un Concurso de Programacin.

Lo podr hacer cualquier persona inscrita en un concurso de programacin

en el portal web, resolver los ejercicios durante el concurso y an luego de
su finalizacin.

Acciones que se pueden tomar con el prototipo mencionado:

- Visualizar los diferentes ejercicios de programacin que conforman un
concurso.
- Visualizar el enunciado del ejercicio con las recomendaciones, datos
de entrada y datos esperados de salida.
- Elegir el lenguaje de programacin de su preferencia con el que se
resolver el ejercicio propuesto.
- Hacer compilaciones de prueba para ver el resultado y acciones de una
respuesta propuesta de cdigo.
- Enviar el cdigo propuesto de solucin para su evaluacin y
aceptacin.
- Visualizar resultados de una evaluacin.

1.3.Determinar el prototipo a evaluar

Descripcin del prototipo: El prototipo escogido es el Portal Web

Hackerearth, el cul es una pgina de concursos de programacin en linea y
refuerzo en la resolucin de problemas.

Se adjuntan las siguientes imgenes del prototipo:

La pantalla principal del portal web consta con el formulario de ingreso,
tambin con las opciones de registro o ingreso mediante una cuenta de otra
aplicacin como: Facebook, google o GitHub. El logotipo est situado en
el lado superior izquierdo seguido un men con las tres principales
opciones que presenta el portal: concursos, ejercicios de prctica,
informacin de compaas patrocinadoras de competiciones.
 Figura 1. Pgina de Ingreso Hackerearth

El resto de las interfaces que presenta el portal una vez ingresado con tu
cuenta de usuario son de color gris de fondo, de igual manera el sitio no
se ve cargado de demasiado contenido, la pantalla inicial se muestran los
principales concursos prximos a dar inicio, en la parte de derecha un
panel con informacin del usuario acerca de concursos, en los que ha
participado y a los que est inscrito hasta el momento.

Figura 2. Pgina inicial Hackerearth

Al seleccionar un concurso, ya sea uno que ha finalizado y habilitado para

ser visualizado como prctica o, uno prximo a dar inicio y abierto a
inscripciones, se muestra una interfaz simple con informacin general del
concurso: fecha de inicio, fecha de finalizacin, duracin, temticas a
tratarse y auspiciantes.
 Figura 3. Pgina Principal de Concurso

Una vez dentro de un concurso la interfaz muestra los ejercicios que los
conforman, marcados en color verdes los que vayan siendo completados
exitosamente, la pantalla de un ejercicio en especfico muestra el enunciado
del mismo, seguido por una seccin en donde se podr colocar el cdigo de la
solucin en el lenguaje de programacin de preferencia, una vez subida la
solucin y evaluado esta valoracin se mostrar en una lista de casos de
prueba, marcando con verde los aceptados, con rojo los errneos y con
anaranjado los que exceden tiempo de procesamiento. En la parte derecha se
encuentra un panel en donde se muestran los mejores resultados de
evaluaciones de soluciones propuestas para el ejercicio por cada lenguaje,
tambin el autor del ejercicio, el probador y los conos de las redes sociales
del portal web.

Figura 4. Detalles Generales del Concurso.

 Figura 5. Seccin del Problema donde se muestra el enunciado.

Figura 6. Seccin del Problema donde se coloca la solucin y se presenta su evaluacin.

2. RESULTADOS

Tarea 1: Registrarse en el Portal Web Hackerearth

Accin Evaluacin Observacin
Registro en el portal por medio de cuenta
ligada a redes sociales (Facebook, Google,
SI Figura 1.
etc.)

Registro por medio de formulario de

inscripcin, proporcionando cuenta de correo
SI Figura 7.
electrnico y datos personales.

Al momento de realizar el
registro no se muestran
Aceptar trminos y condiciones. trminos y condiciones
NO
legales con la empresa, ni
la opcin de aceptarlos o
no.
 No se recibe ningn
Comprobar el registro mediante confirmacin
correo electrnico
en el correo. NO
comprobante del registro
el Hackerearth.
No se muestra ningn
mensaje evidenciando el
Visualizar mensaje de xito en el registro.
NO xito o error del registro,
tan solo se redirige a la
pantalla inicial.

Figura 7. Formulario de Registro Hackerearth

Tarea 2: Inscribirse en un concurso de programacin Hackerearth

Accin Evaluacin Observacin
Informarse sobre los concursos de programacin
prximos a realizarse. SI Figura 2.

Visualizar informacin ms detallada de un

concurso, como fecha de realizacin, duracin,
temtica, complejidad y premios para los SI Figura 3.
primeros lugares.

Inscribirse en un concurso.
SI Figura 3.
Comprobar la inscripcin en un concurso
mediante confirmacin en el correo. SI Figura 8.
 Figura 8. Correo de Confirmacin de inscripcin en un concurso.

Tarea 2: Inscribirse en un concurso de programacin Hackerearth

Accin Evaluacin Observacin
Visualizar los diferentes ejercicios de
SI Figura 4.
programacin que conforman un concurso.
Visualizar el enunciado del ejercicio con las
recomendaciones, datos de entrada y datos SI Figura 5.
esperados de salida.
Solo se tiene la opcin de
Seleccionar el idioma en que se presente el Ingles, que es un
NO
enunciado. limitante para
concursantes extranjeros.
Elegir el lenguaje de programacin de su
preferencia con el que se resolver el ejercicio SI Figura 9.
propuesto.
Como se muestra en la
Hacer compilaciones de prueba para ver el figura 10 la compilacin
resultado y acciones de una respuesta propuesta SI de prueba se logra dando
de cdigo. click en el botn
Compile and Test
Como se muestra en la
figura 11 el envo del
Enviar el cdigo propuesto de solucin para su cdigo para su
SI
evaluacin y aceptacin. evaluacin se logra
dando click en el botn
Submit
Visualizar resultados de una evaluacin SI Figura 11.
 Figura 9. Eleccin de lenguaje de programacin para la solucin.

Figura 10. Compilacin de Prueba de la Solucin.

Figura 11. Envo y evaluacin de la solucin.

3. CONCLUSIONES Y RECOMENDACIONES

- En general las tareas evaluadas sobre el portal web Hackerearth han

sido cumplidas exitosamente en su mayora, dejando solo pocos puntos
a consideracin.
- Se recomienda presentar mensajes de confirmacin en el proceso del
registro o inscripcin en algn concurso sin tener la necesidad de
dirigirse al correo electrnico.
- Una variedad de lenguajes en que se presente el enunciado del
problema sera de utilidad para todos los usuarios no dejando como
limitante el idioma en esta interaccin entre programadores de todo el
mundo.