Uninstallme
Desarrollo frontend, estándares web, accesibilidad y más
Reseteado de margin y padding en CSS: un término medio
Aprovechando las vacaciones estoy preparando un nuevo diseño para este blog (que en algún momento estará listo) y de paso he recuestionado algunas de mis prácticas de CSS. Le ha tocado al método para establecer en 0 el margen y relleno de todos los elementos.
Son muchos los que apuestan por el método utilizado en la CSS Reset de Eric Meyer en lugar del selector universal asterisco, al que suelen acusar de requerir un rendimiento excesivo para el navegador. Otro de los argumentos para evitar este selector es su efecto sobre elementos de formulario. Cito a Eric Meyer sobre esta cuestión:
This is why so many people zero out their padding and margins on everything by way of the universal selector. That’s a good start, but it does unfortunately mean that all elements will have their padding and margin zeroed, including form elements like textareas and text inputs. In some browsers, these styles will be ignored. In others, there will be no apparent effect. Still others might have the look of their inputs altered.
Después de hacer unas pruebas incluyendo todos los elementos de formulario que se me han ocurrido, he comprobado que Firefox aplica un padding-right y padding-left a los elementos OPTION que queda anulado al usar el selector asterisco, mientras que el resto de navegadores sigue mostrando ese espacio, por lo que en este caso el selector universal no ayuda a eliminar diferencias entre navegadores sino todo lo contrario.
Aunque es cierto que es un “derroche” aplicar margin y padding 0 a todos los elementos, incluso a los que por defecto no lo tienen, la regla del asterisco es facilísima de recordar y ocupa menos bytes que la tira de elementos HTML utilizados en la CSS Reset de Eric Meyer. Por otra parte, en cuanto al rendimiento, yo estoy en el punto de “si no lo veo no lo creo” y creo que en cualquier caso, tiene que ser imperceptible para el usuario final.
A pesar de estas ventajas me he decidido a probar el Reset de Eric Meyer.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td{ margin: 0; padding: 0; font-size: 100%; }
No ha sido hasta este momento cuando he podido observar un efecto que no había visto usando el selector universal. En el HTML cargo las CSS en este orden: reset, 960.css (sistema de retícula de 960.gs) y por último la CSS específica de la página.
<link rel="stylesheet" type="text/css" media="screen" href="css/base.css" /> <link rel="stylesheet" type="text/css" media="screen" href="css/960.css" /> <link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
Al cargar la página, durante unos segundos me aparecía el contenido de forma lineal, lo que quiere decir que por alguna razón se estaba retrasando la carga de 960.css, que define la anchura y posicionamiento de los bloques. Logicamente le he echado la culpa al Reset de Eric Meyer, que ha sido la única modificación hecha en mi CSS inicial, aunque la verdad es que no puedo demostrarlo.
Si observamos los elementos HTML incluidos en el Reset de Eric Meyer, vemos que hay unos cuantos que no tienen margen ni relleno, como SPAN, A, SMALL, etc., por lo que podemos prescindir tranquilamente de ellos.
En Perishable Press hay un post dedicado a las múltiples técnicas de reseteado que podemos usar, en el que aparece una versión reducida del Reset de Eric Meyer bastante aceptable. Al final he decidido quedarme con una combinación, ni tan escasa como la que sólo aplica el margen y relleno a los elementos HTML y BODY, ni tan amplia como la versión completa de Eric Meyer.
html, body, p, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, th, td, pre, blockquote,
form, fieldset, legend, input, select, textarea, button{ margin: 0; padding: 0; font-size: 100%; }
La razón por la que añado el font-size: 100%, es porque algunos elementos de formulario no heredan el tamaño de fuente del body, como tampoco heredan la familia tipográfica.
Lo he probado en un par de proyectos en los que había usado el asterisco y no he observado ningún cambio, así que, hasta que no me encuentre con ningún inconveniente me voy a quedar con esta lista de selectores en lugar del asterisco.
Información relacionada y opiniones variadas
Instalación de Internet Explorer 8
Por kcmr, el 1 de Agosto de 2009 en Cajón de sastre, Personal
Etiquetas:ie
Mensaje de error obtenido durante la instalación de Internet Explorer 8 en Windows Vista (completamente original): “Internet Explorer 8 no es compatible con este sistema operativo.”
Captura del mensaje de error
Todavía estoy conmocionada.
Fragmento de “El Extranjero” (Off topic total)
Por kcmr, el 22 de Enero de 2009 en Cajón de sastre, Personal
Aun en el banquillo de los acusados es siempre interesante oír hablar de uno mismo. Durante los alegatos del Procurador y del abogado puedo decir que se habló mucho de mí y quizá más de mí que de mi crimen. ¿Eran muy diferentes, por otra parte, esos alegatos? El abogado levantaba los brazos y defendía mi culpabilidad, pero con excusas. El Procurador tendía las manos y denunciaba mi culpabilidad, pero sin excusas. Una cosa, empero, me molestaba vagamente. Pese a mis preocupaciones estaba a veces tentado de intervenir y el abogado me decía entonces: «Cállese, conviene más para la defensa.» En cierto modo parecían tratar el asunto prescindiendo de mí. Todo se desarrollaba sin mi intervención. Mi suerte se decidía sin pedirme la opinión. De vez en cuando sentía deseos de interrumpir a todos y decir: «Pero, al fin y al caso, ¿quién es el acusado? Es importante ser el acusado. Y yo tengo algo que decir.» Pero pensándolo bien no tenía nada que decir. Por otra parte, debo reconocer que el interés que uno encuentra en atraer la atención de la gente no dura mucho. Por ejemplo, el alegato del Procurador me fatigó muy pronto. Sólo me llamaron la atención o despertaron mi interés fragmentos, gestos o tiradas enteras, pero separadas del conjunto.
Si he comprendido bien, el fondo de su pensamiento es que yo había premeditado el crimen. Por lo menos, trató de demostrarlo. Como él mismo decía: «Lo probaré, señores, y lo probaré doblemente. Bajo la deslumbrante claridad de los hechos, en primer término, y en seguida, en la oscura iluminación que me proporcionará la psicología de esta alma criminal.» Resumió los hechos a partir de la muerte de mamá. Recordó mi insensibilidad, mi ignorancia sobre la edad de mamá, el baño del día siguiente con una mujer, el cine, Fernandel, y, por fin, el retorno con María. Necesité tiempo para comprenderle en ese momento porque decía «su amante» y para mí ella era María. Después se refirió a la historia de Raimundo. Me pareció que su manera de ver los hechos no carecía de claridad. Lo que decía era plausible. De acuerdo con Raimundo yo había escrito la carta que debía atraer a la amante y entregarla a los malos tratos de un hombre de «dudosa moralidad.» Yo había provocado en la playa a los adversarios de Raimundo. Este había resultado herido. Yo le había pedido el revólver. Había vuelto sólo para utilizarlo. Había abatido al árabe, tal como lo tenía proyectado. Había disparado una vez. Había esperado. Y «para estar seguro de que el trabajo estaba bien hecho», había disparado aún cuatro balas, serenamente, con el blanco asegurado, de una manera, en cierto modo, premeditada.
«Y bien, señores», dijo el Abogado General: «Acabo de reconstruir delante de ustedes el hilo de acontecimientos que condujo a este hombre a matar con pleno conocimiento de causa. Insisto en esto», dijo, «pues no se trata de un asesinato común, de un acto irreflexivo que ustedes podrían considerar atenuado por las circunstancias. Este hombre, señores, este hombre es inteligente. Ustedes le han oído, ¿no es cierto? Sabe contestar. Conoce el valor de las palabras. Y no es posible decir que ha actuado sin darse cuenta de lo que hacía».
Yo escuchaba y oía que se me juzgaba inteligente. Pero no comprendía bien cómo las cualidades de un hombre común podían convertirse en cargos aplastantes contra un culpable. Por lo menos, era esto lo que me chocaba y no escuché más al Procurador hasta el momento en que le oí decir: « ¿Acaso ha demostrado por lo menos arrepentimiento? Jamás, señores. Ni una sola vez en el curso de la instrucción este hombre ha parecido conmovido por su abominable crimen.» En ese momento se volvió hacia mí, me señaló con el dedo, y continuó abrumándome sin que pudiera comprender bien por qué. Sin duda no podía dejar de reconocer que tenía razón. No lamentaba mucho mi acto. Pero tanto encarnizamiento me asombraba. Hubiese querido tratar de explicarle cordialmente, casi con cariño, que nunca había podido sentir verdadero pesar por cosa alguna. Estaba absorbido siempre por lo que iba a suceder, por hoy o por mañana. Pero, naturalmente, en el estado en que se me había puesto, no podía hablar a nadie en este tono. No tenía derecho de mostrarme afectuoso, ni de tener buena voluntad.
Comentarios cerrados
Descubriendo los códigos QR y sus posibilidades
Por kcmr, el 3 de Enero de 2009 en Accesibilidad, Buenas ideas, Personal
Etiquetas:Accesibilidad, QR-Code, tecnología, web móvil
Hace cosa de un mes descubría esto de los códigos QR. Me he sentido algo aliviada al leer este post en el blog de QR Code, ya que parece que en España nos lo estamos tomando con cierta calma y no soy la última en enterarme 
Los códigos QR pueden contener un máximo de 256 caracteres alfanuméricos. Esta información puede ser leída y decodificada por un teléfono móvil con cámara y un programa para leer estos códigos mediante una fotografía. Esto permite acceder directamente a una URL o copiar los datos de un contacto en la agenda sin tener que introducirlos manualmente.
Puedes descargar un programa para leer códigos QR compatible con tu terminal en Kaywa Reader. La web de Kaywa también ofrece un generador de códigos QR.
Código QR de Uninstallme.
En Japón, el uso de estos códigos ya está muy extendido, y no sólo es frecuente encontrarlos en cualquier cartel publicitario por la calle, sino que llegan al extremo de usarlos en lápidas para proporcionar la URL de una web con datos sobre el difunto, fotos, etc.
Aunque, como comentaba anteriormente, en España su uso no está tan extendido, ya hay quien ha visto las posibilidades de esta tecnología para ofrecer mejoras de accesibilidad a personas invidentes o con visión reducida.
Accesibilidad en edificios
Me ha llamado la atención la iniciativa del CRE de San Andrés del Rabanedo (León), de colocar estos códigos QR en las puertas del edificio con la información que normalmente suele aparecer en un cartel expresada mediante texto o símbolos. (Ejemplo: aseos de señoras.)
En este vídeo se explica cómo una persona invidente puede escuchar la información de estos códigos usando un teléfono móvil equipado con un lector de pantalla.
Tarjetas de visita accesibles
Estas tarjetas incluyen el código QR con los detalles del contacto, de manera que con hacer una foto a la tarjeta, ya tenemos registrados todos los detalles de contacto en la agenda del móvil sin escribir una sola letra y, de paso, evitando posibles errores tipográficos. Más cómodo imposible.
Otros usos
Idealista.com ofrece un servicio de generación de fichas para imprimir y pegar en farolas, cristales, etc. Estas fichas llevan un código QR con una URL en la que se proporcionan fotos y otros datos sobre el inmueble en alquiler o venta.
En la tienda on line de QR-Code, se pueden encontrar camisetas, bolsos o tazas con todo tipo de mensajes graciosos para descifrar.
A mí se me ocurren ahora mismo usos relacionados con la geolocalización (ZXing ya está incorporando esta característica en su generador de códigos.) Por ejemplo, aprovechando que muchos móviles de última generación suelen incorporar GPS, estos códigos podrían conducirnos directamente hasta un determinado restaurante o, colocados en los típicos carteles de información (“Usted está aquí”), conectarnos con un servicio que nos diga qué tenemos a nuestro alrededor en una ciudad desconocida.
Fuentes y más información
- Código QR en la Wikipedia
- Generador de códigos QR para uso personal (detalles de contacto, links, mensajes)
- Blog sobre QR en español Su generador de códigos permite generarlos en color o en formato PDF.
- Extensión para Firefox para generar códigos QR a partir de URL’s o selecciones de texto
- Los códigos QR conectan a todas las cosas
Otro cambio de theme (segunda parte)
Por kcmr, el 12 de Septiembre de 2008 en Personal, Wordpress
Etiquetas:plugins wordpress, themes, Wordpress
Y una semana y dos días después del primer cambio de theme apresurado, estreno un nuevo theme de fabricación casera del que espero no cansarme en tres meses.
He utilizado iconos gratuitos de dryicons.com, concrétamente el pack Coquette Icons, que tiene la mayoría de iconos que pueden ser necesarios en un blog y no están tan vistos como los de Fam Fam Fam, que ya casi son un estándar
Otro cambio de theme
Por kcmr, el 3 de Septiembre de 2008 en Personal, Wordpress
Etiquetas:template tags, themes, Wordpress
He vuelto a cambiar de theme y con esta ya van unas cinco veces sin contar las que hubo mientras esto se gestionaba con Textpattern en vez de Wordpress.
El anterior tema podía presumir de código sin errores (fui yo 
), pero su diseño estaba llegando a horrorizarme (fui yo 
), así que hasta que no me llegue la inspiración creativa, cosa que puede costar meses, años, lustros…, he decidido quedarme con un theme prefabricado.
De paso dejo un par de enlaces imprescindibles para quien pretenda hacerse su propio tema o modificar uno:
Triste pero cierto
Por kcmr, el 13 de Junio de 2008 en Cajón de sastre, Personal
Caracteres especiales ALT
Por kcmr, el 20 de Abril de 2008 en Cajón de sastre, Personal
Etiquetas:Utilidades
¿Cuál es el colmo de un maquetador web? Pues que en su teclado dejen de funcionar las teclas de menor que (<), y mayor que (>). Experimentado en propia persona.
La cerveza en Madrid
Por kcmr, el 6 de Diciembre de 2007 en Cajón de sastre, Personal
Etiquetas:humor
Cuando eres nuev@ en MadriZ puedes obtener resultados indeseables al pedir cerveza en un bar. Es posible que quieras una cerveza normalita, de esas de 20 cl, y te planten un botellón (el famoso tercio), a lo que digas…, bueno, pues me lo bebo. O que llegues sedienta, pidas un botellín y te encasqueten una cerveza. Que pidas una caña y te pongan un miserable corto, o que pidas un corto y te pregunten cómo quieres la leche.
Poco a poco he ido descubriendo la nomenclatura madrileña para la cerveza y ahora, simplemente pido tercios. Dejo aquí la tabla de equivalencias riojano-madrileñas para que algún que otro despistado como yo sepa a qué atenerse.
Congreso de Webmasters: un 6.5
Por kcmr, el 18 de Noviembre de 2007 en Personal
Etiquetas:Accesibilidad, eventos, Google, SEO
Esta es la nota que yo, desde mi punto de vista personal, le daría al congreso. Me ha parecido en general, más enfocado al pequeño o mediano empresario que tiene su Web y quiere de alguna manera rentabilizarla o conocer mejor las posibilidades que la presencia en Internet le puede ofrecer de cara a su negocio, que orientada realmente al “webmaster”. Término, en mi opinión, un poco desfasado, pero quiza no tan desafortunado como a primera vista puede parecer, ya que ha sido una manera de hacer que todo aquel que de un modo u otro se mueve en este mundillo, se dé por aludido.
El resultado: ponencias muy poco técnicas, algunas decepcionantes, y otras, las que prometían ser, con perdón de la expresión “un coñazo”, muy interesantes.