Es posible que al tener un div vacio este no se muestre como deseemos en las diferentes versiones de internet explorer pero el div sea necesario ya sea para mostrar un color de fondo, crear una barra de separación o cualquier otra cosa.
Para evitar que en ie se creen márgenes diferentes de los deseados o un alto distinto del que queremos, hay que aplicar al div en cuestión mediante CSS la propiedad overflow: hidden, y listo!
#1708- “Este error no pasa en Internet Explorer 7 y 8, pero en Internet Explorer 6 sí se presenta este error. El Internet Explorer 6, increíble o no, lo utilizan mucho en las zonas alejadas de las ciudades por la dificultad del terreno y el clima”
(Webmaster, solicitando soporte sobre el desarrollo de un sitio web para Internet Explorer 6)
¡Ahora lo comprendo todo!…
Visto en Palabras Textuales.
Colorblind es un simulador on-line para comprobar como ven la web las personas que padecen de daltonismo.
Una ayuda más para hacer más accesibles nuestras páginas.
Enlace: Colorblind
Por todos los desarrolladores es sabido, o debería, que cada servidor de correo electrónico interpreta el código html de una manera y, más allá, cada uno de estos puede mostrar el correo de una forma diferente dependiendo del navegador sobre el que se esté visualizando. Todo un dolor de cabeza a la hora de maquetar.
No obstante, también hay cosas en común entre ellos que hace que se pueda llegar a un equilibrio y poder maquetar un e-mail para que se visualice del mismo modo en todos los servidores de correo (hotmail, gmail, outlook, thunderbird, etc).
Os voy a dejar unas pautas para maquetar correos electrónicos que he ido recopilando o descubriendo con la experiencia, de modo que el usuario no lo vea diferente según el cliente de correo que utilice. ¡Todos iguales!
Maquetar con tablas.
Sí, horror. Pero no hay otra si queremos que los bloques de contenidos no se desmadren en según qué clientes. Las tablas permiten una maquetación mucho más rígida y cerrada para determinar posición, ancho y alto de los elementos. Los div no funcionan aquí.Cerrar los <td> justo después del elemento que contienen.
Pueden darse espacios indeseados, saltos de línea, si no. (Ej. </span></td> )Anidar tablas.
Crear una tabla por cada fila ayuda a que no se descuadren estas.No utilizar CSS.
Los estilos deben ir incrustados en el código para cerciorarnos de que serán las propiedades que nosotros queremos las que se aplicarán.Alinear las tablas con la propiedad aling de la misma, no con style.
Evitar dar margin y padding en lo posible.
Mantenerlos a 0 y crear celdas de tabla en su lugar.Utilizar URLs absolutas.
Especificar ancho y alto (contenido y contenedor).
No utilizar la propiedad float.
Outlook hace caso omiso a esta propiedad y descuadra la maquetación.Evitar el uso de imágenes de fondo (background-image).
En algunas ocasiones estas imágenes no se muestran.Utilizar display:block para las imágenes.
Gmail crea sino unos espacios en blanco bajo ellas.Remplazar la etiqueta <p> por la etiqueta <span>.
Cada cliente de correo aplica estilos diferentes para la etiqueta de párrafo, mientras que para la etiqueta “comodín” no.
Espero que os sea de utilidad. Yo he conseguido siguiendo estas pautas crear correos que se visualizan EXÁCTAMENTE igual en los clientes de correo antes mencionados.
Tenemos una web diseñada y nos piden crear una versión adaptada para móviles.
Lo que tendríamos que tener antes:
1. La web está ya diseñada siguiendo los standards y con una hoja de estilos separada: Esto nos permitirá jugar con la imagen de manera más simple y adaptar aquello que nos interese sin tener que depender del código generado por el CMS
2. No utiliza Flash, ni javascript, ni hay popups: Muchos móviles no soportan los embed y tienen problemas con plugins y scripts.
3. El gestor de contenidos tiene un sistema de plantillas: Lo que nos permitirá crear una plantilla adaptada si es necesario, sin cambiar para nada la actualización de contenidos.
Cosas básicas que tenemos que hacer:
1. Ancho máximo 120px: Consideramos que el ancho máximo es 120px (a tener en cuenta en las imágenes sobre todo)
2. Rediseñamos la cabecera: Mantenemos el logo pero usamos una versión alargada, minimizando el espacio que ocupa.
3. Estructuramos los bloques: Evitamos crear varias columnas, de manera que la lectura sea totalmente lineal, y las líneas lo más largas posibles.
4. Cambiamos los mecanismos de navegación
1. Utlizamos la miga de pan como elemento principal de navegación. Si es necesario creamos un menú con las mínimas opciones necesarias, pero siempre intentando que sea un línea.
2. Movemos el menú principal al final de la página. Si alguien quiere ver toda la navegación, ahí la tiene.
5. Ajustamos las imágenes: Ponemos solamente las imprescindibles, y si se puede las optimizamos este medio (más pequeñas, mínimo peso)
6. Comprobamos las fuentes: las aumentamos para facilitar la lectura en las pantallas o las optimizamos probando en distintos navegadores móviles
7. Usamos medidas relativas: Evitamos siempre medidas absolutas para permitir que según sea la pantalla móvil se adapte todo el contenido.
8. Evitamos el scroll horizontal
Visto en: Inclusión
Si alguna vez has tenido que buscar las 7 diferencias entre dos archivos de texto, un programa como ExamDiff no viene nada mal. Este programa compara archivos txt, doc, html, sql, etc., cualquier archivo de texto o archivo binario indicándote donde hay discordancias entre ellos.
Enlace: Descarga ExamDiff
Para cerciorarnos de que nuestras webs tienen el mayor grado de accesibilidad y usabilidad es bueno recurrir a validadores on-line para revisarlas y obtener la solución a posibles errores.
Os dejo el enlace a validadores muy útiles para diferentes aspectos web:
Browserhost generará imágenes de la previsualización de la web en los navegadores y plataformas que le indiquemos.
Es importante cerciorarnos de que nuestras webs se ven igual en todos los navegadores.
Html:
Markup Validation Service (W3C).
Este servicio de W3C nos permite comprobar la validez de nuestro código html, xhtml, etc, según los estándares web y si este es correcto nos proporciona un icono para poder indicarlo con él en nuestro site.
Html Validator (Complemento Firefox).
Permite ir comprobando la validación de nuestro código según trabajamos con él sin la necesidad de tener la web en un servidor.
CSS:
Su funcionamiento es igual que el del validador para html que nos ofrece W3C. Ingresamos la url de nuestra web y nos chequea sus hojas de estilo asociadas, proporcionándonos tanto los errores como una hoja de estilos resultante de su corrección.
Accesibilidad:
Wave escanea nuestra web en busca de errores o elementos que pudieran entorpecer a la hora de acceder a ella. Nos indica los fallos y su solución así como las cosas a destacar que son favorables para la accesibilidad dentro de nuestro código.
Un error común a la hora de atribuir identificadores para luego aplicarles estilo mediante CSS es confundir o ignorar las diferencias entre class e id.
Una clase (class) define las características comunes de un grupo de elementos mientras que un id es un identificador único aplicable sobre una sola etiqueta dentro de toda la página html. Recalco aquí que se trata del uso sobre una sola etiqueta, no sobre un sólo tipo de etiquetas; para aplicar un atributo a todos las etiquetas <li> del código, por ejemplo, usaríamos una clase, mientras que para aplicárselo a una sola etiqueta <li> usaríamos un id.
En resumen, basándonos en los estándares para un buen código: un mismo id no puede aparecer más de una vez en una sola página html, ya que la página no será válida, será visible pero será una página con errores.
Ejemplo:
<ul>
<li class=”negro”>Texto negro 1</li>
<li class=”negro”>Texto negro 2</li>
<li id=”rojo”>Texto rojo</li>
<li class=”negro”>Texto negro 3</li>
</ul><a class=”negro”>Enlace negro</a>
En más de una ocasión nos veremos con la necesidad de utilizar etiquetas del tipo header (<h1>,<h2>, etc.), <strong> o cualquier otra en nuestras webs por razones de SEO y Accesibilidad, pero un texto html no siempre queda bien, sobre todo porque, por ejemplo, queramos colocar en lugar del nombre el logo de la página en cuestión.
Os dejo un par de formas para hacerlo, yo hasta hace poco utilizaba siempre la primera de ellas pero ahora estoy probando con la segunda.
1. Ocultar texto con “display:none” y mostrar en su fondo el logo:
en el xhtml:
<h1 id=”logo”>
<span>abeleita<span>
</h1>y el css:
h1#logo {
width: 250px;
height: 25px;
background-image: url(logo.gif);
}h1#logo span {
display: none;
}
2. Desplazar el texto fuera de la ventana del navegador y mostrar su fondo:
en el xhtml:
<h1 id=”logo”>
abeleita
</h1>y el css:
h1#logo {
width: 250px;
height: 25px;
background-image: url(logo.gif);
text-indent: -9999px;
}
