25 oct. 2013

Cómo utilizar Google Drive para alojar y servir una web. Crea y sirve tus propios Gadgets desde Drive en Blogger.


La utilización de Google Drive como herramienta de almacenamiento puede ir más allá del mero objetivo de guardar archivos para pasar a convertirse en un auténtico "gestor de contenidos" que compartir.

El potencial de Drive reside en su enorme versatilidad y para aprovecharla al máximo voy a explicarte cómo puedes hospedar y servir una web completa a tus usuarios desde Drive.


Así mismo, con la utilización de dicho soporte, veremos cómo servirnos nuestros propios Gadgets o componentes diseñados en las páginas de nuestros Blogs partiendo del hospedaje en Drive. Dado que en Blogger no podemos almacenar más que imágenes o vídeos referenciados de Youtube, el Blog puede queda rse "corto" a la hora de ofrecer contenidos, que "estando fuera de Blogger", no puedes "subir a Blogger".


Rompe las "barreras" y "limiticaciones" a la hora de trabajar con componentes avanzados (con hojas de estilo propias en CSS3, HTML5, JQuery) y sírvete desde Google Drive tu propia web para llevar la experiencia Blogger a nuevos niveles de diseño y contenido avanzado.

Un ejemplo de página web subida a Drive y publicada para su visualización por Internet (haz "clic" en el enlace para probar):
https://googledrive.com/host/0Bwgc28XHjPA2RlF5bGs2OWFGT00/

El código css3, HTML5 y JQuery utilizado en la web de demostración está extraído e inspirado en creaciones de http://tympanus.net/codrops/: de las demostraciones  3D Gallery by y Page Transition with CSS3 by .

Conceptos previos, cómo hospedar una web en Google Drive:


Esta clase de "hospedaje" de páginas web que realiza Google Drive sólo funciona si se siguen las siguientes pautas:


  • Debes crearte una carpeta, con el nombre que desees, en la unidad que Drive pone a tu disposición en la que guardarás todo el contenido de tu Web.
  • La carpeta creada debe contener en su interior un archivo que se llame index.html. Dicha página será la primera en mostrarse en el navegador cuando se acceda a la URL que Drive proporciona al compartir la carpeta que contiene el citado index.html.
  • El resto de la gestión de subcarpetas y archivos que se encuentre dentro de la carpeta Drive con el archivo index.html que utilices, puede tener la nomenclatura y organización que tú mismo decidas.


Paso a paso, un ejemplo con una web sencilla de demostración creada por mí para este tutorial:


Creando tu propia web:

1) Como hemos explicado en los conceptos previos, la web en Drive será una carpeta que crees en la raíz de tu unidad que contenga en su interior una página con el nombre index.html.


  • 1.1 En el disco duro local de tu ordenador puedes crear una estructura de subcarpetas dentro de la carpeta que subirás a Drive con toda la web montada como el que te muestro en el "pantallazo" superior.
  • 1.2 La página "index.html" se encuentra en la raíz de la carpeta que luego subiremos a "Drive". A partir de aquí, puedes crearte el resto de carpetas y subcarpetas así como las páginas .html que necesites para crear tu web:
    • Yo he creado, a título meramente organizativo y estructural, una subcarpeta "css" para almacenar los estilos que voy a utilizar en la web, una subcarpeta "images" para las imágenes y una subcarpeta "js" para los archivos de Javascript.

    Subiendo tu propia web a Drive:

2) Una vez hayas compuesto tu web, ya sólo tienes que subirla a Drive y compartirla para que pueda comenzar a utilizarse en Internet: 
  • 2.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:

  • 2.2 Ahora sube la carpeta completa seleccionando el botón de la flecha y pulsando en la opción "Carpeta". Después, ya tendrás la web disponible al completo en Drive. 
Publicando tu propia web en Drive:
3) Cuando subas la carpeta asegúrate que está compartida como Público. Si no la compartes, no se podrá ver en Internet. Deberás seleccionar "Publico en la web" en la sección "Opciones de visibilidad" tal como te muestro en pantalla.


  • 3.1 Al finalizar de compartir debes copiarte el código que te he marcado en rojo en la ventana inferior. Es el código identificativo único que Drive asignará a tu carpeta para que puedas compartirla y que se lance la index.html que creaste en el paso 1) como página inicial de tu web:

      • 3.2 Ahora prueba la carpeta con tu web. 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/0Bwgc28XHjPA2RlF5bGs2OWFGT00/ Recuerda que el código identificarivo debe ir precedido de https://googledrive.com/host/ para que se llame a la "index.html" si todo está ok, varás que Google Drive te sirve la página como un auténtico servidor web:




      El código css3, HTML5 y JQuery está extraído e inspirado en creaciones de http://tympanus.net/codrops/: de las demostraciones  3D Gallery by Page Transition with CSS3 by .

      Publicación de Gagdets propios en IFrame para Blogger:

      • Si deseas crearte "Gadgets" de diseño propio, que utilicen librería JQuery o CSSs que no estén disponibles en Blogger, puedes aprovechar la técnica de publicación de web en Drive para luego mostrarlos en tu Blog. Hay dos ejemplos con los que ya hemos trabajado en Diarios de la nube a tal efecto:

















      • En ambos casos, hemos Insertando el código en Blogger en un IFRAME la página index.html con cada archivo que requería el componente para dibujarse en la página.

      • Puedes insertar el código en Blogger llamando a la "Index.html" metiendo dentro del IFRAME la URL que llama a tu "Sitio" en Drive:
      <iframe frameborder="0" height="450" marginheight="0" marginwidth="0" noresize="" scrolling="No" src="https://googledrive.com/host/0Bwgc28XHjPA2Y3ByS1Vnc3lKY0k" width="620"> 
      </iframe>

      • En  src=" Debes meter la URL que Drive te asignó al compartir tu carpeta "Sitio".
      • EL height="450" y el width="500", 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.
      Así puedes crearte o utilizar "Gadgets" externos que por su sofisticación y componentes no puedes utilizar en Blogger. Extiendes la potencia de Blogger utilizando a Drive para poder subir archivos que sirvan par amontar componentes no disponibles en Blogger.

      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.

      33comentarios:

      1. Hola, se pueden asignar dominios en estas web´s hospedadas en Drive?

        ResponderEliminar
      2. Hola Ariel, no se les puede asignar IP directamente, habría que hacer una redirección primero.

        ¡Un saludo!.

        ResponderEliminar
      3. Hola Miguel me interesa mucho este post pero no se como crear ese archivo index.html me pierdo en el principio. Me dices que puedo poner en mi blog una transición de fotos de cabecera en vez de mi foto?
        Es que quiero dar el salto a una página mas formal y profesional y se me escapan muchas cosas. Necesito ayudaa!

        ResponderEliminar
        Respuestas
        1. Hola Ana,
          realizar un blog más profesional y convertirlo en una .com es algo que te vendría estupendamente. Hacerlo no es difícil, este mismo "gadget" te lo puedes montar en tu ordenador y ponerlo en el blog como desees.

          Si quieres intentamos ver qué se puede hacer, hay plantillas ya formadas en Internet (de pago y no de pago) que podrían venirte bien.

          Hay muchas formas de hacerlo, prueba paso a paso con este ejemplo: http://www.diariosdelanube.com/2013/10/maravillas-con-jquery-carrusel-de.html y las dudas que tengas me vas preguntando con total confianza.

          Un saludo!!

          Eliminar
      4. He probado en Sites y también funciona, ¿podría ser una forma de hacer funcionar esos gadgets que el filtro de código de google en Gsites no deja enlazar?

        ResponderEliminar
        Respuestas
        1. hola Pedro,
          no sé si gsites tiene también montado un servidor web para atender peticiones de páginas web. No lo he probado.

          Un saludo!

          Eliminar
      5. Avisame si se puede trabajar con bases de datos?

        ResponderEliminar
      6. Hola Kuoyifu,
        No es un Hosting como tal. Como explico en la guía, es capaz de llamar a páginas y recursos que se encuentren en subdirectorlos del mismo directorio general que contenga la index. Así pues dudo que sea capaz de trabajar con una BBDD o que pueda crearse un dominio con ello.

        Un saludo!!!

        ResponderEliminar
      7. No puedo reducir el formato de mi encuesta en mi blog ....alguien me puede ayudar?...

        ResponderEliminar
        Respuestas
        1. Hola Noel,
          para poderte ayudar necesito algún dato más... ¿te refieres al ancho o el alto que ocupa la encuesta en tu página?.

          Un saludo!!

          Eliminar
      8. Saludos Miguel dime puedo transformar mi blog en una wed

        ResponderEliminar
      9. Hola, una consulta. se pueden utilizar las imagenes que cargo en Google Drive en otras web externas. Se puede utilizar el link para subirlas o llamarlas de otra pagina web.

        ResponderEliminar
        Respuestas
        1. Una de tus imagenes https://3cfdc0ec5d08192f0d96d5cc187f119cf2345c7b.googledrive.com/host/0Bwgc28XHjPA2dlYtSEd0dHdXWVU/calm1.jpg la puedo llamar asi y la veo en el navegador. Como puedo hacer esto?? en mi caso subo una imagen, me da el vinculo https://drive.google.com/open?id=0B913-UN1yUZ9WWs3S1FNdnBFRWc&authuser=0 pero no puedo verlo en el navegador.

          Eliminar
        2. Hola!,
          si puedes, yo lo hago en varios tutoriales. Revisa desde el paso 2 hasta el 3, lo mismo que se hace con la index.html lo puedes hacer con una imagen. Debes de ponerla como pública y extraer el código tal cual lo explico en esos pasos.

          Un saludo!,

          Eliminar
        3. Miguel, no hay caso, me abre una pagina rara con codigo https://drive.google.com/file/d/0B913-UN1yUZ9YnBjN1dOdmNMdEE/view?usp=sharing

          Eliminar
        4. Hola,
          debes poner el código Drive tal como explico en el paso 3 al 3.2 (debes construir el enlace con esas instrucciones que pongo, no lo montes "en crudo" con los datos que te da Drive por defecto).

          Un saludo!

          Eliminar
      10. Ya no funciona Google Drive àra alojar webs. ¿Conocen algunas alternativas tan buenas como lo fue Google Drive? Gracias.

        ResponderEliminar
        Respuestas
        1. Hola!,
          si pruebas mi enlace funciona... ¿estás seguro que no sirve?. Quizás lo han quitado para nuevos enlaces y lleves razón... pero por si a caso verifícalo porque está funcionando al menos en mi caso, mira esta es la dirección que puedes poner para probar la que subí para hacer la guía: https://googledrive.com/host/0Bwgc28XHjPA2RlF5bGs2OWFGT00/

          Un saludo!

          Eliminar
      11. Vamos, que sí se que se puede hacer con enlaces al drive subidos ahora mismo. Lo acabo de hacer con 6 páginas web. Sólo hay que tener cuidado de asegurarse de que al principio del enlace pone https://googledrive.com/host/ como dice Miguel.
        Saludos

        ResponderEliminar
        Respuestas
        1. Correcto José Luís, puedes poner una web entera. Un saludo!

          Eliminar
      12. Yoob.juegos - Jugar juegos gratis de acción, juegos adictivos, juegos de rompecabezas, juegos de deportes, juegos de chicas y juegos de aventura en línea. ..y más. Muy juegos divertidos en YooB.juegos. Yoob Juegos

        ResponderEliminar
      13. Hola...
        Segui los pasos indicados, pero no sale mi pagina...me sale not found error 404
        Alguien puede ayudarme por favor.

        ResponderEliminar
        Respuestas
        1. Revisa el paso 3.1. Debe estar mal la dirección escrita, la url escrita.

          Eliminar
      14. Pues google drive, me anuncia el cierre de mi cuenta por considerarla que la utilizo como una web, y es que hay un archivo html que llama a otro archivo html.

        ResponderEliminar
        Respuestas
        1. A mí no me ha llegado un aviso similar. De todas formas, un HTML te lo puedes crear en cualquier CMS.

          Un saludo

          Eliminar
      15. Hola, a mi me pasa una cosa un poco extraña. Tenía la cuenta de drive con una web subida y todo perfecto, pero desde hace una semana o algo así no me deja entrar en mi web. Todo esta correcto,está visible pero me pone error 404, y que no encuentra el server. También he probado de entrar en tu página Miguel García, y me pone lo mismo. Y en otras página que he ido encontrando que en teoría funcionan también sucede lo mismo. Alguien sabe algo de esto, es un error mio puntual o a vosotros tampoco os va? Gracias de antemano.

        ResponderEliminar
        Respuestas
        1. ¡Tienes toda la razón!, he intentado hacerlo y me pasa lo mismo, es como si la INDEX no estuviera. Investigaré un poco el tema, a lo mejor es un cambio en la política de almacenamiento de datos de Drive y Google ha decidido que ya no se pueden almacenar webs.

          Lo miro y te digo.

          Gracias y un saludo!

          Eliminar
        2. Exacto como si no encontrase el archivo el cual tiene que cargar, y da el problema de servidor... Yo he estado buscando pero no he visto ninguna advertencia ni nada parecido que haga referencia a dicho problema. Sí, a mi también me ha parecido como si google se hubiese cansado de esto, y ha decidido cerrar esta opción, lo que me extraña es que no haya avisado ni nada parecido.

          Muchas Gracias, y si averiguas algo dices cosas.

          Un saludo, Bilbo

          Eliminar
        3. Nada... no veo nada. Seguramente lo cerraron porque alguien se pasó de la ralla almacenando alguna web...

          Un saludo

          Eliminar

       

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