Desarrollo de Desarrollo de Aplicaciones para Aplicaciones para InternetInternet

Desarrollo de Desarrollo de Aplicaciones para Aplicaciones para InternetInternet

Clase 2: Arquitectura de la Información.Clase 2: Arquitectura de la Información.

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

Steve JobsSteve Jobs

Temáticas de la ClaseTemáticas de la Clase

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

Arquitectura de la InformaciónArquitectura de la Información

El término "Arquitectura de la Información" El término "Arquitectura de la Información" fue utilizado por primera vez por Richard Saul fue utilizado por primera vez por Richard Saul Wurman en 1975, quién la define como:Wurman en 1975, quién la define como:

“ “El estudio de la organización de la El estudio de la organización de la información con el objetivo de permitir al información con el objetivo de permitir al usuario encontrar su vía de navegación hacia usuario encontrar su vía de navegación hacia el conocimiento y la comprensión de la el conocimiento y la comprensión de la informacióninformación”.”.

El arte y la ciencia de estructurar y clasificar El arte y la ciencia de estructurar y clasificar sitios web e intranets con el fin de ayudar a los sitios web e intranets con el fin de ayudar a los usuarios a encontrar y manejar la informaciónusuarios a encontrar y manejar la información.

La arquitectura de la información de un sitio La arquitectura de la información de un sitio

web, como resultado de la actividad, web, como resultado de la actividad, comprende comprende los sistemas de organización y los sistemas de organización y estructuración de los contenidos, los sistemas estructuración de los contenidos, los sistemas de rotulado o etiquetado de dichos de rotulado o etiquetado de dichos contenidos, y los sistemas de recuperación de contenidos, y los sistemas de recuperación de información y navegación que provea el sitio información y navegación que provea el sitio webweb..

¿Qué es arquitectura de la información?¿Qué es arquitectura de la información?

• Es diseñar entornos de información para ser Es diseñar entornos de información para ser compartidos con los usuarios.compartidos con los usuarios.

• Es el empleo y configuración de los sistemas de Es el empleo y configuración de los sistemas de etiquetado, navegación, búsqueda y menús que etiquetado, navegación, búsqueda y menús que permiten la organización de un sitio web o intranet.permiten la organización de un sitio web o intranet.

• Es el método científico-práctico relativo a los Es el método científico-práctico relativo a los productos de información, su constitución, productos de información, su constitución, configuración desde el enfoque de la usabilidad, configuración desde el enfoque de la usabilidad, accesibilidad y la recuperación de información.accesibilidad y la recuperación de información.

Cuál es la razón de ser de la Cuál es la razón de ser de la arquitectura de la informaciónarquitectura de la información

• El coste de encontrar la informaciónEl coste de encontrar la información• El coste de no encontrar la informaciónEl coste de no encontrar la información• El valor de educar al usuarioEl valor de educar al usuario• El coste de construir un sitio webEl coste de construir un sitio web• El coste de mantener el sitio webEl coste de mantener el sitio web• El coste de enseñar a encontrar la información El coste de enseñar a encontrar la información

en el sitio weben el sitio web

ARQUITECTO DE INFORMACIÓNARQUITECTO DE INFORMACIÓN

1.1. El individuo que organiza los patrones inherentes El individuo que organiza los patrones inherentes en los datos haciendo claro lo complejoen los datos haciendo claro lo complejo

2. La persona que crea la estructura o mapa de 2. La persona que crea la estructura o mapa de información que posibilita a otros encontrar sus información que posibilita a otros encontrar sus propios caminos hacia el conocimiento.propios caminos hacia el conocimiento.

3. Una profesión emergente en el siglo 21 que trata 3. Una profesión emergente en el siglo 21 que trata acerca de las necesidades de la era, enfocada acerca de las necesidades de la era, enfocada hacia la claridad de la comprensión humana y la hacia la claridad de la comprensión humana y la ciencia de la organización de la información.ciencia de la organización de la información.

HipermediaHipermedia La hipermedia surge como resultado de la La hipermedia surge como resultado de la

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

La tecnología multimedia es la que permite La tecnología multimedia es la que permite integrar diferentes medios (sonido, imágenes, integrar diferentes medios (sonido, imágenes, secuencias...) en una misma presentación.secuencias...) en una misma presentación.

La hipermedia, por tanto, es la tecnología que La hipermedia, por tanto, es la tecnología que

nos permite estructurar la información de una nos permite estructurar la información de una manera no-secuencial, a través de nodos manera no-secuencial, a través de nodos interconectados por enlaces. La información interconectados por enlaces. La información presentada en estos nodos podrá integrar presentada en estos nodos podrá integrar diferentes medios. (texto, sonido, gráficos...).diferentes medios. (texto, sonido, gráficos...).

Diseño de la InformaciónDiseño de la Información El usuario, ante una página web realiza un barrido El usuario, ante una página web realiza un barrido

visual de ésta, ojeando "a saltos" la pantalla, visual de ésta, ojeando "a saltos" la pantalla, discriminando automáticamente la información que discriminando automáticamente la información que no le interesa y centrando su atención en la que si. no le interesa y centrando su atención en la que si.

Un buen diseño de la información, desde el punto de Un buen diseño de la información, desde el punto de vista organizativo y de su usabilidad, será aquel que vista organizativo y de su usabilidad, será aquel que ayude al usuario a encontrar la información que ayude al usuario a encontrar la información que busca de la forma más fácil, rápida y cómoda posible.busca de la forma más fácil, rápida y cómoda posible.

Diseño de la InformaciónDiseño de la Información

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

Para facilitar la exploración de la información por parte del Para facilitar la exploración de la información por parte del usuario debemos jerarquizarla:usuario debemos jerarquizarla:

Aumentando el tamaño de los textos de mayor importancia Aumentando el tamaño de los textos de mayor importancia (títulos, subtítulos...)(títulos, subtítulos...)

Agrupando la información que esté relacionadaAgrupando la información que esté relacionada Utilizando efectos tipográficos (negrita, cursiva...) para Utilizando efectos tipográficos (negrita, cursiva...) para

enfatizar contenidos.enfatizar contenidos. Utilizando el contraste en el color para discriminar y Utilizando el contraste en el color para discriminar y

distribuir informaciones.distribuir informaciones. Posicionando la información más relevante en zonas visuales Posicionando la información más relevante en zonas visuales

superiores. Si el usuario no se ve obligado a utilizar la barra superiores. Si el usuario no se ve obligado a utilizar la barra de desplazamiento para encontrar la información que busca de desplazamiento para encontrar la información que busca (o el enlace que le lleve hacia ella), ahorrará tiempo en su (o el enlace que le lleve hacia ella), ahorrará tiempo en su búsqueda y tendrá más probabilidades de encontrarla. búsqueda y tendrá más probabilidades de encontrarla.

Diseño de la NavegaciónDiseño de la Navegación

El diseño de la navegación consiste en definir la El diseño de la navegación consiste en definir la arquitectura de nuestro hipermedia: elementos de arquitectura de nuestro hipermedia: elementos de interacción entre el usuario y el sistema, enlaces y tipos interacción entre el usuario y el sistema, enlaces y tipos de enlaces entre los nodos, agrupación de los nodos de enlaces entre los nodos, agrupación de los nodos por categorías o propiedades, y respuestas del sistema por categorías o propiedades, y respuestas del sistema ante peticiones del usuario.ante peticiones del usuario.

Para diseñar la navegación podemos usar el vocabulario Para diseñar la navegación podemos usar el vocabulario gráfico propuesto por Jesse James Garrett para la gráfico propuesto por Jesse James Garrett para la descripción de la arquitectura de la información y el descripción de la arquitectura de la información y el diseño de la interacción:diseño de la interacción:http://www.jjg.net/ia/visvocab/spanish.html

DEFINICIÓN DE LOS CONTENIDOSDEFINICIÓN DE LOS CONTENIDOS

¿Qué factores influyen en la selección y ¿Qué factores influyen en la selección y producción de los contenidos?producción de los contenidos? - La misión.- La misión.- El tipo de audiencias.- El tipo de audiencias.- Los servicios y las funcionalidades.- Los servicios y las funcionalidades.

- Las características de la organización - Las características de la organización productora.productora.

Usabilidad y accesibilidadUsabilidad y accesibilidad

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

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

La definición más extendida, que es la ofrecida La definición más extendida, que es la ofrecida por la ISO , y que define usabilidad como el " 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 En la definición podemos observar que la usabilidad se compone de dos tipos de usabilidad se compone de dos tipos de atributos:atributos:

• Atributos cuantificables de forma objetiva: como son Atributos cuantificables de forma objetiva: como son la eficacia o número de errores cometidos por el la eficacia o número de errores cometidos por el usuario durante la realización de una tarea, y usuario durante la realización de una tarea, y eficiencia o tiempo empleado por el usuario para la eficiencia o tiempo empleado por el usuario para la consecución de una tarea.consecución de una tarea.

• Atributos cuantificables de forma subjetiva: como es Atributos cuantificables de forma subjetiva: como es la satisfacción de uso, medible a través de la la satisfacción de uso, medible a través de la interrogación al usuario, y que tiene una estrecha interrogación al usuario, y que tiene una estrecha relación con el concepto de Usabilidad Percibida.relación con el concepto de Usabilidad Percibida.

Práctica con HTML

<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>Comoel lenguaje HTML no es difícil, pronto estaré en condiciones de hacercosas mas interesantes.<P> Aquí va un segundo párrafo.</P></BODY></HTML>

1. Abra el editor de textos: en Windows abra el Bloc de Notas1. Abra el editor de textos: en Windows abra el Bloc de Notas2. Teclee lo siguiente:2. Teclee lo siguiente:

3. Grabe este archivo con el nombre: 3. Grabe este archivo con el nombre: ejemplo1.htmlejemplo1.html

4. Abra el visualizador. No necesita conectarse a 4. Abra el visualizador. No necesita conectarse a Internet para ver las páginas en su ordenador. Internet para ver las páginas en su ordenador. Puede trabajar en local.Puede trabajar en local.

5. Elija "Archivo/Abrir página" en la barra de 5. Elija "Archivo/Abrir página" en la barra de menú del navegador.menú del navegador.

6. Seleccione el archivo ejemplo1.html que 6. Seleccione el archivo ejemplo1.html que acaba de crear.acaba de crear.

Algunos Caracteres especialesAlgunos Caracteres especialesCarácter Especial Transcripción HTML Comentario

Los acentos &<vocal a acentuar> acute;Ejemplo: &oacute; Devuelve: ó

En la actualidad la mayoríade los browsers los soportan.

Símbolo menor que (<) &lt:

Símbolo mayor que (>) &gt;

La eñe &ntilde; En la actualidad la mayoríade los browsers la soportan.

Espacios en blanco &nbsp; (non breakingspace)

HTML sólo reconoce unespacio en blanco entrePalabras.

ESTRUCTURA DE UN DOCUMENTOESTRUCTURA DE UN DOCUMENTOHTML.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:

<HTML><HEAD> Cabecera del documento</HEAD><BODY> Contenido del documento</BODY></HTML>

Definición de párrafos: PDefinición de párrafos: PLa marca <P> sirve para separar párrafos en HTML. Además de La marca <P> sirve para separar párrafos en HTML. Además de

introducir un retorno de carro, fuerza un segundo retorno 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 carro para dejar una línea en blanco entre un párrafo y el siguiente. De esta manera los párrafos quedan más siguiente. De esta manera los párrafos quedan más espaciados y el texto se vuelve más legibleespaciados y el texto se vuelve más legible

En esta marca la etiqueta de fin es opcional.En esta marca la etiqueta de fin es opcional.Por defecto, el párrafo de un documento HTML está justificado a Por defecto, el párrafo de un documento HTML está justificado a

la izquierda. Pero podemos modificar la alineación horizontal la izquierda. Pero podemos modificar la alineación horizontal de un párrafo mediante el atributo ALIGN de la marca <P>, de un párrafo mediante el atributo ALIGN de la marca <P>, que puede tomar los valores siguientes.que puede tomar los valores siguientes.

• • LEFT: el párrafo es justificado a la izquierda. Valor por defecto.LEFT: el párrafo es justificado a la izquierda. Valor por defecto.• • CENTER: el párrafo es centrado.CENTER: el párrafo es centrado.• • RIGHT: el párrafo es justificado a la derecha.RIGHT: el párrafo es justificado a la derecha.

Ruptura de líneas: BR.Ruptura de líneas: BR.

La marca <BR> introduce un retorno de carro (o La marca <BR> introduce un retorno de carro (o salto de línea) en el punto del documento en salto de línea) en el punto del documento en el que es colocada. Es equivalente al punto y el que es colocada. Es equivalente al punto y aparte de un texto normal.aparte de un texto normal.

Esta marca es vacía de manera que no necesita Esta marca es vacía de manera que no necesita de la etiqueta de fin de marca.de la etiqueta de fin de marca.

Títulos de encabezamientoTítulos de encabezamientoHTML 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 letrasEstilos. Tipos de letras

Algunas de las marcas que permiten especificar la tipografía de Algunas de las marcas que permiten especificar la tipografía de los caracteres son las siguientes:los caracteres son las siguientes:

<B>Negrita (Bold)</B><B>Negrita (Bold)</B><I>Cursiva (Italic)</I><I>Cursiva (Italic)</I><BLINK>Parpadeante (Blink)</BLINK><BLINK>Parpadeante (Blink)</BLINK><TT>Tamano fijo (TypeWriter)</TT><TT>Tamano fijo (TypeWriter)</TT>

<EM>énfasis (Emphasis)</EM><EM>énfasis (Emphasis)</EM><STRONG>Gran énfasis (Strong)</STRONG><STRONG>Gran énfasis (Strong)</STRONG><U>Subrayado (Underline)</U><U>Subrayado (Underline)</U>

Tamaño del texto.Tamaño del texto.Para modificar el tamaño se utiliza el atributo SIZE de la marca Para modificar el tamaño se utiliza el atributo SIZE de la marca

<FONT>, de la manera siguiente:<FONT>, de la manera siguiente:<FONT SIZE="tamaño">Texto</FONT><FONT SIZE="tamaño">Texto</FONT>

El comando <FONT> requiere la etiqueta de cierre.El comando <FONT> requiere la etiqueta de cierre.

HTML define siete tamaños de letra distintos, siendo el tamaño 3 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 el que se adopta por defecto. Sin embargo, la mayoría de los navegadores permiten establecer cuál es lacorrespondencia navegadores permiten establecer cuál es lacorrespondencia real del tamaño 3. Así, se puede hacer que el tamaño 3 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.corresponda a una fuente Arial de 16, o a una Times de 8.

Colores del texto.Colores del texto.Para dar color a un texto se utiliza el comando siguiente:Para dar color a un texto se utiliza el comando siguiente:

<FONT COLOR="color">Texto</FONT><FONT COLOR="color">Texto</FONT> En un principio la forma de especificar un color en HTML, era mediante el formato 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 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 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 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 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á 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 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).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, También se adminten cadenas de texto para colores básicos como: Red, Blue, green, etc.etc.

Listas ordenadas: OLListas ordenadas: OLListas 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.Listas desordenadas: UL.También llamadas listas no numeradas son listas en las que no es necesario 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 numerar de alguna manera los elementos que la componen, sino que cada elemento tiene delante un símbolo (un punto, un cuadrado, etc..).cada elemento tiene delante un símbolo (un punto, un cuadrado, etc..).

La forma de especificar una lista desordenada es mediante la marca <UL>. La forma de especificar una lista desordenada es mediante la marca <UL>. Las etiquetas de comienzo y fin de esta marca son obligatorias.Las etiquetas de comienzo y fin de esta marca son obligatorias.

Cada elemento de la lista se identifica mediante la marca <LI>. La etiqueta Cada elemento de la lista se identifica mediante la marca <LI>. La etiqueta de fin para la marca <LI> se puede omitir.de fin para la marca <LI> se puede omitir.

Ejemplo:Ejemplo:<UL><UL>

<LI> Juan Pérez</LI><LI> Juan Pérez</LI> <LI> Luis Díaz</LI><LI> Luis Díaz</LI>

</UL></UL>

Ejemplo 2