Bitácora Tuning: noviembre 2013

jueves, 28 de noviembre de 2013

Cómo añadir un favicon a tu blog

Antes que nada, cabe decir que un FAVICON, icono de página o favorite icon, es un pequeño icono que se utiliza para que se muestre al lado del nombre de la página web, en caso de que el usuario la agregue a sus marcadores o favoritos

Actualmente los navegadores también muestran el favicon en la barra de direcciones y junto al nombre de la pestaña de la página web.

Este icono, suele tener un tamaño de 16x16 ó 32x32 píxeles.

Es una de las formas de personalización más usadas en una página web o blog, que permite identificarla más fácilmente en una lista de marcadores o favoritos o en el historial de páginas visitadas.

A la hora de crear un favicon, podemos utilizar programas de diseño gráfico como Gimp, Photoshop o Paint, pero también hay páginas de Internet que nos permiten hacerlo subiendo una imagen que convertirá en icono. Lógicamente, la imagen que queramos, ha de ser cuadrada para mantener la relación de aspecto y que por tanto no quede deformada.

Alguna de estas páginas para crear iconos son:

También podemos utilizar programas específicos como:

Una vez tenemos el icono, iremos al panel de control de nuestra bitácora, y en el apartado "Diseño", arriba a la izquierda, encontraremos la posibilidad de cambiar el "Favicon":

Bastará con subir el icono que tenemos en nuestro ordenador y guardar los cambios. Ahora, en nuestro historial, marcadores, barra de direcciones o pestaña del navegador, aparecerá el icono junto al nombre de nuestra página.

Blogger también permite subir imágenes cuadradas directamente desde aquí, que convertirá en icono.

miércoles, 20 de noviembre de 2013

Configura tu dominio gratuito .tk en blogger

Registrar un dominio gratuito y configurarlo en Blogger es muy sencillo y lleva poco tiempo.
Primero accederemos a la página del proveedor de este tipo de dominios en el siguiente enlace:

Dominio Gratuito .TK

Ahora escribiremos el dominio que queremos registrar y haremos clic en "GO".

En el siguiente paso hemos de seleccionar "Use DNS", escribir la dirección IP 216.239.32.21 en ambas casillas de "Host name" y elegiremos también el tiempo de duración del dominio (hasta un año, pero con renovación ilimitada si estamos registrados).

Ahora nos pedirá que nos registremos, bien por medio de "Facebook", "Gmail", "Hotmail" u otros servicios y una vez nos autentificamos, accedemos a la ventana principal de "My Dot TK". Seguidamente haremos clic en "Domain Panel".

Ahora vamos a Blogger y en panel de control de nuestro blog, en el apartado "Configuración", "Lo básico", podremos ver en "Dirección del blog" la posibilidad de añadir un dominio personalizado.

Accedemos a ello haciendo clic en "Añadir un dominio personalizado".

Escribimos la dirección del dominio que estamos registrando en My Dot TK y hacemos clic en "Guardar". Nos saldrá un mensaje de error que contiene los datos que necesitamos para acabar de configurar nuestro dominio TK.

Ahora regresamos a la página de configuración de My Dot TK y hemos de añadir dos registros tipo "CNAME":

El primero de ellos con el "Host name" de nuestro dominio que estamos registrando (sin olvidar las www.) y la IP ghs.google.com.
Y el segundo ha de contener en el campo "Host name" lo que aparece en la primera columna de la segunda fila, seguido de .tudominioregistrado.tk y en la IP lo que aparece en la segunda columna de la segunda fila.

Quedaría todo así:

A continuación le damos a "Save Changes" y esperamos unos cinco minutos para que los cambios surtan efecto.
De regreso donde nos habíamos quedado en nuestro panel de control de Blogger, recargamos la página, volvemos a introducir la dirección del dominio que acabamos de registrar, le damos clic a "Guardar" y ya no aparecerá el error de antes.
Ya tendremos nuestro dominio TK configurado.

lunes, 11 de noviembre de 2013

Cómo hacer que los datos introducidos en un formulario de contacto nos lleguen al correo electrónico

Si hemos creado un formulario de contacto o una encuesta, etc. y queremos que estos datos nos lleguen al correo, hemos de ir a la hoja de destino de respuestas del formulario desde Google Drive.
Una vez abierto, iremos al menú "Herramientas" y a continuación haremos clic en el "Editor de secuencias de comandos".

Seleccionaremos "Proyecto en blanco":

Ahora pegaremos dentro de este recuadro cualquiera de los siguientes scripts, dependiendo del número de campos que tenga nuestro formulario:

Únicamente escribiremos nuestra dirección de correo en la que queremos recibir los datos introducidos en el formulario, teniendo en cuenta la anotación que dice que el segundo campo del formulario ha de corresponder al correo electrónico de la persona que rellena el formulario. Podemos poner más de una dirección de correo, separadas por ", " (correo1+coma+espacio+correo2+coma+espacio...)
Para un formulario de 6 campos:

function ContactePorCorreo(e) {

// Este script envía el contenido de un formulario a un destinatario de correo

// El formulario ha de tener los campos siguientes en este mismo orden: nombre y apellidos; correo electrónico; mensaje; dirección ; población ; teléfono

// Debes cambiar la variable recipient poniendo tu dirección de correo entre las comillas

try {

var recipient = "tu correo-e";

var timestamp = e.values[0];

var nombre = e.values[1];

var correoe = e.values[2];

var mensaje = e.values[3];

var direccion = e.values[4];

var poblacion = e.values[5];

var telefono = e.values[6];

var body = nombre+' <'+correoe+'> Este es un mensaje enviado desde la página web: '+mensaje;

var bodyHTML1 = ''+nombre+' Este es un mensaje enviado desde la página web: ';

var bodyHTML2 = '<a href="mailto:'+correoe+'">'+correoe+'</a>';

var bodyHTML3 = '<blockquote>'+mensaje+'</blockquote>';

var bodyHTML4 = '<blockquote>'+direccion+'</blockquote>';

var bodyHTML5 = '<blockquote>'+poblacion+'</blockquote>';

var bodyHTML6 = '<blockquote>'+telefono+'</blockquote>';

var advancedArgs = {htmlBody: bodyHTML1+bodyHTML2+bodyHTML3+bodyHTML4+bodyHTML5+bodyHTML6, replyTo:correoe};

MailApp.sendEmail(recipient, " Formulario de contacto ", body, advancedArgs);

} catch(e){

MailApp.sendEmail(recipient, "Error - Formulario de contacto", e.message);

}

Llega el correo así:
NOMBRE
Este es un mensaje enviado desde la página web:

CORREO

MENSAJE

DIRECCION

POBLACION

TELEFONO

Para un formulario de 8 campos:

function ContactePorCorreo(e) {

// Este script envía el contenido de un formulario a un destinatario de correo

// El formulario ha de tener los campos siguientes en este mismo orden: nombre; correo electrónico; mensaje; teléfono; calle y número; población; código postal; país

// Debes escribir tu dirección de correo entre las comillas de var recipient

try {

var recipient = "tu correo-e";

var timestamp = e.values[0];

var nombre = e.values[1];

var correoe = e.values[2];

var mensaje = e.values[3];

var telefono = e.values[4];

var calleynumero = e.values[5];

var poblacion = e.values[6];

var codigopostal = e.values[7];

var pais = e.values[8];

var body = nombre+' <'+correoe+'> Este es un mensaje enviado desde la página web: '+mensaje;

var bodyHTML1 = 'Este es un mensaje enviado desde la página web: '+nombre+'';

var bodyHTML2 = '<a href="mailto:'+correoe+'">'+correoe+'</a>';

var bodyHTML3 = '<blockquote>'+mensaje+'</blockquote>';

var bodyHTML4 = '<blockquote>'+telefono+'</blockquote>';

var bodyHTML5 = '<blockquote>'+calleynumero+'</blockquote>';

var bodyHTML6 = '<blockquote>'+poblacion+'</blockquote>';

var bodyHTML7 = '<blockquote>'+codigopostal+'</blockquote>';

var bodyHTML8 = '<blockquote>'+pais+'</blockquote>';

var advancedArgs = {htmlBody: bodyHTML1+bodyHTML2+bodyHTML3+bodyHTML4+bodyHTML5+bodyHTML6+bodyHTML7+bodyHTML8, replyTo:correoe};

MailApp.sendEmail(recipient, " Envío del formulario de contacto ", body, advancedArgs);

} catch(e){

MailApp.sendEmail(recipient, "Error – Envío del formulario de contacto", e.message);

}

Para un formulario de 9 campos:

function contactePorCorreo(e) {

// Este script envía el contenido de un formulario a un destinatario de correo

// El formulario ha de tener nueve campos, el segundo de ellos destinado a la dirección de correo electronico

// Debes escribir tu dirección de correo entre las comillas de var recipient

try {

var recipient = "tu correo-e";

var timestamp = e.values[0];

var primero = e.values[1];

var correoe = e.values[2];

var tercero = e.values[3];

var cuarto = e.values[4];

var quinto = e.values[5];

var sexto = e.values[6];

var septimo = e.values[7];

var octavo = e.values[8];

var noveno = e.values[9];

var body =primero+' <'+correoe+'> Este es un mensaje enviado desde la página web: '+tercero;

var bodyHTML1 = 'Este es un mensaje enviado desde la página web: '+primero+'';

var bodyHTML2 = '<a href="mailto:'+correoe+'">'+correoe+'</a>';

var bodyHTML3 = '<blockquote>'+tercero+'</blockquote>';

var bodyHTML4 = '<blockquote>'+cuarto+'</blockquote>';

var bodyHTML5 = '<blockquote>'+quinto+'</blockquote>';

var bodyHTML6 = '<blockquote>'+sexto+'</blockquote>';

var bodyHTML7 = '<blockquote>'+septimo+'</blockquote>';

var bodyHTML8 = '<blockquote>'+octavo+'</blockquote>';

var bodyHTML9 = '<blockquote>'+noveno+'</blockquote>';

var advancedArgs = {htmlBody: bodyHTML1+bodyHTML2+bodyHTML3+bodyHTML4+bodyHTML5+bodyHTML6+bodyHTML7+bodyHTML8+bodyHTML9, replyTo:correoe};

MailApp.sendEmail(recipient, " Envío del formulario de contacto ", body, advancedArgs);

} catch(e){

MailApp.sendEmail(recipient, "Error – Envío del formulario de contacto", e.message);

}

Para un formulario de 10 campos:

function contactePorCorreo(e) {

// Este script envía el contenido de un formulario a un destinatario de correo

// El formulario ha de tener diez campos, el segundo de ellos destinado a la dirección de correo electronico

// Debes escribir tu dirección de correo entre las comillas de var recipient

try {

var recipient = "tu correo-e";

var timestamp = e.values[0];

var primero = e.values[1];

var correoe = e.values[2];

var tercero = e.values[3];

var cuarto = e.values[4];

var quinto = e.values[5];

var sexto = e.values[6];

var septimo = e.values[7];

var octavo = e.values[8];

var noveno = e.values[9];

var decimo = e.values[10];

var body =primero+' <'+correoe+'> Este es un mensaje enviado desde la página web: '+tercero;

var bodyHTML1 = 'Este es un mensaje enviado desde la página web: '+primero+'';

var bodyHTML2 = '<a href="mailto:'+correoe+'">'+correoe+'</a>';

var bodyHTML3 = '<blockquote>'+tercero+'</blockquote>';

var bodyHTML4 = '<blockquote>'+cuarto+'</blockquote>';

var bodyHTML5 = '<blockquote>'+quinto+'</blockquote>';

var bodyHTML6 = '<blockquote>'+sexto+'</blockquote>';

var bodyHTML7 = '<blockquote>'+septimo+'</blockquote>';

var bodyHTML8 = '<blockquote>'+octavo+'</blockquote>';

var bodyHTML9 = '<blockquote>'+noveno+'</blockquote>';

var bodyHTML10 = '<blockquote>'+decimo+'</blockquote>';

var advancedArgs = {htmlBody: bodyHTML1+bodyHTML2+bodyHTML3+bodyHTML4+bodyHTML5+bodyHTML6+bodyHTML7+bodyHTML8+bodyHTML9+bodyHTML10, replyTo:correoe};

MailApp.sendEmail(recipient, " Envío del formulario de contacto ", body, advancedArgs);

} catch(e){

MailApp.sendEmail(recipient, "Error – Envío del formulario de contacto", e.message);

}

Ahora guardamos el proyecto, por ejemplo con el nombre "Contacto por correo".

Ahora, desde el mismo editor de secuencias de comandos, haremos clic en "Recursos", y haremos clic en "Activadores del proyecto activo".

Seguidamente añadiremos un activador:

Seleccionaremos nuestro activador, seleccionaremos la opción "Al enviar el formulario", haremos clic en "Guardar" y autorizaremos a la aplicación.

A continuación, volveremos a la hoja de respuestas del formulario que tenemos abierta, iremos al menú "Herramientas" y seleccionaremos el "Administrador de secuencias de comandos".

Seleccionamos el comando creado (Contacte por correo) y hacemos clic en "Ejecutar":

Hemos de autorizar otra vez a la aplicación:

Procederemos de igual modo en la pantalla siguiente y ya está. Ahora nos queda probarlo rellenado el formulario desde nuestra página de contacto y enviar los datos.

Hemos de recibir en el correo los datos del contacto y además también quedarán registrados en la hoja de respuestas de Google Drive.

miércoles, 6 de noviembre de 2013

Cómo crear un formulario de contacto para tu blog

Si queremos disponer de un formulario de contacto o de cualquier tipo dentro de nuestra bitácora, hemos de ir a Google Drive. Desde allí, crearemos una carpeta que podemos llamar "Contacto", para así tener la información ordenada y fácilmente localizable.
A continuación accederemos dentro de la carpeta y ahí haremos clic en el botón "Crear" y elegiremos la opción "Formulario".

Ahora le asignaremos un título al formulario, por ejemplo "Formulario de contacto" y si lo deseamos, también una breve descripción.

A continuación, iremos añadiendo los campos que deseemos y el tipo (Texto, texto de párrafo, tipo test...) así como si deseamos que esa pregunta sea obligatoria o no (aunque los datos del formulario se envían de todos modos).
Una vez tenemos el formulario creado, iremos a "Seleccionar destino de las respuestas" y veremos que el programa nos marca ya un destino a una hoja de cálculo que se creará en la misma carpeta junto al formulario. Tenemos la opción de asignarle un destino diferente.

Después iremos al menú "Archivo" y haremos clic en "Enviar formulario". A continuación, haremos clic en "Incrustar".

Ahora elegiremos el ancho y el alto que queremos para nuestro formulario y copiaremos el texto HTML señalado.

Seguidamente iremos al panel de control de nuestra bitácora, crearemos una página nueva y al editarla, elegiremos modo HTML y pegaremos el texto que hemos copiado en el paso anterior y la publicaremos.

Para acceder a él, bastará poner un enlace a esta página o habilitar las pestañas como se ha descrito al final de esta otra entrada.
Para consultar los datos que nuestros lectores introduzcan en el formulario, visitaremos nuestro Google Drive e iremos al documento de respuestas del formulario creado.

En otra entrada ya veremos cómo hacer que los datos de este formulario nos lleguen directamente al correo electrónico.

sábado, 2 de noviembre de 2013

Cómo hacer que suene música al abrir tu bitácora

Si queremos que tan pronto se abra nuestra bitácora suene música de fondo, hemos de localizar la canción que deseemos en Youtube o subirla nosotros (ha de estar en formato de vídeo; podemos convertir una canción a vídeo con el Windows Live Movie Maker). Hemos de tener en cuenta que si la elegimos de una fuente ajena, si el propietario la elimina dejaremos de oírla en nuestra bitácora, y que determinado contenido ajeno que podamos publicar, también puede tener derechos de autor.
Localizamos el vídeo, que tendrá una dirección más o menos como esta:

http://www.youtube.com/watch?v=oqZwsPkYq_E

A continuación iremos al panel de control de nuestra bitácora, y en el apartado "Formato", añadiremos un nuevo gadget allá dónde lo queramos poner:

Si queremos que la música suene de incógnito, es decir sin que nadie pueda ver el origen de esta, pararla o bajarle el volumen, copiaremos este código en el gadget en modo HTML, cambiando únicamente la parte del texto en naranja que aparece en la dirección del vídeo subido y en los dos sitios que están igualmente marcados en naranja:

Si en cambio queremos que se pueda visualizar el vídeo, detenerlo o cambiarle el volumen, cambiaremos los valores entrecomillados de "height" (alto) y "width" (ancho) en los dos sitios que están marcados en verde por el ancho y alto que deseemos:

Este código lo podemos obtener directamente desde Youtube haciendo clic en "Compartir", seguidamente en "Insertar" y marcando la casilla "Utilizar código de inserción antiguo".
Igualmente hemos de cambiar los valores "height" (alto) y "width" (ancho) según deseemos y en los dos sitios en los que aparecen y el valor "version=3" por "autoplay=1" para la reproducción automática.