Extra clase sesión 18

Ejemplos:

Patrones de agrupación

Closable Panels:

en este programa podemos ver como al dar clic visualizamos los paneles y sus herramientas, así nosotros decidimos el uso o la personalización de estas.

Movable Panels

en la aplicación de myspace con las nuevas actualizaciones tenemos la opción de elegir los paneles que  sean importantes para nosotros y si no las queremos simplemente las desactivamos, podemos elegir la mas adecuadas para nosotros como usuarios.

Patrones de flujo

Left-right alignmen

en la pagina de mercado libre podemos ver como esta alineada al centro perfectamente para así dar un buen balance.

Diagonal balance

nos damos cuenta que al trazar una linea diagonal el contenido queda dividido en proporciones iguales como lo dice nuestro patron.

Patrones dinámicos

Responsive disclosure

nos marca una serie de datos que solo son obtenidos después de introducir información cierta o falsa.

Responsive Enabling

Anuncios

Sesión 18

En esta clase nos dimos a la tarea de ver los tipos de patrones de agrupación  que son de gran importancia apara que sea mas agradable para las personas que lo visitan.

Patrones de agrupación

Closable Panels: este tipo de patrón se refiere a los enlaces dentro de una misma pagina principal, es decir que si tenemos algún botón u objeto y damos clic se abre una pequeña ventana que nos muestra la información de esta, o las herramientas de esta.

Movable Panels: esta opción nos permite elegir las ventanas que nosotros prefiramos visualizar o simplemente las que mas nos agraden, es dar la opción de elección de paneles  al usuario.

Patrones de flujo

Left-right alignment:Se refiere a la alineación de una página web en el campo visible par el usuario.

Diagonal balance:Cuando el equilibrio de la composición de la página, debe tener la misma proporción de un lado que del otro.

Patrones dinámicos

Responsive disclosure: Se abre el contenido por completo otorgando una respuesta de acuerdo a la opción que previamente tu seleccionaste.

Responsive Enabling:Se abren más opciones desde la inicial elegida.

Liquid Layout:Al minimizar y/o maximizar la ventana de una página web, el contenido mas importante es el que va permaneciendo según el tamaño de la ventana.

Sesión 17

Patrones de Disposición

Este tipo de pratones que es muy variado dependiendo del tipo de pagina en la cual este navegando, esto es algo que se tiene que adaptar aun más con el usuario, el maestro nos explico sus características y como es que se aplican.

este tipo de patrones se divide principalmente en tres categorías: Flujo, Jerarquía y Agrupación

1)Jerarquía visual: es poner un orden, en el espacio, dependiendo de su importancia.

-Esquema superior izquierda: se llama así ya que al momento de abrir alguna pagina automáticamente el ojo humano va directo a la esquina superior izquierda ya que el estamos acostumbrados así, este sitio es el de mas importancia en as paginas web o lo debería de ser.

-Espacios en blanco: muchas personas creen que al dejar mucho espacio en blanco se pude ver aburrido o simple pero lo que en verdad refleja es un orden de elementos, a pesar de contener pocos graficos.

-Fuentes: Pues creo que esto ya sabemos de que se trata, es resaltar ciertas palabras con una fuente mas pesada o una diferente, esto para destacar el texto y así darle mayor jerarquía e importancia.

-Colores y contrastes: Es el hecho de poner diferentes colores dependiendo de el tipo de texto que se trate, por ejemplo un titulo, subtitulo o información , si le pones diferentes colores es mas fácil reconocer y ver su importancia.

-Subordinación: dar un orden en tu información dependiendo de la importancia del texto.

2)Flujo: se refiere a como la información esta distribuida y como podemos verla.

-Agrupación:

-Proximidad: es saber ubicar la información y si es que esta se conecta, es poder guiar al usuario de un texto a otro dependiendo si esta cerca o no, es una guía para que la información fluja.

-Similaridad: esto se puede ver el los botones que tienen una forma en especial y así sabemos que todos los botones con esa forma realizaran una función igual, es relacionar funciones con objetos.

-Cierre: El ojo humano tiende a cerrar las formas y asi es como el ojo humano puede cerrar varias cajas de texto un alguna figura, pero estas tienen que tener alguna relación congruente.

-Continuidad:Objetos similares tiene una conexión y un fin en especifico.

3)Agrupación:

-Visual Framework:es igual que el acomodo de objetos pero para diferentes usuarios

-Central stage: la pagina siempre se carga en la esquina superior izquierda, así que debemos considerar eso en nuestro diseño.

-Title section: definir el titulo de cada sección dependiendo su importancia.

-Cards stage: es cuando te creas una pagina donde los enlaces serán por medio de imágenes llamadas cards que son botones para otras ventanas.

Sesión 16

Reflexión :

En esta sesión le toco el turno de exponer al ultimo equipo y como es costumbre en las exposiciones nos dieren una breve introducción a la web 2.0 para poder de lleno a lo que era su tema ” Aplicaciones de tipo colaborativo ”  que es el tipo de aplicaciones que permite que mas de una persona trabajen a la vez o en el mismo proyecto, nos explicaron como las personas han ido cambiando su forma de trabajar, de como antes se tenían que reunir en bibliotecas, tenían que estar todos presentes pero que esto ahora es mucho más fácil a gracias a las aplicaciones colaborativas,  esto se puede ver en el tipo de trabajos que nosotros mismo realizamos, en primera todo se ponen de acuerdo por medio del msn y a l momento de trabajar o subir tus archivos es un problema, pero este equipo nos dio la opción como basecamp que es una aplicación de tipo colaborativo que nos permite subir y descargar archivos bastantes pesados, esto es bastnate útil ya que todo el trabajo se pude realizar por la web y no tienes que estar en persona. Así nos damos cuenta de como la web ha cambiado el método de trabajo en equipo.

En la segunda sesión tuvimos un invitado, un diseñador gráfico con mucha experiencia en el campo laboral, el ha pasado por muchos cambios de diseñador tradicional a lo que se la multimedia, nos hablo un poco de su trayectoria, sus trabajos, de donde ha trabajado pero mas importante nos hablo de el contacto directo con los cliente que el como freelance , nos hablo de como al momento de estar con tu cliente tienes que estar sujeto a ciertas cosas que el cliente esta proponiendo, no hablo de el factor terrorífico que todos nosotros estaremos en contacto, con esto se refería que aveces en trabajos los cliente quieren poner algo de ellos, sus ideas, dibujos, cualquier cosas dentro de el diseño q realizar, nos dice que tenemos que estar preparados para enfrentarnos con esto y poder evitarlo si es posible.

Para finalizar nos mostró 2 paginas que hizo hace algunos años a un fotógrafo  y como al realizar esta pagina le dieron muchas libertades, pero la pagina tenia que reflejar al fotógrafo y sus cualidades, así es como realizo un interesante trabajo, de esta misma pagina realizaremos nuestro trabajo para este parcial.

sesión 15 análisis

Es la pagina  de un fotógrafo muy renombrado  y he decidió hacer mi análisis sobre su pagina web.

*Como podemos ver esta pagina esta hecha sobre una plataforma framework ya que su diseño es bastante simple y peculiar, me parece bastante original.

*El tipo de pagina esta claramente enfocado en al Publicación ya que el autor de la pagina nos muestra fotografías.

Continuando con el análisis toca el turno de los Patrones de Uso

SAFE EXPLORATION creo que cumple con este patron de uso ya que va guardando nuestra navegación y con el hecho de dar atrás nos lleva a la pagina anterior sin ningún problema.

NSTANT GRATIFICATION es otro patron con el cual cumple ya que no tarda nada en mostrar los gráficos completos ya que son exactos para una navegación mas rápida, no tenemos que ser miembros para ver la pagina completa.

Continuamos con la Organización de contenido, en esta pagina podemos ver que toso esta organizado por lista de acciones y objetos ya que dentro de la lista tienen una acción la cual te manda directamente a un objeto, en este caso una fotografía.

One window drill down Muestra la aplicación en una y única  ventana

-Estrutura: de acuerdo a su estructura se pudee poner en la clasificación de One window paging ya que te abre otra pagina dentro de la misma ventana de navegación, sin abrir otras nuevas.

Patrones de navegación

Global Navigation:  este tipo de navegación de esta pagina ya nos podemos dar cuenta que se basa  principalmente en los botones que te llevan a enlaces dentro de la misma pagina,son botones globales dentro de la misma pagina para poder navegar en las secciones.

Podemos ver como los botones son de texto y te llevan otro enlace dentro de la misma pagina:

Por ultimo pero no menos importante veremos que tipo de Señales utilizan dentro, en esta pagina podemos ver que se estan utilizando las señales Bread crums ya que en una barra interior nos va marcando en cual estamos y si queremos regresar a la pagina anterior.

Ahora que finalizamos de analizar esta pagina me doy cuenta que contiene una serie de patrones, señales, organización que nos dan otra forma diferente de ver la pagina.

Sesión 15

Esta sesión cono seguimos con el tema de las exposiciones le toco el turno al tema de “aplicaciones para compartir contenido”, antes de entrar de lleno con el tema nos dieron una pequeña introducción de como el internet nació así como ha ido evolucionando desde su creación, nos platicaron a grandes rasgos lo que es la web 1.0  y sus principales características de la interfaz que maneja con los usuarios que es lo mas importante, algo muy claro es que la web 1.0 solo era de lectura y no podías tener contacto directo con esta, pasando posteriormente a lo que se conoce como la web 2.0, que es la que todos nosotros estamos viviendo día a día y no nos ponemos a analizar pero esta web 2.0 esta creada para la relación social entre las miles de personas, es mejor conocida como web social. Esto nos sirvió para poder comprender mas el tema de las aplicaciones para compartir que es lo mas actual en esta etapa de la web 2.0 y lo principal. el temas mas que nada fue ver como la mayoría de las aplicaciones web nos sirven para compartir contenido o información cualquiera, de como estas herramientas tiene mucho poder si los sabemos utilizar de la forma correcta y adecuada.

En la segunda hora analizamos los patrones señales que es algo que vemos cuando estamos navegando dentro de alguna pagina pero no sabíamos el termino a pesar de que todo nosotros hemos estado intercalando con este tipo de señales, a continuación las  mencionares:

Color coated section: este tipo de señales los podemos ver de una manera muy fácil ya que es cuando dentro de una pagina te encuentras dentro de una sección y esta sección esta marcada con un color especifico, también lo podemos ver al momento de poner el cursor sobre una zona especial este cambia de color o trasparencia.

Sequence maps: se refiere a cuando dentro de una aplicación o pagina web tienes que seguir o mejor dicho te va guiando paso a paso las acciones que debes seguir par poder continuar con el procedimiento.

Bread crums: este tipo de señales se demuestra dentro de una pagina web con los iconos de home>galery>>gatos>>gato1 con esto me referir a que nos va mostrando pagina a pagina el avance que hemos tenido dentro de la misma, o nos va marcando las secciones en las cuales tuvimos que pasar para estar en la actual, esto es de gran ayuda si queremos regresar sin darle click en back en el navegador. a mi parecer bastante útil.

Anotated scroll: como su nombre nos dice es el uso de scroll dentro un pagina para poder navegar en toda la pagina por completo, algunos piensan que no debería ser así, pero a mi me parece bastante cómodo para los usuarios.

Sesión 14 ejemplos

Clear entry points: en la pagina de sabritas podemos ver como tiene pocos botones lo cual hace mas rápida la navegación y mas simple.

Global Navigation: el la pagina principal  apple nos damos cuenta que consta de muchos mas botones, todos estos botones nos llevan a una zona especifica de l pagina, una pagina global de la misma.

Modal panel: mercado libre es una pagina en la cual si quieres contactar tienes que estar registrado de lo contrario detiene tu navegación en forma de contactar.

Hub and spoke: podemos ve los seguidores mas relacionados dentro de una red social y como puedes navegar de uno a otro.

Pyramid. puedes ver los miembros dentro de l misma red social y con los cuales puedes estar visitando y algunos con los cual no puedes.