pon css en tu vida!

Todos estamos acostumbrados a ver señalizados los enlaces externos con la típica flecha.

Algo no tan común, y que quería añadir al blog desde el principio, era la de señalizar el idioma de los enlaces externos. Desgraciadamente, en el mundo web el 80% de los contenidos de calidad están en ingles, y hoy en día todavía hay gente a la que esto le supone un problema.

Por ello, he decidido que en este blog se señalizarán aquellos enlaces que lleven a páginas en otros idiomas que no sean castellano, tanto por código como visualmente.

Para señalizar el idioma en del enlace mediante el HTML, es realmente sencillo. Tan solo deberemos utilizar el atributo hreflag

<a href="#" title="Titulo del enlace" hreflang="en-US">Enlace</a>

El atributo hreflang proporciona a los agentes de usuario información sobre el idioma del recurso del otro extremo del vínculo, igual que el atributo lang proporciona información sobre el idioma del contenido o de los valores de los atributos de un elemento.

Ahora, para mostrar la bandera del idioma, utilizaremos el pseudo-selector :after junto con el selector [attr|=val]

a[hreflang|='en']:after {
content: url(images/gb.png);
margin-left: 3px;
vertical-align: middle;
}

El selector [attr|=val] se utiliza para seleccionar elementos cuyo atributo sea exactamente “val” o empiece por “val” seguido inmediatamente por un guión “-”. Este selector se creó para utilizarlo en el atributo hreflang de los elementos a, por lo que si fue creado especialmente para esto, ¿no vamos a desperdiciarlo, verdad?

Marcando nuestro html correctamente, y mediante una sencilla regla de CSS, ya tendremos señalizados aquellos enlaces que, en este caso, dirijan a páginas en inglés.

Un ejemplo:
Enlace a google.es, en castellano
Enlace a la W3C, en inglés

Documentación.

Selectores por atributos en CSS

Vínculos en HTML

Aunque no creo que existan datos oficiales, creo que si no todo el mundo, el 95% de los que nos dedicamos al mundo web utilizamos Firebug.
Personalmente, ¡no soy capaz de imaginar cómo maquetar una web sin utilizarlo!

Una de las funcionalidades que echo en falta es poder ver el CSS en formato plano. Me explico:
Cuando durante la maquetación modificas propiedades de 4 o 5 elementos, después me resulta muy engorroso tener que acordarme de qué he hecho, y dónde.
Y, ¿a que viene todo esto?

Ayer descubrí una extensión para firefox, que si bien no está destinada a reemplazar a firebug, puede ser un gran complemento.

Phoenix permite editar el código CSS y Javascript de cualquier web, y ejecutar esas modificaciones para observar los resultados. También podremos ver el código HTML, tanto el original como el generado después de ejecutar el javascript. Eso sí, no podemos hacer modificaciones en el HTML.

Pero eso no es todo, Phoenix nos muestra los archivos CSS y js que se cargan en la página y su tamaño. Su editor de código, que colorea la sintaxis, es capaz de comprimir y minificar cualquier CSS o javascript, y también hacerlo a la inversa. Cualquier script de javascript comprimido (con packer ) o minificado (minify), Phoenix es capaz de descomprimirlo para que sea perfectamente legible.

Podremos ver en vivo los cambios que realicemos, tanto en CSS como en javascript. No tan “en vivo” como con Firebug, pero sí después de activarlo a través de “Execute CSS” o “Execute JS”.

Por último, Phoenix también permite guardar en nuestro ordenador los archivos.

Recordad que Phoenix está todavía en versión experimiental, por lo que, dicho finamente, tiene licencia para pegar todos los petardazos que quiera Sin embargo, a mí todavía no me ha fallado en los días que llevo utilizándola.

Eso sí, aún tiene un problema con la codificación de caracteres, al menos en los CSS: > que convierte en > , etc…

Sin embargo, es una extensión totalmente recomendable, con la que se pueden hacer grandes cosas si se acompaña con firebug, y alguna que otro add-on interesante.

Animaos a probarla, y contadme que os ha parecido.

Web del proyecto Phoenix.

Descarga la extensión para Firefox Phoenix.

Vía @vladocar

Vía ribosomatic encuentro un artículo muy interesante sobre esas técnicas CSS que, aunque no sepamos al dedillo, es interesante conocerlas, ya que algún día vamos a necesitarlas.

Concretamente, el autor a destacado las siguientes:

• inline-block cross browser.
• Cómo desactivar el autoresize de los textarea en safari.
• Esquinas redondeadas cross browser.
• min-height cross browser.
• Imágenes con bordes “internos”, para no romper el layout.
• Elementos con transparencia cross browser.
• Lightbox mediante CSS.
• Tooltips con CSS.
• Modificar el color de fondo al seleccionar texto (solo Safari y Firefox)
• Añadir un icono diferente a cada tipo de enlace.

Como veis, algunas están en el menú diario de cualquier maquetador, y otras simplemente son más “específicas”… pero estoy seguro que todas pueden llegar a ser muy útiles en el momento oportuno.

Artículo completo en Cats Who Code

BrowserLab es una nueva herramienta de Adobe que proporciona bajo demanda, imágenes renderizadas de como se verán nuestras webs en distintos navegadores, corriendo en sistemas operativos diferentes.

Actualmente, soporta los siguientes navegadores:

• Firefox 2.X y 3.X (Windows XP y Mac OS X)
• Internet Explorer 6.X y 7.X (Windows XP)
• Safari 3.X (Mac OS X)

Las capturas realizadas, pueden verse una por una, comparando los resultados de dos navegadores o superponiendo los resultados mediante transparencias que podemos ajustar a nuestro gusto.

BrowserLab también es capaz de guardar la configuración de navegadores que nos interesa.

Además, para rematar la faena, BrowserLab puede integrarse con Dreamweaver CS4 mediante una extensión, que nos permitirá comparar nuestra maquetación en local.

Más información sobre BrowserLab (ingles)

Prueba BrowserLab

Via | @vladocar

Que a estas alturas de la vida, todos utilizamos CSS para asignar los estilos en nuestra web, es sabido por todos. Lo que si podemos tener más olvidado, es crear una hoja de estilos para impresión.

Las hojas de estilo para impresión, no tienen ninguna diferencia a las tradicionales, salvo por cómo las llamamos en el HTML.

<!-- Hoja de estilos para web -->
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<!-- Hoja de estilos para impresión -->
<link rel="stylesheet" href="print.css" type="text/css" media="print" />

Vladimir Carrer, del que ya hablé hace unos días cuando os comentaba el framework para css para mejorar la legibilidad de la web, resulta que también es autor de Hartija, un CSS que adapta las páginas para la impresión.

Hartija, que ya está funcionando en este blog (podeis comprobarlo previsualizando para impresión este post) tiene un funcionamiento bastante correcto. Elimina colores e imágenes de fondo, establece distintos tamaños de al texto dependiendo de su importancia (H1…H6), y quizás lo más importante, inserta automáticamente después de los enlaces la url de destino.

Con todo, creo que Hartija se va a convertir en otro de los indispensables para mis proyectos.

Descargar Hartija

Blog del autor | Vladimir Carrer

Con el lanzamiento de Internet Explorer 8, los maquetadores web nos encontramos ante un nuevo reto en nuestro trabajo diario, un nuevo navegador de Microsoft que, por suerte o por desgracia, poco o nada tiene que ver con sus antecesores.

Para los próximos desarrollos la estrategia a seguir está clara, asegurar nuestras maquetas en IE 7  y 8. Pero, ¿qué pasa con nuestros proyectos que ya están en producción? ¿Partimos desde cero para crear una hoja de estilos que funcione correctamente en IE 8?

La compañia de Redmond nos ha tenido en cuenta (aunque sea por primera vez) a nosotros, sufridos maquetadores y se ha sacado de la manga una nueva meta etiqueta, concretamente esta:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Con esta simple linea, forzaremos al motor de IE 8 a renderizar como lo hace  IE 7, haciendo las mismas barbaridades que su predecesor e incumpliendo exactamente los mismos estándares. Lo que hará que todas aquellas webs maquetadas a la perfección en IE 7, se vean exactamente igual en la nuva versión del navegador de Microsoft.

Su funcionamiento es muy simple. Tan solo debemos añadir la meta etiqueta en la cabecera del HTML, pero ojo, la etiqueta deberá estar obligatoriamente justo después de la apertura de la cabecera (<head>). Si la situamos en cualquier otro sitio del documento, no funcionará.

Veamos un ejemplo de donde insertarla utilizando el html de este blog:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

<head profile="http://gmpg.org/xfn/11">
<!-- ES IMPRESCIDIBLE QUE LA ETIQUETA X-UA-COMPATIBLE SEA LA PRIMERA QUE APAREZCA EN EL HEADER -->
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<!-- ES IMPRESCIDIBLE QUE LA ETIQUETA X-UA-COMPATIBLE SEA LA PRIMERA QUE APAREZCA EN EL HEADER -->

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>X-UA-Compatible. Meta etiqueta para Internet Explorer 8 | pon css en tu vida!</title>

Modificando una sola línea de nuestros antiguos proyectos, conseguiremos que el nuevo Internet Explorer 8 muestre correctamente el fruto de nuestras horas de maquetación para ese suplicio llamado IE7.

¿Y tú? ¿Conocías y/o utilizas ya la etiqueta X-UA-Compatible para Explorer?

Fuente: Netadictos

Tener un sistema visual de valoración en nuestra web puede darle el toque diferente a nuestro proyecto.

Durante la maquetación de mi portfolio, me propuse utilizar este método de valoración para representar mi participación en los proyectos que he participado.

La idea.

El sistema es el típico método de valoraciones que todos conocemos (las tan conocidas estrellitas). Dándole “media” vuelta al diseño, cambiando las estrellas por asteríscos, podemos obtener algo así:

– VER EJEMPLO FUNCIONANDO -

[Más]

Better Web Readability es un proyecto que intenta mejorar la legibilidad de la web a través de una librería CSS.

Alguna de sus caraterísticas a destacar:

• Tamaño por defecto de la fuente: 16px;
• Serif para encabezados, sans-serif para párrafos
• Detaca la división entre párrafos (nueva línea e indentado del nuevo párrafo)
• Mayor altura de línea
• Contraste entre el color de fondo y de la tipografía suavizado.

También cabe destacar las recomendaciones del autor, como la de aumentar el contenido realmente importante de la página, e intentar reducir el ruido alrededor del texto (banners, enlaces, galerías, etc…). Algo muy recomendable cuando vamos a lidiar con textos largos y espesos, que en muchos casos, se hacen simplemente imposibles de leer.

El proyecto, alojado en Google Code, es obra de Vladimir Carrer.