lunes, 30 de mayo de 2011

Slider para Blogger con Jquery: Carrusel de imágenes con condicionales

Voy a empezar a usar Jquery, aunque no soy demasiado buejo con JavaScript, en algún punto del camino me dejó de interesar y con la evolución de Javascript, pues estoy fascinado. Y con este sencillo tutorial basado en el artículo: jQuery Photo Slide Show with Slick [...] adaptado por mi para Blogger con condicionales, esto básicamente hará que se muestre en todas las páginas, salvo en la de los artículos y las páginas estáticas.

De todos los carruseles de imágenes o Slider [ver funcionando], es el más rápido y sencillo de implementar.

Para este tutorial necesitaremos Jquery 1.3.1, no podemos usar otra versión, por ejemplo: la versión 1.6.1, haría que el script se vuelva loco.

En esta primer versión voy a ponerlo de forma textual y no con ejemplos visuales, por falta de tiempo.

Implementación y pasos previos:

1. Buscamos vamos a Diseño y Edición de HTML de la plantilla y sin expandir la plantilla, buscamos:
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>
2. Justo arriba pegamos
<b:widget id='HTML40' locked='false' title='JQuery' type='HTML'/>
Guardamos la plantilla.

Insertando códigos condicionales 1

1. Vamos a Diseño y Edición de HTML marcamos Expandir plantilla de artilugios y buscamos
<b:widget id='HTML40' locked='false' title='JQuery' type='HTML'/>
2. Vamos a insertar las condicionales:
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
3. Lo pegamos justo después de <b:includable id='main'>.

4. Y luego pegamos </b:if></b:if> justo antes de </b:includable> como se vé en el código de abajo:
<b:widget id='HTML40' locked='false' title='JQuery' type='HTML'>
<b:includable id='main'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
       <b:if cond='data:blog.pageType != &quot;item&quot;'>

  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
       </b:if>
    </b:if>

</b:includable>
</b:widget>
5. Guardamos la plantilla y desmarcamos Expantir plantilla de artilugios.

Implementando scripts y condicionales 2:
1. Justo despues de ]]></b:skin> pegamos el contenido siguiente:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
<!--
/* Seccion de paginas artículos */
#html40{display:none;margin:0;padding:0;}
-->
</style><b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type='text/css'>
<!--
/* Seccion de paginas estaticas*/
#html40{display:none;margin:0;padding:0;}
-->
</style>
<b:else/>
/* Seccion del resto de páginas; Index, Categorias y Archivo */
<style type='text/css'>
<!--
ul.slideshow {
    list-style:none;
    width:500px; /* Ancho del contenedor */
    height:250px; /* Alto del contenedor */
    overflow:hidden;
    position:relative;
    margin:0;
    padding:0;
 .post .slideshow a img, .post .slideshow table img {border:none !important; padding: 0px !important; /* corrige borde indeseado */
}
ul.slideshow li {
    position:absolute;
    left:0;
    right:0;
}
ul.slideshow li.show {
    z-index:500;
}
ul img {
    border:none;
}
#slideshow-caption {
    width:500px; /* Ancho de la caja debe ser igual a ul.slideshow y la imagen */
    height:70px; /* Alto de la caja de comentarios */
    position:absolute;
    bottom:0;
    left:0;
    background:#605F5E; /*opacity:0.4;filter:alpha(opacity=40);*/
    z-index:500;
}
#slideshow-caption .slideshow-caption-container {
    padding:5px 10px;
    z-index:1000;
}
#slideshow-caption h3 {
    color:#F0FF8B;
    margin:0;
    padding:0;
    font-size:14px;
}
#slideshow-caption p {
    color:#fff;
    font-size:12px;
    margin:5px 0 0 0;
    padding:0;
}
-->
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {

//Execute the slideShow, set 4 seconds for each images
slideShow(4000);

});

function slideShow(speed) {


//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');

//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});

//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});

//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));

//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});

//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);

//pause the slideshow on mouse over
$('ul.slideshow').hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval('gallery()',speed);
}
);

}

function gallery() {


//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')?  $('ul.slideshow li.show') : $('#ul.slideshow li:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));

//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');

//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);

//Hide the caption first, and then set and display the caption
$('#slideshow-caption').slideToggle(300, function () {
$('#slideshow-caption h3').html(title);
$('#slideshow-caption p').html(desc);
$('#slideshow-caption').slideToggle(500);
});

//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');

}
//]]>
</script>

</b:if>
</b:if>
2. Ahora vamos a Diseño - Elementos de Página:
3. Pulsamos en Editar en JQuery:
4. Pegamos el siguiente código en la caja que se abre:
<ul class="slideshow">
  <li class="show">
    <a href="http://url1.html">
       <img src="http://sitio.com/imagen1.jpg" width="500" height="250" title="Título 1" alt="Texto caja 1"/>
    </a>
   </li>
   <li>
    <a href="http://url2.html">
    <img src="http://sitio.com/imagen2.jpg" width="500" height="250" title="Título 2" alt="Texto caja 2"/>
    </a>
    </li>
     <li>
     <a href="http://url3.html">
     <img src="http://sitio.com/imagen3.jpg" width="500" height="250" title="Título 3" alt="Texto caja 3"/>
     </a>
  </li>
</ul>
Cambien el texto en Title y Alt que serán usados para las cajas de texto y el título, los enlaces y también use sus propias imágenes, cambiándolas al tamaño que ustedes necesiten, asegurándose de cambiar el CSS del Alto y el Ancho de la caja de texto y el contenedor. Recuerden que la caja de texto es menor a la altura de la caja del contenedor, o cubrirán toda la imagen.

Advertencia: el class="show", debe mantenerse únicamente en el primer elemento de la lista. Si lo desean puede agregar más elementos de lista, no hay límite, pero entre más imagenes más tardará en cargar la página, mi recomendación es de hasta 5 o 6 máximo.

Si quieren agregar más cajas de texto, peguen antes del </ul> las veces que quieran:
<li>
<a href="http://url.html">
<img src="http://sitio.com/imagen.jpg" width="500" height="250" title="Título" alt="Texto caja"/>
</a>
</li>
5. Borren el texto JQuery
6. Pulsen en Guardar, vean el efecto y felicidades ya tiene JQuery:

¿Por que no tiene botones adelante atrás y glosario?
Lo quería lo más simple posible y rápido, muchas funciones como los botones requieren de bastantes cambios e introducir más Scripts, lo que me parece -al menos ahora-, innecesario, posteriormente, quizás veamos algunos de estos tipos.

Comentarios y Consultas

Los mensajes serán revisados a veces. No te olvides que soy una persona, no se trata de faltar al respeto, todos tenemos opiniones, no hay que enojarse.

Puedes marcar Notificarme para recibir la notificación de la respuesta.

57 comentarios:

  1. por que no se mueve mi slider

    ResponderBorrar
  2. ¿Por qué tarda tando en arrancar? Una vez empiezan a pasar las imagenes perfecto.

    ResponderBorrar
  3. Ha sido resuelto el problema de lentitud en el arranque.

    Solamente reemplazen el área del script.

    ResponderBorrar
  4. Porque no queda centrado? funciona pero aparece del lado izquierdo... y quiero que me aparesca centrado arriba de las entradas, como puedo hacer esto?

    Gracias.

    ResponderBorrar
  5. Lo más sencillo sería ajustar el tamaño de las imágenes al ancho de las entradas.

    Para centrar puedes hacer dos cosas:
    1. Envolver el contenido de la caja Jquery entre <center> y </center>

    (Esto es de <ul class="slideshow"> a </ul> )

    2. Modificar la propiedad margin de ul.slideshow, de margin: 0; a por ejemplo;
    margin:0 0 0 100px;

    Esto separará la caja de slider 100 pixeles a la izquierda, ajustalo según requieras.

    ResponderBorrar
  6. por que no se ven las imagenes?

    ResponderBorrar
  7. Algo debiste hacer mal, revisa bien de nuevo y recuerda que debes poner las direcciones de tus imágenes a cada

    img src="http://sitio.com/imagen1.jpg"

    ResponderBorrar
  8. Como puedo hacer para que las imágenes pasen más lento?

    ResponderBorrar
  9. En el script cambia el valor

    slideShow(4000);

    Para 3 segundos 3000, para 2 segundos 2000

    ResponderBorrar
  10. Hola amigo, gracias por el articulo.. ya eh colocado este slideshow para mi blog.. por qué el anterior qué tenia no me gustaba.. bueno solo ahí un problema ¡Enorme!

    Desde la página principal se visualiza perfectamente pero al entrar a algun "Post" o "Articulo" este desaparece, sabes ¿como solucionarlo?

    Gracias, Un Saludo!

    ResponderBorrar
  11. Solamente quita las condicionales que están marcadas en color azul dentro del código.

    ResponderBorrar
  12. Buenísimo muchas gracias por la información! Ojalá pudieras explicarnos en otro post algún carrusel col flechas. Saludos.

    ResponderBorrar
  13. Hola súper bueno! muchas gracias!

    Me gustaría hacer una pregunta:
    Mi carrusel de fotos aparece perfecto! Pero me gustaría que cuando uno haga click en uno de los links que dirigen a los tag no apareciese el carrusel, sino que solamente los post con ese tag. ¿Me explico? ¿Y es eso posible?

    Muchas gracias, saludos!

    ResponderBorrar
  14. Tenemos que usar condicionales, en el primer código antes puesto de color azul agrega antes de este
    <b:if cond='data:blog.pageType != &quot;index&quot;'>

    Y después del último </b:if> en azul agrega otro </b:if>

    En el segundo código donde dice

    /* Seccion del resto de páginas; Index, Categorias y Archivo */

    Justo arriba pega

    <b:if cond='data:blog.pageType != &quot;index&quot;'>
    <style type='text/css'>
    <!--
    /* Seccion de paginas estaticas*/
    #html40{display:none;margin:0;padding:0;}
    -->
    </style>
    <b:else/>

    Ahora si vas al final de ese código verás un </b:if> en negritas, agrega otro </b:if> y será todo. Ya no debería de aparecer en las etiquetas.

    ResponderBorrar
  15. ¡Hola soy Camila, muchas gracias por tu ayuda!

    Hice exactamente lo que dijiste pero lo que ocurrió fue que el slideshow desapareció completamente. Ya no sale en ningún lado, ni si quiera en la página principal del blog.
    Mi idea es que aparezca en la página principal pero que no salga cuando se haga click en los Tags.

    Ojalá puedas ayudarme. ¡Muchas gracias!
    Saludos

    ResponderBorrar
  16. Si tiene una plantilla mándala en un txt a cgnauta arroba gmail punto com

    ResponderBorrar
  17. Buenos días.

    Una pregunta, ¿como hago para meter un carrusel, distinto al de la página de "Inicio", en una página del blog distinta de la página de "Inicio"?

    Un saludo, y gracias por tu tutorial.

    ResponderBorrar
  18. Tendrías que usar condicionales, pero tendrías que ponerlo directamente sobre el código de la plantilla.

    En Internet hay muchos tutoriales sobre el uso de condicionales.

    ResponderBorrar
  19. Muchas gracias por responder tan pronto.

    ¿Me podrías pasar el enlace de algún tutorial, no sé como buscar uno específico para mi problema?

    Enhorabuena por el blog.

    ResponderBorrar
  20. Estos son los que veo estan mejor explicados:

    http://vagabundia.blogspot.com/2010/04/blogger-y-el-uso-de-codigos.html

    http://vagabundia.blogspot.com/2009/04/los-codigos-condicionales.html

    ResponderBorrar
  21. ¡Ya lo conseguí!

    http://www.domusmultiservicios.es/p/servicios.html"

    Pero sale descuadrado el contenedor... que pasa? ¿Qué he hecho mal? ¡Ayuda!

    Un saludo.

    ResponderBorrar
  22. Esta super, pero hay un problema, cuando clic en las paginas estaticas aparecen las imagenes en forma vertical, lo que quiero, es que el Slider no aparesca en las paginas estaticas y en los post, solo en el index o inicio.

    Este es el blog: http://kmeister.blogspot.com/
    En verdad me gustaria una solucion.
    Gracias.

    ResponderBorrar
  23. Recuerda que el código de los cuadros deben esta dentro del widget HTML40, de otra forma el contenido no funcionará.

    Según tu plantilla lo has puesto en el HTML2:

    Busca id="HTML2" o id='HTML2' y renombralo a HTML40.

    ResponderBorrar
  24. Muchas gracias, me funcionó a la primera después de probar, con muchas galerías o carruseles de imagenes, lo explicaste muy bien.

    ResponderBorrar
  25. Excelente, es cuestión de entender sin afan el codigo, ya funciona super, como lo estaba buscando, aqui lo pueden ver: http://arbelaezg.blogspot.com/

    ResponderBorrar
  26. hola amigo solo quiero decirte gracias y q sos un groso no tube problema con nada y espero q pronto puedas hacer uno con flechas muchas gracias kapo (Y)

    ResponderBorrar
  27. Hola Matius Lenin.

    Me ha quedado genial el carrusel de imagenes en esta página http://www.casaruralenlasmedulas.es/, pero me ha surgido un problema:

    - No se como ocultar la línea punteada que aparece en la parte superior de todas las imágenes del carrusel, menos en la primera. Intuyo que es la línea de separación de la "lista con viñetas" del código del carrusel.

    ¿Cómo se puede solucionar, siendo transparente el fondo de las imágenes del carrusel?

    Gracias de antemano, y un saludo.

    ResponderBorrar
  28. Necesitaría ver a lo que te refieres

    Pero si hay tanto problema solamente pon después de

    /* Seccion del resto de páginas; Index, Categorias y Archivo */
    <style type='text/css'>

    Las reglas:

    #html40{border:none !important;}
    ul.slideshow {border:none !important;}

    Pon un sitio de ejemplo para que pueda ver el problema y te diga la solución, que no es muy difícil realmente.

    Siento la tardanza en responder.

    Saludos

    ResponderBorrar
  29. ¡Autosolucionado! Jajaja...

    Entramos en la "Plantilla", y sin "Expandir plantilla de Artilugios", buscamos:

    border-top: dashed 1px #ccc;
    border-top: dashed 1px rgba(128, 128, 128, .5);

    Y ahora ponemos a "0px" los valores de la segunda linea ("border-top") que nos molestaba (no en todas las plantillas aparece, o si aparece se puede modificar su estilo modificando los valores del anterior código). Decir que esto afecta a las viñetas de toda la plantilla; lo que no sé es como hacerlo para que sólo afecte al carrusel.

    ResponderBorrar
  30. Ya fue borrado, para borrar un comentario escribe

    http://cgnauta.blogspot.com/ncr, entra nuevamente al artículo y verás el ícono de bote de basura.

    ResponderBorrar
  31. ¿Y es posible que una imagen del carrusel permanezca más tiempo que las demás?

    ResponderBorrar
  32. En la documentación oficial no he visto esa posibilidad, tampoco hay ejemplos que se puedan seguir, salvo algunos casos en stackoverflow.com.

    ResponderBorrar
  33. Una última duda, creo, al pinchar sobre una imagen del blog, y abrirse ésta en el "lightbox" de "Blogger", aparece el carrusel también (se ve el carrusel funcionando por encima del "lightbox" de imágenes).

    Mira, echa un vistazo:
    http://www.casaruralenlasmedulas.es/

    Aunque estoy buscando la solución, ¿tú sabes cómo se podría arreglar?

    ResponderBorrar
  34. Eso es un problema de z-index el valor de z-index aquí es de 500 y 1000 solamente cambia los dos valores de 500 a 5 y el de 100 a 10

    ResponderBorrar
  35. Perfecto, y ahora he metido un carrusel en otra página (una página estática), entonces ¿qué hay que hacer para que los atributos (ancho, alto, etc) sean diferentes a los del carrusel de la página de inicio?

    ResponderBorrar
  36. El caso se puede hacer con condicionales pero sería replantear todo el artículo, mi sugerencia es simple

    pega después de <head>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

    Luego en la página estática en modo HTML al hacer el post pega el CSS y el Script, eliminando de este el fragmento que incluyes en head
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

    Luego resta en ese mismo modo pegar lo que vaya en
    <ul class="slideshow">
    </ul>

    Que son las imágenes y los textos.

    Mi sugerencia es que esto último lo pegues al principio y no al final para que no se generen espacios indeseables.

    Lo que estamos hacendo es básicamente insertar el Slider dentro de una entrada, en este caso una página estática.

    ResponderBorrar
  37. Hola...tengo algunos problemas... agrege mi primera imagen y cuando quiero agregar el texto a la caja esa no aparece ademas de que cuando quise agregar la segunda imagen esta no se ve :/ q hice mal o como puedo solucionarlo ???

    ResponderBorrar
  38. Ni idea a menos que tengas un página donde se muestre implementado.

    ResponderBorrar
  39. http://otmablog.blogspot.mx/ este es mi blog si gustas chekarlo

    ResponderBorrar
  40. Vamos hombre, estas integrando varias veces Jquery. Remueve del codigo que obtuviste aquí:

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

    y de tu plantilla
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></script>

    Luego, después de <head> pega:

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

    Y listo.

    ResponderBorrar
  41. Este blog ha sido eliminado por un administrador de blog.

    ResponderBorrar
  42. He borrado tu comentario por la ortografía.

    En la nueva interfaz de Blogger, en tu blog da clic en Configuración y allí elije Entradas y comentarios.

    Busca la opción Mostrar imágenes en el lightbox y ponla en No.

    Y pulsan en botón que dice Guardar configuración.

    Ahora ve a Plantilla - Edición HTML y luego pulsas en Continuar.

    Si usar Chrome o Firefox, pulsa CTRL + F para la caja de búsqueda.

    Pega <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

    Te llevará a ese fragmento de código: bórralo.

    Nuevamente pega <head>, te llevará a esa parte del código.

    Justo después pega:
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

    Y guarda la plantilla.

    ResponderBorrar
  43. no se corrigió mi problema, pero gracias aun sigue viéndose así , mostrando solo la primera imagen

    ResponderBorrar
  44. Pues lo más obvio es que uno de tus script interfiere con la opacidad de las siguientes imágenes. Pruébalo en un blog limpio.

    ResponderBorrar
  45. Hola amigo, me encanta como queda el slider pero tengo un par de problemas (solamente me muestra la primera imagen de las 3 que puse y no me muestra ni el titulo ni la sinopsis de la pelicula) Ah, otra cosa fijate en la cabecera que me muestra una frase del scrip y me la corre para abajo junto con el menu, como soluciono todo esto???, pasate por mi blog y fijate como queda...

    ResponderBorrar
  46. Otra cosa, como hago para que use jquery 1.3.1 y no alguno mas reciente??? Ojala me ayudes, Gracias...

    ResponderBorrar
  47. Desactiva el Lightbox:
    http://cgnauta.blogspot.com/2011/10/activar-desactivar-lightbox-modo.html

    Agrega entre <head> </head>, eliminando cualquier otro Script de jquery.min.js:

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

    Y eso es todo.

    ResponderBorrar
  48. Hola,

    Acabo de integrar tu carrusel y me ha quedado perfecto a excepción de un asunto: NO APARECE LA CAJA DE COMENTARIOS

    Puedes verlo aquí: http://www.consola-ouya.com

    Las imágenes si aparecen pero la caja con el título, enlace y alt no ...

    sabes a qué puede deberse?

    Saludos y gracias por este post.. es impresionante.

    ResponderBorrar
    Respuestas
    1. Desactiva el Lightbox:
      http://cgnauta.blogspot.com/2011/10/activar-desactivar-lightbox-modo.html

      Borrar
  49. Amigo tengo un gran problema y es que mi blog no tiene este cod.



    Asi que no puedo hacer nada sin el, algun otro cod. que me sirva?

    ResponderBorrar
  50. Un saludo y enhorabuena por tu muy buena explicación, pero tengo un problema e ignoro el motivo.

    Cuando copio todo el código antes de: ]]> me da el siguiente mensaje y no me deja grabar el código.


    Error al analizar XML, línea 702, columna 3: The element type "b:skin" must be terminated by the matching end-tag "".

    Te ruego tu inestimable ayuda.

    Gracias. Jordi.

    ResponderBorrar
  51. Tengo un problema al descargar la pelicula, pero creo que no es eso si no un código que casi todos los compañeros están diciendo.. También espere que sacaran las Series completas para asi disfrutarla mejor.

    ResponderBorrar

El ascenso de Skywalker(2019)

Joker 2019Una película que ha roto a divido a los fans muchos culparán a sus director por querer reparar Los últimos Jedi, no es su culpa al final.

[Leer artículo...]

La Espada del Inmortal (2019

Blade of The Immortal (2019)La historia de Manji, un guerrero samurái sin señor que ha sido condenado con la inmortalidad...

[Leer artículo...]

Kemono Michi: Rise Up (2019)

Kemono Michi: Rise Up (2019)Del autor de Konosuba, Genzo Shibata es un luchador japonés que es transportado a un mundo de fantasía, quien está obsesionado con los seres peludos.

[Leer artículo...]

ELI (2019)de Netflix

ELI (2019)de Netflix Reseña y criticaPelícula lanzada directo a video que nos cuenta una historia que parecería sacada de la Dimensión desconocida.

[Leer artículo...]

  © Cgnauta | CGsign blog | [Ver Licencia de uso] | Matius Lenin, Creative Commons, algunos derechos reservados

Regresar ARRIBA  

Vistas desde Mayo 2009

▼/▲ Archivo del Blog

Visitas totales

Información

IBSN: Internet Blog Serial Number 01-77-94-2008

Esta plantilla es creada y diseñada por Matius Lenin para CGnauta blog. Con Scripts de JQuery bajo licencia GNU/GPL. CGnauta es una marca registrada propiedad de Matius Lenin.