Test funcionales con PHPUnit

Llevo ya un buen tiempo sin escribir, si no recuerdo mal mi última entrada fue del mes pasado y es verdad que los últimos posts se han centrado más en temas de SEO, poquito a poco he ido olvidándome del tema del que se iba a centrar el blog en un principio, desarrollo, que para eso soy desarrollador…

En los últimos 6 meses de mi vida me he visto centrado en un mega proyecto en el que se han pasado las buenas prácticas de programación por el beicon por eso en esta entrada quiero hablar de una metodología que me gusta especialmente y es el TDD o Test-Driven Development, para el que no lo sepa, tests a cascoporro.

¿En qué consiste el TDD?

El desarrollo guiado por pruebas se basa en que antes de ponernos a desarrollar un módulo de una aplicación, primero escribamos una serie de pruebas que por su propia naturaleza cuando las vayamos a correr por primera vez fallarán y a partir de estos primeros fallos, vayamos escribiendo y refactorizando el código necesario para hacer que los tests no fallen. Obviamente esta práctica hará que los plazos de entrega se retrasen pero esto le da una robustez al código y a la aplicación que no conseguiríamos sin tener que ir tirando del ya mítico prueba y error y arreglando los bugs que vayan saliendo hasta dejar estable la aplicación.

Dentro del TDD podemos y debemos hacer dos tipos de test diferentes, por un lado tenemos los tests unitarios y por otra parte los tests funcionales.

  • Test unitarios: se centran en probar una parte atómica de nuestra aplicación como puede ser el envío de emails del módulo mailer o la conexión con la base de datos. Normalmente suelo escribir este tipo de test en el CRUD de cada entidad. Para automatizar la ejecución de los test, podemos engancharlos con sistemas de Integración Continua como Jenkins o TravisCI
  • Test funcionales: este tipo de test añaden complejidad a las pruebas y consisten en probar módulos completos de una aplicación como el registro de un usuario o la compra a través de un ecommerce. Estos test los podemos enganchar con Selenium.

A día de hoy podemos realizar test con cualquier lenguaje de programación de los más utilizados y de hecho existen librerias como NUnit para .Net y Mono, JUnit para Java, QUnit para Javascript o de la que vamos a hablar hoy PHPUnit para PHP. Antes de entrar en el meollo tengo que aclarar que yo soy de los que si están desarrollando una webapp en la que, lógicamente, se utilizan varios lenguajes, me gusta realizar pruebas para todos los lenguajes…

Instalar PHPUnit

Tal y como nos explican en su página web.

PHPUnit is a programmer-oriented testing framework for PHP.
It is an instance of the xUnit architecture for unit testing frameworks.

Tenemos varias formas de instalar phpunit en nuestra máquina y todo dependerá del tipo de proyecto que tengamos y del alcance que queramos darle.

Descarga global

Con este método nos estamos asegurando que tendremos la librería instalada para poder utilizar en cualquier proyecto, es tan sencillo como descargárnosla y moverla a cualquier directorio de nuestro sistema.

$ wget https://phar.phpunit.de/phpunit.phar
$ chmod +x phpunit.phar
$ sudo mv phpunit.phar /usr/local/bin/phpunit
$ phpunit --version

Descarga en nuestro proyecto

Nos vamos a la raíz de nuestro proyecto y escribimos en una terminal lo siguiente.

$ wget https://phar.phpunit.de/phpunit.phar
$ php phpunit.phar --version

Descarga a través de Composer

Composer es una herramienta que la utilizamos en el desarrollo de aplicaciones web escritas con Symfony aunque no es algo exclusivo, algunos la consideran la versión hiper mejorada de PEAR. Composer es un instalador de dependencias, para el que venga del mundo Java es el Maven de PHP.

Mediante Composer podemos instalar PHPUnit de dos maneras. Si lo hacemos a través de la terminal tendremos que escribir lo siguiente:

$ composer global require "phpunit/phpunit=4.6.*"

También podemos hacerlos añadiendo la dependencia en nuestro fichero composer.json y actualizar, para ello…

{
    "require-dev": {
        "phpunit/phpunit": "4.6.*"
    }
}

Si eres un poco vaguete y no te gusta tirar de código (no sé que haces viendo este artículo sinceramente) tengo otro método que hará las delicias para el que configura sus programas de manera gráfica y es hacerlo a través de las opciones de configuración del PHPStorm.

Para ello nos tendremos que ir a Tools > Composer > Init Composer. Una vez que se haya inicializado hacemos click derecho en el proyecto y seleccionamos la opción de Composer | Add Dependency… y buscamos phpunit/phpunit.

Añadiendo la dependencia de PHPUnit a Composer
Añadiendo la dependencia de PHPUnit a Composer

Una vez que se haya instalado, podremos ver que el directorio vendor, es el que guarda las librerías que necesitará nuestro proyecto, se ha creado un directorio para PHPUnit.

Para que PHPStorm sepa que hemos instalado esta librería y podamos ejecutar los test tendremos que decírselo a través de la configuración global del proyecto, para ello nos dirigimos a Settings > PHP > PHPUnit. Hay varias formas de configurarlo pero lo más fácil es cargando el autoload de nuestras librerías.

¿Desde dónde voy a cargar phpunit?
¿Desde dónde voy a cargar phpunit?

Una vez configurado ya podemos empezar a escribir nuestros test. Esta librería tiene muchísimos métodos para probar cualquier funcionalidad que imaginemos por eso es recomendable que tengas la documentación a mano, pero para que os vaya sonando, un test sencillito se vería tal que así.

    class NotasTest extends PHPUnit_Framework_TestCase{
           public function testAssertTrue(){
                $this->assertTrue(1=1);
           }
           public function testAssertFalse(){
                $this->assertFalse(1=0);
           }
    }

Una vez que ejecutemos estos test, obtendremos algo parecido a lo siguiente.

Los tests han pasado
Los tests han pasado

Con Symfony hay un “problemilla” a la hora de probar el CRUD de nuestras entidades y es que cuando se van a ejecutar las pruebas, el framework todavía no ha cargado el Kernel de la aplicación y por ende el contenedor de servicios no contiene la referencia a Doctrine para poder operar con la base de datos, por ello, yo me he sacado de la manga una implementación de clases base e interfaces que resuelven el problema. Para que se vea con claridad pondré un ejemplo de un proyectillo mio…

Diagrama de mi solución
Diagrama de mi solución

Tal y como se puede ver en el diagrama de la clase base, se hace uso de tres funciones públicas que son necesarias para hacer que esto funciones.

  • Función setUp(): esta función se ejecuta antes de que se ejecute nuestro test, en ella se definen temas de configuración como la carga del kernel y del entity manager. Su ejecución la hace de manera automática la librería liberándonos a nosotros de cualquiera tarea salvo de implementarla y escribir en ella lo que consideremos importante.
  • Función tearDown(): se ejecuta cuando ha terminado de correr nuestro test, normalmente se utiliza para terminar tareas con la base de datos como hacer un flush o un rollback en el caso en que no trabajemos en una base de datos de test.
  • Función getContainer(): como su nombre indica nos devuelve el contenedor de servicios, así de simple.

Voy a dejar el código de cada clase en Pastebin para que podáis pillarlo y utilizar mi implementación en vuestros test pero a cambio os pido que le deis un +1 en Google, un Me gusta en Feisbú o lo compartáis a través de twittah para que así llegue a más personas 😉

[sociallocker id=446]

Descarga clase base

Descarga Interface

Descarga Test

[/sociallocker]

¡Hasta que volvamos a olernos!

Anuncios

Consigue un enlace dofollow DA89 mientras juegas al COD

Pese a todos lo cambios en el zoológico de Google, el link building sigue siendo una estrategia fundamental para posicionar nuestras páginas. Ya hemos hablado de diferentes trucos a la hora de crear nuestra estrategia de creación de enlaces, desde la típica rueda de enlaces hasta las pirámides de enlaces, pero lo que tenemos que tener bien claro es que necesitamos de un conjunto de webs externas en las que poder dejar nuestro enlace y si estas webs tienen una alta autoridad pues mejor que mejor.

Por eso en este post voy a contaros como podéis conseguir un enlace dofollow con una autoridad de dominio de 89 mientras jugáis al Call of Duty gracias a Twitch.tv.

Twitch.tv es una plataforma relativamente nueva que permite hacer streamings de videojuegos y que la gente pueda ver de manera colaborativa gameplays. Para que lo entendáis, es el youtube alternativo para todos esos vídeos de Minecraft, Five nights at freddy’s, Octodad y GTAV. ¿Tendrá Twitch.tv a su rubius?

Al lio, a por ese enlace dofollow

Lo primero que tendremos que hacer obviamente es ingresas en twitch.tv y registrarnos. Esto lo podemos hacer desde el botoncico morado de Sign Up, obvio no?

Esto es una misión para Captain Obvious
Esto es una misión para Captain Obvious

Una vez que nos hayamos registrado y hayamos verificado nuestro email tendremos que rellenar nuestro perfil. Esto es importante que lo hagamos si vamos a utilizar este enlace dofollow para nuestro tier 1. Como he comentado al principio del artículo, con todos los cambios que Google implementa en su algoritmo es importantísimo que las webs que estén bien cerca de nuestro Money Site tengan cierta calidad, por eso os recomiendo que perdáis 3 minutos y rellenéis vuestro perfil completamente.

Esta es mi cara cuando me despierto
Esta es mi cara cuando me despierto

Si le dais a Channel podéis acceder a vuestro canal en el que hacer retransmisiones en vivo de vuestros juegos, pero lo más guay de esto son lo paneles. Debajo del espacio reservado para el reproductor de vídeo tenemos un interruptor con el que podemos activar los paneles. Al darle, se nos desplegará el panel que tenemos que editar.

A un paso de conseguir nuestro enlace dofollow
A un paso de conseguir nuestro enlace dofollow

Aquí podemos añadir un título, una foto que contendrá un enlace y un texto descriptivo en el que podremos poner tantos enlaces como nos de la real gana y todos ellos serán dofollow!! Hay que decir que en la descripción tendremos que usar el formato MarkDown, es decir si queremos dejar un enlace que apunte a google tendremos que hacerlo de esta forma, [Google](http://google.es)

Una vez que hagamos click en Submit ya tendremos nuestro enlace dofollow y si no me creéis mirad a continuación…

Ahí tenéis vuestro link dofollow madafakas
Ahí tenéis vuestro link dofollow madafakas

Hala espero que lo aprovechéis!!

¡Hasta que volvamos a olernos!

Róbale 12 enlaces dofollow a Drupal

Estamos en año electoral, hace unas semanas fue el debate sobre el estado de la nación en la que le dieron muchísima cera a Marianico. Nuestro presi nos promete bajada de impuestos y la creación de un montonazo de puestos de empleo con el objetivo de arañarle votos al coletas en las próximas generales. Bárcenas sale en el cómic de Mortadelo y Filemón. El terremoto de Albacete. El Estado Islámico atacando a medio mundo y para más inri el Caloret se esta posicionando como la próxima canción del verano.

En fin, que están pasando muchas cosas y no todas buenas pero para olvidarnos un poquito de toda la sobredosis de información hoy vamos a ver como podemos robarle nada mas y nada menos que 12 enlaces dofollow de gran autoridad a Drupal, si si, como lo oís…

Drupal, give me the money bitch

Lo primero que tenemos que saber acerca de Drupal es que es un CMS mas como lo es WordPress o Joomla pero es bastante más complejo en comparación con los otros ya que te permite jugar con sus diferentes módulos y hacer desarrollos desde cero casi casi. Pero, lo que nos interesa de Drupal es que es Open Source y ello conlleva que tiene una comunidad inmensa de desarrolladores que programan nuevos módulos y dan soporte a los usuarios.

Lo interesante de Drupal visto desde la lente del Link Building es que nos permite crear hasta 12 enlaces dofollow DA99. WOW.

Para ello nos tenemos que registrar en la página web del proyecto, en la sección de “Create a new account” podremos encontrar el formulario en el que tendremos que dejar nuestros datos para crear la cuenta.

Formulario de registro de Drupal
Formulario de registro de Drupal

Drupal nos habrá enviado un email a nuestro correo que deberemos confirmar para poder dejar nuestros amados links.

Como siempre digo, en el tema de link building siempre es bueno que parezcamos lo mas natural posible sobre todo si estamos trabajando cerca de nuestro money site o montando una pirámide de enlaces y eso conlleva que rellenemos el perfil que nos acabamos de crear y subamos una foto de avatar, no basta con dejar los enlaces e irse.

 Pim pam enlace, pim pam enlace

Enlazando by the face
Enlazando by the face

La gracia de todo esto esta en la sección de Website de nuestro perfil personal, ahí Drupal nos da la posibilidad de añadir hasta 5 direcciones web, pero si nos fijamos un poco más abajo, en la sección de Social Links allí también podremos dejar otros 7 enlaces más, teóricamente este espacio esta reservado para que dejemos nuestro Twittah, Badoo, VotaMiCuerpo y otras denigrancias varias pero nadie nos dice que no podamos dejar la url a alguno de nuestros proyectos a posicionar no? NORL?

Más enlaces dofollow de 99 DA
Más enlaces dofollow de 99 DA

Si sigues sin creer que Drupal pueda regalar 12 enlaces dofollow de alta autoridad tan solo tienes que mirar el código fuente de la web una vez que hayas completado el perfil para darte cuenta de que Drupal mola 😀

Miradlo por vosotros mismos ingenuos
Miradlo por vosotros mismos ingenuos

Esperemos que los de Drupal no se quemen de regalar tantos enlaces y no terminen añadiéndole el odiado rel=’nofollow’ a los enlaces pero mientras tanto podemos dar grasias a diosito de que tengamos este recurso para construir nuestra estrategia de enlaces.

¡Hasta que volvamos a olernos!

Cómo cambiar el slug category de WordPress

Vale, se que llevo mucho tiempo sin actualizar el blog. Desde Noviembre del año pasado concretamente pero he tenido una buena escusa para retrasarme, he cambiado de trabajo y de ciudad y como es normal, lleva tiempo cerrar las cosas básicas de mudanza y demás.

Como ultimamente estoy recibiendo muchas preguntas de diferentes temas, inauguro con este post una nueva sección en la que responderé a las diferentes cuestiones que podíais hacerme.

El primer articulo de este 2015 lo voy a dedicar a una tarea básica de WordPress que últimamente me preguntan mucho y que gracias al siguiente comentario me he animado a responderla.

¿Gorka, me ayudas?
¿Gorka, me ayudas?

La cosa en si es una absoluta gilipollez si sabes como hacerla, pero que si no lo tienes tan claro vas a pasarte un buen rato dando vueltas por los diferentes menús de WordPress.
Me refiero a cambiar el slug category de nuestras URLs. En este blog no lo he cambiado por temas de SEO porque empecé a escribir sin darme cuenta de este detalle y ahora si lo quisiera cambiar tendría que estar haciendo redirecciones por cada uno de mis posts y no me apetece mucho la verdá…

Bien, para el que no lo sepa, este slug no esta sujeto a los ficheros de traducción .mo y .po por lo que ahí no vais a encontrar la solución a este problema. Para cambiarlo tendreís que ir a Ajustes > Enlaces permanentes y hacer click en la sección Opcional.

En los campos “Categoría base” y “Etiqueta base“, es donde podemos asignar los nuevos nombres para sustituir los términos: “category” y “tag“ y ya esta. Guardamos y ya tendremos nuestros cambios actualizados.

Opción de menú para cambiar el category
Opción de menú para cambiar el category

Bueno señores, me voy a volver a obligar a retomar la publicación de post de una forma mas o menos periódica y si veo que esta nueva sección funciona seguiré respondiendo a vuestras dudas.

¡Hasta que volvamos a olernos!

Probamos Ello

Redes sociales hay y habrá siempre desde que decidimos como especie sacarnos de la manga un invento llamado Internet. Pero incluso antes de que llegará la mole de Facebook y arrasará con todo, o con casi todo, antes hubo muchas otras redes sociales que intentaban llevarse un cacho del pastel.

Yo al ser de los noventa, me crié principalmente con el Messenger y con MySpace antes de que la comprará el Justino original. Luego mas tarde me fui metiendo en otras muchas como el terrible Fotolog, Tuenti o LastFM. Cada una cumplía con una función diferente y a pesar de que nunca he sido muy partidario de ir esparciendo mi huella digital por todos los lugares he de reconocer que cada vez que leía una noticia sobre una nueva red social que prometía ser la polla y desbancar a las que hubiera en ese momento, ahí estaba yo solicitando una invitación.

Y con esto llegamos a hace un par de meses, en Genbeta leía de una nueva red social que como Diaspora, no utilizaba un sistema basado en publicidad. Además según el manifiesto de la gente de Ello no utilizan nuestros datos para sacar un rendimiento económico por lo que en principio pinta bastante bien.

En los últimos años nos hemos vuelto muy dependientes de empresas que trafican con nuestros datos y el cambio a otros sistemas total o parcialmente anónimos como Tor, DuckDuckGo, Diaspora, Ello… se basa más en un principio personal que en un ejercicio práctico por que si quieren dar contigo lo van a hacer igualmente utilices Facebook o no.

Bueno, la cosa es que cuando leí esa noticia sobre Ello fui raṕido y corriendo a solicitar una invitación y pasados unos 2 meses, por fín he recibido el acceso a la red social.

 

Yuhuuu tenemos acceso a Ello

Toma pantallazo
Toma pantallazo

Lo primero que te encuentras al acceder a Ello es una web que abusa demasiado de efectos jQuery y que podría fastidiar la experiencia en algunos navegadores, pero que coño mola un huevo.

Todo el diseño esta basado en un minimalismo extremo, el fondo es totalmente blanco y la fuente que utilizan es Courier New, algo por lo que han sido muy criticados pero en un primer vistazo el Look & Feel es bastante agradable.

Al usarlo te das cuenta que es como una mezcla entre Twitter y Tumblr ya que se sigue el paradigma del tablón o el timeline como hacen todas las redes sociales… además dudo muchísimo de que hayan implementado todavía un algoritmo de ordenación como el que utiliza Facebook con su EdgeRank, os recuerdo que Ello sigue siendo una beta privada por lo que tendremos que seguir esperando para ver hacia donde tiran.

Look & Feel de Ello
Look & Feel de Ello

La pantalla principal esta sutilmente divida en dos ya que no han puesto bordes de separación ni ningún otro elemento que pueda echarle un cable a la intuición del usuario pero lo que no me ha gustado es que la división izquierda, que corresponde con el menú, ocupe tanto cacho de pantalla y es que fácilmente se puede estar comiendo un 27% del diseño, vale que puedes esconderlo mediante un botón pero no sé… es un si pero no.

Por otro lado, el contenido del timeline me parece excesivamente grande. A pesar de que me gusta y bastante, creo que las barras de la parte superior se comen bastante cacho de espacio y pese a sus esfuerzos por darle aire a los diferentes elementos y a su búsqueda del minimalismo, a mí lo que me provoca es cierta sensación de claustrofobia/agobio.

 

Tres botones para dominarlos a todos

Los botones de la discordia
Los botones de la discordia

Ello es muy simple, tan simple que tan solo tiene 3 botones con los que interactuar en la red social. Es verdad, que la primera vez que se usan pueden parecer un poco liosos ya que de ellos tres tan solo uno esta claro y es el que hace referencia a los amigos a los que has agregado, los otros dos, Noise y uno con el símbolo de un rayo pueden llegar a confundir un poco.

Con el botón de Noise no vas a activar un reproductor incrustado en el que vaya a sonar lo último de Sun O))) sino que vas a poder ver las novedades de la gente a la que sigues como si fuera una suerte de Trending Topic de Twitter.

Con el botón del rayito pasamos a las notificaciones, así de simple.

 

Conclusiones sobre Ello

Si bien es cierto que todavía les queda mucho en lo que trabajar, creo que el futuro de Ello va a estar orientado a artistas gráficos como si fuera un nuevo DevianArt o Tumblr pero mucho mas simple. A pesar de lo que he dicho, me gusta bastante el diseño y me gustaría mucho más si en lugar de meter efectos jQuery pulieran un par de temas pero el problema con el que se van a encontrar es con la migración de usuarios. No resulta muy agradable estar utilizando tu solo una red social sin tener a tus amigos metidos en ella a no ser que te dediques a dejar enlaces valiosos que es lo que hago yo y lo que os voy a explicar a continuación.

Creando enlaces en Ello
Creando enlaces en Ello

Si te vas a la configuración de tu perfil, podrás ver que hay un campo de texto que te pide Links, si si, en plural. Aquí puedes dejar tantos enlaces como te de la gana y lo mejor de todo es que son de tipo dofollow. Por desgracia, el resto de enlaces que publiques en tu timeline van a ser nofollow pero bueno tampoco esta tan mal.

Tantos enlaces dofollow como quieras con Ello
Tantos enlaces dofollow como quieras con Ello

Por otro lado, tal y como dice la barrita de Moz, Ello posee una autoridad de dominio de 60 así que tal vez, esta pueda ser una opción para empezar a utilizar Ello en nuestros proyectos de Link Building.

Autoridad de dominio de Ello
Autoridad de dominio de Ello

Lo más importante, Ello se encuentra en un estado de beta privada en la que únicamente se accede por invitación, si queréis explotarla y conseguir estos enlaces de los que os he hablado yo os puedo invitar ya que tengo de sobra invitaciones para un huevo de gente. Si queréis que os envie una, tan solo dejadme vuestro email en la cajita que hay en la parte superior del blog justo debajo del formulario de búsqueda y en un par de semanas os llegará 😉

Ala, ¡hasta que volvamos a olernos!

Validar un formulario con HTML5

¡Hola hamijos!

Estamos a Lunes y con pocas ganas de comenzar la semana, pero hay una buena Fnoticia relacionada con la programación web. El pasado día 28 de Octubre la W3C elevó todo el conjunto de tecnologías HTML5 a nivel de “recomendación”. Esto es muy importante ya que aunque todavía no sea un estandard como tal, acaba de recibir un apoyo enorme de esta comunidad internacional y que gracias a este gran paso forzará a que los navegadores se vayan actualizando y comiencen a dar soporte completo a estas tecnologías. Esta acción va a ser la leche porque así nos podremos ir olvidando poco a poco de utilizar en nuestros css las etiquetas -moz y -webkit que muchas veces nos complican nuestros desarrollos.

Y para celebrar que HTML5 por fin es una recomendación oficial hoy traigo un artículo sencillito, de fácil digestión sobre las buenas prácticas que deberíamos estar utilizando a la hora de validar nuestros formularios.

Keep Calm and Write HTML5
Keep Calm and Write HTML5

Es mejor morir por paranoico que por descuidado y con esto me refiero a que, en mi modesta opinión, a la hora de validar un formulario deberíamos hacerlo tres veces. Una validación en HTML5, una validación en JavaScript y una última validación ya en el servidor, me da igual el lenguaje.

Validar un formulario con HTML5

Para ilustrar lo que quiero enseñar hoy, he preparado un pequeño ejemplo del formulario que vamos a usar.

<form action="" method="post">
 <label for="nombre">Input con required </label>
 <input type="text" name="nombre" id="nombre" title="Debes escribir un nombre" required/>
 <br/>
 <label for="email">Input con pattern </label>
 <input type="text" name="email_cp" id="email_cp"
 title="Debes escribir un email válido"
 pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$"
 required/>
 <br/>
 <label for="email_sp">Input de tipo email </label>
 <input type="email" name="email_sp" id="email_sp" title="Debes escribir un email válido" required/>
 <br>
 <label for="textarea">Textarea con maxlength </label>
 <textarea name="textarea" id="textarea" maxlength="5"></textarea>
</form>

En el formulario podemos ver 4 campos que son 3 inputs y un textarea y cada uno de ellos lleva un atributo diferente.

[xyz-ips snippet=”FAQS-GORKAMU-TW-YELLOW”]

El atributo required

Cuando incluimos el atributo required en un input, le estamos indicando al navegador que este campo es obligatorio y que antes de enviar los datos ha de comprobar que no es nulo. Este atributo es de tipo booleano por lo que tan solo su presencia funcionará y no tendremos que declararle ningún valor.

<input type="text" name="nombre" id="nombre" title="Debes escribir un nombre" required/>

Si establecemos un titulo para el input tal y como se muestra en el ejemplo conseguiremos hacer aparezca un mensaje personalizado en el tootip de validación que genera el navegador. En la imagen que pongo debajo se puede ver, al menos en parte ya que la captura de pantalla pilla a media el desvanecimiento del tooltip…

Input con atributo required
Input con atributo required

El atributo pattern

Si, odio las expresiones regulares independientemente de su gran utilidad, que no la pongo en duda, pero no me gustan nada y en HTML5 no podían faltar. Si añadimos este atributo en un input podemos hacer que el texto que introduzcamos en el input case con la regexp que indiquemos. Esto viene muy bien cuando queremos validar que un campo de texto cumpla con un formato, una longitud o un tipo de dato específico.

 <input type="text" name="email_cp" id="email_cp"
 title="Debes escribir un email válido"
 pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$"
 required/>
Input con pattern
Input con pattern

 

 El atributo type

Para ponernos más puristas, podemos utilizar el atributo type en nuestros inputs. Con esto, le estaremos indicando al navegador el tipo de dato que esperamos recibir. Hay muchísimos tipos diferentes y gracias a HTML5 se han añadido nuevos e interesantes tipos, pero lo más utilizados son los siguientes:

  • type=”email”
  • type=”datetime”
  • type=”search”
  • type=”url”
  • type=”range”

Desde este enlace podéis consultar todos los tipos diferentes que existen.

 <input type="email" name="email_sp" id="email_sp" title="Debes escribir un email válido" required/>

Así pues, si utilizamos el tipo de dato email en un input no tendremos que estar tirando de expresiones regulares ni nada por el estilo. El navegador solito se encargará de validar por nosotros el tipo de datos. Todo un lujo hoygan!!

 

El atributo maxlength

¿Quieres poner un máximo de caracteres a escribir en un input? No hay problema, ya no tienes porque hacer funciones en jQuery que te devuelva el número de caracteres porque con el atributo maxlength podemos decirle al campo de texto que no supere la cifra de caracteres que especifiquemos.

<textarea name="textarea" id="textarea" maxlength="5"></textarea>

Por desgracia no todos los atributos son soportados por todos los navegadores, tal y como pasa con maxlength, pero esto irá cambiando poco a poco y más cuando se apruebe el estandard.

Soporte para MaxLength
Soporte para MaxLength

Desde el enlace que os dejado mas atrás podéis consultar toda la documentación de los tipos de datos y atributos que se pueden poner en los campos de texto para validar un formulario. Además si a esto le añadimos la potencia de las pseudoclases de CSS3 podemos conseguir dotar de un aspecto único a nuestras validaciones. Para ellos se utilizan las pseudoclases :invalid y :required.

input:required:invalid,
textarea:required:invalid{
 background-color:red;
 border: 1px solid red;
}

input:required:valid,
textarea:required:valid{
 background-color:green;
 border: 1px solid green;
}

Junto a este, el validar un formulario con HTML5 son ejemplos muy majos de las cosas que podemos hacer con esta tecnología. Esperemos que por fin lo aprueben pronto como un estandard y lo implementen ya todos lo navegadores, mientras tanto he creado un jsFiddle con el ejemplo del post. ¡Espero que lo disfrutéis!

¡Hasta que volvamos a olernos!

Amable Tumblr Theme

Entre proyectos y proyectos he tenido un poquito de tiempo para empezar a estudiar el sistema de plantillas de Tumblr. Para el que no conozca qué es Tumblr, cosa que dudo, es un sistema de microblogging que se caracteriza por su sencillez, en este blog ya he publicado algo sobre Tumblr, mas concretamente como usar un dominio propio con tu cuenta de este conocido CMS.

En Tumblr puedes publicar todo los tipos de post que podrías publicar con otros tipos de CMS como WordPress o Joomla, además te permite iniciarte en el desarrollo de plantillas ya que tiene un editor de código incrustado que salvo por algunos detalles mínimos, como por ejemplo que no hace uso de ZenCoding, me parece un editor online perfecto. Vale, ya se que existen alternativas online más potentes como CodePen o jsFiddle pero que el propio Tumblr incluya su editor sin que tengas que abandonar la página me gusta y mucho.

Después de trabajar mucho tiempo con un sistema de plantillas como Twig, incluido en Symfony, no me ha costado nada acostumbrarme al sistema de plantillas de Tumblr, además con la documentación a mano todo resulta mucho más fácil y para el siguiente nivel, me tocará empollarme la API de Tumblr para desarrollar plantillas mucho más potentes.

Bien, con todo esto y haciendo un ejercicio de estudio, he creado mi primera plantilla para Tumblr.

Amable Tumblr Theme
Amable Tumblr Theme

Amable Tumblr Theme

Actualmente esta en su primera versión y cómo se trata de un ejercicio práctico no sé si seguiré dandole soporte. Podéis echar un vistazo a la plantilla en funcionamiento desde aquí. Esta plantilla soporta todos los formatos de post que hay en Tumblr que son los siguientes:

  • Soporte para posts de vídeo
  • Soporte para posts fotográficos
  • Soporte para posts de tipo chat
  • Soporte para posts de tipo reblog
  • Soporte para posts de tipo photoset
  • Soporte para posts de tipo audio
  • Soporte para posts de tipo cita
  • Soporte para posts de tipo texto
  • Soporte para posts de tipo link

Además he incluido la posibilidad de añadir el código UA de Google Analytics para llevar un control analítico del sitio y lo he integrado con el sistema de comentarios de Disqus.

Por otro lado, Amable Tumblr Theme incluye integración con redes sociales y ha sido diseñado para que se pueda consumir desde cualquier dispositivo, usease, con diseño responsive. También le he metido un montón de opciones de configuración como cambio de color de textos, de background y ese tipo de cosas que ya os podéis imaginar…

En fin, que os dejo el zip con la plantilla para que podáis descargarla y utilizarla si queréis, pero a cambio os pido una acción social ya que no hay intención de rentabilizarla económicamente. Esta licenciada mediante Creative Commons, así que sentíos libres de borrar cosas, añadir nuevas cosas, estudiarla o trastear con ellas pero no olvidéis citar mi autoría.

Dentro del zip, he metido un pdf que explica como instalarla y cómo personalizar la plantilla pero aviso de que esta en inglés, ya que pienso moverla por foros anglosajones también, aún así se exige un nivel mínimo de “inglés porno” por lo que lo entenderéis bastante bien.

Creo que en mis ratos libres seguiré haciendo plantillas para Tumblr ya que me sirve para no oxidarme y aumentar mi visión creativa que como la gran mayoría de los programadores tengo más desarrollado el hemisferio izquierdo que el derecho…

Y para terminar os dejo con la mencionada Amable Tumblr Theme…

[sociallocker id=”446″]Descargar la plantilla Amable Tumblr Theme[/sociallocker]

Por cierto, estoy cambiando el diseño del blog y me lo estoy tomando con mucha calma, así que hasta que no este terminado no os asustéis si lo veis muy…rudo.

¡Hasta que volvamos a olernos!

descarga

Hackear un ordenador con la radio del móvil

Hola hamijos, como más de uno sabrá me dedico profesionalmente a la informática. No soy experto en redes ni en sistemas, en realidad trabajo en desarrollo y para afinar más, la especialidad que más me gusta es el desarrollo de aplicaciones web, pero eso no quita para que me dejen de gustar otras áreas como la seguridad o más bien la contraseguridad. Desde siempre he tenido una relación amor-odio con el hacking y he coqueteado con algunas técnicas a lo largo de los años.

Creo que mi pasión por la informática y mis encuentros con el hacking vienen de cuando era un crio. Recuerdo que cuando tenía unos 9 años vi la película de ‘Hackers, piratas informáticos‘, esa película totalmente surrealista protagonizada por Angelina Jolie y Jonny Lee Miller que interpretaban a unos adolescentes que eran unos fieras pirateando sistemas en los 90 y tenían que luchar contra el dueño de una megacorporación.

Ayy que mofleticos me tenía la Jolie...!!
Ayy que mofleticos me tenía la Jolie…!!

Vale que los guionistas de la película se lo fliparon demasiado con los detalles técnicos y todos los que hayamos visto la película nos reiremos de las interfaces de los ordenadores tan de los 90 pero no podemos negar que la película generaba un sentimiento de libertad y una sensación de que si eras informático no había dios que te parara los pies. Una de los razones que ayudaba a generar esta sensación era la banda sonora, que entre otros, Prodigy tenía un hueco con su temazo ‘Voodoo People‘, pero vaya, que al terminar de ver la película te quedabas como… Wow, esto mola un huevo.

Pues bien, de vez en cuando reviso mis RSS sobre seguridad y a veces encuentro noticias que son la leche y nunca dejan de asombrarme como por ejemplo aquella aplicación que presentaron en la conferencia Hack In The Box Conference y que aseguraban que se podía romper los sistemas y controlar un avión comercial desde un smartphone o aquella otra noticia que aseguraba que se podía hackear un marcapasos (implicaciones éticas aparte). Pues hoy, he leido una noticia sobre cómo hackear un ordenador con la radio del móvil, si si, como lo oyes, desde la radio… xD

Cómo creo que es lógico, todos sabemos que para hackear un ordenador es necesario que se tenga acceso al mismo, ya sea físico o a través de la red. Un ordenador que este desconectado de internet y aislado en un bunker hermético es imposible de vulnerar o eso nos parecía hasta ahora, porque se ha presentado una aplicación que es capaz de captar las ondas de radio que emiten los monitores y que nuestro móvil y desde la radio podremos leer.

Al final del pasillo hay un ordenador en el que sólo se puede jugar el Minecraft
Al final del pasillo hay un ordenador en el que sólo se puede jugar el Minecraft

La aplicación hace uso de una técnica de la que ya se hablaba por los años 60 y tiene por nombre TEMPEST (Transient ElectroMagnetic Pulse Emanation STandard) y que permite trucar las ondas electromagnéticas de un monitor haciendo que éste actúe como una antena.

Para poder obtener información de las emisiones electromagnéticas de la pantalla es necesario que previamente el ordenador tenga un malware instalado que traduzca en información útil las ondas de radio que detecta el receptor FM del smartphone, que también tendrá instalado el mismo malware. La clave de todo este asunto es utilizar la tarjeta de vídeo del ordenador para generar una señal de radio que luego se pueda captar.

La mayor brecha de seguridad se encuentra entre la pantalla y la silla

Según he leído, la técnica sería prácticamente inviable ya que hay que tener el receptor a una distancia de 7 metros como mucho del emisor porque la cantidad de aparatos electrónicos que hay a nuestro al rededor emitirían corrientes parasitarias que distorsionarían la señal a capturar. Se habla de que en los laboratorios han conseguido capturar una contraseña en 8 segundos y esto da mucho que pensar sobre si es la mejor técnica a llevar a cabo en un ataque pero por otro lado, el The New York Times ya informó de la existencia de un transceptor utilizado por la NSA que permitía acceder a ordenadores no conectados a internet a través de ondas de radio, así que no se yo…

Esto de momento se queda en una curiosidad sobre como gracias a la investigación somos capaces darle una vuelta de tuerca a tecnologías que parecían inamovibles y así poder aprovechar nuevas funcionalidades.

Ah y por si alguno quiere seguir investigando acerca de todo esto, la aplicación en cuestión se llama AirHopper y para más inri, esta circulando por internet un vídeo en el que dicen que si lo reproduces a pantalla completa y a 1080p puedes oír el tema Para Elisa de Beethoven desde la radio AM de tu smatphone, no se yo… yo no lo he probado… así que si lo probáis me gustaría saber vuestra opinión a través de la sección de comentarios.

http://smartywidget-1736116251.eu-west-1.elb.amazonaws.com/webservice/embed/9170/659794/510/280/0/0/0

¡Hasta que volvamos a vernos!

Colar un enlace dofollow DA-93 con Linkspiration

Hola hamijos.
Cuando abrí este blog, para nada tenía pensado dedicarle tanto tiempo como lo estoy haciendo últimamente. Lo creé con la idea de dejar constancia de todas las cosas que se hacer con un ordenador y en un principio iba a estar dedicado a desarrollo, que para eso soy programador.
El objetivo que tenia era crear una especie de curriculum de conocimientos para que las empresas pudieran contrastar lo que se hacer cuando me enfrentara a una entrevista de trabajo.

Por desgracia, la tasa de paro y de precariedad laboral en España son muy altas y es importantísimo destacar frente a otros competidores aportando algo más que un CV si quieres optar por un puesto de trabajo. Y este era el objetivo inicial del blog.
Pero esta idea original cambió. A medida que te vas metiendo en foros para aprender sobre blogs, SEO, posicionamiento… te das cuenta que escribir artículos no es suficiente, tienes que tener una estrategia de linkbuilding por detrás, por que las visitas no van a llegar solas.

Cada vez fui aprendiendo más sobre buenas (y malas) prácticas SEO, me fue gustando más y más  y empecé a realizar más artículos sobre este tema, hasta que el blog se acabó convirtiendo en lo que es ahora mismo.
Por mucho que me guste el SEO, siempre me obligo a tener un par de artículos sobre desarrollo, no quiero dejar las raíces.

Y aquí estamos, que el gestionar un blog, como he dicho más arriba, no consiste únicamente en escribir artículos y ya está.

A la hora de crear estrategias de linkbuilding siempre es muy importante tener a mano webs con buena autoridad dónde dejar un enlace, si luego ya ese enlace es dofollow imagínate la alegría que da. A veces cuesta un huevo encontrar buenas páginas para este fin. Tirando de footprints podemos encontrar muchas cosas realmente interesantes pero sin lugar a dudas las mejores páginas se consiguen con el boca a boca o pasándonos estos descubrimientos entre nosotros. Y por eso, en este artículo quiero ampliar la información que encontré en un post del gran jvalenzuela en el que explicaba cómo dejar enlaces en el perfil de Linkspiration.

Conseguir ese amado enlace dofollow DA-93

El título sugiere que solo puedes conseguir un unico enlace dofolow DA-93, pues no, puedes tener tantos enlaces cómo te de la gana.

La web en cuestión donde dejar el/los enlaces se llama Linkspiration y es una suerte de Pinterest para emprendedores en el que podremos crear tablones y pines. Tengo que decir que últimamente funciona un poco mal, tarda muchísimo en cargar y a veces lanza una excepción desde el servidor Tomcat relacionado con la sesión de la web así que armaos de paciencia.

Lo primero que tendreís que hace es registraros, obvio. El registro en la web es muy intuitivo, pudiendo elegir desde entrar con la cuenta de facebook, de linkedin o a través de tu correo electrónico.

Registrándonos en Linkspiration
Registrándonos en Linkspiration

Una vez que hayamos confirmado nuestra cuenta y estemos dentro podremos ver los diferentes tablones de cada uno de los usuarios. Para empezar a dejar nuestros enlaces dofollow DA-93 tendremos que ir al menú superior dónde pone +Add y allí hacer click en Create  Clip.

Creando nuestro primer Clip
Creando nuestro primer Clip

Se nos abrirá un editor de texto muy similar al de WordPress con todas las herramientas necesarias para insertar imágenes, insertar enlaces, formato de texto…

Lo que nos interesa aquí es rellenar el Clip con una cierta naturalidad, no vale simplemente poner el enlace en la zona de comentario y ya esta. Deberíamos rellenar toda la información que nos presenta subiendo una fotografía, eligiendo el tablón en el que queremos guardar el clip, añadiendo un título y un comentario en el que colaremos nuestros enlaces. Cómo podéis ver en la siguiente imagen yo he insertado dos enlaces, uno con el nombre del artículo como título principal del Clip y un enlace a la raíz de este blog.

Rellenando el Clip en el que dejaremos nuestros enlaces
Rellenando el Clip en el que dejaremos nuestros enlaces

Lo interesante de esto es que podemos colar tantos enlaces como queramos y todos ellos van a ser dofollow. Si hay algún escéptico tan solo tenemos que abrir el inspector de código del navegador para comprobar que estos enlaces transfieren linkjuice.

Enlace dofollow DA-93 en Linkspiration
Enlace dofollow DA-93 en Linkspiration

Puedes utilizar esta página para conseguir enlaces que complementen con una de tus pirámides de enlaces. A día de hoy, yo lo estoy utilizando como primer nivel de mi pirámide, utilizándolo como si fuera una especie de blog secundario en el que dejar la introducción de los artículos que escribo aquí y poner un “Leer más” que obviamente, nos lleva a esta página. De hecho, es muy importante que, aunque se trate simplemente de un lugar en el que dejar enlaces, no debemos descuidar las buenas prácticas SEO On-Page para que no haya problemas.

Sin más, espero que le deis tanta utilidad como yo le estoy dando a esta web.

 

¡Hasta que volvamos a olernos!

Autopsia de un SEO On-Page perfecto

Antes de empezar el post, quería disculparme. Llevo toda esta semana malito 😦 y no he tenido ganas ni siquiera de encender el ordenador, bueno si pero solo para ver series y películas. Me he visto en total dos series, con sus dos temporadas cada una de ellas y unas cinco películas en total. He visto muchas buenas y mucha mierda sobrevalorada también. Otra de las cosas que he hecho en mi baja preventiva ha sido recorrerme Internet tres veces por los menos desde mi teléfono móvil. En una de estas pasadas, he encontrado una infografía del gran Backlinko que viene a ilustrar un post que tenia pendiente desde hace muchísimo, así que qué mejor escusa que presentar esta infografía para hablar de un tema como es el SEO On-Page.

Autopsia de la perfecta estrategia SEO On-Page
Autopsia de la perfecta estrategia SEO On-Page

 

Estrategia perfecta del SEO On-Page

Vale, la infografía esta en inglés pero tampoco pasa nada, se entiende bien, además es muy posible que todos ya conozcamos de que se habla en cada uno de los puntos por lo que no vendrá mal volver a darle un repasito. Si por el contrario es la primera vez que oyes hablar de este palabro (SEO On-Page) estos doce puntos te van a ayudar a optimizar tu sitio.

1. Potencia tus URL amigables

Lo que buscas con este primer punto es hacer que tus URLs sean fáciles de recordar. Tenemos que darle ayudas a los usuarios para que se acuerden de la dirección de nuestra mejor entrada y esto no lo vamos a conseguir si tenemos URLs de la siguiente forma: http://gorkamu.com/?p=736

Bueno, es posible que los usuarios sean capaces de recordarlas durante un tiempo corto pero si en cambio nuestras URLs tienen un formato  amigable como http://gorkamu.com/autopsia-seo-on-page-perfecto estate seguro que ayudaremos muchísimo a los usuarios.

Y ya no de cara a los usuarios, nuestro amigo Google prefiere las URLs que son fáciles de recordar y amigables ya que eso denota la naturalidad que tanto busca con sus servicios. Según ha declarado Google, en aquellas URLs que sean amigables, las primeras 3-5 palabras son las que reciben más peso, así que ahí hay una gran oportunidad, por no decir obligación, de colar la palabra clave de tu artículo.

Si trabajas con WordPress, puedes cambiar la configuración de tus URLs en Ajustes > Enlaces Permanentes

Cambiando la estructura de nuestras URLs
Cambiando la estructura de nuestras URLs

 

2. Utiliza tu palabra clave al principio del título

Cuando hablamos de optimización SEO On-Page sabemos que cada artículo de tu pagina web debería explotar y exprimir una palabra clave en concreto, a no ser que tengas un blog personal en el que te de igual toda estrategia y te dediques a contar tus vacaciones en Benidorm. Si no es el caso, deberías colocar la palabra clave por la que estas intentando ranquear al principio del título de cada post. Se que a veces esto no es natural y más en castellano, pero deberíamos hacer un esfuerzo para trabajar en esta buena prácica ya que es un factor SEO On-Page importantísimo.

Según un estudio de Moz.com, se encontraron con que las páginas cuyo título empieza por la palabra clave conseguían mejores posiciones en las SERPs que aquellas páginas que tenían la keyword en el medio o al final.

 

3. Enamora con contenido multimedia

Si un artículo es bueno dará igual como pintes la mona, seguirá siendo bueno y ya esta. Pero el introducir contenido multimedia en tus entradas tienen una ventaja de cara a las métricas. Las imágenes y sobre todo los vídeos ayudan a reducir el porcentaje de rebote y aumentar el tiempo que pasa un usuario en nuestra web.

Siempre es agradable ver como un usuario no se larga a los segundos de haber entrado en el post que más nos hemos currado. Otro tema importante es que haciendo uso de los recursos multimedia amenizamos la lectura.

Vale, ya no somos niños de parvulitos que leemos libros con dibujos, pero las imágenes y vídeos en los post no hacen daño, de hecho son beneficiosos para los usuarios porque es una buena oportunidad de ampliar información.

A tope de multimedia
A tope de multimedia

 

4. Utiliza links salientes

Esta es una de las estrategias básicas de lo que llamamos White Hat. Todo buen artículo debería tener un enlace saliente a un sitio en el que se amplie la información de lo que estas hablando y otro enlace interno a otro post de tu página web, si ya puedes fomentar una estructura SILO pues mejor que mejor.

Los enlaces salientes a páginas de autoridad ayudan a aumentar el ranking de la página web en los resultados de búsqueda.

 

5. Haz uso de tu palabra clave en el primer párrafo

Tu amada keyword aquella que estas intentando rankear en los resultados de búsqueda debería aparecer en el primer párrafo de cada entrada. Esto no significa que inundes tus primeras 100-150 palabras con tu palabra clave si no que la menciones para que los usuarios sepan que tema vas a desarrollar a lo largo del artículo, es bastante probable que esto ya lo estés haciendo de una manera totalmente natural pero nunca debes olvidarte…

 

6. Envuelve tu palabra clave con la etiqueta H1

A medida que escribas tu artículo, tendrás que hacer uso de las diferentes etiquetas de título existentes para organizar toda la información que presentas. Es muy importante que envuelvas tu palabra clave bajo la etiqueta H1 ya que con esto le estas dando la importancia que merece a tu keyword. Hay otras etiquetas de título que van desde un primer nivel jerárquico (H1) hasta una profundidad de 6 subtitulos. No hace falta que tires de código, si estas trabajando con WordPress, esto lo podrás hacer en el menú desplegable del editor de texto.

Aquí podrás cambiar las etiquetas de título sin tirar código
Aquí podrás cambiar las etiquetas de título sin tirar código

 

7. Mejora tu velocidad de carga

Según Google, un importantísimo factor para el posicionamiento es la velocidad de carga de un sitio web. Esta demostrado que toda web cuya velocidad de carga supera los 4 segundos pierde un 75% de su tráfico objetivo. Esto es malo para el negocio. Existen muchas técnicas para aligerar una página web, desde instalar los plugins necesarios, minimizar archivos javascript y css, comprimir imágenes, migrarnos a un servidor más rápido… en fin, que soluciones hay…

Una herramienta muy básica pero que te dará una visión general de que cosas tienes que mejorar, la puedes encontrar dentro de Google WebMaster Tools. La herramienta en cuestión se llama PageSpeed Insights y te muestra un informe de que cosas fallan y como solucionarlas tanto para versión móvil como para ordenador.

Analiza la velocidad de carga de tu web
Analiza la velocidad de carga de tu web

 

8. Añade modificadores a tu título

Tenemos un lenguaje muy rico que no estamos aprovechando al 100%. Puede parecer una tontería pero el uso de modificadores lingüisticos en los títulos de tus entradas pueden traerte una cantidad enorme de visitas. Así pues, utilizar palabras como “la mejor entrada…“, “guía 2014…“, “la última review…” te ayudarán a rankear mejor aquellas versiones longtail de tu palabra clave. Realmente esto tiene más de marketing que de SEO y es una buena oportunidad para probar otras técnicas de venta 😛 así que… hazte amigo de la RAE.

 

9. Usa botones sociales

Las señales sociales son fundamentales para un buen posicionamiento. No tenemos que olvidarnos a la hora de compartir y promover nuestros artículos por aquellas redes sociales donde esta nuestro público objetivo. Esto no significa que tengamos que atacar todas las redes sociales, yo me centraría con más cariño en Google+. A mi no me gusta la red social de los chicos de G, pero el buscador da más importancia a los artículos que se mueven allí que a aquellos que únicamente aparecen en Facebook o Twitter, no estoy diciendo que te olvides del resto de redes sociales, estoy diciendo que no hay que descuidar a Google+

Por eso tenemos que darles todas las facilidades a los usuarios para que puedan “hacer el trabajo” por nosotros y movernos el artículo. El incluir botones sociales al final de nuestros artículos puede llegar a incrementar el “Social Sharing” en un 700% y eso implica más visitas.

Uno de los mejores plugins para WordPress para incrustar estos botones sociales es ShareThis, tiene muchísimas opciones de configuración y de personalización ademas de ser cojonudo.

ShareThis: de los mejores plugins para compartir contenido
ShareThis: de los mejores plugins para compartir contenido

 

10. Escribe artículos largos

Cuando leía mis primeras “buenas prácticas” del SEO On-Page, había gurús que recomendaban crear artículos de unos 300 palabras mínimo. Más adelante se pasó a las 700 palabras. Hoy estamos en las 1500 palabras de longitud. Escribir un artículo largo tiene ventajas muy buenas. De primeras, a Google le estas diciendo que tu artículo es de calidad, que sabes de que hablas. No es un artículo enfocado al spam. Y de segundas, consigues reducir tu tasa de rebote. Un usuario que tenga que leer un artículo de 1500 palabras tardará más que si es un artículo de 300 palabras… y esto aumentará el tiempo de permanencia en la web. Así que ya sabes, ¡a sacar tu lado escritor!

 

11. Elimina tu porcentaje de rebote

El porcentaje de rebote es uno de los datos que le indican a Google la calidad de tu sitio y el interés de los usuarios. Este porcentaje se mide en el tiempo que tarda un usuario en abandonar tu sitio web. Esta claro que si tienes visitas que duran 3 segundos es porque los usuarios no han encontrado en tu página web lo que andaban buscando y eso yo lo achaco a dos causas, no sabes dirigirte a tu público objetivo o tu contenido no aporta nada de valor. Puedes hacer el mejor artículo que exista, pero si no hay nada que consiga retener a tus visitas, ten por seguro que tu tasa de rebote va a seguir siendo alta.

Una solución para mejorar la tasa de rebote es incluir enlaces internos y utilizar los “related post” para promover que los usuarios sigan navegando por tu sitio. También existe un pedazo de código circulando por internet, bueno, en realidad es una modificación del código que utiliza Google Analytics, que redefine el tiempo a partir del cual Google considera que ha existido un rebote, lo dejo a continuación.

setTimeout(function() {
_gaq.push(['_trackEvent', 'Sin-Rebote', 'Sin-Rebote', '30 sec']);
},30000);

Esta pedazo de código se tiene que insertar entre

_gaq.push(['_trackPageview']);

y

(function() {
var ga = document.createElement(‘script’); ga.type = ‘text/javascript'; ga.async = true;
ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js';
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(ga, s);
})();
Petándolo en las métricas. PUTA BIDA TETE
Petándolo en las métricas. PUTA BIDA TETE

 

12. Espolvorea con palabras clave LSI

Las palabras clave LSI o ISL (de Indexación Semántica Latente) son los sinónimos que utiliza Google para determinar la relevancia de una página web. Estos sinónimos los podemos encontrar al final de la página de resultados de búsqueda. Algunas veces podemos utilizar este tipo de palabras para encontrar keyword long-tail para nuestros artículos optimizados. De todas maneras, cuando escribimos un artículo largo tenemos tendencia a incluir variaciones de nuestra palabra clave a posicionar de manera natural pero nunca esta de más pensar en alternativas y colarlas en nuestro artículo.

Un ejercicio que me gusta practicar es intentar pensar en todas las búsquedas por las que quiero que me encuentren y así obtengo un par de LSI valiosas para el SEO On-Page.

Palabras LSI
Palabras LSI

 

Y con esto terminamos el artículo sobre buenas prácticas para el seo on-page, obviamente hay mas recomendaciones, pero siguiendo esta guía conseguirás rankear mejor tus palabras clave. Uno de los mejores plugins para iniciarte en el SEO On-Page es WordPress SEO by Yoast. Ahora solo os toca entrar en harina y practicar.

 

¡Hasta que volvamos a olernos!