Diseño de Interfaz de Usuario

Huella | Universidad Autónoma de Sinaloa 2013

Facultad de Informática Culiacán

17 / 05 / 2013

Carrera InstructorLic. en Informática Rubén Heildelberg

Alumnos

Campas Chaves Yuridiana

Escalante Godinez Alfredo Humberto

Sánchez López Dulce Maribel

Descripción

1 Facultad de Informática Culiacán


ContenidoAntecedentes del proyecto..........................................................................................................3

Nombre de proyecto:...................................................................................................................3

Red Social Huella..........................................................................................................................3

Objetivos......................................................................................................................................3

Descripción...................................................................................................................................3

Sección Web.................................................................................................................................7

Análisis.....................................................................................................................................7

Diseño....................................................................................................................................47



Antecedentes del proyecto

El auge de las redes sociales surge después de la creación de Facebook teniendo como

fundador a Mark Zuckerberg, el éxito es tan impresionante que logra derrotar a la web más

visitada del mundo de todo los tiempos “Google”, además de convertirse en el lugar donde los

usuarios de internet pasan mayor parte de su tiempo. Sin embargo, existen necesidades que

está red social no ofrece y una de ellas, es la capacidad de guardar cosas como favoritos, o

personalizarlas, cayendo así en un igualísimo.

Nombre de proyecto:

Red Social Huella

Objetivos

Desarrollar una red social para el público en general que sea fácil de utilizar y genere

confianza en el usuario.

Desarrollar una red social que sea capaz de soportar aplicaciones flash para generar

entretenimiento a los usuarios.

Desarrollar una red social que pueda competir con el mercado actual, cumpliendo con

la calidad que hoy en día se exige en internet y aportando algo nuevo, como la

personalización de perfiles.

Descripción

Crear una red social que permita a los usuarios tener un perfil en ella, agregar a otros usuarios

de así como la comunicación de los mismos, administrar archivos e imágenes, personalizar su

espacio, integrar aplicaciones desarrolladas en flash y crear grupos de amigos.

Además tendrá administradores que gestionaran a los usuarios y a los contenidos que se

publican en ella, teniendo la posibilidad de eliminar una imagen inapropiada o a un usuario

que este creando conflictos. También podrán enviar boletines a los usuarios que lo permitan.

Análisis de requisitos

Administración de Eventos

Administración de Publicaciones

Personalización de perfil (colores,

contador de visitas).


Red Social

Administradores

Desarrolladores

Competencia

Usuarios

Gobierno


Administración de Grupos

Administración de Favoritos

Administración de Fotos

Administración de Videos

Administración de Páginas

personales

Visualización de noticias

Visualización de recomendados

Administración de solicitudes de Amistad

Registro

Login

Análisis de implicados

Clasificación de los usuarios, perfiles y roles



Análisis contextual

La mensajería instantánea (conocida también en inglés como IM) es una forma

de comunicación en tiempo real entre dos o más personas basada en texto. El texto es enviado

a través de dispositivos conectados a una red como Internet.

Una primera forma de mensajería instantánea fue la implementación en el

sistema PLATO usado al principio de la década de 1970. Más tarde, el

sistema talk implementado en UNIX/LINUX comenzó a ser ampliamente usado por ingenieros y

académicos en las décadas de 1980 y 1990 para comunicarse a través de internet. ICQ fue el

primer sistema de mensajería instantánea para ordenadores con sistema operativo distinto de

UNIX/LINUX en noviembre de 1996.

Sin embargo en 2007 eso cambiaria con facebook, ya que no se necesitaría instalar alguna

aplicación en su máquina de escritorio (que esto conlleva a la compatibilidad de S.O.). Sólo


Usuarios

Administración de EventosAdministración de PublicacionesAdministración de GruposAdministración de FavoritosAdministración de FotosAdministración de VideosAdministración de Páginas personalesPersonalización de perfil (colores, contador de visitas).Visualización de noticiasVisualización de recomendadosAdministración de solicitudes de Amistad

Administra

dor Gestionar usuarios. Gestionar contenido.

Visitante

LoginRegistro


bastaría con tener el navegador instalado (por lo general los S.0. traen uno instalado) y tener

acceso a internet para poder comunicarse con los demás, sin embargo, facebook no ofrece una

personalización de diseño, y esto hace que los usuarios pierdan su autenticidad, algo que nos

caracteriza a todos los seres humanos.

Plataforma

¿Qué ofrece?

Personalización de perfiles.

Gestor de archivos.

Gestor de contenidos.

Gestor de amigos.

Gestor de aplicaciones.

Búsqueda de personas.

Dirección de Email.

Administrador de páginas.

Portal de noticias

¿A qué se limita?

No incluye reconocimiento facial.

No incluye reconocimiento de voz.

No se vincula con otras plataformas (twitter, facebook).

No incluye bonificaciones a desarrolladores de aplicaciones flash.

Soportar aplicaciones menores a 40 mb

No incluye soporte(para usuarios).

Objetivos Funcionales:

Lograr que la población tenga la posibilidad de comunicarse y compartir sus intereses

de manera confiable y auténtica.

Evaluar periódicamente y de manera sistemática el funcionamiento del sistema

(actualizaciones), así como la eliminación de material inapropiado.

Controlar la seguridad para los usuarios.



Lograr que las entidades, organizaciones públicas, privadas y las personas naturales,

que desarrollen actividades de lucro, se anuncien a través de los boletines que

ofrecemos.

Establecer un entorno agradable y cómodo a los usuarios con exclusividad.

Sección Web

Análisis

Visitante

CASO DE USO Registrarse

ACTOR Visitante

DESCRIPCIÓN El visitante desea registrarse en el sistema

PRECONDICIÓN El usuario proporcionado no debe de existir en la base de datos

CURSO NORMAL ACTOR SISTEMA



CASO DE USO Registrarse

1. El usuario introduce los datos requeridos para el registro.

2. El sistema verifica que el usuario no se encuentre registrado en la base de datos.

3. Se notifica al visitante que ha sido registrado en el sistema.

CURSO ALTERNO ACTOR SISTEMA

2a. El usuario ya se encuentra registrado:

3. Se notifica al usuario que la operación de registro ha fallado

3a. Ha sucedido un error en la base de datos.

4a. Se notifica al usuario que ha sucedido un error y que deberá intentar más tarde.

POSTCONDICIÓN El nombre de usuario no podrá ser registrado por ningún otro visitante.

CASO DE USO Recuperar Contraseña

ACTOR Visitante

DESCRIPCIÓN El visitante desea recuperar su contraseña de usuario

PRECONDICIÓN El usuario proporcionado debe de existir en la base de datos.




CASO DE USO Recuperar Contraseña

1. El visitante introduce el nombre de usuario.

2. El sistema verifica que el usuario se encuentre registrado en la base de datos.

3. Se notifica al usuario que se ha enviado un mensaje con su contraseña a su email.


2a. El usuario no se encuentra registrado:

3. Se notifica al visitante que el usuario no existe en la base de datos.

3a. Ha sucedido un error en la base de datos.

4a. Se notifica al visitante que ha sucedido un error y que deberá intentar más tarde.




CASO DE USO Login

ACTOR Visitante

DESCRIPCIÓN El visitante desea entrar al sistema como usuario.



1. El visitante introduce el nombre de usuario y su contraseña.

2. El sistema verifica que el usuario se encuentre registrado en la base de datos.

3.-El sistema válida el usuario con la contraseña.

4. Se notifica al usuario que ha entrado al sistema.


2a. El usuario no se encuentra registrado:

3. Se notifica al visitante que el usuario no existe en la base de datos.

3a. El nombre de usuario no corresponde con la contraseña.

4. Se notifica al visitante que la contraseña no corresponde a su usuario,




Usuario

CASO DE USO Inicio-Noticias

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y se le ha redirigido a inicio


El usuario se ha logueado en el sistema

Deberán de existir noticias


1.- El sistema busca las noticias correspondientes al día en que el usuario está

2.-El sistema muestra las noticias al usuario.


1a. No se encontraron noticias al día

2. Se notifica al usuario que no hay noticias nuevas

1b. Sucedió un error en la base de datos.

2. Se notifica al usuario que no se pudieron cargar las noticias debido a un error interno.

POSTCONDICIÓN Las noticias deberán ser visibles para el usuario.



CASO DE USO Inicio-Publicaciones

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y ha seleccionado la pestaña de publicaciones



Deberán de existir publicaciones,


1.- El sistema busca las publicaciones correspondientes al usuario está

2.-El sistema muestra las publicaciones al usuario.


1a. No se encontraron publicaciones

2. Se notifica al usuario que no hay publicaciones.


2. Se notifica al usuario que no se pudieron cargar las publicaciones debido a un error interno.

POSTCONDICIÓN Las publicaciones deberán ser visibles para el usuario.



CASO DE USO Inicio-Evento

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y ha seleccionado la pestaña de eventos



Deberán de existir eventos,


1.- El sistema busca los eventos correspondientes al usuario está

2.-El sistema muestra los eventos al usuario.


1a. No se encontraron eventos

2. Se notifica al usuario que no hay eventos.


2. Se notifica al usuario que no se pudieron cargar las publicaciones debido a un error interno.

POSTCONDICIÓN Los eventos deberán de ser visible para el usuario.



CASO DE USO Inicio-Evento-Nuevo

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema, ha seleccionado la pestaña de eventos y desea crear un evento nuevo.




1.- El usuario proporciona el nombre del evento y etiqueta a las personas que ha invitado.

2.- El sistema guarda el evento en la base de datos.

3.- Se notifica al usuario que el evento ha sido creado.


2a. Sucedió un error en la base de datos.

3. Se notifica al usuario que no se ha podido guardar el evento.

POSTCONDICIÓN El evento deberá de haberse guardado en la base de datos.



CASO DE USO Inicio-Evento-Modificar

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema, ha seleccionado la pestaña de eventos y desea modificar un evento.



El evento deberá de existir en la base de datos.


1.- El usuario proporciona los datos que desea modificar del evento.

2.- El sistema guarda el evento en la base de datos.

3.- Se notifica al usuario que el evento ha sido modificado.



3. Se notifica al usuario que no se ha podido modificar el evento.

POSTCONDICIÓN La modificación deberá guardarse en la base de datos.



CASO DE USO Inicio-Evento-Eliminar

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema, ha seleccionado la pestaña de eventos y desea eliminar un evento.



El evento deberá de existir en la base de datos.


1.- El usuario proporciona el evento que desea eliminar.

2.- El sistema elimina el evento en la base de datos.

3.- Se notifica al usuario que el evento ha sido eliminado.



3. Se notifica al usuario que no se ha podido eliminar el evento.

POSTCONDICIÓN Se deberá de eliminar el evento de la base de datos.



CASO DE USO Inicio-Grupos

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y ha seleccionado la pestaña de grupos



Deberán de existir grupos,


1.- El sistema busca los grupos correspondientes al usuario.

2.-El sistema muestra los grupos al usuario.


1a. No se encontraron grupos

2. Se notifica al usuario que no hay grupos.


2. Se notifica al usuario que no se pudieron cargar los grupos debido a un error interno.

POSTCONDICIÓN Los grupos deberán ser visibles para el usuario.



CASO DE USO Inicio-Grupos-Nuevo

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema, ha seleccionado la pestaña de grupos y desea crear un grupo nuevo.




1.- El usuario proporciona el nombre del grupo.

2.- El sistema guarda el grupo en la base de datos.

3.- Se notifica al usuario que el grupo ha sido creado.



3. Se notifica al usuario que no se ha podido guardar el grupo.

POSTCONDICIÓN El grupo deberá de haberse guardado en la base de datos.



CASO DE USO Inicio-Grupos-Modificar

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema, ha seleccionado la pestaña de grupos y desea modificar un grupo.



El grupo deberá de existir en la base de datos.


1.- El usuario proporciona los datos que desea modificar del grupo.

2.- El sistema guarda el grupo en la base de datos.

3.- Se notifica al usuario que el grupo ha sido modificado.



3. Se notifica al usuario que no se ha podido modificar el grupo.




CASO DE USO Inicio-Grupos-Eliminar

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema, ha seleccionado la pestaña de eventos y desea eliminar un evento.



El grupo deberá de existir en la base de datos.


1.- El usuario proporciona el grupo que desea eliminar.

2.- El sistema elimina el grupo en la base de datos.

3.- Se notifica al usuario que el grupo ha sido eliminado.



3. Se notifica al usuario que no se ha podido eliminar el grupo.

POSTCONDICIÓN Se deberá de eliminar el grupo de la base de datos.



CASO DE USO Inicio-Recomendados

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y ha seleccionado la pestaña de recomendados.



Deberán de existir enlaces de recomendados


1.- El sistema busca los enlaces recomendados.

2.-El sistema muestra los enlaces recomendados.


1a. No se encontraron enlaces recomendados

2. Se notifica al usuario que no hay enlaces recomendados.


2. Se notifica al usuario que no se pudieron cargar enlaces recomendados debido a un error interno.



CASO DE USO Inicio-Recomendados

POSTCONDICIÓN Los enlaces recomendados deberán ser visibles para el usuario.

CASO DE USO Inicio-Favoritos

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y ha seleccionado la pestaña de favoritos.



Deberán de existir enlaces favoritos.


1.- El sistema busca los enlaces favoritos.

2.-El sistema muestra los enlaces favoritos.


1a. No se encontraron enlaces favoritos

2. Se notifica al usuario que no hay enlaces favoritos.


2. Se notifica al usuario que no se pudieron cargar enlaces favoritos debido a un error interno.



CASO DE USO Inicio-Favoritos

POSTCONDICIÓN Los enlaces favoritos deberán ser visibles para el usuario.

CASO DE USO Inicio-Favoritos-Nuevo

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema, ha seleccionado la pestaña de favoritos y desea crear un enlace de favoritos




1.- El usuario proporciona el enlace favorito.

2.- El sistema guarda el enlace favorito en la base de datos.

3.- Se notifica al usuario que el enlace ha sido creado.



CASO DE USO Inicio-Favoritos-Nuevo



3. Se notifica al usuario que no se ha podido guardar el enlace favorito.

POSTCONDICIÓN El enlace favorito deberá de haberse guardado en la base de datos.

CASO DE USO Inicio-Favoritos-Modificar

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema, ha seleccionado la pestaña de enlaces favoritos y desea modificar un enlace favorito.



El enlace favorito deberá de existir en la base de datos.




CASO DE USO Inicio-Favoritos-Modificar

1.- El usuario proporciona los datos que desea modificar del enlace favorito.

2.- El sistema guarda el enlace favorito en la base de datos.

3.- Se notifica al usuario que el grupo ha sido modificado.



3. Se notifica al usuario que no se ha podido modificar el enlace favorito



ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema, ha seleccionado la pestaña de favoritos y desea eliminar un enlace favorito.






El enlace favorito deberá de existir en la base de datos.


1.- El usuario proporciona el grupo que desea eliminar.

2.- El sistema elimina el enlace favorito en la base de datos.

3.- Se notifica al usuario que el enlace favorito ha sido eliminado.



3. Se notifica al usuario que no se ha podido eliminar el enlace favorito.

POSTCONDICIÓN Se deberá de eliminar el grupo de la base de datos.



CASO DE USO Inicio-Muro

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema, ha seleccionado el menú mi muro.




1.- El sistema deberá cargar la información personal tal y como el número de visitas, imagen de perfil, portada y publicación.



2. Se notifica al usuario que no se ha podido cargar su información personal

POSTCONDICIÓN Se deberá de cargar la información personal del usuario



CASO DE USO Inicio-Muro-Publicar

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema, ha seleccionado el menú mi muro, y desea publicar algo.




1.- El usuario envía el texto de su publicación.

2.- El sistema guardara su publicación en la base de datos-

3.- El sistema notificará al usuario que su publicación ha sido guardada con éxito..



2. Se notifica al usuario que no se ha podido guardar su publicación.

POSTCONDICIÓN Se deberá de guardar la publicación en la base de datos.



CASO DE USO Inicio-Muro-Publicaciones-Me gusta

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema, ha seleccionado el menú mi muro, y le ha gustado una publicación por lo cual decide darle me gusta.



La publicación debe de existir en la base de datos


1.- El usuario selecciona en la parte inferior de la publicación la opción “me gusta”.

2.- El sistema guardara su voto junto a la publicación en la base de datos.

3.- El sistema notificará al usuario que su “me gusta” ha sido guardado.



2. Se notifica al usuario que no se ha podido guardar su “me gusta”.

POSTCONDICIÓN Se deberá de guardar el “me gusta” junto con la publicación correspondiente.



CASO DE USO Inicio-Muro-Publicaciones-No me gusta

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema, ha seleccionado el menú mi muro, y le ha disgustado una publicación por lo cual decide darle no me gusta.





1.- El usuario selecciona en la parte inferior de la publicación la opción “no me gusta”.

2.- El sistema guardara su voto junto a la publicación en la base de datos.

3.- El sistema notificará al usuario que su “no me gusta” ha sido guardado.



2. Se notifica al usuario que no se ha podido guardar su “no me gusta”.

POSTCONDICIÓN Se deberá de guardar el “no me gusta” junto con la publicación correspondiente.



CASO DE USO Inicio-Muro-Publicaciones-Compartir

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema, ha seleccionado el menú mi muro, y le ha gustado tanto una publicación que ha decidido darle “compartir”.





1.- El usuario selecciona en la parte inferior de la publicación la opción “compartir”.

2.- El sistema guardara su compartir junto a la publicación en la base de datos.

3.- El sistema notificará al usuario que su “compartir” ha sido guardado.



2. Se notifica al usuario que no se ha podido guardar su “compartir”.

POSTCONDICIÓN Se deberá de guardar el “compartir” junto con la publicación correspondiente.



CASO DE USO Buscar

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y está buscando algo.




1.- El usuario proporciona la secuencia de caracteres a buscar dentro de la base de datos.

2.- El sistema deberá buscar dentro de la base de datos y recuperar las coincidencias.

3.-Se notificara al usuario sobre las posibles coincidencias.


2a. No se ha encontrado coincidencias en la base de datos.

3. Notificar al usuario que no se han encontrado en la base de datos.


3. Se notifica al usuario que no se ha podido cargar los resultados de la búsqueda.

POSTCONDICIÓN Se deberá de cargar los resultados de la búsqueda.



CASO DE USO Lista-Amigos

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y desea ver su lista de amigos



El usuario deberá de contar con por lo menos un amigo.


1.- El sistema deberá buscar dentro de la base de datos y ver si el usuario cuenta con amigos.

2.-Se cargan los amigos del usuario.


2a. No se ha encontrado amigos en la base de datos.

3. Notificar al usuario que no se han encontrado amigos en la base de datos.


3. Se notifica al usuario que no se ha podido cargar su lista de amigos por qué sucedió un error.

POSTCONDICIÓN Se deberá de cargar la lista de amigos del usuario.



CASO DE USO Amigos-Nuevo

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y desea añadir un nuevo amigo



El usuario lo ha encontrado en la búsqueda del sitio.


1.- El usuario selecciona al usuario que desea añadir a su lista de amigos.

2.-El sistema guarda la solicitud dentro de la base de datos.

3.- El sistema notifica al usuario añadido que el usuario solicitante le está enviado una invitación de amistad.

4.-El usuario añadido ha aceptado la invitación.

5.-Se notifica al usuario solicitante que el usuario añadido ha aceptado la invitación.



CASO DE USO Amigos-Nuevo


2a. No se ha podido guardar la solicitud en la base de datos.

3. Se notifica al usuario que fue imposible enviar la solicitud de amistad al usuario.

4a. El usuario no ha aceptado la invitación

5.-Se notifica al usuario solicitante que el usuario añadido ha rechazado la invitación.

POSTCONDICIÓN Se deberá guardar al nuevo amigo en la base de datos.

CASO DE USO Amigos-Eliminar

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y desea eliminar a una persona de su lista de amigos.



El amigo debe de estar vinculado con el usuario


1.- El usuario selecciona al usuario que desea eliminar de su lista de amigos.

2.-El sistema elimina a la persona de su lista de amigos.

3.- Se notifica al usuario que la persona ha sido eliminado de su lista de amigos.



CASO DE USO Amigos-Eliminar


2a. No se ha podido eliminar al usuario de su lista de amigos

3. Se notifica al usuario que fue imposible eliminar a la persona de su lista de amigos que intente más tarde.

POSTCONDICIÓN Se deberá eliminar a la persona de la lista de amigos.

CASO DE USO Lista-Fotos

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y desea ver sus fotos.



El usuario deberá de contar con por lo menos una foto.




CASO DE USO Lista-Fotos

1.- El sistema deberá buscar dentro de la base de datos y ver si el usuario cuenta con fotos.

2.-Se cargan las fotos del usuario.


2a. No se ha encontrado fotos en la base de datos relacionadas con el usuario.

3. Notificar al usuario que no se han encontrado fotos en la base de datos.


3. Se notifica al usuario que no se ha podido cargar su lista de fotos porque sucedió un error.

POSTCONDICIÓN Se deberá de cargar la lista de fotos del usuario.

CASO DE USO Fotos-Nueva

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y desea agregar una foto.



CASO DE USO Fotos-Nueva




1.- El usuario envía los datos requeridos para subir una foto. 1.- El sistema procesa que la imagen

se encuentre en un formato adecuado y que no pese más de 5 Mb.

2.Se sube la foto al sistema

3.- Se notifica al usuario que su imagen ha sido subida.


2a. La imagen pesan más de 5 Mb o que el formato es incorrecto.

3.- Se notifica al usuario que las fotos seleccionadas pesan más que el límite de peso máximo por foto o que se encuentra con un formato distinto a .png, .jpg o .bmp.

3a. No se ha podido subir la imagen al sistema

4. Se notifica al usuario que ha sucedido un error en la transferencia de las imágenes.

POSTCONDICIÓN Se deberá de vincular en la base de datos del usuario.

Se deberá de guardar el archivo en el directorio de imágenes.



CASO DE USO Fotos-Modificar

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y desea modificar la descripción de una foto.



El usuario deberá de contar con la imagen.


1.- El usuario proporciona la nueva descripción de la imagen que desea modificar.

2.- El sistema guarda la nueva descripción en la imagen.

3. Se notifica al usuario que se ha modificado correctamente la descripción de la imagen.


2a. Sucedió un error mientras se trataba de guardar la nueva descripción de la imagen.

3.- Se notifica al usuario que no fue posible guardar la nueva descripción de imagen y que intente más tarde.

POSTCONDICIÓN Se deberá de modificar la descripción en la base de datos.



CASO DE USO Fotos-Eliminar

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y desea eliminar una foto.



El usuario deberá de contar con la imagen.


1.- El usuario proporciona la imagen que desea eliminar

2.- El sistema elimina la imagen.

3.- Se notifica al usuario que la imagen fue eliminada correctamente.


2a. Sucedió un error mientras se trataba de eliminar la imagen.

3.- Se notifica al usuario que no fue posible eliminar la imagen.

POSTCONDICIÓN Se deberá de eliminar la imagen.

Se deberá de eliminar la imagen del directorio de imágenes.



CASO DE USO Lista-Videos

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y desea ver sus videos



El usuario deberá de contar con por lo menos un video subido.


1.- El sistema deberá buscar dentro de la base de datos y ver si el usuario cuenta con videos.

2.-Se cargan los videos del usuario.


2a. No se ha encontrado videos en la base de datos relacionadas con el usuario.

3. Notificar al usuario que no se han encontrado videos en la base de datos.


3. Se notifica al usuario que no se ha podido cargar su lista de videos porque sucedió un error.

POSTCONDICIÓN Se deberá de cargar la lista de videos del usuario.



CASO DE USO Videos-Nuevo

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y desea agregar un video nuevo.




1.- El usuario envía los datos requeridos para subir un video. 1.- El sistema procesa que el video se

encuentre en un formato adecuado y que no pese más de 200 Mb.

2.Se sube el video al sistema

3.- Se notifica al usuario que video ha sido subido.


2a. El video pesa más de 200 Mb o tiene formato incorrecto.

3.- Se notifica al usuario que el video que se ha tratado de subir pesa más de 200 Mb o tiene formato incorrecto.

3a. No se ha podido subir el video al sistema

4. Se notifica al usuario que ha sucedido un error en la transferencia del video.

POSTCONDICIÓN El video e deberá de vincular en la base de datos del usuario.

Se deberá de guardar el archivo en el directorio de videos.



ASO DE USO Videos-Modificar

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y desea modificar la descripción de un video



El usuario deberá de contar con el video.


1.- El usuario proporciona la nueva descripción del video que desea modificar.

2.- El sistema guarda la nueva descripción del video.

3. Se notifica al usuario que se ha modificado correctamente la descripción del video.


2a. Sucedió un error mientras se trataba de guardar la nueva descripción del video

3.- Se notifica al usuario que no fue posible guardar la nueva descripción del video y que intente más tarde.

POSTCONDICIÓN Se deberá de modificar la descripción en la base de datos.



CASO DE USO Videos-Eliminar

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y desea eliminar un video



El usuario deberá de contar con el video.


1.- El usuario proporciona el video que desea eliminar

2.- El sistema elimina el video.

3.- Se notifica al usuario que el video fue eliminado correctamente.


2a. Sucedió un error mientras se trataba de eliminar el video.

3.- Se notifica al usuario que no fue posible eliminar el video.

POSTCONDICIÓN Se deberá de eliminar el video.

Se deberá de eliminar la imagen del directorio de videos.



CASO DE USO Lista-Páginas

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y desea ver sus páginas personalizadas de muro.



El usuario deberá de contar con por lo menos una página creada.


1.- El sistema deberá buscar dentro de la base de datos y ver si el usuario cuenta con páginas

2.-Se cargan los videos del usuario.


2a. No se ha encontrado páginas en la base de datos relacionadas con el usuario.

3. Notificar al usuario que no se han encontrado páginas en la base de datos.


3. Se notifica al usuario que no se ha podido cargar su lista de páginas de muro porque sucedió un error.

POSTCONDICIÓN Se deberá de cargar la lista de páginas del usuario.



CASO DE USO Páginas-Nuevo

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y desea agregar una nueva página personal.




1.- El usuario envía los datos requeridos para crear una nueva página.

2.- El sistema crea la página personal.

3.- Se notifica al usuario que la página personal ha sido creada.


2a. Ha sucedido un error al crear la página personal

3.- Se notifica al usuario que ocurrió un error mientras intentaba crear la página personal y que intente más tarde.

POSTCONDICIÓN La página personal deberá ser guardada en la base de datos



CASO DE USO Páginas-Modificar

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y desea modificar una página personal.



El usuario deberá de contar con una página personal.


1.- El usuario proporciona el nuevo texto de la página personal.

2.- El sistema guarda el nuevo texto de la página personal.

3. Se notifica al usuario que se ha modificado correctamente la página personal.


2a. Sucedió un error mientras se trataba de guardar el nuevo texto de la página personal

3.- Se notifica al usuario que no fue posible guardar el nuevo texto de la página personal.

POSTCONDICIÓN Se deberá de modificar el texto de la página personal en la base de datos.



CASO DE USO Páginas-Eliminar

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y desea eliminar una página personal.



El usuario deberá de contar con una página personal.


1.- El usuario proporciona la página personal que desea eliminar.

2.- El sistema elimina de la base de datos la página personal.

3.- Se notifica al usuario que la página personal ha sido eliminada con éxito.


2a. Sucedió un error mientras se trataba de eliminar la página personal en la base de datos.

3.- Se notifica al usuario que no fue posible eliminar la página personal de la base de datos.

POSTCONDICIÓN Se deberá de eliminar la página personal en la base de datos.



CASO DE USO Configuración

ACTOR Usuario

DESCRIPCIÓN El usuario ha entrado al sistema y desea cambiar su configuración, tal como su privacidad, visibilidad o color.




1.- El usuario proporciona los valores de la configuración que desea cambiar.

2.- El sistema realiza los nuevos ajustes.

3.- Se notifica al usuario que se ha guardado su nueva configuración.


2a. Sucedió un error mientras se trataba de guardar la configuración.

3.- Se notifica al usuario que no fue posible guardar las nueva configuración-

POSTCONDICIÓN Se deberán de realizar los nuevos cambios de configuración inmediatamente.



Diseño

Visitas

Esta pantalla la verá la persona que ingrese con el rol de visitante al sitio (sin haberse autentificado). Esta pantalla nos puede llevar a 3 lugares según sea el caso, por ejemplo: si yo como usuario aun no me encuentro registrado, podre hacerlo posicionándome en la columna de la derecha, ingresando los datos y posteriormente dando clic en el botón registrar.

Cuando la persona se registra, automáticamente se redirige a la página de inicio (pues ha pasado de ser un visitante a un usuario registrado).



Por otra parte si yo ya me encuentro registrado será cuestión de proporcionar mi nombre de usuario y contraseña en los campos de la barra superior derecha, y en caso de que los datos sean correctos también se me re direccionará a inicio.

En caso de que haya olvidado mi contraseña, deberé de hacer clic en el enlace de ¿Has olvidado tu contraseña? por debajo de los campos de usuario y contraseña de la barra superior derecha. En este caso me aparecera la siguiente imagen.

Aquí deberé de proporcionar mi email con el que me encuentro registrado y posteriormente pulsar el botón Enviar.



Usuarios / Inicio / Sección Noticias

La página de inicio carga por default la sección de noticias, bastará con dar clic sobre la noticias para que te envié a un enlace externo de la página donde se publico la noticia.

Podremos dar clic en la sección de publicaciones, aquí saldrán las publicaciones más relevantes de los usuarios con los que más convives, etc.

Usuarios / Inicio / Sección Publicaciones

Como usuario registrado podrás dar “me gusta”, “no me gusta”, “compartir” sobre una de la publicaciones en los enlaces correspondientes. Ahora iremos a la sección de eventos.

Usuarios / Inicio / Eventos



Un evento es cuando hay suceso a una hora y fecha determinada, por lo cual en esta sección podrás agregar, eliminar y modificar eventos a modo de recuerdo.

Para eliminar bastará con dar clic icono de la tacha sobre el evento que se desea eliminar, para modificar sobre el icono del lápiz y para crear uno nuevo sobre el enlace inferior “Crear nuevo evento”. Ahora iremos a la sección de grupos

Usuarios / Inicio / Grupos

Un grupo es un conjunto de usuarios que comparten las mismas aficiones en un determinado tema. Es por eso que los usuarios podrán crear grupos como unirse a otros que ya fueron creados por otros usuarios. A continuación mostramos la interfaz.

Para acceder al grupo bastará con dar clic sobre la imagen representativa del grupo. Ahora si lo que queremos es crear un grupo propio bastará con dar clic sobre el enlace inferior “Crear grupo nuevo.”



Ahora iremos a la ventana de recomendados

Usuarios / Inicio / Recomendados

Esta sección es publicidad pagada por empresas terceras ajenas a la empresa huella. Es por ello que veras una lista de grupos de empresas creadas en la red social o enlaces web a sitios de terceros.

A continuación visitaremos la sección de favoritos

Usuarios / Inicio / Favoritos

En esta sección por el momento solo se podrán guardar enlaces web favoritos, tal como podría ser el caso de google, o páginas de relevancia.

En esta sección podrás agregar, modificar y eliminar enlaces favoritos, para la primera bastará con dar clic sobre el enlace “Agregar a favoritos” y proporcionar un nombre junto al enlace que



quieres guardar, para las opciones restantes podrás dar clic sobre el icono de eliminar o modificar.

Ahora iremos al muro

Usuarios / Muro

Está es por excelencia la parte más personalizada para el usuario, pues, puede añadir una imagen de portada y de perfil, además de que aparecerán sus publicaciones de forma ordenada de mas nuevas a más viejas.

Para publicar un algo bastará con posicionarnos en el campo ¿Qué estas pensando?, escribir el texto de nuestra publicación y dar clic sobre el botón publicar.

El resultado será el siguiente



En la barra de información que se encuentra debajo de la portada al lado izquierdo, se mostrará la imagen de perfil del usuario, así como su nombre, ubicación y ranking dentro de la red social.

Nos trasladamos a la sección de amigos

Usuarios / Amigos

Aquí podemos ver nuestra lista de amigos actual, y en caso que lo deseemos podremos eliminar a amigo, dando clic sobre la persona y posteriormente haciendo clic sobre la tache.

A continuación la sección fotos

Usuarios / Muro / Fotos



Aquí el usuario podrá crear álbum y editar, eliminar y subir imágenes. Para crear un álbum o subir una fotográfica bastara con ir al enlace de nuevo álbum. Veremos la siguiente pantalla:

Ahora proporcionaremos un nombre para el álbum y seleccionaremos las imágenes que deseemos subir para posteriormente dar clic sobre el botón subir.

Si lo queremos es eliminar un imagen, regresaremos a la sección de fotos y daremos clic encima de la foto a la que queremos realizar dichas acciones.



Una vez abierta está pantalla escogeremos la acción que queremos realizar.

Ahora daremos clic sobre la sección de videos

Usuarios / Muro / Videos

Aquí el usuario podrá editar, eliminar y subir videos. Para agregar un video el usuario tendrá que hacer clic sobre el enlace “Agregar video”.

Una vez hecho lo anterior aparecerá la siguiente pantalla:



Seleccionaremos el video que queremos subir y daremos clic sobre el botón subir.

Ahora, si lo queremos es eliminar o editar un video, regresaremos a la sección de videos y daremos clic encima del video que queremos realizar dichas acciones.

Una vez abierta está pantalla escogeremos la acción que queremos realizar.



Usuarios / Muro / Páginas

Esta es una página personalizada en donde el usuario podrá añadir lo que quiera. Para crear , editar o eliminar páginas personalizadas bastará con dar clic en los respectivos iconos.

Usuarios / Muro / Buscar

Esta página mostrara los resultados de la búsqueda.



Usuarios / Configuración

Si yo deseo cambiar mi configuración, deberé de hacer clic en el enlace de “configuración” de la barra superior en la parte derecha.

Se me mostrar a continuación la siguiente pantalla.

Aquí podre cambiar el color, la visibilidad y la privacidad.

El color: Azul (predeterminado), Rojo, Rosa, Verde. Visibilidad: Que tanto permiso podrán tener los visitantes/usuarios de mis

publicaciones, fotos, videos, etc. Privacidad: Nivel de ocultamiento en el apartado de búsqueda.

Por último daré clic al botón “guardar” para establecer la nueva configuración.


Diseño de Interfaz de Usuario - Red social Huella

Technology

caso de usopginas

caso de usoinicio

caso de usofotos

caso de usoamigos

caso de usovideos

caso de usolista

en caso de

el sistema

Transcript of Diseño de Interfaz de Usuario - Red social Huella

Interfaz con usuario

Manual de Usuario SIGECOF INTERFAZ NEGOCIADORA · MANUAL DE USUARIO SIGECOF INTERFAZ NEGOCIADORA MANUAL DE USUARIO SIGECOF: INTERFAZ NEGOCIADORA Página 5 de 26 E. PROCESO: MÓDULO

Interfaz usuario

Android: Interfaz de Usuario

Identidad, interfaz y usuario

Interfaz de Usuario Tema

Interfaz gráfica del usuario

UX Experiencia de usuario UI Interfaz de usuario.

Interfaz de usuario PowerPoint

Interfaz de Usuario Diapositivas

03 7n2is trabajo-interfaz usuario

Control de la interfaz de usuario

11.interfaz de usuario

Interfaz Gráfica de Usuario

diseño de la interfaz de usuario

Interfaz de usuario gráficaDescripción generada ...

interaccion en el interfaz de usuario

Criterium CyP: Interfaz de Usuario · Criterium CyP Interfaz de Usuario: Versión 201001 1 Uso de Interfaz de Usuario En Criterium CyP todo el funcionamiento del sistema se desarrolla

03 7n1is trabajo-interfaz usuario