Tutorial HTML básico para bloggers

Cuando un autor quiere personalizar su blog, el principal escollo con el que se encuentra es el grado de libertad que le concede su tema WordPress.

Según el tema sea más profesional o más simplón, este techo será más alto o más bajo, pero siempre te marcará un límite para las ideas concretas que quieras implementar en tu blog.

Tutorial HTML para bloggers

Imagen de Fotolia - ©© razvan186

Pero tengo una buena noticia: existe una manera de saltarte ese techo para cualquier tema WordPress que es la que te contaré en este post.

La manera de eliminar ese techo y no tener límite alguno en el nivel de personalización que quieras lograr en tu blog, y que aplicamos aquí en Ciudadano 2.0 se basa en dos pilares:

  1. Saber usar las tecnologías web en las basa cualquier página web, concretamente HTML y CSS para crear diseños a medida para aquellas partes de tu blog que quieras personalizar tales como, por ejemplo, la cabecera de tu blog o el pie que viene al final de todos los posts de este blog, justo después de la cajita con la información del autor.
  2. Saber integrar estos cambios en tu blog mediante las técnicas correctas que son las que WordPress ya ha previsto para ello: los hooks y los shortcodes.

En el post de hoy me centraré en cómo se crean contenidos en HTML, o sea, cómo se crea una página web completa o “trozos” personalizados para usarlos en tu blog, ya sea WordPress.org, WordPress.com o Blogger. La parte de los hooks y shortcodes la abordaremos más adelante.

Como verás a lo largo de este post, lo mejor de todo es que resulta ser bastante sencillo de entender para prácticamente cualquier persona. Y muy importante: vas a entender también mejor cómo se hace un buen SEO en tu blog (SEO On Page). Así que, de alguna manera, este es también un post de SEO porque haré referencias a los aspectos fundamentales del SEO On Page.

Además, llevaremos lo aprendido a la práctica con un ejemplo de aplicación concreto en el que crearemos un atractivo widget personalizado de botones grandes para las categorías de tu blog al estilo de los que se ven últimamente en temas modernos como Genesis.

Si escoges bien tus categorías (que no deberían ser más de 8-10), un widget así puede aumentar además ligeramente el tráfico de tu blog y la permanencia de los usuarios.

Por cierto, si quieres recibir emails que te avisen de nuevos posts como éste, apúntate un poco más abajo a nuestra lista de correo.

Qué es el HTML (HyperText Markup Language)

Como ya hemos comentados más de una vez, cualquier página web está hecha en código HTML. Lo que se carga en el navegador cuando accedes a una página web es un fichero con el código HTML de esa página, junto con otros elementos como, por ejemplo, sus imágenes.

En un blog esto no es diferente porque un blog es simplemente un sitio web más como cualquier otro, sólo con la peculiaridad de que sus contenidos cuentan con ciertas características típicas de los blogs (publicación periódica de contenidos, posibilidad de hacer comentarios, etc.).

Conceptos básicos: Etiquetas, elementos y atributos HTML

Técnicamente, el HTML es un lenguaje de marcado que describe de una manera estructurada el contenido de una página. Ha habido diferentes versiones, la más usada HTML 4.01 y poco a poco se está implementando ahora también la nueva versión HTML 5. En aras de simplicidad, en este post me limitaré a los elementos de las versiones HTML 4.01 / XHTML que son las versiones que por así decirlo se han usado “toda la vida”.

Por ejemplo, los contenidos de este mismo post, en página HTML simplificada al máximo podrían tener la siguiente estructura de código HTML:

Lo primero que te llamará la atención son las palabras entre corchetes. Esto son las así llamadas etiquetas HTML.

La primera línea, “<!DOCTYPE HTML>”, es diferente de las demás. Es una etiqueta especial que debe ir en la primera línea e identifica al fichero como un fichero HTML.

A continuación verás que las etiquetas forman una especie de estructura jerárquica yendo anidadas (salvo esta primera línea especial). De hecho, siempre hay una etiqueta de apertura y otra de cierre que es la misma etiqueta, pero con una barra delante del nombre de la etiqueta, que componen lo que se conoce como un elemento HTML.

Por ejemplo, “<title>” (etiqueta de apertura) y “</title>” (etiqueta de cierre) y en medio viene un contenido en texto. A su vez, estas etiquetas pueden contener a otras etiquetas, como es el caso de <head> que encierra al elemento “title”.

editor de texto de wordpress

Éste es el editor de texto (que es código HTML) de WordPress, fíjate en las etiquetas HTML, aunque por la filosofía de este editor en particular algunos elementos como, por ejemplo, <p> no se visualizan, pero se crean en la página final.

La idea fundamental del lenguaje HTML es tan simple como esto. El uso de este tipo de etiquetas para identificar de una manera estructurada contenidos es la esencial del concepto de “marcaje” de un lenguaje de marcado. Como dice su nombre, “marcan” el contenido. Le dan estructura y semántica.

Por ejemplo: la etiqueta “<h1>” marca un contenido que es un título de “nivel uno” que sería algo así como el estilo “Título 1” en un documento de Word, una etiqueta “<h2>” equivalente a un subtítulo de nivel 2 (que iría dentro del contenido bajo un título 1) y así sucesivamente. En HTML se llegan a diferenciar un total de 6 niveles, de h1 a h6.

Así, estas etiquetas permiten identificar títulos y subtítulos, y gracias a que el navegador sabe que se trata de títulos y subtítulos puede visualizar cada nivel del título de manera diferente (tipo de letra, tamaño de letra, etc.) tal como estamos acostumbrados a verlo en cualquier página web o cualquier libro.

En cambio, la etiqueta “<p>” demarca a un simple párrafo que sería equivalente al estilo “normal” en un documento Word que no es ningún título.

Por último, me gustaría que te fijases en la etiqueta “<a>”. Ésta es la etiqueta por excelencia, si cabe, del HTML: la que demarca un hiperenlace.

Además, me sirve para introducir en otro concepto fundamental: los atributos.

Si te fijas, en el caso de la etiqueta “<a>”, antes del corchete de cierre vienen dos palabras: “href” y “target”. Estos son dos atributos y sirven para especificar parámetros adicionales en una etiqueta, lo cual hace el concepto de etiqueta mucho más potente.

En este caso, por ejemplo, es con el atributo “href” cómo se indica a qué página debe enlazar el texto que demarca la etiqueta y con valor del parámetro “target” indicamos que, además, queremos que este enlace queremos que se abra en otra pestaña del navegador.

El HTML y el SEO en un blog

Vistas ya algunos elementos básicos de HTML es un buen momento para algunos apuntes importantes sobre el SEO en un blog, concretamente el SEO On Page (la optimización a nivel de la propia página).

Conquista los buscadores con tu blog

Con este eBook gratuito llegarás a la cabeza de los resultados de Google:

  • En 1 hora aprenderás el SEO que realmente necesitas.
  • Aprenderás cómo saber qué busca la gente en Internet.
  • Sabrás qué búsquedas te interesan y cuales no.
  • Conseguirás aparecer entre los primeros resultados para esas búsquedas.
¡Buenas! ¿Me dices tu nombre?

¡Un placer conocerte!

Apuntáte aquí y recibirás gratis una copia del eBook.

Nunca usas más de una etiqueta H1

Una regla de SEO básica es usar un solo título <h1> en un post (y en cualquier otra página). Y ese <h1> es el título principal del post. Si no sabías HTML, hasta ahora esto te habrá sonado a chino, pero ahora ya puedes entender a qué se refiere.

Es una regla muy importante para un correo SEO de tus contenidos porque los buscadores toman el texto de un elemento <h1> como unos de los principales criterios para identificar las palabras cuales para las cuales posicionarán ese contenido. Por tanto, lo que ocurre si creas más de un elemento <h1> es que estás confundiendo al buscador porque con 5 o 6 elementos <h1>, por ejemplo, ¿con qué criterio decide cuáles son las palabras clave buenas que tú quieres que use realmente para posicionar el contenido?

La meta-descripción

Imagen de la meta-descripción en los resultados de búsqueda de Google

Se ha resaltado en rojo el texto de la meta-descripción.

La meta descripción es un texto en una etiqueta especial que podrás ver a continuación en el ejemplo de estructura básica de una página HTML y que los buscadores usarán como otra fuente de la que extraer palabras clave. Además, ese extracto de texto, si existe, es el que usarán en los resultados de búsqueda.

Así que es doblemente importante contar con una meta descripción.

WordPress, por defecto, en este momento no permite explicitar una meta-descripción, has de usar un plugin como WordPress SEO para hacerlo.

Estructura básica de una página HTML

Con este preludio ya puedes entender la estructura o “esqueleto” de cualquier página web que es cómo sigue:

La etiqueta <html> engloba el documento y la etiqueta <head> engloba información especial que no se ve directamente como contenido de la página como la meta-información de la codificación de caracteres (encoding) que usa la página o la meta descripción antes mencionada. La etiqueta <title> que es realmente muy importante para nuestros intereses por dos motivos:

  1. Es el texto principal que describe una página web. Se suele considerar el segundo elemento SEO On Page más importante de una página web siendo el primero el contenido en su conjunto.
  2. Aparece en sitios importantes: barras de título de las ventanas, listas de marcadores de vínculos y listas de resultados en un servicio de búsqueda. Por tanto, es muy importante que sigas unas determinadas pautas al crearlo.

Para el resto, te remito a este curso gratuito que viene también en las referencias del post.

Precisamente por eso, los plugins de SEO para WordPress como WordPress SEO que puedes encontrar aquí, permiten que el usuario pueda crear expresamente este título.

Si te interesa el tema blogging, tampoco te pierdas nuestra recopilación de los mejores recursos para blogs & bloggers

A partir de aquí ya nos centraremos solamente los contenidos de la etiqueta <body> puesto que aquí irá el contenido visible de la página (los elementos como <h1> o <p> que componen el contenido visible de la página.

Elementos HTML importantes para bloggers

En HTML existe una gran cantidad de etiquetas. Las más útiles para un blogger serían (según mi experiencia personal) las que listo a continuación, junto con un enlace con la explicación de lo que hacen exactamente y cómo usarlas. Para ver todas las etiquetas HTML, en este enlace dispones de un listado completo, junto con los detalles de cada una.

Títulos, párrafos y formato básico de texto

Con las siguientes etiquetas se crea la estructura básica del contenido en HTML:

Enlaces e imágenes

Los hiperenlaces son el elemento “estrella” del HTML. Gracias a ellos la web se ha convertido en lo que es hoy. No menos importante es también la capacidad de integrar imágenes en una página web.

Listas y tablas

Las listas y tablas son elementos imprescindibles para estructurar mejor un contenido, en HTML se usan las siguientes etiquetas para ello:

Formularios

Un recuadro para autenticarte con usuario y contraseña en una aplicación web o el típico formulario de contacto de una web son ejemplos de formularios típicos.

Los formularios se construyen básicamente con las etiquetas <form> e <input> pero con un poco más complejas de usar y requieren, por tanto, que aprendas a utilizarlas.

Elementos especiales

HTML incorpora una serie de elementos especiales para diferentes propósitos, dos de los más importantes son los siguientes:

Ejemplo práctico

Aunque lo que te he contado es muy básico, ya sólo con esto y un poco de creatividad, puedes hacer montones de cosas en tu blog.

Como ejemplo vamos a hacer algo muy simple: recrear el widget de categorías de este blog y que ahora mismo se encuentra en la parte de arriba en la barra lateral derecha. Además, como verás, será exacto, un calco del widget original.

El widget de categorías que se creará en el ejemplo

En el lado izquierdo se puede ver cómo queda el widget si se usa HTML sin más, sin aplicar estilos CSS.
En el lado derecho se ve el widget de categorías de Ciudadano 2.0 con el aspecto que tiene en el momento de la publicación de este post usando los correspondientes estilos CSS.

Para el ejemplo hemos incluido dos descargas:

1. Página de demo

Esta página contiene el widget y permite ver muy bien cómo se ha construido el código HTML del widget y cómo se ha incrustado en la propia página, puedes descargar el código aquí. Para poder verla, simplemente descomprime el fichero comprimido y una vez descomprimido, abre el fichero “categories.html” en la carpeta “demo-widget” que se habrá creado en tu ordenador.

Si quieres trastear un poco con el código, usa un editor de calidad que sepa tratar correctamente la codificación de caracteres (encoding) como Notepad++ para PC o TextWrangler para Mac.

2. Código listo para usarse en un blog como widget

Ésta descarga contiene un trozo de código HTML que implementa una versión del widget lista para usarse en cualquier blog que admita el uso de HTML como WordPress o Blogger.

En WordPress, por ejemplo, es tan sencillo como crear un widget de texto (viene por defecto en WordPress) y pegar el trozo de HTML descargado en el área de texto del widget. Si el enlace anterior se te hubiese abierto como texto en el navegador, simplemente copia y pega ese texto.

El código es idéntico al que usa el widget de este blog, aunque aquí lo hemos implementado como un plugin a medida que ofreceremos próximente en nuestras descargas. Si quieres enterarte de ello, ya sabes dónde suscribirte 🙂

Imagen de un widget de texto en WordPress

El código HTML pegado en el área de texto del widget de texto estándar de WordPress.

Para tener el aspecto que tiene era necesario definir algunos estilos CSS (el siguiente tema en esta serie) los cuales no se han definido en un fichero CSS aparte (como es habitual), sino que se han incluido en el atributo “style” de los elementos HTML para que el widget se fácil de integrar. Por tanto, para cambiar su aspecto es necesario personalizar estos estilos CSS.

Por otra parte, para adaptarlo a tu blog, es tan simple como cambiar el texto de los elementos “<a>” junto con el correspondiente enlace en el atributo “href” y, según tengas más o menos categorías, añadir o eliminar elementos “<a>”.

Por último, ten en cuenta que, según los estilos CSS que use tu blog, es posible que el aspecto del widget varíe ligeramente. En este caso, si quieres eliminar estas diferencias, será necesario tener conocimientos CSS para modificar ligeramente los estilos CSS de tu blog o los del widget.

Cómo ver el HTML de cualquier página web

Ahora que ya conoces los fundamentos de cómo se construye una página web, te animo a que “cotilles” un poco cómo están hechas algunas de ellas.

captura del inspector de chrome

Captura del inspector de HTML de Chrome:
En la parte inferior derecha el usuario ha seleccionado un elemento HTML que el inspector resalta en la página y para el cual muestra los estilos CSS en la parte derecha.

Para ello te recomiendo usar los inspectores de código que traen Firefox, Chrome o el Internet Explorer y que en los tres puedes activar con la tecla F12. En vez de visualizar el código HTML simplemente como texto, lo visualizan como árbol, lo que lo hace mucho más fácil de entender y de inspeccionar.

Ahora bien, dicho esto, una advertencia:

No te asustes cuando veas ejemplos de código real, hoy en día la gran mayoría de las páginas web son muy grandes y complejas, de modo que si ves ese código HTML por primera vez, de entrada, te puede impresionar algo. Pero no te preocupes, si lo miras con calma, reconocerás los elementos que hemos comentado aquí y te podrás hacer perfectamente una idea de cómo está hecha la página en cuestión. Aun así te recomiendo que busques ejemplos sencillos al principio.

Conclusiones

Como ves, no es difícil entender cómo funciona el lenguaje HTML e, incluso, con un conocimiento tan básico como el que has podido adquirir en este post, ya se pueden hacer cosas muy interesantes para personalizar un blog.

No obstante, la realidad es que tener conocimientos de HTML sin conocer también el lenguaje CSS es prácticamente absurdo porque sin saber CSS las opciones de diseño son tan limitadas que en la práctica no puedes hacer nada decente sin usar también CSS.

Por eso el siguiente post de esta serie se centrará en las hojas de estilo CSS que, al igual que el HTML, a un nivel básico ya dan bastante de sí y a ese nivel tampoco son difíciles de aprender.

Si quieres que te avisemos de la publicación de este post, suscríbete a continuación a nuestra lista de correo:

Multiplica el Nº de gente que lee tu blog

Con este eBook gratuito de plantillas de copywriting crearás titulos que dispararán los clics en tus contenidos:

  • 77 Plantillas de títulos probadas que multiplicarán los clics.
  • Sacaras infinitas ideas crear tus propios títulos.
  • Con las palabras "mágicas" redactarás textos irresistibles.
¡Buenas! ¿Me dices tu nombre?

¡Un placer conocerte!

Apuntáte aquí y recibirás gratis una copia del eBook.

Referencias

Si quieres aprender HTML a fondo, puedes encontrar muchísima información de calidad en la web entre la cual me gustaría destacar estos recursos:

  • Librosweb.es: Una gratuita y completísima colección de libros online para aprender tecnologías web desde cero orientada a principiantes. Es una muy buena opción para empezar con coste cero.
  • Learning Web Design: Éste es el libro con el que he aprendido yo. Después de ver muchos, me sigue pareciendo el mejor. Cubre HTML + CSS.
  • Lista de etiquetas HTML: Una lista muy práctica para consultar los detalles de las etiquetas HTML.
  • Editor Notepad++ (PC).
  • Editor TextWrangler (Mac):

Y en este enlace te dejo un vídeo-tutorial HTML + CSS básico bastante bueno:

Acerca del autor: Berto López

Soy autor y cofundador de este blog, actividad que realizo como hobby ya que las nuevas tecnologías siempre me han atraído mucho.

Ahora trabajo por cuenta ajena, pero he sido empresario durante casi una década trabajando en la implantación de proyectos tecnológicos en sectores con carencias en conocimiento de las nuevas tecnologías, como Retail y Pymes.

De hecho, esta experiencia ha sido la inspiración para el blog: ayudar a profesionales y pequeños empresarios a conocer y aprovechar el potencial de las nuevas tecnologías y la web 2.0.


Comentarios

  1. Algunos de los blogs que hemos trabajado han sido con temas, pero tienes razón; cuando se trabaja al margen de éstos, el nivel de personalización es mayor.

    En lo personal, aunque no soy desarrollador (en la agencia trabajo como diseñador gráfico), sé algo de código y algunos de me han sido útiles para “apoyar” sobre todo en el diseño a los desarrolladores.

    Saludos. Excelente post.

  2. MUCHAS GRACIAS Berto por tus post y contenidos de calidad que nos ayudan mucho a los que estamos empezando en este mundo.
    Un saludo

  3. Rogelio Pumajulca dice:

    Un tema muy importante es la facilidad para realizar cambios en nuestro blog de acuerdo a nuestro público objetivo, interés o pura creatividad. En ese sentido, este post ayuda a entender de manera sencilla y ordenada desde el punto de vista de un blogger como está constituido el lenguaje HTML. Asimismo, muestra la sencillez y potencial de este lenguaje. Podría agregar que es recomendable usar un IDE que disminuya la complejidad que implica programar una página entera para los nuevos usuarios, pues estos facilitan la edición, visualización y rápida respuesta ante cualquier cambio. Por último, invertir tiempo en aprender y dominar css será recompensado con creces, pues este permite mostrar los atributos visuales que muchos usuarios desean expresar.

  4. Sergio Canceco dice:

    hola, gracias por el aporte!

    Estoy empezando un blog de finanzas pero no pasaba del copiar y pegar códigos que no entendía ni una coma. Con sólo ver los dos primeros videos, puedo decir que ya estoy para empezar a molestar un poco.

    Consulta, estoy usando blogger con un script de una página que uso para gráficos (www.tradingview.com). Tienen un widget que te permite usar la aplicación desde un sitio o blog, me gustaría saber si tenés conocimiento acerca de este site, si es posible postear un gráfico dentro de mi blog o sitio y no en el host?

    Slds.
    Sergio

    • Berto López dice:

      Hola Sergio,

      No conozco el sitio, pero casi seguro que sí, este tipo de widgets suelen poder usarse directamente como código que se integra en tu página HTML.

      ¡Un saludo!
      Berto

  5. Berto no alcanzas a imaginar lo que estos tutoriales nos ayudan a los neofitos en todos estos temas “webisticos”. Recien arranqué este 2016 empezando a montar mi blog de cocina desde cero y me he dado como 50mil tropiezos jejejeje, pero ya voy aprendiendo. De hecho me identifiqué mucho con el inicio del tutorial: “Cuando un autor quiere personalizar su blog, el principal escollo con el que se encuentra es el grado de libertad que le concede su tema WordPress”, en efecto he descargado cientos de temas, y no podía hacer mucho. Sigo con el de CSS. Gracias!

  6. Muy interesante! yo estoy tomando un curso de HTML en este momento en una escuela en Mexico D.F y aqui me tienes investigando mas sobre el tema.

  7. Hola Berto

    Hola Berto. Recién me interese por la tecnología html. Aunque hay cientos de miles de websites ella fuera que hablan al respecto me encanta la manera detallada como explicas cada punto. Una pregunta, tengo una Mac: que prog recomiendas para escribir html? Gracias mil

  8. Hola Berto, hace unos días estuve leyendo este post y me decidí a aprender algo de html y css, estoy viendo un curso bastante completo unas 50 horas y me ha surgido una pega. He querido cambiar un post de mi blog y hacer unas listas anidadas ordenadas y cuando vuelvo de la previsualización, el editor me ha corregido el código y en vez de utilizar la etiqueta me utiliza lógicamente me ha quitado el orden numérico y además me quita la anidación, me podrías decir algo sobre porque hace esto WordPress o si tienes idea por donde puedo investigar.

    • Berto López dice:

      Hola Antonino,

      El editor de WordPress la verdad es que es probablemente su peor parte, filtra intencionadamente ciertas etiquetas HTML con la intención de evitar errores del usuario, un tema complejo que me es imposible de explicar en un comentario.

      Total, que para hacer contenidos con estructuras complejas el editor de WordPress es un problema. Hay diversos plugins que pretenden solucionar el tema, pero no te puedo recomendar ninguno concreto puesto que es un terreno en el que aún no me he metido mucho.

      ¡Un saludo!
      Berto

  9. Excelente aritculo. No me habia dado cuenta que lleva mas de un año publicado, me sirvió mucho. Muchas gracias.

  10. Excelente post !! Saludos

  11. Me parece excelente el material.

    Aunque me gustaría saber más a fondo la clase de diferencias semánticas que hay con html5. ¿Qué tan bien ves tú que están preparados los navegadores de dispositivos móviles, como tablets, smartphones, etc?

    Saludos.

    • Berto López dice:

      Hola Cristopher,

      En términos generales, el que mejor he visto es Chrome, pero no soy una referencia para opinar, no me dedico a ello. Solamente hago un poco de desarrollo en ratos libres.

      En cualquier caso, aquí puedes probar tú mismo con diferentes navegadores: http://html5test.com/

      ¡Un saludo!
      Berto

  12. Estupendo artículo Berto, como nos tienes habituados a leer. ¡Un placer visitar Ciudadano2Cero!

  13. Buen post, Berto. Muy útil sin duda para dejar claras unas cuantas cosas básicas. Un saludo 🙂

  14. Hola! gracias por la info, intentaré ponerlo en práctica, un saludo!

  15. Ostras! gracias, gracias y gracias. Me viene de perlas 😉

  16. Buen post Berto, siempre es interesante conocer la base. Lo que me falta es tiempo para poder profundizar!!!
    Saludos

  17. Como aporte, recomiendo encarecidamente el uso del plugin “Black Studio TinyMCE”, que convierte los widgets de “texto html” habituales en editores como los que tienes en la creación de entradas, facilitando (mucho) tanto la escritura en código HTML como la inserción de imágenes y links.

    Por otro lado, hubiera hecho en el caso del menú que ponéis de ejemplo más hincapié en el “a:hover”. Es fundamental, y creo que estéticamente da más juego cambiando su “background-color” en ese estado que con el “underline”.

    Mis felicitaciones por otra biblia llena de buen contenido 😉

    • Berto López dice:

      Hola Omar,

      Gracias por tu aportación 🙂

      Tienes razón con tu observación, pero ten en cuenta que eso es la parte CSS y en esta entrega me he querido centrar en el HTML. En el siguiente post me centraré en la parte de la CSS y seguramente introduzca mejoras sobre el mismo widget.

      Por otra parte, la CSS la quise mantener fiel al widget original delo blog donde está así y ciertamente es mejorable. De hecho, darle una vuelta es una de las tareas pendientes que tengo, la implementación actual se hizo un poco a matacaballo.

      ¡Un saludo!
      Berto

  18. Hola Berto:

    Muchas gracias por la información, siempre es bueno regresar a las bases, pero sobre todo tener siempre en mente estos recursos elementales para cualquier persona que trabaja en la web.

    Una duda ¿si usamos el plugin WordPress SEO, basta para hacer SEO on page o requiere que hagamos algo más?

    Saludos.

  19. Muy buen post Berto. Felicidades!

Estamos de vacaciones :)

Nos estamos tomando un pequeño descanso. A la vuelta volveremos a activar los comentarios.

Rellena el formulario y accede a nuestro training rápido de pro-blogging

Aprenderás paso a paso y desde cero cómo usar las mejores técnicas, trucos y secretos de los top bloggers para dar el salto al siguiente nivel

Y todo 100% gratis :)