29 oct. 2013

Maravillas con JQuery, una galería 3D para tu Blog


Hay efectos particularmente bellos que podemos implementar en nuestros Blogs por medio de JQuery con CSS3 y HTML5.

Su implementación aunque puede parecer compleja inicialmente, recompensa finalmente el esfuerzo con un mejor acabado visual para nuestras creaciones.





Dotar de dinamismo la presentación de contenidos es un desafío hoy día para los Bloggers que tratan de sorprender a sus usuarios con nuevas maneras de presentar la información que resulten más atractivas.

Te propongo una nueva forma de mostrar imágenes para cabeceras de entradas, entradas relacionadas, presentaciones fotográficas o lo que desees, con efectos 3D que seguro atraerán todas las miradas.


Todo el código fuente utilizado, así como las imágenes está inspirado en el desarrollo  3D Gallery by extraído de mi web favorita para implementaciones de JQuery, HTML5 y CSS3: http://tympanus.net/codrops.

Voy a enseñarte a integrar la demostración 3D Gallery en tu Blog para que la aproveches como mejor estimes: para presentar entradas relacionadas, muestras fotográficas, cabeceras de contenido... lo que tú prefieras.



Paso a paso, añadiendo 3D Gallery a tu Blog de Blogger en un IFRAME:
1) Conéctate a http://tympanus.net/codrops/2012/02/06/3d-gallery-with-css3-and-jquery/, entrarás en la página para descargarte la demostración de ejemplo:




2) Haz "clic" en el botón azul de la parte inferior derecha con el texto "DOWNLOAD SOURCE" Se te descargará un .zip que se llama 3DGallery.zip:
  • Descomprime el .zip para visualizar el contenido de los archivos necesarios para manejar la galería 3D.
    3) Una vez descomprimida la información súbela a Drive, vamos a crear un Iframe o cuadro interactivo donde colocaremos todos los elementos de la galería 3D:
    • 3.1 Móntate en tu disco duro una carpeta que contenga todo lo que necesitamos para crear nuestro carrusel:
    • En tu escritorio créate la carpeta "Sitio8
    • Dentro de la carpeta "Sitio8" crea una carpeta "js" y otra "images".
    •  En la carpeta "js" mete los archivos que puedes extraer de dentro del .zip que te bajaste en el paso 2) o que puedes descargar desde mi Drive (si quieres los mismos que yo estoy utilizando en el Blog a modo de ejemplo):
    Si los descargas de Drive por el navegador, copia y pega el código completo que hay en ellos y lo guardas con el mismo nombre del .js que hayas descargado.
    • 3.2 En la carpeta "images" mete las imágenes que deseas que salgan en el carrusel, si para probar quieres que salgan las del autor, puedes usar las de mi carpeta Drive (si quieres los mismos que yo estoy utilizando en el Blog a modo de ejemplo):
    Aquí debes meter las imágenes que quieres utilizar en el panel galería. Bien sea de entradas tuyas porque luego conectarás con ellas si el usuario las selecciona o bien porque sean imágenes de fotografías sin enlace a ninguna página que simplemente desees mostrar.
    • 3.3 Por último crearás una index.html que contendrá el código para realizar el carrusel y las referencias a tus js e imágenes:
    • Mi Index.html NO te servirá para mostrar las imágenes tuyas, la puedes utilizar como prueba o práctica pero lo importante será que crees la tuya personal: 
    • https://googledrive.com/host/0Bwgc28XHjPA2Rk1YbXh5YmZJUUE/index.html Descarga mi index.html para crearte la tuya propia.
    • Ahora localiza  dentro de mi index.html descargada la siguiente línea:
    <section id="dg-container"
    • Bajo esa línea encontrarás el código que muestra las imágenes que hayas subido y los enlaces que a ellas quieras crear a tu Blog o a donde prefieras:
    <section id="dg-container" class="dg-container">
    <div class="dg-wrapper">
    <a href="#"><img src="images/prueba_1.png" alt="image01"><div>http://diariosdelanube.blogspot.com.es/</div></a>
    <a href="#"><img src="images/2.jpg" alt="image02"><div>http://www.percivalclo.com/</div></a>
    <a href="#"><img src="images/3.jpg" alt="image03"><div>http://www.wanda.net/fr</div></a>
    <a href="#"><img src="images/4.jpg" alt="image04"><div>http://lifeingreenville.com/</div></a>
    <a href="#"><img src="images/5.jpg" alt="image05"><div>http://circlemeetups.com/</div></a>
    <a href="#"><img src="images/6.jpg" alt="image06"><div>http://www.castirondesign.com/</div></a>
    <a href="#"><img src="images/7.jpg" alt="image07"><div>http://www.foundrycollective.com/</div></a>
    <a href="#"><img src="images/8.jpg" alt="image08"><div>http://www.mathiassterner.com/</div></a>
    <a href="#"><img src="images/9.jpg" alt="image09"><div>http://learnlakenona.com/</div></a>
    </div>
    <!--
    <span class="dg-prev">&lt;</span>
    <span class="dg-next">&gt;</span>
    -->
    </section>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.gallery.js"></script>
    <script type="text/javascript">
    $(function() {
    $('#dg-container').gallery({
    autoplay : true
    });
    });
    </script/>
    • En este código cada <img> contiene cada una de las imágenes que deseas mostrar en la galería.
    • En src="images/1.jpg" meterás el nombre de cada imagen que hayas utilizado para que salga por medio del panel. 1.jpg es el nombre de una de las imágens de prueba. aquí pondrás los nombres que tú hayas decidido utilizar con tus imágenes.
    • 3.4 El tamaño de las imágenes y el contenedor de las mismas está en style.css y dentro en las siguientes líneas de código:
    .dg-container{
    width: 100%;
    height: 214px; position: relative;}.dg-wrapper{ width: 200px; height: 214px; margin: 0 auto; position: relative; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 500px; -moz-perspective: 500px; -o-perspective: 500px; -ms-perspective: 500px; perspective: 500px;}.dg-wrapper a{ width: 200px; height: 150px; display: block; position: absolute; left: 0; top: 0; box-shadow: 0px 10px 20px rgba(0,0,0,0.3);
    • Debes poner el mismo width y height que las imágenes con las que vas a trabajar decidas que tengan. Experimenta cambiando los tamaños hasta que encuentres el más apropiado a tus necesidades.
    • 3.5 Al igual que en styles.css alteraste el tamaño de los contenedores de imágenes, para que el "efecto 3D" quede perfectamente alineado con esos tamaños, debes editar el archivo jquery.gallery para poner los tamaños de las imágenes. Aplica las mismas proporciones que observes en los cambios de tamaño de las imágenes en el código. Verás que las imágenes para que den ese aspecto 3D, deben ir cambiando sus tamaños dependiendo de si están en el centro, a la izquierda o a la derecha, por ello ajusta proporcionalmente los tamaños hasta que des con la animación deseada. Haz todas las pruebas que necesites hasta que consigas el efecto deseado.
    • 3.6 En el escritorio de tu ordenador, para ir  probando cómo queda hasta el final,  dentro de tu propia carpeta "Sitio8" ve haciendo "clic" en tu index.html para ir visualizando cada cambio y cómo queda. Tal cual lo veas en tu disco duro funcionando, así funcionará luego metido dentro de tu Blog.
    4) Sube tu carpeta "Sitio8" a Drive para luego utilizarla en tu Blog:
     4.1 Conéctate a Drive https://drive.google.com/ y una vez dentro pulsa el botón de la flecha roja que hay a la derecha del botón "crear" en el menú izquierdo. Te he marcado el botón con un recuadro azul en la imagen inferior de Drive:

    4.2 Ahora sube la carpeta "Sitio8" completa seleccionando el botón de la flecha y pulsando en la opción "Carpeta". Después, ya tendrás disponible tu carrusel al completo en Drive:
    • Cuando subas la carpeta "Sitio8asegúrate que está compartida como Público. Si no la compartes, no se dibujará. Deberás seleccionar "Public" en la sección "Who has access" tal como te muestro en pantalla.

    • Además cópiate el código que te he marcado cuando compartas. Es el código identificativo único que Drive asignará a tu carpeta "Sitio8" para que puedas compartirla, lo utilizaremos después en los próximos pasos:
        4.3 Ahora prueba tu carpeta "Sitio8". Escribe en el navegador el código identificativo que te ha asignado Google Drive al compartir la carpeta. En mi caso es este: https://googledrive.com/host/0Bwgc28XHjPA2Rk1YbXh5YmZJUUE. Recuerda que el código identificarivo debe ir precedido de https://googledrive.com/host/ para que se llame a la
        "Index.html" que contiene tu propio carrusel. Si todo está ok, ya estás listo para meter el carrusel en tu Blog.
        5) Insertando el código en Blogger en un IFRAME:
        • Puedes insertar el código en Blogger llamando a la "Index.html" metiendo dentro del IFRAME la URL que llama a tu "Sitio8" en Drive:
        <iframe align="left" frameborder="0" height="250" marginheight="0" marginwidth="0" noresize="" scrolling="No" src="https://googledrive.com/host/0Bwgc28XHjPA2Rk1YbXh5YmZJUUE" width="600"> 
        </iframe>
        • En  src=" Debes meter la URL que Drive te asignó al compartir tu carpeta "Sitio2".
        • EL height="250" y el width="600", es decir, el ancho y alto del marco que va a servir de "ventana" a tu carrusel debe ser ligeramente mayor que el ancho y alto del propio carrusel. Si pones menos ancho o menos alto, no cabrá el carrusel al completo.
        • Puedes insertar el código del "<iframe" en un Gadget HTML/JAVASCRIPT o directamente dentro de una página.


        B) Insertando el código en Blogger para añadir tu carrusel sin IFRAME:
        • En primer lugar realiza una copia de seguridad de tu sitio. Aunque es realmente sencillo lo que vamos a hacer, recomiendo que previamente tengamos a buen recaudo nuestro código original, de manera que siempre podamos "volver atrás" ante cualquier error. No dejes de realizar esta guía paso a paso para salvaguardar tu blog.
        • En Blogger, en el menú de la izquierda, dirígete a la opción "Plantilla" y pulsa "Editar HTML". Localiza la etiqueta "</head" y justo debajo inserta los .js, .css y <script> de JQuery

        1) El código que corresponde al HEAD (justo antes del cierre del /HEAD):
        <link rel="stylesheet" type="text/css" href="URL_DRIVE_CSS/css/demo.css" /> 
        <link rel="stylesheet" type="text/css" href="URL_DRIVE_CSS/css/style.css" /> 
        <link href='http://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet' type='text/css' />
        <script type="text/javascript" src="URL_DRIVE_JS/js/modernizr.custom.53451.js"></script>
        NOTAS PARA COMPRENDER Y UTILIZAR ESTA PARTE DEL CÓDIGO: 
        • Cada <script> contine la librería .js (Javascript) utilizada de JQUERY. 
        Para insetarlo en tu Blog, dentro de Blogger dirígete al menú de la izquierda, a la opción Diseño. 
        2) Introduciendo la galería 3D en el diseño de tu PLANTILLA:


        •  En la página de Diseño pulsa "Añadir gadget" en la zona del Blog donde desees insertar el componente creado con JQuery. 


          • Copia dentro del gadget HTML/JAVASCRIPT el código que sigue, la primera parte referencia al autor.
          <section id="dg-container" class="dg-container">
          <div class="dg-wrapper">
          <a href="#"><img src="images/prueba_1.png" alt="image01"><div>http://diariosdelanube.blogspot.com.es/</div></a>
          <a href="#"><img src="images/2.jpg" alt="image02"><div>http://www.percivalclo.com/</div></a>
          <a href="#"><img src="images/3.jpg" alt="image03"><div>http://www.wanda.net/fr</div></a>
          <a href="#"><img src="images/4.jpg" alt="image04"><div>http://lifeingreenville.com/</div></a>
          <a href="#"><img src="images/5.jpg" alt="image05"><div>http://circlemeetups.com/</div></a>
          <a href="#"><img src="images/6.jpg" alt="image06"><div>http://www.castirondesign.com/</div></a>
          <a href="#"><img src="images/7.jpg" alt="image07"><div>http://www.foundrycollective.com/</div></a>
          <a href="#"><img src="images/8.jpg" alt="image08"><div>http://www.mathiassterner.com/</div></a>
          <a href="#"><img src="images/9.jpg" alt="image09"><div>http://learnlakenona.com/</div></a>
          </div>
          <!--
          <span class="dg-prev">&lt;</span>
          <span class="dg-next">&gt;</span>
          -->
          </section>
          <script type="text/javascript" src="js/jquery.min.js"></script>
          <script type="text/javascript" src="js/jquery.gallery.js"></script>
          <script type="text/javascript">
          $(function() {
          $('#dg-container').gallery({
          autoplay : true
          });
          });
          </script/>
          NOTAS PARA COMPRENDER Y UTILIZAR ESTA PARTE DEL CÓDIGO: 
          • Cada <img> va a contener la ruta a donde hayas subido la imagen dentro de src="[DIRECCIÓN_DONDE_COPIES_EL_ARCHIVO/NOMBRE_IMAGEN"
          • Para los tamaños de las imágenes y el ajuste de la animación, ve al apartado 3) de la opción A) para configurarlos según tus necesidades. 

          Escrito por Miguel García Sánchez - Colomer

          Dispuesto a ayudarte con tu Blog en todo lo posible, Diarios de la nube es mi medio para llegar hasta ti. El conocimiento es universal, es del mundo, es de todos, esta es mi parte y la comparto contigo.

          17comentarios:

          1. Hi dear, you have such a lovely blog! Maybe we can follow each other on GFC and on the other social networks?! Let me know, i’ll following u back with pleasure :) ♥

            ResponderEliminar
          2. Felicitaciones! miguel que bueno que le colocaste una dominio a tu blog cada ves es mas prospero. saludos

            ResponderEliminar
            Respuestas
            1. Gracias Loquendo, un placer leerte aquí. Sí me decidí a comprar un dominio y por el momento me está resultando bueno. He hecho una guía para ayudar a hacerlo. Por cierto, ¿cuál era la dirección de tu blog?, así me paso y lo veo que no he tenido tiempo estos días.

              Un abrazo!.

              Eliminar
          3. Te quería hacer otra pregunta, la 1387 creo, se puede traspasar un blog a web, ósea que cojo mi blog entero tal y como está y lo transformo en web, se puede o hay que comenzar de nuevo.
            Pregunta 1388
            puedo hacer una web con mi ordenador un Appel y subirla, no tendré problemas por hacerla con algún programa de los míos.
            Gracias Joda y hasta la próxima
            Un saludo

            ResponderEliminar
            Respuestas
            1. jajaja, Maese Pau eres el mejor... qué exagerado, si yo hubiera tenido 1388 respuestas sería el auténtico Yoda en persona...

              El tema es complicado. Un Blog de Blogger está escrito en XHTML y como tal es, por así decirlo simplificando a lo bestia, código que sólo Blogger "interpreta" para finalizar enviando una HTML al navegador. Así pues no puedes pillar la plantila de blogger y plantarla en un HTML.

              Sí podrías pillar el código fuente de tu página (haciendo "clic" derecho y dándole a "ver código fuente") en tu navegador y copiar y pegar todo el código en un archivo de texto en tu MAC. Luego ese archivo de texto le pones extensión .html.

              Después el problemilla será que tienes que redireccionar bien las imágenes y js y css si no los encuentra (los archivos que se declaran antes de la etiqueta head).

              Por último tendrías que hacer esto con todas las páginas y Blogger monta las entradas en tu Blog de una manera peculiar. Tendría que ir llamando a cada HTML que tienes en Blogger.

              Además, finalmente, tendrías que llevar todo eso a un proveedor para que lo alojara (hosting) y lo publicara en un dominio (.com, .es).

              De todas maneras hay opciones más simples: hacerte una .com con la guía que publiqué para convertir tu .blogspot en .com y seguir trabajando como siempre pero más profesionalmente (que en tu caso creo que sería lo suyo). O contratar un equipo de desarrollo que te haga una web a medida y te la publique (para esto último también conozco gente, pero te saldría más caro que hacerte simplemente la .com).

              Si quieres renovar tu Blog, puedes escribirme a miguelcolomer@gmail.com y estudiamos cómo enfocarlo, pero a priori, creo que lo que mejor te iría sería hacer el .blogspot una .com y trabajar como siempre.

              En fin, para cualquier cosa aquí me tienes.

              Un saludo!!!

              Eliminar
          4. i quieres renovar tu Blog, puedes escribirme a miguelcolomer@gmail.com y estudiamos cómo enfocarlo, pero a priori, creo que lo que mejor te iría sería hacer el .blogspot una .com y trabajar como siempre.

            ResponderEliminar
          5. gracias! me ha servido mucho y ya he podido hacer uno para mi blog

            ResponderEliminar
            Respuestas
            1. vengo a darte las gracias de nuevo^^, ese iframe me ha salvado la vida otra vez, ahora con una animación flash que me estaba dando problemas, y con este código(y tu explicación por supuesto) lo he conseguido.

              Eliminar
            2. Me alegro mucho de que te haya funcionado. La verdad que es un efecto muy chulo. Gracias por participar y que lo disfrutes.

              Eliminar
            3. Me alegro mucho de que te haya funcionado. La verdad que es un efecto muy chulo. Gracias por participar y que lo disfrutes.

              Eliminar
            4. no se mucho de HTML y no tengo mas forma de aprender que de foros asi que me podrias explicar esto,
              ¿el jquery se descarga se pone este código y se copia el código del archivo que se añade den script en mi html?

              ¿el jquery se descarga gratis o se paga y si uso el vinculo que dicen que se puede usar como lo pongo y como hago el trabajo en la ese vinculo?

              Eliminar
            5. P.D: YO SOLO USO EL BLOC DE NOTAS PARA MI PAGINA

              Eliminar
            6. El jQuery es gratis, es colocar el vínculo en tu web y ya podrás utilizar lo que tengas programado en jQuery. En esta guía te explican un caso completo.

              Puedes en el buscador escribir jQuery y verás varios ejemplos.

              Eliminar
          6. Hola, por lo visto google drive ya no permite hacer esto y ahora ya no se ve el carrusel, ¿le importaria explicar que habría que hacer para llamar al "index.html" si lo alojo en otra web como por ejemplo One Drive?

            ResponderEliminar
            Respuestas
            1. Puedes poner en la dirección directamente index.html, como parte de la misma. Tengo que probar algunas de estas cosas, a ver si hay alguna solución que se pueda aplicar. si la descubro te lo escribo.

              Un saludo!

              Eliminar

           

          © 2015 Por: Miguel García Sánchez - Colomer en Diarios de la nube Todos los derechos reservados.