Plano de Estructura para proyecto de nación.

Metáfora

La metáfora a emplear dentro de nuestro sitio es un panal de abejas donde los usuarios, pueden obtener beneficios muy grandes y aportar cosas muy útiles para los usuarios y el sitio en si, como en un panal de abejas todos trabajamos por obtener un beneficio mutuo.

Modelo Conceptual

Modelo Físico

Sera One Window Paging y cuando muestre estadísticas sera multiple window.

Formas de Navegación

Será un menu con algunos links para redirigir a otros sitios amigos.

Planos

Se manejaran ventanas reducidas dentro del sitio cuando el usuario se coloque sobre un boton, para mostrar un preview de lo el usuario va acceder.

Manejo de Errores

Prevención

Se mostrara un mapa del sitio en la parte inferior derecha para que el usuario ubique donde esta y pueda navegar fácilmente.

Corrección

El usuario podrá avanzar o retroceder sin tener concecuencia alguna, para de esta manera poder corregir cualquier error.

Recuperación.

El usuario podrá ver donde ha surgido un error y va a poder seguir avanzando sin problema alguno.

Ubicación

Nombre

Estamos en eso.

Secciones

País, estado, municipio, Sector (Politica, educativa, economía, etc.), aportar, obtener, proponer.

Indicador

Se va a incluir un mapa del sitio en la parte inferior derecha y en dicho mapa se mostrara donde esta el usuario, para que en todo momento el usuario se ubique.

Buscador

Se va incluir un buscador en la parte superior derecha para que el usuario pueda encontrar mas rápido la información.

Búsqueda

Mapa del sitio

Gráfico

General

Motor de Búsqueda

Proximal

Dinámica

Respuesta de Hipertexto y gráfica

Lenguaje de cursor.

Cambio de forma

El cursor mostrara un blur cuando se coloque arriba de un boton, para poderlo identificar como tal.

Cambio de Area.

Al dar click se emitira un sonido para notificar al usuario de la acción que acaba de realizar.

Arquitectura de la información.

La información va a ser estructurada de manera jerárquica.

Sesión 24 Contenido

Sesión 24 Contenido

En esta sesión vimos lo que es el plano de estructura y esqueleto.

Diseño de la interacción.

+Modelo Conceptual

+Manejo de errores

+Ubicación

+Búsqueda

+Lenguaje de cursor

Arquitectura de la Información.

+Jerárquica

Diseño de la información.

Diseño de la interfaz.

Diseño de la información.

Sesión 23

Extraclase

En esta sesión se termino de definir nuestros usuarios en base a nuestros objetivos y actores, para después crear lo que es nuestro perfil de usuario todo esto en una tarjeta donde se muestra la información real de nuestros usuarios, finalmente definimos lo que son roles de nuestro usuarios y como es que estos van a interactuar con nuestro sitio.

OBJETIVOS

ACTORES

TABLA ACTORES - OBJETIVO - USUARIOS

PERFIL DE USUARIOS. (TARJETAS)

TABLA ACTORES - ROLES (Definir que quiere obtener - aportar el usuario del sitio)

Sesión 22

Durante esta sesión vimos a mayor profundidad los que es el plano de estrategia, de esta manera logramos mejorar algunos puntos en los que no teníamos la perspectiva correcta a estos puntos por lo que ahora vamos a poder mejorar nuestro blog y nuestro proyecto de nación

Sesión 21

Contenido

STRATEGY Plane:

1.- Necesidades del Usuario: Como satisfacer al usuuario.
User needs- ¿Qué quieren nuestros usuarios obtener del sitio?
Con segmetación, usabilidad, estudio de mercado, intuición.

2.- Objetivo del Sitio:
Metas del negocio, identidad de marca y métricas de logro.
Metas del negocio: A donde se quiere llegar
Identidad de la marca: que aspectos de la identidad de la marca se desean dar a conocer. Cómo ayuda el sitio a posicionar tu marca.

Métricas del logro: Nos sirve para saber como se están envolviendo los objetivos del sitio con los del usuario, se puede hacer através de una gráfica, en algunos caso se mide a través de las ganacias.

Site objectives- Son los objetivos del sitio
User needs- ¿Qué quieren nuestros usuarios obtener del sitio?
Cuando estás 2 preguntas tengan la misma respuesta se podrá lograr un impacto interesante de la página.

3.- Perfil del Usuario:
a) Segmentación de Actores: Actores no es lo mismo que usuarios.
Se refiere tanto a los clientes como a los patrocionadores, la competencia, los departamentos funcionales para el proyecto, los dueños, empresarios, estudiantes, todos los que tengan que ver con el proyecto del sitio o blog. y después de esto hacemos la segmentación del usuario.

b) Segmentación o perfil de usuario:
-demografía, psicología, según objetivos, nivel tecnológico, cultura virtual, lugar de acceso, plataforma, orientación profesional, otros atributos.

c) Se pueden hacer fichas con fotografía de cada uno de los usuarios de forma general.


4.- Modelo del Negocio: Saber las necesidades del usuario y los objetivos, identificar los obejtivos de nuestro negocio. Entender los problemas para poder resolverlos.
Panorama general, la ubicación del mercado. Componentes: identidad, interactividad.

Descripción General: Roles y Servicios
Roles: Alguien que aporta, alguien que administra y alguien que utiliza la información (el usuario, seguidores,etc.).
Servicios: Informar,compartir información, permitir aportaciones de otras personas,etc.

Sesión 21

Reflexión

En esta sesión el profesor nos explico lo que es el plano de estrategia y todos sus componentes, en la segunda sesión el profesor llevo de invitado a un diseñador (Jacobo) que es la persona que realizo la pagina de queretarotravel.com, lo interesante fue el como explico como era el ritmo de trabajo y como se distribuía en equipos de trabajo especializado cada rama de el sitio web.

Sesión extraclase.

Análisis de pagina ( CANACINTRA)

Elementos

1.-Estrategia.- Esta pagina es una unión de grandes empresas mexicanas y la función de esta es el manifestar las ideas de estas empresas, así como dar a conocer las mismas.

2.-Enfoque.- La pagina cuenta con bastante información dentro de ella por lo que puede ser muy beneficioso para los usuarios.

3.-Estructura.- El usuario al estar en el estado zero tiene que pulsar entrar para acceder a la pagina y este sitio cuenta con una infinidad de ligas para navegar con otros sitios de interes común o información respecto a estos temas.

4.-Esqueleto.- La pagina tiene una estructura muy rectangular ya que los temas, menú principal y cuadros de texto son divididos por un cuadro de texto.

5.-Superficie.- Esta pagina es atractiva visualmente ya que todo es claro y sencillo para que el usuario este preocupado por la información y en encontrar lo que busca y no por tratar de entender como es que funciona el sitio.

Mapa del sitio.

PAGE LAY OUT.

Principios: Jerarquía, flujo, agrupación.

Jerarquía

Esquina superior izquierda: En la pagina de Ducati lo primero que ves es el logo de ducati para que el usuario se quede con la imagen de ducati ya que va a ser lo primero que va a visualizar

Espacio en blanco: En la pagina de turnerduckworth es una compañia de diseño se tiene mucho espacio en blanco el cual usan como tipo de diseño pero tambien permite una pagina mas limpia y clara no tan saturada.

Fuentes congruentes: En la pagina de mcdonalds se muestra su productos de en cuestión de tamaña es decir los mas importantes son de mayor tamaño que los que no son tanto.

Colores y contrastes: En la pagina de lenovo los titulos van en otro color para que el usuario pueda distinguir entre temas y subtemas.

Subordinación: en la pagina de univision se muestran los titulos de los temas en un recuadro y otro color mientras que los subtemas van debajo de los temas y en otro color.

Formas y grupos : En la pagina de adidas todo se muestra en forma de imagenes cuadradas o rectangulares en las cuales el usuario tiene que dar click para acceder a el tema que desee.

Flujo

En la pagina de Johnnie Walker tienes que ir paso a paso para poder ingresar lo primero que tienes hacer es poner tu fecha de nacimiento par ver si puedes tener acceso a algun tipo de contenido.

Agrupación

Proximidad: En la pagina de Calvin Klein toda la colección de ropa se muestra en fotos que se encuentran juntas y el usuario puede dar click en la imagen para ver esa colección.
Similaridad: En la pagina de oxxo todo el sitio mantiene el mismo estilo es decir el mismo menú solo cambia la imagen de acuerdo al contenido que desea ver el usuario lo cual al ser muy similar todo permite al usuario no distraerse con nada mas y centrarse en el contenido que desea ver.
Cierre: En la pagina de ESPN la información que tiene relación se ageupa en diferentes temas para que el usuario tenga claro donde buscar y que va encontrar ahí.

Patrones de Jerarquía.

Central stage: Aquí el contenido mas importante se muestra al centro de la pantalla.
Visual framework: En la pagina de nivea se mantiene la misma estructura dentro de la pagina siempre.

PATRONES DE AGRUPACIÓN.

Card stack: Muestra el contenido en forma de tarjetas como en la pagina de bimbo.

Tiled sections: Cada tema en la lista muestra su subtema al centro de la pantalla como en la pagina de bimbo que muestra una lista con productos y a un lado muestra el producto.

Sesión 17 reflexión

En esta sesión vimos varios temas los cuales se me hicieron muy útiles a la hora de analizar una pagina ya que son mas fáciles de identificar y me parecieron que estos podrán ayudarnos a ampliar nuestro criterio en cuanto al análisis de una pagina.

PAGE LAY OUT

Principios que se divide en agrupación, flujo y jerarquía.

Flujo: La información fluye de acuerdo a lo que se quiere mostrar al usuario.

Agrupación: Esta se divide en 3 ramas:

Proximidad: Lo que se encuentra junto dentro de la pagina tiene una relación.

Similaridad: Lo que se parece tiene relación

Cierre: La vista tiene a cerrar espacios para agrupar lo relacionado

Patrones de jerarquía:

Visual Framework: que todas las páginas de un sitio tengan la misma estructura o estado cero y cambian según usuario.

Center Stage: Lo más importante es colocado en el centro

PATRONES DE AGRUPACIÓN:

Titled Sections: Cada sección lleva su título y sus respectivos subtemas.

Card Stack: Cada agrupación es como una tarjeta.

Sesión 15 extracase

Color coded selection

Es cuando dentro de la pagina se resalta alguna sección o link con colores o texturas

Sequence maps

Es cuando nos va diciendo en que paso de la tarea vamos paso1, paso2 etc.

Bread Crumbs

Es cuando dentro de la pagina nos da las opciones de regresar al principio o navegar dentro de la pagina con los botones que se encuentran dentro de la pagina.
Anoted scroll bar

Es cuando nos muestra en pagina estamos como word, pdf, o powerpoint.

Sesión 14 extraclase

Modal panel

En blogger cuando intentas subir una imagen y le das click en subir imagen sin haber seleccionado la imagen antes te aparece una ventana de advertencia.

Pyramid

En la pagina de armani se muestran los links que te llevan a otras paginas y de esta manera se van entrelazando las diferentes paginas de armani

Hub and spoke

En la pagina de ESPN en un juego de futbol te nuestra el numero de relaciones que tienes con el resto de los competidores.

Global navigation

En la pagina de pronosticos se tien un espacio donde se encuentran los logos de los diferentes sorteos que tienen y si das click a los logos te lleva al espacio del sorteo

Clear entry points

En la pagina de la NFL se tiene una barra del lado izquierdo que tiene una serie de acciones para que realice el usuario y se muestren en el lado derecho

Sesión 13 extraclase

Wizard

Es una aplicación que te va guiando paso a paso para realizar la instalación de algun software o cualquier otra tarea.

Extras on demand

Te muestra nada mas lo importante con es esta pagina que solo muestro imágenes con diferente contenido para seleccionar a donde acceder como puede ser identidad corporativa, blog, o ilustraciones así el usuario elige hacia donde quiere ir.

Sesión Extraclase

Patrones físicos de organización de contenido.

One-window drill down.- Es un menú que permite navegar por una pequeña pantalla mostrando solo lo necesario

Alternative views.- Te permite tener diferentes vistas de un mismo objeto o interfaz.
Canvas plus pallete.- Tiene una barra de herramientas que te permite modificar o editar.
Two panel selector.- Tiene dos paneles donde te permite interactuar con el interfaz

Sesión 16

En esta sesión vimos lo que fue la exposición de aplicaciones de colaboración de equipo o groupware que nos permite trabajar en equipo sin estar físicamente ya que lo puedes hacer estando en cualquier parte del mundo donde te puedas conectar a internet estas aplicaciones permiten trabajar de manera mas eficaz y rápida evitando traslados que te quitan tiempo y dinero, de esta manera puedes realizar tu trabajo mas rápido, también puedes tener un orden mas estricto sobre tu manera de trabajo al igual que una agenda o video conferencias.

En esta sesión el profesor invito a un diseñador el cual nos explico como es el verdadero campo laboral como es la relación cliente - diseñador también nos mostró una pagina que hizo algunos años atrás la cual vamos a analizar.

Sesión 15

En esta sesión vimos la exposición de aplicaciones para compartir contenido

donde vimos como las aplicaciones para compartir contenido estan presentes en todo el web 2.0 ya que estas son las que nos permiten interactuar con lo que hoy es el internet las aplicaciones para compartir contenido ya casi se encuentran en todo el internet.

Sesión 14

En esta sesión vimos la exposición de microblogging y los patrones de navegación:

Microblogging:

Es una aplicación que permite realizar publicaciones breves o dejar comentarios breves en otros usuarios por lo regular es solo texto aunque permite subir también imagenes o ligas de paginas o artículos. Es una aplicación que permite estar en contacto en todo momento ya que puedes realizar publicaciones desde tu teléfono móvil para estar en contacto en todo momento.

Patrones de navegación:

Global Navigation: Utiliza una parte pequeña de la pagina o aplicación a usar para mostrar botones o enlaces que permiten al usuario navegar por otra parte de la pagina o aplicación.

Clear entry points: Con pocos botones para ayudar a una navegación fácil y clara

Hub and spoke: Es decir que tienes que regresar a la pagina principal para poder ir a otro lugar.

Pyramid: Dentro de una pagina existen enlaces que permiten navegar hacia otras y la otras paginas tienen dentro de ellas otros enlaces que permiten navegar entre diferentes paginas o la principal generandose así una relación como de piramide.

Modal Panel: Es una ventana de emergencia que no permite avanzar hasta que el usuario tome una decisión sobre lo que se va a hacer.

Sesión 13

Durante esta sesión vimos 2 exposiciones:

La primera hablo fue redes sociales que son plataformas que sirven para la interacción entre las personas, también sirven para poder tener contactos de trabajo o mostrar tu trabajo, también existen diferentes tipos de redes sociales algunas especializadas en negocios, de corporativos o de cualquier otra categoría.

La segunda exposición fue Folksonomy:
Es una aplicación que nos permite organizar contenido es decir categorizarlo para de esta manera tener acceso a paginas de internet de un modo mas organizado y fácil.

Patrones:
1.- Wizard: Te lleva paso a paso para realizar un procedimiento o instalación de algún programa.
2.- Extras on Demand: Muestra el contenido mas importante y oculta el resto lo muestra solo si el usuario lo solicita.

Sesión 12

En esta sesión abarcamos el tema de los patrones físicos de organización de contenido:

Two pannel selector: Cuando existen 2 paneles que puedes usar simultáneamente. En algunos casos de un lado están las categorías y del otro las imágenes. (mail mac)

-Canvas plus pallette: Es una paleta con iconos y herramientas a un lado para llevar a cabo una acción. Estas son usadas en las paginas de autos donde te permiten personalizar tu coche.

-One-window drill down: Es una forma de clasificar las cosas. .Se usa cuando en una pantalla tienes poco espacio

-Alternative views: Cuando tiens diferentes vistas de el mismo contenido o escenario puede ser para visualizar diferentes vistas de una misma pagina.

Niveles o pop up windows: En esta pagina al elegir el producto se abre otra ventana que no permite regresar al anterior.

Multiple windows: La pagina de armani va abriendo otras paginas cada que das click en alguna opción.

Tiled Panels: Esta es una pagina de diseño gráfico que que tiene varios paneles que te permiten ver otras opciones dentro de la misma pagina.

One window paging: La pagina de de la contemporanea te permite navegar por todo su sitio sin abrir algún otra pagina.

Categorías de acuerdo a su taxonomía.

Lista de acciones

“What do you want to do?”

Lista de objetos

“What do you want to work on?” Tiene un jerarquia dentro de ellas

Lista de herramientas

With what do you want to work?”

Lista de temas

“What do you want to work?”

MODELO MENTAL

Sesión 9

En esta sesión se aclaro lo que es la arquitectura, pattern y modelo viendo como estos 3 se relacionan entre si para hacer trabajar un interfaz de manera efectiva, solucionando problemas y todo esto puede ser usado hasta un millon de veces sin siquiera hacerlo de la misma manera 2 veces. También vimos otras definiciones dentro de lo que es la interfaz las cuales voy a explicar

1.- Safe Exploration: La interfaz permite ensayar actividades sin que haya consecuencias, puede regresar y cambiar de decisión.

2.- Instant Gratification: La interfaz debe de reaccionar inmediatamente a la solicitud del usuario, de otra forma se pierde el interés y se aumenta la probabilidad de abandono.

3.- Satisfacing: La Interfaz debe de proporcionar lo suficiente para satisfacer el requerimiento del usuario.

4.- Changes in Midstream: La interfaz debe de dar la opción de cambiar de decisión o de opciones con el menor esfuerzo posible.

5.- Deferred Choices: La interfaz debe de permitir contestar o completar opciones después sino coincide con lo que el usuario busca hacer.

6.- Incremental Construction: La interfaz debe de permitir fluir al usuario de acuerdo a sus preferencias de manejo, no obligarlo a una secuencia dirigida de pasos.

7.- Habituation: La interfaz debe de considerar que existen acciones a las que el usuario está acostumbrado, también debe de ser consistente en la forma en que las acciones habituales funcionan en todo lo largo y ancho de la interfaz.

8.-Spatial Memory: La interfaz debe de considerar que el usuario recuerda más el lugar donde están las cosas que el nombre o incluso el símbolo, cambiar de lugar de las cosas dentro de la interfaz genera frustración.

9.- Prospective Memory: La interfaz debe de apoyar al usuario para recordar tareas pendientes a realizar o para recordar en que paso se encuentra.

10.- Streamlined Repetition: La interfaz debe de recordar cuando le han sido proporcionado datos o ha recolectado información para no obligar al usuario a volver a realizar la operación.

11.- Keyboard only: La interfaz debe de permitir el uso eficiente del teclado y dar siempre alternativas de atajos (shortcuts).

12.- Other People Advice: La interfaz debe permitir que el usuario conozca la opinión de otros o también se debe de tomar en cuenta la opinión de usuarios en la construcción de interfaces.

Actividad Extra clase.

¿Qué es un interfaz?

Es la parte de la maquina que nos permite interactuar con ella puede ser software o hardware, esta puede ser tangible o no.

¿Qué elementos componen un interfaz?

Entrada, acción y salida.

El de entrada nos permite empezar a interactuar con nuestra maquina.

El de salida que es el que nos informa que efectos tuvo la manipulación realizada.

Diferencia entre hardware y software

Hardware es aquel con el que interactuas de manera tangible y en el software es de manera mas distante o virtual.

¿Qué es un sistema operativo?

Un sistema operativo (SO) es un programa informático que actúa de interfaz entre los dispositivos de hardware y el usuario.(www.wikipedia.com)

Tipos de aplicaciones:

Son aquellas que trabajan dentro de algun software puden ser procesadores de texto, editores de imagen. juegos o reproductores de musica etc.

¿Qué es el estado zero?

Es el como se muestra la pagina antes de que el usuario interactué con ella.

Conceptos básicos de internet.

TCP: Transfer Control Protocol

IP: Internet Protocol

ISO: International Standard Organization

HTML: Hypertext Mark up language

XML: Xtended mark language

¿Qué es un browser?

Un navegador o navegador web (del inglés, web browser) es un programa que permite visualizar la información que contiene una página web (ya esté esta alojada en un servidor dentro de la World Wide Web o en uno local).

El navegador interpreta el código, HTML generalmente, en el que está escrita la página web y lo presenta en pantalla permitiendo al usuario interactuar con su contenido y navegar hacia otros lugares de la red mediante enlaces o hipervínculos.

-Tipos de aplicaciones para realizar páginas web:

FRAMEWORK: estructura de soporte definida, en la cual otro proyecto de software puede ser organizado y desarrollado.

CMS : Sistemas que organizan y permiten acceder desde una Base de Datos todo tipo de contenidos digitales.

PLATAFORMA: Hardware sobre el cual puede ejecutarse o desarrollarse un software.

TIPOS DE INTERFAZ:
-Publicación,Transacción, Colaboración, Proceso Corporativo

Análisis de pagina web.

Esta es una pagina dedicada a el diseño gráfico, es una empresa inglesa la cual admiro mucho por lo tanto me di a la tarea de hacer el análisis de esta pagina, considero que esta pagina esta hecha en un framework ya que cuenta con vídeos, algunas animaciones creo yo en flash y cuenta con una base de datos donde se muestra su portafolio de trabajo todo esto con un interfaz muy clara y sencilla de utilizar.

Esta es la pagina de mac donde se avisa de sus próximos lanzamientos, aplicaciones para sus productos, venta de productos en la i store, videos de tutoriales, puedes comprar en linea por lo que considero que es una pagina muy compleja aunque con un interfaz muy agradable al usuario, esta pagina es de transacción y publicación y esta hecha en un framework ya que es una pagina muy completa que cuenta con casi todo.

Esta es la pagina de inicio de google y aunque su interfaz es relativamente sencilla pero esto con el fin de hacer mas fácil su uso, google esta hecho en un cms ya que considero que lo unico que utiliza es una gran base de datos para ubicar de manera rápida la información requerida, esta es una pagina de publicación.

Sesión 7

En esta sesión dimos un breve repaso a lo que es la metodología del diseño de una interfaz, también vimos lo que es un blog y dentro de la clase el profesor nos dio una clase muy dinamica con estadísticas e información consistente sobre el tema.

Un blog es una aplicación que funciona en el www para registrar información en el estilo de una bitácora y permite comentarios de los visitantes.

El mundo del internet va creciendo a pasos agigantados en el 2008 habían 27.6 millones de internautas, ahora existen cerca de 133 millones de blogs en el mundo y México tiene 2 millones de esos blogs.

La importancia de un blogs se mide por el numero de ligas que tienes entre otros blogs y cuantas reacciones por post genera tu blog, aunque los blogs difícilmente van a superar a las paginas web son una alternativa muy barata de tratar de hacer algo similar a la pagina web claro con sus limitaciones, pero esas limitaciones se compensan con el precio de cada uno.

Sesión 6

La sesión pasada no pude asistir a la escuela por problemas de salud, pero pregunte a mis compañeros lo visto en clase y me explicaron que vieron 4 tipos de aplicaciones, a continuación explicare lo entendido:

Analizamos 4 tipos de Aplicaciones:

-Publicación: El mostrar o comunicar cualquier cosa para darla a conocer.

-Transacción: Esta sirven para hacer operaciones bancarias.

-Colaboración: Se usan para trabajar en equipo dentro de empresas o grupos de trabajo.

-Proceso Corporativo: Estas sirven para actualizar la información dentro de una empresa o pagina web.

Actividad Extra clase

La primer aplicación a la que cambie el tema o skin fue facebook el cual me pareció una buena idea y funcional ya que al momento de personalizar un poco mas mi perfil me sentí mas cómodo con su interfaz.

Otra aplicación que modifique fue msn el cual me parecía con una buena interfaz pero el poder personalizar esta aplicación fue algo que me pareció muy útil ya que ahora uno puede modificar casi las mayorías de las aplicaciones para que estas funcionen a nuestra conveniencia.

Ares es una aplicación p2p (peer to peer) es decir sirve para compartir diferentes tipos de archivos dentro de internet y aunque es una aplicación muy funcional su interfaz es verdaderamente mala por lo que me di a la tarea de buscar algún skin que me hiciera mas fácil el manejo de esta aplicación.