Entries Tagged 'CSS' ↓

PNGs transparents i Internet Explorer

Potser algun cop heu intentat posar una imatge en format PNG 24-bits amb transparència i us heu trobat que FireFox aplica bé la transparència però l’Internet Explorer aplica un color de fons indesitjable.

Això és degut a que el binomi Windows i Internet Explorer 5.5 i superiors, a diferència de Mozilles, Operes, Netscapes ,… no suporten nativament el canal Alpha de les imatges transparents. Per solucionar-ho haurem de recórrer a una funció de l’Explorer: el filtre AlphaImageLoader.

Un exemple de la seva implementació en una fulla d’estils CSS:

div {position:relative; height:250px; width:250px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='myimage.png',sizingMethod='image');"}

Les propietats del sizinMethod poden ser:

  • crop: Retallarà la imatge al tamany especificat a l’element on s’aplica
  • image: Deixarà la imatge a les seves dimensions originals
  • scale: Escalarà la imatge per a ocupar tot el tamany de l’element on s’aplica

Trobareu un bon article a alistapart.com anomenat Cross-Browser Variable Opacity with PNG: A Real Solution

Técnicas de internacionalización en documentos HTML o XHTML

He elaborado un resumen sobre cómo internacionalizar un sitio web. También podeis consultar la documentación original.

Tècnicas de internacionalización en documentos HTML o XHTML

¿Cuál es la finalidad de internacionalizar un documento??

Se trata de especificar el idioma en que están escritos la totalidad o la parcialidad de los elementos de una página web.

¿Por qué especificar el idioma de los documentos?

Los buscadores como Google luchan para mostrar los mejores resultados de una búsqueda según las preferencias del usuario, más después de la salida de competidores como MSN Search, A9 de Amazon

Una de las preferencias que puede identificar fácilmente cualquier buscador es la definición del idioma que tiene el usuario. Es lógico que cada vez tengan más importancia todos los parámetros que sirven para especificar el idioma para priorizar los resultados cuando, por ejemplo en google, busco “páginas en español” o “páginas de España”.

Para entender mejor la importancia de la definición de un idioma para documentos y elementos individuales, podemos poner como ejemplo los lectores de voz que existen actualmente y que en un futuro vendran integrados con los navegadores gracias a las especificaciones XML Voice i las propiedades de audio para CSS2. No se interpretará igual si decimos

“Fundado en 1793 por la República francesa, el musée du Louvre constituye uno de los primeros museos europeos. ”

que entonemos en francés “musée du Louvre” dentro del contexto en español. Quién sabe si dentro de unos meses podremos buscar páginas en español que contengan la palabra “Louvre” en francés…

¿Cómo especificar el idioma de los elementos de una página web?

Las etiquetas HTML y XHTML nos permiten especificar la codificación de los carácteres, el idioma, y localización geográfica de una página web, así como sus elementos individuales. Por ejemplo si tengo una página en español, puedo especificar que un enlace hará referencia a una página en catalan o que cito un texto en inglés dentro de un párrafo en alemán.

Trataremos los siguientes elementos tomando como ejemplo una web en español. Podeis consultar la documentación original para otros idiomas i tipos de documentos, por ejemplo XML.

Especificar la codificación de una página

Necesitaremos especificar la codificación de una página para que el navegador sea capaz de interpretar los carácteres especiales de cada idioma. En la codificación americana, por ejemplo, no caben los carácteres especiales como los acentos. Para una web en español utilizaremos la codificación iso-8859-1.

Para documentos HTML:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>

Para documentos XHTML servidos como text/html:

< ?xml version="1.0" encoding="iso-8859-1"?>

Aunque existen diferentes nomenclaturas para definir una misma codificación o idioma, se recomienda siempre utilizar las estándares.

http://www.iana.org/assignments/character-sets

Nota: Se recomienda evitar utilizar equivalentes HTML o Hexadecimales de carácteres (como & o   ), delegando la función de que el navegador interprete bien el documento a la codificacion de la página. Si no se pueden evitar, es recomendable utilizar el equivalente hexadecimal.

Especificar los atributos de idioma de una página

Mediante el metatag Content-Language describiremos el idioma principal de una página, y mediante los atributos de idioma definiremos qué idioma deberá procesar el navegador.

De esta manera definiremos los idiomas principales de la siguiente forma:

<meta http-equiv="Content-Language" content="es,en,de,fr,it"/>

<html lang="es">

</html>

En el caso de que tengamos un documento con diferentes traducciones en la misma página (por ejemplo un manual de la impresora), podemos utilizar:

<meta http-equiv="Content-Language" content="es,en,de,fr,it"/>

<html lang="es">

texto en español

<div lang=”en”>

texto en inglés

</div>

<div lang=”de”>

texto en alemán

</div>

...

</html>

Podemos utilizar el mismo sistema para especificar un cambio de idioma para ciertos elementos, por ejemplo:

<p>En francés, <em>Gato</em> es <em lang="fr">chat</em>.</p>

Tendremos en consideración las siguientes implementaciones, según el tipo de documento que estemos ofreciendo:

Para documentos HTML:

<html lang="es">

Para documentos XHTML servidos como text/html:

<html lang="es" xml:lang="es" >

Para documentos XHTML servidos como XML:
<html xml:lang="es" >

Para más atributos de lenguaje consultar:

http://www.loc.gov/standards/iso639-2/langcodes.html

Especificar el idioma de un enlace

Si deseamos especificar el idioma que encontraremos en un enlace, podemos utilizar la siguiente sintaxis:

<p>Puedes encontrar la traducción al catalán de esta página en <a href="catalan-doc.html" hreflang="ca">instruccions per a la rentadora</a>.</p>