Página 1 de 11
Moderador del foro: ZorG 
Foro uCoz » Ayuda a los webmasters » Configuración del diseño » Tratamiento de imágenes para la web
Tratamiento de imágenes para la web
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 1 | 6:06 PM
Tratamiento de imágenes para la web

Las imágenes son una parte importante de la web. De hecho, la mayoría de las páginas web distribuyen su espacio entre texto e imágenes.
Éstas añaden una nota de color a los sitios y si se usan correctamente, ayudan al usuario a entender de lo que se está hablando.

Tipos de imágenes
Los formatos de imágenes web más usados son .gif, .jpg y .png:
GIF: es un formato de archivo sin pérdida, es decir, se conserva cada pixel de la imágen original, lo que implica que el tamaño suele ser mayor que en formatos .JPG. No obstante, para gráficos sencillos con pocos colores es muy eficiente. Sin duda su mayor ventaja frente a los otros formatos es que permite crear animaciones
JPG: comprime mucho más las imágenes que los formatos .GIF, por lo que los archivos pesan menos. Es excelente para trabajar con fotografías de muchos colores y texturas, mantiene la calidad con pesos de imagen realmente bajos. Como inconveniente pierde algo de información y puede afectar a su calidad, pero en la mayoría de los casos no es apreciable a simple vista. No permite crear imágenes animadas.
PNG: este formato surgió como alternativa al .GIF debido a algunos problemas legales que empezaron a surgir de su uso. Es, por tanto, muy similar a éste, salvo que no permite crear animaciones.

Herramientas de edición de imágenes
Ya se comentó brevemente en este manual (hacer una web) un poco acerca de los editores de imágenes. Si haces páginas webs deberías tener en tu ordenador un programa de este tipo para poder editar las imágenes a tu gusto.
Algunos programas muy buenos son Gimp (gratuito) o Photoshop (de pago, aunque existe versión de prueba), lo mejor es que pruebes tu mismo el que más te gusta.

Edición de imágenes
Para crear tu web, necesitarás algún programa de edición de imágenes que te permita modificarlas, cambiar el tamaño, añadirles notas de texto, cambiar el formato y sobre todo optimizarlas para la web.
Puede parecer algo complementario, pero conforme vayas creando tu web te darás cuenta de que necesitas un programa que te permita editar tus imágenes, ya sea de forma sencilla, como por ejemplo recortando o ampliando su tamaño, o con métodos más sofisticados como los filtros de imagen.
Algunas de las cosas más básicas que se pueden hacer con estos editores de imágenes y que nos sirven de ejemplo, son:

Recortar una imagen
Esto es muy útil para eliminar de la imagen partes que no queremos. Por ejemplo, puede venirte muy bien la foto de un paisaje como este, pero no querer incluir el marco amarillo:


Redimensionar la imagen

A menudo una imagen es más grande o más pequeña de lo que necesitamos, y aunque puede establecerse su tamaño exacto mediante los atributos width y height, no es la forma adecuada de cambiar su tamaño, ya que en realidad no lo estamos modificando, lo que estamos cambiando es su forma de verse en el navegador (el archivo sigue teniendo el mismo tamaño). La mejor opción es utilizar un programa de dibujo como el Photoshop que cambie el tamaño real de la imagen.

Rotar una imagen

En ocasiones es útil cambiar la orientación de una imagen, pra esto se puede usar cualquier editor gráfico. Puede rotarse de forma vertical u horizontal en varios ángulos, en la mayoría de los programas buenos te permite rotar la imagen un número determinado de grados.

Filtros de imagen
Los filtros pueden llegar a transformar una imagen por completo dándole efectos increíbles. Con ellos, podrás dar a tus imágenes un aire diferente. Lo mejor para comprenderlo es ver algunos ejemplos, éstos en concreto han sido hecho con Photoshop:

Imagen original:

Filtros aplicados:

Optimizar las imágenes
Con optimizar imágenes me refiero a conseguir que ocupen lo menos posible y conserven una buena calidad de imagen. Si las imágenes son muy pesadas (si su tamaño es muy grande), las páginas web tardan mucho en cargar y hacemos esperar a los usuarios, lo que no conviene en ningún caso. Cuanto menos ocupen más rápido cargará tu página y menos harás esperar a tus visitantes.
Algunas direcciones útiles para optimizar imágenes online son Virtualzone o SiteReportCard.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
sorin
Mensajes: 442
Reputación: 6
Mensaje Nº 2 | 7:42 PM
Buen articol GUARAGUAO, aun que en mi opinion personal usar las imagines solo si es necesario, tala como as dicho, ayudan al usuario a entender de lo que se está hablando. Tambien una imagen bale mas que mil palabras.
Buen trabajo.

GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 3 | 5:39 PM
El empleo de imágenes en un sitio web

El empleo de imágenes en un sitio web, es muy importante, ya que acrecientan el impacto visual, atrayendo el interés de nuestro visitante. Pero también podemos cansarlo, si usamos imágenes de gran peso, que harán que la página que queremos ver se cargue lentamente.

Piense bien, si realmente se justifica el uso de una imagen en una de sus páginas. Recuerde que lo más importante es, que quien visite su sitio tiene que encontrar en él información que le sea útil y no una colección de imágenes que no les sirve de nada.

La mayoría de las veces, la espera altera al navegante, quien decide irse a otro sitio. Por tal motivo, nuestras imágenes no deben tardar en cargarse. Para ello le recomendamos usar las extensiones .jpg (Joint Photographic Group) o .gif (Graphics Interchange Format), ambos son de características muy similares, la elección de su uso dependerá del tipo de trabajo que queramos hacer.

Las extensiones .jpg y .gif, son los tres formatos que normalmente se usan para las páginas web.

El formato .JPG (Podemos encontrar archivos con extensión JPEG o JPG indistintamente: se trata del mismo tipo) reconoce 16,7 millones de colores, por tal motivo es recomendado para cuando queremos que la imagen utilizada tenga calidad fotográfica o para hacer degradé de colores. Resultan útiles porque podemos controlar la compresión del archivo cambiando la calidad de la imagen. Cuanto más reducido sea su tamaño, estaremos perdiendo mayor información sobre su definición, como resultado, disminuirá su calidad.

El formato .GIF, sólo contiene información sobre los colores de la imagen que estamos usando; trabaja solamente con 256 colores y las imágenes guardadas en este formato no pierden calidad, aunque se comprima el archivo.

Se recomienda su uso para dibujos de líneas en blanco y negro, imágenes prediseñadas en color e imágenes que utilicen grandes bloques de colores sólidos. Un color, generalmente el fondo, podemos convertirlo en transparente, logrando que la imagen se integre al fondo de la página.

Además, con esta extensión podemos crear Gif animados presentando de forma consecutiva varios archivos GIF, tal como si estuviéramos realizando una película de dibujos animados. No use para crear un GIF animado varios frames (marcos), ya que esto hace más lento el ingreso al sitio.

Después de haber leído esta breve explicación de cada formato, la decisión sobre cuál usar dependerá sólo de usted.

Consejos útiles

* Debemos saber que hay gente que navega por Internet con una resolución de 256 colores (8 bits) con el fin de ahorrar recursos del sistema, con lo que nuestras maravillosas imágenes de millones de colores (jpeg) pueden quedar bastante desvirtuadas si no lo hemos avisado previamente.
* Utilice la extensión .GIF para crear iconos, logos, banners, etc.; es decir, en todas las imágenes que no contengan muchos colores (hasta 256).
* Para el formato .GIF puede especificar el uso de un color transparente.
* El formato .GIF y .PNG permiten entrelazar la imagen (es decir, ésta aparecerá con mayor detalle a medida que el navegador la descargue).
* Para el formato .JPEG, puede especificar el número de barridos progresivos (se refiere al número de barridos que realiza un explorador de Web para resolver una imagen a medida que la descarga).
* Cuando queremos mostrar desde nuestra web imágenes de gran tamaño, usted puede permitirle al visitante que él decida si quiere verla o no.

¿Cómo hacemos esto?

* Cree las gráficas que quiere mostrar, en miniaturas (thumbnail).
* Enlace cada una con la imagen al tamaño deseado.
* Tenga en cuenta que a las miniaturas las usamos para mostrar todas las gráficas, permitiendo ahorrar tiempo en la carga de la página y dándole la posibilidad al visitante que elija la imagen de su interés, simplemente haciendo clic sobre la versión minimizada de ésta.
* Es conveniente colocar al lado de la miniatura, el peso real de la imagen (entre paréntesis); para que quien necesite bajarse una sepa cuánto pesa.
* Utilice esta opción de diagramación de las gráficas, para cuando el número de imágenes es numeroso; por ejemplo catálogos, postales digitales, etc…


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 4 | 12:48 PM
Cómo optimizar fotografías para la web

Consejos para optimizar fotografías para el web. Optimización de fotos sin perder calidad de la imagen.

En este artículo vamos a ofrecer una serie de consejos para optimizar fotografías para una página web, para que sean más fáciles de descargar por los visitantes y no ralenticen la carga de la página. Pero siempre tratando de conservar la calidad de la foto en la medida de lo posible.

Actualmente las conexiones a Internet son cada vez más potentes y con mayor capacidad para descargar imágenes, sea cual sea su tamaño. No obstante, siempre viene bien trabajar las imágenes para que ocupen poco espacio y por tanto se transfieran con mayor velocidad. Sobre todo tenemos que pensar que el entre abanico de usuarios que van a visitar nuestra página web siempre habrá personas que tengan una conexión más lenta, y por tanto nos agradecerán que la página cargue rápido. Además tenemos que tener en cuenta el perfil de usuario de Internet, que acostumbra a tener bastante impaciencia y puede que no espere a que las imágenes terminen de cargar.

Pero a todas estas razones por las que conviene optimizar las fotografías que colocamos en las páginas web tenemos que añadir la propia carga de nuestro servidor. Imágenes que ocupan mucho espacio son pesadas para el servidor donde está alojada la página. Al final, eres tú el que paga el alojamiento y transferir imágenes que sean más grandes que lo recomendado redundará en una pérdida de ancho de banda y una transferencia innecesaria de tu servidor… lo que se traduce en pérdida de dinero.

Todos estos consejos para la optimización de fotos serán doblemente interesantes si utilizamos muchas fotografías en una misma página web.

En este artículo vamos a ver la optimización de fotografías en formato jpg, dejando a un lado la optimización de imágenes con dibujos, cuyo formato más adecuando sería el gif.

1) Ajustar la calidad del formato jpg
La mejor manera de disminuir el tamaño de una fotografía en formato jpg es ajustar la calidad de la imagen. A menor calidad, mayor compresión de la foto, con lo cual ocupará menos tamaño. Cualquier programa de edición gráfica permitirá definir la calidad de la imagen al momento de guardarla. Muchas veces, bajar la calidad del archivo no implica una pérdida apreciable de la imagen.

2) Trabajar siempre la fotografía partiendo del archivo original
El formato jpg es un formato de archivo gráfico con pérdida. Esto quiere decir que cada vez que la guardamos estamos perdiendo un poco de calidad con respecto al archivo gráfico original. Claro que, a menor calidad del jpg, más pierde la imagen. Si guardamos la foto (con la consiguiente pérdida de calidad) y luego la abrimos y la volvemos a editar y guardar, estaremos perdiendo todavía más calidad. Así que lo mejor es que, si tenemos que volver a editar el archivo, lo hagamos sobre la foto original, así la pérdida ocurrirá sólo una vez.

3) Ajustar el tamaño de la imagen
Las dimensiones de la imagen (anchura y altura) son otro de los factores que más afectan al tamaño del archivo en Kb. A mayor tamaño del archivo, mayor el espacio que ocupa en disco. Es obvio que si ponemos imágenes pequeñas ocuparán menos que otras más grandes. A veces es preferible presentar la imagen con tamaño menor que bajar mucho la calidad y tener una pérdida excesiva, que estéticamente es poco agradable.

4) Enfocar la imagen si la hemos reducido

Muchos programas de edición gráfica, como Photoshop, tienen un filtro o una opción para enfocar la fotografía. El enfoque de la foto hace que los elementos queden más resaltados y por tanto más vistosos. Lo malo del enfoque de la fotografía casi siempre implica que el archivo gráfico resultante tenga mayor tamaño, por eso tenemos que tratar con cuidado esta opción.

5) Crear thumbnails o miniaturas de las imágenes
A veces es poco aconsejable colocar las imágenes en gran tamaño. Sobre todo si tenemos muchas imágenes en una misma página, puede ser aconsejable mostrar sólo unas miniaturas y que sea el usuario el que decida cuáles de esas imágenes desea verlas a mayor formato. Quizás el usuario está buscando una información y las fotos no le interesen mucho ¿por qué entonces cargar todas las imágenes en dimensiones grandes? Además, si tu sitio es muy visitado y con mucha transferencia, colocar de entrada las fotos grandes puede ser perjudicial para la marcha del servidor. Entonces podría ser recomendable mostrar unas miniaturas y que sea el usuario el que, haciendo clic en la foto, decida cuál o cuáles desea ver ampliadas.

6) Recortar el área que nos interesa de la imagen
Al editar la imagen con nuestro programa de diseño gráfico podemos recortar la foto para quedarnos sólo con la parte que nos interesa. Muchas veces cuando hacemos una fotografía sólo nos interesa una parte. Entonces lo interesante es recortar la imagen, desechando toda la información que no nos interesa. Toda esa parte de la imagen que no nos interesaba, no tenemos por qué guardarla en el archivo y permitirá ahorrar espacio y aprovechar bien el tamaño de la imagen para las áreas que realmente consideramos importantes. En la siguiente imagen se ve visualmente lo que quiero decir. En la zona que he recuadrado está la parte de la imagen que nos interesa. El resto de la foto se puede desechar, con ello conservamos e incluso potenciamos el significado y la razón de ser de la imagen.

7) Utilizar algún programa de optimización de imágenes adicional
Existen programas específicos para realizar las tareas de optimización de una imagen que se pueden utilizar de manera adicional a nuestro programa de edición gráfica preferido. Estos programas están focalizados y especializados en optimizar fotografías, por lo que los resultados que obtienen a menudo son mejores que los que ofrecen programas de edición gráfica de propósito general. Es decir, con estos programas conseguimos una optimización de fotos donde los archivos resultantes son de menor tamaño y con mayor calidad. Ejemplos de programas de optimización de fotografías hay a montones, por ejemplo GifBot, Rea Compresor, Advanced JPG compressor, Image Compressor etc.


Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
GUARAGUAO
Mensajes: 2362
Reputación: 81
Mensaje Nº 5 | 6:20 PM
Recomendaciones sobre la utilización y optimización de imágenes

Logos y Marcas Gráficas de Empresa (Branding):
o Son los elementos gráficos menos estandarizables de un site: al definir la imagen corporativa y contribuir de forma central a la representación de la presencia de la empresa en la Red, es preciso admitir ciertos grados de libertad en su diseño, sobre todo cuando, además de la marca de la empresa, se utilizan como parte del diseño de imagen del site.
o Los criterios de diseño para el site on-line no tienen porque responder a las señas de identidad corporativa generales de la empresa.
o En el caso de Intranets no se justifican diseños espectaculares y pesados:
• Están dirigidas a empleados con los que no es necesario buscar el impacto visual para la comunicación de imagen de compañía.
• El tiempo de acceso es una factor crucial para el diseño de las Intranets.



• Recomendación: De forma orientativa, el estándar de tamaños y pesos para Logos y Marcas de Sites en Internet está dentro del rango:
o Logo pequeño ... Ancho X Alto = (80 X 30 pixels). Peso = 2 KBytes.
o Logo grande ... Ancho X Alto = (250 X 70 pixels). Peso = 5 KBytes.

A nivel de ejemplo, estándares orientativos de tamaños y pesos de logos serían:

Imágenes de productos, campañas, promociones, eventos...:
Utilizadas para reclamar atención sobre productos, servicios, promociones, campañas, etc.

• Recomendación: La estrategia correcta de utilización es utilizar una pequeña imagen o icono del producto, acompañada de una breve reseña de presentación, o embebida en el diseño general de los productos o campañas del site, con un link a una página de detalle, donde, si es necesario, se puede ampliar la imagen utilizada. Un estándar orientativo de tamaños es:
• En Home Page:
o Tamaño pequeño: 35 X 35 pixels, Peso: 1 KByte
o Tamaño grande: 120 X 70 pixels, Peso: 2 KByte

• En página de detalle:
o Tamaño pequeño: 200 X 150 pixels, Peso: 12 KByte
o Tamaño grande: 300 X 250 pixels, Peso: 20 KByte

Fotos representativas (personales, edificios...):
Se utilizan para la presentación de:
o Personalidades o directivos de la organización.
o Colaboradores en los contenidos del site o para resaltar la autoría de reseñas.
o Hechos deportivos, benéficos o sociales protagonizados o patrocinados por el entorno de la empresa.
o Edificios sede, construcciones locales reseñables, obras de arte propias o de transcendencia artística, científica o de ingeniería en las que ha estado involucrada la compañía.
• Recomendación: La estrategia recomendada de uso de este tipo de imagenes es utilizar una pequeña foto de la persona, edificio, etc., acompañada de una breve reseña de presentación, o con un título relativo a su presencia. Pueden llevar asociado un link a una página de detalle, si es preciso ampiar o describir la información relativa a la imagen. Un estándar orientativo de tamaños es:

• En Home Page:
o Tamaño pequeño: 60 X 50 pixels, Peso: 1 KByte
o Tamaño grande: 100 X 80 pixels, Peso: 2 KByte

• En página de detalle:
o Tamaño pequeño: 160 X 130 pixels, Peso: 7 KByte
o Tamaño grande: 220 X 170 pixels, Peso: 9 KByte

Gráficos propios del diseño del site:
Este es una aspecto técnicamente controvertido con mucha frecuencia en el diseño de sites, ya que su uso, aportando las ventajas:
o Suelen por porcionar impacto visual al site.
o Consiguen resolver problemas de distribución de áreas con frecuencia complejos de implementar mediante código de presentación.

Conllevan los inconvenientes:
o Son responsables de primer orden del peso de la Home Page y, por tanto, del tiempo de acceso a la misma.
o Con frecuencia conllevan porblemas de legibilidad de etiquetas y enlaces.
o Con el tiempo acaban por ser molestos y hasta iiritantes.

• Recomendaciones de uso de gráficos propios del diseño del site son:
o Evitarlos en la medida de lo posible: tratar siempre de recurrir a codificar los aspectos visuales de presentación mediante HTML, Hojas de Estilo, etc.
o Si es imprescindible, utilizar las imagenes de fondo:
• A muy baja resolución.
• Para areas específicas, de manera que su tamaño pueda ser lo menor porsible.
• Utilizando tablas bien estructuradas y dimensionadas, y siempre indicando el ancho y alto de la imágen, de manera que la página pueda proseguir su "renderización" sin esperar al término de la carga de la imagen.
o No utilizar fondos de escritorio, tapices, etc.
o Recurrir a bordes de página lo menos posible, y sólo si delimitan un área funcionalmente concreta (áreas de navegación, fotos de productos, etc.)
o No abusar de la alternancia de imagenes “onMouseOver”: acaban cansando y, con frecuencia, no aportan nada.

Banners:
El objetivo final de los banners es llamar la atención sobre el visitante acerca de una anuncio de producto, campaña, promoción, etc., de manera que se sienta tentado de hacer "click" sobre el mismo para obtener información de detalle.

Es importante no abusar de este formato de publicidad (bastante quemado ya en la actualidad) y recurrir a otros mecanismos de información o inducción más apropiados descritos en este capítulo.

  • Recomendación: Características que deben acompañar al uso de banners son:
  • Deben tener un tamaño estándar, de manera que un mismo diseño publicitario pueda ser usado sin limitación de dimensiones en sites externos (tanto de la misma organización como de terceros).
  • Deben hacer referencia directa al tema que promocionan de manera que el usuario tenga ya una idea de que va a ver antes de hacer "click".
  • Deben tener asociado un link a una página de detalle donde se se informe a fondo al usuario sobre lo anunciado.
  • Recomendación: Los tamaños estándar de los banners en Internet son:

    Banners animados:
    Los banners animados tienen el mismo objetivo final que los banners estáticos. La diferencia fundamental estriba en el hecho de estar compuestos de un cierto número de fases gráficas (escenas) o estáticas o mediante transiciones dinámicas entre las mismas.
    • Recomendación: Las características de utilización de banners dinámicos son:
    o Debe limitarse su uso al máximo, no siendo recomendable utilizar más de uno por página:
    • Cargan en exceso el peso de la página.
    • Distraen la atención del usuario.
    • Terminan por producir estress por movimiento.
    • Comunican una cierta idea de "comercial" y "juvenil" en lugar de profesional.
    o Sólo excepcionalmente está aceptado su uso en Intranets, ya que en estas el tiempo de carga de página es vital y no se requieren acciones de atracción de cliente.
    • Recomendación: Respecto del número de fases:
    o No deben tener más de 3 fases.
    o Cada fase del banner debe llevar asociado un link a una página de detalle.
    o Evitar las fases innecesarias (sin mensaje) que sólo se utilicen para implementar efectos de transición.
    o Cada fase debe ser aprovechada para inducir al usuario a "clickar" el banner y, a la vez, dar una idea de lo que se va a encontrar el usuario si lo pincha.

    • Recomendación: Los banners dinámicos técnicamente se pueden construir de las siguientes formas:
    o Mediante Gifs animados. Formato ".GIF". Sólo se puede definir un único link para todo el conjunto de fases.
    o Mediante Bitmaps estáticos alternados mediante una función JavaScript. Formatos ".GIF" y ".JPG". Se pueden definir tantos links como fases tenga el banner. Así mismo, se puede definir el retardo de cambio de fase.
    o Mediante animación Flash. Formatos ".SWF", ".FLA". Se pueden definir tantos links como fases tenga el banner, el retardo de cambio de fase, la forma de la transición, etc
    • Recomendación: Los tamaños estándar de los banners en Internet son exactamente los mismos que los de los banners estáticos.
    En cuanto a los pesos, se admiten cifras mayores que en los banners estáticos, pero se debe ser muy cuidadoso en su diseño, a fín de no hacerlos excesivamente pesados. Una técnica para ello es utilizar un número limitado de colores en cada fase, y siempre los mismos colores en cada fase.

    Grande 468 X 60 pixels (16,5 X 2,1 cms.) Peso < 35 KBytes
    (No se recomienda utilizar banners animados de este tamaño).
    Mediano 230 X 35 pixels (8,4 X 1,2 cms.) Peso < 25 KBytes
    Botón 90 X 30 pixels (3,2 X 1,1 cms.) Peso < 12 KBytes

    Iconos de navegación: Son pequeños gráficos hiperenlace que:
    o De forma aislada
    o Acompañados de un hipertexto
    o Acompañados de una etiqueta
    o Acompañados de un "tooltip"

    Se utilizan para representar posibilidades de acceso a diferentes puntos del site.

  • Recomendación: Utilizar ideografías estándar para representar las acciones de navegación. No ser innovador a este respecto, al menos no en el concepto básico representado: generará cierto grado de confusión con seguridad.
  • Recomendación: Sólo son recomendables los iconos que representan acciones comunes a la navegación en cualquier site:
    o Home Page ("Home")
    o Página anterior ("Back")
    o Página siguiente ("Forward")
    o Inicio de página ("Up")
    o Inicio de sección ("Top page")
    o última página de sección ("End page")
    o Imprimir ("Printer")
    o Ayuda ("Help")
    o Etc.

    Para acciones de navegación específicas de nuestro site: es preferible no utilizar iconos, o, de usarlos, acompañarlos de una etiqueta.

    En la mayoría de casos aumenta la usabilidad un simple hipertexto, o un botón generado sólo con texto y las clases de estilo adecuadas para conferirle apariencia de botón.
    • Recomendación: Los tamaños pueden ser variables, aunque se ha demostrado la misma eficacia para los microiconos y tienen un peso apreciablemente menor:

    Grande 40 X 40 pixels Peso < 1 KBytes

    Mediano 20 X 20 pixels Peso < 300 Bytes

    Pequeño 12 X 12 pixels Peso < 100 Bytes

    Barras de herramientas:
    Son conjuntos de opciones de navegación generalmente presentes a lo largo de todo el site, o en secciones del mismo.

    Suelen presentarse:

    Sólo iconos hipervínculo con un "tooltip":

    Iconos hipervínculo acompañados de una etiqueta:

    Iconos hipervínculo acompañados de un hipertexto:

    Conjunto de hipertextos:

    • Recomendación: Si la Barra de Herramientas sólo está compuesta de hipertextos, no utilizar elementos gráficos en forma de botones para la implementación de las opciones de navegación, ya que tienen un cierto peso que penaliza la carga de la página. Se pueden realizar con clases de hojas de estilo que conllevan un tiempo de carga despreciable.
    • Recomendación: Si se utilizan iconos, no está recomendado utilizarlos de forma aislada, aunque incluyan un "tooltip". Deberán llevar asociada una etiqueta, que siempre será preferible sea hipertexto, con el mismo link que el icono.
    • Recomendación: En los hipertextos de las Barras de Herramientas siempre será recomendable asociar un parámetro "title" describiendo a qué enlaza realmente el botón en cuestión: Así mismo, en caso de ir acompañado de un icono, en la definición de este deberá asociarse el parámetro "alt" (tooltip) con el mismo objeto:

    Quote
    < a href="anterior.htm" title="Ir a la página antrior" >< img src="images/anterior.jpg" alt="Ir a la página antrior" >

    Mapas de navegación:
    Son gráficos en los que se definen áreas hipervínculo, cada una de ellas con un link distinto. En general cada vez son menos usadas habida cuenta de que se suelen precisar imágenes de mediano o gran tamaño que contribuyen en buena medida a aumentar el peso de la página.

    • Recomendación: Procurar no utilizar mapas de navegación. El único motivo de implementar opciones de navegación no los justifica.
    En caso de que sean importantes por su contrribución al diseño gráfico del site:
    o Utilizar una imágen lo menor posible, tratando de enriquecer el diseño con codificación HTML y Hojas de Estilo.
    o Utilizar la imágen del mapa a la menor resolución posible, de manera que el peso de la misma penalice mínimamente la carga de la página. Un forma de conseguir esto es reduciendo el número de colores de la imagen y, para que esto no resulte empobrecedor, utilizar efectos de atenuación de presencia tales como disminuir la saturación y la luminosidad de la misma.

    • Recomendación: Para la correcta identificación de las áreas de navegación:
    o Incluir un "tooltip" en cada área que se active “onMouseOver” indicando el destino del enlace.
    o Incluir una leyenda relativa al objeto del link.

    Adherido: 4300079.jpg(21Kb) · 1645488.jpg(10Kb) · 2825176.jpg(15Kb) · 3218477.jpg(16Kb) · 0123365.jpg(59Kb)

    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
  • PistolaEMI
    Mensajes: 143
    Reputación: 6
    Mensaje Nº 6 | 11:18 PM
    ¿alguien sabe como agregar bordes a las imagenes del album?
    Mazterlocuras. una web de locos!
    GUARAGUAO
    Mensajes: 2362
    Reputación: 81
    Mensaje Nº 7 | 4:02 PM
    Cómo agregar bordes directamente a las imágenes


    Es indispensable usar bordes en las imágenes para que estas pueden tener un toque mas llamativo, pero que sucede cuando no entendemos nada sobre CSS y lo queremos hacer de una forma mas rápida y práctica.

    Esto es muy sencillo y funciona perfectamente en Internet Explorer y Firefox, se trata de un código que se agrega directamente a las imagenes sin tocar en lo mas mínimo el código en CSS.

    Haremos una pequeña prueba, supongamos que queremos una imagen con un borde solido y de color verde.

    Lo que haremos sencillamente es agregar este código en donde queramos colocar la imagen

    Quote
    <img style="border: #008000 5.5pt solid" src="url" width=250 height=250 alt="nombre">

    Los parámetros que podemos modificar los he marcado con color rojo, son estos:

    El color del borde, este se representa con el numero decimal especificado en el código "#008000".

    El borde mediante el parámetro 5.5pt, este valor podemos modificarlo por uno mayor o menos.

    El parámetro solid, lo cambiaremos por los diferentes estilos que existen para los bordes:

    Eso seria todo en cuestión del borde, pero no olvidemos a widht y height que son el ancho y el alto de la imagen, como tampoco a alt que agrega un nombre a la imagen.

    Para terminar hagamos un ultimo ejemplo. A continuación pondré una imagen con un borde doble, y como color de borde agregare un color rojo, el código seria el siguiente.

    Quote
    <img style="border: #c00000 5.5pt double" src="url" width=250 height=250 alt="nombre">

    El resultado es este

    Como pudimos observar agregamos bordes a nuestras imágenes sin utilizar CSS, solo un simple código en formato HTML agregado directamente sobre la imagen como en los dos ejemplos anteriores.


    Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
    PistolaEMI
    Mensajes: 143
    Reputación: 6
    Mensaje Nº 8 | 5:51 AM
    Muchas gracias parce, esto me cabe como anillo al dedo Gracias de verdad te lo agradezco.. lo prueba y te digo que tal me va.

    Me sirvió para imágenes en general, pero no para el álbum de foto ya que las imágenes en general están clasificadas con el código "$PHOTO$" lo cual no puedo agregarla borde. wacko


    Mazterlocuras. una web de locos!
    Post editado por PistolaEMI - Miércoles, 2011-05-04, 6:00 AM
    Foro uCoz » Ayuda a los webmasters » Configuración del diseño » Tratamiento de imágenes para la web
    Página 1 de 11
    Búscar: