Web.
El DISEÑO WEB comprende... El diseño de contenido y el diseño estético/visual o gráfico del sitio.
Se construye a partir de dos criterios básicos fundamentales:
1. Lo que está subordinado al plan estratégico del proyecto web y que refiere a las particularidades de cada sitio.
2. Una serie de reglas que son de validez universal, relacionadas en con el medio digital interactivo WEB.
En esta clase se desarrolla este segundo aspecto, es decir, todo lo que tiene que ver con las reglas generales del
MEDIO WEB, dejando en ustedes la capacidad de discernir si esas reglas sirven, son funcionales y pertinentes,
desde el punto de vista estético o no, para el sitio en particular que quieran diseñar.
/1. DISEÑO DE CONTENIDOS
Cuando hablamos de CONTENIDO nos estamos refiriendo a todos los aspectos que comprenden la elaboración de
textos escritos, desde los títulos de un link, hasta un artículo.
Una vez que han determinado, a partir del "mapa del sitio", con qué secciones va a contar el sitio, recién comienza la
elaboración de los textos del contenido.
Les sugerimos para la elaboración del contenido, no usar directamente los editores web, sino trabajar en un
procesador de texto, para que luego de revisados y corregidos, sean trasladados para la edición.
Jakob Nielsen dice "Al final, los usuarios visitan el sitio web por su contenido. El diseño existe para permitir a la
gente acceder al contenido".
Es cierto... El valor de un sitio, en gran parte, se mide por la cantidad y calidad de su contenido.
Pero atención! Nosotros creemos que el contenido de un sitio NO necesariamente es texto, pueden ser imágenes
(fotografías, mapas, pinturas, etc.), también puede ser un sitio sobre mp3. Pero...no obstante, por ahora nos
detendremos en todo lo que se refiere a la producción de textos como contenidos de un sitio web.
1/1 ESCRIBIR PARA LA WEB! Acerca de la lectura en pantalla
Leer en pantalla no es lo mismo que leer un texto impreso. El usuario de la pantalla, más que leer, scanea, sobre todo
en aquellas páginas que son de "paso" hacia otras -como la home- es una mirada general que recorre la superficie del
monitor en forma de z: desde un extremo hacia el otro del vértice superior, para luego ir en diagonal hacia el
extremo del vértice inferior y terminar en la otra punta.
Esto implica, que en el momento del diseño, el uso de links, las imágenes, los íconos, titulares y el propio texto
deben estar dispuestos para que el usuario reconozca, en esa primera aproximación, los contenidos que allí se
exponen.
En estudios realizados, se encontró que...
////// el 79% de los usuarios siempre ojean las páginas en busca de palabras claves, frases y ciertos párrafos de
interés;
////// sólo una pequeña cantidad, lee de modo lineal, palabra por palabra, como sucede por ejemplo, con un libro.
Nielsen intenta una explicación a la cuestión de por qué los usuarios scanean las páginas web y no leen de modo
tradicional:
Leer en pantalla es cansador
Los usuarios de la web tienen un gran poder de interactividad. Así, si tienen que leer todo el artículo antes de hacer
un clic de mouse, sienten que es poco productivo.
Cada página compite con millones de otras páginas. Esta situación hace que los usuarios se sienten interpelados a
recorrerlas en busca de información rápidamente. Si tienen que leer todo el texto para saber si lo que buscaban está
en ese sitio, consideran que pierden el tiempo.Pero... Hay otras páginas en las cuales el texto requiere necesariamente mayor densidad: por ej. una crítica de
película
Para ésto se recomienda...
Utilizar la idea de pirámide invertida. Es decir, en el primer párrafo debería estar lo más importante del artículo, y
una especie de síntesis de todo que contendrá. Traten de escribir textos breves.
Como dijimos, las reglas sobre diseño son versátiles, y deben adaptase a las características de los sitios en concreto.
En general los sitios ligados a la academia, suelen tener textos largos, y no podría ser de otro modo: monografías,
investigaciones, artículos, clases, etc.
En estos casos es conveniente dividir los textos en diferentes archivos y conectarlos a través de links con una
estructura lineal, y dar también la opción para que puedan imprimirlos.
Luego de escribir los contenidos, háganse un tiempo para la revisión ortográfica y gramatical. Una escritura
correcta es sinónimo de seriedad y trabajo.
Una de las mayores dificultades consiste en que los usuarios de Internet encuentren nuestro sitio. Un buen título de
página es un comienzo para que empiecen a localizarla. Los motores de búsqueda, a los que ingresan la mayoría de
los navegantes para buscar contenidos, funcionan a través de palabras claves que los usuarios escriben. Lo que el
motor de búsqueda devuelve como resultado, en gran medida, es lo que se ha escrito como titular.
También, queremos hacer una mención a las problemáticas legales en relación al COPYRIGHT.
Lo que circula por Internet tiene propietario y si ustedes quieren usar esa propiedad tienen que tener permiso del
dueño. Sólo se puede publicar aquel material propio, o que ha sido liberado para su reproducción.
1/2/ lectura en pantalla - CONTRASTE DE COLORES / Diseñar Contenidos visualmente
Lo mejor, en cuanto a colores, es seguir con el tradicional negro sobre blanco, es decir, letras negras y fondo blanco.
Este contraste sigue siendo lo más cómodo al momento de la lectura. La legibilidad se vuelve más complicada si se
usan colores de poco contraste, como por ejemplo texto amarillo sobre fondo verde.
1/3/ lectura en pantalla - TIPOS DE LETRAS O FUENTES
El tipo de letra (la fuente o tipografías) de un sitio web, no solamente es un recurso del diseñador de la página, sino
que debe coincidir con las fuentes que el usuario tenga en su computadora.
Lo mejor es diseñar con varios tipos de letras alternativas o "fuentes multiplataformas". Esto es una especie de orden
que le damos al diseño por el cual decimos que la letra debe ser Verdana, si no la encuentra en el sistema del
usuario, que la reemplace por Arial, y si tampoco encuentra ésta, que la reemplace por Helvética, por ejemplo.
1/4 USO DE "NEGRITAS"
Usen las negritas o el tipo cursiva para resaltar alguna palabra o frase del texto, pero no abusen de esta opción,
porque si todo está resaltado, el usuario se acostumbra a esa lectura y el recurso deja de funcionar como modo de
destacar.
1/5 USO DE "SUBRAYADO"
El atributo de subrayado NO lo recomendamos! Es el estándar establecido por los navegadores para los links, por lo
que su uso puede prestarse a confusión.
El comportamiento "espontáneo" del usuario ante palabras subrayadas es pasar el mouse creyendo que es un link. Y
ésto, al 2º intento, es frustante y seguramente el usuario no intentará más buscar un link en esa página.
1/6 TAMAÑO DE FUENTES
Utilicen fuentes suficientemente grandes como para hacer más cómoda la visualización en pantalla.| ESTÁNDARES HTML
El tamaño de los textos en el lenguaje HTML se establece por rango de 1 a 7, donde 1 es menor a 7. Esta valoración
es relativa, es decir, no indica ni puntos ni pixeles.
En el siguiente cuadro, veremos cómo se establece de modo aproximado! la relación de rangos 1 a 7 del HTML, con
la visualización final en "puntos".
RANGO HTML CUERPO EN PUNTOS (apróx.)
3 = 12
7 = 36
Vayan visualizando en el navegador concretamente cada rango:
Este es un tamaño 7
Este es un tamaño 6
Este es un tamaño 5
Este es un tamaño 4
Este es un tamaño 3
Este es un tamaño 2
Pero tengan en cuenta que los "estándares HTML" (por rangos) son "valorativos", lo que implica que no se tiene un
poder absoluto sobre el modo en que lo verán los usuarios. Si ustedes eligen un tamaño de letra de 3, cambiará la
percepción si el navegador del usuario está configurado con un tamaño de fuente diferente. Es recomendable diseñar
con un tamaño no menor a rango 2 y no mayor a rango 4, siendo lo más conveniente un tamaño de rango 3.
Además de todo ésto, distintas computadoras (sistemas operativos) cambian el tamaño de la fuente. Es así que un
mismo tamaño se verá de modo diferente en Windows, que en Macintosh.
El gráfico a la derecha, establece algunas comparaciones....1/7/ tipografías - SERIF o SANS SERIF
Los diseñadores gráficos, recomiendan usar el tipo "Serif" para la mayor parte de los textos, ya que este tipo de
tipografía es más fácil y rápida de leer, ya que agrega mayor información visual. Sin embargo en Internet, en razón
de una posible no muy alta definición visual de las pantallas, la tipografía "Serif" produce efectos en las letras, que
hacen dificultosa su lectura.
En una página impresa, la resolución de impresión es muy alta, por lo que esos pequeños elementos decorativos en
los pies de las letras quedan muy bien definidos.Por eso si ustedes creen que los usuarios van a imprimir un texto, lo
mejor es la letra serif. Pero si creen que van a leer en pantalla lo mejor es sans serif. Visualicemos concretamente en
la pantalla del navegador...
"
Serif A
Sans Serif A
Pueden usar algunas otras fuentes diferentes para los títulos. Pero no es recomendable ir más allá de eso. Es decir,
pueden usar dos tipos de fuentes y no más, ya que crea confusión. También utilicen un tipo de fuente para todo el
sitio, de modo que el estilo y la coherencia se mantengan.
Los desarrollos profesionales de Web han convenido que la tipografía Verdana es la que mejor se lee en pantalla.
En el "ranking" le sigue la Arial.
1/8 ALINEACIÓN DE PÁRRAFOS
Alinear el texto a la izquierda. Los usuarios leen de forma más rápida y cómoda si tiene un punto fijo desde donde
comenzar a leer. Claro que en determinados momentos, se puede centrar o realizar una alineación diferente en
algunos párrafos, en el sentido de lograr un efecto visual (por ejemplo, destacar algo), pero no lo hagan con bloques
de textos largos. No existe para el html standard, el justificado!. Inclusive no es recomendado para la lectura de la
pantalla./A.9 Otras recomendaciones en el diseño del texto
Párrafos - extensión vertical: Lo conveniente para el descanso de la lectura es el uso de espacios. Utilicen
separaciones entre párrafo y párrafo, creando una especie de bloques de textos, con un mínimo de espacio en blanco.
Párrafos - extensión horizontal: Es aconsejable, que el texto de cualquier página web, esté dentro de una tabla que
define su extensión en horizontal. Es importante tener en cuenta que el texto no ocupe un ancho mayor a un 80% de
la pantalla para que permitir una mejor legibilidad. En este sentido, las tablas funcionan como un contenedor. Se
considera que para leer es más cómodo un ancho que no ocupe el 100 % de la pantalla
Viñetas: guía de un modo más claro la lectura.
Sangría: permite crear determinados espacios que facilitan y guían la lectura.
Uso de mayúsculas: Eviten el uso de mayúscula en texto de contenido o que requieran cierta lectura. LOS
USUARIOS LEEN LOS TEXTOS EN MAYÚSCULA 10 % MÁS LENTO QUE EL TEXTO ESCRITO EN
MINÚSCULA, YA QUE RESULTA MAS DIFICULTOSO PARA LA VISTA RECONOCER LAS FORMAS DE
LAS PALABRAS CON LA APARIENCIA UNIFORME, COMO USTEDES COMPROBARÁN EN ESTE
PEQUEÑO TEXTO. No obstante, si pueden utilizar textos en mayúsculas para resaltar títulos, palabras en una frase
o algún sector de un párrafo.
1/10 Hojas de Estilos CSS
Lo más conveniente para un mayor dominio del diseño por parte de ustedes (para que el usuario visualice tal cual
ven los diseñadores en su pantalla, independientemente de las personalizaciones que éste usuario haya definido en su
sistema) es el uso de HOJA DE ESTILOS CSS.
/2 DISEÑO DE LINKS
estratregia de diseño de hipervínculos = NAVEGABILIDAD DEL SITIO WEB
Los hipervínculos son los elementos centrales del gran hipertexto que es la World Wide Web, por lo que en gran
medida, un buen diseño del sitio depende de la capacidad en la construcción y diseño del hipertexto a través de
links.
Es decir, una buena navegabilidad, sencilla y funcional para el usuario, es fundamental para el éxito de un sitio web.
No abusar de "links", pues muchas veces no hacen más que extraviar al navegante por confusos laberintos.
TIPOS DE LINKS
A/ Una vinculación con otro texto o documento dentro del mismo sitio.
= LINKS A PÁGINAS DEL SITIO LOCAL (links relativos)
Suele denominarse a este tipo como "links internos" ya que vinculan a páginas dentro del mismo sitio (las que
vemos en nuestra estructura web de sitio local)
B/ Una vinculación con otro documento que está en un sitio diferente de Internet
= LINKS A PÁGINAS DE OTROS SITIOS WEB (links absolutos)
Suelen denominarse a estos links como "links externos", debido a que vinculan a páginas que no se encuentran en el
sitio actual, sino a páginas de otros sitios que tienen su propia dirección web.
Estos links se indican refiriendo a la URL = Uniform Resources Localizator (Localizador Uniforme de Recursos)
que es el protocolo requerido en la web, es decir, referidos a una dirección web completa con el protocolo HTTP.
Por ejemplo http://www.puntoedu.edu.arC/ Una vinculación a una dirección de correo electrónico
= LINKS A EMAIL ("mailto")
Estos links no abren una página en la ventana del navegador.
Como refieren una dirección de e-mail indicada según el protocolo (por ejemplo info@puntoedu.edu.ar), abren el
software predeterminado del usuario para correo electrónico, con un nuevo mensaje y en el campo "para" se
completa automáticamente la dirección de email indicada en el link.
D/ Una vinculación en el mismo texto
= LINKS A PUNTOS DE FIJACIÓN CON NOMBRE
Ej 1: Una palabra al principio de la página que vincula con a un texto que está en la parte inferior de la misma
página.
Ej 2: "arriba" que vincula a la parte superior de la misma pantalla. Un índice, donde cada ítem vincula directamente
a la ubicación en el misma página donde se desarrolla el tema indicado.
Algunas sugerencias para la construcción y diseño de links son:
1 | COLORES DE LINKS #1
Se recomienda, en lo posible, utilizar los colores tradicionales de links.
En general, todos los navegantes entienden (ya casi como una convención) que el color azul designa un
hipervínculo.
Intenten no contradecir esta percepción, ya que los usuarios se han acostumbrado a esta forma de reconocimiento.
Hay otra opción en el diseño, que es links visitados. Es decir, que luego de que visitamos un link, el diseño ha sido
pensado para que cambie de color y los usuarios se den cuenta de que ya han pasado por allí.
En general, la convención para los links visitados se indica con bordó.
2 | COLORES DE LINKS #2
Si no se utilizan los colores de links estándares del medio, intentar siempre una clara identificación de los links, a
través del uso de colores contrastantes entre textos normales y textos con links.
3 | LINKS DESDE TEXTOS
No usen como vínculos párrafos o líneas enteras. Lo mejor es que un link se establezca con una o dos palabras.
4 | Haga clic aquí?
"Haga clic aquí", es no recomendado porque no proporciona ninguna información al usuario sobre con qué se va a
encontrar. Además, corta la lectura.
5 | ALTERNATIVE TEXT
Utilicen referencias de vínculos si se trata de imágenes. El HTML tienen una opción que permite poner referencias a
los links " alternative text" o "texto alternativo"
Esto es de gran ayuda para los usuarios, ya que al posar el mouse en la palabra linkeada, aparece un pequeño
recuadro de texto donde indica brevemente, con qué se van a encontrar cuando aprieten allí.
6 | LINKS EXTERNOSVinculación a páginas de otros sitios. Lo malo de esto es que estamos abriéndoles las puertas al usuario para que se
vaya del nuestro, y ésto estratégicamente no es conveniente.
7 | NUEVAS VENTANAS
Vínculos que se abren en nuevas ventanas. Es el tipo de vínculo que estamos usando en la mayoría de los links
secundarios. Sirve para que el usuario no pierda de vista la pantalla con el texto principal y, que luego de leer el
texto del link, pueda volver rápidamente. Pero, no es recomendable abusar de este tipo de aperturas.
8 | BANNERS
Vínculos de publicidades (banners*). A grandes rasgos existen dos tipos de links publicitarios: uno se dirige a la
página de inicio de la firma responsable de la publicidad y el otro se dirige a una página interna del sitio de quien se
publicita. Está comprobado que un gran porcentaje de usuarios, al "hacer clic" en un banner publicitario que vincula
a una página de inicio de la firma, vuelven rápidamente atrás. En general los usuarios, prefieren los banner
publicitarios para encontrar información precisa y concreta y no para tener que empezar a buscar, a partir de una
página de inicio. Por ejemplo... Si una publicidad ofrece ofertas de computadoras, lo mejor es que se ingrese a una
página en donde las ofertas aparezcan.
9 | LINKS A UBICACIONES EN LA MISMA PÁGINA
Cuando existen textos demasiados largos, se suele usar esta opción para conectar desde el índice con los subtítulos al
interior del contenido. Sin embargo, usarla en demasía suele confundir al lector, ya que piensa que ha ido a otra
página, pero sin embargo todavía se encuentra en la misma.
TEXTOS + LINKS
No conviene que el texto no ocupe un ancho mayor a un 80% de la pantalla para permitir una mejor legibilidad.
En este sentido, hemos recomendado el uso de "tablas" ya que funcionan como un contenedor definiendo la
extensión horizontal de textos. En la imagen siguiente, pueden ver cómo queda una página sencilla con algunos
atributos típicos del diseño web en relación a contenidos: contraste de colores, tipo de letras, tamaño, anchos y
separación de párrafos, sangría, viñeta, links, y uso de tablas
3/ DISEÑO DE PANTALLAS
El "diseño de pantallas para la web" refiere a todo aspecto gráfico y visual que contiene una página web. Se trata deuna cantidad de elementos (tablas, textos, gráficos, fotos, íconos, botones, links, etc.) que dispuestos de tal forma,
conforman una página web.
Sugerimos para la elaboración del contenido, no usar directamente los editores web, sino trabajar en un procesador
de texto, para que, luego de revisados y corregidos, sean trasladados (o insertados) para la edición web.
3/1 EL DISEÑO DE LA HOME PAGE = PÁGINA DE INICIO
La página de inicio es con lo primero que en general se van a encontrar los usuarios y funciona como puerta de
entrada de todo el sitio web. La primera impresión es la que cuenta, por lo que una buena construcción de la página
de inicio, equivale a un porcentaje importante del éxito del sitio.
El objetivo de la página de inicio debe ser concentrar la atención de los usuarios siendo capaz de presentar de un
modo conciso y sencillo, con qué contenidos se van a encontrar en el interior del sitio
| COMUNICACIÓN VISUAL
Las estrategias desarrolladas para la página de inicio, varían entre lo funcional centrado en la esencia informativa y
la estética del diseño. Lo mejor, claro está, es que los dos aspectos no se excluyan y se puedan complementar.
| NAVEGABILIDAD
Unos de los aspectos más importantes en el diseño de la página de Inicio (y de todas las páginas Web en general)
son los elementos de navegación, que son los que permiten movernos a través de las diferentes páginas que se han
construido. Una buena barra de navegación o menú, es la que además de abarcar todas las secciones del sitio, puede
leerse fácilmente y está ubicada de tal modo, que se reconoce con facilidad
| TIEMPO DE DESCARGA
Traten de que las páginas no pesen en total más 35k, ustedes saben que la velocidad de descarga de un sitio es lo que
más valoran los navegantes. Si el usuario pone una dirección de Internet, y en 10 segundos no ve que la página
comienza a cargarse, probablemente desistirá de ingresar a la misma.
Aquí vemos un cuadro con las velocidades aproximativas de acuerdo
al peso de la página y los tipos de conexión...
VELOCIDAD....................................................................................
14400 bps 28800 bps 56600 bps
TAMAÑO Tiempo de descarga en "segundos"........
50Kbs 30 sg 15 sg 7 sg
100Kbs 60 sg 30 sg 14 sg
Tiempo óptimo estimado para la descarga = 7 a 10....
sg.
| Bienvenidos...?
No construyan una página previa a la página de Inicio (esas que tienen una presentación inicial, como las que usan
flash o las que dicen Bienvenidos), ya que es una pérdida de tiempo hacer dos clics para ingresar a una página, que
además, es sólo un medio para que ingresen a los contenidos del sitio.
| Horizontalidad
No construyan páginas de inicio que no entren en el ancho horizontal de la pantalla, es decir, que para visualizarlas
de modo completo, los navegantes deban usar la barra de desplazamiento o "scroll" horizontal.
| El 1º Pantallazo!
Intenten también, que el largo de la página no sea tan pronunciado, como para que verla en su totalidad, requiera un
uso desmedido de la barra de deslizamiento.| Verticalidad
Si la página de Inicio tiene un tamaño superior a la altura de la pantalla, es decir, que para visualizarla en su
totalidad, el usuario debe usar la barra de deslizamiento vertical, lo mejor es duplicar los elementos de la
navegación. Pueden colocar en estos casos, por lo tanto, los links de navegación al principio y al final de las páginas.
Estas sugerencias son válidas inclusive para la páginas interiores del sitio.
| Protagonismo
Construyan páginas de inicio con algunas características que las hagan distintivas en relación a las páginas
interiores. El usuario debe ser capaz de percibir que se trata de una página de Inicio. En este sentido, jueguen con las
posibilidades de los títulos, botones, uso de los espacios, etc.
El elemento de diseño más importante de esta página debe ser el nombre de la institución o del sitio. Esto no quiere
decir que necesariamente se utilizarán tamaños grandes, pero sí, deben tener un lugar destacado.
3/2 PÁGINAS INTERIORES
Traten de construir sitios coherente a nivel diseño.
| Ahora qué hago?
No cometan el error de crear una página que no lleve a ningún lado. Las páginas de un modo u otro, deben estar
conectadas entre sí, para que no se cree un callejón sin salida.
| Cómo sigo?
Proporcionen una barra de navegación con el contenido del sitio de clara identificación y comprensión.
Los ítems de esta navegación serán siempre los mismos (por ejemplo no utilicen "Quiénes somos" en una página y
en otra "Staff" para ir al mismo contenido).
| Esperando...
Brinden a los usuarios la posibilidad, si se trata de un link realizado con imágenes, de tener la opción de visualizar
los vínculos también en forma de texto. Las imágenes tienen un tiempo de descarga mayor que los textos, por lo que
muchos usuarios impacientes, quieren hacer clic antes de que bajen las imágenes.
| Sigo esperando?
A las páginas interiores de un sitio web también le competen criterios de tiempos de descarga. Si bien, como
sabemos, la gran protagonista para que el usuario decida "hacer clic" al interior de nuestro sitio es la Home-Page, no
olvidar que también el usuario querrá obtener a la mayor brevedad la información de la nueva página solicitada.
| Arriba!
Si las páginas son largas (en vertical), coloquen al final de las mismas, un link que posibilite volver hacia arriba y en
lo posible presente nuevamente a modo de texto los ítems de navegación del sitio.
3 /3 ESPACIO DE PANTALLA
El espacio en la pantalla refiere al modo en que se hace uso del espacio disponible para integrar todos los elementos
de diseño web (imágenes, navegación, títulos, textos, etc.) Un buen uso del espacio de pantalla , permite una mejor
legibilidad, captura la atención del usuario, hace que se realce el contenido, etc.
Para Nielsen la navegación es un mal necesario y no un fin en sí mismo, por lo que el porcentaje que debe
prevalecer en el diseño, es el referido al contenido.
Nielsen divide los aspectos del diseño en contenidos, elementos de navegación, publicidad y espacios en blanco, y
en cuanto a la relación de jerarquía que establece entre ellos, su posición es terminante:
"Como norma, el contenido debe ocupar al menos la mitad del diseño de una página, y preferiblemente hasta un
80%.
La navegación debe mantenerse por debajo del 20% del espacio de las páginas de destino, aunque las opciones de navegación pueden alcanzar proporciones más altas en las páginas de inicio y en las págs de navegación intermedias.
Desde el punto de vista de la usabilidad, sería mejor eliminar la publicidad; si necesita tener anuncios, deberá
considerarse como parte de la estructura de la página, junto a las opciones de navegación, lo cual implica que el
diseño de la navegación tendrá que reducirse".
Obviamente, Nielsen considera el espacio en blanco como un elemento fundamental para el diseño y no plantea
eliminarlo, pero sí tendría que servir para integrar a los demás elementos y no ser un aspecto disgregador.
Veamos en este diseño, el modo que tiene Nielsen para dividir los distintos aspectos, y el comentario crítico que
realiza. Nielsen dice a propósito del sitio Mapquest:
- En un área de 700 x1024 pixels, sólo el 14% se usa para contenidos (lo que se indica en verde dentro del mapa).
- Un más aceptable 16% se usa para los controles del sistema operativo y del navegador (en azul), un predominante
51 % se usa para navegación en el sitio (en amarillo) y un razonable 6 % se destina a la publicidad.
- El 13 % restante de los pixels no se usa (en blanco).
Concluyendo...
Podemos afirmar que la perspectiva de Nielsen es importante para pensar el diseño de toda la pantalla de una página,
pero traten de manejarse con la suficiente versatilidad y creatividad, sobre todo en lo referido a los porcentajes tan
tajantes por este autor manejados, para que este axioma no conspire contra la posibilidad de construir diseños con un
buen impacto visual.
3 /4 TIEMPO DE RESPUESTA
La mayor exigencia que tienen los usuarios de Internet con respecto a un sitio es la velocidad de descarga de las
páginas. En este sentido, la velocidad es el criterio central a cuidar en el diseño web.
En cualquier tipo de sistema hipermedial, el tiempo de respuesta que un usuario anhela es el de 1 segundo. Por
supuesto que ese tiempo por ahora es muy difícil de lograr en Internet, y a lo que hay que aspirar es a que no se
superen los 15 segundos, que es el límite de la capacidad de las personas para mantener la atención mientras
esperan.
Claro está que la velocidad de un sitio o una página no está directamente relacionada con el diseño y en realidad se
debe a diversos factores:
| Factor "server" = Rendimiento del servidor donde está alojado el sitio.
| Factor "conexión local" = El tipo de conexión que los usuarios utilicen.| Factor "la red!" = El propio estado de la red, ya que en determinadas conexiones intercontinentales o en horas
picos, suelen producirse "cuellos de botella".
| Factor "usuario" = El equipamiento del propio usuario: tipo de ordenador, velocidad del MODEM, etc.
Pero el diseño puede ayudar: el peso de una página tiene directa relación con la descarga de la misma, por lo que al
momento de diseñar una página, tienen que poner especial atención en supervisar permanentemente su peso.
Para ésto, uno de los criterios fundamentales, es tener mucho cuidado con las imágenes, ya que éstas son en gran
parte, las responsables de que una página no se descargue velozmente.
En general, un archivo de sólo texto no pesa mucho: por ejemplo, 30 páginas word convertidas al formato html, sin
uso de imágenes, tablas, etc. generan un archivo que pesa 8k
A los fines de "entretener" o "no impacientar" a los usuarios...
La parte superior de la página debe contar con alguna información relevante, de este modo, mientras los usuarios
esperan la descarga total de la página, pueden ir viendo de qué se trata. Recuerden que el texto siempre baja más
rápido que las imágenes, por lo que conviene más la utilización de texto que de imágenes en esas partes de la página.
Utilicen al momento de incluir una imagen el atributo ALT ("alternative text") De este modo, los usuarios pueden
leer en el lugar en donde se descargará la imagen y saber con anticipación de qué trata.
Las tablas complejas aumentan el tiempo de descarga de una pág, por lo que es conveniente reducir la complejidad.
4/ IMÁGENES PARA LA WEB
Las imágenes son archivos gráficos como botones, fotos, títulos, líneas.
En general, sirven para reforzar el contenido informativo y visual de una página.
Se dice muchas veces que una imagen dice más que mil palabras, y no se puede negar el alto carácter comunicativo
de la imagen en nuestra cultura, por lo que prescindir de ella sería un error en este medio de comunicación. Pero...
No hay que abusar del uso de imágenes en la web
Usada adecuada y oportunamente, una imagen, puede ser clave en la comunicación, en cambio usada sin criterio o
sólo porque "es linda", pierde fuerza y no hace más que generar confusión, distracción y sobre todo, lentitud en la
descarga de una página. Lo mejor es usar imágenes cuando ellas ayuden al contenido y sirvan para la comprensión
de lo que allí se expone.
4/1.1 FORMATOS PIXELARES ADMITIDOS EN LA WEB
Para Internet hay dos tipos de formatos de imágenes que se usan : JPG y GIF.
4/1.2 ACERCA DE CÓMO OPTIMIZAR EL USO DE IMÁGENES EN LA WEB
Por ahora y hasta que las cosas no cambien bastante en relación a las velocidades de acceso de los usuarios
hogareños, el tamaño total de todas las imágenes usadas en una página no debería superar como mucho, los 30 KB
A tal fin, algunas estrategias son...
| De mayor a menor... Si quieren poner una imagen que es grande y pesada, pueden hacer una versión miniatura y
dar la opción de clickear allí, para que se despliegue la imagen principal.
| Cuánto...? También es aconsejable, informarle al navegante cuánto pesa la imagen a la que van a acceder al hacer
clic, para darle la oportunidad de elegir si quieren o no realmente hacer el clic para verla. Un link a la imagen con
información que advierta sobre el tipo de archivo y tamaño, será agradecido por los usuarios.
| Resolución: Pueden reducir el peso de una imagen sin necesidad de reducir el tamaño de la misma. Tamaño de la
imagen y peso del archivo no necesariamente van de la mano. El peso de un archivo está determinado por la
cantidad de información que la imagen contenga. Esa información, en la imagen digital, se mide en píxeles. A más
píxeles por pulgada cuadrada tenga una imagen, mayor es su resolución y por lo tanto mayor su peso. Para la web se
recomienda una resolución máxima de 72 dpi. Un archivo con una imagen grande y con pocos colores (por ejemplo
.GIF), puede pesar menos que una imagen diminuta pero de millones de colores (por ejemplo .JPG).
| Cantidad de Colores: Se puede reducir el número de colores de una imagen. La gran mayoría de los usuarios de
Internet no disponen de monitores de alta calidad de 24 bits, sino de 256 colores (8 bits) - recuerden conceptos del
módulo diseño de este curso P+DW en relación a WEB SAFE PALLETE o "colores seguros para la web"-.
| Reutilización Use la misma imagen tantas veces como le sea posible. De esta manera, aprovecha la característica
que disponen la mayoría de navegadores de almacenar en la caché las imágenes ya cargadas.
| Fondo de página Recomendamos no usar imágenes pesadas para fondos de páginas.
Si quiere un fondo de página, celda, tabla, etc. con determinada imagen, tiene que ser muy liviana.
4 /2 ANIMACIONES...
En general, los sondeos y encuestas de opinión realizados en relación al valor asignado al uso de las animaciones en
los sitios web, han dado como resultado que a la gran mayoría de los usuarios le molesta el recurso de "imágenes
animadas". No es extraño.... Se sabe que la imagen en movimiento, si bien tiene un efecto potenciador de la visión
periférica del hombre, usada en la web tiende a dispersar la atención y por lo tanto, leer cuando hay una imagen que
se mueve, distrae y conspira contra la fijación de la mirada.
Pero... Debemos reconocer, que desde el punto de vista del diseño, la tentación de usar imágenes en movimiento es
grande. Pareciera que una página que tiene mucho movimiento es sinónimo de status, de capacidad creativa, de
conocimiento técnico... Sin embargo suele ser todo lo contrario!!.
La gran cantidad de sitios que utilizan este recurso, suelen ser mal vistos estéticamente, además de convertirse en
poco funcionales en relación con los fines perseguidos.
Pero (uno más), claro está que... En "ciertas ocasiones", una buena animación puede ser un elemento distintivo y de
gran valor comunicativo.Y entonces... volvemos a lo de siempre... El CRITERIO para el uso de un recurso debe ser precedido de un análisis
sobre si es funcional o no, si sirve para lo que se quiere comunicar o sólo distrae, si creemos que dispersará la
atención del público o por el contrario, le ayudará a comprender mejor el sentido del mensaje que se quiere dar. Para
responder a estos interrogantes, necesariamente se deben tener en cuenta muchos factores que dependen de la
situación concreta.
Como muchas veces hemos dicho, no es lo mismo un sitio dedicado a la investigación académica que uno sobre cine
u otro donde el lugar de la imagen es relevante; o más aún, aquellos sitios dedicados a algún tipo de contenidos
relacionados con animaciones (dibujos animados, comics, historietas, juegos, etc.).
4/2.1 EL "GURÚ" JACKOB NIELSEN Y LAS IMÁGENES ANIMADAS
J. Nielsen , en “usability” plantea que SI existen algunas situaciones en donde el uso de imagen en movimiento
puede ser de ayuda para la comprensión de lo que se quiere expresar como así también una buena forma de orientar
a los usuarios en la navegación:
- Mostrar continuidad en la transiciones
Con ésto refiere a aquellas situaciones en donde, existen dos o más estados en donde los cambios de uno a otro son
más fáciles de entender si las transiciones son animadas en vez de instantáneas. Es decir, por ejemplo, es mucho más
sencillo para el usuario comprender el proceso que va de una botella llena a una vacía, a través de una imagen en
movimiento, que si se muestran dos imágenes estáticas, una botella llena y la otra vacía.
- Indicar la dimensionalidad en la transición
Se trata de indicar, a través de animaciones, el movimiento a lo largo de una dimensión de navegación. Por ejemplo,
paginar por una serie de objetos. Puede mostrarse con una escoba animada de derecha a izquierda para pasar de
páginas, o a la inversa para volver a una página anterior.
- Ilustrar los cambios en el tiempo
Dado que una animación es algo que cambia con el tiempo, proporciona una asignación de uno a uno con los
fenómenos que cambian con el tiempo. Por ejemplo, la deforestación de la selva amazónica puede ilustrarse
mostrando un mapa provisto de una animación de la evolución temporal del área.
- Visualizar estructuras tridimensionales
Dado que la pantalla de la computadora es bidimensional, los usuarios no pueden comprender una estructura
tridimensional con una sola ilustración, independientemente de lo bien diseñada que esté. La animación puede
utilizarse para acentuar la naturaleza tridimensional de los objetos y facilitar a los usuarios la tarea de visualizar su
estructura espacial. La animación no tiene por qué hacer girar el objeto en un círculo completo; normalmente,
bastará con hacerlo girar un poco.
- Atraer la atención
Si el objetivo es el de atraer la atención del usuario hacia un solo elemento o alertar al usuario con información
actualizada, un titular animado sería ideal. El texto animado debe ser dibujado con una animación única (por
ejemplo, el texto deslizándose desde la derecha, creciendo desde el primer carácter o agrandándose suavemente) y
nunca con una animación continua, ya que el texto en movimiento es mucho más difícil de leer que el texto clásico.
4/2.2 FORMATOS / POSIBILIDADES DE ANIMACIONES EN LA WEB
Actualmente se utilizan dos modos para presentar animaciones en la web:
A/ Gif animado: permite la sensación de movimiento a partir de una serie secuencial de gif. El mayor problema
de esta opción para la animación es que si no hay un buen trabajo de optimización de imágenes y de algunos"trucos" para su construcción, pueden convertirse en archivos pesados para la web. Recuerden siempre que el
término promedio indica que una página web con un total de 50 k en textos y gráficos llevará 15 segundos en verse
con un MODEM de 28.800 bps aproximadamente.
B/ Shockwave Flash: Se trata de una herramienta avanzada de desarrollo multimedia, que permite generar
contenidos dinámicos usando vectores en lugar de bitmap (como GIF y JPG).
Es una herramienta muy potente, que permite construir animaciones de alta calidad con archivos fianles muy
pequeños en cuanto a su tamaño en kilobytes. Esta característica, es la que convierte a Macromedia Flash en una de
las opciones más usadas por los diseñadores web al momento de crear imágenes en movimiento.
5/ EL USO DE COLORES EN LA WEB
El color de una página es la primera impresión que los usuarios tienen cuando ingresan a un sitio
Se trata, por consiguiente, de la primer comunicación que se establece entre el sitio y los navegantes
Los primeros 10 segundos son primordiales para lograr un buen impacto visual, por lo tanto, los colores deben ser
trabajados cuidadosamente para que capten la atención y seduzcan de un modo tal, que inciten al usuario a seguir
adelante y no, que se sienta amenazado por la estridencia.
5/1.1 TIPO DE COLORES
Existen dos modos diferentes de considerar los colores:
- desde el punto de vista sustractivo: Hace referencia a la forma en que los colores son percibidos por el ojo humano
al reflejarse la luz en un objeto, dando la mezcla que va a producir el color final. Los colores primarios en este caso,
son el magenta, el amarillo y el cyan.
- desde el punto de vista aditivo: (Este es nuestro punto de interés!) Los colores se perciben como longitudes de
onda de luz que pasan directamente a nuestros ojos, sin ser reflejadas previamente por ningún cuerpo, como es el
caso de la luz percibida de una fuente luminosa, como una lamparita, la pantalla del televisor o el monitor de la
computadora.
Los colores primarios en este caso son el rojo, el verde y el azul . Este es el sistema que se usa en el diseño web.
En el diseño digital existen algunas limitaciones que debemos tener siempre presentes.
El ojo humano distingue aproximadamente cerca de 10 millones de colores, pero el uso para el diseño web es, en
comparación, muy limitado.
Hasta no hace mucho tiempo, las computadoras trabajaban con una prestación gráfica de tan sólo 256 colores, pero
con el tiempo, a medida que mejoraron en su capacidad de memoria y en el procesamiento de la información, hubo
también grandes progresos a nivel gráfico. También depende de los navegadores y el equipamiento de los propios
usuarios.
El sistema operativo instalado en la computadora identifica tres colores básicos, a partir de los cuales construye
todos los demás mediante un proceso por mezcla por unidades de pantalla o píxel. Estos colores, como decíamos,
son el rojo, el azul y el verde, y el sistema así definido se conoce como RGB.
Los bits de profundidad de color, marcan cuántos bits de información disponemos para definir los colores derivados
de estos colores primarios.
A mayor bits, mayor número de variaciones. Para 256 colores se precisan 8 bits, para obtener miles de colores
necesitamos 16 bits y para obtener millones de colores hacen falta 24 bits.
Es evidente que si se diseña con una paleta de millones de colores se reduce la posibilidad de que la mayoría de los
navegantes aprecien con calidad ese color, ya que son pocos los usuarios que cuentan con un equipamiento de 24
bits.
En lenguaje HTML los colores se expresan con valores hexadecimales (por ejemplo #FF0000).| COLORES PARA LA WEB: seguros!
Un color seguro para la web es aquel que se muestra de la misma forma en Netscape Navigator y en Microsoft
Internet Explorer, tanto en Windows como en Macinstosh con un modo de 256 colores.
Existen 216 colores comunes expresado en valor hexadecimal que combinan de a pares los valores RGB.
Por lo tanto estos 216 colores son los seguros para la web y los que componen la Paleta Segura para la Web.
Con 216 colores, queda cubierto el rango de usuarios con sistemas de 8 bits y de 24 bits.
Ustedes podrán ampliar conceptos y procedimientos para aplicar colores seguros para la web (Web Safe Pallete) en
el "módulo diseño" de este curso P+DW|
5 /1.2 "EL COLOR Y LAS EMOCIONES"
Se dice, desde algunos estudios psicológicos, que el color tiene una gran influencia en las emociones y los estados
de ánimo de las personas, lo que lo transforma en una especie de "lenguaje de los sentimientos".
Un lenguaje visual comprensible para todos y al cual todos, en mayor o menor medida, responden con sensaciones
similares. Así, se suele afirmar que...
- los colores fríos tienen efectos tranquilizadores, generando sensaciones de seriedad (azul, verde, violeta);
- los colores calientes dan alegría y dinamismo. (amarillo, rojo, naranja);
- los colores oscuros inspiran sobriedad, calma, etc. (rojos, azules, negros); y...
- los colores claros transmiten sensación de juventud y limpieza (amarillos, verdes, naranjas).
Además, cada color en particular suele estar asociado a un determinado sentimiento, así, por ejemplo, como vemos
en esta lista extraída de un manual sobre color* (al que recomendamos acceder para aquellos que quieran
profundizar sobre el tema), cada uno de ellos tiene un significado emotivo.
// ROJO: entusiasmo, pasión, alarma, agitación, fuerza, sexo, peligro, calor, fuego, sangre, carácter belicoso,
intensidad. Asociado con los sentimientos enérgicos y con la excitación apasionada o erótica, y asociado a la ira, al
enfado. Es el único color brillante de verdad y puro en su composición. El rojo puede ser atractivo y seductor como
unos labios de mujer pintados o desencadenar asco o mareo, como cuando se contempla un charco de sangre. Puede
ser usado para llamar la atención, para incitar una acción o para marcar los elementos más importantes de la página,
pero cuando es usado en gran cantidad cansa la vista en exceso.
// AMARILLO: entusiasmo, pasión, fuerza, sexo, peligro, calor, primavera, inocencia, infancia. Es un color
optimista, moderno. Es el símbolo de la deidad en muchas culturas y denota alegría. Si es muy brillante puede
indicar peligro, y si es muy suave puede sugerir delicadeza. Un entorno amarillo medio o pálido hace a la gente
sentirse cómoda, caliente. Se ha asociado siempre el amarillo a la intelectualidad y al pensamiento claro y hay
psicólogos que dicen que este color ayuda a memorizar datos a las personas. Pero hay que tener en cuenta que es el
color que fatiga más a la vista humana, pudiendo llegar a ser aplastante, porque causa una estimulación excesiva de
los ojos, por lo que un entorno amarillo brillante causa sensación de irritabilidad en las personas.
// AZUL: verdad, dignidad, melancolía, tristeza, confianza, masculino, cielo, agua, sensualidad, comodidad. Si es
muy pálido puede inspirar frescura e incluso frío. Da sensación de elegancia, de frescura, cuando no es muy oscuro.
Si es oscuro da sensación de espiritualidad. Es un color que influye sobre el apetito, disminuyendo éste, seguramente
porque no hay ningún alimento azul en la naturaleza, por lo que no es aconsejable su uso para una página sobre
recetas de cocina o productos alimenticios. También puede expresar tristeza, pasividad, depresión.
// NARANJA: alegría, juventud, calor, verano. Es el color de la carne y del color amistoso del fuego del hogar. Es
vibrante como la luz del sol, exótico como las frutas tropicales, jugoso como la naranja, sugiere informalidad en el
trato, amistad, y destaca mucho sobre el entorno que le rodea.
// ROSA: calma, debilidad, tranquilidad.// VERDE: naturaleza, salud, dinero, frescura, crecimiento, abundancia, fertilidad, plantas, bosques. Se dice que es
el color más descansado para el ojo humano y que tiene poder de curación. Es un color contradictorio: a muchas
personas les sugiere un carácter desagradable, mientras que para otras implica más pasión que el rojo.
// PÚRPURA: abundancia, sofisticación, inteligencia, espiritualidad, dignidad. Puede evocar tranquilidad y puede
evocar frivolidad y artificialidad. Aunque también simboliza la espiritualidad, el misterio, la aristocracia y la pasión,
en algunas ocasiones representa el luto, la muerte, la náusea, el orgullo y la pomposidad.
// VIOLETA: es el color de la fantasía, del juego, de la impulsividad y de los estados de ensueño, aunque puede
sugerir pesadillas o locura.
// MARRÓN: sugiere edad, cosas viejas, madera, ladrillo.
// NEGRO: elegancia, seducción, misterio, fuerza, mal.
// BLANCO: pureza, inocencia, limpieza, ligereza, juventud, suavidad.
// ORO: prestigio, costoso, elegancia, religión.
// PLATA: prestigio, frío, ciencia, espacio.
5/1.3 CONTRASTE DE COLORES
En la lectura de la "espacialidad" del diseño de pantalla, los colores tienen mucha relevancia. Veamos... El uso del
contraste de colores es el recurso de diseño más importante a considerar en el trabajo con colores en la web.
• Siempre es muy recomendable es usar contrastes bien fuertes y lo óptimo, si se trata de una página donde lo más
importante es texto, es el negro sobre blanco, aunque a la inversa también es una buena opción.
• Pero el uso de contrastes no es sólo recomendable para el texto, sino para todos los elementos
del diseño: imágenes, cuadros, botones, banners.
Buenos contrastes se obtienen cuando utilizamos...
// Fondos claros y textos oscuros o a la inversa.
// Fondos fríos y textos cálidos.
- Dos colores claros y brillantes puestos uno al lado de otro, pueden provocar un efecto de rechazo, sin embargo si
están uno dentro de otro, pueden resultar agradables.
- Lo mismo, un color brillante ocupando un espacio muy grande de la pantalla seguramente irritará, y usado en
pequeña proporción, seguramente causará una sensación más placentera.
Colores y estrategia del sitio web
Tengan presente siempre el tipo de sitio que construyen y el tipo de público al que está dirigido. Por ejemplo...
- Si el público es juvenil o adolescente se puede jugar con colores vivos y cálidos, y con un contraste que no
necesariamente sea el tradicional fondo blanco- texto negro.
- Para un público adulto, se debe respetar un poco más la sobriedad de colores: colores fríos y serios. Si son páginas
de tipo académicas o de divulgación de textos, lo mejor es evitar colores que cansen la vista.
+ Sugerencias...
Aquí presentamos otra serie de sugerencias en relación al público, extraído del manual sobre color*
// Los colores primarios, puros, brillantes, son demasiado comunes, por lo que dan muy poca información al ojo. Por
ésto no conviene basarse nunca en ellos, para construir nuestras páginas.
// Páginas destinadas a un público general deben estar basadas en colores más bien neutros, que puedan gustar a la
mayoría, como colores secundarios o terciarios en tonos pastel, o en una bien estudiada gama de grises, con bajos
contrastes entre fondo y contenido.
// Páginas orientadas a un público joven pueden diseñarse con colores vivos, primarios, con altos contrastes entre
fondo y contenido, o bien con fondos oscuros y textos claros.// Páginas destinadas a un público adulto deben estar diseñadas con colores serios, elegantes, fríos, sin altos
contrastes de tono, en colores neutros, incluso tirando a grises.
// Páginas corporativas, de empresas, o de instituciones deben estar diseñadas de acuerdo con los colores
identificativos de la misma, incluyendo siempre el logotipo.
// Páginas divulgativas, como manuales y artículos, deben tener especial cuidado en que el texto destaque
adecuadamente sobre el fondo, sin usar colores chillones que cansen la vista, ya que el objetivo fundamental de estas
páginas es ser leídas, a pesar de la gran cantidad de texto que pueden incluir. Consejo: fondo claro y letras oscuras,
que destaquen muy bien.
// Páginas exóticas y a la vez elegantes, se pueden obtener con fondo negro o color muy oscuro y letras y/o motivos
dorados, blancos o púrpuras-rojos.
/6 DISEÑO DE FRAMES
6/1 QUÉ SON LOS FRAMES...
Un Frame (frameset = conjunto de marcos) es una archivo.htm que permite dividir la pantalla en diferentes partes,
ordenando la carga y diagramación según una estructura de composición simultánea en pantalla de otros
archivos.htm que conformarán en partes o marcos el conjunto.
Los frames son compatibles desde la versión 2.0 de Netscape y por Microsoft desde su MS-IE 3.0 en adelante.
Un frame, como decíamos, es una estructura en la ventana del navegador, donde se carga principalmente una página
HTML, que a su vez permite la carga de otros páginas a modo de frames o marcos. Así, podemos visualizar
simultáneamente diferentes páginas dispuestas según un orden o estructura en la misma ventana o instancia del
navegador.
Como decíamos, cada una de las páginas-marcos que componen al conjunto total, se disponen según la estructura
particular que ordena el archivo "padre" o Frameset (=conjunto de marcos).
A modo gráfico, a continuación podemos ver distintos tipos de frames. Representan sólo algunas estructuras, ya que
las posibilidades son variadas.
6 /2 ACERCA DEL USO DE FRAMES
El uso de frames en la web es avalado por gran cantidad de diseñadores y criticado por otra gran parte de
diseñadores.
Antes de ver las bondades y los peligros de su uso, tengan en cuenta que LA DECISIÓN DEL USO DE FRAMES
EN EL DISEÑO DE SITIOS WEB, ES UNA DECISIÓN ESTRATÉGICA, que debe tenerse en cuenta y decidirse
en la "planificación del proyecto web"
| Las "buenas"...
para lograr algún tipo de impacto visual, o ejercer un control sobre la disposición general del sitio.
Es útil fundamentalmente para un menú de links con gran cantidad de ítems que se deben renovar o actualizar
constantemente. Porque permite la fácil incorporación de nuevos links (ya que con sólo modificar un archivo es
suficiente). Además, otorga la posibilidad de tener siempre visible todo el abanico de opciones de navegación del
sitio
Con el uso de frames podemos mantener con un marco a modo de encabezado, la identificación visual (título o
nombre del sitio) siempre presente en el recorrido interior. A su vez, ésto permite poder realizar vínculos otro sitios
externos y con este marco-encabezado mantenemos o permitimos el posible "regreso" a nuestro propio sitio.
Etcéteras
| Las "malas" ...
¿Sabían que en el diseño web hay moda?
Muchos navegadores no permiten imprimir adecuadamente páginas con frames. Resulta común que a la orden de
imprimir, se imprima una sola parte (uno de los documentos html).
Como es una estructura que incluye varias páginas, suelen fallar al momento de cargarse a modo de conjunto.
Muchos usuarios se quejan por la cantidad de páginas con marcos que no se cargan adecuadamente.
Los motores de búsqueda tienen problemas, ya que no saben qué parte del frame (recuerden que son varios archivos)
incluir en sus índices. En general, al detectar información en un buscador, se abre el archivo específico que contiene
tal información: nunca los buscadores reconocen que esta página es parte de un frame.
Las páginas diseñadas con frames suelen verse de modo diferente en distintos navegadores, perdiendo el estilo
original dado por el diseñador. Si bien, existen métodos para controlar la disposición de marcos, siempre hay
diferencias entre marcas y versiones de navegadores.
Suelen presentarse dificultades al establecer enlaces o links en páginas componentes de un conjunto de marcos El
uso de frames en el desarrollo y edición de sitios web requiere un hábil desempeño del diseñador para indicar cómo
abrir nuevas páginas, ya que la orden o "target" de apertura deberá siempre referirse en base al conjunto.
Etcéteras
6 /3 CONCLUSIONES - RECOMENDACIONES y misceláneas
Es necesario realizar constantes comprobaciones del conjunto de marcos en distintos navegadores y versiones.
Decidan con criterio estratégico el uso de conjunto de marcos para un sitio web.
Muchas veces suele ser innecesario acudir a este recurso y a su vez complica el trabajo a los recién iniciados.
• Trabajen con estructuras de conjuntos de marcos relativamente sencillas.
• Aseguren que todos los archivos utilizados en el conjunto de marcos estén alojados en el sitio de trabajo.
Recuerden que cada página componente (marco) y en sí el conjunto de marcos son archivos.html independientes.
• Al trabajar en el desarrollo de sitio a partir de frames, tengan particular cuidado en guardar adecuadamente cada
componente. No se confundan en los modos de dar orden de "guardar" ya que al ser varios los archivos.htm
integrantes se presentar dificultades.• Definan las dimensiones y otras propiedades de marcos y del conjunto apenas creado el conjunto de marcos.
Inmediatamente realicen una primera comprobación en el navegador para ir previendo y optimizando cada sector y
así la unidad del conjunto.
• El trabajo con links desde páginas-marcos puede presentar algunas dificultades, por lo que es necesario la
comprensión de conceptos que refieren a la noción de marcos y de conjunto. En este sentido y en la práctica, es
conveniente comprobar constantemente que todos los vínculos funciones correctamente y carguen las páginas
solicitadas (targets) en el sector o marco previsto como correcto.
No hay comentarios:
Publicar un comentario