CSS “Cascading Style Sheets”

Definición y uso

Es un lenguaje que se utiliza en los documentos HTML. Se utiliza para organizar la presentación y aspectos de una página web, da múltiples opciones de presentación como colores, tipos y tamaños de letras, etc. Es realmente útil para mejorar la parte visual de un sitio web de forma efectiva y ahorrando mucho trabajo.

Sintaxis

CSS basa su sintaxis en el selector de tipo y una declaración, los cuales son los dos elementos principales.

css-sintaxis

El selector de tipo se utiliza para especificar a que tipo de etiqueta se le aplica el estilo. Y la declaración es donde se especifica el estilo de la etiqueta, este espacio es determinado por paréntesis y normalmente esta compuesta por:

  • Propiedad: Una misma etiqueta puede tener una o varias propiedades. Son seguidas por el carácter «:» (dos puntos).
  • Valor: Están asociados por cada propiedad. Se pueden separar por «,» (comillas) sí hay muchos valores, y todos seguidos por «;» un punto y coma.

css-sintaxis

Estructura

La estructura es definida por una cabecera y un pie, un menú lateral de navegación y una zona de contenidof1208

El CSS se basa en el uso de diferentes propiedades como:

  • float: Para elementos posicionados como el menú y el contenido.
  • clear: Se usa para evitar los solapamientos ocasionados por los elementos posicionado con el float, normalmente se usa en el pie de página.
PÁGINAS INTERESANTES CON EJEMPLOS, REFERENCIAS Y TUTORIALES
  • Ciudadano 2.0:  Cuenta con buena información para iniciar a entender  CSS y muestra cada propiedad básica que se debe entender para comenzar a realizar páginas web, contando con diferentes ejemplos.

Link: http://www.ciudadano2cero.com/aprender-css-basico-desde-cero/

Captura de pantalla 2015-04-14 a las 11.00.48 p.m.

  • Desarrollowe6: Página completa con manual, ejemplos y sobretodo con videos tutoriales con diferentes capítulos para entender de una forma interactiva el lenguaje CSS.

Captura de pantalla 2015-04-14 a las 11.04.35 p.m.

  • w3schools: Es la página más completa para aprender y encontrar referentes para utilizar CSS, trae definiciones claras y diversidad de ejemplos.

Link: http://www.w3schools.com/css/

Captura de pantalla 2015-04-14 a las 11.11.22 p.m.

HTML «Hyper Text Markup Language»

Definición y uso

Html es un lenguaje especial para realizar páginas web. Es definida por una estructura básica y un código, el cual permite el contenido de un documento web, puede contar con textos, imágenes, videos, entre otros elementos que enriquece los sitios web.

El lenguaje Html se usa para crear páginas web, dar estructura y contenido.

Sintaxis

Html basa su sintaxis principalmente en etiquetas y contenido:

html-sintaxis

El contenido siempre debe ir entre la etiqueta inicial y la final, lo que se ponga en este lugar  se verá igual  en  la página  web, incluyendo tildes, espacios, entre otras características que se deseen.

etiquetas-abiertas-cerradasLas etiquetas son las que describen diferentes contenidos del sitio web, como por ejemplo, párrafos, imágenes, enlaces, etc. Cuentan con dos tipos de etiquetas: apertura y cierre.

Dentro de las etiquetas se encuentran los atributos y el valor, los cuales tienen ciertos parámetros para ser leídos por este lenguaje.  El atributo proporcionan información adicional de los elementos del HTML, por ejemplo, tamaño de imagen, enlace, fuente, entre otros. Todos los atributos deben estar en minúscula y van acompañados de un igual «=» para continuar con el valor, el cual siempre debe ir con comillas dobles y dependen totalmente de la clase de atributo que se valla a manejar.

Estructura

estructurabasicaPara comenzar a estructurar un documento con lenguaje HTML se inicia con  <! DOCTYPE html>, el cual especifica que es una página HTML5, y continua con <html> y </html> para definir el documento en lenguaje HTML. Dentro del documento se divide en dos partes principales, el encabezado y el cuerpo.

El encabezado es donde se ubican las etiquetas informativas o técnicas, como por ejemplo el titulo de la página  o palabras claves, esta no se muestra en el navegador, y se delimita con  <head> y </head>. Y el cuerpo es donde se colocan las etiquetas visible del documento, incluye textos, imágenes, entre otros, y se delimita con  <body> y </body>.

Páginas interesantes con Ejemplos, referencias y tutoriales
  • w3schools: Es la página más completa para aprender y encontrar referentes para realizar HTML, trae definiciones claras y diversidad de ejemplos.

Link: http://www.w3schools.com/html/default.asp

Captura de pantalla 2015-04-13 a las 9.40.44 p.m.

  • Codecademy: Es una muy buena página para aprender y practicar html de forma fácil y basica. En la parte izquierda se encuentra la información que explica los temas, dividido en 13 sesiones, en ese mismo espacio pero en la parte inferior se encuentra unas pequeñas intrucciones para que el usuario realize en la parte del centro, y en la derecha se va visualizando como quedaría la página web.

Link: http://www.codecademy.com/es/courses/web-beginner-es-OZtwj/0/1?curriculum_id=50afc73a4e9f856d7e007373

Captura de pantalla 2015-04-13 a las 9.16.02 p.m.

  • Virtualnauta: Es una página que introduce al HTML y muestra algunos ejemplos.

Link: http://www.virtualnauta.com/html-introduccion

Captura de pantalla 2015-04-13 a las 9.32.08 p.m.

User Flow

¿Qué es?

Captura de pantalla 2015-03-01 a las 12.45.33 p.m.El User Flow es un principio básico de usabilidad, el cual representa gráficamente el recorrido que aplica el usuario en los sitios web. La idea es visualizar cómo el usuario busca el sitio, se mueve en él, cuánto tiempo se demora y cómo realiza cada tarea hasta llegar al final de los objetivos que quiere cumplir él o el mismo sitio.

¿Para qué se usa?

El User Flow es usado para ayudar a garantizar un excelente sitio, logrando ser claro, intuitivo y usable. La idea es mostrarle al usuario las interacciones que pueden realizar en el sitio web. Ayuda a visualizar la estructura del sitio web, también sirve para mostrarle al usuario la trayectoria de sus compras en páginas comerciales.

Se debe tener en cuenta diferentes estilos de interacción, diseños de recorridos y aplicaciones. La idea es que exista ayudas para que el usuario navegue sin perderse, y que pueda devolverse en cualquier momento.

El User Flow se diseñe pensando en cumplir tanto los objetivos de la empresa dueña del sitio, como los del usuario, y que en ambas partes obtengan lo que buscan satisfactoriamente.

¿Cuándo se realiza?

Lo ideal es realizarlo en el proceso de creación de un sitio web, y ya después se representa visualmente. Esto permite que el diseñador y desarrollador puedan definir más fácil las interacciones básicas que se van a implementar. Comenzar a realizar una página sin un buen esquema de User Flow va a traer grandes problemáticas, las cuales se van a ir reflejando a largo y corto plazo.

¿Qué herramientas se pueden usar?

  • Diagrama de flujo:

    Es la representación gráfica más usada y conocida para crear User Flow. Se basa en describir cada etapa del proceso por medio de símbolos gráficos, entre ellas están las flechas que indican la dirección. Su objetivo principal es mostrar la secuencia de navegación del usuario.

Captura de pantalla 2015-03-01 a las 1.07.00 p.m.

  • Diagramas de flujo apilados:

    Es la unión de varios diagramas de flujo que tiene como fin empezar con un diagrama de flujo (que será el más importante), y de este llegar a otro, de forma consecutiva, uniendo varios diagramas. La idea es que tengan alguna relación y se lleven de forma consecuente.

Captura de pantalla 2015-03-01 a las 1.17.24 p.m.

  • Diagramas de estado:Se basan en las opciones que escoge el usuario, creando una conversación en cada paso que elija. Aparte de mostrar los pasos de la navegación, da en detalle las acciones de la pantalla. El punto a favor de manejar este tipo de diagramas es que facilita la explicación a un colega o cliente.

Captura de pantalla 2015-03-01 a las 1.52.52 p.m.

Captura de pantalla 2015-03-01 a las 1.53.03 p.m.

Aspectos importantes para realizar un User Flow:

  • Los clientes no llegan a una página sin un medio o fuente de comunicación, por eso es importante trazar cómo llegan al sitio. Y crear estrategias de posibles entradas, algunos son:

-Búsqueda orgánica: se realiza por Google con ayuda de una o varias palabras claves.
-Publicidad pagada: son por medio de banners o algunos avisos virtuales que quizá estén en otras páginas.
-Medios sociales: publicaciones que realizan amigos de Facebook o Twitter u otro sitio social.
-Correo electrónico: enlaces enviados por otros o por la misma empresa.
-Pulse o noticias: menciones que realizan en diferentes noticias o algún blog.
-Enlace directo: es cuando un usuario ya conocedor del sitio se sabe el URL de memoria o tiene presente la ruta de entrada.

  • Para diseñar un buen User Flow es importante comprender a el usuario y saber sus motivaciones, y es importante responder ciertas preguntas como:

-¿Por qué necesita el sitio web?
-¿Qué necesidades o deseos tiene?
-¿Cuáles son sus problemas?
-¿Qué acciones debe realizar?

  • Se debe tener en cuenta qué información y de que tipo necesita el usuario para entender y mejorar su navegación. Al igual, se debe saber como manejarla, se recomienda manejar un “movimiento hacia abajo de embudo”, diagramar de una forma en que se optimice el contenido de cada pantalla mostrando un recorrido hasta la información deseada.

Ejemplos:

3n42U

diagrama-estados

speakerrate-highlevelflow

Bibliografía:

 

 

Análisis de Sitios web

5 Mejores sitios web

1.   link: http://www.cinecolombia.com/caliCaptura de pantalla 2015-02-25 a las 1.24.01 a.m.

Para iniciar creo que hubo un buen grupo de trabajo en la elaboración de la página web, creo que cada uno pensó en problemas futuros desde sus áreas y realizaron una buena lluvia de ideas pensando en el usuario. El arquitecto de la información, considero que no solo piensa en el interés propio de la empresa, sino en el usuario y la idea de facilitarle en lo que más se pueda la experiencia de informarse efectivamente de los servicios que ofrecen.

Cuando se entra a la página desde el inicio sin conocer cine Colombia se puede entender que ofrecen y que información me quieren transmitir. Utilizan esquema organizacional ambiguo, manejando públicos específicos, temas e hipertextos. Y también manejan esquemas organizacionales exactos, por cronología, por ejemplo tiene un orden con las fechas de estreno.

Es fácil navegar en la página y es difícil perderse, ya que maneja una navegación constante, jerárquica y un orden claro. La información que manejan es clara y exacta, juegan también con los espacios, saben postrar una cierta información pequeña al inicio y sí hay alguien que le interese puede entrar e informarse con mayor profundidad. El filtro de búsqueda le facilita al usuario la no saturación de información.

Maneja un sistema de navegación global y jerárquica. Dependiendo de lo que se valla escogiendo, van apareciendo más opciones, lo cual me facilita llegar y encontrar lo que quiero. Manejan barras de navegación, menú desplegable y tablas de contenidos.

Tienen sistema de etiquetados de navegación, encabezamiento y enlaces. Es consistente, claro, eficiente y especifico. Las palabras que componen el sistema de etiquetado son para todo el publico, fáciles de entender. El tipo de usuario es general, busca llegarle a cualquier persona que este interesado en cualquier tipo de película. Y necesariamente no necesitan conocer la empresa o alguna sala de cine.

Cuentan con un motor de búsqueda propio, dependiendo de las palabras o palabra que busque tienen un filtro de resultados por fechas, estados, género, ciudades y país de origen, lo cual me facilita la búsqueda de lo que deseo encontrar. Utilizan principalmente la metáfora organizacional, ya que buscan familiarizar el usuario con el espacio de las salas de cines y el nuevo entorno web.

2.  link: http://www.apple.com/la/mac/

Captura de pantalla 2015-02-25 a las 1.26.18 a.m.Se ve un manejo grupal de trabajo compactado y bien logrado. Se nota que cada equipo logró su objetivo, cumpliendo con los objetivos planteados para desarrollar de una excelente manera esta página web. Considero que el arquitecto de la información pensó tanto en el usuario como en los objetivos de la empresa.

Al entrar a la página se ve un orden, una seguridad y una gran facilidad de búsqueda. Intentan no llenar de información al usuario, sino que por el contrario, por medio de filtros se pueda navegar sin saturar el sitio web. Utilizan un esquema organizacional ambiguo de formar tópica y por hipertextos. Algunos de sus menús lo utilizan con imágenes de sus productos en tamaño prudente y acompañado de su nombre, buscando contextualizar al usuario y definirle si quiere entrar o no. Este me parece un buen recurso, ya que por medio de la imagen visualizan el producto de forma general, y no necesita entrar y perder tiempo navegando en diferentes productos que quizá no sea el que él necesitaba.

Su reto organizacional más grande considero que es la heterogeneidad, ya que no se dividen por diferentes perspectivas, pero si tiene en cuenta la diversidad de servicios que necesita el usuario. Lo saben compactar muy bien e incluso hace sentir que no tuviera toda la información que presenta la página.

Implementan el sistema de navegación global y jerárquica. Estas son bien utilizadas y ayudan en la navegación ordenada de la información. El elemento de navegación más notorio es la barra de navegación, la cual permanece constantemente durante las páginas sin importar en que sesión del sitio web este.

El sitio esta bien contextualizado y cuenta con una jerarquía visual, saben manejar las proporciones e importancias de cada elemento que compone el sitio web. Cuenta con tipos de etiquetado de enlace y de encabezamiento. Es consistente, efectiva, especifico e inequivocado, y muestra un conjunto totalmente ordenado. Las palabras son guiadas para un usuario conocedor de esta tienda y de la marca. Tienen un público especifico, pero aún así se logra navegar y entender fácilmente.

Tiene un buscador propio del sitio web, guiado específicamente para esta tienda. Ayuda evidentemente en la búsqueda y en la facilidad de encontrar la información sin necesidad de navegar por diferentes páginas.

Por ultimo, se puede identificar el uso de la metáfora funcional, debido a que relaciona las tareas y productos que deseamos buscar en la vida real pero enfocado en el sitio web.

3.  link: http://www.alpina.com.co

Captura de pantalla 2015-02-25 a las 1.27.22 a.m.Tiene un buen equilibrio informativo, organizacional y visual. Se puede decir que los grupos de trabajo realizaron de buena forma su trabajo. Al usuario entrar a la página puede navegar fácilmente, es claro entender las opciones e informaciones que implementan.

Utilizan de forma general esquemas organizacionales ambiguos por temas e hipertextos. Y de forma especifica maneja un esquema organizacional exacta por alfabético, como por ejemplo, la forma de organizar sus productos. Su reto organizacional es heterogéneo, por vínculos, imágenes, textos, esquemas desea mostrar toda la información. Facilita la navegación y buen orden de la información. El sistema de navegación es jerárquico, global y local, intenta manejar toda la información de forma ordenada pero que a la vez pueda navegar libre por diferentes áreas del sitio que le interese, y también algunos vínculos lo llevan a otras páginas.

Implementa elementos de navegación por menú desplegable, barras de navegación y tablas de contenido. El sitio web es bien contextualizado, con jerarquía visual y fácil navegación. Y maneja diferentes tipos de etiquetado, como el de enlaces y encabezamiento, lo cual le ayuda a ser consistente, eficaz y entendible para todos. Además, utiliza palabras comunes para todo el público. El usuario no necesariamente debe ser consumidor estándar de este sitio web, es fácil de entender para toda persona.

Tiene un motor propio de búsqueda, guiando la información a los temas de la página. Su buscador es eficiente, permitiéndole al usuario encontrar de otra manera información que quizá no ve a simple vista o necesita algo más especifico. El filtro de búsqueda es bien manejado, guiando al usuario y ayudándole.

Para terminar el análisis de este sitio web, se puede decir que utiliza una metáfora funcional, relacionando acciones y servicios que ofrecen en la vida real con la página.

 4.   link: http://www.rolex.com/es

Captura de pantalla 2015-02-25 a las 1.31.33 a.m.Es una página elegante, sutil y minimalista. Visualmente es agrádame y limpia. Hubo un buen manejo de equipos de trabajos, con una perspectiva tanto para el usuario, buscando mostrar sutilmente los intereses de la página. El arquitecto de la información tuvo en cuenta la organización y funcionamiento eficaz del sitio web. El usuario puede navegar y entender fácilmente la página sin necesidad de ser un cliente especifico de la tienda, pero de igual forma piensan principalmente en sus clientes fieles.

El esquema organizacional que se utiliza es ambigua de tipo tópica e hipertexto. Proponen otra forma de organizar la información, la cual es por medio de imágenes, le genera al usuario una experiencia grata para encontrar lo que desea. Su reto organizacional va guiado a la heterogeneidad, se ayuda de variedad de imagines, videos, textos, entre otros. Gracias a estos componentes la información se vuelve ordenada y facilita la navegación.

Utiliza un sistema de navegación global, busca permitirle al usuario la navegación en diferentes espacios sin importar donde este. Maneja elementos de navegación por barra de navegación, tablas de contendió y migas de pan. Positivamente la contextualización es clara y hay manejo de jerarquía visual.  Maneja tipos de etiquetados de enlaces y encabezamiento, convirtiendo la página consistente, efectiva y especifica. Maneja palabras claves y entendibles para el público en general.

Implementa su propio motor de búsqueda, con limites y filtros efectivos, ayudando al usuario. E inclusive usa “cookies”, lo interesante es que en la misma página explican qué es e implementa un espacio para advertirle al usuario que lo utilizan. Comentan que la idea es ofrecer por medio de la página web seguridad, eficaz y buena usabilidad.

 5. link: http://www.manantial.com/home/index.php

Captura de pantalla 2015-02-25 a las 1.33.56 a.m.Se percibe una homogeneidad tanto del producto como la experiencia que desea transmitir el sitio web, este me parece un punto realmente importante, y el cual vuelve único e interesante. Se ve el aporte de cada grupo de trabajo, y el liderazgo del arquitecto de la información. Buscan organizar, vender, informar, y más que eso, quieren transmitir y hacer sentir al usuario.

Utiliza esquemas de organización ambiguo de tipo tópico, metáforas guiadas e hipertextos. Y en partes especificas se ve un esquema organizacional exacto de forma geográfica. Como reto organizacional principal es la heterogeneidad, la página esta compuesta tanto de gráficos, imágenes, textos, mapas, formularios, y todas están guiadas al fin de compactar y organizar.

Implementan un sistema de navegación jerárquica y global, son bien usadas ayudando a una mejor navegación, y nunca el usuario se pierde, siempre permanecen en contacto con los menús y nunca sale de este sitio por algún vinculo. Maneja barras de navegación y menú despegable como elementos de navegación. Los tipos de etiquetado que usa son de enlaces, navegación y de encabezamiento, convirtiéndola consistente, especifica y efectiva. Las palabras que manejan son claras para todo público. Cualquier usuario puede entrar a esta página, sin importar si sabe o no lo que quiere.

Considero que la navegación es fácil, la organización de la información es notoria, es contextualizada y maneja buena jerarquía visual. Es notorio que tuvieron un buen proceso y de conceptualización.

5 Peores sitios web

1.  link: http://www.lamega.com.co

Captura de pantalla 2015-02-25 a las 1.34.41 a.m.Analizando esta página me doy cuenta que jerárquicamente y visualmente tiene un problema muy grande. La organización de la información es difícil de entender, y buscan mostrar muchas cosas al mismo tiempo.

Maneja esquemas de organización ambiguo, como la tópica, la metáfora guiada e hipertextos. Su reto organizacional más grande es la heterogeneidad. Pero al intentar unir tantos temas la organización cansa visualmente. El sistema de navegación es global y local, muchos de los vínculos que maneja me llevan a otras páginas. La navegación llega a ser confusa. Utiliza etiquetado de enlaces, navegación y encabezamiento, para mi opinión maneja mucha cantidad de etiquetas.

Al intentar informar tanto considero que no muestra una información eficiente, utilizan palabras comunes para la mayoría del publico, pero aún así no es tan consisten. El tipo de usuario debe ser una persona no especifica, sino que por el contrario quiera navegar e ir buscando información de interés. Ellos tiene un público especifico, piensan en los jóvenes que escuchan el tipo de música que ellos ofrecen en la radio.

 No tiene un filtro de búsqueda especial, y no tiene un motor de búsqueda propio, maneja el de google. Esta página busca tanto vender, como generarle una experiencia al usuario, generando una recordación con temas de interés relacionado con música, cine y deportes. Negativamente veo que maneja mucha publicidad.

El arquitecto de la información debió pensar más en la mostrar y vender los intereses de la empresa que en la facilidad de navegación del usuario. De pronto les falto hacer pruebas de usuarios y replantear los filtro de navegación. Y La metáfora principal que debieron usar es la funcional, relacionando las tareas y acciones de la vida real y lo escuchado en la radio, con la organización y etiquetado de la página web.

 2.  link: http://www.canalrcn.com

Captura de pantalla 2015-02-25 a las 1.34.25 a.m.Como usuario, al ver la página a simple vista, me da la impresión de una gran satura de información. Supongo que los grupos de trabajos no estuvieron bien compactados, generando mucha información y material gráfico y publicitario, pero olvidando la organización y una armonía visual.

Implementan esquemas organizacional ambiguo de forma tópica y de hipertexto. Intenta manejar un esquema organizacional exacta de tipo cronológico en el orden de mostrar la información, los capítulos de cada novela, noticas, entre otras. Aunque creo que esta ultima no es bien manejada, se supone como usuario que si esta ordenado de esa manera pero visualmente es confuso.

Su reto organizacional es de tipo heterogéneo, con imágenes, textos, títulos buscan complementar todos los temas que utilizan. Dificulta la navegación y el orden de la información. Tienen un sistema de navegación local y global. Algunas vínculos abren a otras páginas. Utiliza elementos de navegación como la barra de navegación y tabla de contenidos. Y sus tipos de etiquetado es de enlace y de encabezamiento, los enlaces son notorios en las diferentes fotos que manejan.

Hay problemas de consistencia, puede manejar toda la información pero su organización dificulta la efectividad de este sitio. Positivamente, maneja palabras comunes y esta guiado para su público.

No tiene un motor de búsqueda, ni propio, ni implementado de otro sitio. No filtran la navegación e información para el usuario, sino que le muestran todo y que el usuario valla buscando, teniendo que leer casi todos los temas que muestra la página. Manejan una metáfora organizacional, lo que buscan es familiarizar su forma de presentar en la televisión, pero ahora por medio del sitio web.

 3.  link: http://anuntiomatic.com

Captura de pantalla 2015-02-25 a las 1.35.48 a.m.En primer lugar claramente no hay un grupo de trabajo conformado para realizar este sitio web. Parece que fuese realizado con una sola perspectiva, y con una clara ausencia de un arquitecto de la información. La perspectiva de cualquier usurario al ver este sitio web es caótica, porque no hay un orden, ni jerarquiza, y los recursos gráficos son decadentes.

Claramente no hay un esquema de organización, ni ambigua, ni exacta. Intenta manejar un reto organizacional de diferentes perspectivas, ya que esta guiado a cuatro diferentes países. Pero tampoco tiene sistema de navegación, en solo una página introducen toda la información, sin manejar filtros de búsqueda o sistemas globales, locales o de jerarquía. Al igual, no maneja elementos de navegación, ni tipos de etiquetados. No tiene un buscador.

Por falta de todo esto y más, evidentemente es difícil su navegación, hay poco orden, no manejan una jerarquía visual, no hay una información efectiva, especifica e inequivocada. No se entiende el tipo de usuario al que va guiado, supongo que es para alguien que este interesado totalmente de informarse de este negocio, pero aún así su navegación es monótona y molesta.

Dudo que hallan realizado un procesos adecuado, olvidando totalmente la conceptualización del diseño. Creo que no hubo lluvia de ideas, ni pruebas de usuario, ni criticas positivas y negativas para este sitio, y menos una creación de metáforas. No pensaron en un futuro comprometedor y estable para este sitio web.

 4.  link: http://www.musica.com

Captura de pantalla 2015-02-25 a las 1.36.54 a.m.En primer lugar puedo decir que de forma general no puedo decir si tuvieron un grupo de trabajo, pero sí lo llegaron a tener no lograron un buen sitio web y evidentemente no cumplieron sus tareas, empezando por el arquitecto de la información. También se ven errores de programación, existen ciertos vínculos que no funcionan como debería ser.

Al entrar en esta página la perspectiva que refleja al usuario no es buena, es notoria la desorganización y mal manejo de la información. Los esquemas organizacionales es de forma ambigua por hipertextos y metáfora guiada, y hay un espacio de publico especifico que va dirigidos a ciertos socios, pero esto esta en una parte pequeña y solo es una parte de la página. Y de forma generar maneja la exacta por alfabético, esta es la más notoria.

Su reto organizacional es heterogéneo, provee diferentes opciones con distintos esquemas, imágenes, textos, iconos y videos, pero a la vez no los utilizan bien, pues se ve más un desorden que un implemento de la organización. Manejan un sistema de navegación global, el cual permite recorrer la página en diferentes sitios. En los elementos de navegación no utilizan menú desplegable, ni migas de pan, y no se ve una barra de navegación, pero se divide en diferentes tablas de contenidos. Esto me parece algo peligroso, desde el principio se le dan muchas opciones al usuario sin ser filtradas, lo cual puede ser un arma de doble filo, quizá el usuario ve muchas opciones y no tenga claro cual es la que necesita realmente.

Implementa un sistema de etiquetado de enlaces y de navegación, no se ve una etiqueta de encabezamiento clara. Por tanto, la vuelve poco consistente y efectiva, puede usar palabras comunes pero tiene tantas especificaciones que el usuario ya no sabe que tiene que buscar.

Dudo que hallan hecho una pruebas de usuarios a este sitio web, y creo que les falto mejorar los platos y bocetos. Creo que no implementan bien las metáforas, si es que realmente utilizaron una.

Como positivo podemos ver que tiene su propio motor de búsqueda, quizá esto ayuda un poco a disminuir la perdida de usuarios. Este debe saber específicamente que quiere buscar, no creo que la página implemente una buena experiencia de usuario, logrando que alguien que no sepa que es lo que quiere la utilice.

 5.   link: http://www.taringa.net

 Captura de pantalla 2015-02-25 a las 1.37.40 a.m.Analizando este sitio web me doy cuenta que tiene poca implementación de los conceptos que hemos aprendido, hay una falta de equipo y en especial de un buen arquitecto de la información. Pienso que una persona se pierde fácilmente, e incluso yo no entiendo, es confusa.

Lo que capto es que intenta utilizar un sistema organizacional de tipo ambiguo de forma tópica. No veo bien implementado algún reto organizacional, pero supongo que utiliza el heterogéneo, al manejar diferentes recurso, como imágenes, videos, textos y listas. La navegación quizá llega a ser confusa, creo que el que use esta página debe ser un usuario que sepa lo que quiere y que sepa donde buscarlo, porque la página no ayuda mucho para lograrlo.

 Maneja un sistema de navegación jerárquico y global, busca permitirle al usuario la navegación en todo su sitio web e intenta darle un orden a la información. Usan elementos de navegación como una parte pequeña de menú despegable, barra de navegación y tablas de contenido. Se ayudan con dos tipos de etiquetas, la cuales son de enlaces y de encabezamiento. La información no es eficiente, ni consistente. Implementan palabras comunes, cuentan con un buscador , pero los resultados que tira no son solo de esta página es a nivel general e incluso me salieron temas que ni tenia que ver.

 Considero que les falto una mejor planeación y ejecución efectiva de este sitio web. Tienen muchos problemas conceptuales, los cuales traen problemas inmediatos y a futuros. Hay formas más eficaces de organizar y manejar una página como esta.

Historia y existencia de la Arquitectura de Información

Para entender la arquitectura de la información en gran medida es necesario conocer su historia. Richard Saul Wurman creó el término de “arquitectura de la información” en 1976, expresándolo como una profesión encargada de aclarar y organizar. Pero en ese momento no generó gran atención, hasta 1994 cuando aparece la web cambiando la perspectiva y empezando a existir muchos arquitectos de la información.

En la primera mitad de los noventa se empezó a ver este trabajo como una buena oportunidad profesional. Los empezaron a llamar “webmasters” u otros nombres difíciles de entender, pero lo importante es que el trabajo estaba y podían jugar con los sitios web. Pero gracias a Mr. Wurman se empezó a emplear el termino de “arquitectura”.

Pasando el tiempo se fueron volviendo más y más conocidos, siendo buscados por empresas de internet y abreviando su nombre a “IA” (information architecture). Había variedad de profesionales siendo arquitectos de la información, desde la bibliotecaria hasta diseñadores industriales. Se empezaron a crear libros y empresas solo enfocadas en este tema especifico, se crecieron rápidamente las consultorías especializas en diseño web, crearon tarjetas y departamentos con ese título. Fue conocido como los años dorados donde el auge de esta profesión empezó a cobrar vida, y para culminar estos años realizaron la primera conferencia de arquitectos de la información en Octubre del año 2000.

En el 2001 empezaron a caer las empresas de tecnología y con ella los arquitectos de la información. Llegando al problema de que ya había dificultad de explicar la funcionalidad e importancia del arquitecto para una organización. Esto llevo a que algunos arquitectos se dispersaran y empezaran a trabajar en cargos diferentes, otros se fueron a trabajar por cuenta propia en el entorno de la web.

Hoy en día han creado números nuevos libros de este tema, existen diferentes blogs y asociaciones. El titulo de “arquitecto de la información” sigue existiendo, quizá ahora compita y se confundan con otras áreas, pero igual esta profesión ha vuelto a surgir y a intentar volver a ser reconocida como hace unos años. El futuro no es claro para esta profesión, pero sí es seguro que a medida que pasa el tiempo siguen siendo necesarios sus servicios. La dificultad de ser entendidos va ir mejorando a medida que la tecnología avanza y las necesidades se incrementan.

Información basada en: http://iainstitute.org/es/translations/000334.html

«Arquitectura de la Información»… Realmente necesaria en nuestras vidas

Como arquitectos de la información debemos tener en cuenta que cada sitio web que realicemos tiene objetivos distintos. Se debe comprender el propósito de cada uno, para así organizar y crear un lugar acorde, pues cada sitio es único. Las áreas que se necesitan para construir un sitio web son indispensables, sin importar su cargo, cumplen un papel importante en conjunto, hay que tener presente que «todos los elementos han de funcionar juntos».

Es fundamental que la experiencia del usuario en el sitio web sea satisfactoria. Sí el usuario se pierde o tiene dificultad en encontrar y realizar lo que necesita, este sitio es inútil y poco eficaz, posiblemente la gente no querrá volver a utilizarlo. Cuando pasa este tipo de cosas lo más seguro es que los realizadores del sitio web no diseñaron, ni pensaron bien la creación, se pudieron saltar ciertos pasos que a largo plazo se vuelven evidentes.

La definición de «arquitectura de la información» no es única, y entenderla como un significado global es complejo, primero se debe comprender algunas palabras como: información, estructura, organización, rotulación, encontrar y utilizar, arte y ciencia. Son palabras que se utilizan en diferentes entornos y se cree ser entendidas por todos, pero estas palabras son las que le dan un significado específico y acorde a la «arquitectura de la información». Sí nos interesamos por la información en todas sus formas (documentos, imágenes y demás) y sus metadatos (describir y representar), pero a su vez aprendemos a estructurar, organizar y rotular la información volviéndola eficaz y comprendible, sin olvidar la importancia de que el usuario encuentre fácilmente lo que busca, y manejando estos aspectos con arte y ciencia, se lograrán diseños usables y acorde a las necesidades del usuario, llegando al significado que buscamos.

Los conceptos de arquitectura de la información aplican tanto en el mundo impreso como el web. Tanto los libros como los sitios web necesitan de una organización, selección, evaluación, etiquetación, entre otros aspectos para facilitar la experiencia del usuario. Aunque también existen diferencias entre estas dos, el mundo de las bibliotecas y libros son espacios físicos que limitan nuevas experiencias, por el contrario el mundo web abre nuevos retos que llegan hacer flexibles y complejos.

Explicar realmente qué es un arquitecto de la información es un tarea difícil, y esta varia dependiendo del público a que se explique. Es diferente explicárselo a los familiares o amigos que estén relacionados de alguna forma en este cambio. Siempre es difícil explicarlo y encontrar las palabras correctas para cada tipo de público. El arquitecto de la información es comparado y asociado con otros campos como el diseño gráfico, diseño de interacción, desarrollo de software, ingeniería de usabilidad, diseño de la experiencia, entre otros campos. Pero un arquitecto de la información no es ninguno de estos, normalmente lo asemejan pero no cumple estas funciones.

Realmente es importante que todos entiendan el valor de la arquitectura de la información, suena mínimo pero tener un mal manejo en este campo puede significar mucha perdida de dinero en una empresa. Puede traer la perdida de clientes por no saber manejar y utilizar la aplicación, puede causar que los empleados se demoren tiempo valioso intentando navegar en un sitio web en el que no encuentran específicamente lo que buscan y es tiempo valioso que le cuesta a la empresa. A veces se piensa en lo barato de algunas páginas pero eso barato sale caro, pues son las páginas que más rápido hay que reconstruirlas, arreglarlas y mantener en mantenimiento. Como dueños de empresa hay que pensar en la calidad, imagen y beneficios del usuario, en vez de pensar en lo que se cree va a ser más económico.

arquitectura_informacionEl trabajo de un arquitecto de la información es intangible, por ese motivo la gente no lo valora, ni entiende. Para los usuarios es bueno que sea invisible pues es la idea de un arquitecto de la información, pero para los colegas o jefes de trabajo así medio entiendan nuestra labor de igual forma lo ven sin importancia y sin ser algo totalmente necesario. Es bueno que se empiece a valorar y entender, debemos explicar bien lo que hacemos, hacerles entender que más que ver un sitio web bonito es saber compactar cada elemento que la compone.

Información basada en: http://iainstitute.org/es/translations/arquitectura_de_la_informacion_para_la_red_capitulo_1.php

¿Soy un arquitecto de información?

Como diseñadores de medios interactivos debemos ser excelentes arquitectos de información. Cualquier proyecto que realizamos sin importar el tema, cliente o formato de trabajo debemos estudiar, organizar y analizar cada paso que ayude a mostrar la información de una manejar eficaz y conveniente para el usuario.

Podemos realizar perfectos gráficos, mezclar bien colores, utilizar textos adecuados, generar una excelente programación, unas tomas increíbles con sonidos especiales, entre otras cosas, pero sí no sabemos organizar adecuadamente la información, no realizamos aplicaciones fáciles, no se generan estrategias, no pensamos en la verdadera necesidad del cliente y no generamos satisfacción al usuario, no somos verdaderos arquitectos de información.

Debemos preguntarnos sí solo buscamos hacer cosas llamativas y agradables visualmente o sí aparte de eso queremos marcar experiencias, satisfacciones, y gran eficiencia al usar o ver nuestros proyectos. Nosotros somos los responsables de que nuestros trabajos sirvan y generen una diferencia contundentes con otros. En este momento es bueno empezar a querer ser unos excelentes arquitectos de información, generar buenas ideas, apoyarse en un buen equipo de trabajo, probar lo que realizamos así sea con los padres o vecinos, y empecemos a rayar y plasmar primero nuestras ideas en papel.

Es decisión nuestra lo que vallamos hacer con los conceptos que nos enseñan en la universidad, es momento de marcar una diferencia y volvernos unos eficientes diseñadores de medios interactivos siendo unos buenos arquitectos de información.

Análisis de las Infografías

SUSHI

  • Diseño: Se entiende la información con un concepto claro, tiene un buen orden y alineación. La tipografía es clara, ordenada con un buen uso de jerarquías generando una buena lectura y agrado al verla.       Rank: 100
  • Infográfico: Maneja buen recurso infográfico con variedad y recursividad para la explicación que quiere mostrar.  Por medio de estos recursos se logra entender fácilmente la información.       Rank: 100

Los mejores personajes de CHESPIRITO

  • Diseño: La información es clara con un concepto de diseño limpio y ordenado. La tipografía es entendible y con un buen orden, manejando jerarquías de color y tamaño. Maneja un estilo limpio.  Mejoraría el orden de los textos, en algunas partes quedan espacios que podrían ser mejor utilizados, y algunos títulos y subtítulos bien ordenados. Rank: 80
  • Infográfico: De pronto le falta un poco de recursos infográficos, pero los que maneja los utiliza de buena manera. Se logra entender la información, aunque maneja algunos textos que podrían ser más gráficos buscando generar una mayor facilidad al usuario de entender la información.    Rank:70

Paint Ball 

  • Diseño: Tiene muchos elementos juntos que quizá logra confundir  al usuario para entender la lectura de la información. Es un poco desordenada para mi concepto y no alineado, aunque a pesar de eso se entiende la información aunque cuesta un poco. La tipografía entiendo que tiene que busca estar relacionado con el estilo del tema que se maneja, pero solo la manejaría en los títulos porque cuesta un poco su legibilidad, y creo que no tiene un buen uso de jerarquías.  Utiliza elementos gráficos que conceptualizar el tema y visualmente se ve bien. Rank: 60
  • Infográfico: Maneja algunos recursos infográficos con variedad que se entienden y funcionan bien. De pronto el desorden visual logre no apreciarlos totalmente pero se ve que los maneja. Rank: 80

GOKU

  • Diseño: Se entiende la información, maneja un orden y alineación.  Considero que tiene mucho texto pero la tipografía que maneja es legible y se entienden, aunque molesta un poco la forma de leer en la parte donde se ciñe el texto, las palabras  se cortan mucho y cansa visualmente la lectura. Le falta manejar más la jerarquía de los textos, no se asume bien qué es lo más importante de leer, es un poco plana la lectura.  Rank: 70
  • Infográfico:  Utiliza pocos recursos infográficos con poca variedad. Los recursos que maneja los intenta maneja bien.   Rank: 60

LCANSE TASER

  • Diseño: Se entiende la información, maneja un orden en toda la pieza con una alineación y división de los temas claramente. Tiene una tipografía legible, ordenada, unida y con un buen manejo de jerarquía, generando un bueno orden de lectura. Rank: 100
  • Infográfico: Maneja varios recursos infográficos con variedad. Es entendible y con buena calidad. Rank: 100

E SPORTS

  • Diseño: Cuesta entender un poco la información, visualmente se ve desordenado y con el manejo del color se pierde la lectura clara de la infográfia como tal. La tipografía es legible, aunque poco ordenada y unida. No maneja una buena jerarquía. Rank: 50
  • Infográfico: Maneja varios recursos infográficos, aunque creo que le falto un mejor manejo visual y conceptual, pudo realizarlo visualmente más agradable para el usuario. Rank:70

FERIAS FIESTAS Y CARNAVALES DE COLOMBIA

  • Diseño: La información se entiende claramente, utiliza retículas ordenadas y alineadas. La tipografía es legible, ordenada y clara. Maneja buena jerarquía y un buen orden visual. Rank:100
  • Infográfico: Maneja en casi toda la infografía recursos infográficos, pero considero que le falto variedad en el sentido de que en casi toda maneja el mismo recurso.  Pero la calidad de los recursos es buena, se entiende lo que quiere informar. Rank: 80

The Aloha State

  • Diseño: Se entiende la información, maneja un orden y alineación.  La tipografía es legible y ordenada, emplea buena jerarquía. Creo que pudo dar un texto introductorio o de información aparte de los datos que menciona para entender un poco más. Rank:80
  • Infográfico: Aplica variedad y buenos recursos infográficos. Se entiende la información por medio de icnos. Rank:100

MICHAEL JACKSON: El rey del pop

  • Diseño: La información se entiende bien, es ordena y alineada. La tipografía es legible, unida y bien distribuida. Tiene orden de lectura. Rank:100
  • Infográfico: Tiene un buen manejo de los recursos infográficos y utiliza variedad en ellos. La calidad de los recursos es buena, se entiende. Rank:100

COOL BEER

  • Diseño: La información se entiende claramente, maneja un buen orden y alineación.  La tipografía es entendible y aplica retículas claras. Tiene buen uso de jerarquías. Rank:100
  • Infográfico: Tiene buenos elementos de recursos infográficos con variedad y se entienden. Rank:100

XENOMORFO

  • Diseño: En la impresión la información no se entiende bien por el tipo de impresión que realizo, pero ya viéndola digital si se acerca a ver se puede reconocer lo que dice. Maneja un orden y distribución buena en la infografía. La tipografía puede estar con un cierto orden pero cuesta leer por su fuente, en especial la parte de los textos grandes, el titulo si se lee y se entiende que se busca ese estilo que maneja. Maneja un poco de jerarquía.  Rank:60
  • Infográfico: Tiene variedad en los recursos infográficos y tiene coherencia con lo que esta en el texto.   Rank:100

Hipster ¿Cómo reconocerlos?

  • Diseño: La infografía se entiende muy bien. Tiene un orden aunque creo que le falta orden de lectura. La tipografía es entendible, no maneja jerarquías marcadas, el texto inferior se mezcla con lo principal que es el muchacho con sus características. Y la tipografía tiene problemas con los espacios de cada palabra, en algunos es mucho más abiertos que en otros y es muy notorio.  Rank:80
  • Infográfico: Tiene varios recursos infográficos pero pienso que los podia manejar mejor, debido a que se mezclan y se pierden en el desorden, en especial en la parte de abajo.   Rank:70

The Beatles

  • Diseño: Es muy entendible, maneja buena retícula con un orden y alineación clara. La tipografía es legible y ordenada. Se nota las jerarquías dejando una buena claridad en la lectura de la infografía.   Rank.100
  • Infográfico: Maneja variedad en los recursos infográficos, se entienden y los distribuyó muy bien.  Rank.100

¿Cómo funciona el MIO?

  • Diseño: La información que maneja es entendible, ordenada y alineada. La tipografía es entendible y la usa bien. Utiliza un buen orden jerargico.  Rank:100
  • Infográfico: Tiene varios recursos infográficos y los maneja bien, se logra entender la información.  Rank:100

TWO DOTS

  • Diseño: La información es totalmente entendible. Maneja reticula, con buen orden y alineación. La tipografía es legible, ordenada y unida. La jerarquía es ordenada y se logra leer claramente todo entendiéndose fácilmente, de hecho me provoco descargar el juego.  Rank:100
  • Infográfico: Maneja diferentes recursos infográficos, y los que utiliza se entienden muy bien.   Rank:100

SIRIA EN GUERRA

  • Diseño: La información que maneja es entendible, de pronto me gustaría que hubiera hecho una introducción para ubicar a la gente que no sabe exactamente de que esta hablando, como yo. Tiene orden y alineación, la tipografía es legible y ordenada. Maneja jerarquías y se entienden.  Rank.80
  • Infográfico: Maneja variedad en los recursos infográficos y se entienden claramente. Rank:100

Conoce tu equipo fotográfico

  • Diseño: La información es entendible, maneja un orden y alineación clara. La tipografía es legible y se logra captar toda la información. Maneja jerarquía y orden de lectura.   Rank:100
  • Infográfico: Maneja bien y con variedad los recursos infograficos. Rank: 100