TELL-A-FRIEND: herramienta de presencia social

En http://tellafriend.socialtwist.com/index.jsp despues de un proceso de registro sencillo, se introducen los datos de tu blog y se elige la opción "Blogger" (tradicional o moderno) y el sitio genera un código que al introducirse en la página genera un Widget de posicionamiento social.

El código ha de introducirse despues del elemento de contenido del post y antes del footer. Después de registrarse se recibe un e-mail con un link de activación y se empieza una sesión para configurar el WIDGET.

Record your screencast online

Pulsa para CONTINUAR LEYENDO...

Caso Practico: Cambiar las medidas de los elementos de la plantilla del Blogger

Lo primero es comprender que elementos forman nuestra plantilla, cómo se llaman y cómo están ubicados. Vamos a utilizar un truco. Utilizando el color del fondo para distinguir e identificar sus partes.

Free online screen recorder

Ya tenemos una idea aproximada de los elementos que forman el layout de nuestra pagina. Nuestro objetivo será aumentar el tamaño del POST (la parte central de contenidos) y de la SIDEBAR (barra lateral) manteniendo su proporción actual. Evidentemente, si aumento el post, tendré que aumentar elementos que van emparejados con él (LINKBAR, HEADER y FOOTER).


Voy a recorrer el código de la plantilla buscando aquellos párrafos CSS donde tenga referencias de medidas en pixels.



Aquellos elementos que van parejos los aumentamos en un 63,63% aprox, 350 Pixels para un total de 900. Y los demas, en la misma relación que calculamos con una sencilla regla de tres.
Unicamente hay que sustituir el valor INICIAL por el FINAL en las lineas
tales cómo:

#blog-wrapper {
width: 552px;

#blog-wrapper {
width: 902px;


La página queda así:
podeis verla en Andando con Yagüe

Pulsa para CONTINUAR LEYENDO...

Graficos con fondo transparente

A veces queda mejor que los graficos tengan el fondo transparente de forma que queden silueteados contra el contendor del blog.
Hace falta editar la imagen en un programa de graficos que maneje capas y si tiene un borrador de fondos, mejor que mejor. Lo importante es grabar la imagen con formato PNG.

Pulsa para CONTINUAR LEYENDO...

Protegiendo tus derechos: Licencia CREATIVE COMMONS

Al fin y al cabo, lo que uno escribe en su blog es su producto intelectual. Y aunque generalmente lo que deseamos todos es la mayor difusión posible no está de más que esta se haga de una manera ordenada. En Escoge tu Licencia podemos configurar el tipo de licencia CREATIVE COMMONS que queremos aplicar a nuestros contenidos, es decir de que forma pueden o no compartirse.

Después de seleccionar las opciones que nos parezcan más apropiadas (están explicadas de una forma muy sencilla) tenemos la opción de generar código HTML para añadirlo a nuestra página. En ZAPATERO Presidente, y Mariano de Oponente o Andando con Yagüe teneis el ejemplo

Pulsa para CONTINUAR LEYENDO...

Ajustando el HEADER: el Título y la descripción se ajustan a un nuevo grafico

Al cambiar el grafico de fondo de nuestra cabecera de página, nos encontramos con que el título y la descripción del Blog, ya no cuadran:




Necesitamos entonces cambiar su ubicación en la plantilla.

Aqui tenemos las sección completa de código CSS que define la cabecera de nuestra plantilla.

Buscamos y vemos que el párrafo que se ocupa de definir el estilo del Título del blog es #h1.title

Cómo queremos mover hacia la derecha el texto la opción a cambiar es margin

Cómo funciona "margin": puede tener 4 valores correspondientes con las distintas coordenadas en el sentido de las agugas del reloj, es decir ARRIBA - DERECHA - ABAJO - IZQUIERDA. Y marca la distancia entre el límite exterior de un objeto y el resto de objetos.



Vemos que tenemos:

margin: 0 1% .1em;

Es decir: 0 de margen superior, un 1% del tamaño de nuestro objeto titulo de distancia hacia la derecha, y .1 del tamaño de fuente que tenga el objeto título. Si la fuente son 24pt, p.ej. .1em serán 2,4 puntos o pixels.

Añado el margen izquierdo de 200 pixeles, porque la imagen tiene 300px de ancho pero al tener el fondo transparente 200px son suficientes para librar la silueta del dibujo

margin: 0 1% .1em 200px;

Si quisieramos mover la descripción acudimos al párrafo

#header .description

y trabajariamos en la linea "margin" igualmente. Podeis verlo en ZAPATERO Presidente, y nos van dando por PONIENTE

Pulsa para CONTINUAR LEYENDO...

Cambiar la plantilla de un BLOG sin perder todos tus WIDGETS

Da mucha pereza cambiar la plantilla de un blog hecho y derecho si uno piensa que tiene que volver a meter todos aquellos widgets y modificaciones. Sin embargo con un poco de orden y procedimiento es posible hacerlo sin riesgo de perder nada.



Hacer copia de seguridad de la plantilla ORIGINAL del Blog
Parece de sentido comun, por si acaso algo va mal.

Abrir tu editor de plantillas
En nuestro caso, SCITE que reesulta muy practico para manejar XML. Abrimos la plantilla original y la plantilla nueva en nuesto editor. Tendremos que copiar bloques enteros de codigo y pegarlos en la nueva plantilla.

Encontrando el código a copiar
La etiqueta <body> marca la frontera, por encima de ella el código es básicamente CSS, que controla la apariencia (colores, fonts) del blog. NO necesitamos esta sección. (pero ojo que habrá que revisarlo pues puede ser necesario traspasar algo.
Lo que está debajo de <body> es el cuerpo principal XML que controla la estructura (layout) y el flujo de datos desde Blogger hasta tu blog. Aqui es donde se encuentra todo el código correspondiente a los Widgets que queremos traspasar.

Todos los widgets se encuentran entre los tag <b:widget> ... </b:widget>. Todos los <b:widget> se encontrarán dentro de la etiqueta <b:section> ... </b:section> tag. La estructura será algo parecido a:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Linkbar' type='LinkList'>
...
... más código ...
...
</b:widget>
<b:widget id='HTML1' .....;
...
</b:widget>
<b:widget id='Image1' .....;
...
</b:widget>
</b:section>
</div>


Este es un ejemplo de cómo aparecen los widgets dentro de la estructura típica de una pplantilla XML. La etiqueta div id The main location of the widget is identified with the div id label. In this case, div id=sidebar-wrapper. Below the div id is the b:section tag. All widgets must be located within this b:section tag. You don't need to worry if you don't understand much about the div or b:section thingy. The important tag you have to know is the b:widget tag. Note that you can put as many widgets as you want inside the b:section tags.

Here's an actual example of a widget tag embedded inside a b:section tag. The location is sidebar-wrapper, meaning that the widget is placed inside one of the sidebars in the blog. The widget is an image widget, as you can see it being labeled id='Image1'.

The most important thing to note is that the widget code starts with the <b:widget> tag and closed with the </b:widget> tag. This is the single most important thing you have to know when copying/pasting later on.Remember also that the widget is placed after the <b:section> tag and closed with the </b:section> tag.

Here's another example. The widget is a Linklist widget. You don't have to know the codes inside the widget tag because you won't have to change anything in there.


Pero vamos al caso concreto

Justo después de <head>

Entre </head> y <body>

Pulsa para CONTINUAR LEYENDO...

DIFUNDIENDO EL BLOG III: Aprovechando los META TAGS para utilizar el posicionamiento AUTOMÁTICO en buscadores.

Una vez instalados los META TAGS en el código, lo más práctico es acudir a un sitio como http://www.submitexpress.com/ y proceder a lanzar nuestra página contra un montón de buscadores y metabuscadores de un sólo click.

Pulsa para CONTINUAR LEYENDO...

DIFUNDIENDO EL BLOG II: Generando META TAGS para mejorar el posicionamiento en buscadores.

Al final, parece ser que los gurús del asunto están de acuerdo en que incluir unas buenas META TAGS en el código de la página, resulta de mucha ayuda para ser mejor tratado por los buscadores.
Para ello podemos acudir a un generador de TAGS como http://www.submitexpress.com/metatags.html


Después de introducir cierta información sobre la página (título, descripción, terminos, etc...) nos devuelve un párrafo de código:


<TITLE>ZAPATERO Presidente, y nos van dando por PONIENTE</TITLE>
<META CONTENT='zapatero presidente, poniente, mariano rajoy, gallardón' NAME='Keywords'> </META>
<META CONTENT='Defendiendo la integridad del orto de los españoles y la libertad de expresión mediante la sátira política' NAME='Description'> </META>
<META CONTENT='lardt.lardt@gmail.com' NAME='Author'> </META>


Correción: El sistema anteriormente citado genera las TAGS en HTML clásico y nuestro Blogger requiere XHTML. Por ello es mejor visitar http://www.scrubtheweb.com/cgi-bin/webtools/meta-create.cgi que nos generará un código como este:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WikiPROGRE: Enciclopedia del Pensamiento ÚNICO</title>
<meta http-equiv="Content-Language" content="es" />
<meta name="description" content="Enciclopedia del Pensamiento ÚNICO, Políticamente Correcto y de la Alianza de las Civilizaciones." />
<meta name="keywords" content="Enciclopedia del Pensamiento ÚNICO, Políticamente Correcto y de la Alianza de las Civilizaciones." />
<!-- Meta Tags Created With: STW Meta Tag Builder http://www.scrubtheweb.com/abs/ -->


Este código se colocará justo debajo de la etiqueta <head>

Pulsa para CONTINUAR LEYENDO...

DIFUNDIENDO EL BLOG I: Posicionamiento MANUAL en buscadores y similares.

Ya tenemos un blog más o menos curiosito. Ahora le toca a la DIFUSIÓN. Hay que menearlo para poder recibir visitas. Es en realidad lo más dificil: conseguir un flujo constante de visitas. Para ello, debes darte a conocer en la Web.

Lo primero:

Darlo de alta en buscadores: GOOGLE

Después de pulsar el enlace tienes que introducir la URL y unos terminos descriptivos para GOOGLE "añada con éxito" tu site.
Podríamos hacer esto a mano para todos los buscadores pero afortunadamente hay páginas que facilitan la tarea en grado diverso.

Prueba http://bblmedia.com/addurl.html para ir añadiendo con mayor comodidad.

YAHOO permite añadir no sólo la URL de tu site sino además la del FEED corresondiente. Además requiere verificación, es decir debes añadir:

<META name="y_key" content="e98786c59bd4c42f">

entre las lineas
<HEAD>
<BODY>

Pulsa para CONTINUAR LEYENDO...

CLICKTALE

En breve...

Pulsa para CONTINUAR LEYENDO...

Mi Site va lento ¿Qué puedo hacer doctor?

Pues lo primero debe ser comprobar cuan lento va y cómo. Para ello estan las PINGDOM TOOLS

Previo registro, uno puede acceder al Test de página completa que carga la página HTML incluyendo todos los objetos (imagenes, CSS, JavaScripts, RSS, Flash y frames/iframes). Simula cómo se carga la página en el browser. Sólo hay que teclear el URL de la pagina que queramos analizar.

Los tiempos de carga se muestran visualmente de forma muy atractiva y clara. Con su jerarquía y enlaces incluso para ficheros CSS.
Devuelve estadisticas generales (nº de objetos, tiempo de total de carga y tamaño agregado de los objetos)



Ojo: no carga objetos incluidos en JavaScripts.

Pulsa para CONTINUAR LEYENDO...

Configurando APLICACIONES GOOGLE II: Analytics

Lo primero es añadir nuestro site en Analytics:

          

Luego tecleamos la URL de nuestro sitio SIN EL HTTP: delante

 

Eso nos faciliatará el código a añadir. Las lineas las añadiremos justo encima del cierre de </body>

Copie el bloque de código en todas las páginas web de las que desee realizar un seguimiento, justo antes de la etiqueta </body>.

Después de copiarlo conviene solicitarle a ANALYTICS que compruebe el código de seguimiento para que empiece a recopilar datos.

Pulsa para CONTINUAR LEYENDO...

Embelleciendo mi PLANTILLA: Formato de Fecha del POST en modo gráfico

En Mi iPhone 2G quería que el formato de fecha fuera identico al icono del calendario del iPhone.

Lo primero es crear el fichero grafico que va a servir como fondo a nuestro texto de fecha y subirlo via PICASA, por ejemplo. El mío tiene un tamaño de 60x60 pixels.

Después debemos hacer cambiar el formato de fecha de cabecera del Post en CONFIGURACION - FORMATO - Formato de cabecera de la fecha. Elegimos un formato que no tenga comas, ni separadores, por ejemplo el penúltimo: "05 agosto 2008".

Lo siguiente que debemos hacer es ir a edición de html, expandimos artilugios y justo antes de la etiqueta </head> pegamos el siguiente script:

<script>
function remplaza_fecha(d){
var da = d.split(' ');
dia = "<strong class='fecha_dia'>"+da[0]+"</strong>";
mes = "<strong class='fecha_mes'>"+da[1].slice(0,3)+"</strong>";
anio = "<strong class='fecha_anio'>"+da[2]+"</strong>";
document.write(dia+mes+anio);
}
</script>




Este código lo que hace es partir el formato de fecha en 3 trozos de forma que luego pueda aplicarse un estilo CSS a cada uno de ellos. Lo normal sería utilizar <div class> pero resulta que las etiquetas 'div' no pueden ir dentro del 'head' porque Blogger ha cambiado la versión de HTML y responde "que el HTML de la plantilla es incorrecto".
Por eso se usa <strong class>

En la última linea "dia+mes+anio" se puede alterar el orden en función de cómo quieras presentar la fecha, incluso cómo yo sólo voy a mostrar MES y DIA la linea queda así:

document.write(mes+dia);


El siguiente paso será localizar la etiqueta <data:post.dateHeader/> y la sustituimos por el siguiente código:


<div id='fecha'>
<script>remplaza_fecha('<data:post.dateHeader/>');</script>
</div>


por último buscamos la etiqueta ]]></b:skin>
y justo encima pegamos lo siguiente:

/* Calendario-Fecha
-------------------- */
#fecha {
display: block;
float:left;
margin: 0 13px 0 0;
padding: 0 13px 8px 10px;
color: #333;
background: transparent url("http://lh3.ggpht.com/_vTi-WZoeE2M/ST2K_BRJ28I/AAAAAAAAAgw/ahPG-1fhSMo/s144/calendar.jpg") no-repeat;
border: 0;
width:65px;
height:50px;
}

.fecha_mes {
font-size: 13px;
margin: 4px 0 0 13px;
color:white;
display: block;
}

.fecha_dia {
margin: 7px 0 0 14px;
display: block;
font-size: 14px;
color:#448088;
}


Tendréis que cambiar la url de donde tengais alojada vuestra imágen y modificar los valores del margin, centrado, etc.. para que queden bien según vuestro grafico de fondo.

De hecho yo he realizado algunas modificaciones y eliminado el párrafo correspondiente al AÑO que no uso, por lo que los parrafos de estilo quedan así:

.fecha_mes {
font-family: arial,helvetica;
text-transform: lowercase;
text-align: center;
font-size: 14px;
margin: 3px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color:white;
display: block;
}

.fecha_dia {
font-family: arial,helvetica;
text-align: center;
font-size: 34px;
font-size: 135%
margin: 10px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: block;
color:#000000;
}

Pulsa para CONTINUAR LEYENDO...

Editando la plantilla. Anchos de columna.

Una buena practica cuando vmos a cambiar de plantilla es tener una idea lo más exacta posible del tamaño en puntos de los distintos componentes de nuestro Layout (perdón por el inglés). Lo más normal es que tengamos una columna principal de mayor anchura donde se colocan los posts y al menos una columna lateral para colocar Widgets.
Como a veces nos toca cambiar el ancho de las columnas, una noción básica:

El componente OUTER-WRAPPER (ancho total) = MAIN-WRAPPER (ancho de columna principal) + SIDEBAR WRAPPER (ancho columna lateral).

Todos estos componentes tendrán definida la propiedad WIDTH (ANCHURA) generalmente medida en en puntos-pixels (px), que nos permitirá hacer un calculo al menos aproximado.

Pulsa para CONTINUAR LEYENDO...

WIDGETS: FEEDJIT

http://feedjit.com te llevará a la página de FEEDJIT.

FEEDJIT tiene unos Widgets muy interesantes desde el punto de vista de Geolocalización y seguimiento de tráfico entrante en tiempo real.

Pulsa para CONTINUAR LEYENDO...

Opciones de Configuración de FEEDBURNER: Pestaña Optimizar

Procedemos a revisar opciones básicas de configuración de FEEDBURNER.

La opción FEEDFLARE requiere añadir cierto código a la plantilla:
(Edición de HTML, recordamos guardar copia de la plantilla, opción expandir WIDGETS, etc...)


Buscar la linea

<div class='post-footer'>

y añadir el código siguiente:

<script expr:src='"http://feeds.feedburner.com/~s/TuBloggerEnDosPatadas?i=" + data:post.url' type="text/javascript" charset="utf-8"></script>

Y ya esta!

Pulsa para CONTINUAR LEYENDO...

WIDGETS EXTERNOS: SiteMeter

En http://www.sitemeter.com/ podremos empezar el proceso de inscribir nuestra Web para las estadisticas que sirve SiteMeter. Como siempre, deberemos primero registrarnos con usuario y contraseña.

Una vez capturados los datos de la pagina web que queremos registrar, te envian a tu cuenta de correo, el usuario y contraseña  

Pulsa para CONTINUAR LEYENDO...

Formulario de Comentarios embebido debajo del Post sin salir de la página

En BLOGGER EN DRAFT Diseño - Comentarios

En español:
Ubicación del formulario de comentarios

Página completa
Ventana emergente
Entrada incrustada a continuación

Una vez elegida la opción, dependiendo de la plantilla que tengas (plantilla NO blogger) es posible que no funcione. En tal caso:
Hay que añadir el siguiente codigo:

<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/> <b:else/> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </b:if>


Y hay que añadirlo debajo de la linea

<p class='comment-footer'>

Pero ¡MUCHO OJO!
En la SEGUNDA OCURRENCIA de la linea, NO en la primera que deberás dejar como está.
Es decir, la que está encima de <div id="'backlinks-container'">

Pulsa para CONTINUAR LEYENDO...

Primera Aventura: La plantilla

La plantilla es la imagen de tu blog. Lo divertido es tener un blog diferente, un poco complejo y lleno de Widgets. Por eso vamos a dar un salto en el vacío y vamos a buscar y elegir una plantilla con más posibilidades. El momento oportuno es ahora, cuando sólo tienes un post y tu blog prácticamente por configurar. Después, aunque puede hacerse, es mucho más complicado.

http://btemplates.com/

http://www.oswd.org/designs/favorites/ 

http://blogger-templates.blogspot.com/

http://blogandweb.com/templates-blogger/

http://www.blogcrowds.com/resources/blogger_template.php

http://www.finalsense.com/services/blog_templates/

http://www.bloggertemplates.org/

http://www.template-godown.com/search/label/gallery

http://www.geckoandfly.com/blogspot-templates/blogger-templates/

http://www.pannasmontata-templates.net


Hay muchos sitios donde buscar una plantilla con un poco de picante pero yo recomiendo:
http://www.ourblogtemplates.com/

Tienes ciento y pico plantillas para elegir, bien documentadas (en inglés) pero algo es algo.

Cuando tengas elegida la que te gusta, lánzate, descarga el archivo (*.XML) guardalo en un directorio de tu disco duro con un añadiendole la fecha delante, "20081101nombredelaplantilla" u "original" o algo parecido para que en caso de necesidad puedas con facilidad recurrir a ella como COPIA DE SEGURIDAD.

Una vez tengas tu plantilla en el disco duro: ADELANTE!

DISEÑO-EDICION DE HTML- EXAMINAR (seleccionas el archivo) y SUBIR.

No hemos hecho copia de seguridad de la plantilla original ya que no hemos hecho ninguna modificación y siempre podremos recuperarla de BLOGGER.

puede que te salga algún mensaje "Vamos a suprimir el artilugio ("eso es un WIDGET") xxxx". Cómo no hemos configurado nada, AVANTI. Confirmar y guardar.

Pulsa para CONTINUAR LEYENDO...

Crear el BLOG

• URL conviene que contenga terminos del "titulo". Este blog se llama 'Tu BLOGGER en DOS PATADAS' y su URL://tu-blogger-en2patadas.blogspot.com/



• Elige cualquiera de las plantillas por defecto, la vamos a cambiar pronto. Quiero decir que puedes cambiarla sin mucho problema en cualquier momento.



• Empieza a Publicar: publica tu primer post, (es sólo para ver cómo queda), con su título, 4 ó 5 lineas de texto, un par de "etiquetas" (si son palabras que existen en el texto mejor, puedes arrastralas) y le creas un comentario de prueba.

Pulsa para CONTINUAR LEYENDO...

Cuestiones Previas

• Cuenta de Correo en GMAIL, con esta cuenta gestionaremos todo lo relacionado con nuestro blog y abriremos cuentas de acceso a las demás aplicaciones GOOGLE, como por ejemplo PICASA, donde conviene que también te abrás una cuenta.
• Dentro de las aplicaciones GOOGLE, el Bloc de Notas o NoteBook puede ser muy práctico, sobre todo a la hora de anotar cosas que has visto de otros blogs, por ejemplo.
  
• Instalar varios browsers: FIREFOX para trabajar el blog, IE, Chrome y Safari (con el que se verá más bonito)
• Herramienta para alojar enlaces, por ejemplo: http://43marks.com/
• Un editor para los ficheros XML. Scite es bastante práctico.
• En tu PC, debes crear una estructura de directorios para guardar todo lo relacionado con el blogging. Al menos, un directorio separado.
  

Pulsa para CONTINUAR LEYENDO...