INSTITUTO TECNOLÓGICO

DEL VALE DE OAXACA

MATERIA:
CÓMPUTO EN LA NUBE

DOCENTE:
RIMEREZ SANTIAGO BENEDICTO

ALUMNOS:
ANA CELINA MORENO FLORES
LUIS DANIEL PEDRO BOHORQUEZ
FRANCISCO USIEL PEREZ
PACHECO

MATRICULAS:
18920039, 18920044, 18920047

GRUPO:
10 ° B

CARRERA:
INFORMÁTICA

TRABAJO:
REPORTE WIREFRAME
 INDICE

INTRODUCCION ...................................................................................................................................... 2

RECURSOS UTILIZADOS ........................................................................................................................... 2

DESARROLLO DE LA INSTALACION ........................................................................................................... 4

DESARROLLO DEL DISEÑO ....................................................................................................................... 8

CONCLUSION ........................................................................................................................................ 12

BIBLIOGRAFIA ...................................................................................................................................... 12
 INTRODUCCION
El desarrollo de un sitio web hoy en día es algo muy común si estamos en el área de la informática,
el desarrollo de dichos sitios día con día se vuelve más exigente, es importante que como
informáticos estemos preparados para cumplir con las expectativas de nuestros clientes, el
desarrollo de un sitio web es un proceso y como todo proceso este tiene un momento en el que se
debe de diseñar como se tendrá que ver el producto final, para lograr esto en el ámbito web
recurrimos a desarrollar algo conocido como WireFrame. El WireFrame nos permite desarrollar a
libertad un esquema de como se vera nuestro sitio web, sus características y también su
funcionalidad, existen muchas herramientas para desarrollar un WireFrame pero en este caso se
utilizo Eclipse IDE al cual se le instalo un plugin llamado WireframeSketcher que como su nombre lo
dice nos permite crear WireFrames.

RECURSOS UTILIZADOS
• ECLIPSE IDE 2022
• WIREFRAMESKETCHER 6.4.1
 DESARROLLO DE LA INSTALACION

1. Para iniciar con este proceso es importante ya tener ejecutando ECLIPSE IDE en nuestro ordenador, lo
primero será ir a la pestaña de HELP y ahí buscaremos la opción de INSTALL NEW SOFTWARE.

2. Se abrirá una nueva ventana en donde daremos clic en la opción ADD y a continuación se muestra una
nueva opción que nos pide dos datos un nombre y una URL, procedemos agregando un nombre, puede ser
cualquiera
3. Para obtener la URL debemos de ir a la pagina oficial de nuestra herramienta que nos permitirá crear el
WireFrame en este caso accedemos a la pagina de https://wireframesketcher.com/download.html y
copiamos el link que nos brinda en la opción de Eclipse plug-in.

4. Procedemos a instalar esta herramienta en nuestro ECLIPSE, este proceso puede tardar algunos minutos,
todo dependerá de nuestra conexión a internet.
5. En este paso lo único que tenemos que hacer es aceptar loa términos y condiciones para poder utilizar el
programa y posteriormente daremos clic en finalizar.

6. Podemos comprobar la instalación buscando en la opción de perspectivas.

 DESARROLLO DEL DISEÑO

7. El primer paso en este proceso será crear un nuevo proyecto, para eso damos clic en File, posteriormente
en New y por último en WireFrame Project.

8. Para empezar con el WireFrame lo primero será crear la interfaz principal, esta herramienta nos ofrece
unos componentes que facilitan el diseño de nuestra interfaz.
Para este diseño se decidió utilizar un menú vertical colocado en la parte izquierda, esto solo por
estética, la primera interfaz tiene como propósito ser un catálogo de imágenes que muestren o den a
conocer en lo que consiste el tema, en este caso la Guelaguetza.
La página tendrá 4 opciones plasmadas en un menú, cada opción estará vinculada a su respectiva
plantilla.
Procedemos a diseñar las otras interfaces de nuestro sitio web.
9. La segunda interfaz tiene el propósito de mostrar un poco de la historia del tema de la página, en este
caso de la Guelaguetza.
Podemos observar aquí que la intención es que el menú y su contenido no cambie.
Agregamos labels que nos permitirán ingresar texto y posteriormente ahí podremos información
sobre nuestro tema que es la Guelaguetza.
Es importante que cada nueva pestaña siga conteniendo el mismo menú para que así se pueda navegar sin
problemas en la página web. Es importante que desde el diseño quede especificado también como debe de
funcionar la página web ya que el diseño es la guía para el desarrollo de la página web.
10. Ahora lo que se diseñará será nuestra otra interfaz que forma parte de nuestro menú y que tiene como
finalidad mostrar algunas de las actividades que se pueden realizar durante el evento y algunas otras extras.
Como en el screen principal este también actuara como un catalogo que muestra diversas
actividades, con la diferencia de que este no solo tendrá imágenes si no que ya se le implementara
texto, esto con la finalidad de variar en el diseño de nuestra página web.
Como en los anteriores screens es importante que el menú siga siendo el mismo y con los mismos
vínculos.
11. Esta pestaña se diseño con la finalidad de que los usuarios que interactúen con la pagina puedan tener
más información o algún comentario. Siempre es importante que en una página web cuente con una opción
de contacto.
Se implementaron campos de texto en donde se podrá ingresar el correo, el asunto del mensaje y
posteriormente el contenido del mensaje y un botón para enviar.
También se diseñaron íconos que permitirán redireccionar a las distintas redes sociales.
 CONCLUSION

A modo de conclusión puedo decir que el desarrollo de un WireFrame es muy importante ya que
permite a los desarrolladores tener una perspectiva clara y precisa de como debe de quedar el sitio
web, existen muchas herramientas que nos permiten diseñar nuestro WireFrame a voluntad pero
la que se escogió en esta ocasión considero que es muy fácil de utilizar, brinda muchas opciones de
diseño para poder implementar a nuestro esquema. Es muy importante que en nuestro WireFrame
ya queden plasmadas todo tipo de acciones que tendrá nuestro sitio web para que no quede nada
a la imaginación a momento de codificar el sitio.

BIBLIOGRAFIA

Assistant Secretary for Public Affairs. (2020, 10 noviembre). Wireframing | Usability.gov.

WireFrame. Recuperado 15 de abril de 2022, de https://www.usability.gov/how-to-and-
tools/methods/wireframing.html
L. (2020, 14 mayo). What Are Wireframes? | Wireframing Academy | Balsamiq. WF. Recuperado 15
de abril de 2022, de https://balsamiq.com/learn/articles/what-are-wireframes/

W. (2021, 5 octubre). Download WireframeSketcher - WireframeSketcher. WireFrameSketcher.

Recuperado 15 de enero de 2022, de https://wireframesketcher.com/download.html