CosasParaMiBlogs

miércoles, 16 de junio de 2010

Selectores de atributos – Credito – Texas

Aparte de con otras cosas, estos días he estado liado practicando con una vieja pero útil herramienta que nos proporciona CSS desde su segunda versión. Se trata de losselectores de atributos.

Estos selectores pueden hacer las veces de condiciones, para poder aplicar estilo a determinadas etiquetas HTML, pero sólo si tienen cierto contenido en sus atributos. Un ejemplo para que esté más claro.

a[href="http://www.google.es"] {color:#990000;}

La inclusión de esta línea en nuestra hoja de estilo provocará que todas las etiquetasa (anchor) que tengan un atributohref igual ahttp://www.google.es, salgan con una letra de color rojo. O lo que es lo mismo, cada vez que creemos un enlace a la página principal de Google, el texto del enlace saldrá en color rojo de forma automática.

Un selector de atributo tiene la forma

ETIQUETA[ATRIBUTO OPERADOR VALOR] {PROPIEDADES}

En el primer ejemplo, la etiqueta seríaa, el atributohref, el operador= y el valor la dirección de Google. Las propiedades son las habituales de CSS y en el susodicho ejemplo, el color de fuente.

La posibilidad de usar cualquier etiqueta, atributo y valor, así como una suficiente variedad de operadores, es lo que le da fuerza a esta herramienta. Los operadores son los siguientes y harán que el estilo se ejecute en aquellas etiquetas que tengan un atributo:

= exactamenteigual al declarado

input[type="text"] {width: 200px;}

Todos los campos input de formularios que sean del tipo texto, tendrán un ancho de 200px.

^= quecomienza con los mismos caracteres que el declarado

img[title^="categ"] {padding:5px;border:1px solid #000000;}

Todas las imágenes con un título que empiece por la cadena "categ", tendrán un borde negro con unpadding de 5px.

$= quetermina con los mismos caracteres que el declarado

a[href$="jpg"] {background:#cccccc;}

Los enlaces cuya dirección de destino termine con la extensiónjpg, tendrán un fondo gris.

*= quecontiene los mismos caracteres que el declarado

a[href*="oloblogger"] {font-style:italic;}

Los enlaces cuya URL contengan la secuencia de caracteres "oloblogger", apareceran en cursiva.

~= exactamenteigual al declarado, de entre todos los valores que contenga el atributo separados porespacios

link[rel~="alternate"] {...}

No se me ocurre ningún ejemplo de estilo para este operador, pero de entre todas las etiquetaslink, las propiedades se aplicarían a aquellas que dentro del atributorel, tuvieran el valor exacto "alternate", como por ejemplo ocurre enlink href="estilo.css" rel="alternate stylesheet" type="text/css"

|= al principio de una lista de valores separados por guiones

p[lang|="en"] {color:red;}

Los párrafos con marca de lenguaje inglés (en), se verán en rojo como ocurriría en p lang="en-US"...

Si no especificamos operador y por consiguiente, ningún valor, las propiedades se aplicarán a todos los elementos que tengan el atributo declarado.

span[class] {text-align:justify;}

Todas las etiquetasspan que incluyan algún atributoclass (independientemente de su valor), mostrarán texto justificado.

Por último, las selectores pueden ser "sumados", de manera que el estilo sólo se aplicará si se cumplen todas las condiciones:

div[class="resaltado"][id="fondo"] {background:#ffffff; color:blue; font-weight:bold; }

Si undiv tiene simultáneamente la clase y laid indicadas, su contenido se verá con fondo blanco y texto azul en negrita.

Algunos operadores corresponden a CSS3, pero en un principio, todos son soportados por Firefox, Chrome, Safari e Internet Explorer a partir de la versión 7.

viernes, 11 de junio de 2010

CSS, Diseño

Usar CSS3 sin conocer CSS3. Generadores – Lawyers – Texas – Hard drive

Pues así es. Ya puedes empezar a utilizar las nuevas características que incorpora el estándar para hojas de estiloCSS3, incluso si no has leído una sola línea sobre él. Para ello, tenemos muchas aplicaciones online que generan automáticamente el código necesario para añadir sombras a textos, bordes múltiples, esquinas redondeadas, tipografías no-estándar, reflejos, gradientes, columnas... simplemente indicando los parámetros necesarios en cada caso. El generador ya se ocupa de darnos las propiedades que hay que incluir en los selectores a los que queramos aplicar ese estilo.

Conste que no es lo recomendable, porque lo interesante es entender lo que se teclea para poder sacarle el máximo partido. Pero una cosa no es excluyente de la otra y si os vais fijando en las líneas de código, podreis observar fácilmente qué es lo que hace cada una e ir captando la idea.

Y para los que saben de CSS3, pues una ayudita nunca viene mal ;)

CSS3 GENERATOR
Muy intuitivo y completo. Sólo requiere introducir los valores. Muestra iconos de los navegadores que soportan cada propiedad y sobre ellos, la version mínima necesaria.
Disponibles: border-radius, box-shadow, gradient, rgba, rotate, transition y @font-face.

CSS3, PLEASE
Para mí muy original. Se presenta directamente todo el código y la vista previa de un elemento. Permite activar/desactivar diversas propiedades, así como modificar sus valores sobre el propio código, viendo sobre la marcha sus resultados.
Disponibles: border-radius, box-shadow, text-shadow, rgba, @font-face, column, resize, box-sizing y outline

STYLE MASTER
Flojito pero suficiente para lo más básico. También incorpora una vista previa y una barra con los navegadores que soportan cada propiedad de las que se pueden probar.
Disponibles: gradient, text-shadow, box-shadow y text-stroke

BORDER IMAGE GENERATOR
Ideal para ver cómo se pueden contruir bordes con imágenes.
Disponible: border-image

WIDGET PAD
No se pueden cambiar los valores de las distintas propiedades, pero resulta interesante para ver como funcionan sin tener que movernos del sitio. Incluye la propiedad para simular reflejos.
Disponibles: border-radius, box-shadow, box-reflect, transform, opacity, text-shadow y text-stroke

BORDER RADIUS
Sencillito como él solo pero eficaz en su cometido de mostrar cómo funcionan los bordes redondeados.
Disponible: border-radius

CSS3 GRADIENT GENERATOR
Centrado exclusivamente en la generacion de código para gradientes.
Disponible: gradient

CSS TRICKS BUTTON MAKER
Generador de botones construidos exclusivamente con CSS3. Primero se diseña el botón y una vez al gusto, se puede pinchar en él para obtener el código de estilo.
Disponibles:

Teneis que tener en cuenta que no todo funciona en todos los navegadores. Las distintas propiedades están siendo incorporadas paulatinamente por las nuevas versiones que van sacando los fabricantes. Por eso, en unas versiones/navegadores unas cosas funcionan y otras no. En esto, para variar, Internet Explorer se está quedando un poco atrás y es el que más carencias tiene al respecto. Sin embargo, en la mayoría de casos, el no interpretar bien el código no supone generalmente un perjuicio en la estética de la web. Si acaso, más bien una no-mejora.

Me explico... Si añadimos a una capa con borde el efecto de esquinas redondeadas, los navegadores que no soporten elborder-radius simplemente no las mostrarán redondas, sino como siempre, en ángulo recto. O sea, el navegador ignora la propiedad y no la interpreta ni bien ni mal. Simplemente no la interpreta.

miércoles, 9 de junio de 2010

Mundo Google, Promoción, Servicios, Trucos

Blogger y Adsense. Evitar primer anuncio entre posts. – PHD

La manera de insertar un anuncio deAdsense en un blog, es tan fácil como copiar el código que nos facilita ese servicio y pegarlo dónde nos interesa que aparezca: cabecera, sidebar, crosscol, pie, etc.

Colocarlo en las entradas tiene su peligro, ya que Adsense no permite más de tres banners por página y si se hace de esa manera, podrían aparecer más de los debidos (uno por entrada) en la página principal, en las de navegación por anteriores/recientes o en las de etiquetas. Creo que el propio script de Adsense controla esto para no excedernos, pero lo cierto es que no he querido probar. Espero que lo entendais ;)

Pero en fin, San Google y Blogger en su nombre y por una cuestión totalmentedesinteresada, tienen a bien facilitarnos la cosa, mediante un sistema automático de agregaranuncios Adsense entre artículos, que además respeta el máximo de tres exigido.

Esto se hace accediendo desdeElementos de Página y editando el bloqueEntradas del blog. Allí aparece una casilla de verificación con la leyendaMostrar anuncios entre las entradas, que es la que hay que marcar para activar este servicio. A continuación se despliega un nuevo cuerpo dónde podremos indicar cada cuántas entradas queremos mostrar un anuncio, el formato, la configuración de colores, nuestra ID de editor...

Esta activación cambia el valor de la etiquetadata:post.includeAd atrue, con lo que se interpretará todo el código que hay dentro de un condicional para este fin y que en una plantilla sin modificar y accediendo con artilugios expandidos, será como este:

b:if cond='data:post.includeAd'
b:if cond='data:post.isFirstPost'
data:defaultAdEnd/
b:else/
data:adEnd/
/b:if
div class='inline-ad'
data:adCode/
/div
data:adStart/
/b:if

Completando el código correspondiente al resto del bucle principal de Blogger, nos encontraremos antes y después de esto, otras dosetiquetas DATA más, relacionadas también con este artilugio para la publi:data:defaultAdStart/ ydata:AdEnd/

Perojuro por mis niños que no entiendo la utilidad ni de estas ni de las anteriores. Son parte delcódigo misterioso que Blogger incluye con nocturnidad y alevosía, porque no he encontrado ninguna referencia a ellas y tampoco he observado ninguna diferencia tras ir eliminar las líneas una a una. La única que hace algo y que además es imprescindible, es la dedata:adCode. En ella parece que se almacena todo lo necesario para mostrar los banners, según la configuración programada por nosotros.

Así las cosas, poco podemos hacer, pero al menos hay algo que sí y que ayer precisamente me preguntaba Damián: cómo hacer para evitar que salga un anuncio tras el primer post.

La solución está en utilizar otraetiqueta DATA y que es aquella que controla si estamos en el primer post de la página:data:post.isFirstPost.

Así pues, con un condicional comprobamos antes de ejecutardata:adCode, si estamos en ese primer post. Si no lo es, escribimos el contenido de la variable y si es el primero, nos saltamos el anuncio. En verde lo añadido:

b:if cond='data:post.includeAd'
b:if cond='data:post.isFirstPost'
data:defaultAdEnd/
b:else/
data:adEnd/
/b:if
b:if cond='data:post.isFirstPost != "true"'
div class='inline-ad'
data:adCode/
/div
/b:if
data:adStart/
/b:if

lunes, 7 de junio de 2010

Promoción

20 Blogs 2010. Concurso para blogs – Curso – Justicia – coche

Aquí están de nuevo losPremios 20Blogs, el concurso en el que los blogueros participantes son los que tienen el papel protagonista en los resultados finales. Organizado por20minutos.es a través de su secciónLa Blogoteca, la de 2010 es la quinta edición de este certamen.

Para todos los que tengais una bitácora, esta es una ocasión excepcional de mostrar vuestro espacio en un sitio con bastante relevancia en la Red, al tiempo que podreis conocer blogs muy buenos que de otra manera posiblemente nunca llegueis siquiera a saber que existen. Esto sin olvidar que podreis disfrutar de una experiencia en cuanto a lo que supone participar en una competición de esta índole. Si esto ya es de por sí bastante atractivo, lo de ganar no os lo podeis ni imaginar!!!

Salvo que haya algo que se me haya pasado, lasbases son las habituales de otros años:

Puedes presentar tantos blogs como administres, pero cada uno puede participar en una sola categoría de entre las 20 existentes
Para poder votar hay que tener al menos inscrito un blog, admitiéndose un voto por categoría, lo que hace un total también de 20 votos por barba.

Los premios:

Estatuilla a los ganadores en cada categoría, por votación de los inscritos
Estatuilla y 3.000€ al mejor blog por votación.
Estatuilla, 3.000€ y posibilidad de integrar el plantel de blogueros de 20minutos.es al mejor blog 2010 a criterio del jurado, de entre los cinco más votados en cada categoría.

Aunque teneis hasta el18 de Julio para inscribir vuestro blog, no os durmais, que luego el tiempo pasa y nos acordamos siempre de terminar de hacerlo a última hora.

Tras una fase de validación que durará hasta el 1 de Agosto, entre el 2 de Agosto y el 30 de Septiembre se podrán emitir/recibir votos, para finalmente conocer a los ganadores el 8 de Octubre.

¡¡Suerte a todos!!

Blogger, Mundo Google, Promoción, Recursos

Google Analytics. Ahora también asíncrono. – Register – Phone

Google Analytics es un sistema gratuito para estadísticas que la multinacional del buscador, pone a disposición de cualquier webmaster.

Con él podrás obtener informes detallados sobre el número de visitas, usuarios únicos, tiempo en la página, fuentes de acceso, páginas más vistas, localizaciones geográfias, palabras clave, ruta seguida por los visitantes, etc. Hay disponibles muchas opciones, filtros e incluso alertas (Intelligence) que nos avisan cuando sucede cierto parámetro.

Requiereregistro y una vez estemos en el panel de control, premos encontrar un código que se debe incorporar a cada página que queramos controlar. En el caso de Blogger, será suficiente con insertarlo en la plantilla, antes de/body Podemos ir añadiendo varias webs (o blogs) y desde el panel de control ir accediendo a la que nos interese en cada momento. El código incluye una identificación distinta y única para cada sitio administrado en la forma XX-XXXXXXX-X.

El código tradicional se descarga una sola vez al comienzo de la visita y se almacena en la caché, lo cual resulta bastante ventajoso desde el punto de vista de la velocidad de acceso. Pero todavía lo es más que el fichero principal sea el mismo para todos los sitios, porque una vez visitado uno que t esta utilidad, el navegador no volverá a cargarlo durante la sesión. Como resultado, el incremento de tiempo de carga de la página tras su instalación, no difiere mucho del original.

El código ha tenido diferentes versiones y esta es una de las últimas:

!-- Google Analytics --
script type='text/javascript'
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'XX-XXXXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
ga.setAttribute('async', 'true');
document.documentElement.firstChild.appendChild(ga);
})();
/script

XX-XXXXXXX-X es el identificativo que mencionaba antes. El último dígito distingue las distintas web de un mismo administrador.

Desde hace unas semanas, Google Analytics facilita un nuevosistema asíncrono, de tal manera que hasta que nuestra página no se ha cargado por completo, el tracking de estadísticas no comienza a funcionar. Así que si antes tardaba poco, ahora se supone que interferirá mucho menos todavía.

Este es el nuevo código:

!-- Google Analytics Asincrono --
script type='text/javascript'
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'XX-XXXXXXX-X']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
/script

El inconveniente proviene de la misma ventaja: si la página no se carga del todo por algún fallo de diseño, la estadística no funciona, así que corresponde a cada uno valorar qué es lo que más le interesa antes de aplicarlo.

viernes, 4 de junio de 2010

Recursos

Urban Dirty. Texturas grunge libres – Free

Óxidos, viejas maderas, cemento, pinturas desgastadas... Más de 700 fotografías con un estilo muy grunge para utilizar como fondos, wallpapers, texturas o cualquier otra cosa que se te ocurra.

Todas están bajo una licencia Creative Commons, que permite su uso sin restricciones (incluido el uso comercial). Sólo se requiere referenciar aurbandirty.com en el lugar y la forma que te parezca más oportuna.

Los tamaños originales llegan hasta 3027x2304 pixels con 180dpi y su web incluye un buscador (en inglés).