CosasParaMiBlogs

viernes, 11 de junio de 2010

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).

miércoles, 2 de junio de 2010

CSS, Diseño

Aprende posicionamiento CSS en 10 pasos – Register – Habitaciones – Promotional Code

Este es un magnífico tutorial de BarelyFitz Design, en el que se explica mediante ejemplos gráficos muy prácticos, las diferentes propiedades disponibles en CSS para posicionamiento de capas: STATIC, POSITION: RELATIVE, POSITION: ABSOLUTE y FLOAT.

Esto es algo que vimos anteriormente, pero lo didáctico de este trabajo me ha hecho pensar que merecía la pena el montaje y traducción, así que ahí lo teneis.

1. POSITION:STATIC

id = div-before

id = div-1

id = div-1a

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.

id = div-1b

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem.

id = div-1c

id = div-after

El posicionamiento por defecto para todos los elementos es STATIC, que hace que el elemento no se reposicione y ocupe su posición normal en el documentos, según el flujo del código.

Habitualmente no se debería especificar, a menos que necesites reponer la posición normal tras haber reubicado con otra propiedad.

#div-1 {
position:static;
}

2. POSITION:RELATIVE

id = div-before

id = div-1

id = div-1a

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.

id = div-1b

id = div-1c

id = div-after

Si especificas POSITION:RELATIVE, entonces podrás usar TOP ó BOTTOM y LEFT ó RIGHT, para mover el elemento con respecto a la posición que debería ocupar normalmente en el documento.

Movamos el div-1 20 pixels abajo y 40 pixels a la izquierda:

#div-1 {
position:relative;
top:20px;
left:-40px;
}

Date cuenta de que el espacio donde div-1 debería estar si no se hubiera movido, continúa en su sitio y ahora es un espacio vacío. El siguiente elemento (div-after) tampoco se mueve cuando desplazamos div-1. Eso es porque div-1 todavía ocupa ese espacio original en el documento, incluso después de haberlo movido.

Puede parecer que POSITION:RELATIVE no es muy útil, pero servirá para una tarea importante que veremos más adelante.

3. POSITION:ABSOLUTE

id = div-before

id = div-1

id = div-1a

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.

id = div-1b

id = div-1c

id = div-after

Cuando especificas POSITION:ABSOLUTE, el elemento se "borra" del documento y se coloca exactamente dónde tu indicaste.

Movamos div-1a a la esquina superior derecha (busca arriba la capa roja):

#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}

En esta ocasión, cuando "borramos" div-1a, los otros elementos se reposicionan ocupando el hueco que se ha dejado: div-1b, div-1c, y div-after se mueven arriba porque div-1a ya no está allí.

Cómo pretendíamos, div-1a se ha ubicado en la esquina superior derecha. Esto es útil para colocar cualquier elemento directamente dónde queramos, pero hay que tener en cuenta que si no existen otros posicionamientos previos, el navegador lo colocará con respecto a la página.

Para colocar div-1a en una posición relativa a su contenedor (div-1) es para lo que necesitaremos la posición relativa.

Notas:

Hay un problema en IE: si especificas una anchura porcentual (como "width:50%"), entonces el ancho se basará en el elemento primario (padre), en lugar de en el elemento de posicionamiento.

4. POSITION:RELATIVE + POSITION:ABSOLUTE

id = div-before

id = div-1

id = div-1a

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.

id = div-1b

id = div-1c

id = div-after

Si fijamos posicionamiento relativo para div-1, cualquier elemento dentro de div-1 será posicionado relativamente a div-1. De esta manera, si fijamos una posición absoluta para div-1a, ahora lo podremos colocar arriba-derecha de div-1 y no de la página:

#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}

5. Dos columnas con ABSOLUTE

id = div-before

id = div-1

id = div-1a

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.

id = div-1b

id = div-1c

id = div-after

Ahora hemos construido un esquema de dos columnas, usando posicionamiento relativo y absoluto.

#div-1 {
position:relative;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}

Una ventaja de usar este tipo de posicionamiento, es que podemos colocar elementos en cualquier orden, en cualquier parte de la página, sin importar el orden en que aparecen en el código HTML. Así es cómo hemos puesto div-1b delante de div-1a.

Pero espera, ¿qué ocurre con los otros elementos? Han sido ocultados por los elementos con posición absoluta. ¿Qué podemos hacer para solucionarlo?

6. Dos columnas con ABSOLUTE + HEIGHT

id = div-before

id = div-1

id = div-1a

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.

id = div-1b

id = div-1c

id = div-after

Una solución es incorporar una altura fija a los elementos.

Sin embargo, esta no es una solución viable para la mayoría de diseños, porque normalmente no sabemos a priori cuanto texto va a contener la capa o el tamaño exacto de fuente que usaremos.

#div-1 {
position:relative;
height:250px;
}
#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}

7. FLOAT

id = div-before

id = div-1

id = div-1a

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.

id = div-1b

id = div-1c

id = div-after

Para columnas de alto variable, el posicionamiento absoluto no funciona bien, así que veamos otra solución.

Podemos hacer "flotar" un elemento para colocarlo tan lejos como sea posible a la derecha o a la izquierda y así hacer también que el texto lo rodee. Este sistema se usa habitualmente con imágenes, pero también se puede utilizar con otros elementos más complejos... sobre todo porque es la única herramienta que tenemos para ello!

#div-1a {
float:left;
width:200px;
}

8. Columnas con FLOAT

id = div-before

id = div-1

id = div-1a

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.

id = div-1b

id = div-1c

id = div-after

Si hacemos flotar una columna a la izquierda y luego una segunda columna también a la izquierda, ambas se mostrarán juntas.

#div-1a {
float:left;
width:150px;
}
#div-1b {
float:left;
width:150px;
}

9. Columnas con FLOAT + CLEAR

id = div-before

id = div-1

id = div-1a

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.

id = div-1b

id = div-1c

id = div-after

Después de ubicar elementos con FLOAT, podemos utilizar CLEAR para eliminar en los siguientes elementos ese efecto, de manera que se muestren como si no se hubiera indicado nada (STATIC)

#div-1a {
float:left;
width:190px;
}
#div-1b {
float:left;
width:190px;
}
#div-1c {
clear:both;
}

10. Disclaimer & Recursos

Estos ejemplos son muy sencillos y no provocan la ira de los bugs CSS de IE (muchos).

La siguiente página fue muy valiosa:

Relatively Absolute

Cuando pases por aquí aprovecha para ver también:

Un artículo traducido por Oloman(Oloblogger)
Nota: El enlace original a la "página valiosa", actualmente no funciona.

CosasParaMiBlogs

viernes, 11 de junio de 2010

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

miércoles, 9 de junio de 2010

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

lunes, 7 de junio de 2010

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

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

viernes, 4 de junio de 2010

Urban Dirty. Texturas grunge libres – Free

miércoles, 2 de junio de 2010

Aprende posicionamiento CSS en 10 pasos – Register – Habitaciones – Promotional Code

1. POSITION:STATIC

2. POSITION:RELATIVE

3. POSITION:ABSOLUTE

Notas:

4. POSITION:RELATIVE + POSITION:ABSOLUTE

5. Dos columnas con ABSOLUTE

6. Dos columnas con ABSOLUTE + HEIGHT

7. FLOAT

8. Columnas con FLOAT

9. Columnas con FLOAT + CLEAR

10. Disclaimer & Recursos

Popular Posts

Blogger news

Labels

Blog Archive