En un entorno web, el usuario rara vez se para mucho tiempo en una p\u00e1gina, sino que tiende a hacer un barrido visual r\u00e1pido por el contenido en busca de la informaci\u00f3n que le interesa. Estructura de navegaci\u00f3n<\/b><\/p>\n En cuanto a la estructura del sitio web<\/b>, la navegaci\u00f3n es m\u00e1s sencilla si los contenidos se organizan en horizontal. Cuando hay muchos niveles de profundidad, el usuario tiene m\u00e1s ocasiones de perderse, ya que tiene que confiar en su memoria a corto plazo.<\/p>\n Es aconsejable no superar los tres niveles de profundidad <\/b>a partir de la p\u00e1gina inicial. Si resulta imposible respetar este principio, los men\u00fas m\u00e1s amplios tienen que corresponder al primer nivel para que el usuario pueda identificar la mayor parte de contenidos directamente en la p\u00e1gina principal.<\/p>\n Una web organizada en enlaces de paginaci\u00f3n secuencial que solo permiten avanzar o retroceder implica una navegaci\u00f3n lenta y tediosa, lo que invita al usuario a abandonar el sitio. El mayor nivel de satisfacci\u00f3n por parte del usuario se obtiene cuando se combinan tres tipos de enlaces:<\/p>\n El formato de la p\u00e1gina web supera en muchas ocasiones las dimensiones de la pantalla del ordenador, de modo que si el usuario quiere acceder a la totalidad de sus contenidos tiene que utilizar las barras de desplazamiento (scroll<\/i>). Por esta raz\u00f3n, la informaci\u00f3n m\u00e1s importante se tiene que localizar siempre en el espacio inicialmente visible <\/b>en pantalla.<\/p>\n Hoy en d\u00eda, la resoluci\u00f3n m\u00e1s estandarizada en cuanto al desarrollo web es 1.024 p\u00edxeles de ancho por 768 p\u00edxeles de alto. Una parte de este espacio est\u00e1 ocupado por los elementos propios del navegador (como la barra de opciones o la barra de estado), el formato visible de la web queda limitado a unas dimensiones de aproximadamente 1.000 x 600 p\u00edxeles, a pesar de que la altura no se tiene siempre en cuenta debido al uso habitual de los scrolls<\/i> verticales. Posici\u00f3n de los elementos<\/b><\/p>\n Los usuarios tienden a buscar elementos espec\u00edficos en determinadas localizaciones que se han convertido en est\u00e1ndar:<\/p>\n Organizaci\u00f3n visual de las opciones<\/b> Cuando se incluyen im\u00e1genes en una p\u00e1gina, hay que tener en cuenta que estas pueden incrementar notablemente el tiempo de descarga<\/b>, de modo que es aconsejable que tengan un tama\u00f1o limitado, y con el m\u00e1ximo nivel de compresi\u00f3n que permita preservar la calidad de la imagen.<\/p>\n Las im\u00e1genes pueden ser muy efectivas por mensajes simples<\/b>, pero en caso de contenidos complejos es mejor utilizar texto.<\/p>\n En cuanto a la inclusi\u00f3n de animaciones<\/b>, adem\u00e1s de provocar problemas relacionados con un incremento del tiempo de descarga, pueden dispersar la atenci\u00f3n de los usuarios. Por lo tanto, se tienen que utilizar con moderaci\u00f3n y siempre con justificaci\u00f3n, no como mero recurso ornamental.<\/p>\n En l\u00ednea con el rastreo r\u00e1pido de la p\u00e1gina, el usuario no se detiene a observar las im\u00e1genes hasta que visita por segunda o tercera vez la web. Sus preferencias se orientan hacia el contenido textual, al que se suele dedicar el doble de tiempo. Las im\u00e1genes muy coloristas y con formato de banner<\/i> se ignoran con frecuencia, seguramente porque se asocian de manera instintiva con un mensaje de car\u00e1cter publicitario.<\/p>\n Formatos gr\u00e1ficos<\/b><\/p>\n Las im\u00e1genes para web pueden tener tres formatos \u2013GIF, JPG y PNG\u2013, que permiten comprimir las im\u00e1genes para optimizar su descarga. Cada uno de estos formatos tiene unas caracter\u00edsticas espec\u00edficas:<\/p>\n Generaci\u00f3n de im\u00e1genes para p\u00e1ginas web<\/b><\/p>\n Al preparar gr\u00e1ficos para un sitio web tenemos que priorizar la descarga r\u00e1pida de las p\u00e1ginas. Por lo tanto, los archivos gr\u00e1ficos tienen que tener el menor tama\u00f1o posible<\/b>, teniendo presentes los factores que se detallan a continuaci\u00f3n (y que se aplican a los archivos gr\u00e1ficos, ya que en la actualidad muchos de estos efectos pueden obtenerse mediante CSS3; para m\u00e1s informaci\u00f3n sobre CSS3, ved Especificaciones t\u00e9cnicas de dise\u00f1o para web<\/a>).<\/p>\n En una p\u00e1gina web podemos integrar dos tipos de texto:<\/p>\n <\/p>","protected":false},"excerpt":{"rendered":" Introducci\u00f3n Adem\u00e1s de los factores que hay que tener en cuenta en el dise\u00f1o de aplicaciones en general, en la producci\u00f3n de p\u00e1ginas web intervienen una serie de determinantes particulares. Las razones de esta especificidad son b\u00e1sicamente dos: El canal de distribuci\u00f3n \u2013Internet\u2013 establece l\u00edmites t\u00e9cnicos relacionados con el tiempo de descarga de la informaci\u00f3n. … <\/p>\n![\"canalDistribucioInternet\"](\"http:\/\/multimedia.uoc.edu\/blogs\/dii\/files\/2015\/03\/canalDistribucioInternet.png\")
<\/a><\/li>\n<\/a><\/li>\n<\/ul>\n
\nOrganizaci\u00f3n de la informaci\u00f3n<\/h3>\n
\nPor eso, es recomendable utilizar un estilo conciso<\/b>, en el que se desarrolle una idea por p\u00e1rrafo y en el que los conceptos principales est\u00e9n visualmente resaltados (mediante negritas, por ejemplo) o reunidos en forma de listas.<\/p>\n<\/a><\/p>\n\n
\n<\/div>\nEstructura de la p\u00e1gina<\/h3>\n
<\/a>
Fuente: http:\/\/www.uoc.edu.<\/figcaption><\/figure>\n
\nPor otro lado, cuando planteamos un dise\u00f1o web, es importante tener en cuenta los diferentes dispositivos. Para algunos dispositivos, es necesario plantear diferentes versiones o una web responsiva<\/a>, para que se visualice correctamente en los diferentes formatos. Por lo tanto, teniendo en cuenta la poca diferencia en p\u00edxeles de ancho que nos ofrecen algunas tabletas, como por ejemplo el iPad, con una zona visible de 960 x 640 p\u00edxeles, respecto a la resoluci\u00f3n est\u00e1ndar de 1.024 p\u00edxeles hace que muchos desarrolladores dise\u00f1en ya pensando en estos tama\u00f1os algo m\u00e1s reducidos.<\/p>\n\n
<\/a><\/p>\n
\nEn cuanto a la organizaci\u00f3n visual de las opciones, hay que tener en cuenta los factores siguientes:<\/p>\n\n
<\/a><\/a>
\nTratamiento de las im\u00e1genes<\/h3>\n
\n
\n
\n
\n
\n
<\/a><\/li>\n\n
<\/a><\/li>\n\n
<\/a>\n<\/li>\n<\/ul>\n
\nIntegraci\u00f3n de texto<\/h3>\n
\n
\nEl texto gr\u00e1fico tiene la ventaja de no depender de las fuentes instaladas en el ordenador del usuario para su visualizaci\u00f3n correcta, pero ocupa m\u00e1s espacio en soporte que el texto fuente.
\nEn entorno web, se utiliza principalmente en titulares, men\u00fas y subt\u00edtulos, entre otros. Es decir, en aquellos elementos que no contienen grandes bloques de texto y en los que este tiene que recibir un tratamiento especial.<\/li>\n
\nEl texto fuente depende de las fuentes instaladas en el sistema del usuario, de modo que se tiene que editar siempre con el tipo de letra que se encuentra por defecto en el sistema operativo del usuario (algunas de las fuentes de Windows, por ejemplo, ser\u00edan Arial, Times, Courier, entre otras).
\nEn el entorno web, el texto fuente se utiliza siempre que sea posible y, en especial en los grandes bloques de texto, como p\u00e1ginas de contenido, ayuda o \u00edndices.<\/li>\n<\/ul>\n
\n<\/div>\nM\u00e1s informaci\u00f3n<\/h3>\n
\n