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)? Read more »
Este fragmento de código se encuentra en: wp-includes/media.php (Line 833)
El problema es que se incrusta estilo en pleno documento, donde se ha insertado la galería. Lo cual no resulta muy limpio si atendemos a la abstracción de las 3 capas: diseño, función y contenido.
Si volvemos a media.php veremos entorno a la línea 831:
Colocando este filtro en el fichero functions.php del theme usado, indicamos a WordPress que no debe usar por el estilo CSS por defecto para las galerías, y relegamos el CSS necesario al fichero style.css donde tengamos centralizado todo el estilo del blog.
Usando filtros se puede cambiar altamente el comportamiento por defecto de WordPress.
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(){ $(this).attr('target','_blank');});});
Explicación
Comenzamos el mítico método ready de jQuery, encargado de comprobar si el DOM esta cargado y preparado para usarse. Tengamos en cuenta que deben estar todos los tags de enlaces ya descargados en el navegador para luego lanzar las operaciones sobre ellos.
A continuación hacemos 3 comprobaciones basadas en el atributo “href”. Que el link no comience con el “dominio del sitio web” (link absoluto), que no comience por “#” (link ancla), y que no comience por “/” (link relativo). A todos los enlaces que cumplen esto se les añade la clase “external”, ejemplo: class="external".
Una vez tenemos identificados todos los enlaces externos, ya solo queda preparar un evento .click() que añada el atributo target con valor blank (nueva ventana/tab) cuando el evento se dispare.
Recientemente y vía WeblogsSL pude participar en el diseño y desarrollo de una publicación cuya temática me ha llamado la atención: optimismodigital.com
Pensamos que el fenómeno de la digitalización de la sociedad, las industrias y el mundo no solo es inevitable sino que además es POSITIVO, DIVERTIDO, APASIONANTE y LLENO DE OPORTUNIDADES. Nuestra actitud ante esta nueva era debe de ser de CURIOSIDAD, EXPERIMENTACIÓN y de DISFRUTE.
No podría expresarlo de mejor forma, la idea es sentirnos optimistas ante la era digital en la que ya estamos inmersos
Los artículos que se van publicando son acertadísimos, y para comenzar ya han posteado gente de Google, Yahoo, Banco Popular, INGDirect, FXInteractive, BuyVip, etc.
Me encanta lo que estoy leyendo, os dejo únicamente 3 joyitas:
Familiares, amigos, o simplemente aquellos que me seguís por el blog, quizás recordéis mi proyecto truequi.com, una plataforma de intercambio de objetos.
Pues bien, por aquí creemos que la ilusión es capaz de mover el mundo. Así que para esta Navidad vamos a ponerla en marcha entre todos, porque pensamos que la ilusión no se crea ni se destruye, se intercambia.
Y es por eso que nace en España el Almacén de la Ilusión. Partiendo de una gran iniciativa de Coca-Cola y tomando como base truequi, junto con el trabajo de grandísimos profesionales como Paco, Pilar, Carmen, Marie-la, Sertxu (equipo digital de Coca-Cola), la gente de Genetsis (infraestructura, servidores), Correos, Chonoexpress…, y luego estaba Marcos y la gente de Q-Interactiva, Israel y yo mismo que hemos dado forma y vida al sitio web. Un montón de gente persiguiendo un mismo objetivo, y la verdad es que nos hemos entendido muy bien desde el primer momento. Al final ya parecía aquello una gran familia
¡¡En el Almacén hay sitio para todo!! Puedes aportar tus ilusiones, aquellos artículos que han formado parte de tu vida y pienses que ahora pueden hacer feliz a otra persona. A cambio de subir tus ilusiones podrás escoger otras de personas que como tú quieran compartir las suyas.
Actualmente ya hay libros, películas, música, videojuegos, y otros objetos curiosos.
Y la cosa no acaba aquí, gracias a un acuerdo alcanzado entre Coca-Cola y Correos España, los 40.000 primeros envíos serán gratuitos. Vamos, que debido al amplio margen financiado todos podremos enviar y recibir nuestros regalos sin coste alguno.
Con todo esto se aprovecha la sinergia entre dos grandes empresas, como Coca-Cola y Correos, con gran capacidad para generar ilusión y hacer realidad el envío de paquetes en unas fechas marcadas por el gran incremento de actividad postal.
Para seros sinceros… no recuerdo una iniciativa tan bonita y valiente como esta en los 12 años que he vivido Internet. Pienso que toda España puede sentirse orgullosa de participar en ello
Así que toca olvidar por un momento la crisis, en el Almacén de la Ilusión el dinero no tiene cabida, solamente la ilusión de artículos que puedas ofrecer y recibir
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.
Con IFRAME podemos embeber un tipo de documento HTML. Pero si atendemos a la definición de OBJECT veremos que podemos embeber varios tipos de documento como: HTML, SWF, VIDEO, IMAGEN (ver ejemplos).
Teniendo en cuenta lo anterior, IFRAME puede verse como un TAG redundante.
Por otro lado en la versión XHTML Strict, el DTD no admite el tag IFRAME. Al fin y al cabo forma parte del pasado y la W3C siempre ha recomendado el uso de un OBJECT para incrustar los diferentes documentos, tanto si es vídeo, como imagen, como una página html.
Además hay que tener cuidado con IFRAME en Firefox, generado de forma dinámica podemos tener problemas (Bug 279048).
IE como de costumbre va contracorriente
Si usamos OBJECT en Internet Explorer, debemos tener en cuenta que no reconoce el atributo type:
De todas formas con varias pruebas que hice he comprobado que el comportamiento es irregular en las diferentes versiones de la familia Internet Explorer (6, 7, 8, 9).
En cambio con IFRAME, Internet Explorer se maneja de maravilla todas las versiones interpretan y dan el mismo resultado.
IFRAME para IE, OBJECT para el resto
Al final pienso que la mejor opción cross-browser es mantener el IFRAME para la familia Internet Explorer y recuperar el OBJECT para el resto de navegadores (Firefox, Opera, Safari, Chrome).
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 $_SERVER y del campo donde se cargan las cabeceras con información del navegador del usuario “HTTP_USER_AGENT”.
A continuación recopilo algunos consejos beneficiosos para evitar el Spam y mejorar la Usabilidad del Newsletter, en algunos casos también aplicables a un simple e-mail enviado al usuario. Read more »
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 la que debemos tener mucho cuidado (no soy muy amigo de emplearla).
En Gmail, por ejemplo se producía un desbordamiento horizontal, donde salia el scroll y el texto continuaba a lo largo y ancho de la ventana
Como solución, sustituir pre por un simple div en conjunción con una de estas dos opciones para el contenido que albergará:
Formatear el contenido con PHP: Podemos ayudarnos de la función nl2br que insertará los saltos de línea.
Ejemplo:
nl2br('texto con formato');
Formatear el contenido con CSS: Podemos usar la regla white-space: pre; para simular el comportamiento de la etiqueta pre.
Ejemplo:
<div style="white-space: pre;">
texto con formato
</div>
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% no sirven el CSS con cookies (o no la entiendo, o esta la veo complicada de evitar sin CDN).
Un 63% no minimiza sus ficheros con herramientas como YUI Compressor.
Un 21% de páginas tienen ficheros CSS con más de 100K de peso (esta es de escándalo).
Si en nuestros CSS sumamos: demasiada atomicidad, normas, duplicación, conflictos y lo aderezamos todo con algo de impredecibilidad, tendremos por resultado un enorme e incontrolable CSS.
5 buenas maneras
Lo que debemos evitar es:
1. La Atomicidad
Imaginemos una página Web como si fuera un coche. Para crear ese coche usamos piezas de lego, una a una las vamos posicionando hasta crear la figura del coche.
Con CSS básicamente hacemos lo mismo, podemos ir pieza a pieza posicionando y creando el sitio web. Y es justamente el planteamiento que debemos cambiar.
La idea es evitar pensar en pequeñas piezas (átomos) y pensar en objetos que se puedan reutilizar. De esta manera podemos por ejemplo crear con CSS una rueda del coche, que a su vez bastaría para simular las otras tres restantes.
Esto se podría considerar una evolución de la forma de pensar en el CSS.
2. Normas desfasadas
Que van acumulandose, que no se reutilizan, que son incrementales en el tiempo, muy especificas, etc.
3. Normas imprevisibles
Que no pueden ser reutilizadas y que son totalmente dependientes de su ubicación.
4. Guerras de especificidad
Nodos hijos de hijos de otros hijos, hacks, estilos con #ID que no pueden ser reutilizados, la sentencia !important no tiene cabida (si se usa bien la cascada), etc.
5. Duplicidad
Definir en numerosas ocasiones reglas como: margin, float, font-size, etc. Como solución tenemos:
Pensar en global, en todo el sitio web. Para ello ayuda mucho seguir una metodología como la DCU, para abstraer el futuro marcado de los mockups y ejecutar nuestro “CSS kung-fu”!
andy: Es Ser alguien, cuando te das cuenta quien SOS, sabras que HACER, para luego TENER como consecuencia. SER, HACER, TENER y no SER, TENER, HACER Saludos
javiaurea: Gracias compañeros por darle tantas vueltas al coco sobre este asunto. (Alberto) Lo mejor es ir a un diseño sensible que sea lo suficientemente capaz para adaptar la complejidad de layouts, información y funcionalidad que puede tener un sitio web...
Marcos: “El RWD no es una solución mágica, ni sirve para todos los casos, pero sí es una solución viable y efectiva tanto para el usuario, como para el cliente en cuanto a costes de desarrollo y mantenimiento.” Estaría bien delimitar de forma...
javiaurea: Hola Marta, gracias por tu aportación y me alegro que te guste el post. Totalmente de acuerdo contigo en que el RWD puede ser una solución viaje y efectiva tanto para el usuario como el cliente, en costes, en desarrollo y mantenimiento. Sobre la...
Marta: Marcos, huye de quien predique el RWD como la panacea a todos los males, porque seguramente no sabe de lo que habla
Marta: “Se demanda inmediatez, que el usuario pueda hacer/leer lo que le interesa rápidamente. Para ello es necesario ofrecer una versión menos densa de contenidos.” ¿Por qué se asume que el usuario de desktop no quiere hacer/leer lo que le...
Alfredo Puer: Excelente tutorial, era lo que estaba buscando muchas gracias!
javiaurea: Gran Reporte Q-Marcos! Yo creo que deberíamos ir en la dirección de Web única y esto es una técnica más. Aunque actualmente se me plantean dudas como por ejemplo la cantidad de información que se descarga. Cuestiones relacionadas con la...
Marcos: Cuando digo “sigo persiguiendo a la gente que predica el RWD como panacea”, no es que los persiga para hacerles nada XD sino que les persigo en busca de respuestas que me logren convencer… Al volverlo a leer me ha parecido oportuna...
Marcos: Buenas! Pues yo abogo por una web móvil diferenciada y un buen diseño del servicio web que permita gestionar coherentemente las diferencias, y me alegro muchísimo de que trates este tema en el blog Javi, porque sigo persiguiendo a la gente que...
javiaurea: Hola Alberto!, Totalmente de acuerdo en cuanto a los beneficios. Lo mejor sería un diseño sensible que sea lo suficientemente capaz para adaptar la complejidad de layouts, información y funcionalidad que puede tener un sitio web de cierta...
Alberto: Hola! Antes de nada comentar que yo me decanto por una versión desktop única que se adapte a dispositivos por los siguientes beneficios principales: - Único desarrollo. - Único mantenimiento. - Estructuras flexibles para visualización de la misma...
Sixta Rosa: Hay personas que no les gusta compartir sus conocimientos por temor o por no compartirlo
Chris: Hola. Esto se sigue haciendo igual o ha evolucionado a día de hoy? Yo usé hace un tiempo otra manera que no consigo encontrar… Saludos
Guillermo: Muchas gracias!!! Muy util. El pngFix no me funcionaba en un slideshow Jquery. Saludos.
karina: GUAAOOO ESTA FANTASTICO ME LLAMA MUJCHO LA ATENCION
karina: SABES TE FELICITOM X PONER ESAS GUIAS EN LA RED ERES UN CAMPEON
Guillermo: Dios sabe lo que odio el atributo ALT. ¡Por favor! W3C quitadlo como requisito para validar! Ya se que es importante por accesibilidad… ¿pero alguien lo usa para este fin en verdad? ¿o se usa para SEO?
Marcos: Mil gracias por tu desgranamiento. Cuando el stress, la frustración y el cansancio aturdían mi mente tu acompañamiento ha resuelto mis problemas. GRACIAS
Comments
Trackbacks