Decimotercero post de ayuda. Podéis ver los anteriores aquí.

En este tutorial veremos cómo añadir una nueva barra lateral a nuestra página. Como ya tenemos una a la derecha, la añadiremos a la izquierda.

(Nota: Antes de nada, revisad los errores comunes. Es importante.)

Cómo ya sabemos la barra lateral está formada de la siguiente forma:

<div id="sidebar">
       <div id="top">
               CONTENIDO
       </div>
 </div>

Para añadir una barra a la izquierda vamos a usar la misma estructura, pero renombrando los id:

<div id="sideleft">
       <div id="topleft">
               CONTENIDO
       </div>
 </div>

Tenemos que hacer lo mismo en el CSS (style). Buscamos y copiamos los siguientes códigos completos (desde el primer # hasta el } de cierre):

#wrapper #sidebar {

#wrapper #sidebar #top {

Y los renombramos como arriba (#sideleft #topleft). Además, en #sideleft cambiamos:

float: right;

por

float: left; 

Y añadimos:

margin: 0px 20px 0px 0px;

Siendo 20px el margen entre la barra de la izquierda y la parte del contenido (la de los post).

Y en el #topleft cambiamos:

padding: 0 20px;

por 

padding: 20px;

Y añadimos:

margin: 0px 0px 20px 0px;

Los 20px de padding serán los márgenes interiores y los 20px la separación entre 2 topleft.

En mi caso quedaría lo siguiente (lo pongo de ejemplo para que veáis de forma más clara lo que debéis hacer, pero no recomiendo un copy/paste de este código, ya que vuestra barra de la izquierda será distinta de la de la derecha):

 #wrapper #sideleft {
                margin: 0px 20px 0px 0px;
                width: 260px;
                float: leftt;
                color: {color:Background};
                font-family: {font:Accent}
            }
      #wrapper #sideleft #topleft {
                    border-radius: 10px 10px 10px 10px;
                    border: 4px solid #000; 
                    box-shadow: 0 0 5px 5px rgba(0,177,223,1);
                    background: #fff;
                    padding: 20px;
                    margin: 0px 0px 20px 0px;
                }

Ahora tenemos que buscar #wrapper { y a su width sumarle el width de sideleft y el margen que hemos puesto. En mi caso teníamos esto:

#wrapper {
            width: 845px;
            margin: 0 auto;
        }

Y nos quedará esto:

#wrapper {
            width: 1125px; /* 845 + 260 + 20 de margen */
            margin: 0 auto;
        }

Por último, ya sólo nos queda añadir los <div> del principio a nuestra página. Buscamos <div id=”content”> y los pegamos justo antes. Por ejemplo:

 <div id="sideleft">
            <div id="topleft">
                <img src="http://27.media.tumblr.com/tumblr_m2pavzQyNR1r1m0jso1_250.png">
            </div>
            <div id="topleft">
                <img src="http://assets.tumblr.com/images/default_avatar_128.gif">
            </div>
        </div>

Quedaría de la siguiente forma:

(Ver en grande)

PD: Si el banner de vuestra página se sitúa a la izquierda de todo, y queréis que salga centrado, simplemente tenéis que buscar en CSS (style) #wrapper #title { y añadirle:

text-align: center;

Puedes ver las ayudas que vaya creando en http://delasazores.com/tagged/ayuda 

Duodécimo post de ayuda. Podéis ver los anteriores aquí.

En este tutorial veremos cómo ocultar/mostrar las secciones.

(Nota: Antes de nada, revisad los errores comunes. Es importante.)

En el décimo tutorial ya vimos como crear una cabecera. Ahora lo que queremos hacer es que muestre una sección oculta y al pulsar en la cabecera la muestre.

Ahora mismo lo que tenemos es esto:

<div id="titulo">NOMBRE CABECERA</div>
  <div id="top">
  CONTENIDO SECCIÓN
  </div>

Tenemos que cambiarlo por esto:

<div id="seccion" style="cursor: pointer;">
       <div onClick="document.getElementById('seccion_oculta').style.display='block'">VER SECCION</div>
       <div onClick="document.getElementById('seccion_oculta').style.display='none'">OCULTAR SECCION</div>
  </div>

  <div id="seccion_oculta" style="display:none">
        <div id="top">
             CONTENIDO SECCIÓN
        </div>
  </div>

Básicamente, al pulsar en VER SECCION, muestra el contenido de la sección y al pulsar en OCULTAR SECCION lo oculta:

Vamos a complicarlo un poco más. No queremos que nos muestre siempre los textos ver y ocultar. Queremos que cuando este oculto nos muestre sólo Ver y cuando este visible nos muestre sólo ocultar:

<div id="seccion" style="cursor: pointer;">
        <div id="btn_mostrar" style="display:block;" onClick="document.getElementById('btn_ocultar').style.display='block'; document.getElementById('seccion_oculta').style.display='block'; document.getElementById('btn_mostrar').style.display='none'">PULSA AQUÍ PARA <br>MOSTRAR LA SECCIÓN</div>
        <div id="btn_ocultar" style="display:none;" onClick="document.getElementById('btn_ocultar').style.display ='none'; document.getElementById('seccion_oculta').style.display ='none'; document.getElementById('btn_mostrar').style.display='block'">PULSA AQUÍ PARA <br>OCULTAR LA SECCIÓN</div>
  </div>

  <div id="seccion_oculta" style="display:none">
       <div id="top">
             CONTENIDO SECCIÓN
        </div>
  </div>

Al pulsar en MOSTRAR LA SECCIÓN, muestra el texto OCULTAR LA SECCIÓN y el contenido de la sección. Además, el botón Ver desaparece.
Al pulsar en OCULTAR LA SECCIÓN, muestra el texto MOSTRAR LA SECCIÓN y el contenido de la sección y el texto OCULTAR LA SECCIÓN desaparecen.

Puedes ver las ayudas que vaya creando en http://delasazores.com/tagged/ayuda

Undécimo post de ayuda. Podéis ver los anteriores aquí.

En este tutorial veremos cómo añadir un menú en la parte superior de nuestra página.

(Nota: Antes de nada, revisad los errores comunes. Es importante.)

Nuestro menú constará de 2 partes. La primera (que llamaré cabecera1) irá dedicada a publicidad, banner o similares y la segunda (cabecera2) contendrá una lista horizontal de enlaces.

Como queremos que el menú se sitúe arriba de todo, tendremos que poner el código justo debajo de la etiqueta <body>. Usaremos lo siguiente:

 <div class="cabecera1">
        CONTENIDO DE LA CABECERA 1
 </div>

 <div class="cabecera2">
        CONTENIDO DE LA CABECERA 2
 </div> 

Como ejemplo, en la cabecera 1 pondremos una imagen de 800x100:

 <div class="cabecera1">
        <a href="/"><img src="http://lorempixel.com/output/technics-q-c-800-100-6.jpg" /></a>
 </div> 

Y en la cabecera 2 un listado de URLs:

 <div class="cabecera2">
       <a href="URL">URL 1</a>&nbsp;|
       <a href="URL">URL 2</a>&nbsp;|
       <a href="URL">URL 3</a>&nbsp;|
       <a href="URL">URL 4</a>&nbsp;|
       <a href="URL">URL 5</a>&nbsp;|
       <a href="URL">URL 6</a>&nbsp;|
       <a href="URL">URL 7</a>&nbsp;|
       <a href="URL">URL 8</a>&nbsp;|
       <a href="URL">URL 9</a>&nbsp;|
       <a href="URL">URL 10</a>&nbsp;|
       <a href="URL">URL 11</a>&nbsp;|
       <a href="URL">URL 12</a>
 </div>

Esto es lo que tenemos por ahora:

Ahora que tenemos el contenido, vamos a modificar un poco su diseño, para ello, nos vamos al CSS (antes de la etiqueta </style>) y pegamos lo siguiente (iré explicanco cada línea con un comentario):

.cabecera1 {
      background: #000; /* define el color de fondo */
      height: 100px; /* define la altura de la cabera 1 */
      color: #fff; /* define el color del texto que no es enlace */
      text-align: center; /* centra el contenido */
      font-size: 13px; /* define el tamaño de la fuente */
      padding: 5px; /* añade márgenes, para que el contenido no esté tan pegado a los lados */
 } 
     .cabecera1 a {
          color: #fff; /* define el color de los enlaces */
     } 
 .cabecera2 {
     height: 20px; /* define la altura de la cabera 2 */
     background: #333; /* define el color de fondo */
     color: #fff; /* define el color del texto que no es enlace */
     text-align: center; /* centra el contenido */
     font-size: 13px; /* define el tamaño de la fuente */
     padding: 2px; /* añade márgenes, para que el contenido no esté tan pegado a los lados */
 } 
    .cabecera2 a {
         color: #fff; /* define el color de los enlaces */
    }

El resultado sería:

Ahora ya sólo os queda cambiar el contenido por lo que queráis mostrar y personalizar el diseño a vuestro gusto.

Nota: La idea del menú superior es de finofilipino. He creado este tutorial desde 0 (nada de copy/paste), previa autorización de Fino, ya que la idea era suya, porque me lo han pedido por privado.

Puedes ver las ayudas que vaya creando en http://delasazores.com/tagged/ayuda

Décimo post de ayuda. Podéis ver los anteriores aquí.

En este tutorial veremos cómo añadir los comentarios a nuetro Tumblr usando el Disqus, cómo poner una sección de comentarios recientes del mismo y cómo añadir un título a nuestras secciones.

(Nota: Antes de nada, revisad los errores comunes. Es importante.)

Vamos a http://disq.us y pulsamos en Sign In. En la ventana de rellenamos lo que nos pide.

Por ejemplo:

Rellenamos también el usuario y contraseña de Disqus y pulsamos en siguiente. En esta ventana seleccionamos a gusto de cada uno. En mi caso lo he dejado así:

Pulsamos en siguiente y en la nueva ventana (install) seleccionamos Tumblr. Tal y como nos indican las instrucciones, tenemos que ir a Tumblr y seleccionar Customize Theme. Bajamos hasta donde pone Disqus shortname y escribimos el nombre que pusimos en la primera ventana del registro. En mi caso pruebasdelasazores:

Guardamos y listo. Ya tenemos los comentarios activados en nuestro Tumblr.

Ahora, debajo de cada post, se nos muestra un link indicando el número de comentarios y reacciones que tiene cada post:

Podemos cambiar el texto que se muestra. Para ello, tenemos que ir a la web del Disqus (http://disq.us) e ir a Settings -> Appearance y bajar hasta Comment Count Link. Ahí ponemos los textos como queremos:

El resultado sería:

Puede darse el caso de que en vez de salirnos el texto personalizado nos muestre siempre “Ver comentarios”. La solución sencilla es buscar:

<a href="{Permalink}#disqus_thread">{lang:View comments}</a>

Y añadir un class=”dsq-comment-count”:

<a class="dsq-comment-count" href="{Permalink}#disqus_thread">{lang:View comments}</a>

Si después de esto sigue mostrándonos “Ver comentarios”, tenemos que ir a la web del Disqus (http://disq.us) y en la pestaña Moderate pulsamos Install. Seleccionamos Tumblr y bajamos hasta Manual instructions (advanced). Copiamos el código del punto 2 (Copy and paste the following embed code into the HTML.) y lo pegamos antes de </body>. Ya debería mostrar correctamente nuestros textos personalizados.

Ahora vamos a ver como añadir los comentarios recientes a nuestra página. Volvemos a http://disq.us y, dentro de la pestaña Admin, pulsamos en Tools. Dejamos seleccionado combination y cambiamos las opciones a gusto de cada uno. En mi caso no cambiaré nada:

Por último, copiamos el código de abajo y lo pegamos en nuestra página. El resultado sería:

Ahora vamos a ver como añadir una cabecera a nuestras secciones. Lo que vamos a hacer es poner un div encima de cada sección, que tendrá un fondo negro y letra blanca. Ahora mismo lo que tenemos es:

<div id="top">
      CONTENIDO
</div>

Y lo que tendremos será:

<div id="titulo">NOMBRE CABECERA</div>
<div id="top">
      CONTENIDO
</div>

Quedaría así:

Ahora tenemos que cambiar el CSS para poner la cabecera como queremos. Añadimos lo siguiente en el CSS:

#wrapper #sidebar #titulo {
                    text-align:center;
                    background: #000;
                    padding-top: 5px;
    				padding-bottom: 10px;
                    color: #fff;
                    font-size: 20px;
                    border-radius: 10px 10px 0px 0px;
                    box-shadow: 0 0 5px 5px rgba(0,177,223,1);
    				border-width: 4px 4px 0 4px;
					border-style: solid;
					border-color: #000;
				}

Este código añade un fondo negro a nuestra cabecera, y poner el texto a 20px centrado y de color blanco. También redondea los bordes superiores y les añade colores:

Ahora lo que vamos a hacer es corregir el CSS de top para que no tenga los bordes superiores y quede mejor el contacto entre ambos divs. Ahora mis tenemos:

#wrapper #sidebar #top {
					border-radius: 10px 10px 10px 10px;
					border: 4px solid #000; 
					box-shadow: 0 0 5px 5px rgba(0,177,223,1);
                    background: #fff;
                    padding: 0 20px;
                }

Y tiene que quedar así:

#wrapper #sidebar #top {
					border-radius: 0px 0px 10px 10px;
					border: 4px solid #000;  
					box-shadow: 0 0 5px 5px rgba(0,177,223,1);
                    background: #fff;
                    padding: 0 20px;
                }

El resultado final sería:

Ahora ya sólo nos queda añadir

<div id=”titulo”>NOMBRE CABECERA</div> antes de cada <div id=”top”> que queremos que tenga cabecera.

Puedes ver las ayudas que vaya creando en http://delasazores.com/tagged/ayuda

Noveno post de ayuda. Podéis ver los anteriores aquí.

En este tutorial vamos a ver cómo adquirir un dominio .com. Yo lo compré en 1and1. Pago 6 euros al año (IVA NO incluido) y dispongo de un dominio .com, 10 subdominios, una cuenta de correo (ejemplo: delasazores@delasazores.com), subida de la página a buscadores, acceso FTP y 5MB de espacio en disco.

Como curiosidad, este es el panel:

Si queréis comprar un dominio, podéis pulsar aquí:

NOTA: Si adquirís el dominio desde este banner o desde el menú lateral de mi web, recibo comisión, así que si os decidís a comprar un dominio, se agradece si lo hacéis desde ahí :P

En la página que nos sale al pulsar el banner escogemos la extensión (en este caso .com) y el nombre de nuestro dominio (en este caso pruebadelasazores) y pulsamos en Comprobar:

Si está disponible, pulsamos en Continuar. En la siguiente ventana nos salen los 3 tipos de packs que tienen (recomiendo revisarlos antes de seguir). Seleccionamos el primero (1&1 Pack Dominio, de 0€ al mes):

En la siguiente ventana nos pregunta si queremos añadir un pack de seguridad. Como no lo queremos, pulsamos en Continuar solo con pedido y veremos esta ventana:

Si todo está correcto el precio de nuestro dominio será 5´99€ (IVA NO incluido) y pulsaremos en continuar. Las siguientes ventanas serán para añadir datos personales y forma de pago, por lo que me las saltaré e iré directamente a la configuración del dominio.

Ahora que tenemos nuestro dominio, pulsamos en Dominios. Ahí podemos ver nuestro dominio. Pueden tardar hasta 24 horas en activarlo. Paciencia. Una vez que lo hayan activado, podréis ver algo así:

Ahora vamos usar nuestro dominio para Tumblr. Para ello pulsamos en DNS -> Modificar la configuración DNS:

En la nueva pantalla nos aseguramos de que este todo igual que esto:

Para los vagos, la dirección IP es: 66.6.44.4

Por último, tenemos que ir a Tumblr y en configuración, añadir nuestro dominio:

Podéis darle a Comprueba tu dominio para verficar que todo está correcto.

Puedes ver las ayudas que vaya creando en http://delasazores.com/tagged/ayuda

Octavo post de ayuda. Podéis ver los anteriores aquí.

En este tutorial veremos cómo añadir un botón siguiente post y anterior post cuando estamos mirando un post (valga la redundancia). También veremos como añadir un botón en la paginación que nos muestre el número total de páginas que tenemos y que al pulsarlo nos lleve a última página.

(Nota: Antes de nada, revisad los errores comunes. Es importante.)

Buscamos lo siguiente:

{block:Posts}
         <div class="post">

        {block:Photo}

Y lo cambiamos por lo siguiente:

{block:Posts}
        {block:PermalinkPagination}
               <div class="post">
                      {block:PreviousPost}
                              <a href="{PreviousPost}">&larr; Anterior Post</a>
                      {/block:PreviousPost}
                      {block:NextPost}
                             <a style="float:right;" href="{NextPost}">Siguiente Post &rarr;</a>
                      {/block:NextPost}
               </div>
               <br />
       {/block:PermalinkPagination}
 <div class="post">
 {block:Photo}

El resultado sería:

Con

{block:PermalinkPagination}

hacemos que los botones sólo se vean cuando estás visitando un post concreto (permalink).

Podéis cambiar el texto “Anterior Post” o “Siguiente Post” por otro texto que os guste más o una imagen.

Nota: El

<div class="post">

es para el theme redux. Si usáis otro theme, tenéis que usar otro class.

Para añadir un botón ir a última página, tenemos que buscar lo siguiente:

{/block:JumpPagination}

 {/block:IfEnableJumpPagination}

Y cambiarlo por lo siguiente:

{/block:JumpPagination}

         <a class="jump_page" href="/tagged//page/{TotalPages}">..{TotalPages}</a>

 {/block:IfEnableJumpPagination}

El resultado sería:

Con este código tenemos un pequeño problema. Cuando estamos buscando por tags (ejemplo: http://delasazores.com/tagged/ayuda) si pulsamos en el botón no nos redirige a la última página de los tags, sino a la última página de la web. Si queréis solucionar este pequeño problema, podéis poneros en contacto con Welele.es, que fue quien me ayudó a corregirlo. No os preocupéis, no es difícil de solucionar :)

Nota: En el theme redux, si tenéis sólo los botones siguiente y anterior al final de la página, para activar la numeración tenéis que ir Personalización y, en el tercer rectángulo de Apariencia, activar Enable Jump Pagination.

Puedes ver las ayudas que vaya creando en http://delasazores.com/tagged/ayuda

Errores comunes

La idea de este post es tratar de hacer una lista con los errores más comunes. Trataré de mantener la lista actualizada con errores que vayan surgiendo.

0. Programa de edición: Es recomendable usar un programa de edición, como puede ser Dreamweaver o Notepad++ (este último si buscas uno completamente gratuito) para que nos facilite localizar los errores.

1. Comillas cursivas: Al copiar un código y pegarlo en el “fantástico” (sí Sheldon, es sarcasmo) editor de Tumblr, éste muchas veces pega las comillas cursivas. Un ejemplo:

<script type=”text/javascript” src=”https://apis.google.com/js/plusone.js”>

  {lang: ‘es’}</script>

Cuando lo correcto sería:

Una forma de evitar que esto suceda es rebloguear el post, sin publicarlo, quedándonos en la ventana de edición y desde ahí copiar el código.

2. Comentarios de HTML: Un error similar sucede con los comentarios de HTML. Su código de apertura es < ! - - (sin espacios) y su cierre es - - > (sin espacios). Cuando publicas un post Tumblr cambia este código y pone <!— de apertura y —> de cierre.

NOTA: Los puntos 1 y 2 ya están corregidos gracias al consejo de trollmachine pero los dejo citados por si son de utilidad.

Séptimo post de ayuda. Podéis ver los anteriores aquí.

En este tutorial vamos a ver como añadir un buscador de tags. También como insertar vídeos de youtube en los comentarios de los post o en nuestra página.

(Nota: Antes de nada, revisad los errores comunes. Es importante.)

Lo primero es añadir el siguiente código antes de la etiqueta </head>:

<!-- Buscar tags -->
 <script type="text/javascript">
 function handleThis(formElm)
 {
 window.location="URL_DE_TU_WEB/tagged/"+formElm.number.value+"";
 return false;
 }
 </script>

Ejemplo válido:

window.location="http://delasazores.com/tagged/"+formElm.number.value+"";

Ahora buscad lo siguiente

<div id="search">
      <form action="/search" method="get" id="search-form">
             <input type="hidden" name="t" value="{Name}" />
             <input type="hidden" name="scope" value="all_of_tumblr" />
             <input type="text" name="q" class="query" value="{SearchQuery}" />
             <input type="submit" value="{lang:Search}" class="submit" />
             <div class="clear"></div>
      </form>
 </div>

Y cambiadlo por (si queréis mantener ambos buscadores, podéis simplemente añadir estas líneas debajo del otro código)::

<!-- Buscador de tags -->
 <div id="search">
        <form action="/search" id="search-form" onsubmit="return handleThis(this)">
                <input type="text" class="query" name="number" value="Buscador de Tags" onclick="this.select()" />
                <input type="submit" value="{lang:Search}" class="submit" />
                <div class="clear"></div>
        </form>
 </div>
 <!-- Fin Buscador de tags -->

Si tenéis un theme distinto al Redux, podéis cambiar los ids y class para adaptarlos a vuestra plantilla y se vea más estético el buscador.

Ahora veamos como insertar vídeos de Youtube en nuestros comentarios. A día de hoy es realmente fácil. Simplemente nos vamos al vídeo de Youtube que queremos poner en nuestro post o página. Debajo podemos ver un botón Compartir. Lo pulsamos y a continuación pulsamos también en Insertar.

Nota: Es importante cambiar el width (ancho) para que no sea más grande que el ancho de nuestros post, ya que sino, sobresaldrá de los márgenes.

Puedes ver las ayudas que vaya creando en http://delasazores.com/tagged/ayuda

Sexto post de ayuda. Podéis ver los anteriores aquí.

En este tutorial vamos a ver como añadir un creador de memes a nuestra página.

(Nota: Antes de nada, revisad los errores comunes. Es importante.)

Lo primero que debéis hacer es crear una página nueva dentro de vuestro Tumblr. Para ello, id a personalizar. Debajo de Apariencia veréis que hay una opción llamada Páginas. Púlsadlo y después dadle a Añadir una Página:

URL de página: Ponle algo que defina lo que estás creando, para que te sea cómo de localizar. En mi caso usé creadordememes
Título de página: El título que mostrará la página cuando entras en ella. Yo puse: ¡Crea un meme y después envíamelo!
Mostrar un enlace a esta página: NO lo marques. Ya sabes como hacer un botón lateral, así que puedes hacer uno que enlace a la página (usando la URL que pusiste arriba)

Ahora viene el proceso cansino. Si os fijáis en la barra de edición de la página (donde está poner en negrita y demás) hay una opción que es HTML. Púlsadla y entraréis en la edición HTML de la página:

Ahora (sin cerrar la ventana del HTML) id a http://es.memegenerator.net/ y empieza lo verdaderamente cansino. Tenéis que buscar los memes que os gustan 1 por 1. Al entrar en ellos veréis que hay una opción que dice Embed a nombre_meme generator in your website or blog. Púlsadlo y rellenad lo siguiente:

Size: Escoge el tamaño que quieres ponerle (yo seleccioné siempre la primera opción para no complicarme)
Language: El español si no recuerdo mal daba errores, así que selecciona inglés para todos (los textos que mostrarán los memes pueden ser en español, así que no es problema).
Watermark: Como su nombre indica, es la marca de agua. Ejemplo: delasazores.com

Por último copiad el código generado arriba. Un ejemplo con el Forever Alone:

<iframe width="200" height="257" src="http://es.memegenerator.net/Forever-Alone/embed?languageCode=en&watermark=delasazores.com" frameborder="0" />

Nota importante: después de cada código de estos, tenéis que añadir

</iframe>

para cerrarlo, o tendréis problemas en la edición HTML.

Ahora ya “sólo” os queda repetir este proceso para los memes que queráis. Una vez añadidos todos, guardad la edición HTML y volved a la edición de página normal. Es recomendable que añadáis un par de líneas explicando lo que tienen que hacer los usuarios. En mi caso puse:

Cuando crees un meme, te rediccionará a la web donde se crea. Pulsa el botón derecho del ratón encima de la imagen y dale a “copiar la ruta de la imagen” o “Guardar imagen como…” si la quieres descargar en tu ordenador. Después enviámela usando el botón ¡Envíame algo!, a la derecha de la web (El botón con “:)”).

Para enviarme el link de la imagen pulsa encima de “Enviar un texto” y selecciona “Enviar un enlace”. Para enviarme una imagen que tengas guardada en tu pc pulsa encima de “Enviar un texto” y selecciona “Enviar una foto”.

Por último, si no encuentras el meme que te gustaría crear, pídelo pulsando en el botón ¡Pregunta algo!, a la derecha de la web (El botón con “¿?”).

Guardad la página y listo. Ya tenéis vuestro creador de memes. Acordaos de añadir un botón a vuestra página principal que redireccione al creador :)

Puedes ver las ayudas que vaya creando en http://delasazores.com/tagged/ayuda