PATRONES DE NAVEGACIÓN

1.-CLEAR ENTRY POINTS:

*Son grupos de acciones fáciles

*Presentan pocos puntos de entrada de la interfaz

*Pocos botones para navegar

Tiene la desventaja de que pueden tener muchas ventanas y darte un gran número de opciones

Un claro ejemplo:

Es Google ya que solo tiene la barra del buscador así como algunas otras opciones simples para buscar información.

2.-GLOBAL NAVEGATION:

Tiene la característica de tener varias opciones, y puedes saltar de una manera fácil a las otras aplicaciones de una manera fácil y sencilla. En esta página podemos navegar, súper rápido sin necesidad de regresarnos ya que en la barra superior nos muestra las opciones a utilizar.

3.-HUB AND SPOKE:

En este ejemplo puedes saltar de un punto a otro pero todas las opciones están individualmente, y no puedes navegar tanto en ellas, siempre tienes que regresarte al menú.

4.- PYRAMID:

Tiene una forma de actuar similar a una red de comunicación, es decir te lleva fácilmente en forma de escalones o pirámides a tu objetivo:

5.-MODAL PANEL:

Son aquellas páginas que no te dejan avanzar si no le das en cierta opción:

MICROBLOGGING

Estas son herramientas derivadas del Blog convencional. Permite mandar mensajes similares a los de texto.

-Ventajas

1.-Las comunidades empresariales y de productos y servicios pueden estar comunicados.

2.-Tiene Velocidad aceptable

-Desventajas

1.-Gran cantidad de mensajes

2.-Aceptan 140 caracteres

3.-Utilizado por usuarios de SPAM

Por ejemplo el TWITTER:

Es un servicio gratuito del Microblogging, da entradas de texto llamadas twee.

Jack Dorsey fue el creador de esta red social. Tienes la ventaja de escribir y publicar como si fuera un diario personal. El Twitter tuvo su boom en el 2008.

Algunas otras redes sociales son POWNCA e IDENTI.CA

Sesión, 13 Reflexión

En la clase pasada vimos los siguientes temas:

REDES SOCIALES:
“Las Redes son formas de interacción social, definida como un intercambio dinámico entre personas, grupos e instituciones en contextos de complejidad. Un sistema abierto y en construcción permanente que involucra a conjuntos que se identifican en las mismas necesidades y problemáticas y que se organizan para potenciar sus recursos."
Aquí la gente entra y se registra, compartiendo información personal como sus gustos de música, carrera, entre mil cosas. Algunas de estas redes sociales te permiten decorar tu propio sitio o también platicar con personas en línea.
Muchas empresas usan este nuevo fenómeno para darse a conocer y crear juntas o puntos de reunión en los cuáles se podrán ver.
Pocas son las personas en este tiempo que no pertenecen a alguna de estas redes como Facebook, Myspace, Hi5, Twitter, etc.





FOLKSONOMÍA:
Folcsonomía o folksonomía es una indexación social, es decir, la clasificación colaborativa por medio de etiquetas simples en un espacio de nombres llano, sin jerarquías ni relaciones de parentesco predeterminadas. Se trata de una práctica que se produce en entornos de software social cuyos mejores exponentes son los sitios compartidos como del.icio.us
En este caso podemos compartir nuestros gustos de páginas por ejemplo, si estamos buscando algunas páginas de moda, no tendremos que meternos al buscador de google y navegar.
Si no que entrando por ejemplo a la página de delicious tendremos a varios amigos agregados y alguno de ellos nos podrá dar la recomendación de alguna de esas páginas y la tendrá marcada. Así mismo nosotros podemos marcar algunas de nuestras páginas favoritas y en nuestra barra de herramientas se nos añadirá el icono para poder hacerlo.
Creo que es algo muy innovador y que nos puede servir en momentos de emergencia para muchas cosas.

Sesión 12, Reflexión

En la clase pasada, vimos más patrones que tienen que ver con la ORGANIZACIÓN de CONTENIDO.

1. Two Panel Selector:

En este caso vamos a tener de nuestro lado izquierdo nuestra lista y al darle click a alguna opción se nos abrirá la carpeta y así podremos ver el contenido.

2. Canvas Plus Palette:

En esta opción vamos a poder ver las herramientas que podremos usar para dibujar, escribir, agregar efectos, etc. a nuestro archivo.

En este ejemplo podemos escoger los colores de sombras para la modelo y vienen todas las herramientas de nuestro lado
izquierdo.

3. One window drill down:

En esta opción se nos van abriendo las ventanas, una por una como si fueran bajando. Es muy común en muchas páginas de internet.

4. Alternative views:

Nos da la opción de poder ver nuestro contenido en diferentes vistas, ya sea en hoja completa o como lo vamos editando. Por ejemplo en word podemos ver las herramientas cuando estamos escribiendo pero al momento de darle preview nos sale el formato de la hoja para impresión.

Creo que el aprender estos conceptos nos hace más conscientes de la interfaz que hay en internet así podemos criticar y dar puntos de vista para mejorarlos.

Análisis

MYSPACE

En esta ocasión analizaremos la interfaz de MySpace entraría en la clasificación de Two Panel Selector ya que en la parte izquierda de nuestra pantalla podremos observar las opciones, de editar, cargar, asi como la administración de nuestro contenido, aparecen las imagenes de las personas en las cuales podemos dar click y abrir su página.

También entra en la clasificacion de los Frameworks ya que este tipo de páginas que son redes sociales es muy dificil hacer su aplicación por ejemplo en un CMS.



Analicemos algunos puntos:
1.-Save Exploration:
Ya que no nos abre otro tipo de páginas y los gráficos siempre se ven.

2.-Instant Gratification:
En ocasiones las páginas que están muy pesadas tardan en abrirse pero esto es por las aplicaciones y gráficos demasiado grandes con los que cuenta el espacio de cada quien.

3.-Satisficing:
Es fácil de entender ya que podemos buscar a las personas de una forma fácil, en el buscador que nos brinda.

4.-Changes in Midstream:
Podemos salvar nuestro espacio y decoraciones en el HTML que nos da, es decir nosotros bajamos el HTML de las imágenes así como de nuestros layers para poder publicarlos y todo lo que llevamos se guarda.

5.-Deterred Choices:
En esta clasificación tenemos que dar nuestros datos, dependiendo si queremos ser usuarios de la red de MySpace, si no pues podemos ver el espacio de cualquier usuario teniendo su URL.

6.-Incremental Construction:
Podemos llenar nuestro espacio, como queramos es decir, lo podemos dejar como se encuentra en un principio, blanco y sin cosas, o llenarlo de colores, música, imágenes, etc.

7.-Habituation:
En la edición de HTML cumple con los comandos normales.

8.- Spacial Memory:
En ocasiones actualizan el sitio cambiando de lugar las herramientas, pero no es nada del otro mundo ya que tiene buena interfaz.

9.-Prospective Memory:
No cumple con agendas electrónicas, ni nada por el estilo, pero si tiene organizadores de eventos en los cuales puedes estar actualizado cuando lo necesites y ver también los eventos de loso demás.

10.- Keyboard only:
Puedes utilizar tu teclado, mouse y todos los comandos reaccionan.

11.-Other People Advice:
Otros usuarios pueden dar su retroalimentación, y comentarios sobre tí.

ESTRUCTURA:
Opera con One Window Pagin, ya que te va abriendo las páginas una por una, y te puedes regresar, es muy cómodo.

CLASIFICACIÓN SEGÚN SU USO

COLABORACIÓN:
Ya que podemos ver la información de nuestros usuarios y colaborar para entablar una conversación o al igual dar publicidad a grupos de música, o sitios donde la gente comenta y retroalimenta sobre el contenido.

Opinión:
Pienso que es una interfaz muy bien aplicada, pero mi recomendación es hacer layers mucho más ligeros para que la rápidez de la red social mejore. Además debería haber algo a la vista que te de las noticias, no sólo que estén en la página principal.

Sesión 11, Reflexión, WIKIS

LAS WIKIS

Un wiki, o una wiki, es un sitio web cuyas páginas web pueden ser editadas por múltiples voluntarios a través del navegador web. Los usuarios pueden crear, modificar o borrar un mismo texto que comparten. Los textos o «páginas wiki» tienen títulos únicos. Si se escribe el título de una «página wiki» en algún lugar del wiki entre dobles corchetes (...), esta palabra se convierte en un «enlace web» a la página wiki.

En esta aplicación toda la gente puede opinar y aportar información para hacer una wiki más rica en contenido, pero nos explicaron que también hay una asociación que cuida el contenido y hace un control de los cambios, eliminando lo que creen que no es necesario para la sociedad. Esto ayuda a que no se haga vandalismo en la información.

ESTRUCTURAS

1.-MULTIPLY WINDOWS:
En esta opción por ejemplo el blog nos abre otra pagina y tienes que cargar ahí tu archivo.





2.-ONE WINDOWS PAGING:
La página de vanidades es de una sola página es decir no te abre otras ventanas:



3.-TILED PANES:
Este tipo de páginas nos muestran un menú del lado izquierdo o derecho, le damos click y no nos cambia la página ni nada simplemente en el medio nos muestra el contenido.



4.-LEVELS & POP UP WINDOWS:
Esta página nos abre varias, en escalerita y es el cuento de nunca acabar.

CATEGORÍA

1.- LISTA DE OBJETOS:
Ésta categoría nos dice en que queremos trabajar o sobre que, mostrandonos diferentes tipos de productos o imagenes con las que podemos trabajar. Aquí en mecado libre, nos muestra los diferentes objetos que están a la venta.



2.- LISTA DE ACCIONES:
Podremos observar que noso da varias opciones para relizar, por ejemplo, pensé que Youtube entra en esta clasificación porque, podemos buscar videos, cargar, descargar, tener el codigo, así como postear.



3.- LISTA DE ACCIONES Y OBJETOS:
Aquí podremos observar las acciones, como en dónde buscar y a la vez nos va mostrando nuestros objetos para tener una mejor búsqueda. Por ejemplo en la página de Yamaha nos da la acción de poder buscar pians guitarras etc. Además no los muestra.


4.- LISTA DE TEMAS:
Esta clasificación nos habla de los temas que son de nuestro agrado y que podemos clasificar y puse el ejemplo de ésta página de cocina donde, podemos ver las bebidas, sopas, platos fuertes, postres etc.



5.- LISTA DE HERRAMIENTAS:
"¿Con que quieres trabajar?"
En esta página nos da la opcion de poder mandar mensajes o cancelarlos, así como el de regresar a la página principal, etc.

CLASIFICACIONES

SAFE EXPLORATION:

"Déjame explorar la interfaz sin meterme en problemas"

*Se carga rápidamente sin dar problema alguno como esta página, de Taylor Swift se cargan rápidamente los videos y fotografías, tiene bastante contenido, no abre otras páginas y es segura.

En cambio planetadeletras.com

No te deja ni entrar bien a la página te sale una pantalla negra antes de que puedas ver cualquier contenido:

2.- INSTANT GRATIFICATION:

La interfaz debe reaccionar inmediatamente a la solicitud del usuario, si no la consecuencia es que se pierde el interés.

Por ejemplo la página:

http://www.fabulosos-cadillacs.com.ar/

Funciona rápidamente y muestra rápidamente la información que necesito además carga los videos de una manera rapidísima.

Por el contrario una página

http://virtual.cucs.udg.mx/moodle/login/signup.php

Pide demasiadas cosas para poder entrar a ver el sitio

3.- SATISFICING:

Busca lo que necesitas y es rápido:

En en facebook si buscas a alguna persona no te da el resultado, ni cosas que tengan que ver con el, te da a otras personas creo que no es tan bueno su buscador en cuanto a nombres, pero si pones el mail si es más rápido:

4.-CHANGES IN MIDSTREAM:

Cambiar opciones con el menor esfuerzo posible:

Por ejemplo,

Bueno un programa muy bueno que salva lo que tienes es word, siempre hace caso a los comandos, y en cualquier word con el teclado los atajos son los mismos.

En cambio el finalcut siento que da muchos problemas además que no se me hace un programa ordenado, tiene todas sus opciones regadas:

5.-DEFERRED CHOICES:

Contestar o completar opciones después, pero no coincide con lo que el usuario busca hacer:

Ejemplo que permite llenar la información de una forma correcta:

Es mundonick.com

Te pide pocos requisitos pero igual si no los llenas te deja ver el contenido de la página y la información que te pide es muy básica, lo cuál es cómodo.

En esta página que es

www.cyzone.com

no me deja ver algunos contenidos tengo que llenar un gran formulario para tener acceso, además tienes que poner tu dirección y numero de teléfono, cosas demasiado personales que no cualquier persona las llena, lo cual hace que la gente se aleje de esta página.

6.-INCREMENTAL CONSTRUCTION:

Debe permitir fluir al usuario de acuerdo a sus preferencias de manejo:

Facebook nos permite admitir a los usuarios que queramos así como llenar nuestra información cuando queramos:

Una página que no nos permite manejar nuestra información o privacidad es el hi5:

7.-HABITUATION:

"Si lo que hago en otros programas funciona, ¿por qué aquí no?

Por ejemplo para mac y pc, el ctrl "z" o manzanita "z" siempre funciona, en realidad las diferencias son pequeñas, como el lugar de donde se cierran las ventanas, es cosa de costumbre.

Un programa que reacciona distinto a todos los programas por ejemplo de adobe es Maya, porque muchas cosas son diferentes, así como los comandos para las herramientas.

8.-SPACIAL MEMORY:

Es cuando cambian los botones y cosas en una página:

De lado izquierdo los botones de los menús:

Por ejemplo el sistema operativo de mac tienen siempre del lado izquierdo los botones, al menos que el usuario quiera cambiarlos pues funciona como el quiere, por ejemplo si está acostumbrado a utilizar windows puede cambiar las opciones del lado derecho.

En cambio en windows no se puede hacer cómodamente esta opcion

9.- PROSPECTIVE MEMORY:

"Puse esto aquí para acordarme y hacerlo después"

Como las notas adhesivas que nos facilita mac:

En cambio son malas las autoinstalaciones ya que no sabemos como modificarlas.

10.- STREAMLINED REPETITION:

Mozilla sabe como guardar documentos:

En cambio el explorer no sabe donde y como guardar.

11.-KEYBOARD ONLY:

En este caso, puedes trabajar sin la ayuda del mouse.

Pues creo que la mayoría de los programas pueden funcionar sin mouse, pero no se pueden hacer todas las acciones por ejemplo en una lap, si se puede manejar la computadora perfectamente pero en una de escritorio si es complicado porque si abrimos el programa de illustrator no podremos vectorizar.

12.- OTHER PEOPLE ADVICE:

Esta nos da la oportunidad de que otros usuarios estén en contacto con nosotros por ejemplo los blogs.

Y por ejemplo una página de internet normal que tiene contenido como puede ser wikipedia no nos permite hacer esto.

Eso es todo, espero les haya quedado un poco más claro.

Sesión 9, Reflexión

La clase pasada fue de mucho contenido pero fue muy interesante porque vimos la clasificación de las páginas Web, dependiendo a si funcionan bien o no:

1.- Save Exploration

2.- Instant Gratification

3.- Satisficing

4.- Changes in Midstream

5.- Deferred choices

6.- Incremental Construction

7.- Habituation

8.- Spacial Memory

9.- Prospective Memory

10.- Streamlined Repetition

11.- Keyboard Only

12.- Other people advice

Veremos ejemplos de todos estos

Fue muy interesante la segunda hora

ELEMENTOS

El modelo en el diseño gráfico:

Se denomina MODELO al resultado del proceso de generar una representación abstracta, conceptual, graáfica o visual. Son procesos a fin de analizar, describir, explicar, simular, es decir exploran, controlan y predicen, estos fenómenos son llamados procesos.

El crear un modelo es una parte esencial de toda actividad que tiene un orden para lograr un fin.

Un modelo puede ser tan sencillo como una simple explicación con palabras de lo fundamental de una realidad. A este tipo se le suele llamar modelo verbal.

En otros modelos usamos diagramas en los que se dibujan de una forma simplificada los componentes del sistema señalando con flechas las acciones de unos sobre otros. Son modelos gráficos. Algunos pueden ser muy esquemáticos, pero cuando en cada flecha se indica el tipo de acción que tiene lugar y se señalan diferentes compartimentos y tipos de interacción, pueden llegar a ser muy complicados.

En los modelos numéricos se usan magnitudes y ecuaciones matemáticas para describir con exactitud los distintos componentes del sistema y las relaciones entre ellos.

El desarrollo de los ordenadores ha hecho posible manejar una gran cantidad de datos y por eso ahora se usan, cada vez más, modelos computacionales, en los que con programas de ordenador se imita el funcionamiento de sistemas complejos.

http://www.proyectosalonhogar.com/Ciencias_ambientales/01IntrCompl/111Model.html

http://www.google.com.mx/search?hl=es&client=firefox-a&channel=s&rls=org.mozilla:es-ES:official&defl=es&q=define:Modelo+&ei=bGhwS7-7DYjssQPLktSyDQ&sa=X&oi=glossary_definition&ct=title&ved=0CAcQkAE

CooKieS

Una cookie (pronunciado ['ku.ki]; literalmente galleta) es un fragmento de información que se almacena en el disco duro del visitante de una pagina web a través de su navegador, a petición del servidor de la página. Esta información puede ser luego recuperada por el servidor en posteriores visitas. En ocasiones también se le llama "huella".

• Las cookies son similares a gusanos y virus en que pueden borrar datos de los discos duros de los usuarios.
• Las cookies son un tipo de spyware porque pueden leer información personal almacenada en el ordenador de los usuarios.
• Las cookies generan popus.
• Las cookies se utilizan para generar spam.
• Las cookies sólo se utilizan con fines publicitarios.

Sesión 8, Reflexión

En la clase pasada fue aplicado nuestro examen de interfaz el cual fue muy interesante porque venian muchas de las cosas que hemos visto en nuestro blogg. La verdad creo que estoy aprendiendo muchas cosas y seguire compartiendolas con ustedes.

Identificación

En esta ocasión la tarea fue identificar algunas páginas y nosotros teníamos que clasificarlas en un Framework, plataforma o CMS.
Yo encontré estas:

Esta es una página de niñas que yo creo es un Framework ya que es muy interactiva, podemos ver que tiene formatos hechos en Flash y tiene dinamismo, pienso que no es algo sencillo de hacer y por eso la clasifique en este lugar.


Esta entro dentro de la plataforma, es el sencillo caso de Myspace es una red donde los usuarios entran, crean su cuenta y listo, tienen su propio espacio y están listos para navegar en el.

Creo que no fue una tarea sencilla porque si es un poco complicado identificarlas en especial el Framework y el CMS. Pero espero con el tiempo y la experiencia de navegar en la red pueda identificarlas más rápidamente y sin ningún problema.

Web 2.0

Bueno para que quede más claro lo del blog y lo que veremos después tenemos que entender que es la WEB 2.0:

La Web 2.0 es la representación de la evolución de las aplicaciones tradicionales hacia aplicaciones web enfocadas al usuario final. El Web 2.0 es una actitud y no precisamente una tecnología.

La Web 2.0 es la transición que se ha dado de aplicaciones tradicionales hacia aplicaciones que funcionan a través del web enfocadas al usuario final. Se trata de aplicaciones que generen colaboración y de servicios que reemplacen las aplicaciones de escritorio.

Ejemplos:

• Web 1.0 > Web 2.0
• Doubleclick –> Google AdSense (Servicios Publicidad)
• Ofoto –> Flickr (Comunidades fotográficas)
• Akamai –> BitTorrent (Distribución de contenidos)
• mp3.com –> Napster (Descargas de música)
• Britannica Online –> Wikipedia (Enciclopedias)
• Sitios personales –> Blogs (Páginas personales)
• Especulación con dominios –> Optimización en motores de búsqueda SEO
• Páginas vistas –> Costo por click
• CMSs –> Wikis (Administradores de contenidos)
• Categorías/Directorios –> Tags
  

*