Cargando...
Menu Ver sumario
¿Te gustó lo que viste?
Recomiéndanos

Post aleatorio






Nube de etiquetas en Blogger

30/08/2009
Se va uno de vacaciones y cuando vuelve se encuentra con buenas nuevas desde Blogger. Antes de poder siquiera comenzar a contestar comentarios, me entero de que ya está disponible el nuevo gadget Blogger para crear una nube de tags o nube de etiquetas.

La instalación es igual que anteriormente, es decir, añadiendo un gadget y seleccionando el artilugio Etiquetas. Si entramos ahí, ahora se puede seleccionar la opción "Nube" con el conocido resultado para vuestras categorías.


Si quereis saber cómo modificar el aspecto de salida daros una vuelta por Vagabundia y El Escaparate, que hace unos días lo explicaron con profusión de detalles.


Secciones con estilo III Plegar y desplegar

28/08/2009
Para desplegar una parte del blog, podemos utilizar otros sistemas, pero para este caso de estirar o encoger una parte de la sidebar, vamos a usar las librerías SCRIPTACULOUS y PROTOTYPE que con los API's de Google, son bastante fáciles de instalar en un blog... y además tienen un efecto muy resultón.

Si ya las tienes no hay que volverlas a poner, pero si no, copia este código justo antes del </head> de tu plantilla...

<script src='http://www.google.com/jsapi'/><script>
google.load(&quot;prototype&quot;, &quot;1.6.0.2&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.1&quot;);
</script>


Una vez que las tenemos, podemos usar estos SCRIPTS para desplegar cualquier DIV del blog usando esta estructura:

<a href="javascript:void(0);" onclick="Effect.toggle('ID_DEL_DIV','blind'); return false">ENLACE</a>
OTRAS COSAS
<div id="ID_DEL_DIV" style="display: none;">
CONTENIDO OCULTO
</div>

ID_DEL_DIV tiene que ser una cadena alfanumérica única para cada DIV al que se aplique el código. En el enlace hay también que indicarlo para que el intérprete sepa a que elemento estamos llamando. O sease, cada pareja enlace-div debe llevar la misma cadena (p.ej. 5612a46) y si luego hacemos otro despliegue, el nuevo par debe llevar otra cadena distinta. Muchas veces este es el problema de que no funcione bien este SCRIPT.

Ahora a buscar dónde colocarlo. Siguiendo con nuestro pergamino, lo más natural es que el enlace sea el rótulo de la sección y que la parte oculta sea toda la sección que forma la parte central. Como lo vamos usar en una plantilla Blogger, las comillas dobles las sustituimos por simples (') y las dobles por &quot;. De esta manera, y volviendo al código que venimos usando de ejemplo:

<div class='pergamino-arriba'>
<span style='position:absolute;top:70px;left:40px;'>

<a href='javascript:void(0);' onclick='Effect.toggle(&quot;ejemplo20090813&quot;,&quot;blind&quot;); return false'>PINCHA AQUI</a>

</span>
</div>

<div id='ejemplo20090813' style='display: none;'>

<b:section class='pergamino' id='mediosidebar'>
<b:widget id='Text1' locked='false' title='' type='Text'/>
</b:section>

</div>

<div class='pergamino-abajo'/>


En lugar de BLIND, podeis probar a ver si el efecto desplegado os gusta más con el parámetro SLIDE o con APPEAR, que dependiendo de cómo monteis la sección, pudieran quedar mejor.

Al final os debería quedar algo así...



Y a partir de aquí, si se han entendido las explicaciones, se pueden idear otro tipo de secciones con otro tipo de fondos, desplegables o no: Imagination Power.


Secciones con estilo II Fondos cuando la longitud es variable

26/08/2009
Una vez creada la nueva sección, ahora vamos a "lucirnos" colocando una imagen de fondo creada con tres partes distintas: la cabeza, el centro y el pie. Hacerlo así sirve para dar un aspecto más original sin que nos tengamos que preocupar por la longitud del contenido que lleve dentro.

Para ello, creamos (o buscamos) una imagen que nos cuadre y con un editor la cortamos por dónde nos viene bien. Los extremos derecho e izquierdo de cada una de las tres imágenes tienen que coincidir, para que cuando los "peguemos" el conjunto quede como de una sola pieza. El resultado serían estas tres piezas, que preferentemente haremos trasnsparentes en la parte que no lleva dibujo y grabaremos como GIF.



De la parte central, tomamos una altura relativamente pequeña pero teniendo especial cuidado en lo de la coincidencia de puntos de los extremos. Esta parte se va a repetir y formará el fondo real de la sección. Igual que con los fondos generales de una web, tenemos que tener las piezas preparadas para una teselación perfecta. Aquí nos valdrá con que encajen en una repetición vertical.

Tomamos nota de la altura de las imágenes que formaran la parte superior (141px en el ejemplo) e inferior (93px idem) y nos vamos a la parte CSS de nuestra plantilla para crear las tres clases que nos servirán para mostrar esas dos partes. Si anteriormente ya creamos una clase sólo para el cuerpo central, con este sistema habrá que ajustarla.

En la parte central haremos que no se utilicen los pixels transparentes y además entraremos un poco dentro del papel para que el contenido no quede pegado a los bordes de la imagen, mediante un PADDING. El orden en el que hay que indicar los márgenes es: arriba derecha debajo izquierda. Además ponemos un color de texto y tamaño de fuente que queden bien con nuestro fondo. Lo último lo hacemos también con la parte superior. En la parte de abajo no es necesario porque no escribiremos contenido

.pergamino-arriba {
position:relative; /* Posicionamiento previo para poder colocar luego el rótulo */
height:141px; /* La altura exacta de esta imagen */
margin:0px;
text-align:left;
background:url(http://1.bp.blogspot.com/_0eC4K-qZ7AM/Sn3zUb1M3JI/AAAAAAAAJZY/l6bIpW5TPpU/s400/pergamino-arriba.gif) no-repeat; /*No repetir dibujo*/
font-size:16px;
font-weight:bold;
color:#000000;
}

.pergamino-abajo {
height:93px;
margin:0px;
background:url(http://4.bp.blogspot.com/_0eC4K-qZ7AM/Sn3zUFs4VUI/AAAAAAAAJZI/mcKfw9Pv6Xk/s400/pergamino-abajo.gif) no-repeat; /*No repetir dibujo*/
}

.pergamino {
width:180px;
margin:0px;
padding:5px 35px 5px 35px;
background:url(http://2.bp.blogspot.com/_0eC4K-qZ7AM/Sn3zUUklLyI/AAAAAAAAJZQ/W7bEOWdUC2E/s400/pergamino-centro.gif) repeat-y ; /*Repetir sólo en vertical*/
color:#000000;
}


Grabamos si queremos, que crear clases y luego no utilizarlas no daña a nadie y más si no hemos generado ningún gadget en la sección en cuestión. Por eso, para probar como va la cosa, insertamos por ejemplo un gadget de texto y tecleamos algo para ver como va quedando.

Llega el momento de incorporar las clases de los trozos superior e inferior a la parte HTML. Seguimos sin Expandir plantillas de artilugios y editamos buscando la nueva sección. Suponemos que seguimos con la anterior idea de intercalar una sección en medio de la barra lateral, cuyo código era este:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'/>
<b:widget id='Image1' locked='false' title='' type='Image'/>
</b:section>

<div class='pergamino-arriba'>
<span style='position:absolute;top:70px;left:40px;'>
<!-- Distancia a los márgenes para posicionar el rótulo -->
AQUI PUEDE IR UN TEXTO Y/O UNA IMAGEN
</span>
</div>

<b:section class='pergamino' id='mediosidebar'>
<b:widget id='Text1' locked='false' title='' type='Text'/>
</b:section>

<div class='pergamino-abajo'/>

<b:section class='sidebar' id='sidebar2'/>

</div>

En verde está ahora lo que hemos incorporado nuevo. Al tener los nuevos dos DIV's una altura determinada -marcada anteriormente por sus respectivas clases- incluso no teniendo contenido se mostrarán encima y debajo de la parte central, que es lo que queriamos conseguir.

Ya podemos incluir cualquier tipo de gadget adicional en la sección, que el fondo central se repetirá lo necesario hasta la longitud requerida.

Y ahora para rizar el rizo, lo plegaremos casi todo para que ocupe poco espacio en nuestra barra, de manera que se vea sólo un título y el contenido se despliegue a discreción del usuario. Pero eso en el siguiente post.


Secciones con estilo I Intercalar y formatear una nueva sección en sidebar.

24/08/2009
Ya habeis preguntado en muchas ocasiones, cómo hacer que se desplieguen ciertas partes de la barra lateral, para que no permanezcan enteramente a la vista. También cómo poner un fondo distinto sólo en un trozo. Vamos a intentar explicar en este post, cómo hacer ambas cosas al mismo tiempo.

Para hacer una sección "especial", primero hay que crearla, tal y como se vió anteriormente. Para ello, lo más cómodo es editar la plantilla sin expandir artilugios. El lugar dónde insertar la sección variará según las plantillas, pero tiene que ser debajo o arriba de la sección que corresponda a la sidebar. La primera línea es la que se ha añadido para crear la nueva sección.

<b:section class='pergamino' id='upsidebar' />

<div class='links'>
<b:section id='sidebar1' showaddelement='yes'>
<b:widget id='HTML21' locked='false' title='' type='HTML'/>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
<b:widget id='HTML8' locked='false' title='' type='HTML'/>
</b:section>
</div>

Las palabras en verde pueden ser modificadas por las que considereis oportuno. En esta explicación se han incluido con un nombre concreto para poderles seguir la pista.

Con respecto a la clase (CLASS) que es la que dará estilo a la sección, la podeis encontrar en un DIV que engloba toda la sección y sus artilugios (llamada LINKS en el anterior ejemplo) o directamente incorporada a la sección, tal y como hemos hecho nosotros con la que hemos insertado (clase PERGAMINO en el elemento con ID UPSIDEBAR).

En el primer ejemplo, la sección nueva saldrá justo encima de la sidebar. Colocarla debajo se hace con el mismo procedimiento, pero colocarla en el medio ya es algo más complicado y es precisamente cómo lo vamos a hacer.

Para eso, habrá que generar una nueva sección idéntica a la sidebar original, con la misma clase de estilo para no tener que trabajar mucho, pero con distinta ID. De esta manera, se verá la barra lateral, a continuación la sección especial y de nuevo la barra lateral. Realmente serán dos secciones de sidebar distintas pero con el mismo estilo y en medio la sección nueva insertada.

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar1' >
<b:widget id='HTML21' locked='false' title='' type='HTML'/>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
<b:widget id='HTML8' locked='false' title='' type='HTML'/>
</b:section>

<b:section class='pergamino' id='mediosidebar' />

<b:section class='sidebar' id='sidebar2' />

</div>

Una vez creada(s) la(s) sección(es) correspondiente(s), grabamos y ya podremos ver desde Elementos de Página algo así:


Nos falta crear el estilo que queremos para la clase de la nueva sección. Editamos de nuevo la plantilla y la creamos en la parte CSS con el mismo nombre que le dimos anteriormente. En nuestro ejemplo PERGAMINO. En una versión básica, le daremos un poco de margen interno para que el contenido no quede pegado a los bordes (PADDING) y le pondremos un fondo distinto al del resto de la sidebar:

.pergamino {
padding:5px;
background:url(DIRECCION_IMAGEN_FONDO);
}

Luego veremos cómo hacerlo un poco más complicado...


Arreglar la plantilla con Google Chrome

21/08/2009
Así como suena. Gracias a un comentario de Red Verdialera he descubierto que tenía infrautilizado mi acceso directo a Google Chrome. Creo que es una forma muy cómoda de analizar una plantilla y poder previsualizar los cambios sobre la marcha.

Similar a la extensión para Firefox, Firebug, pero de serie, este navegador nos muestra en una ventana emergente la estructura de nuestro HTML, con sólo utilizar Botón derecho-->Inspeccionar Elemento.

Si hacemos el clic sobre el BODY, aparecen plegadas las capas principales y al pinchar sobre las flechas, se despliegan para mostrar el contenido. Vemos así nuestro código (o el de cualquier otra página web) y descubrimos visualmente su estructura, así como qué es lo que hace cada uno de nuestros DIV's. Si posamos el puntero en cualquiera de ellos, veremos marcado en la página (que queda en segundo plano) el elemento formado por esa capa. Asimismo con un elemento más "pequeño" como un texto, un enlace, una imagen...


A la inversa, podemos Pinchar-->Botón derecho en un elemento en concreto y en la ventana emergente nos saldrá marcado el código que le corresponde. Tanto de una forma como de la otra, con doble clic podemos editar y cambiar lo que queramos, viendo el resultado nada más aceptar con el Intro.

A la derecha tenemos una sección que entre otras cosas, muestra el estilo que afecta al elemento que tenemos seleccionado en ese momento. Sus atributos también pueden ser modificados para ir viendo los cambios.

Ojo los de Blogger, porque lo que veis con este método no es exactamente lo que teneis en vuestra plantilla, sino la interpretación del código por el navegador. Esto quiere decir que no vais a encontrar el código que hace que se vean los contenidos de los posts (DATA:POST.BODY), ni cualquier otro artilugio Blogger, como pudiera ser el que almacena y muestra las etiquetas-categorías.

Sin embargo, sigue siendo muy buena herramienta para descubrir fallos en la estructura y hacer arreglos de estilo rápidamente. Sólo se trata de un borrador y de previsualizaciones, por lo que una vez decididos/detectados los cambios, teneis que trasladarlos a vuestra plantilla mediante el procedimiento habitual (Diseño-->Edición HTML)

No perdais de vista la herramienta Metrics que nos muestra los bordes, márgenes y padding del elemento seleccionado y que puede servirnos para ver de manera gráfica, estos atributos en cada una de las capas. También parecen interesantes los atajos de la barra inferior, como la lupa para ir seleccionando elemento a elemento o la relación de errores (en rojo) que podemos ver desplegando la consola (show console).

Por último pero no menos interesante, en una segunda pestaña (Resources), podemos ver el tamaño de todos los elementos que tenemos en nuestra plantilla, así como el tiempo de carga total y el de cada uno de ellos. Aquí podríamos detectar fácilmente, cositas que estuvieran retardando la carga de nuestra página más de lo necesario y que quizás convendría eliminar o sustituir. Como podeis ver en el siguiente gráfico, los SCRIPTS son los que matan a la página del ejemplo (40% del tiempo total).


Si te interesa probarlo, aquí puedes descargar Chrome desde la web de Google.


Modo vacaciones total

19/08/2009
Modo vacaciones totalAhora sí que durante unos días nos vamos a tocar las narices del todo, por lo que no os molesteis en preguntar mucho que no habrá nadie al otro lado para contestar :) Bueno, si teneis paciencia sí, pero será con alguna semana que otra de retraso.

Hemos dejado unos poquitos posts programados para que vayais haciendo deberes mientras tanto.


Imágenes con licencia Commons en Google

16/08/2009
Uno de los problemas de usar imágenes (ajenas) en las propias webs, es que no es fácil hacerlo sin tener una gran probabilidad de incumplir algún derecho de autor. Quizás conscientes de eso y siempre compitiendo con otras plataformas con servicios similares, desde el 9 de Julio Google ha incorporado a su búsqueda de imágenes, un filtro para mostrar sólo ficheros con licencia expresa de reutilización (Creative Commons).


Por ahora es sólo un comienzo, porque una vez obtenidos los resultados, tampoco sabremos fácilmente cuales son las restricciones de la licencia o incluso algo tan necesario como el autor y/o la dirección de su web. Pero es más que probable que en adelante, se vayan incorporando nuevos filtros. De momento, la búsqueda con este filtro, también muestra las imágenes con licencia GNU y las de dominio público.

Ya sólo es cuestión de que los autores vayan etiquetando debidamente sus imágenes y con el tiempo, seguro que la cosa se va puliendo.

La noticia en el Blog de Google (inglés): Encuentra imágenes Creative Commons con Búsqueda de Imágenes.


Blogger. Cómo eliminar/sustituir la cabecera.

11/08/2009
En un principio puede parecer lo más tonto del mundo quedarnos sin cabecera, sobre todo teniendo en cuenta el trabajo que seguro nos costó diseñarla. Lo que ocurre es que no es exactamente eso lo que vamos a hacer. Más bien vamos a eliminar el artilugio de cabecera de Blogger para poder poner otra cabecera más flexible que se pueda adaptar a nuestro diseño.

La cabecera que viene de serie en las plantillas habituales, sólo nos da la opción de colocar una imagen debajo del texto que corresponde a nuestro título y descripción , o sustituir todo por una imagen que será lo único visible. Como en una imagen creada por nosotros podemos poner también texto, quizás sea esta última la opción con más posibilidades estéticas.

La cabecera de serie en las plantillas habituales, viene como un WIDGET y por eso es tan poco manejable. Además, es un elemento en el que a priori no tenemos la opción "eliminar" por lo que parece que no es fácil de quitar. Sin embargo, si buscamos en nuestra plantilla -sin expandir artilugios- encontraremos el código correspondiente...

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Cosicas de prueba y prueba y prueba (cabecera)' type='Header'/>
</b:section>
</div>


MAXWIDGETS indica la cantidad de artilugios máximos que admite esa sección. Como suele venir con 1, pues no nos admite añadir más. Pero es que también, el SHOWADDELEMENT que sirve para que salga el "AÑADIR UN GADGET" en una sección, está también por defecto puesto en NO, por lo que no nos aparece esa opción. Personalmente prefiero quitar estos dos atributos siempre que los veo. Así podremos añadir más cosas sin mayores problemas, sea la sección que sea.


Pero la palabra mágica para que NO se pueda quitar la cabecera es LOCKED. Este atributo (con TRUE) provoca que el artilugio quede bloqueado y no pueda ser movido de su posición (en la parte superior de la plantilla) y que tampoco pueda ser eliminado. Si lo quitamos o lo ponemos en FALSE, ya podremos moverlo o eliminarlo. Tranquilos que siempre lo podremos volver a poner. Precisamente en la lista de gadgets Blogger prefabricados (Lo Básico) hay uno llamado sin más rodeos Cabecera. Está el último pero está.

¿Y ahora que nos hemos quedado sin cabecera qué...? Pues ahora sólo tenemos que Añadir un Gadget en esa misma sección, tipo HTML y poner lo que nos dé la gana: una imagen, un texto, una imagen de fondo y un texto, un gif animado, un vídeo flash con nuestro nombre lleno de estrellitas (¡puajj!), un gif animado, una lista (UL), un widget conseguido de otro servicio,... en fin, ahora sí podemos poner lo que queramos.

Sólo a modo de ejemplo, un par de opciones:

- podemos colocar una imagen y que sus elementos sean enlaces usando un mapa de imágenes (puntero por encima para simulación)
Enlace1Enlace2Enlace3Enlace publiInicio


- podemos generar una tabla y colocar un fondo común y/o un fondo por celda y luego los elementos que queramos, incluyendo incluso efectos rollover.


Fuentes libres.

07/08/2009
Un post muy cortito para presentar una interesante web: Open Font Library.

En un principio es sólo un compendio más de fuentes tipográficas para poder descargar, pero la gran diferencia con otras es que todas las fuentes son libres... de ahí su nombre. Esto quiere decir que no tendreis problemas con los derechos de autor si las usais. Con las "otras" tampoco se suelen tener, pero habiendo género legal, ¿por qué no darle preferencia?

A día de hoy la cosa va por 167 fuentes en stock, pero todo es empezar. Cualquiera puede publicar aquí las fuentes que desarrolle, para lo cual ya se requiere registro. También existe un wiki y una lista de correo dónde poder participar.

Problemillas: Está en inglés y no siempre existe una vista previa de la tipografía seleccionada.


Actualización: Como nos recuerda Raúl en su comentario, para surtirnos de fuentes también contamos con Dafont, que tiene bastantes más tipografías catalogadas. La única diferencia es que mientras que en Open Font, las fuentes son totalmente libres, en Dafont ya nos encontramos mezcladas freeware, shareware, demo o de dominio público, por lo que habrá que mirar la licencia en cada caso.


Blogger. Modificar el formulario de comentarios.

03/08/2009
Para modificar, primero hay que crear, así que si no teneis el formulario de comentarios incrustado a continuación de vuestros posts, ya podeis estar yendo al Panel de Control y dentro de Configuración --> Comentarios, seleccionar la casilla "Entrada incrustada a continuación".

Si lo teneis de esta manera, buscando en vuestra plantilla con "artilugios expandidos", podreis encontrar el código que controla el gadget. Así es tal y como viene de serie.



Se pueden incorporar algunas clases en la parte CSS de la plantilla, para configurar algunos aspectos del formulario:

.comment-form: Es el área de todo el artilugio, incluidos los títulos, los botones, el formulario en sí... Podeis ponerle un color o una imagen de fondo, en cuyo caso, sería conveniente incluir también un PADDING. Para centrarlo en la zona de las entradas, tendreis que hacerlo como de costumbre, con TEXT-ALIGN y con margen lateral automático. También se le puede fijar un ancho con WIDTH. Por defecto creo que vienen 400px.

.comment-form {
text-align:center;
margin: 0 auto;
background: url(DIRECCION_IMAGEN_FONDO);
padding:10px;
}

.comment-form h3: Título que aparece con el texto "Publicar un comentario en la entrada".
y
.comment-form p: Mensaje personalizado que podeis ponerle al formulario, debajo del anterior.

Por último, #comment-editor es el IFRAME del formulario propiamente dicho: el cuadrito, el publicar como, los botones del formulario... pero como no controlo mucho esta parte, ya os dejo que investigueis con él por vuestra cuenta y riesgo.

Estos tres, también pueden ser personalizados creando la clase correspondiente y definiendo sus atributos.

Adicionalmente, se puede modificar directamente la parte HTML que al principio hemos reproducido. Por ejemplo, las etiquetas DATA pueden ser sustituidas directamente por otras frases, imágenes o enlaces... o todo a la vez.

Así <data:postCommentMsg/> es el texto por defecto "Publicar un comentario..." y en su lugar, tal y como se ha dicho, podeis poner lo que os plazca. Igualmente con <data:blogCommentMessage/> que es el mensaje personalizado debajo del anterior. En este último caso, si sólo vais a poner texto y/o enlaces, mejor no lo cambiais y lo tecleais desde Configuración-->Comentarios . Buscando abajo de la página vereis un campo para introducir "Mensaje del formulario de comentarios", que es precisamente este.

<iframe allowtransparency='true' expr:src='data:post.commentFormIframeSrc' frameborder='0' height='275' id='comment-editor' scrolling='auto' width='100%'/>

En esta parte (IFRAME), podeis cambiar el alto (HEIGHT) y ancho (WIDTH) del cuadrito dónde se escribe. Esto puede ser útil si no hemos ensanchado antes el espacio general (comment-form) para el artilugio, porque IE a veces le mete las barras de scroll afeando el resultado. En FRAMEBORDER se puede poner un valor para que se vea un borde y también podeis experimentar directamente con el SCROLLING y sus posibles valores: no, yes y auto.

Suscribirse a: Entradas (Atom)
Recibe por correo las últimas publicaciones.
Teclea tu dirección.


No rights reserved
NINGUN DERECHO RESERVADO
...aunque se agradece un enlace. Si crees que algo aquí vulnera los derechos de otro, mándanos un correo.

El botón que
no hace nada El botón que no hace nada

Ir Arriba