Front-end, Estándares web y Accesibilidad

Vuelvo con un tema recurrente y que siempre levanta mucho debate en la comunidad Web. Surge a raíz del artículo Why We Shouldn’t Make Separate Mobile Websites sobre el Responsive Web Design – RWD (diseño web sensible). La pregunta básica es: ¿Diseñamos una Web única, o realizamos dos versiones (una de escritorio y otra móvil)?

Continuar leyendo "Diseño sensible vs. versión móvil".

Hace tiempo (2009 y como pasa de rápido…) hablábamos de esto mismo en _blank, rel=”external” y una solución jQuery para abrir enlace en nueva ventana. Ahora traigo una revisión del snippet con esa misma funcionalidad pero un poco más completa y optimziada. Código jQuery jQuery(document).ready(function($) {   //open external links in new window $(’a:not([href^="http://aurea.es"]):not([href^="#"]):not([href^="/"])’).addClass(’external’); $(’a[class="external"]‘).click(function(){ [...]

Continuar leyendo "Abrir enlaces externos en nueva ventana añadiendo class external y _blank target al vuelo con jQuery".

Cuando necesitamos incluir un objeto HTML externo incrustado en una página podemos recurrir al tag IFRAME. Si el objeto que necesitamos incrustar es un SWF se suele recurrir a OBJECT y EMBED. Antes de seguir, es bueno recordar la historia de los elementos IMG, EMBED y OBJECT. OBJECT como sustituto de IFRAME Con IFRAME podemos [...]

Continuar leyendo "Adios IFRAME, hola OBJECT".

Tener diferentes hojas de estilo dependiendo del navegador me parece algo horrible .  Pero si por algún motivo es necesario, podemos emplear una forma bastante fácil y limpia mediante PHP (Ref. Andrew Martin). Para ello, (1) pondremos un CSS base que sea compatible para todos los navegadores y a continuación (2) haremos uso del array [...]

Continuar leyendo "CSS adaptado a cada navegador con PHP".

Me he encontrado con un problema que parece afectar exclusivamente a Gmail y que ocurre al recibir un mail que contiene la etiqueta pre. La misión de esta etiqueta es pre-formatear su contenido, con lo cual mantiene en el texto los espacios en blanco, saltos de línea, etc. Y es justamente por esa razón por [...]

Continuar leyendo "Etiqueta PRE, desbordamiento en gmail y solución con nl2br o white-space".

Hace un tiempo escribí sobre algunas técnicas para poder optimizar nuestros códigos CSS. También mencionaba herramientas que puede facilitar nuestro trabajo de optimización: Firebug, PageSpeed, YSlow y YUI Compressor. 5 errores típicos Un 42% de páginas no comprimen su contenido con GZIP. Un 44% de páginas enlazan a más de 2 ficheros CSS. Un 56% [...]

Continuar leyendo "Optimización de CSS; Nicole Sullivan nos enseña 5 errores típicos y 5 buenas maneras".

Internet Explorer en su versión 6 y anteriores no soporta la transparencia del formato PNG. Para solucionar este problema existen varias técnicas: A través del filtro Directx AlphaImageLoader. Con Behaviors. El conocido pngfix (con la ayuda de JavaScript). Algunas implementaciones pngfix para frameworks de JavaScript, como jquery.pngFix.js Todas ellas presentan pros y contras. Dependiendo del [...]

Continuar leyendo "PNG transparente e IE, el mítico problema…".

En la vieja escuela estábamos acostumbrados a identificar y definir cada abreviatura y acrónimo con intención de aportar más semántica a nuestro contenido. Usamos el atributo title con la versión textual completa, dentro de las etiquetas abbr y acronym, para explicar el término sin interrumpir el flujo del documento. Ejemplo de abreviatura – abbr <p><abbr [...]

Continuar leyendo "Abreviaturas (abbr) VS. Acrónimos (acronym)".

Son como su propio nombre indica comentarios interpretados únicamente por Internet Explorer e incrustados en el código HTML, generalmente en el apartado HEAD y realizan su función únicamente si la condicional se cumple atendiendo al navegador y su versión. Este mecanismo fue “un invento” de Microsoft (Internet Explorer), que en númerosas ocasiones no han seguido [...]

Continuar leyendo "Comentarios condicionales de Internet Explorer".

Expongo a continuación algunos consejos para la optimización de nuestras hojas de estilos CSS. 1. Selectores ID, Classes, Tags #logo { margin-top: 1em; } .ico { margin-left: 1em; } a { text-decoration:none; } Los Selectores ID es la forma más eficiente y rápida que hay en CSS para otorgar estilo. Por contra no podemos sobrecargar [...]

Continuar leyendo "Optimizar CSS, 12 consejos y 4 herramientas".