MicroPoll

MicroPoll es un servicio online gratuito que te permitirá crear encuestas rápidamente e integrarlo en tu página con pocas complicaciones. Además de ello ofrece una cuenta donde podemos administrar nuestras encuestas así como ver reportes por ubicación de los visitantes y por IPs de acceso.

Crear una Encuesta

Con WebPoll crear nuestras encuesta es muy sencillo con cuatro pasos que describimos a continuación:

1. Ingresa el titulo de tu encuesta.
2. Ingresa las alternativas a tu pregunta (separados por saltos de línea).
3. Escribe tu dirección de email que servirá para administrar tus encuestas.
4. Copia el código generado en tu página web.

En mi caso he creado una encuesta de ejemplo la cual pueden visualizar al inicio de este post, el código generado y que es necesario copiar es:

1
2
3
4
5
6
7
8
9
10

<script language="JavaScript" src="http://www.micropoll.com/akira/MicroPoll?id=266816">
</script><noscript><div><a href="http://www.micropoll.com/akira/mpview/986579-266816">
Click Here for Poll</a><a href="http://www.questionpro.com" title="online survey">
Online Survey</a><BR><a href="http://www.surveyanalytics.com/conjoint" 
title="Conjoint Analysis">Conjoint Analysis</a><BR> | <a href="http://www.micropoll.com"
title="Polls">Polls</a><BR> | <a href="http://www.contactpro.com"
title="email marketing">Email Marketing</a><BR><BR> | <a href="http://www.ideascale.com/"
title="crowdsourcing software">Crowdsourcing Software</a><BR>
<a href="http://www.micropoll.com/akira/MicroPoll?mode=html&id=266816">
View MicroPoll</A></div></noscript><!-- END MICROPOLL JAVASCRIPT CODE -->

Ahora, si somos un poco observadores, podemos notar la etiqueta noscript que se visualiza si el navegador no tiene activada el Javascript. Entonces podemos quitar este código sin problemas con lo cual el código para mostrar la encuesta quedaría de la forma:

1
2

<script language="JavaScript" src="http://www.micropoll.com/akira/MicroPoll?id=266816">
</script>

Listo ya tenemos nuestra encuesta la cual podemos publicar en nuestra página web, en nuestro blog de wordpress o incluso en Blogger.

Tweet

Activar Botones para Compartir

Si deseas activar los botones para compartir debes acceder a tu panel de Blogger, luego vas a editar el diseño de tu tema mediante: Diseño > Elementos de la página.

Seleccionas “Editar” las entradas del blog, en donde tendrás todas las opciones que se pueden habilitar para los posts, donde hay una opción llamada Mostrar botones para compartir.

Una vez habilitado esta opción se mostrarán 5 botones para compartir el contenido de blog:

• Enviar por correo electrónico
• Escribe un blog
• Compartir con Twitter
• Compartir con Facebook
• Compartir con Google Buzz

No aparecen los botones “Mostrar botones para compartir”?

Si estas utilizando un tema que no ha sido creado por Blogger, es probable que los botones no aparezcan, esto es por que estos temas no tienen incluido la etiqueta para mostrar estos botones. Para resolver este inconveniente debes editar el código de tu tema en Diseño > Edición de HTML.

En el código debes buscar el elemento includable que se encarga de mostrar el contenido del post:

1
2
3

<b:includable id='post' var='post'>
...
</b>

Dentro de este tag debes incluir el siguiente código, que es el encargado de mostrar los botones para compartir. Debes colocarlo en donde prefieras que se muestren los botones, generalmente luego del botón de edición.

1
2
3
4
5
6
7

<b:includable id='post' var='post'>
...
   <!-- share buttons -->
   <div class='post-share-buttons'>
      <b:include data='post' name='shareButtons'/>
   </div>
</b>

Pueden ver estos botones habilitados en nuestro blog de ejemplo: http://2webfacil.blogspot.com.

Mas Información

• Blogger Buzz: New Share Buttons
• Los botones para compartir de Blogger

Tweet

Esta nueva herramienta esta disponible cuando vas a editar el diseño o la plantilla de tu blog en un nueva opción llamada Template Designer. Accediendo a esta opción puedes seleccionar primero el estilo de plantilla, luego el fondo que deseas aplicar, en seguida el diseño o estructura del contenido y finalmente opciones adicionales como los colores y tipos de letra, imágenes hasta estilos adicionales.

Pueden ver un video explicativo creado por el equipo de Blogger mostrando el uso de esta nueva herramienta y donde pueden ver la sencillez del mismo.

 
Entre las características mas destacables de esta nueva herramienta tenemos:

• Ahora cuenta con 19 nuevos templates predefinidos.
• La distribución esta hecha con hojas de estilos para mantener la flexibilidad del editor.
• Se puede seleccionar y aplicar el fondo de tu preferencia: colores o imágenes.
• Todos los cambios se verán automáticamente reflejados para ver el resultado de los cambios.
• Ahora tienes controles sobre el tipo de letra y los colores empleados.
• Se puede personalizar los tamaños y colores de todos los elementos.
• Compatible con todos los navegadores, el resultado se ve correctamente el cualquier browser.
• Es sencillo de utilizar, tiene controles para cambiar los tamaños y colores de manera sencilla.
• Es gratuito y no necesitas acceder a otro servicio o utilizar un programa adicional.

Mas Información

• Blogger Template Designer
• Blogger Template Designer Now Available To Everyone
• Blogger Template Designer now available to everyone
• Express yourself with the Blogger Template Designer

Tweet

Dirección del Feed

Para realizar la versión móvil de nuestro blog utilizaremos el Feed, entonces es necesario reconocer la dirección del Feed de nuestro blog.

Para usuarios de Blogger, si el blog tiene la dirección:
http://2webfacil.blogspot.com/
La dirección del feed sería de la forma:
http://2webfacil.blogspot.com/feeds/posts/default

Para usuarios de WordPress, si la dirección del blog es:
http://2webfacil.com/
La dirección del feed sería de la forma:
http://2webfacil.com/feed/

Método I: Utilizando Google Reader

Una forma de crear una versión optimizada para dispositivos móviles es utilizar la versión móvil de Google Reader, para ello se puede utilizar la siguiente ruta, donde URL-FEED es el URL del feed de tu blog.

1

http://www.google.com/reader/m/view/feed/URL-FEED

Lo siguiente es detectar si el usuario esta accediendo desde un iPhone y redireccionarlo a la nueva versión. Para ello utilizaremos un pequeño Javascript, el cual debemos colocar en el código fuente de nuestro blog antes de la etiqueta </head>.

1
2
3
4
5
6

<script type="text/javascript">
var agent = navigator.userAgent.toLowerCase();
if (agent.indexOf('iphone')!=-1) {
	window.location = "http://www.google.com/reader/m/view/feed/URL-FEED"
}
</script>

Método II: Utilizando el Lector de Feeds de iPhone

Si el iPhone detecta que el contenido al que se accede es un Feed, por defecto utiliza un lector preparado para mostrarse correctamente en dispositivos móviles, por lo cual podemos utilizar directamente la dirección del Feed de nuestro blog. Entonces modificando el código anterior tendríamos:

1
2
3
4
5
6

<script type="text/javascript">
var agent = navigator.userAgent.toLowerCase();
if (agent.indexOf('iphone')!=-1) {
	window.location = "URL-FEED"
}
</script>

No se olviden de reemplazar URL-FEED por el URL de su blog. Además hay que colocar este código antes de la etiqueta </head> de nuestro blog.

Pueden ver el ejemplo funcionando en nuestro blog de pruebas http://2webfacil.com/ si es que acceden utilizando un iPhone.

Tweet

AddThis
AddThis es una librería Javascript que permite agregar fácilmente los botones para compartir contenido en diferentes sitios. Se puede personalizar y soporta hasta 50 idiomas y soporta mas de 150 servicios como Twitter, Facebook, MySpace entre otros.

Como utilizar AddThis
El uso de AddThis es sencillo para ello accedemos a http://addthis.com en donde seleccionamos que tipo de página tenemos (Blogger, WordPress, MySpace o un Web normal) luego el tipo de botón a utilizar, opcionalmente puedes seleccionar una opción para obtener estadísticas de las visitas para lo cual hay que registrarse y finalmente generamos nuestro botón.

AddThis en tu Website
Si seleccionamos website el código generado será de la siguiente forma, el cual debes colocar en cada página donde desees agregar la opción para compartir.

1
2
3
4

<!-- AddThis Button BEGIN -->
<a class="addthis_button" href="http://www.addthis.com/bookmark.php?v=250&amp;pub=xa-4aff590b0be123da"><img src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pub=xa-4aff590b0be123da"></script>
<!-- AddThis Button END -->

AddThis en Blogger
Si utilizas Blogger puedes agregarlo rápidamente a tu sidebar con la opción Install to Sidebar que agregará el código necesario automáticamente. Ahora si deseas agregar la opción en cada post debes editar tu plantilla y agregar el código generado justo después de la etiqueta >div class=’post-footer’<

Guardas tu plantilla y ya tienes instalado esta opción en tu blog. Puedes el ejemplo funcionando en nuestro blog de prueba en: http://2webfacil.blogspot.com

Tweet

BlogPress
BlogPress es una aplicación que permite administrar blogs de diferentes plataformas como: WordPress, Blogger, Movable Type, TypePad, LiveJournal entro otros. Tiene un costo de $US 2.99. BlogPress: Blogger Edition es una versión reducida de BlogPress con soporte para Blogger / BlogSpot y completamente gratuito. Esta herramienta nos permitirá.

• Administrar cualquier blog de Blogger.
• Tiene un mini-editor WYSIWYG para redactar tus posts.
• Permite incluir fotos en cualquier parte de tu post sin usar codigo html.
• Puedes incluir fotos desde la librería o tomarlas directamente.
• Puedes incluir y subir las fotos que quieras. Las fotos se subiran a tu cuenta de Picasa.
• Soporte para tags, categorias, post publicos y borradores.
• Puedes administrar multiples blogs, editar y eliminar posts.
• Puedes configurar tu firma para incluirla al final de cada post.

BlogPress Lite, es la aplicación ideal para publicar posts desde el iPhone o iPod Touch, tiene una interfaz muy bien lograda y con todas las funcionalidades necesarias para administrar nuestro blog. Nosotros hemos hecho nuestras pruebas y puedes ver un post redactado desde el iPhone en nuestro blog de prueba: http://2webfacil.blogspot.com/2009/10/publicando-en-blogger-desde-iphone.html

Tweet

Sintaxis del título en una Página
El titulo en una página se encuentra encerrado entre los tags <title> los cuales se ubican entre los tags <head> de nuestro HTML, entonces la sintaxis sería de la forma:

1

<title>Titulo de tu Web</title>

Observaciones
Es recomendable tener títulos diferentes por cada página, de esta manera los buscadores las reconocerán como páginas diferentes. Este es un error común por lo cual los buscadores solo devuelven un resultado para nuestra página obviando loas demás paginas.

Otro punto a tener en cuenta es no dejar paginas con titulo vacío o con los títulos por defecto como “Untitled Page 1″, esta muy improbable que los usuarios nos encuentren mediante los buscadores.

Personalizando los títulos en Blogger
Lo que haremos es cambiar los títulos concatenando el nombre de la página con el titulo del blog para las páginas internas y dejando intacto el titulo de la página principal. Entonces buscamos el titulo por defecto de nuestro blog:

1

<title><data:blog.pageTitle/></title>

Ahora lo reemplazamos por el siguiente código que cambiará los títulos para las páginas internas dejando intacto el titulo de la pagina principal.

1
2
3
4
5

<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if>

Este tip sencillo de implementar hará que todos los posts de nuestro blog sean indexados por los buscadores y por lo tanto obtener mayor cantidad de visitas.

Tweet

Normalmente se deberían agregar un description y keywords por cada página de nuestro blog, pero solo agregaremos los metatags a la página principal de nuestro blog. En las páginas que no tengan metatags los buscadores generarán automáticamente el description basado en el texto de la página.

Código para los Metatags en Blogger
Entonces utilizando la sintaxis condicional en Blogger, tendríamos el siguiente código para mostrar los metatags en el home de nuestro blog. Este código debe ser colocado justo antes del tag </head>.

1
2
3
4

<b:if cond='data:blog.pageType == "index"'>
<meta name='keywords' content='keywords, separados, por, comas' />
<meta name='description' content='Descripcion del sitio web' />
</b:if>

Ejemplo Practico
Entonces para nuestro blog de ejemplo creado en Blogger tendríamos nuestros metatags personalizados con el siguiente código:

1
2
3
4

<b:if cond='data:blog.pageType == "index"'>
<meta name='keywords' content='tips, wordpress, blogger, twitter, html, css' />
<meta name='description' content='Tips, tutoriales, ejemplos y descargas para personalizar tu web.' />
</b:if>

Sencillo pero les ayudará mucho a posicionar su blog en los buscadores.

Tweet

Donde Alojar los SWFs
El primer problema radica en que Blogger no permite subir archivo con extensión SWF, entonces es necesario subir estos archivos a un hosting y luego enlazarlos desde nuestro blog. Ahora si no tienes un hosting pagado puedes hacerlo en algunos servicios gratuitos como:

• Google Sites
• FileDen
• Imageshack

En mi caso prefiero Google Sites, pues me puedo crear una cuenta utilizando la misma que tengo para Blogger, es sencilla de utilizar y sin publicidad. Entonces nos registramos y creamos un nuevo site (el cual solo nos servirá para alojar nuestros archivos). Una vez creado el site deben acceder al menú More Actions < Manage Site < Attachments.

En esta opción podremos visualizar todos los archivos que hemos subido y hacer upload de los archivos que deseamos publicar. Entonces para mi ejemplo he subido una archivo llamado 7762.swf tenemos el URL de nuestro archivo:

1

http://sites.google.com/site/2webfacil/7762.swf

Publicando SWF en Blogger
Ahora que ya tenemos el archivo SWF es hora de utilizar código html para mostrar nuestro archivo flash en el blog. Para ello utilizamos el siguiente código:

1
2
3
4
5

<object id="movie" type="application/x-shockwave-flash"
   data="ruta-archivo.swf" width="ancho" height="alto">
   <param name="movie" value="ruta-archivo.swf">
   <param name="wmode" value="transparent" />
</object>

Donde ruta-archivo.swf es la ruta del archivo SWF, ancho y alto las dimensiones del SWF. Luego siguiendo este código podemos mostrar nuestro Flash con el siguiente código:

Asi de sencillo, pueden ver el ejemplo funcionando en nuestro blog de prueba en Blogger: http://2webfacil.blogspot.com/2009/07/publicar-swf-en-blogger.html.

Tweet

SyntaxHighlighter 2.0
SyntaxHighlighter es un script creado por Alex Gorbatchev para resaltar código fuente en páginas HTML hecho completamente en Javascript por lo cual la solución ideal para integrarlo con Blogger.

Instalando SyntaxHighlighter
Normalmente se debe alojar este script en nuestros servidores, pero como Blogger no permite subir archivos .js, utilizaremos la versión hosteada que nos brinda SyntaxHighlighter. Entonces lo primero es incluir la librería en nuestro template, para ello editamos nuestro template y colocamos el siguiente código justo antes de la etiqueta <head>.

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="'text/javascript'"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" type="'text/javascript'"></script>
<script type="'text/javascript'"></script>

Donde las dos primeras líneas incluyen las estilos y las dos siguientes los scripts para interpretar el código fuente. En mi caso he incluido la librería shBrushXml.js pues yo deseo publicar solo HTML. Pueden agregar otros lenguajes con solo agregar mas scripts, para una lista detallada de los scripts que puedes incluir pueden leer SyntaxHighlighter/Brushes.

Publicando Código Fuente
Ahora que ya tenemos instalado nuesro script, el siguiente paso es publicar código fuente, para ello debemos colocar el código que deseamos publicar entre los tags <pre> pero además debemos indicar que tipo de código estamos mostrando esto lo hacemos de la forma:

<pre class="brush: xml">
// codigo fuente
< /pre>

Nuevamente en mi caso utilizo XML para indicar que deseo publicar HTML. Entonces si por ejemplo deseamos publicar parte de un formulario en html, podriamos hacerlo de la siguiente forma:

<pre class="brush: xml"><form method="post">
   Nombre: <input id="nombre" name="nombre" type="text" />
   Email: <input id="email" name="email" type="text" />
   <input name="btsend" type="submit" value="Enviar" />
</form>
< /pre>

NOTA
Hay que tener en cuenta que para evitar errores de HTML al momento de publicar el código fuente debemos cambiar los caracteres < y > por sus equivalentes en HTML:

• < por su equivalente &lt;
• > por su equivalente &gt;

Además de ello pueden ver el ejemplo funcionando en nuestro blog de prueba en Blogger: http://2webfacil.blogspot.com/2009/07/codigo-fuente-en-blogger.html

Tweet