Desarrollo de Aplicaciones para Internet Clase 2: Arquitectura de la Información.

“La mayoría de la gente piensa que el diseño es una chapa, es una simple decoración. Para mí, nada es más importante en el futuro que el diseño. El diseño es el alma de todo lo creado por el hombre.” Steve Jobs

Temáticas de la Clase Qué es la arquitectura de la información. Disciplinas donde se puede aplicar. Concepto de “usabilidad” La importancia de la ADI en diseño Web.

Arquitectura de la Información El término "Arquitectura de la Información" fue utilizado por primera vez por Richard Saul Wurman en 1975, quién la define como: “El estudio de la organización de la información con el objetivo de permitir al usuario encontrar su vía de navegación hacia el conocimiento y la comprensión de la información”.

El arte y la ciencia de estructurar y clasificar sitios web e intranets con el fin de ayudar a los usuarios a encontrar y manejar la información. La arquitectura de la información de un sitio web, como resultado de la actividad, comprende los sistemas de organización y estructuración de los contenidos, los sistemas de rotulado o etiquetado de dichos contenidos, y los sistemas de recuperación de información y navegación que provea el sitio web.

¿Qué es arquitectura de la información? Es diseñar entornos de información para ser compartidos con los usuarios. Es el empleo y configuración de los sistemas de etiquetado, navegación, búsqueda y menús que permiten la organización de un sitio web o intranet. Es el método científico-práctico relativo a los productos de información, su constitución, configuración desde el enfoque de la usabilidad, accesibilidad y la recuperación de información.

Cuál es la razón de ser de la arquitectura de la información El coste de encontrar la información El coste de no encontrar la información El valor de educar al usuario El coste de construir un sitio web El coste de mantener el sitio web El coste de enseñar a encontrar la información en el sitio web

ARQUITECTO DE INFORMACIÓN 1. El individuo que organiza los patrones inherentes en los datos haciendo claro lo complejo 2. La persona que crea la estructura o mapa de información que posibilita a otros encontrar sus propios caminos hacia el conocimiento. 3. Una profesión emergente en el siglo 21 que trata acerca de las necesidades de la era, enfocada hacia la claridad de la comprensión humana y la ciencia de la organización de la información.

Hipermedia La hipermedia surge como resultado de la fusión de dos tecnologías, el hipertexto y la multimedia. El hipertexto es la organización de una determinada información en diferentes nodos, conectados entre sí a través de enlaces. Los nodos pueden contener sub-elementos con entidad propia. Un hiperdocumento estaría formado por un conjunto de nodos conectados y relacionados temática y estructuralmente.

La tecnología multimedia es la que permite integrar diferentes medios (sonido, imágenes, secuencias...) en una misma presentación. La hipermedia, por tanto, es la tecnología que nos permite estructurar la información de una manera no-secuencial, a través de nodos interconectados por enlaces. La información presentada en estos nodos podrá integrar diferentes medios. (texto, sonido, gráficos...).

Diseño de la Información El usuario, ante una página web realiza un barrido visual de ésta, ojeando "a saltos" la pantalla, discriminando automáticamente la información que no le interesa y centrando su atención en la que si. Un buen diseño de la información, desde el punto de vista organizativo y de su usabilidad, será aquel que ayude al usuario a encontrar la información que busca de la forma más fácil, rápida y cómoda posible.

Diseño de la Información La redacción de los contenidos debe realizarse en un lenguaje entendible fácilmente por los potenciales usuarios del sistema, huyendo de tecnicismos complejos, abreviaturas innecesarias o acrónimos poco comunes.

Para facilitar la exploración de la información por parte del usuario debemos jerarquizarla: Aumentando el tamaño de los textos de mayor importancia (títulos, subtítulos...) Agrupando la información que esté relacionada Utilizando efectos tipográficos (negrita, cursiva...) para enfatizar contenidos. Utilizando el contraste en el color para discriminar y distribuir informaciones. Posicionando la información más relevante en zonas visuales superiores. Si el usuario no se ve obligado a utilizar la barra de desplazamiento para encontrar la información que busca (o el enlace que le lleve hacia ella), ahorrará tiempo en su búsqueda y tendrá más probabilidades de encontrarla.

Diseño de la Navegación El diseño de la navegación consiste en definir la arquitectura de nuestro hipermedia: elementos de interacción entre el usuario y el sistema, enlaces y tipos de enlaces entre los nodos, agrupación de los nodos por categorías o propiedades, y respuestas del sistema ante peticiones del usuario. Para diseñar la navegación podemos usar el vocabulario gráfico propuesto por Jesse James Garrett para la descripción de la arquitectura de la información y el diseño de la interacción: http://www.jjg.net/ia/visvocab/spanish.html

DEFINICIÓN DE LOS CONTENIDOS ¿Qué factores influyen en la selección y producción de los contenidos? - La misión. - El tipo de audiencias. - Los servicios y las funcionalidades. - Las características de la organización productora.

Usabilidad y accesibilidad La usabilidad - anglicismo que significa "facilidad de uso" - como indican Bevan, Kirakowski, y Maissel (1991) parece tener su origen en la expresión "user friendly", que es reemplazada por sus connotaciones vagas y subjetivas.

Numerosos autores han propuesto diversas definiciones de usabilidad, normalmente a través de la enumeración de los diferentes atributos o factores mediante los que puede ser evaluada, dependiendo finalmente cada definición del enfoque con el que pretende ser medida.

La definición más extendida, que es la ofrecida por la ISO , y que define usabilidad como el " grado de eficacia, eficiencia y satisfacción con la que usuarios específicos pueden lograr objetivos específicos, en contextos de uso específicos ".

En la definición podemos observar que la usabilidad se compone de dos tipos de atributos: Atributos cuantificables de forma objetiva: como son la eficacia o número de errores cometidos por el usuario durante la realización de una tarea, y eficiencia o tiempo empleado por el usuario para la consecución de una tarea. Atributos cuantificables de forma subjetiva: como es la satisfacción de uso, medible a través de la interrogación al usuario, y que tiene una estrecha relación con el concepto de Usabilidad Percibida.

Práctica con HTML 1. Abra el editor de textos: en Windows abra el Bloc de Notas 2. Teclee lo siguiente: <HTML> <HEAD> <TITLE>Ejemplo 1 - Mi primera pagina Web</TITLE> </HEAD> <BODY> <CENTER><H1>Mi primera pagina Web</H1></CENTER> <HR> Esta es mi primera pagina, aunque todavía es muy sencilla. <BR>Como el lenguaje HTML no es difícil, pronto estaré en condiciones de hacer cosas mas interesantes. <P> Aquí va un segundo párrafo.</P> </BODY> </HTML>

3. Grabe este archivo con el nombre: ejemplo1. html 4 3. Grabe este archivo con el nombre: ejemplo1.html 4. Abra el visualizador. No necesita conectarse a Internet para ver las páginas en su ordenador. Puede trabajar en local. 5. Elija "Archivo/Abrir página" en la barra de menú del navegador. 6. Seleccione el archivo ejemplo1.html que acaba de crear.

Algunos Caracteres especiales Carácter Especial Transcripción HTML Comentario Los acentos &<vocal a acentuar> acute; Ejemplo: ó Devuelve: ó En la actualidad la mayoría de los browsers los soportan. Símbolo menor que (<) &lt: Símbolo mayor que (>) > La eñe ñ de los browsers la soportan. Espacios en blanco   (non breaking space) HTML sólo reconoce un espacio en blanco entre Palabras.

ESTRUCTURA DE UN DOCUMENTO HTML. Un documento HTML, no es más que el texto definido entre las marcas: <HTML> ..................... </HTML> Un documento HTML siempre se compone de las siguientes 2 partes: <HEAD> Cabecera del documento </HEAD> <BODY> Contenido del documento </BODY>

Definición de párrafos: P La marca <P> sirve para separar párrafos en HTML. Además de introducir un retorno de carro, fuerza un segundo retorno de carro para dejar una línea en blanco entre un párrafo y el siguiente. De esta manera los párrafos quedan más espaciados y el texto se vuelve más legible En esta marca la etiqueta de fin es opcional. Por defecto, el párrafo de un documento HTML está justificado a la izquierda. Pero podemos modificar la alineación horizontal de un párrafo mediante el atributo ALIGN de la marca <P>, que puede tomar los valores siguientes. • LEFT: el párrafo es justificado a la izquierda. Valor por defecto. • CENTER: el párrafo es centrado. • RIGHT: el párrafo es justificado a la derecha.

Ruptura de líneas: BR. La marca <BR> introduce un retorno de carro (o salto de línea) en el punto del documento en el que es colocada. Es equivalente al punto y aparte de un texto normal. Esta marca es vacía de manera que no necesita de la etiqueta de fin de marca.

Títulos de encabezamiento HTML dispone de seis cabeceras, o tipos de letra predefinidos de distinto tamaño, que se utilizan para marcar los títulos o resaltes en las páginas. Se activan con el comando <Hn> y se desactivan con </Hn>, donde n es un número de 1 a 6. siendo el número indicativo del tamaño. El tamaño mayor es el correspondiente al número 1. <H1>Nivel de encabezado 1</H1> <H2>Nivel de encabezado 2</H2> <H3>Nivel de encabezado 3</H3> <H4>Nivel de encabezado 4</H4> <H5>Nivel de encabezado 5</H5> <H6>Nivel de encabezado 6</H6>

Estilos. Tipos de letras Algunas de las marcas que permiten especificar la tipografía de los caracteres son las siguientes: <B>Negrita (Bold)</B> <I>Cursiva (Italic)</I> <BLINK>Parpadeante (Blink)</BLINK> <TT>Tamano fijo (TypeWriter)</TT> <EM>énfasis (Emphasis)</EM> <STRONG>Gran énfasis (Strong)</STRONG> <U>Subrayado (Underline)</U>

Tamaño del texto. Para modificar el tamaño se utiliza el atributo SIZE de la marca <FONT>, de la manera siguiente: <FONT SIZE="tamaño">Texto</FONT> El comando <FONT> requiere la etiqueta de cierre. HTML define siete tamaños de letra distintos, siendo el tamaño 3 el que se adopta por defecto. Sin embargo, la mayoría de los navegadores permiten establecer cuál es lacorrespondencia real del tamaño 3. Así, se puede hacer que el tamaño 3 corresponda a una fuente Arial de 16, o a una Times de 8.

Colores del texto. Para dar color a un texto se utiliza el comando siguiente: <FONT COLOR="color">Texto</FONT> En un principio la forma de especificar un color en HTML, era mediante el formato hexadecimal. Consistía en tres números hexadecimales (números expresados en base 16) de Pág. 18 Creación de páginas Web dos dígitos cada uno. Con un número hexadecimal de dos dígitos podemos expresar hasta 256 valores distintos. El primer número hexadecimal nos va a indicar la cantidad de rojo que tiene nuestro color, el segundo la cantidad de verde, y el tercero la cantidad de azul (el blanco será FFFFFF, el negro 000000). Esta forma de definir los colores como combinación de los colores rojo, verde, y azul se denomina RGB (red - green - blue). También se adminten cadenas de texto para colores básicos como: Red, Blue, green, etc.

Listas ordenadas: OL Listas ordenadas: OL. También llamadas listas numeradas son aquellas en las que cada elemento tiene delante un número que indica el orden del elemento dentro del conjunto de la lista. La marca para crear una lista ordenada es <OL> .... </OL>. Son obligatorias las etiquetas de comienzo y fin de estas marcas. Cada elemento de la lista ordenada se identifica escribiéndolo dentro de la marca <LI> ....</LI>. La etiqueta de fin puede ser omitida. Ejemplo: <OL> <LI> Juan Pérez</LI> <LI> Luis Díaz</LI> </OL>

Listas desordenadas: UL. También llamadas listas no numeradas son listas en las que no es necesario numerar de alguna manera los elementos que la componen, sino que cada elemento tiene delante un símbolo (un punto, un cuadrado, etc..). La forma de especificar una lista desordenada es mediante la marca <UL>. Las etiquetas de comienzo y fin de esta marca son obligatorias. Cada elemento de la lista se identifica mediante la marca <LI>. La etiqueta de fin para la marca <LI> se puede omitir. Ejemplo: <UL> <LI> Juan Pérez</LI> <LI> Luis Díaz</LI> </UL>

Ejemplo 2