Diseo orientado a la web.

Internet y las pginas web

[9.1] Cmo estudiar este tema? [9.2] Internet y los navegadores [9.3] Accesibilidad e interactividad [9.4] Resolucin de pantalla [9.5] Optimizacin de la web

TEMA

Diseo y edicin

Esquema

TEMA 9 Esquema

Diseo y edicin

Ideas clave
9.1. Cmo estudiar este tema?
Para estudiar este tema lee el captulo 3 (pginas 136-147 y 156-157) del manual de la asignatura: Manual de diseo grfico digital, de Bob Gordon y Maggie Gordon (Editorial Gustavo Gili, SL), adems de las Ideas clave.

9.2. Internet y los navegadores

En contraste con los primeros aos de internet, en los que las funciones de diseo web se limitaban a la mera colocacin de imgenes y textos, la tecnologa y funcionalidad de la web actual permite la inclusin de pelculas, sonidos y animaciones, vinculando la labor de programacin con la de diseo grfico. La mayor parte del trabajo de diseo web es la aplicacin de marcas y su adaptacin a este medio y la necesidad de actualizacin y rediseo continuo. En el diseo orientado a internet se utilizan herramientas de diseo general y de software especfico para la web.

Los ordenadores estn conectados entre s mediante el uso de protocolos para transmisin y recepcin de informacin. La idea de una red de informacin comn surgi en los aos 60 para uso militar. En los 90 se cre de la world wide web, que permita la vista de pginas de texto e imgenes mediante un cdigo sencillo.

TEMA 9 Ideas clave

Diseo y edicin

El papel del diseador grfico en la web es el de dar una estructura visual adecuada a las pginas web. Los elementos de diseo (composicin, color, tipos e imgenes) son iguales, pero su aplicacin resulta diferente y tiene otro tipo de especificidades. Todos los elementos que componen la pgina web estn contenidos en paquetes de datos digitales, que se transfieren desde el servidor que aloja el sitio web hasta el usuario. Las pginas web se crean mediante el cdigo HTML (Hypertext Mark-up Language, lenguaje de etiquetado de hipertexto). El ordenador del usuario descifra mediante el navegador, muestra la pgina en pantalla segn los estndares del World Wide Web Consortium (www.w3c.org). Las CSS (Cascading Style Sheets, hojas de estilo en cascada) proporcionan cierto control tipogrfico y de composicin al HTML, como la eleccin de estilo, fuente y espaciado. Los navegadores pueden mostrar textos e imgenes sin ayuda, pero requieren software adicional para otros formatos (como el video o las animaciones flash), los plug-ins para el navegador.

El mercado est fuertemente dominado por Internet Explorer de Microsoft, en Mac el navegador nativo Safari es el ms utilizado. Entre los dems navegadores destacan Opera, Firefox y Chrome. Cada navegador tiene sus puntos fuertes y dbiles pero toda web bien codificada debe mostrarse correctamente en cualquier navegador.

TEMA 9 Ideas clave

Diseo y edicin

9.3. Accesibilidad e interactividad

Accesibilidad Los usuarios con discapacidades se enfrentan a problemas al acceder a los sitios web. Existe software de lectura de pantalla, que lee en voz alta el texto de las pginas web. Esto solo funcionar con el texto HTML, no con los textos compuestos en flash u otros formatos y evidentemente tampoco en las imgenes o clips de video. Debemos asegurarnos de que las imgenes y otros elementos tengan asignada una etiqueta alt que contenga una descripcin escrita de los mismos. Existe una normativa amplia del W3C sobre accesibilidad que los sitios web deben seguir para evitar infringir la legislacin especfica contra la discriminacin de las personas discapacitadas. Interactividad Cualquier tipo de contenido en pantalla requiere algn grado de interaccin por parte del usuario se anima al visitante a acceder a zonas de la web que les den informacin. La forma ms simple de interactividad son los vnculos de hipertexto, enlaces a otras pginas por elementos de texto sobre los que podemos hacer clic, mientras que los botones y mapas de imgenes son formas ms sofisticadas de vnculos. Los rollovers se utilizan para hacer que los vnculos resulten ms atractivos, activndose al pasar el cursor por encima.

Los mapas de imgenes funcionan como reas separadas de una imagen que vinculan cada a un URL distinto.

TEMA 9 Ideas clave

Diseo y edicin

9.4. Resolucin de pantalla

El diseador web ha de tener en cuenta que su trabajo se ver en distintos monitores con diferentes tamaos de texto. Otros factores que afectan a la visualizacin de una web son la resolucin del monitor, las preferencias del navegador y algunas diferencias de visualizacin entre PC y Mac. En web los elementos que componen la pgina pueden desplazarse de su sitio, a menos que se tomen medidas para bloquearlos. Los monitores de los ordenadores son apaisados, muchos diseos en papel no se traducen fcilmente a diseos web. Resulta importante disear pginas que se ajusten al tamao mnimo de pantalla que pueda tener el usuario, o bien, que sean flexibles y se adapten a diferentes tamaos. Se pueden tambin crear pginas que se escalen segn las dimensiones que adopte la ventana del navegador. Las medidas de las pginas web se establecen en pxeles, debemos decidir el nmero de pxeles en nuestro espacio til y despus adaptar el diseo.

TEMA 9 Ideas clave

Diseo y edicin

9.5. Optimizacin de la web

Si un diseo tarda demasiado en descargarse es un fracaso, se debe de tratar de rebajar al mximo el peso, buscamos funcionalidad y su eficacia, el tiempo de descarga es esencial. Los archivos que menos pesan son los de texto, seguidos por las imgenes, los contenidos de sonido. Los archivo flash, Shockwave y de vdeo son los que ms datos requieren. No obstante, el contenido del vdeo puede verse mediante streaming, empieza a reproducirse en cuanto se ha cargado una pequea parte y el resto se va cargando a medida que se reproduce.

TEMA 9 Ideas clave

Diseo y edicin

Lo + recomendado
Clases magistrales
Internet y las pginas web Duracin: 14:06 min. En esta sesin magistral, Diego Castro har una presentacin de internet, estableciendo una relacin con el diseo y la edicin.

El video est disponible en el aula virtual

No dejes de leer
Introduccin a la accesibilidad web Artculo sobre la accesibilidad web, aquella capacidad que permite que las personas con discapacidad puedan acceder a los contenidos de la web. El artculo est disponible en el aula virtual o en la siguiente direccin web: http://www.w3c.es/traducciones/es/wai/intro/accessibility

TEMA 9 Lo + recomendado

Diseo y edicin

+ Informacin
A fondo
Gua de accesibilidad En el siguiente enlace encontrars una gua de accesibilidad web elaborado por el gobierno de Chile, en la que se tiene en consideracin la existencia de cuerpos normativos y recomendaciones de carcter internacional sobre accesibilidad para discapacitados. El documento est disponible en el aula virtual o en la siguiente direccin web:
http://www.sned.cl/mineduc/sned/documentos/ds100/guia_accesibilidad_sitios_web.pdf

Introduccin a internet Documento elaborado por scar Vallejos sobre internet, en el que podrs conocer el origen y evolucin de internet, quin controla la red, etc. El documento est disponible en el aula virtual o en la siguiente direccin web: http://ing.unne.edu.ar/pub/internet.pdf

TEMA 9 + Informacin

Diseo y edicin

Webgrafa
World Wide Web Consortium (W3C) Pgina de la World Wide Web Consortium en espaol. El W3C es una comunidad internacional que desarrolla estndares que aseguran el crecimiento de la web a largo plazo.

http://www.w3c.es/

Bibliografa
KRUG, S. No me hagas pensar. Una aproximacin a la usabilidad en la web. PrenticeHall. Madrid. 2006. LINCH, P. y HORTON, S. Manual de estilo web. Gustavo Gili. 2004.

TEMA 9 + Informacin

Diseo y edicin

Test
1. Qu es un ISP? A. Un proveedor de acceso a internet. B. Un protocolo de transmisin de datos. C. Una normativa de accesibilidad web. 2. Una direccin de una pgina web suele comenzar por: A. www B. html://www C. http://www.... 3. Las pginas web se crean sobre todo mediante A. Cdigo HTML. B. Cdigo JavaScript. C. Cdigo Action Script 3.0. 4. Por qu no es accesible el texto en las imgenes o en los archivos flash? A. Porque el texto se ve algo borroso. B. Porque el navegador no es capaz de interpretarlo. C. Porque a no todo el mundo tiene en su navegador el plug-in de flash. 5. Qu es un plug-in? A. Una herramienta extra que aade nuevas capacidades al navegador. B. Un tipo de archivo descargable. C. Una herramienta de descarga por lotes. 6. Qu es el W3C? A. Un lenguaje de programacin que resulta totalmente accesible. B. Es una comunidad internacional que desarrolla estndares para el crecimiento de la web. C. Un protocolo de transmisin.

TEMA 9 Test

Diseo y edicin

7. Qu es un rollover? A. Es cada uno de los estados de un vnculo. B. Es un efecto donde una imagen es sustituida por otra al pasar el cursor por encima C. Es un efecto mediante el cual el texto se mueve de izquierda a derecha. 8. Por qu es importante optimizar el peso de nuestra web? A. Para que el tiempo de descarga no sea excesivamente largo y el usuario acceda rpidamente a su contenido. B. Porque el tamao del servidor en que alojamos nuestra web no es infinito C. Para que no se cuelgue el navegador. 9. Un byte equivale A. 16 bits. B. 8 bits. C. 24 bits. 10. Un kilobyte equivale a A. 1024 bits. B. 1024 bytes. C. 1000 bytes.

TEMA 9 Test