IT-8-ACM-03-R02

UNIVERSIDAD AUTÓNOMA DE NUEVO LEÓN

FACULTAD DE INGENIERÍA MECÁNICA Y ELÉCTRICA

EXAMEN DE MEDIO CURSO

MATERIA: PROGRAMACIÓN WEB

SEMESTRE: N/A
ACADEMIA: PROGRAMACIÓN

Nombre del alumno:_______________________________________________________________________________

Matrícula:____________________________ Fecha:_____________________________________________

INSTRUCCIONES.- El examen consiste en crear una aplicación web con funcionalidad y diseño propio.
Sección 1. Estructura y diseño.

La página web debe tener al menos 4 pantallas:

1. Pantalla de inicio: (Valor 15%)
a. Mostrar las publicaciones recientes. (AJAX) (UT 1)
b. Mostrar una sección con un cuadro de texto para crear publicaciones. (UT 2)

Ilustración 1- Ejemplo de cuadro de texto, el suyo puede ser diferente. Los botones de localización, fotos, emojis y privacidad son decorativos.

2. Pantalla de "Mi perfil": (Valor 10%)

a. Mostrar solo sus publicaciones. (AJAX) (UT 1)
b. Mostrar una sección con un cuadro de texto para crear publicaciones. (UT 2)
c. Debe mostrar una sección de “Foto de perfil” con tu nombre, una foto tuya, una
posible descripción (opcional) y una foto de portada (opcional). (UT 2)

Ilustración 2- Ejemplo de Sección "Foto de perfil", el suyo puede ser diferente.

REVISIÓN No.: 7
VIGENTE A PARTIR DE: 1 Agosto del 2016
 IT-8-ACM-03-R02

d. Debe tener una sección de “Información personal” deberá mostrar tu información como
nombre (real), matrícula (real), donde has estudiado, pasatiempos, trabajos,
conocimientos u otras cosas sobre ti. (UT 2)
3. Pantalla "Favoritos": (Valor 10%)
a. Mostrar todas las publicaciones a las que usted dio “me gusta”. (AJAX) (UT 2)
4. Pantalla de publicación: (Valor 15%)
a. Debe mostrar los datos de una publicación específica (AJAX) a la que se le dio clic
en una página anterior (Pasar datos por el URL). (UT 1)
b. Debe mostrar los comentarios de la publicación. (AJAX) (UT 1)
c. Debe tener la opción de comentar. (UT 2)
d. Solo se puede acceder a esta pantalla si se hizo clic a una publicación en una página
anterior (Pasar datos por el URL). (UT 1)

Ilustración 3- Ejemplo de pantalla de publicación, el suyo puede ser diferente. Los botones de compartir, "mostrar todos los comentarios" y reportar son
decorativos.

*Nota: Para pasar datos entre pantallas puedes pasar parámetros por el URL, consulta en:
• https://webexperto.com/como-pasar-datos-entre-paginas-html-con-javascript/
• https://www.sitepoint.com/get-url-parameters-with-javascript/
• https://es.stackoverflow.com/questions/40614/existe-alguna-forma-de-pasar-datos-entre-links
• Google.

REVISIÓN No.: 7
VIGENTE A PARTIR DE: 1 Agosto del 2016
 IT-8-ACM-03-R02

Todas las pantallas:

• Pueden PARECERSE a los diseños de Facebook, Twitter u otra red social, aunque el diseño
debe ser original.
• Mostrar un menú de navegación, puede ser horizontal o vertical. Debe dar las ligas para
poder acceder al resto de pantallas y debe tener el nombre o logo de la red social ficticia
que estás creando.

Detalles:
• Publicaciones (Valor 20%)
o Cuando es una publicación tuya debe aparecer un botón de eliminar y editar la
publicación. Los botones deben ser funcionales. (AJAX) (UT 1)
o Debe mostrar el nombre de la persona que hizo la publicación. (UT 2)
o Debe mostrar la fecha de publicación. (UT 2)
o Debe mostrar el contenido de la publicación. (UT 2)
o Debe decir el número de “me gusta” y comentarios que tiene la publicación. (UT 2)
o Se le debe poder dar “me gusta” a la publicación (AJAX) y mostrar de diferente color
el símbolo cuando usted haya puesto un “me gusta” en una publicación. (UT 1)

Ilustración 4- Ejemplos de tarjetas de publicación, el suyo puede ser diferente. Los botones de compartir, guardar publicación, ocultar y reportar son decorativos.

REVISIÓN No.: 7
VIGENTE A PARTIR DE: 1 Agosto del 2016
 IT-8-ACM-03-R02

• Comentarios (Valor 20%)

o Cuando es un comentario tuyo debe aparecer un botón de eliminar y editar el comentario.
Los botones deben ser funcionales. (AJAX) (UT 1)
o Debe mostrar el nombre de la persona que hizo el comentario. (UT 2)
o Debe mostrar la fecha de creación del comentario. (UT 2)
o Debe mostrar el contenido del comentario. (UT 2)

Ilustración 5- Ejemplo de comentarios, el suyo puede ser diferente. El botón de reportar es decorativo.

Sección 2. API. (UT 1)

Usando el siguiente enlace podrás acceder a la documentación del API:
http://lepeciano.dyndns.org:81/swagger/index.html
o
http://189.158.215.221:81/swagger/index.html

Recuerda que necesitas haber recibido un correo con tus credenciales para poder hacer uso del API
(revisa tu cuenta de correo universitario). En caso de no haberlo recibido contacta por mensaje
directo a tu profesor.

Ilustración 6- Previsualización de la documentación del API.

REVISIÓN No.: 7
VIGENTE A PARTIR DE: 1 Agosto del 2016
 IT-8-ACM-03-R02

Sección 3. Librerías útiles. (UT 2)

1. Bootstrap: https://getbootstrap.com/docs/5.0/getting-started/introduction/.
<!-- Importar en el <head> -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
rel="stylesheet" crossorigin="anonymous">
<!-- Importar al final del body -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>

2. jQuery: https://api.jquery.com/.
<!-- Importar al final del body -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"
integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>

3. Moment.js: https://momentjs.com/. Esta librería sirve (entre otras cosas) para poder
convertir fechas en texto a un objeto manipulable como fecha.
<!-- Importar al final del body -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment-with-locales.min.js"
integrity="sha512-LGXaggshOkD/at6PFNcp2V2unf9LzFq6LE+sChH7ceMTDP0g2kn6Vxwgg7wkPP7AAtX+lmPqPdxB47A0Nz0cMQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
//En este formato viene la fecha en el API
var textoFecha = "2021-09-22T09:45:47";
//Así conviertes la fecha con la librería Moment.js
var fechaCreacion = moment(textoFecha);
// Cambia el lenguaje a español
fechaCreacion.locale('es');
// Posibles outputs: "hace unos segundos", "hace 1 minuto", "hace 2 días"
alert(fechaCreacion.fromNow());
// "miércoles, septiembre 22º 2021, 9:45:47 am"
alert(fechaCreacion.format("dddd, MMMM Do YYYY, h:mm:ss a"));
</script>

4. SweetAlert2: https://sweetalert2.github.io/. Esta librería sirve para crear cajas de Popups

muy bonitas.
<!-- Importar al final del body -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
Swal.fire({
icon: 'error',
title: 'Oops...',
text: '¡Algo salió mal!',
footer: '<p> Error: ' + xhr.status + " - " + error + '<p>'
});
Swal.fire({
icon: 'warning',
title: 'No hay texto...',
text: '¡Escribe lo que quieres decirle al mundo!'
});
Swal.fire(
'¡Borrado!',
'Su publicación ha sido borrada exitosamente.',
'success'
);
</script>
✄---------------------------------------------------------------------------------------------------------------------
Puedes recortar esta sección para secar tus lágrimas

REVISIÓN No.: 7
VIGENTE A PARTIR DE: 1 Agosto del 2016