Con un botón fijo de Twitter en la página me refiero a un elemento que se muestre en la portada del sitio pero que no se desplace al bajar el contenido usando la barra lateral. Para lograr esto haremos uso de algunas sencillas líneas de código CSS y HTML.

Al inicio de su plantilla. Justo después del inicio de la etiqueta body, añadan el siguiente código:

<div id="twitterfijo">
<a style="display:scroll;position:absolute;bottom:345px;right:0px;" href="url_twitter">
<img src="url_imagen"/></a>
</div>

Lo único que tienen que cambiar es la url_imagen y la url_twitter, asociada a su cuenta Twitter.

Para el caso de Blogger es más sencillo, pues como bien anota Gem@, solo debes incluir el código en un elemento de la plantilla (o en un widget en caso uses WordPress), a menos que desees incorporarlo directamente a la plantilla, donde el procedimiento sería similar, prácticamente igual, al mostrado aquí.

Al final, les quedará como se muestra en la imagen que acompaña este post (aunque realmente yo no la tengo habilitada por cuestiones de optimización de plantilla, así que hice la prueba usando el Firebug).

Gracias por suscribirte!! Ahora síguenos en Twitter.com/KnxDT y por Facebook.com/TecnologiaDiaria.

Primero: Debes estar registrado en Google Docs, si dispones de una cuenta Google no tendrás más que iniciar sesión, caso contrario puedes darte de alta desde este enlace. A esta cuenta de Google es adonde te llegarán los mensajes enviados mediante tu formulario de contacto.

Segundo: Luego de iniciar sesión en Google Docs, lo siguiente será seleccionar en el menú la opción: Create New/ Form.

Tercero: Ahora tendremos la plantilla de nuestro formulario. Aqui podemos ir llenando los campos que deseemos, además de poder configurarlo para hacer que algunos campos sean obligatorios o de un tipo determinado (tipo texto, multi-alternativa, de una lista, etc.).

Las preguntas pueden ser duplicadas, editadas y borradas. Una vez terminado el formulario deberíamos guardarlo desde el menú derecha More actions/Save.

Cuarto: Ahora necesitamos el código HTML. Para ello solo debemos ir al menú superior More actions/Embed.

Automáticamente se guardará el formulario y obtendremos un código que deberemos insertar en la entrada de nuestro blog (en modo de edición HTML).

Quinto: Ya lo tenemos casi listo nuestro formulario, el cual aparece ahora en el listado de nuestros documentos.

Ahora definiremos las reglas de notificación. Para esto hacemos clic sobre el documento que nos aparece en el listado. Veremos que se abre un documento con formato Excel. No tocamos nada en él y vamos directo a la opción superior derecha del menú: Share/Set Notifications Rules.

Sexto: Aqui dejamos las opciones marcadas tal y como se muestran en la imagen siguiente: Para que nos llegue una notificación cuando el formulario sea enviado y lo hagan de manera independiente, no en modo resumen.

Clic en Save. Luego en la ventana de confirmación que nos aparecerá le haremos clic en Done.

Es todo. Que les sirva.

El artículo original fue publicado en Forobeta por nuestro amigo FakeDark, del blog El Desmadre, sin embargo aqui hemos hecho una versión propia más acorde con el lector.

Gracias por suscribirte!! Ahora síguenos en Twitter.com/KnxDT y por Facebook.com/TecnologiaDiaria.

Términos relacionados:

• formulario de contacto blogger
• formulario de contacto en blogger
• formulario contacto blogger
• formulario de contacto para blogger

La lista incluye toda la gama, y bastante extensa lista, que compone los servicios que nos brinda la compañía de Sergey Brin y Larry Page. Algunos con más followers que otros pero ya es cuestión de cada uno.

Lo curioso de esta lista, denominada Google Press Center: Twitter Directory, es que se incluyen tanto los servicios creados como los adquiridos, además de brindar las cuentas primarias en inglés y en español (para algunos servicios), incluso hasta en portugués en algunos casos.

Así que ya sabes, la próxima vez que desees acceder a las actualizaciones en Twitter, tweets, de la gente de Google, no te mates buscando listas que lo tienes todo en un solo lugar. ¿Dónde? El enlace se muestra a continuación.

Enlace: Google Twitter Directory

Gracias por suscribirte!! Ahora síguenos en Twitter.com/KnxDT y por Facebook.com/TecnologiaDiaria.

Método 1: Deshabilitar clic derecho del mouse

El primer método consiste en deshabilitar el clic derecho. Para esto deberemos modificar el body de nuestro HTML. En Blogger vamos a Plantilla/Edición de HTML y en WordPress vamos al header.php del tema. Luego cambiamos el simple tag <body> por el siguiente (que evitará la selección de texto e imágenes de un post):

Otro posible código de reemplazo es el siguiente (que hará lo mismo que el anterior y además deshabilitará el clic derecho del mouse):

Debilidad más conocida: Acceder al código fuente directamente.

Método 2: Incluir o registrar una licencia

En la web existen mucha licencias que pueden ayudar a disuadir a algunos copipasteros. Algunas de ellas son GPL, Creative Commons, etc. Tal vez la que en realidad tenga valor legal es Copyright y hay que tenerla en cuenta, empero ésta última tiene un valor comercial algo elevado en algunos casos.

Les dejo los enlaces donde registran sus licencias para los que les sea de utilidad:

- Creative Commons: enlace
- GPL: enlace
- Copyright: enlace

Debilidad más conocida: Imposibilidad de ponerse en contacto con el pseudo-blogger que administra el sitio.

Método 3: Obtener enlaces a beneficio

Éste más que un método para evitar que te copien consiste en aprovecharse de quienes lo suelen hacer, sobre todo aquellos servicios que capturan el contenido de un feed tal cual sin darse el trabajo de tocar los enlaces.

Lo más conveniente por ello es siempre enlazar otros posts nuestros desde un post interno, así si nos copian tal cual, al menos obtendremos algunos beneficios. Si quieres saber cómo hacer esto, puedes leer el post de cómo aprovecharse de los feeds de blogs spam.

Debilidad más conocida: Códigos para parsear enlaces validados.

De momento los dejo con esos 3, bastante básicos pero que a algunos les pueden servir. ¿Sugerencias o consejos en base a su experiencia? Adelante.

Por lo pronto solo protego a mi blog un poco del hotlinking, con los feeds también, pero no deshabilito clics. Es obvio que todo se puede copiar, todo. Si alguien se encuentra a copiar algo y está decidido, nada lo detendrá. La única manera de estar 100% seguro que no te copien es dejar la idea en tu cabeza.

Gracias por suscribirte!! Ahora síguenos en Twitter.com/KnxDT y por Facebook.com/TecnologiaDiaria.

Términos relacionados:

• gato con botas online
• licencia para que no copien mi blog

El problema básicamente se centra en que los títulos se encuentran dentro de tags H2. ¿Qué ocasiona ésto? Las etiquetas tipo encabezado de HTML (H1, H2, H3, etc.) sirven para marcar y denotar cierta relevancia dentro de la estructura de un blog.

La jerarquía de las etiquetas es mantenida, desde luego, por los revisores automáticos de sitios, ponderando contenido relevante dentro de un grupo organizado y publicado de texto. Es decir, las fechas con formato H2 en Blogger tienen mucha importancia asignada, importancia que no les corresponde en ese grado, por ser solo atributos de información complementaria.

¿Qué hacer entonces? Lo más recomendables es cambiar esas etiquetas H2 de la data de fecha a un H4 o H5. Para esto debemos ir a nuestro plantilla del blog y modificar lo siguiente:

<h2 class='date-header'><data:post.dateHeader/></h2>

Cambiándolo por:

<h4 class='date-header'><data:post.dateHeader/></h4>

Evidentemente el estilo también cambiará por lo que se recomienda modificar el CSS (en la misma plantilla), para reasignar los estilos. Pasando de:

h2.date-header { ....... }

A algo como:

h4.date-header { ....... }

Importante también es la optimización de títulos, relevancia mediante etiquetas semánticas, meta tags, etc. Pero de ellos hablaremos en otra oportunidad. De todas maneras pueden dejar sus comentarios en base a su experiencia con Blogger y algunos tips que les han dado resultado.

Gracias por suscribirte!! Ahora síguenos en Twitter.com/KnxDT y por Facebook.com/TecnologiaDiaria.

Las diferencias, como en el post mencionado, hacen referencia a WordPress.org (no al .com) y a Blogger (el conocido blogspot).

¿Por qué WordPress es mejor que Blogger?

Las principales ventajas son:

- Es gratuito. (Blogger también)
- Tienes acceso a todo el código fuente.
- Es más profesional.
- Puedes instalar WordPress de manera local, en tu PC.
- Permite configuración avanzada orientada al SEO (.htaccess, robots.txt, etc.)
- Soporta plugins, como KnxDT Bookmarks: mayor funcionalidad al blog.
- Soporte para plataformas webs, no solo blogs, así como sitios de compra-ventas.
- Control sobre el dominio y los archivos. Manejo directo con la base de datos (MySQL).
- Permite manejar múltiples roles, más que en Blogger, para la gestión de contenido.
- Las caídas del sitio siempre pueden ser reclamables al servicio directo del hosting.

Básicamente se obtiene un mayor control pero como todo lo bueno: cuesta. Si tienes un blog más personal o temporal, no comercial de preferencia, orientado a tener una presencia menor o regular en internet, recomiendo Blogger.

Si ya aspiras a crecer y manejar algo que, por más que parezca complejo en un inicio … no lo es, de verdad valga la pena, recomiendo sin dudarlo (al menos por el momento): WordPress. Si quieren tener mayores referencias sobre las diferencias entre WordPress, Blogger y WordPress.com sugiero remitirse a esta entrada.

Ya les tendré noticias, tal vez luego (esta vez sin fechas), de Drupal, Joomla y OpenCMS.

¿Ustedes saben de más ventajas obvias de WordPress sobre Blogger? Coméntenlas.

Gracias por suscribirte!! Ahora síguenos en Twitter.com/KnxDT y por Facebook.com/TecnologiaDiaria.

Términos relacionados:

• porque wordpress

Si queremos redireccionar nuestros posts uno a uno (1:1), es decir, de correspondencia directa de la ruta del dominio en blogger a la nueva ruta en nuestro blog en WordPress, lo podemos hacer usando uso del siguiente script.

El código que muestro a continuación, gracias a Vikbar, debe ser ubicado en el encabezado del código html del blog. En otras palabras, después de la etiqueta </title> debemos copiar lo siguiente:

<script LANGUAGE='JavaScript'>
var dominioDestino = "tudominio.com";
var urlActual = document.location.href;
var ini=urlActual.indexOf("blogspot");
var permalink=urlActual.substring(ini+12,urlActual.length);
var urlDestino = "http://www." + dominioDestino + permalink;
function redireccionar()
{
location.href=urlDestino
}
setTimeout ("redireccionar()", 1000);
</script>

Donde evidentemente tudominio.com es la dirección de tu blog. No olviden cambiar ese parámetro en el código anterior.

Este nuevo script permite evitar que la redirección inicial que, había propuesto yo, permitía la redirección de un post a la portada sea más útil, ya que en lugar de siempre enviar al visitante al dominio raíz del nuevo blog, lo que hará será enviar el tráfico de post de blogger a post de wordpress, dando una experiencia transparente al lector.

Este script sería el equivalente a hacer una redirección 301 en Blogger usando el htaccess en WordPress. Cualquier duda es bienvenida.

Para más información sobre cómo pasar de blogger a wordpress remitirse a esta guía completa.

Gracias por suscribirte!! Ahora síguenos en Twitter.com/KnxDT y por Facebook.com/TecnologiaDiaria.

Este artículo se centra en diferenciar un Blogger de un WordPress (me refiero a WordPress.org, no a WordPress.com, a repasar las diferencias en caso hayan dudas). Comencemos entonces, y aquí necesitaré de su ayuda mediante comentarios.

¿Por qué Blogger es mejor que WordPress?

Las principales ventajas son:

- Es muy fácil de usar.
- No necesita instalación (solo una configuración de 3 pasos).
- Almacenamiento gratuito (solo de imágenes).
- Dominio gratuito (de segundo nivel .blogspot.com).
- Solo necesitas una cuenta Google.
- Todo el código que edites se limita a modificar un solo archivo (lo demás es interface visual).
- No necesitas instalar plugins.
- No necesitas actualizar tu sistema a nuevas versiones, es automático.
- La configuración de feeds es mediante Feedburner, sencilla pues es también de Google.
- Pagerank bajo la influencia positiva del dominio de primer nivel de Google.
- No tienes que preocuparte de hackeos constantes.
- No tienes que preocuparte por consumir rápidamente los límites ancho de banda o espacio.
- Se integra fácilmente con Adsense.

Tranquilos fans WordPress, siempre hay lugar para una revancha. Evidentemente alguna razón debe haber por la que migré de Blogger a WordPress. ¿Tienes alguna otra ventaja que crees que Blogger tenga por sobre WordPress?

Gracias por suscribirte!! Ahora síguenos en Twitter.com/KnxDT y por Facebook.com/TecnologiaDiaria.

Términos relacionados:

• ventajas de blogger
• que es mejor blogger o wordpress
• beneficios de blogger com
• cuales son las ventajas de utilizar blogger

Blogger Xmas – Descargar iconos (6 icons)

Blogger Icons RAINBOW – Descargar iconos (7 icons)

Web service Lemoned – Descargar iconos (1 icons)

Impulse blogger – Descargar iconos (1 icons)

Google icons – Descargar iconos (1 icons)

Dockstar Google – Descargar iconos (1 icons)

Social me – Descargar iconos (1 icons)

Aquaticus.Social – Descargar iconos (1 icons)

Vista Folders – Descargar iconos (1 icons)

Blog Websites v2.1 – Descargar iconos (2 icons)

webtoolkit4.me icon set – Descargar iconos (1 icons)

Gracias por suscribirte!! Ahora síguenos en Twitter.com/KnxDT y por Facebook.com/TecnologiaDiaria.

Si quieren descargarlo pueden hacerlo desde este enlace y ver un demo desde este otro.

Gracias por suscribirte!! Ahora síguenos en Twitter.com/KnxDT y por Facebook.com/TecnologiaDiaria.

A continuación listaré una serie de algunos consejos que a mi criterio resultan bastante importantes si por lo menos deseamos no tener unos 1000 errores en la plantilla.

Primero unas observaciones al usar el Validador de la W3C y otras genéricas:

- Cuando pongas la url de tu blog a ser examinada marca el check de la opción "Show Source" para ver el código fuente de los errores y se te muestre la plantilla completa (previo clic en More Options si no ves la serie de opciones).

- Todo error arrastra muchos errores de validación de modo que si logras corregir un error prueba nuevamente el validador de la W3C para ver cuántos errores menos tienes.

- Revisa regularmente tu plantilla si la validaste recientemente para asi evitar acumular errores ya que toda nueva entrada posteada o edición de código es una potencial fuente de errores.

- Cuidado con el uso del tag more de WordPress, si usas more sin cerrar un tag (por ejemplo: strong) todo puede fallar.

- No uses párrafos dentro de listas. En lo personal evito usarlas, son bastante limitantes en cuanto a código válido.

Listo, comencemos con los errores (y sus soluciones claro):

1. ERRORES DEBIDO A JAVASCRIPT

Suele dar un error del tipo:

Character "<" is the first character of a delimiter but occurred as data

Clásico error de que se ha incurrido en una sintaxis errónea al momento de empezar la definición de una etiqueta, lo más probable es que se trate de una función javascript que está escribiendo html, por ejemplo:

document.write(‘<style type="text/css">.tabber{display:none;}<\/style>’);

El problema allí originado es por el <\/ de la parte final dado que en html debería ser solo </ pero se escribe de esa manera para que sea interpretado como un slash (/) en Javascript. Es obvio que éste document write se encontrará en la cabecera (head) del código del blog por lo que deberemos encontrar algo como ésto:

<script type="text/javascript">
document.write(‘<style type="text/css">.tabber{display:none;}<\/style>’);
</script>

Ahora nuestro trabajo es reemplazar todo eso por html básico, lo cual sería simplemente:

<style type="text/css">.tabber{display:none;}</style>

2. OMISIÓN DE TYPE EN JAVASCRIPT O CSS

Es informado mediante el siguiente mensaje de error:

Required attribute "type" not specified.

Es cuando no hemos definido un type dentro de un Javascript (o un CSS) y no hemos definido su tipo, por ejemplo inicios de código como siguen:

<script src="http://static.woopra.com/js/woopra.js"></script>

<style>.tabber{display:none;}</style>

Lo correcto es en realidad:

<script type="text/javascript" src="http://static.woopra.com/js/woopra.js"></script>

<style type="text/css">.tabber{display:none;}</style>

Respectivamente. Aqui una anotación extra para el caso de Javascript. Algunos realizan un OMITAG bastante conocido al terminar su tag script pues lo hacen así (ver el final el tag mal cerrado):

<script type="text/javascript" src="http://static.woopra.com/js/woopra.js">

Cuando lo correcto es (como se mostró líneas arriba)

<script type="text/javascript" src="http://static.woopra.com/js/woopra.js"></script>

O en su defecto:

<script type="text/javascript" src="http://static.woopra.com/js/woopra.js" />

3. DUPLICACIÓN DE ID’s

Por ejemplo:

ID "header" already defined

Debemos recordar que los ID’s son justamente eso "identificadores" y se diferencian de las clases (class) en que no pueden existir más de uno con el mismo nombre. Si tienes dos ID’s en div’s distintos con el mismo nombre debes suprimir alguno o redefinirlo como clase.

En el ejemplo dado existe una duplicación de ID’s que es bastante evidente revisando el código de la plantilla (solo basta con dar clic en el número de línea del validador, si han marcado el check de View Source) que en este caso fue:

<div id="header">
<div id="header">

4. ERROR EN LA CONSTRUCCIÓN DE ATRIBUTOS

Determinado por el mensaje de error siguiente:

XML Parsing Error: attributes construct error.

XML Parsing Error: Couldn’t find end of Start Tag a line

Es un error básico de construcción, lo más seguro es una doble comilla en un atributo de un tag html, una doble comilla mal cerrada o un tag mal cerrado, etc. En el caso del blog que anduve revisando la causa fue ésto último:

<a href="http://www.unawebcualquieraxyz.com" <img src="" alt="" /> </a>

Ese error por ejemplo es "gracias" a no cerrar un tag:

<a href="http://www.unawebcualquieraxyz.com"><img src="" alt="" /> </a>

5. FINAL INCORRECTO DEL TAG IMG

El mensaje de error mostrado es el siguiente:

End tag for "img" omitted, but OMITTAG NO was specified

XML Parsing Error: Couldn’t find end of Start Tag a line XXX

Ocasionado debido a una mala clausura de la etiqueta img, lo normal es que algunos usen algo como ésto:

<img src="http://www.tecnologiadiaria.com/imagen.gif" alt="imagen">

Lo correcto es (con slash antes del tag de clausura):

<img src="http://www.tecnologiadiaria.com/imagen.gif" alt="imagen" />

Consejo análogo para las etiquetas <br /> en lugar del incorrecto <br> y <hr /> en lugar del incorrecto <hr>. Que funcione no quiere decir que esté correcto.

6. FINAL INCORRECTO DE UN TAG CUALQUIERA

Mensajes de error mostrados:

XML Parsing Error: Opening and ending tag mismatch

Debido a la falta del slash (/) en el tag cualquiera de la línea indicada.

7. AUSENCIA DEL ATRIBUTO ALT EN IMÁGENES

Nos es informado mediante:

Required attribute "ALT" not specified

Esto es debido a la ausencia del atributo alt en las imágenes. Si no saben qué es eso no se compliquen, es un texto cualquiera que sale al poner el cursor del mouse sobre una imagen. Si quieren lo dejan como vacío pero nunca lo omitan, al final lo pueden dejar de cualquiera de las siguientes maneras:

<img src="http://www.tecnologiadiaria.com/imagen.gif" alt=""/>

8. ATRIBUTOS INAPROPIADOS

Algunos ejemplos:

There is no attribute "property"
There is no attribute "rel"

Sucede cuando asignamos atributos a elementos de HTML que no le corresponden, por ejemplo el atributo alt a un párrafo o el rel o property a un span. Para eliminar este error lo normal es evitar estos atributos inadecuados con sus respectivos valores del tag correspondiente, por ejemplo supongamos el siguiente:

<span class="knxdt" rel="nofollow" property="valorX">

Lo correcto sería solo:

<span class="knxdt">

Removemos sus atributos y sus valores, por lo general estos errores suelen deberse a la plantilla en sí propios del creador del theme, por eso es bueno testear siempre un tema al momento de instalarlo y ver cuántos errores tiene. No todos pueden deberse a la plantilla, hay otros debido a los posts.

9. AUSENCIA DEL DOCTYPE

Aunque WordPress lo coloca por defecto, en las páginas web lo suelen olvidar y sale un error de este tipo:

Fatal Error: No DOCTYPE specified!

El Doctype es un parámetro inicial que indica a la web sobre qué estándar está construido tu blog o página, esto sirve porque se dan mediante versiones que se van actualizando y cosas que antes eran permitidas en las nuevas versiones no lo son necesariamente (por ejemplo el <br> antes permitido y ahora ya no).

10. DOCTYPE NO SOPORTA ELEMENTO X

Si tu Doctype especificado no soporta un tipo de elemento X te aparecerá lo siguiente:

document type does not allow element "X" here

Donde X puede ser por ejemplo un tipo style o cualquier otro en una zona donde no debería ir.

11. ERROR DEBIDO A VIDEOS YOUTUBE Y FLASH

Son del tipo:

document type does not allow element "XXXX" here; missing one of "APPLET", "OBJECT", "MAP", "IFRAME", "BUTTON" start-tag

Para validar este tipo de códigos ya escribí una entrada en particular.

Espero que les sirva y no olviden que validar sus blogs aliviana la carga debido a la ausencia de errores, además que reduce la posibilidad de que se vean mal en otros navegadores (llámese IE6). Por otro lado ayuda a una mejor indexación debido a que comprende el que los bots de Google rastreen mejor el contenido estructuralmente hablando, en especial para aquellos bloggers de cara al SEO.

Si tienes muchos errores no te preocupes, tal vez algunos de ellos se reduzcan usando la opción Clean up Markup with HTML Tidy (ver check en las opciones del validador de la W3C).

Solo como anotación les sugiero que no pongan a modo de comentarios solo enlaces para solucionar problemas ya que el sentido de este post es ayudarlos de un modo más general y en caso aqui no se haya tratado un tipo de error y ustedes lo tienen, entonces pueden citarlo en sus comentarios y lo podremos revisar e incorporar al post.

Que les sirva y si lo lograron postéenlo aqui y si no sigan intentandolo y verán que sí se puede. Como premio de tener un blog válido la W3C les da unos botones. Lol.

Son bastante feos pero que tienen algo de mérito, pueden ver también aqui la lista completa.

Enlace: http://validator.w3.org/

Si te gustó ésta entrada vota por ella, es gratis. Gracias.

Gracias por suscribirte!! Ahora síguenos en Twitter.com/KnxDT y por Facebook.com/TecnologiaDiaria.

Términos relacionados:

• required attribute alt not specified

Todos aquellos blogs que estén haciendo uso del dominio de Blogger de tipo .blogspot.com no muestran problemas aún pero los que si tienen blogs con dominios propios alojados en Google son redireccionados a la página principal del buscador en español.

No tengo aún idea a qué se pueda deber este error pero lo he probado con algunos blogs amigos como:

spamloco.net
noticia247.com
esloqueopino.com
loquelediga.com

Ya antes lo había mencionado el mismo Alejandro en un post sobre las ventajas y desventajas de Blogger con respecto a WordPress: estás supeditado a sus errores y si algo falla no hay un soporte técnico del hosting a quien puedas putear.

Google incluso indexó a Alejandro (de Spamloco.net) con su título de blog Google debido a que seguro sus spiders pasaron por el blog redireccionado en el momento que se ocasionó el error.

Todo fue un leve susto (la caché de Google daba señas que esos blogs existían) pero que deberían hacer reflexionar sobre el por qué a veces WordPress resulta mejor.

[Actualización] Al parecer el error solo duró una hora, ahora ya entran bien.

Gracias por suscribirte!! Ahora síguenos en Twitter.com/KnxDT y por Facebook.com/TecnologiaDiaria.