Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Inicio que contiene a Maquetación web

Datos de búsqueda

Etiqueta ‘Maquetación web’

Javascript: Actualización automática de CSS

Fecha de publicación: 2010/10/11

Al maquetar puede resultar engorroso el andar ajustando un pequeño detalle en CSS y tener que actualizar la página cada vez que se cambia.

He montado un Javascript simple para hacer más fácil la tarea del maquetador. Consiste en recargar la CSS en un intervalo de tiempo (en el ejemplo será 1 segundo) sin recargar la página, de modo que cuando se guarde la CSS se vean los cambios en el navegador casi de inmediato.

Leer el resto del artículo

Datos del artículo:

Javascript: simular hover en Internet Explorer 6 con Prototype

Fecha de publicación: 2010/07/16

Se trata de un sencillo script que nos permitirá evitar el problema de Internet Explorer 6 con la pseudo-clase :hover. Dicha pseudo-clase se puede aplicar a cualquier elemento, para que al pasar el puntero por encima puedan cambiarse los estilos, pero Internet Explorer 6, en su línea habitual, solo lo acepta en elementos de enlace.

Leer el resto del artículo

Datos del artículo:

Capas condicionales para evitar el uso de hacks CSS

Fecha de publicación: 2010/04/21

En muchas ocasiones las distintas versiones de Internet Explorer interpretan la CSS un poco como quieren. Y es por eso que utilizamos hacks CSS (en inglés), que aunque en muchos casos cumplen con los estándares, de cara al futuro pueden ser un riesgo ¿Y si futuros navegadores los empiezan a interpretar? ¿Y si un navegador deja de necesitar esa regla CSS pero la sigue interpretando?.

En Alsacreations proponen la inserción mediante comentarios condicionales de Internet Explorer de capas con clases referidas a cada una de las versiones de Internet Explorer (enlace externo, en francés).

Leer el resto del artículo

Datos del artículo:

Internet Explorer 6 y la propiedad ‘bottom’ en CSS

Fecha de publicación: 2009/12/16

Hay un caso en el que la propiedad bottom no es interpretada correctamente en Internet Explorer 6: cuando el elemento con position:relative tiene un overflow:hidden y debajo está el elemento con position:absolute.

Leer el resto del artículo

Datos del artículo:

Que hacer cuando el elemento OBJECT tapa una capa posicionada

Fecha de publicación: 2009/11/11

Suele pasar que cuando hay capas emergentes y animaciones flash la capa se queda por debajo del Flash.

Basta con añadir esto dentro del elemento OBJECT:

<param name="wmode" value="transparent" />

Un ejemplo completo:

<object type="application/x-shockwave-flash" data="fichero.swf">
 <param name="wmode" value="transparent" />
 <param name="movie" value="fichero.swf" />
 <param name="quality" value="high" />
 <p>No dispone del plugin Flash Player, si lo desea puede <a href="http://www.adobe.com/go/getflashplayer">descargar el plugin</a>. [Resto de contenido alternativo].</p>
</object>

Este método tiene una pega: no funciona en sistemas Linux.

Datos del artículo:

Abandonemos de una vez el soporte a IE6

Fecha de publicación: 2009/07/15

Ya hay sitios importantes que dejan de lado navegadores obsoletos, como Youtube.

La maquetación adaptada a IE6 es un quebradero de cabeza y una fuente de gastos. En algunas ocasiones el tiempo dedicado a IE6 en una maquetación puede acercarse al 80%, y las decisiones de incluir determinados elementos en un diseño quedan vinculadas al potencial (decepcionante) de IE6.

Lo de IE6 es el pez que se muerde la cola. Lo soportamos porque hay usuarios, y hay usuarios porque lo soportamos. Yo personalmente insisto en que hay que dejar de soportarlo, dejando una advertencia a los usuarios que lo utilicen para que se actualicen a un navegador mejor.

Pero no se debe dejar de soportar de golpe, al principio debe cuidarse de que el sitio mas o menos se vea bien y que funcione adecuadamente, solo se dejarían los pequeños detalles sin importancia. Posteriormente se podría abandonar el soporte de IE6 por completo. Al ser progresivo se da tiempo a los usuarios habituale del sitio a actualizar y no los perderiamos.

¿Que significaría el fin generalizado del soporte a IE6 en las empresas grandes adictas al IE6? Pues que los usuarios que acceden desde su trabajo con el IE6 verían mal (o no podrían utilizar) muchos sitios que visiten. Probablemente los visitan no por motivos de trabajo, sino como ocio. ¿Y cuando los visitan por razones de trabajo? Pues esa empresa tiene un Problema que debió solucionar allá por finales de 2006 (cuando salió IE7).

Lo patético son las empresas que compran una maquetación y lo que más les preocupa es que se vea bien en IE6, de forma que los peces gordos de la organización la vean perfecta. Lo más importante es que la vean bien los clientes y los potenciales clientes que es de donde la empresa va a sacar beneficios. Y si es para la típica aplicación interna, maquetando solo para IE6 se ahorra dinero, pero, ¿no es mejor maquetar bien y que cuando se cambie de navegador que nadie tenga que ponerse histérico por que la aplicación no funciona?

Creo que los maquetadores no deben dedicarse a resolver bugs de Internet Explorer (ni de ninguna otra aplicación), de eso se debe encargar Microsoft.

Datos del artículo:

Decálogo de maquetación web

Fecha de publicación: 2009/05/11

Diez consejos útiles que mejorarán ostensiblemente la accesibilidad de un sitio web:

  1. Utilización de encabezados (H1-H6) para estructurar el documento y utilizar adecuadamente los párrafos y listas. En los encabezados no se saltan niveles. Cuando una lista tiene un solo elemento no es una lista: es un párrafo.
  2. Los textos de los enlaces habrán de ser descriptivos de la acción que realizan, y deberán avisar si se abren en ventana nueva.
  3. Maquetar con capas (elementos DIV), en lugar de con tablas.
  4. Utilizar Javascript no intrusivo y que su presencia no sea obligatoria: todo el contenido y la funcionalidad del sitio deberá estar disponible sin necesidad de Javascript. No utilizar atributos HTML (onclick, onmouseover, etc.) para eventos de Javascript.
  5. Utilizar colores de fondo y de texto que hagan un buen contraste.
  6. No utilizar imágenes con texto, salvo en logotipos. Utilizar fuentes de sistema para evitar ese mal uso de las imágenes.
  7. Toda imagen que tenga contenido informativo deberá llevar texto alternativo (atributo alt). El atributo irá vacío en caso contrario. Si es una imagen que se repite en diversas páginas, no es informativa, y no es publicable, debería ir como fondo mediante CSS.
  8. Estructurar bien los formularios: grupos de campos dentro de elementos FIELDSET con sus correspondientes LEGEND, elementos INPUT, SELECT y TEXTAREA contenidos dentro del elemento LABEL (asociación implícita), y atributo for en el LABEL y atributo id en el elemento de campo con el mismo valor (asociación explícita).
  9. Uso del elemento OBJECT para añadir contenido en Flash o en Java, incluyendo el contenido alternativo correspondiente para aquellos usuarios que no dispongan del plugin.
  10. Separación de contenido (HTML), presentación (CSS) y comportamiento (Javascript). En el documento HTML solo se mete HTML, y no se utilizan atributos para controlar la presentación. No se mete código Javascript en el elemento SCRIPT (que solo ha de incluirse dentro del elemento HEAD y nunca fuera de él), ni código CSS en el elemento STYLE (de hecho a la CSS se la llama con el elemento LINK).

Datos del artículo:

CSS: problema de doble margen en IE6

Fecha de publicación: 2009/04/02

Cuando un elemento está flotado dentro de un contenedor y tiene definido un margen, nos podemos encontrar con la desagradable sorpresa de ver como Internet Explorer 6 duplica dicho margen.

Supongamos que tenemos esta regla CSS:

div.capa p.parrafo {float:left; margin-left:10px;}

Internet Explorer 6 sacará un margen de 20px.

Se puede solucionar con un hack CSS, que valida pero es un poco chapuza:

div.capa p.parrafo {float:left; margin-left:10px;}
* html div.capa p.parrafo {margin-left:5px;}

O como dicen en Position is Everything añadir un display:inline; a la regla CSS:

div.capa p.parrafo {display:inline; float:left; margin-left:10px;}

De esta forma el elemento sigue siendo bloque, ya que tiene el float, y sale con el margen definido en Internet Explorer.

Saber más

Datos del artículo:

Información del sitio

Outbook está basado en WordPress

Licencia Reconocimiento-NoComercial-CompartirIgual

Feed RSS: