ElHackerZ

Nube de etiquetas con HTML

Hace unos días me comentaban que la personalización en la nube de etiquetas era muy limitada, se añadía el inconveniente de estar usando una plantilla clásica, sugerí crear nuestra propia nube y el resultado ha sido más que agradable.

Cuando creamos una nube de etiquetas conseguimos que cada palabra de la nube sea un enlace a una etiqueta determinada.Lo que sigue a continuación es la forma de crear una nube añadiendo un gadget de HTML y unas líneas en el CSS de nuestra plantilla.

En plantilla de diseño editamos un nuevo gadget HTML y en su interior añadimos lo siguiente:

<a style="color:#9b2230; font-size: 11px;" href="#">TEXTO</a>

<a style="color:#000000; font-size: 14px;" href="#">TEXTO</a>

<a style="color:#940f04; font-size: 42px;" href="#">TEXTO</a>

<a style="color:#999999; font-size: 17px;" href="#">TEXTO</a>

<a style="color:#d85564; font-size: 11px;" href="#">TEXTO</a>

<a style="color:#940f04; font-size: 18px;" href="#">TEXTO</a>

<a style="color:#8B8386; font-size: 16px;" href="#">TEXTO</a>

<a style="color:#d85564; font-size: 11px;" href="#">TEXTO</a>

</div>

Añadiremos tantas líneas como etiquetas deseamos añadir.

» En color:#xxxxxx;es el color del enlace.
» Sustituimos TEXTO por el nombre de cada etiqueta.
» La almohadilla # la sustituimos por la url que corresponde a cada etiqueta.
» Con font-size: xxpx; es el tamaño de la fuente.

La forma de conseguir la url de cada etiqueta es muy simple, hacemos click sobre una etiqueta de nuestro blog y se mostrarán todas las entradas con ese etiqueta, lo que haremos será copiar la url que aparece en ese momento en la barra del navegador y pegarla sustituyendo el asterisco #

Una vez tenemos los enlaces creados guardamos los cambios y nos vamos a plantilla Edición de HTML, buscamos ]]></b:skin> y justo antes añadimos lo siguiente:

.nube-html { 

border: 1px solid #333;
background: url('url-imagen-fondo') repeat;
margin: 10px 0 10px 0;

line-height: 30px;

text-align: center;

padding: 2px;

padding-top: 10px;

}

.nube-html a {

text-decoration: none; 

}

.nube-html a:hover {

border-bottom: 1px dashed #ccc;

}

» Podemos añadir una imagen de fondo a la nube en "background" y borde en "border"

» Para que al pasar el ratón sobre el enlace se produzca un efecto hover añadí en "a:hover" border-bottom: 1px dashed #ccc; que lo podemos sustituir por cualquier otro efecto.

Pseudo-clases y pseudo-elementos (3)

Otros selectores que podemos usar y que se combinan con los pesudo-elementos.

El asterisco (*) es llamado un selector universal selector, por ejemplo, si colocamos lo siguiente al inicio de nuestras declaraciones CSS:

* {margin: 0; padding: 0;}

Eliminaremos los márgenes y paddings que colocan los navegadores en las etiquetas.

Cuando una etiqueta está dentro de otra, se dice que la etiqueta contenedora es el elemento padre (parent) y la etiqueta contenida es el elemento hijo (child). Por eso, siguiendo esta analogía, en CSS se habla de la herencia, es decir, ciertas propiedades definidas en el elemento padre, se "transmiten" al hijo. Por ejemplo:

<div style="color: green;">
  <p> ... un texto ...</p>
</div>

En este caso, el DIV es el padre y el párrafo P es el hijo. El párrafo se verá verde porque hemos definido que el DIV tenga color verde y esta propiedad es heredada.

El texto se verá de color verde.

No todas las propiedades se heredan así que también existen pseudo-elementos que nos permiten definir estas cosas con mayor exactitud.

Usando el símbolo < indicamos que cierta propiedad se aplicará sobre los elementos hijo. Por ejemplo si tenemos esto:

div#ejemplo b {color:lightblue;}

<div id="ejemplo">
  <p>El texto se verá de color <b>azul claro</b>.</p>
  Y este otro <b>también</b>.
</div>

Cualquier etiqueta B dentro de ese DIV se verá de color azul:

El texto se verá de color azul claro.

Y este otro también.

En cambio, ya sea usando esto:

div#ejemplo p b {color:lightblue;}

o esto:

div#ejemplo p > b {color:lightblue;}

<div id="ejemplo">
  <p>El texto se verá de color <b>azul claro</b>.</p>
  Pero este otro no <b>aunque esté en negrita</b>.
</div>

Sólo serán azules los que estén dentro de una etiqueta P.

El texto se verá de color azul claro.

Pero este otro no aunque esté en negrita.

El símblo más + lo usamos para indicar a un elemento inmediatamente adyacente:

p.ejemplo + p  {color:yellow;}

<p class="ejemplo">Este es un párrafo cualquiera.</p>
<p>Este es el párrafo adyacente al anterior.</p>
<p>Este no es el párrafo adyacente.</p>

Le estamos diciendo que, el párrafo que inmediatamente sigue a uno al que tiene la clase ejemplo, sea de color amarillo y todos los demás no.

Este es un párrafo cualquiera.

Este es el párrafo adyacente al anterior.

Este no es el párrafo adyacente.

Parece complicado y de alguna manera lo es. Probablemente, más interesante y útil es definir propiedades en función de los atributos de una etiqueta. Por ejemplo, si tuvieramos esto:

a {color:yellow; font-size: 20px;}
a[title] {color:red;}

<p>
  Este enlace no tiene title y es <a href="#">amarillo</a>
  Como este otro enlace tiene title es <a href="#" title="El enlace rojo">rojo</a>
</p>

Lo que veríamos es que todos los enlaces que tengan el atributo title en la etiqueta tendrían un color distinto:

Este enlace no tiene title y es amarillo

Como este otro enlace tiene title es rojo

Esos atributos pueden definirse de manera aún más precisa. En este caso, sólo si el enlace tiene esa dirección URL determinada tendrá el color indicado.

a[href='http://gemablog-.blogspot.com/'] {color:salmon;}

Este es un enlace a ninguna parte

Este es un enlace a Gema Blog

Si en lugar del símbolo igual (=) usamos ~=, los que se mostrarán en ese color son todos aquellos enlaces que estén contenidos en una lista separada por espacios:

a[href='http://gemablog-.blogspot.com/ http://elescaparatederosa.blogspot.com/'] {color:salmon;}

También podríamos establecer más de un atributo, de esta manera, se mostrará de cierto color los enlaces si además, tienen el atributo títle.

a[href='http://gemablog-.blogspot.com/'][title] {color:salmon;}

Combinando esto con content, podrían hacerse cosas interesantes, lástima que no funcione en Internet Explorer, ni siquiera en las versiones nuevas:

a[href='http://gemablog-.blogspot.com/'] {color:salmon;}
a[href='http://gemablog-.blogspot.com/']:after {content: url(unaImagen);}

Este es un enlace a ninguna parte

Este es un enlace a Gema Blog

REFERENCIAS:w3.org

Header con "ancho total"

Desde que modifiqué el aspecto del header del Escaparate, son muchos los que me preguntan como hacer que la cabecera del blog ocupe todo el ancho de la pantalla, tal como está en mi blog.
En realidad es un "efecto óptico" ya que el tamaño de la cabecera es de unos 800 pixeles.Lo que hace que parezca que ocupa todo el ancho de la pantalla, es una imagen aplicada en el fondo de la página.

Voy a tratar de explicar paso a paso los cambios necesarios para darle este aspecto al header, tal como yo misma los fui haciendo, con la única intención de que os sirva de orientación para vuestros propios "experimentos".

[1] Antes de empezar os aconsejo crear un blog de pruebas con la plantilla Mínima de Blogger, entre otras cosas porque es la que voy a usar en este ejemplo.

[2] Vamos ahora a ocultar la Navbar de Blogger.

[3] Preparamos la imagen para añadir en el fondo del blog, lo que tampoco tiene porque ser algo complicado para los que no dominamos el diseño de imágenes. En mi caso la he hecho usando simplemente el Paint, que como sabéis viene incluido en Windows. Está en formato JPEG y tiene unas dimensiones de 39 x 245 pixeles.
Le he puesto un color distinto en la parte de arriba, para que destaque el menú que incluiremos más tarde, del resto de la cabecera.

[4] Subimos la imagen a un alojamiento apropiado o mejor aún la alojamos en el mismo Blogger para obtener su url.

[5] Vamos en nuestro panel a la parte de Edición HTML y localizamos esta sección del código de la plantilla:

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

Incluimos la url de la imagen en la línea del background de esta manera:

body {
background:$bgcolor url(http://img27.imageshack.us/img27/5118/dibujocewuio.jpg) repeat-x ;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

[6] Algo más abajo de esa parte de la plantilla, localizamos el #header-wrapper { y el #header {, en ambas partes de código veremos una línea como esta:
border: 1px solid $bordercolor;
tendremos que cambiar el valor 1px por 0px para anular el borde del header.

Guardamos cambios y tendremos entonces algo como esto:

[7] Vamos a colocar ahora la imagen en la cabecera desde la parte de Diseño de nuestro panel.
En mi caso he hecho una (tambien con el Paint) con el mismo color de fondo que la imagen que colocamos antes en el body (aunque no es imprescindible ya que esto dependerá del diseño de cada uno) para obtener así la apariencia de header con "ancho total". Está en formato JPEG y tiene unas dimensiones de 660 x 145 pixeles.

[8] Si en este punto miramos como está quedando nuestro diseño, comprobaremos que la nueva imagen de cabecera, no se ajusta del todo a la imagen de fondo:

[9] Volvemos a Edición HTML y localizamos de nuevo la sección del CSS que corresponde al header:

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:0px solid $bordercolor;
}

Y le hacemos algunos cambios para ajustar la cabecera:

#header-wrapper {
width:660px;
margin: 30px auto 0px;
padding-bottom: 25px;
border:0px solid $bordercolor;
}

Resultado:

[10] Por último vamos a incluir el código CSS necesario para el menú que irá sobre la cabecera y el buscador que estará incluido en él.
1-Copiamos y pegamos antes del ]]></b:skin> del código de la plantilla:

/* Menu Navbar---------------------*/
.pro15 {padding:0 0 0 10px; margin:0; list-style:none; height:30px; }
.pro15 li {float:left;}
.pro15 li a {display:block; float:left; height:30px; line-height:30px; color:#fff; text-decoration:none;font-family:arial, verdana, sans-serif; text-align:center; padding:0 0 0 10px; cursor:pointer; font-size:12px;font-weight: bold;}
.pro15 li a b {float:left; display:block; padding:0 15px 0 8px; color:#fff;}
.pro15 li a:hover {color: #fff; text-decoration: underline;}
.pro15 li a:hover b { color:#fff;text-decoration: underline;}
.pro15 li a em {display:block;float:left;width:15px; height:30px;}
/* Buscador ---------------- */
#search-btn {background: #008083;color: #ffffff;padding: 1px;margin: 0px 0px 0px 3px;
border: 2px solid #000;}
#search-box { width: 160px; border: 2px solid #196D81;padding: 1px;}

2- Localizamos ahora más abajo esta línea en el código de la plantilla:<div id='header-wrapper'>

Justo sobre esa línea, pegamos el código para mostrar el menú (es en este código donde tendremos que incluir los enlaces):

<ul class='pro15'>
<li><a href='#'><b>Inicio</b></a></li>
<li><a href='#'><b>Suscribe</b></a></li>
<li><a href='mailto:tucorreo@hotmail.es'><b>Contacto</b></a></li>
<li><a href='#'><b>Sobre mi</b></a></li>
<li><a href='#'><b>Archivos</b></a></li>
<li><form action='/search' id='searchthis' method='get' style='display: inline;'><input id='search-box' name='q' type='text'/><input id='search-btn' type='submit' value='Buscar'/></form></li>
</ul>

Resultado final:

Notas:

Como os dije al principio de la entrada, esto pretende ser solo una orientación para vuestros propios diseños.
He puesto las medidas de las imágenes que he usado porque en función de esas medidas es como he añadido los valores necesarios para "encajar" el header, si usáis otras medidas para las imágenes tened en cuenta que los valores de padding y margin en el header-wrapper también serán distintos.

Pseudo-clases y pseudo-elementos (2)

Además de pseudo-clases hay pseudo-elementos, su uso es similar, sirven para identificar con precisión determinadas cosas y crear efectos.

:first-line identifica la primera línea de un párrafo. Aquí, le decimos que esa primera línea estará en negrita y de color amarillo:

p.ejemplo:first-line {color: yellow; font-weight: bold;}

<p class="ejemplo"> ... el texto ... </p>