universidad don bosco facultad de estudios tecnologicos escuela de

UNIVERSIDAD DON BOSCO
FACULTAD DE ESTUDIOS TECNOLOGICOS
ESCUELA DE COMPUTACION
CICLO 01-2015
GUIA DE LABORATORIO Nº 10
Nombre de la práctica: Prototipado de una web.
Lugar de ejecución: Laboratorio de Informática
Tiempo estimado: 2:30 horas
Materia: Introducción a Internet
I. OBJETIVOS
Que el estudiante:
1. Comprenda que son los diseños web adaptativos.
2. Utilice mockups para optimizar el proceso de desarrollo en múltiples dispositivos.
II. INTRODUCCION TEORICA
¿Qué es un prototipo?
Es la simulación o modelo que representa el aspecto propuesto del producto o servicio diseñado.
Sirven para aproximar aproximar conceptos de experiencia al usuario, test de interacciones con
usuarios, etc.
Puede ser tan sencillos como unos simples bocetos o tan Complejos como el producto final casi
acabado.
Tipos de prototipos web.
Hay varios tipos de prototipos, y no todo el mundo llama igual a las mismas cosas. Así tenemos
esquemas de página, wireframes, prototipos, mockups, bocetos, sketches, diagramas… etc.
1. Sketching, para dibujar todo el sitio web, los procesos y las relaciones
entre pantallas (sólo papel).
2. Wireframing, para dibujar con un cierto nivel de detalle las pantallas,
sus esbozos de contenido, las llamadas a la acción y en general la
disposición física de los elementos (papel o digital).
3. Prototipado, para diseñar y ejecutar la interacción entre las pantallas
que componen los procesos (sólo digital).
Con esto no se quiere decir que sea la única forma correcta de llamarlos, ni que no pueda
utilizarse otra nomenclatura, en especial si se adapta mejor al tipo de proyecto que estás
realizando. Hay también otros tipos de diagramas que pueden utilizarse para un desarrollo web,
como los de procesos, storyboards, de datos, etc.
Prototipo navegable realizado en Axure, de Jim Callender
Si el diseño va a ser responsive (adaptable a múltiples dispositivos) es conveniente diagramar
las diferentes pantallas al menos en tres vistas: PC, tablet y smartphone. De este modo el cliente
sabrá cómo va a verse su sitio web en cada dispositivo desde un primer momento.
Cuando utilizar cada uno
Depende de en qué fase del proyecto estás, y el tiempo que puede dedicarse.
Scketching
Normalmente, siempre hay una fase inicial en la que hay bastante indefinición. Aquí hacer
sketching (diseños muy esquemáticos en papel) suele ser lo más útil, ya que permite la
participación del cliente y ayuda a centrarlo en la jerarquización de contenidos sin entrar a otros
detalles (sobre un boceto de este tipo no debe haber consideraciones acerca de imágenes,
tipografía o colores).
wireframing
En la fase de wireframing ya se ha definido una estructura general, y se entrega una maqueta
de más fidelidad. Suele servir para validar y confirmar aspectos que ya se han hablado
previamente, por lo que no debería ser necesario realizar grandes cambios aquí.
Hay que decir que un wireframe sigue sin ser un diseño acabado, ya que en esta fase aún no
hemos entrado con colores ni fuentes. Pueden mostrarse ya imágenes (aunque no tienen por
qué ser las definitivas). Lo importante aquí es tener ya los textos definitivos, pero no debe haber
color (todo en escala de grises), ni diferentes tipografías (una sans-serif para todo).
Lo importante de esta fase es que se apruebe la organización de contenidos (esto ya debe estar
casi listo de la fase anterior), y que los textos sean los definitivos y estén en su sitio.
Prototipado
El prototipado debe llevarse a cabo cuando vamos a evaluar la interacción, y sirve para definir
aspectos que no quedan claramente reflejados en un boceto de papel o un wireframe no
navegable. Los prototipos son navegables, por lo que sirven para testear elementos de
interacción como estados hover de botones, validación de formularios, iconos, o cualquier
elemento con el que el usuario cuando interactúe.
Es una fase que puede obviarse en algunos proyectos (si vas a publicar un blog o una sencilla
página informativa, probablemente no necesites un prototipo), pero que resulta de gran utilidad
en otros, como apps, videojuegos, formularios largos, etc.
La gran ventaja de un prototipo es que puede utilizarse para hacer tests de usuarios antes de
tener hecho el desarrollo completo del producto. Esto, en el caso de las apps, o de startups que
estén comenzando su proyecto, es una ventaja inestimable, ya que permite refinar la interfaz
en base a datos objetivos. Esto ahorra horas de desarrollo, ya que son necesarias menos
versiones de la aplicación. Al probar con usuarios antes de estar desarrollada, tienes mucho
feedback y sabes lo que funciona antes de escribir el código.
Hay infinidad de programas con los que puedes hacer un prototipo navegable (o puedes
maquetar en HTML+CSS, si vas a reutilizarlo luego en el proyecto), pero a veces no es necesario
llegar a desarrollar esto; también puede hacerse sobre prototipos en papel.
El objetivo del prototipo es hacernos más fácil, la adaptabilidad de nuestros sitios web, a los
diferentes terminales de donde podrá ser vista nuestra página. Al momento de pensar en
prototipo debe considerar las diferentes área de trabajo que tendremos refiriéndonos a las
medidas que tiene cada dispositivo, así no tendremos problemas después, al momento de hacer
nuestro producto basado en los wireframe.
Resoluciones para móviles, tablet y monitores.
moqups, la aplicación para wireframes
Moqups es una ingeniosa aplicación en HTML5 que se utiliza para crear wireframes , maquetas
o conceptos de interfaz de usuario , prototipos dependiendo de lo que se desee crear.
Vista de moqups en el navegador.
Estas son algunas herramientas que nos ofrece moqups:
Herramienta
Descripción
Representa notas dentro
de la web.
Herramienta
Descripción
Control checkbox
Representa cajas de
contenido.
Control Radio button
Encabezado o títulos
dentro de la página.
Representación de botones.
Textos dentro de la
pagina
Representación de lista de
selección.
Para crear párrafos
dentro de la página.
Cuadros de ingreso de texto
Representación de un
vínculo en la página.
Cuadro de ingreso de áreas de
texto.
Lista de vínculos en la
página.
Control con rango de números.
Grilla de datos en la
página.
Barra deslizable.
Barra de progreso dentro
de la página.
Imagen de perfil dentro de la
página.
Línea diagonal
Imagen de iconos dentro de la
página.
Línea Horizontal.
Imagen de mapa presentado en
la página.
Línea Vertical.
Representación de banner.
Gráfico de pastel dentro
de la página.
Barra de búsqueda web.
Imágenes dentro de la
página.
Ranquin de calificación por
estrellas.
Navegador web.
Representación de menús
horizontales.
Ventanas emergentes.
Representación de calendarios.
Deslizador de página
vertical.
Representación de video en
página.
Deslizador de página
horizontal.
Representación de audio en
página.
Lista de menú vertical.
Formas básicas.
Representación de
móviles.
Representación para Tablet.
III. MATERIALES Y EQUIPO
N
1
Cantidad.
1
2
3
1
1
Descripción
PC con Windows XP con uno de los editores de páginas Web: PHP Designer
Personal, Notepad ++, BlueFish y HTML Kit y cualquiera de los navegadores
siguiente: Internet Explorer 8 u 9, Firefox (última versión disponible), Google
Chrome (última versión disponible), Opera (última versión disponible), Safari
(última versión disponible), Netscape (9.0.0.6)
Guía de Laboratorio #10 de Introducción a Internet
Memoria USB.
IV. PROCEDIMIENTO
INDICACIONES GENERALES
1. Escribir la siguiente url: https://moqups.com en su navegador.
2. Cargara la siguiente página:
3. Dar clic en Log in, aparecerá la siguiente ventana donde seleccionaremos No
account? Create one now?
4. Completar el siguiente formulario con sus datos, y dar click en Create account:
5. Nos aparecerá una ventana de plan de pagos para poder realizar y almacenar
proyectos en moqups, en este caso usaremos el plan gratuito, que nos deja
almacenar dos proyectos y nos da almacenamiento de 5MB, por lo tanto daremos
clic en upgrade later.
6. Podremos observar la siguiente pantalla de bienvenida de moqups, damos clic en
cerrar y podemos empezar a utilizar la herramienta.
Ejercicio #1: Wireframe de Aula digital Chamilo
1. Eliminar todos los elementos que se encuentra en el área de trabajo. Deberá verse de
la siguiente manera:
2. Cambiaremos el tamaño del área de trabajo, ya que realizaremos un wireframe para
una desktop de resolución 1280x400 px. Daremos clic en settings como se muestra en
la siguiente imagen.
3. Arrastrar la herramienta browser al área de trabajo y cambiar las siguientes propiedades
como se muestra en la imagen.
4. Colocar las siguientes herramientas con sus respectivas propiedades:
nombre
Texto
Propiedades
Placeholder
Left: 105, top:63, Width:68 y
image
Heigth:71
Label
Aula digital
Left: 185, top:90, Width:67 y
Heigth:18
Horizontal menu
Principal
Left: 105, top:162, Width:1055 y
Heigth:47
Rectangle/Box
Left: 105, top:220, Width:240 y
Heigth:266
Combo box
Español
Left: 129, top:237, Width:124 y
Heigth:24
Label
Nombre de usuario:
Left: 129, top:273, Width:126 y
Heigth:18
Text input
Left: 129, top:300, Width:200 y
Heigth:23
Label
Text input
Button
Rectangle/Box
Label
Label
Label
Horizontal Line
Rectangle/Box
Placeholder
image
Label
Label
Star ratings
Label
Button
Rectangle/Box
Placeholder
image
Label
Label
Star ratings
Label
Button
Rectangle/Box
Contraseña
Left: 129, top:338, Width:74 y
Heigth:18
Left: 129, top:365, Width:200 y
Heigth:23
Entrar
Left: 129, top:416, Width:77 y
Heigth:28
Left: 105, top:416, Width:77 y
Heigth:28
General
Left: 129, top:523, Width:55 y
Heigth:18
Forum
Left: 129, top:552, Width:42 y
Heigth:18
Cursos mas populares
Left: 380, top:237, Width:143 y
Heigth:18
Left: 376, top:256, Width:784 y
Heigth:12
Left: 376, top:268, Width:784 y
Heigth:160
Left: 394, top:305, Width:95 y
Heigth:86
Introducción a la internet
Left: 507, top:305, Width:198 y
Heigth:23
Tamaño de letra: 18
Hernández, Evelyn Lissette
Left: 507, top:324, Width:173 y
Heigth:18
4/5
Left: 507, top:344, Width:90 y
Heigth:16
23 Votos | 137 Visitas | Left: 507, top:360, Width:326 y
Promedio 3.7/5 | Su voto [?] Heigth:18
Descripción
Left: 507, top:383, Width:113 y
Heigth:30
Left: 376, top:434, Width:784 y
Heigth:160
Left: 394, top:471, Width:95 y
Heigth:86
Introducción
a
la Left: 507, top:305, Width:198 y
programación
Heigth:23
Tamaño de letra: 18
Tejada Tobar, René Mauricio Left: 507, top:495, Width:590 y
Heigth:13
| Martinez, Marvin |
Caceres, Laura | Díaz, Gloria Tamaño de letra:10
| Calderon, Guillermo |
Canas Abarca, Blanca Iris
4/5
Left: 507, top:510, Width:90 y
Heigth:16
23 Votos | 137 Visitas | Left: 507, top:526, Width:326 y
Promedio 3.7/5 | Su voto [?] Heigth:18
Descripción
Left: 507, top:549, Width:113 y
Heigth:30
Left: 0, top:665, Width:1280 y
Heigth:135
Label
Label
Responsable
:
Romero,
Edgardo Alberto
Plataforma Aula Digital ©
2015
Left: 903, top:712, Width:257 y
Heigth:18
Left: 966, top:731, Width:194 y
Heigth:18
5. Para visualizar el proyecto debemos dar clic, Share & Preview(
Preview.
6. Deberá poder ver la siguiente imagen.
), Click en opción
Ejercicio #2: Wireframe de Pagina UDB
1. Crear nueva página, dando clic en pages y luego en la cruz como muestra la siguiente
imagen:
2. Ingresar a chamilo y buscar el módulo de introducción a la internet, realizar el wireframe
de la siguiente pantalla en la página creada en moqups:
3. Al finalizar deberá visualizar el proyecto debemos dar clic, Share & Preview(
en opción Preview y debe mostrárselo a su docente el wireframe terminado.
), Click
VI. INVESTIGACION COMPLEMENTARIA
Presentar un documento pdf con los siguientes puntos solicitados:
1. Investigar sobre 2 herramientas libres para preparar mockup, dar una breve descripción
de cada uno de ellos.
2. Preparar un mockup para la página principal de la universidad en una de las
herramientas investigadas y colocar la imagen del mockup en el documento.