Diseñando para la Web
Quisimos explicar cómo se trabaja en el mundo real participando de
desarrollos reales. Es probable que muchas consideraciones no sean
aplicables al diseño de un sitio experimental, pero creemos que para
aquellos que no tienen ni idea de qué es lo importante a la hora de
diseñar un sitio, es necesario saber que es lo estándar, para llegar, a
través de la comprensión y la reelaboración, a lo experimental.
Internet se ha convertido en un campo de experimentación para el diseño.
En internet se desvanece la sensación de que todo lo que hacemos
ha sido alguna vez diseñado anteriormente, de que todo está
visto. Recuperamos la capacidad de asombro ante la imagen. No hay
constantes, la única constante es el cambio. La rapidez con que surgen
nuevos softs (sobre todo para diseñar multimedia), y la variedad y cantidad
de sitios tiene como resultado una evolución ininterrumpida de
lo que podemos encontrar en un sitio web. Es realmente asombroso
pensar en la heterogeneidad de lo que está online. Cada aspecto de la
realidad tiene un equivalente virtual.
Desde nuestro punto de vista, el de los diseñadores, es un medio
joven, muy poco explotado y en el que hay mucho por hacer, en el que
la mayoría de lo que está online pide a gritos un poco de criterio visual;
con muchísimas limitaciones técnicas en la actualidad pero potencialmente
extraordinario. Más allá de éstas limitaciones hay múltiples
posibilidades en el diseño, ya que el proceso de diseñar un sitio varía
en muchos aspectos según cuál sea el objetivo. Es claro que la experiencia
de diseñar un sitio puramente funcional, con información
dinámica, servicios, máxima accesibilidad, e-comerce, etc. es MUY
DIFERENTE de diseñar un sitio experimental, en el que el diseño es lo
fundamental, cuyo target está bien específico, y no hay que preocuparse
de que el usuario posea el hardware, software y plug-in necesarios.
El entorno web abre para los diseñadores una nueva etapa en la gráfica,
ya que a partir de esta gran explosión de "necesidades virtuales",
la web es el empujón que nos va a permitir incorporarnos definitivamente
en el ámbito digital y audiovisual. Generando un nuevo espacio
sin estándares ni escuelas preestablecidos en el que las posibilidades
son proporcionales a la imaginación. Aparece fomentando el
desarrollo gráfico de lo audiovisual insertando a los diseñadores en un
campo temido que parecía ajeno.
Audiovisualmente se generan grandes expectativas por que hay que
combinar lo estático y lo dinámico sin confundir al usuario, buscando
su atención para que interactúe según nuestra intención.
En el ámbito digital se encuentran los desarrollos multimedia (cds
interactivos, animaciones, efectos especiales, etc.), los touch screens
(pantallas como las de los cajeros automáticos) y Web TV. Las herramientas
que nos ofrece son múltiples y variadas, para operadores
expertos o para novatos. Podemos generar imágenes con relieve, en
3D, animaciones, animaciones de texto, etc... también se pueden jugar
con otros recursos como tamaño, formatos, cantidad y ubicación de las
ventanas, colores, links "sin sentido", y otros recursos. Por último la
estructura de la navegación también puede ser un recurso gráfico muy
interesante, según sea ordenada, o desordenada, funcional o absurda,
libre o inducida, etc. Todas van a ser decisiones que tendremos que
tomar de acuerdo nuestro partido conceptual.
En Argentina (y en el resto del mundo) la cantidad de empresas, estudios
y almacenes que tienen un sitio está creciendo a pasos enormes.
Hoy todo el mundo quiere estar online. Y cuando están online,
quieren un sitio nuevo ni bien hemos terminado el anterior. La renovación
es inagotable.
Se podría pensar en esto como moda (¿no es fashion la tarjeta per-
1. El apunte.
2. La visión de un
diseñador web
sonal que tiene la dirección del sitio de la empresa?), y acaso lo sea
para muchos, pero lo importante en esta tendencia es que internet
(desde un punto de vista comercial), es un medio nuevo para hacer
negocios, lo cual implica que se invierta cada vez más en diseño y
desarrollos.
Si se piensa en un proyecto web profesional y comercial lo importante
hoy en un sitio es que sea pensado y desarrollado como una herramienta
de atención y servicios para los clientes. Por eso es fundamental
que el diseño (una vez más) esté en función de las necesidades
y de los requerimientos.
Pero Internet es mucho más que negocios, e irá transformándose y
adaptándose, abarcando los medios de comunicación masiva e interpersonal,
convirtiéndose para todos en un aspecto de la vida cotidiana
(tal vez como un producto de la evolución del televisor). Las paginas
web y el diseño virtual han llegado a nosotros para instalarse.
Como consecuencia, ser hoy en día diseñador web y saber desenvolverse
profesionalmente en el medio es muy importante ya que la oferta
de trabajo es alta y la remuneración es considerablemente buena.
Felizmente hay una tendencia positiva hacia mejorar la calidad de diseño
de lo que está online y aunque parecería que la falta de materialidad
y la posibilidad de actualización casi inmediata, provocan aun más
la sensación de que diseñar es lo mismo que saber usar algunos programas,
es una tarea de los diseñadores empezar a reivindicar el diseño
web.
El valor agregado
Lo mejor de crear un diseño web es la interactividad; es la idea de que
el receptor no es un espectador pasivo, sino que además de mirar y
comprender puede interactuar a distintos niveles con lo que uno ha
diseñado.
La interactividad no sólo se refiere a elegir un recorrido, la idea es
provocar más que una simple respuesta del receptor (clickear en un
link determinado); es permitir que el usuario personalice las páginas.
La respuesta, en este caso, modifica la pieza en sí misma. Y cuánta más
posibilidad de modificación (y más niveles de personalización) más
interesante resulta. Por supuesto que esto depende tanto de las
opciones como del grado de interés del usuario.
Las posibilidades de interacción son múltiples: crear páginas personalizadas,
cambiar el aspecto, cantidad y ubicación de los elementos de la
página, mover ventanas, elegir el sonido, cambiar los colores, etc.
Llamaremos navegante a un visitante ocasional y usuario a aquel que
vuelve periódicamente a un sitio
Desde el punto de vista del usuario medio (y el usuario medio no nos
contempla a los diseñadores) hay cuatro características que son importantes
en un sitio y que pueden convertir a navegante en usuario:
. Contenido de calidad
. Actualización permanente
. Tiempo mínimo de descarga
. Facilidad en el uso
La dos segundas dependen del diseño.
El tiempo mínimo de descarga tiene que ver con la optimización de los
elementos de la página y con el uso inteligente de los recursos gráficos
propios del código html (ver poner en donde).
La facilidad en el uso tiene que ver con dos aspectos:
. La arquitectura de la información (el árbol del sitio y la disposición de
los elementos en la página / pantalla); relacionada con la usabilidad.
. la interfase gráfica (lo que vemos en la pantalla).
3. El usuario
Usabilidad de un sitio
Existen una serie de principios básicos aplicables a la usabilidad en la
web: accesibilidad, navegabilidad, optimización y productividad.
El estudio de la usabilidad aplicada a la web es algo todavía relativamente
nuevo. La investigación en este campo es algo necesario, es
estudiar cómo los usuarios interactúan con la interfase.
Accesibilidad:
Existen millones de usuarios que utilizan servidores distintos, con computadoras
conectadas con sistemas operativos diferentes (Windows,
MacOs, Linux, etc.), de potencias diferentes, con pantallas de resolución
distintas, navegando con programas distintos, e incluso si utilizan
el mismo navegador, deciden activar, o no, distintas opciones de su
programa (como navegar por defecto sin imágenes).
Ante este panorama, resulta imposible diseñar para un solo tipo de
usuario ya que dejaríamos fuera al resto. Esto implica que cuando
afrontamos el diseño de un sitio web, éste debe ser accesible sean
cuáles sean las configuraciones de nuestro cliente.
Por otro lado es también importante la estandarización que este principio
supone: muchos de nuestros usuarios no quieren perder su tiempo
en bajar un plug-in para ver nuestro sitio web: ¿debemos impedir
que vean nuestras páginas sólo por una cuestión tecnológica? Eso no
quiere decir que no podamos incorporar nuevas tecnologías, siempre
que tengamos en cuenta ofrecer la posibilidad de utilizar opciones
desarrolladas para una tecnología anterior. El World Wide Web Consortium
<http://www.w3.org> es la entidad encargada de establecer
las normas para la estandarización de los distintos elementos usados
en la WWW.
Navegabilidad:
La estructura de nuestro sitio web; la facilidad de encontrar la información
mediante buscadores o navegación; la consistencia de todos los
elementos que lo componen; facilitar múltiples maneras y vías de
encontrar la misma información; son elementos importantes.
Optimización:
Mientras el ancho de banda (que deriva en la velocidad en que se
transmiten los datos a través de la conexión) siga siendo un problema,
debemos tener en cuenta que las páginas deben ser descargadas lo
más rápido posible. Por lo tanto debemos optimizar todos los elementos
de nuestro sitio, especialmente el tamaño y cantidad de las imágenes
para que las páginas tengan poco peso.
Productividad:
Independientemente del objetivo de nuestro sitio, debemos intentar
minimizar el trabajo del usuario. La arquitectura y el diseño tienen que
estar pensados para que el usuario realice el menor número de tareas
repetitivas, anticipando además los posibles errores que pueda cometer.
Si decidimos hacer un sitio objeto, no importa si los links son visibles o
no a primera vista. Es probable que a un navegante diseñador no le
guste que todo sea claro y explícito (al menos a nosotras no) y prefiera
esperar más tiempo para VER el sitio. Por el contrario, a un usuario
tipo, le importan en primer lugar el contenido, y luego la rapidez, la
accesibilidad y la navegablidad.
Se llama Arquitectura de la información a la manera en que está dispuesto
el contenido en un sitio. Podemos considerar dos partes: el
árbol de navegación y el "lay out" de las páginas.
. El árbol de un sitio es la estructura de navegación: páginas que lo
componen y los links entre éstas.
. El "lay out" es el esquema que muestra cómo se disponen los elementos
en la página (links, texto, logo, header, footer, buscador, banners,
etc., etc., etc.).
4. Arquitectura
de la información
Lo que es fundamental es pensarla en función del contenido del sitio y
de aquello que es más importante para el emisor y de lo que le interesa
al usuario del target definido: el usuario debe comprender según
cuál sea el objetivo del emisor del sitio.
Por mucho que nos moleste a los diseñadores, rara vez los usuarios
entran a un sitio para disfrutar del diseño; en cambio, prefieren concentrarse
en el contenido; es importante tener bien claro que la arquitectura
de la información es la base y que el diseño es lo que le permite
al usuario tener acceso a aquello que está buscando. Este aspecto
en el diseño web no implica que se descarten los valores a los que estamos
acostumbrados: identidad visual, pregnancia, identificación con el
target, etc., etc., etc. (lo que se llama "look and feel" de un sitio).
Estructura de la Interfase
Ejemplo Adobe.
1. Barra Superior: secciones básicas de atención al usuario.
2.Sección izquierda: tema principal (foto grande)
3.Sección derecha: temas esenciales e informaciones actualizadas.
4.Sección izquierda de 2º nivel: la empresa divide sus productos en cuatro
ramas, cada una presenta una noticia.
Es necesario definir una estructura en la página (un lay out) para determinar
qué información voy a dar y cómo la voy a ordenar. Esto va a
generar a su vez diferentes jerarquías de barras de navegación,
botones, links, textos, imágenes, etc.
Como el navegante va a entrar al sitio por la home deberíamos pensarla
de manera que pueda intuir cuáles son los contenidos y dónde
encontrar la información que se corresponda a sus intereses. La estructura
y los elementos de navegación son dos cosas que deben estar
interrelacionadas: podría resultar complicado tener un barra de navegación
de 546 botones. Para el usuario, 6 u 8 opciones son reconocibles
a simple vista, pero 15 o 20 se convierten en un listado que debe leer.
Por esto, el diseño de la estructura y la navegación es un trabajo de ida
y vuelta, de ajuste y reformulación. Hasta encontrar un equilibrio que
resulte adecuado para el tipo de sitio que estamos produciendo. El
primer paso es saber exactamente cuál es el objetivo del sitio (necesidades,
requerimientos, target), para no trabajar en vano.
La variedad de información, servicios y tecnologías que pueden encontrarse
en un sitio hace que sea imposible hacer una clasificación coherente
que pueda abarcarlos por completo. Lo siguiente es una enumeración
de algunas características que pueden ayudarnos definir la
identidad de un sitio.
En primer lugar y según el tipo de información que encontramos los
sitios pueden ser estáticos o dinámicos.
Por estáticos nos referimos a que la información que podemos encontrar
es siempre la misma. Los sitios institucionales de las empresas son
un buen ejemplo de esto.
. institucional: www.unilever.com
Por otro lado, que un sitio sea dinámico significa que tiene información
que se va actualizando periódicamente o que se extrae desde una
base de datos. Algunos ejemplos:
. diarios online: www.lanacionline.com; www.clarin.com.ar
. sitios de comunidad: www.starmedia.com ; www.uol.com
. servicios: www.xsalir.com
. buscadores: www.yahoo.com ; www.radar.com.ar
. portales: www.yeyeye.com
. e-comerce: www.amazon.com ; www.deremate.com
. finanzas: www.smartmoney.com
. etc. etc. etc.
5. Sitios: clasificación
y características
Es bueno que un sitio sea dinámico porque los navegantes hacen zapping
y -sobre todo- se aburren y se olvidan de los lugares que no cambian.
La palabra inglesa para "navegar en la red" es surfing, o sea
desplazarse en la parte superior de la ola e ir pasando de ola en ola.
Básicamente, nosotros queremos que el navegante REGRESE A NUESTRA
PAGINA. Si le hemos dado la ola más grande del mundo, una vez
"volverá" por más. Si siempre encuentra lo mismo, espaciará sus visitas
primero y luego, nuestra dirección de Internet se perderá en el olvido.
La actualización debe ser parte del concepto del sitio; qué digo, cómo
lo digo y cada cuánto lo digo. Lo que hacemos ahora es ver cómo insertar
esta actualización en la estructura y la navegación.
La pregunta a hacerse es ¿Cuán importante es la actualización en la
estructura del sitio?
Si la actualización es la esencia del sitio (como en el caso de un diario
o revista), se deberá encarar todo el diseño desde otro punto de vista:
un sitio de conformación dinámica estructurado alrededor de una o
varias bases de datos, con generación al vuelo de las páginas y actualización
remota.
Por lo general los sitios dinámicos tiene una parte de contenido que no
se actualiza (por ejemplo la información institucional).
La traducción de la palabra "internet" es algo así como comunicación
entre redes. Si pensamos en el significado de la palabra red podríamos
definirla como una cantidad de cuerdas entrelazadas que conforman
un todo... ¿Pero para que sirve? He aquí la clave. Sirve para ATRAPAR.
Y eso es lo que debemos considerar al diseñar un sitio, tenemos que
atrapar literalmente al usuario, "no queremos que venga sino que
vuelva". La primera visita puede ser casual (por un banner, buscadores,
publicidad externa, etc.), pero una vez que haya entrado debemos cautivarlo,
atraparlo definitivamente.
Como todo medio de comunicación, el valor de un sitio depende casi
exclusivamente de la cantidad de "hits" (o visitas) que logre. Cuantos
más navegantes entren, más valioso será el espacio publicitario. Para
lograr que los navegantes se conviertan en usuarios (y al volver al sitio
periódicamente aumenten el valor comercial) la mayoría de los sitios
brindan servicios como webmail, información por correo electrónico,
foros de discusión, beneficios reales por pertenecer a la comunidad
(descuentos en entradas, sorteos, etc.).
El espacio publicitario está representado por banners.
Banners, Medidas estándar
Se han identificado las siguientes medidas como los más comúnmente
aceptados:
| 468px x 60px | Banner Completo
| 234px x 60px | Medio Banner
| 392px x 72px | Banner completo con barra de navegación vertical
| 120px x 240px | Banner Vertical
| 125px x 125px | Banner Cuadrado
| 120px x 90px | Botón#1
| 120px x 60px | Botón#2
| 88px x 31px | Micro Botón
| 215px x 40px |
| 164px x 40px |
El costo en Internet es el tiempo de bajada. El costo se mide en el
tamaño del archivo y en la velocidad de conexión. En la web lo primero
que visualizamos en la pantalla es la parte superior, esto explica por
qué la mayoría de las propagandas están ubicadas allí.
6. Publicidad y servicios
Características del soporte como pieza comunicacional
Al igual que el resto de las piezas de diseño, las páginas web tienen
características específicas que las diferencian.
Para empezar es fundamental entender que internet es un producto
de la sociedad globalizada, que surge a partir de la necesidad de
comunicación instantánea y permanente. Es un ámbito en el cual las
nuevas tecnologías van reemplazando a las anteriores a una velocidad
asombrosa, transformando en obsoleto lo que hasta ayer era considerado
una novedad.
Este cambio constante, esta renovación permanente de tecnología, es
un factor determinante para plantear la primera característica del
medio y es la variabilidad; la única constante es el cambio.
Cuando hablamos de variables, nos referimos a dos cuestiones que
están relacionadas: el usuario y la tecnología. Como en todo proceso
comunicacional, es fundamental tener en cuenta al receptor considerando,
no sólo sus características perceptivas, sino también la tecnología
de la cual dispone. De esta manera se van a establecer las
condiciones para desarrollar un producto factible de ser visto por el
receptor.
La pantalla como soporte
Con respecto a cuestiones técnicas existen variables que van a condicionar
nuestras decisiones de diseño:
- Los distintos tamaños de visualización del monitor, y las distintas
dimensiones de pantalla.
- Los softs que el navegante utiliza.
- Los navegadores son pantallas que pueden ser modificadas en
tamaño y formato.
- La posibilidad de personalizar las propiedades del navegador
(fuentes, tamaño, colores de links, etc.). Es necesario recordar que existen
una serie de fuentes que se utilizan por consenso en las páginas
web.
Dimensiones y tamaños de visualización de monitores
. 13 pulgadas
. 14 pulgadas
. 15 pulgadas
. 17 pulgadas
. 19 pulgadas
. 21 pulgadas
. 640 x 480 px
. 800 x 600 px
. 1024 x 768 px
. 1152 x 864 px
. 1280 x 1024 px
. 1600 x 1200 px
Tipografías predeterminadas para texto (la primera fuente es la
que se muestra)
. Arial, Helvetica, sans-serif
. Times New Roman, Times, serif
. Courier New, Courier, mono
. Georgia, Times New Roman, Times, serif
. Verdana, Arial, Helvetica, sans-serif
La definición de la pantalla es de 72 px por pulgada (dpi). Como consecuencia
se usa la misma definición para guardar las imágenes que
componen las páginas web.
Hasta la versión 2 de los navegadores se usaba un ancho de pantalla de
480 px, que es el ancho óptimo para imprimir en una hoja carta. Cuando
la Web tomó identidad propia y se convirtió en un medio más visual,
las páginas comenzaron a tener un ancho de 600px. Últimamente se
ha comenzado a usar como estándar la página diseñada para un ancho
de 800x600, ya que éste es el estándar de visualización.
7. Características del soporte
Con el uso de monitores de 15", 17", 19", 21" y más, se empezaron a
usar resoluciones mayores para mantener un tamaño adecuado de los
elementos de la pantalla. En consecuencia para evitar que un gran porcentaje
de la pantalla quede en blanco (vacío) comenzaron a utilizarse
recursos como el ancho variable en las páginas o la composición de un
mismo sitio a partir de varias ventanas de distintos formatos y
tamaños, que conforman una única interfase (www.alanski.com).
Si nos manejamos según los estándares el ancho de pantalla que conviene
usar es el mayor que la audiencia nos permita. Si el destinatario
es un grupo de alto poder de compra, es muy probable que tengan
monitores grandes; si su audiencia es el grupo hogareño, los monitores
estarán en el orden de los 13" a 15".
Hay que recordar que al usuario no le atrae mucho la idea de
desplazarse lateralmente para ver el contenido; tampoco verticalmente,
pero todo no es posible.
Colores en la pantalla
Para definir los colores en el monitor debemos seleccionar tre s
números (uno para cada color básico RGB) dándole un valor entre 0 y
255: esto hace una combinación de: 256x256x256= 16.777.216 colores.
Pero algunos monitores reconocen sólo 256 colores.
La manera de definir colores en el código html es a través de números
hexadecimales. Los valores hexadecimales de los colores seguros de la
Red son combinaciones de 00, 33, 66, 99, CC y FF. Sus equivalentes en
RGB son 0, 51, 102, 153, 204 y 255.
Si bien el Dreamweaver posee una paleta predeterminado con colores
hexadecimales, a la hora de componer la página en programas pixelares
(como el Photoshop) manejan los colores en las formas tradicionales,
CMKY (reflexión), RGB (transmisión), etc...
(A partir del Photoshop 5.5 se incorporan las paletas hexadecimales en
los métodos de búsqueda de colores.)
Hexadecimales | Equivalentes RGB
00 | 0
33 | 51
66 | 102
99 | 153
CC | 204
FF | 255
Hexadecimales
33 CC 66
51 204 102
R G B
Los sistemas operativos implican una desventaja, en particular los más
usados (MacOS y Windows). Estos han definido arbitrariamente una
tabla de valores conocida como "System Palette"; es la tabla o paleta
que usa el sistema.
El problema surge debido a que ambos sistemas NO han elegido la
misma paleta. Ambas tienen 216 colores similares y 40 diferentes. A
estos 216 colores seguros (porque están en ambos sistemas operativos)
se los llama "web safe colors" (colores seguros de la web).
Navegadores y visualización
Durante el final de la década del ´90 se llevó a cabo la llamada "guerra
de los navegadores". La empresa Netscape, a través de su "Navigator",
había consolidado más del 60 o 70% del mercado de usuarios y
marcaba el estándar de facto, agregando características diariamente al
lenguaje html. La empresa Microsoft salió a pelear la porción del mercado,
comprando una versión del navegador Mosaic y convirtiéndolo
en el Explorer. Su forma de competir fue agregando funciones diferentes
al lenguaje html, y generando infinitas incompati-bilidades.
Por esto es necesario PROBAR, ya que no todo el mundo posee los mis-
mos equipos y navegadores. El mercado es muy variado, hardware, sistema
operativos, navegadores, etc. Todos compiten por la audiencia, y
la forma en que lo hacen genera incompatibilidades que hacen que lo
que se ve en un determinado sistema operativo con un navegador
específico, no se vea en el mismo sistema operativo pero con otro navegador,
es por eso que hay realizar muchas pruebas para que los distintos
usuarios puedan ver lo que queremos que vean.
Es imposible controlar todas las variables, por lo que diseñar una página
significa sugerir la forma en que queremos que se vea.
Transferencia
La velocidad depende del tipo de conexión: inalámbrica, cablemodem
y modem. La conexión más común es por módem, y el estándar de
transferencia que se calcula en un módem de 56k es de 4k/seg.
Por lo general el texto siempre es lo primero que se descarga (porque
es lo que menos pesa), luego las imágenes y otro tipo de archivos más
pesados (*.swf, *.avi, *.mp3, *.wav, *.mov, *.exe, etc.)
El tiempo total de descarga del archivo dependerá de la relación PESO
- VELOCIDAD de transferencia. Esta es una relación proporcional, en la
que hay que tener en cuenta que equipo y conexión posee nuestro target.
Velocidades de módem
56bps ______ 4k ______ 1 seg.
28bps ______ 10k ______ 5 seg.
Hay otros factores como la hora, el sitio en particular, el server en el
que está alojado el sitio, la cantidad de páginas que uno está descargando
simultáneamente, que influyen en el tiempo de descarga.
Server: (una explicación simple) Es un disco rígido que está permanentemente
online, al cual se le ha designado una dirección numérica que
corresponde al sitio que queremos ver. Cuando tipeamos una dirección
URL, nuestra computadora se conecta con esa dirección numérica (I.P.)
y transfiere los datos para que podamos verlos en nuestra pantalla. Los
datos se guardan como archivos temporales en el directorio "Windows>
Archivos Temporarios de Internet" de nuestra computadora.
HTML: la grilla de las páginas web
Explicación de entrecasa. El lenguaje HTML es un código simple que
funciona como una grilla, dando forma a los elementos y archivos que
componen la página. Los elementos pueden ser propios del lenguaje
(texto, tablas, fondo, links, etc) o construidos en otros programas (imágenes,
sonidos, videos, etc).
Los elementos del lenguaje están definidos por tags (etiquetas), un
nombre entre signos "<" y ">". Por ejemplo: <title>; todo lo contenido
entre esta etiqueta y la correspondiente de cierre (</title>) es "interpretado"
por el navegador como un objeto de tipo "title" (título, en
este caso).
El *.html llama desde el código a los archivos externos por medio de
"tags" (específicos para cada tipo de elementos) y los busca en una ubicación
predeterminada, que hemos indicado al insertar la imagen. Es
imprescindible que las imágenes estén en la ubicación indicada,
porque sino se van a ver como error cuando veamos la página en el
navegador. (Parece complicado, pero es como crear un documento en
el PageMaker que tenga imágenes. Si queremos imprimir el archivo
.pm, necesitamos también los archivos de las imágenes que insertamos).
Desde el html se le pueden otorgar propiedades a los archivos que
insertamos, como la de ser un link a otra página; variar el tamaño original,
etc..
Cuando abrimos el archivo *.html en un navegador, éste interpreta el
código y nos muestra la página.
8. Tecnologías ¿Cómo está
compuesta una página?
HTML: Código.
El lenguaje HTML (HyperText Markup Language -Lenguaje de Marcación
de hipertextos) se distribuye en la red como un archivo de texto
que incluye la estructura, la presentación y el contenido.
Recuerden que los elementos del lenguaje están definidos por tags
(etiquetas).
Todo documento Html debe comenzar con el tag <html> y terminar
con el cierre </html>.
Dentro del mismo hay dos partes básicas: el encabezado (<head>) y el
cuerpo (<body>), y en general los tags pertenecen exclusivamente a
una u otra parte, por ejemplo: <title>, pertenece al <head> y nunca
debe aparecer en el <body>. A su vez, dentro de cada una de estas
partes aparecen otros tags. Los tags se pueden anidar con la condición
de que sea sin superposición esto es un tag interno no cruza los límites
del externo.
Los tags pueden tener atributos, por ejemplo un objeto "imagen"
puede tener propiedades como el nombre del archivo fuente y las
dimensiones.
Los atributos están formados por tres partes: el nombre, signo igual y
un valor asignado entre comillas, <body bgcolor="#FFFFFF">.
Tag de imagen y de enlace
El tag de imagen es un elemento vacío. Esto es, comprende sólo un tag
de inicio ("<img>") y no posee tag de cierre. Sin embargo, tiene al
menos un atributo obligatorio: la ubicación de origen del archivo.
El atributo "scr" indica la ubicación del documento. Recuérdese que un
atributo está formado por tres partes: el nombre (src); el signo igual
(=); y el valor escrito entre comillas ("linea.gif").
Los atributos "width" y "height" indican el tamaño de la imagen.
El atributo "border" asigna el ancho, definido en píxeles, del recuadro
azul, que es el método, por omisión, de indicar que esa imagen es un
enlace. Si este valor es "O", no se muestra.
El atributo "alt" contiene un texto que será presentado en lugar de la
imagen mientras es descargada a la computadora del usuario. Es
importante poner nombres significativos, como "ayuda", "aceptar", o
algún mensaje, como "espere a que la imagen termine de descargarse",
etc.
El tag de imagen está anidado dentro e un tag de enlace que tiene un
inicio ("<a>") y un cierre ("</a>").
El atributo "href" indica la ubicación dentro del disco o de internet, del
archivo destino del hiperenlace (de ahí el nombre hyperreference).
Este atributo es obligatorio e imprescindible.
Tipos de archivos que soporta un HTML
Los archivos que pueden insertarse en un *.html son, entre otros:
. Imágenes: en formato *.gif ; *.jpg ; *.bmp ; *.jpeg
. Objetos de JavaScript: campos de ingreso de datos ; applets (por ej.:
ventana de chat) ; menús desplegables (pull down) ; comportamientos
(por ej.: cambio de imagen cuando el mouse pasa por encima ; estilos
en el texto (tipografía determinada, color, cambio de color en los links,
etc.) ; etc. etc. etc.
. Plug-ins: programas que se incorporan para poder ver determinadas
cosas (por ej.: Flash Player, Shockwave Player, etc.)
. Archivos Flash: *.swf. animaciones de tipo vectorial, que pueden
tener sonido, incluir imágenes pixelares y funcionar como interfase de
navegación.
. Archivos Shockwave:
. Formatos de video: *.avi
. Archivos construidos con el Fireworks: *.png
Optimización de las imágenes
Formato GIF
Todo el sentido de usar una tabla y de aplicar un proceso de compresión
de la imagen (características de un *.gif) es para reducir el tamaño
del archivo final y, por lo tanto, el tiempo que tarda en transferirse. Si,
cuantos menos colores tiene el archivo, menos pesa.
Dadas las características del formato *.gif: precisión fija (72 dpi) y limitado
de colores (hasta 256) ¿en qué tipo de gráficos nos conviene usarlo?
El formato *.gif es muy bueno para pocos colores planos y razonable
para otras situaciones.
El formato GIF89, tiene otras cualidades y una de ellas es la posibilidad
de definir uno o más colores como transparentes, para las imágenes
no rectangulares.
Otra ventaja es que permite guardar el archivo con "interlace": entrelazado.
Si un gráfico tarda mucho en bajar un usuario no sabe si es que
es muy pesado o se cortó la comunicación. Con esta opción, comienza
a aparecer la imagen con píxeles grotescos y poco a poco se define con
mayor claridad, permitiendo que el usuario sepa que está bajando la
imagen.
Por último tiene la característica de GIF animado, permite incluir una
serie de imágenes con comandos incorporados para hacerlas rotar y
simular movimiento.
Formato JPEG
El Jpeg, es un formato de archivo de calidad fotográfica y sus iniciales
significan Joint Photographic Experts Group (Grupo Conjunto de
Expertos fotográficos).
Este grupo analizó la forma de comprimir imágenes de cualquier resolución
y con millones de colores. Para ello debió tomar un compromiso:
parte de la información (contenida en la imagen) podía perderse.
Expliquémoslo más detenidamente.
El formato *.gif posee un algoritmo de compresión que es de características
"loss-less". Significa que no pierde información cuando comprime
un archivo: el archivo recuperado es exactamente igual al original.
Para poder lograr mayores compresiones en archivos con millones de
colores y distribuciones muy complicadas (ej.: fotos con mucha gente)
los expertos definieron 11 diferentes grados de calidad:
10 a 8 (máximo), 7 a 6 (alto), 5 a 3 (medio) y 2 a 0 (bajo).
Como es de esperar el tamaño del archivo es proporcional a la calidad,
y a mayor calidad, mayor peso. Por lo que toda compresión es relativa
al tipo de archivo, ya que se efectúa en función de los colores incluidos.
Aún sin perder ningún detalle, la compresión JPEG logra más reducción
al 42% del original. Utilizando la máxima compresión llega al 15% del
original.
¿Y por qué no usar siempre JPEG?
Pues:
-en imágenes simples, no logra tanta compresión como *.gif
-en colores plenos -con mucha compresión- puede crear "artifacts",
pequeños brillos o manchas;
-no permite transparencia;
-no incluye animación.
¿Cuál es el mejor formato para imágenes web?
La respuesta no es única así que, resumiendo, sugeriremos que siempre
que resulte posible, se usen imágenes *.gif con colores websafe (para
asegurar consistencia). Pero en los casos en que los resultados sean
malos, podemos probar con la máxima compresión (o sea, menor calidad
de la imagen) posible en formato "JPEG". http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-calidad
http://diseño-gráfico/diseñadores-calidad
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-calidad
http://diseño-gráfico/diseñadores-calidad
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-calidad
http://diseño-gráfico/diseñadores-calidad
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-calidad
http://diseño-gráfico/diseñadores-calidad
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-elaboracion
http://diseño-gráfico/diseñadores-elaboracion
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-elaboracion
http://diseño-gráfico/diseñadores-elaboracion
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-elaboracion
http://diseño-gráfico/diseñadores-elaboracion
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-elaboracion
http://diseño-gráfico/diseñadores-elaboracion
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-internet
http://diseño-gráfico/diseñadores-internet/a>
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-internet
http://diseño-gráfico/diseñadores-internet
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-internet
http://diseño-gráfico/diseñadores-internet
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-internet
http://diseño-gráfico/diseñadores-internet
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-sitios
http://diseño-gráfico/diseñadores-sitios
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-sitios
http://diseño-gráfico/diseñadores-sitios
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-sitios
http://diseño-gráfico/diseñadores-sitios
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-sitios
http://diseño-gráfico/diseñadores-sitios
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-aprender
http://diseño-gráfico/diseñadores-aprender
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-aprender
http://diseño-gráfico/diseñadores-aprender
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-aprender
http://diseño-gráfico/diseñadores-aprender
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-aprender
http://diseño-gráfico/diseñadores-aprender
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-tutoriales
http://diseño-gráfico/diseñadores-tutoriales
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-tutoriales
http://diseño-gráfico/diseñadores-tutoriales
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-tutoriales
http://diseño-gráfico/diseñadores-tutoriales
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-tutoriales
http://diseño-gráfico/diseñadores-tutoriales
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-manuales
http://diseño-gráfico/diseñadores-manuales
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-manuales
http://diseño-gráfico/diseñadores-manuales
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-manuales
http://diseño-gráfico/diseñadores-manuales
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-manuales
http://diseño-gráfico/diseñadores-manuales
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-diseñar
http://diseño-gráfico/diseñadores-diseñar
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-diseñar
http://diseño-gráfico/diseñadores-diseñar
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-diseñar
http://diseño-gráfico/diseñadores-diseñar
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-diseñar
http://diseño-gráfico/diseñadores-diseñar
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-calidad
http://diseño-gráfico/diseñadores-calidad
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-calidad
http://diseño-gráfico/diseñadores-calidad
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-calidad
http://diseño-gráfico/diseñadores-calidad
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-calidad
http://diseño-gráfico/diseñadores-calidad
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-elaboracion
http://diseño-gráfico/diseñadores-elaboracion
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-elaboracion
http://diseño-gráfico/diseñadores-elaboracion
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-elaboracion
http://diseño-gráfico/diseñadores-elaboracion
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-elaboracion
http://diseño-gráfico/diseñadores-elaboracion
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-internet
http://diseño-gráfico/diseñadores-internet/a>
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-internet
http://diseño-gráfico/diseñadores-internet
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-internet
http://diseño-gráfico/diseñadores-internet
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-internet
http://diseño-gráfico/diseñadores-internet
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-sitios
http://diseño-gráfico/diseñadores-sitios
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-sitios
http://diseño-gráfico/diseñadores-sitios
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-sitios
http://diseño-gráfico/diseñadores-sitios
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-sitios
http://diseño-gráfico/diseñadores-sitios
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-aprender
http://diseño-gráfico/diseñadores-aprender
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-aprender
http://diseño-gráfico/diseñadores-aprender
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-aprender
http://diseño-gráfico/diseñadores-aprender
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-aprender
http://diseño-gráfico/diseñadores-aprender
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-tutoriales
http://diseño-gráfico/diseñadores-tutoriales
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-tutoriales
http://diseño-gráfico/diseñadores-tutoriales
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-tutoriales
http://diseño-gráfico/diseñadores-tutoriales
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-tutoriales
http://diseño-gráfico/diseñadores-tutoriales
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-manuales
http://diseño-gráfico/diseñadores-manuales
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-manuales
http://diseño-gráfico/diseñadores-manuales
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-manuales
http://diseño-gráfico/diseñadores-manuales
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-manuales
http://diseño-gráfico/diseñadores-manuales
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-diseñar
http://diseño-gráfico/diseñadores-diseñar
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-diseñar
http://diseño-gráfico/diseñadores-diseñar
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-diseñar
http://diseño-gráfico/diseñadores-diseñar
http://diseño-web-diseño-de-paginas-web/articulos-de-diseño-diseñar
http://diseño-gráfico/diseñadores-diseñar