Como funciona Google +1

Para entender el funcionamiento de Google +1 se ha preparado un video el cual explica al detalle la forma en que funciona y se integra con nuestro web:

Como Implementar el botón Google +1

Para implementar el Google +1 es nuestra web primero hay que ir Add +1 to your pages to help your site stand out en donde podremos seleccionar el tamaño del botón a utilizar el idioma del botón y algunas opciones avanzadas.

Luego de ello debemos copiar un primer bloque de código en el header de nuestro HTML (Ubicar el código justo antes del tag </head>):

1
2
3

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
  {lang: 'es'}
</script>

Luego debes colocar el siguiente código en el lugar donde deseas se muestre el botón Google +1.

1

<g:plusone size="medium"></g:plusone>

Listo, esto es todo y ya tendremos el botón habilitado mediante el cual nuestros usuarios podrán compartir de manera sencilla el contenido de nuestra web con todos sus contactos.

Tweet

El theme es muy completo y tiene opciones para configurar desde el panel de administración como tu cuenta de twitter, el URL de tu feed, tu código de Google Analytics, además tiene la opción para incluir tu código de Google Adsense y de esa forma monetizar tu blog.

Mas Información

• Demo : Kubrick on Crack
• Download : Kubrick on Crack

Tweet

Pero la mayoría de usuarios les gustaba la interfaz anterior la cual además de ser mas sencilla de utilizar cargaba mucho más rápido y al carecer de efectos. Si quieres seguir utilizando la interfaz anterior puedes agregar un parámetro adicional &sout=1.

Entonces si estamos buscando una imagen, tendríamos el URL del tipo:

1

http://www.google.com/images?source=imghp&q=iphone+4

Entonces para ver la interfaz, le agregamos el parámetro &sout=1.

1

http://www.google.com/images?source=imghp&q=iphone+4&sout=1

Asi que ahora podrán seguir utilizando la versión antigua de Google Images y con una pequeña línea.

Tweet

Características
Entre las características mas interesantes de Safari podemos destacar:

• Es rápido y consume pocos recursos.
• Es seguro, tiene protección contra phishing y malware, tiene bloqueo de pop-ups.
• Soporta los nuevos estándares: HTML5, CSS Animation, CSS Effects, CSS3 Web Fonts.
• Tiene el buscador de Google integrado.
• Tiene un lector de RSS incluido para facilita la lectura de feeds.
• Tiene un gestor de descargas de archivos.
• Opciones para desarrolladores: Web Inspector, JavaScript Debugger, JavaScript Profiler, etc.

Además de todas estas características que lo hacen una excelente alternativa a Internet Explorer pues ofrece seguridad, rapidez, además es mucho mas sencillo de utilizar con una interfaz muy limpia y es gratuito.

Descargar

Descargar Safari 5

Tweet

Agregando la Traducción Automática
El servicio Google Traductor ofrece una herramienta para hacer la traducción automática en Make your website instantly available in other languages. Para ello lo que tenemos que hacer es primero seleccionar el idioma original de nuestro web y luego de ello se generará un código Javascript que tenemos que colocar en nuestro web.

Ahora si deseamos podemos agregarle un mensaje personalizado antes de mostrar la opción para traducir podemos agregar el texto dentro del div, con lo que tendríamos el siguiente código:

1
2
3
4
5
6
7
8
9

<div id="google_translate_element">Traductor Automático</div>
<script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'es'
  }, 'google_translate_element');
}
</script>
<script src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Con lo cual obtenemos la opción para traducir rápidamente nuestro web, además de ello se muestra en la parte superior una barra con la opción para traducir el web. Sencillo y rápido es la implementación y nos ayudará a brindar acceso a mas personas al contenido de nuestro web. A partir de ahora el idioma no será un impedimento para que los usuarios puedan entrar a tu web.

Tweet

Creando enlaces básicos
Los enlaces se crean utilizando el tag <a> en donde debemos colocar a donde queremos enlazar y el texto que servirá de enlace. Por ejemplo si deseamos enlazar al buscador Google lo hacemos con el siguiente código:

1

<a href="http://www.google.com">Google</a>

La ruta a la que deseamos enlazar puede ser de dos tipos: absoluta y relativa.

• Absoluta: es decir la ruta completa, sirve para cuando deseamos enlazar sitios externos al nuestro, por ejemplo: http://www.google.com
• Relativa: es la ruta relativa a la página que estamos visitando, se utiliza cuando deseamos enlazar páginas de nuestro mismo dominio, por ejemplo: contacto.php

Respecto a las rutas relativas, vemos que sucede si la página esta en una carpeta diferente a la de nuestro archivo actual:

• folder/pagina.html para cuando la pagina se encuentra en una carpeta llamada folder.
• ../pagina.html para cuando la pagina se encuentra en una carpeta superior.
• /pagina.html cuando el destino se encuentra en el root de nuestro servidor.

Enlazando desde Imagenes
Si deseamos que el enlace sea una imagen en lugar de un texto, debemos colocar el tag <img> con las propiedades de la imagen de la siguiente forma:

1

<a href="contact.php"><img src="btcontact.gif" width="120" height="24" /><a>

Agregando la propiedad target
La propiedad target sirve para indicar donde deseamos abrir el enlace, para ello tenemos las siguiente posibilidades:

• _blank para abrir en enlace en una ventana nueva.
• _parent si usas frames para abrir en el frame padre.
• _top para abrir en el frame principal de la página.
• _self abrir en enlace en la misma ventana.

Entonces si deseamos poner enlaces para que abran en ventana nueva podemos colocarlo de la forma:

1

<a href="http://www.google.com" target="_blank">Google</a>

Como pueden ver es sencillo la creación de enlaces y con ello ayudarán a sus visitantes a desplazarse cómodamente en el contenido de su página web.

Tweet

La mayoría de buscadores tienen amplia documentación para ayudarnos a mejorar la ubicación de nuestros sitios web en los resultados de búsqueda. Recientemente Google ha puesto a disposición una Guía SEO para principiantes. Veamos que puntos recomiendan.

Títulos de páginas únicos y concisos
Los títulos de tus páginas deben ser únicos, cortos y concisos indicando el contenido del mismo, de esta forma los usuarios reconocerás fácilmente la información a la que accederán. Un error común es colocar los títulos de las páginas con lo cual aparecerá “Untitled” o “New Page 1“.

1

<title>2WebFacil</title>

Usar el metatag description
El metatag description es utilizado para indicarle a los buscadores un resumen del contenido de la página que se esta visualizando, este contenido es utilizado como texto descriptivo en los resultados de búsqueda. Si no se encuentra el description el buscador generará automáticamente un pequeño resumen con las primeros párrafos que se encuentran en nuestro html.

1

<meta name="description" content="Tips, tutoriales para personalizar tu web" />

Mejorar las estructura de los URLs
Es recomendables que las URLs contengan las palabras clave de las páginas parte del título, esto hará que sea mas sencillo recordarlas y puede indicar la estructura de nuestros documentos. Por ejemplo es mejor crear una página llamada contacto.html para nuestra página de contáctenos que una llamada file3.html. Si estas utilizando algún lenguaje de servidor es recomendable no utilizar los IDs y utilizar los keywords, por ejemplos:

1

http://tuweb.com/products.php?idcat=5&idprod=116

Es poco probable que el usuario pueda identificar a que producto accederá en lugar de ello se puede cambiar la estructura del html de la siguiente forma:

1

http://tuweb.com/products/fruits/apples/

Es obvio que en el segundo enlace estas entrando a la sección productos, estas visualizando las manzanas de la categoría frutas.

Crea tu sitio fácil de navegar
Organiza tus archivos de forma lógica de manera que el usuario pueda detectar a que información esta accediendo, por ejemplo los productos puedes colocarlos dentro de una carpeta llamada productos y puedes crear una carpeta por cada producto que tienes.

Ofrece contenido y servicios de calidad
Si ofreces un sitio con contenido de calidad hará que los visitantes regresen nuevamente, esto ayuda a fidelizar a los usuarios, además si un usuario ha encontrado útil tu web de seguro lo recomendará y así conseguirás mas visitas. Para ello puedes escribir contenido fácil de leer, crea contenido único, ofrece productos y servicios exclusivos.

Escribe correctamente los enlaces
Los enlaces son utilizados para redireccionar a otras páginas, pero estos enlaces deben contener explicitamente el contenido al cual se accederá. Por ejemplo si tienes un enlace al listado de productos es recomendable colocar ‘Listado de Productos‘ en lugar de ‘Click aqui‘.

1

...puede visitar nuestro <a href="productos.html">Listado de Productos</a>

Utiliza los tags de texto adecuadamente
Los tags para formatear texto (<h1>, <h2> … <h6>) aparte de dar el tamaño de los textos indica la estructura del contenido, un tag <h1> es como el titulo del texto, <h2> como si fuera el subtitulo y así sucesivamente. Esto ayudará a los buscadores a tener la estructura adecuada del contenido de nuestra página.

Optimiza el contenido de las imágenes
Si utilizas imágenes es recomendable agregarle la propiedad alt en donde se coloca el contenido de la imagen, por ejemplo si estas mostrando una imagen con la fachada de una casa el código que debes poner sería:

1

<img src="photo.jpg" width="200" alt="Fachada Edificio San Andres" />

De esta forma los buscadores tendrán una referencia del contenido de la imagen, y en los buscadores de imagen pueden encontrarlas e incluso recibir visitas por este método.

Utiliza el archivo robots.txt
Este archivo le indica a los buscadores que contenidos deben o no deben indexar, de esta forma podemos restringir que se indexen los contenidos de la zona de usuarios registrados por ejemplo.

Utilizar la propiedad rel=”nofollow” en los enlaces
Esta propiedad le indica a los buscadores que no rastreen o indexen el enlace, esto es útil para prevenir que se rastreen paginas con contenido dudoso, por ejemplo es lo comentarios de los blogs los enlaces tiene la propiedad rel=”nofollow” para indicar que estos links no forman parte de contenido del blog y que no deben seguirse. también es útil para prevenir el spam.

1

<a href="http://webspam.com" rel="nofollow">Comentario Spam</a>

Utilizar Google Webmaster Tools
Google Webmaster Tools son un conjunto de herramientas gratuitas para facilitar el seguimiento de las páginas indexadas así como de errores y sugerencias para nuestras páginas.

En resumen son tips sencillos y fáciles de implementar los cuales nos ayudarán a posicionarnos adecuadamente en los buscadores y de esta forma conseguir más visitas.

Tweet

Como utilizar Google Analytics
Lo primero es registrarte de forma gratuita para obtener una cuenta, el siguiente paso es registrar el web para el que deseas hacer el seguimiento, ello lo hacemos accediendo a la opción Add Website Profile la cual nos mostrará una pantalla para ingresar la dirección de nuestro web.

Luego de ello nos llevará a otra pantalla donde se nos muestra un código, el cual es necesario copiar y pegar en todas las paginas que deseamos seguir, este código hay que colocarlo justo antes del tag </html> de nuestras paginas.

1
2
3
4
5
6
7
8
9
10

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-XXXXXX-XX");
pageTracker._trackPageview();
} catch(err) {}
</script>

Donde UA-XXXXXX-XX es tu código personal de Google Analytics. Listo, el siguiente paso es esperar pues a partir del momento que colocas el código se irán almacenando los datos de las visitas los cuales podrás visualizar en cualquier momento.

Tweet

Un blog puede ser creado para publicar historias personales, artículos de tecnología, opinión, etc. El autor es el que decido sobre que desea escribir.

Por que tener un Blog?
Un blog es una ventana para mostrar o compartir acerca del tema que mas nos agrade. Se puede tener un blog para escribir acerca del tipo de música que nos gusta, del lugar donde nacimos, del deporte de nuestros amores o sobre la tecnología, en fin podremos tener un blog sobre el tema que mas nos agrade y deseamos compartir con los demás.

La ventaja que tiene un blog es que los lectores pueden enviar sus comentarios en el articulo que mas les agrade. Entonces un blog es un medio de comunicación social por que el autor comparte sus conocimientos y los lectores pueden agregar sus comentarios.

También hay la posibilidad de escribir un blog con el fin de obtener ingresos, esto se logra colocando publicidad en los blogs, de este punto comentaremos en un próximo articulo.

Como crear un Blog?
Hay cientos de lugares gratuitos donde se pueden crear los blogs o también para los que tienen mayores conocimientos pueden instalar y alojar sus blogs en un hosting particular.

Entre los sistemas gratuitos para blogs, los mas utilizados y confiables son:

WordPress

Es un sistema gratuito en el cual te registras y puedes obtener una dirección web, entre las cualidades que destacan tenemos:

• URL de la forma; http://tublog.wordpress.com
• Facilidad para seleccionar diseños predefinidos.
• Soporte multilenguaje incluido el español.
• Soporte para Widgets
• Estadísticas de visitas y accesos.
• Filtro Anti-Spam.

Blogger

Otro sistema bastante conocido y con muchos seguidores el cual es propiedad de Google, te permite:

• URL de la forma: http://tublog.blogspot.com
• Puedes escoger diseños predefinidos o crear los tuyos.
• Soporte para varios idiomas incluyendo el español.
• Soporte para scripts personalizados.

Ambos tienen muchos seguidos y amplia información para personalizar para de esta forma lograr un blog con un aspecto propio y de buen acabado.

Tweet