Optimizar el posicionamiento con microdata

Si has llegado aquí a través de un buscador, espero que éste post sea de tu agrado, en cambio, si has llegado porque ya lo seguías previamente, gracias!

He estado viendo videos de Matt Cutts en su canal de youtube, donde aconseja el uso de los microdata ó microformatos (también podemos encontrarlo como rich snippet), lo he visto importante para tener en cuenta, habrá que ver si realmente optimiza el posicionamiento tanto como dice.

Para aquellos que no sepan lo que es, no son más que etiquetas HTML, concretamente HTML5, que facilitan muchísimo el trabajo de los buscadores, siendo capaces de obtener resultados más precisos. Todo ésto no es por arte de mágia, sino porque con éstas etiquetas, le estamos etiquetando ó dicho de otra forma, encasillando el tipo de contenido para que los buscadores puedan "entender" el contenido.

Los distintos tipos de microformatos están recogidos en la web de schema.org.
Existe un generador online de microdata en ésta url, aunque está un poco limitado, pero vamos, si se quieres añadir cualquier propiedad que no esté, bastaría con ver como se montan el resto de propiedades.
Para terminar, puedes testear el código, puedes hacerlo con ésta herramienta que Google ha creado.


He visto una url que me ha gustado mucho donde explica paso a paso el proceso de etiquetar el contenido, la url a la que me refiero es ésta primera, ésta segunda o ésta otra, en inglés.

Ejemplo de código con microdata:

 <div itemscope itemtype="http://schema.org/Product"> <a itemprop="url" href="http://siguemeaquicuandoquieras.blogspot.com.es/"><div itemprop="name"><strong>Web Artesana</strong></div></a><div itemprop="description">web artesana, hecha a mano 100%, tecleando todas y cada una de las palabras escritas</div></div>  

La salida sería ésta:

Web Artesana

web artesana, hecha a mano 100%, tecleando todas y cada una de las palabras escritas

Crear presentaciones con html5

 Me ha surgido la necesidad de crear una presentación en inglés, el caso es que no tengo instalado el PowerPoint, no se si habrá alguna versión para linux, mirando un poco por la nube, he encontrado que existe el Power Point viewer, pero como su nombre indica, no creo que deje crearlas, tampoco voy a instalarme dicho programa en la máquina virtual, cuando luego no le voy a dar uso. Y la pregunta que me hago es, después de estar todo el día programando, con las mejoras que trae el HTML 5, ¿sería muy complicado crear algunas funciones con jQuery y CSS para crear efectos que simulen las presentaciones?
Oh...wait... antes de nada, vamos a mirar un poco por Google, que seguro que alguién que tuviese que hacer varias presentaciones ya lo ha pensado... Efectivamente, hay ya creadas varias librerías creadas con propósito.

Explico aquí un poco lo que he encontrado:

Impress.js
Es el que más me ha llamado la atención y más me ha impresionado, ahora entiendo el porqué del nombre, vamos que me ha impactado, siendo posible crear efectos 3D, es un framework de javascript que hace uso de las mejoras de CSS 3 a nivel de efectos en las animaciones. No hace falta recordar que, para que se vean dichas animaciones, se debe usar un navegador que soporte el CSS3 y HTML5. El inconveniente que veo es que no hay estilos ni plantillas definidas, sino que tienes la página en blanco y ahí vas añadiendo a mano las transparencias en el lugar que desees, para que luego te genere el efecto, de tal manera que si éstas las pones muy seguidas, el efecto es pequeño, mientras que alejándolas consigues que el efecto llegue incluso a marear.

Link de ejemplo de presentación aquí
Link de descarga del código fuente aquí

Reveal.js

Es el que más me ha llamado la atención por sus efectos visuales, de primeras no parece muy difícil de cambiar los CSS y añadir tus propios efectos, aunque luego haciendo pruebas, el contenido no aparecía donde tocaba y había que pelearse más de la cuenta con los css para que aparezcan centrados. Si entras a la página de http://www.rvl.io, una vez registrado puedes crear la presentación sin necesidad de tocar código fuente, aunque ahí estaríamos en las mismas que con el PowerPoint, las transparencias están separadas en tags llamados section.

Ejemplo aquí: http://lab.hakim.se/reveal-js/
https://github.com/hakimel/reveal.js/tree/master --> descargar la librería reveal.js
http://foundation.zurb.com/docs/reveal.php --> documentation here

Link para descargar el reveal.js aquí.

Google Slides Template
Como no, Google tiene su propia plantilla de presentaciones HTML5. Es bastante más básico comparado con el anterior, Reveal.js. Está restringido a transicciones de diapositivas de derecha a izquierda y efectos de fade-in, aún así, tiene muy buena pinta. Las transparencias están separadas en tags llamados article y parece bastante sencillo añadir nuevos efectos CSS. Link para descargar el Google Slides Template aquí.

http://slides.html5rocks.com/#drag-out -- muy buenos efectos

http://luiscanada.com/blog/pase-de-diapositivas-con-html5/ -- web donde está muy bien explicado

HTML Slidy

Plantilla de presentaciones de w3c, entiendo que cumplirá los estándares xD. Si dijimos que el anterior era ya algo más básico... este aún le gana, si las comparamos con las anteriores son un poco más sosas, aunque tiene pinta de ser bastante sencillo de usar.

Link de un ejemplo aquí.

Fathom.js
Se basa en jQuery, y está muy clara la documentación, diría que es la más rápida para crear una presentación, quedando bastante decente sin que te quite mucho tiempo. Luego muy buena en relación calidad/tiempo dedicado.

Link de ejemplo aquí
Código fuente aquí

Uso de expresiones regulares

Si no habías escuchado nunca antes el significado de una expresión regular... puede que pienses en voz baja contigo mismo y digas... no sé que es, pero tiene que ser una expresión que no sea ni muy buena ni tampoco muy mala... sino regular... ¿cierto? pues no! aunque a primera vista así lo parezca, en realidad no es así.

Las expresiones regulares, también llamadas regex, patrones o regular expressions, para aquellos que se manejan con el idioma de Shakespeare, sin entrar mucho en el tema de los autómatas, podríamos decir que son una potente herramienta que dado un determinado texto, nos permite "machearlo" o contrastarlo con determinados patrones, éstos patrones serán lo que a nosotros nos interese machear. Son muy óptimas, rápidas de procesar y ayudan a simplificar mucho el código; aunque al principio resulten difíciles de leer, marcan un antes y un después. Es una de las cosas que distingue a un hombre de un niño xD.

Para ampliar más la información, una página que he encontrado muy buena es la de El blog de Analítica Web de Paula Sánchez, que a su vez, recomienda acceder al link de google, donde se explican las expresiones regulares de forma bastante sencilla, y ésta otra web, de Encyclopedia of Regular Expresions for SEO, con muy buenos ejemplos. Para enfocarse en JavaScript, una web muy buena es la de Mozilla Developer Network.

Existe infinidad de aplicaciones online que nos permiten testear nuestas expresiones regulares, entre otras:
- RegExr
- Online Regular Expression Tester 
- http://www.txt2re.com/ Herramienta online que genera expresiones regulares en distintos lenguajes.
- Regex Hero - Para generar expresiones en .NET.
- Mastering Regular Expressions
- http://regexlib.com/ Podrás encontrar un amplio listado de expresiones regulares ya hechas.


 
Chuletario:

Caracteres comodín usados para crear los patrones

\	Marca de carácter especial
^	Comienzo de una línea
$	Final de una línea
.	Cualquier carácter (excepto salto de línea)
|	Indica opciones
( )	Agrupar caracteres
[]	Conjunto de caracteres opcionales

Modificadores que pueden usarse con los caracteres que forman el patrón

*	Repetir 0 o más veces
?	0 o 1 vez
{n}	Exactamente n veces
{n,}	Al menos n veces
{m,n}	Entre m y n veces
\w	Un carácter [a-zA-Z0-9_]
\W	No es ni carácter, ni núm ni guión bajo
\b	Marca el inicio y final de una palabra

Caracteres especiales o metacaracteres para indicar caracteres de texto no imprimibles

\b	Principio o final de palabra
\B	Frontera entre no-palabras
\d	Un dígito
\D	Alfabético (no dígito)
\w	Cualquier alfanumérico [a-zA-Z0-9_]
\W	Opuesto a \w ([^a-zA-Z0-9_])
\O	Carácter nulo
\t	Tabulador, caracter ASCII 9
\f	salto de página
\n	Salto de línea
\s	Carácter tipo espacio (como tab)
\S	Opuesto a \s
\cX	Carácter de control X
\oNN	Carácter octal NN
\xHH	Carácter hexadecimal HH

Variables especiales

$&	El texto que macheado
$`	El texto que está a la izquierda de lo macheado
$'	El texto que está a la derecha de lo macheado
$1,$2,$3,..	Los textos macheados por los paréntesis
$+	Copia del $1, $2, $3, .. con el número más alto
@-	Desplazamientos de las cadenas que machean en $1, $2, $3, ..
@+	Desplazamientos de los finales de las subcadenas en $1, $2, $3, ..
$#-	El índice del último paréntesis que se macheó
$#+	El índice del último paréntesis en la última expresión regular

Abreviaturas

\d	[0-9]
\D	[^0-9]
\w	[a-zA-Z0-9_]
\W	[^a-zA-Z0-9_]
\s	[ \t\n\r\f]
\S	[^ \t\n\r\f]

Modificadores

e	Evaluar, evalua el lado derecho de una sustitución como una expresión
g	Global, encuentra todas las ocurrencias
i	Ignorar, ignora las mayúsculas y minúsculas, no hace distinción
m	Multilínea, ^ y $ machean con \n internos
o	Optimizar, compila solo una vez
s	^ y $ ignoran \n pero . machea con \n
x	eXtendida, permite comentarios

Abajo dejo unos links que he encontrado, a modo de chuleta o cheatsheet, que viene siempre bien tenerla a mano a la hora de trabajar con las expresiones regulares.
• HTML (online version)
• PDF, 648Kb
• PNG, 78Kb

Web artesana - hecha a mano 100%

Estando ayer 19 de mayo paseando por los puestecillos en el mercado medieval de Capdepera (Mallorca), se me vino a la mente como el hecho de catalogar los productos con la palabra 'artesano' vende mucho más, esto es, puedes encontrar cualquier pastel con la etiqueta de 'artesano' o 'hecho a mano de la manera tradicional' y te lo pueden vender fácilmente por el doble de precio que te lo podrías encontrar en cualquier pastelería al lado de casa, siendo éste, hecho de la misma manera, eso sí, sin la etiqueta de 'artesano', en cambio, no le prestas ninguna atención.

¿Y si creo un post indicando que es una 'web artesana'? ¿funcionaría? Voy a hacer el experimento con SEO para ver cuanto tardará en subir ésta entrada a las primeras posiciones con la palabra 'web artesana', cabe mencionar, que éste post ha sido realizado el 100% del contenido a mano, tecleando absolutamente todas y cada una de las palabras de la manera tradicional.
A fecha de hoy, con Google Trends no nos aparece ninguna gráfica porque no hay suficiente volumen de tráfico que hagan búsquedas para la frase web artesana, luego aparentemente no debería tener ningún problema para aparecer en las primeras posiciones con el posicionamiento orgánico.

Posicionamiento SEO - Cheatsheet

Quería escribir un post en el que poder plasmar por escrito las típicas cosillas básicas que has de tener en cuenta para posicionar tu sitio con SEO, me he preguntado a mí mismo... y si lo busco en google... ¿encontraré alguna chuleteja con todas aquellas cosas que debemos tener en cuenta y nunca descuidar? pues efectivamente, hay miles y miles de entradas referentes a dicho tema, entre las que destacaría ésta que indico abajo, SEO CheatSheet, disponible en dos formatos distintos, ideal para tenerla impresa siempre a mano.

SEO CheatSheet PNG (112kb)
[SEO CheatSheet PDF] (173kb)

Otra entrada que me ha gustado mucho en español es la de [como realizar un buen seo interno a nuestra web], y ésta otra en inglés [the web developers seo cheat sheet].
Con los links anteriores es suficiente por ahora, luego ahorraré tinta, y no escribiré lo mismo otra vez.

Usando Google Analytics

Intentando retomar mi exitoso blog de wordpress, me he encontrado con el problema de que no es posible (al menos hasta la fecha) de hacer un seguimiento mediante Google Analytics, que era uno de los motivos principales que me llevaban a retomar el blog, y así poder hacer mis propias pruebas de posicionamiento en mis ratos libres, luego para no complicarme mucho, de momento las haré desde aquí.