sesión 26 reflexión

5:06 p. m. | 0 comentarios

El viernes pasado, fue nuestra antepenúltima clase, se escucha triste pero es la realidad, voy a extrañar la clase, y como dice aquella canción me voy a llevar los mejores recuerdos, memorias pero sobre todo conocimientos muy gratos y valiosos para mi carrera.


En esta clase, nos reunimos por equipo del proyecto de nación, para checar los últimos detalles y agregar lo que nos faltaba.

Para el lunes, ya vamos a tener terminado el blog de personaje en el cual el trabajo escrito se lo vamos a mandar al maestro por mail, pero no solo es eso, ademas exponerlo enfrente de nuestros compañeros, ya que ellos nos van a calificar, también entregar por mail e impreso el proyecto de nación con el cual estuvimos trabajando a lo largo de este último mes.

Solo me cabe darle un grato agradecimiento al maestro por su labor a lo largo del cuatrimestre. Gracias maestro por su dedicación, se lo agradezco de corazón!!! :)

Sesión 26 extraclase

4:55 p. m. | 0 comentarios

PLANO DE SUPERFICIE (surface)

Tipos de Layout:

A continuacion podremos ver como se ven los diferentes tipos de layout dependiendo del q se trae, veremos como poco a poco va tomando forma nuestra pagina.

a)En esta primera imagen podemos ver como es un simple boceto basado en lineas, aquí no nos debemos preocupar por el contenido sino por la estructura congruente. Esto no es mas que un simple boceto tal cual.

b)Después de crear el boceto tenemos que definir las zonas especificas en las cuales irán las imágenes, botones, texto etc. No es mas que marcar las zonas que se utilizaran y las que vas a quedar libres.

c)Después viene la etapa de colocar todos los elementos que tiene acciones dentro de la pagina o fuera de ella, a estos les llamamos botones. y se colocan en esta etapa.

d)Ya por ultimo y antes de entregar nuestro template debemos ubicar las imágenes y textos en las zonas previamente marcadas y respetar estas dimensiones.

En este ejemplo podemos ver como una subpagina esta muy parecida, a pesar de que sufre algunos cambios esta dentro de la estructura, así es como a los usuarios se les hace mas fácil navegar dentro de la pagina. Esta pagina esta linkieda por el enlace de municipio y dentro de ella contiene mas información independiente.

En esta área colocamos en nombre de nuestro sitio ya que es importante que este asignado en en lugar importante.

Aqui podemos ver como el buscador esta colocado en la parte superior par que se mas fácil para nuestro usuario verlo al momento de ingresar.

En esta área están colocadas diferentes link hacia otras paginas de la misma organización.

Esta área fue asignada para únicamente poner imágenes.Por esto mismo ocupa una mayor dimensión que las demás áreas.

Aquí podemos ver como estas colocados algunos botones con acciones independientes de  la pagina.

sesion 26 reflexion

11:53 a. m. | 0 comentarios

El viernes pasado fuimos a una visita a la ciudad de México, en lo personal me gusto mucho ya que aprendimos cosas relacionadas con nuestra carrera, lo único malo fue el trafico y que llegamos muy tarde y que me pico un bicho extraño y me saco una roncha enorme pero bueno todo es parte de la diversión y el aprendizaje.

sesión 25 extraclase

5:17 p. m. | 0 comentarios

PRINCIPIO ESQUELETO


Nuestro domi de la pagina seria algo como esto

sesión 25 extraclase

4:31 p. m. | 0 comentarios

PLANO ESQUELETO

1 Diseño de navegación

* Mapa de sitio: este mapa nos indica las paginas interiores de nuestro sitio , así de cómo están organizadas entres.
* Navegación Global: esta opción nos permite estar dentro de la pagina y poder entra a cualquier pagina que tenga un enlace dentro del sito, esto es muy eficaz y agradable para los usuarios. Es bastante eficaz.
* Navegación local: esta opción nos permite estar dentro de la pagina y poder entra a cualquier pagina que tenga un enlace dentro del sito siempre y cuándo estén dentro de alguna sección en especial o una misma categoría.
* Navegación Suplementaria: es un atajo dentro del sitio asi podemos navegar de forma directa sin importar donde estemos o la pagina anterior.
* Navegación contextual: dentro de la margina encontramos link que tienen el nombre del sitio al cual podemos llegar sin tener que estar bajando de secciones.
* Navegación de cortesía: Se refiere a la ayuda o búsqueda extra.

2 Diseño de interfaz

Patrones de usuario

* Safe exploration

Se refiere a que nuestros usuarios puedan navegar de forma segura y confiable sin tener algún problema


* Instant gratification

Los usuarios van a tener la ventaja de encontrar de manera eficaz y eficiente lo que necesiten.


* Satisfacing

Los usuarios van a poder satisfacerse de rápidamente encontrado la información que requieran en el menor tiempo posible.


* Changes in midstream

Nuestra pagina va a permitirle a nuestros usuarios regresar a la opción donde estaban anteriormente si estos cambian de opinión y de esta manera no tendrán algún problema.


* Deferred choices

El usuario va a poder contestar o completar opciones dentro de la navegación.


* Incremental construction

En este caso no vamos a obligar a nuestros usuarios a una secuencia de pasos como en otros lugares, ya que va permitirle al usuario poder navegar de forma flexible y segura.


* Habituation

Nuestra pagina va a estar diseñada de la manera en que el usuario pueda seguir utilizando las acciones a las cuales esta acostumbrado.


* Spatial memory

El usuario recuerda más el lugar de donde están las cosas que el nombre o símbolo de la función, por eso es que pondremos opciones y lugares que siempre recuerde.


* Prospective memory

Al usuario le gusta que le estén recordando donde se encuentran las cosas y las secciones.


* Streamlined repetition

Nuestra página va a contar con una opción únicamente para recordar al usuario tareas, datos, información,etc que ya se le han proporcionado.


* Keyboard Only

Nuestro sitio va a dar alternativas de shortcuts.


* Other people advice

Nuestra página va a tener enlaces a redes sociales y blogs para que pueda conocer la opinión y comentario de otros usuarios sobre el sitio.

Patrones de contenido

- Taxonomía
* Lista de acciones de esta manera el usuario va a poder decidir en que quiere hacer dentro de la pagina.

- Estructura
* One window paging para que de esta manera sea mas cómoda la navegación dentro del sitio y pueda estar navegando el usuario dentro de la misma ventana sin que se le abran nuevas.
* Pop up windows cuando quiera el usuario ver una imagen o alguna otra como información cosa se abrirá en grande en una ventana pop up.

- Físico
* One window drill down la pagina ira bajando y tendrás que mover la barra lateral para ver lo que esta abajo

- Conceptuales
* Wizard por si llegara el caso en que tenga que llenar una serie de pasos para algo
* Intriguing branches tendremos hipervinculos para enlazar al usuario con otras paginas relacionadas con el tema
* Multilevel help abra una sección especial y únicamente diseñada para AYUDA en caso de que el usuario la requiera


Patrones de navegación

- Trama

* Clearentry points nuestra pagina tendrá como ya hemos mencionado anteriormente puntos de entrada

* Global navegation también tendrá botones globales


- Señales

* Color coded section nuestra pagina se dividirá por secciones y cada sección tendrá un color diferente para que lo puedan identificar.


Page layout

PRINCIPIOS

- Jerarquía visual

* Esquina superior izquierda

* Espacio en blanco para dar orden y se entienda mejor el mensaje

* Fuentes congruentes será una fuente formal ya que nuestra segmentación es de 45-55 años

* Colores y contrastes son muy importantes ya que así pueden identificar mejor las secciones

* Subordinación tener ordenados los títulos y subtítulos de las secciones

* Formas y grupos utilizaremos algunas formas geométricas ya que estas ayudan a agrupar


- Flujo

Nuestra pagina tendrá un gran flujo visual para que pueda trabajar bien los usuarios


PATRONES

- Jerarquía

* Center stage el escenario va a estar centrado y blanco a las orillas


- Agrupación

* Closable panels los paneles del menú se van a abrir y cerrar

* Tittle sections las secciones van a contar con un titulo y por consiguiente por un subtitulo


- Flujo

* Left/right alignment todo va a estar justificado a la izquierda


- Dinámicos

* Responsive disclosure se va a abrir una ventana nueva de acuerdo a lo que se requiera

* Liquid layout

sesion 25 extraclase

4:16 p. m. | 0 comentarios

PLANO ARQUITECTURA

1 Aproximación
*Estética, ya que la función principal de nuestra pagina es llamar la atención de nuestros usuarios para que de esta manera entren al sitio y naveguen dentro de el y así puedan obtener lo que están buscando y satisfagan sus necesidades.

2 Principios organización
- Taxonomía
*Lista de acciones de esta manera el usuario va a poder decidir en que quiere hacer dentro de la pagina.

- Estructura
* One window paging para que de esta manera sea mas cómoda la navegación dentro del sitio y pueda estar navegando el usuario dentro de la misma ventana sin que se le abran nuevas.

*Pop up windows cuando quiera el usuario ver una imagen o alguna otra como información cosa se abrirá en grande en una ventana pop up.

- Físico
* One window drill down la pagina ira bajando y tendrás que mover la barra lateral para ver lo que esta abajo

- Conceptuales
*Wizard por si llegara el caso en que tenga que llenar una serie de pasos para algo

*Intriguing branches tendremos hipervinculos para enlazar al usuario con otras paginas relacionadas con el tema

*Multilevel help abra una sección especial y únicamente diseñada para AYUDA en caso de que el usuario la requiera

Sesión 24 extraclase

8:53 p. m. | 0 comentarios

PLANO DE ESTRUCTURA
Es el diseño de interacción, es decir como interactua el usuario con el sitio.

1 Modelo Conceptual

-Metáfora (falta armarla bien)

*Modelo Físico nuestro sitio va a tener el patrón de one window paging, para que sea más cómodo para los usuarios y siempre se navegue dentro de la misma pagina.

*Formas de navegación nuestra pagina va a estar constituida por botones, algunos globales y otros serán clear entry points, etiquetas o tags, un menú principal.

*Planos nuestro sitio estará con pop ups, los cuales van a estar en el menú y cada vez que el usuario se coloque en el botón con el cursor se va a abrir y cerrar esa sección.

2 Manejo de Errores

*Prevención la interfaz va a estar sumamente bien diseñada y clara, para que de esta forma no se pierda en ningún momento el usuario al estar navegando dentro de ella, otra razón es para que desde el primer momento que entre sepa manejarla bien y entenderla

*Recuperación cuando el usuario se pierda, pueda regresar fácilmente al menú principal, o a la sección donde se encontraba.

*Errores de usuario se refiere a la búsqueda vacía, llenado de formato, y selección fuera de secuencia

*Errores del sistema son todos los missed links, programas o fuentes adicionales que no están instaladas como adobe acrobat, flash, entre otros.

3 Ubicación

*Identificación del sitio
*Nombre de la pagina (estamos decidiendo)
*Navegación persistente son todas las secciones y subsecciones con las que va a contar la pagina
*Indicador estas aquí
*Búsqueda va a tener una barra de búsqueda, para que el usuario pueda buscar lo que necesite

4 Búsqueda

*Mapa del sitio
-gráficos o hipertextos
-detallado general

*Motor de búsqueda de nuestra pagina va a hacer:
-exacta
-dinámica
-con categorías los cuales son los filtros

5 Lenguaje de cursor
*Cambio forma de cursor cada vez que el usuario le de click a una opción de cualquier lugar, el cursor va a cambiar de forma.

*Cambio del área (click) a su vez, cuando le de click, va a escucharse un sonidito el cual después lo vamos a decidir.





Suscribirse a: Entradas (Atom)