05 septiembre 2011

Tutorial: Incrustar imágenes, vídeos y sonidos en un formulario de Google Docs.

Un atajo hasta que a Google le apetezca incluirlo como opción.


Hace ya tiempo que publiqué un tutorial en el que explicaba lo que era y cómo se creaba un formulario en Google Docs. Los que lo habéis probado ya conoceréis el gran potencial en el ámbito educativo de esta herramienta.
Sin embargo, una de las quejas más comunes es la imposibilidad de incluir imágenes, vídeos y demás en el formulario con lo que si se quiere hacer referencia a alguno, esos elementos han de ponerse fuera del formulario con las pegas que esto provoca.
Voy a intentar explicar de manera sencilla como conseguir incrustar dentro del formulario cualquier elemento externo que se encuentre en la web (otras páginas web, imágenes, vídeos, sonidos...):

Hay que tener en cuenta que se trata de un parche con lo que necesitaremos algunas cosillas:

1.- El formulario realizado en Google Docs (evidente).
2.- Un editor de HTML (recomendado, aunque no necesario).
3.- Los códigos para incrustar las imágenes, vídeos y demás (es decir los embed).
4.- Un lugar donde subir archivos (en un servidor propio o un hosting... como alternativa puedes usar Google Sites pero te obligará a descargar el archivo :(... También puedes crear una entrada nueva o página en un blog y copiar el código de tu formulario a través de la pestaña HTML Explicación más detallada de este método).

COMENCEMOS.

Debemos realizar el formulario de manera tradicional. Entramos en Google Docs y creamos uno nuevo. Evidentemente, el texto que introduzcamos lo haremos teniendo en cuenta que irá acompañado con todo lo que vayamos a incluir. Podemos añadir un fondo y cualquier tipo de pregunta.

Una vez terminado, y guardado, debemos "ver el formulario en directo" haciendo clic en el enlace que aparece al final de la página de edición.
Ahora deberíamos estar viendo el formulario tal cual nos lo ofrece Google Docs. En este momento vamos a comenzar el proceso de incluir elementos externos.

Debemos guardar el formulario en nuestro ordenador. Dependiendo del navegador que uses se realizará de una manera u otra. Por lo general, tendrás una opción en los menús que será "guardar como..." o "guardar página como..."

Si abrís el documento descargado, podréis comprobar como estaréis viendo el formulario, pero alojado en vuestro disco duro. Supongo que a estas alturas ya os imaginaréis por donde van los tiros.

Ahora modificaremos el formulario con un editor de HTML. Si no disponéis de ninguno existen varios softwares libres que podréis descargar para realizarlo. También se puede hacer con un editor de texto cualquiera pero de esa manera es bastante más fácil meter la pata.

Si estáis familiarizados con el HTML no hay problema. Si no es así, veréis como hay una serie de códigos y entre ellos (si buscáis bien) veréis las preguntas que habéis escrito en el formulario.

NOTA: En HTML se introducen elementos por medio de etiquetas que se abren y cierran. Por ejemplo, si quiero introducir un texto en negrita debo escribirlo entre dos etiquetas: <b> que "abre" la escritura en negrita y </b> que cierra la escritura en negrita. En nuestro caso las etiquetas importantes son las llamadas <label> y </label>
Cada pregunta y respuesta se encuentra entre las dos equiquetas "label". Debemos tener cuidado de no introducir los vídeos y demás entre esas etiquetas, sino fuera. Si cumplimos este requisito no tendremos ninguna problema, aunque en principio tampoco debería pasar nada por saltarse esta norma.

Ve buscando donde quieres colocar tus "añadidos" y pega el código embed. Si conoces el funcionamiento del código HTML, o usando el mismo editor, podrás modificar como quieras el formulario (tipo de letra, justificación, otros elementos...). Guárdalo.

Vamos terminando. Solo queda subir el documento a un servidor propio (o a Google Sites, como hemos dicho antes o una entrada de blog). La dirección para poder realizar el formulario será la de tu servidor, donde hayas alojado el mismo.

Las respuestas las recibirás en el formulario que realizaste en Google Docs, en forma de hoja de cálculo, como siempre.

Espero que se entienda bien :)

AYUDA:

En el siguiente enlace encontraréis 4 tutoriales que explican como incrustar distintos elementos en marcas de lugar de Google Earth. Esos mismos códigos los podéis usar para incrustar en un formulario o en cualquier página web.

22 comentarios:

Unknown dijo...

Gracias. Voy a probarlo. Ja te cuento. Si lo consigo serà un gran progreso para mis exámenes y ejercicios en linea. Repito, muuuchas gracias, Un gran post.

DCB dijo...

Perfecto! Muchissimas gracias!!! Fàcil i ràpido! Se puede colgar en el dropbox y funciona perfectamente.

Hugo dijo...

Logré poner la imagen. Gracias por la info!!!

Lo que no logro hacer es que se pueda acceder desde un link a DropBox. Al abrir aparece el código en lugar de la página del formulario. ¿Alguna idea?

Óscar Barquín dijo...

Pues creo que no se puede enlazar una página web a Dropbox, lo que haces es descargar el contenido.
Prueba con Google Sites...

Víctor dijo...

Hola Óscar,

Ante todo felicidades por el post, me ha sido muy útil.

Mi pregunta es la siguiente, ¿Se puede habilitar un script en el formulario que permita a los usuarios subir archivos (imágenes, rar, zip...) desde su ordenador?

La intención es que, además de responder las preguntas, puedan aportar archivos para que suban a una carpeta alojada en mi servidor.

No controlo mucho de html pero...

Gracias de antemano y un saludo

Óscar Barquín dijo...

Hola Victor,
Pues para poder hacerlo supongo que necesites crear un script con PHP y alojar el formulario en un servidor con PHP instalado.
No deberían haber problema para añadir cualquier línea de código a tu formulario ya que en el momento que lo descargas funciona como algo independiente de google docs.

Víctor dijo...

Estupendo Óscar lo probaré, gracias por responderme tan rápidamente. Un saludo.

Recibe tu Luna dijo...

Hola, que bueeenooo! Gracias por esta info!

Simplifique lo de subir el html modificado a "algun lado" (que no sabia donde) abriendo un blog, creando una Pagina y antes de escribir nada, cambie de modo Redactar a modo Html y alli pegue todo el codigo modificado y tarán!

Aqui el resultado:

http://recibetuluna-ronda.blogspot.com.ar/p/pequena-ronda-de-invierno-import.html

Óscar Barquín dijo...

Efectivamente y se sube al blog a través del modo html se conseguirá el el efecto deseado.
Lo único a tener en cuenta es que las imágenes, vídeos, presentaciones, etc. han de estar en la red.
Añado lo del blog al tutorial.
Gracias.

Nuria dijo...

Hola Óscar, he modificado el html y si abro el formulario en mi disco duro se abre con las imágenes, lo que significa que lo he hecho bien. El problema lo tengo al subirlo a Internet. Si lo subo a Google Docs se me sube como un Documento de texto. ¿Qué puedo hacer? Gracias.

Óscar Barquín dijo...

Hola Nuria,
Efectivamente, creo que no puedes usar Google Docs para alojar el formulario.

Debes encontrar otro medio:
- Usa un servidor propio.
- Si no dispones, prueba con Google Sites que permite subir documentos.
- También puedes copiar el HTML y pegarlo en la entrada de un blog.

Anónimo dijo...

Hola Oscar. Gracias por el tutorial pero aun tengo una duda. Modifiqué mi formulario en Dreamweaver y ya lo tengo como lo quiero publicar pero no se cómo puedo subirlo a google sites. He tratado de buscar un tutorial pero no lo encuentro para que quede como tu ejemplo.

Gracias

Anónimo dijo...

EXCELENTE TUTORIAL, hace tiempo andaba batallando para hacer mis examenes en formularios de google, y los estaba haciendo, pero en texto plano, y hay muchos reactivos que quedarían mejor, si tenian imagenes para apoyar los razonamientos, y pues no habia logrado hacerlo, hoy CON TU TUTORIAL, EXCELENTE, y comparto para los que llegan o continuen leyendo tu post, que las imagenes pueden subirlas a fliker y de alli toman el codigo embed, y ademas se pueden poner justo despues de cada opciòn de respuesta siempre y cuando respeten la apertura y cierre de la etiqueta, ya hice las pruebas y funciono perfectamente. SALUDOS Y GRACIAS.

Óscar Barquín dijo...

Gracias a ti por tu comentario.
Un saludo.

andres acuña dijo...

Buen día amigo, Excelente aporte. una duda como logro cambiar la acción del botón ENVIAR, o mejor aun como logro cambiar los enlaces que aparecen cuando se envía la encuesta, lo que quiero hacer es enviar el formulario pero que solo lo responda una vez cada persona.

Óscar Barquín dijo...

Hola Andrés,
No entiendo muy bien lo que quieres, pero para personalizar el botón supongo que tendrás que entrar en el código y pegarte con el formulario, pero es posible que pierdas la recepción de respuestas con lo que se hace inútil la herramienta.
Personalizar los mensajes al enviar un formulario (si eso es lo que preguntas) todavía es algo que no he investigado.
De todos modos, puedes probar a ver si algo de lo que aparece en esta otra entrada te sirve:
http://www.oscarbarquin.es/2012/11/tutorial-publicar-un-formulario-de.html

Unknown dijo...

Haber de todo esto entiendo lo siguiente: descargo el formulario, edito el código segun lo requerido y luego uqe? lo vuelvo a subir a google drive o que?

Óscar Barquín dijo...

En el punto 7 te explica:
"Solo queda subir el documento a un servidor propio (o a Google Sites, como hemos dicho antes o una entrada de blog)."
De todos modos, puedes consultar la entrada donde te comenta la posibilidad de hacer todo el proceso en Blogger:
http://www.oscarbarquin.es/2012/11/tutorial-publicar-un-formulario-de.html
Saludos,

Javier Sanz dijo...

Hola,muchas gracias por la explicación.

He modificado el formulario de Google Drive con un editor de html para incluir imágenes y he insertado el código como cuadro HTML en mi página de Google Site. Me da el siguiente error y no me deja guardarlo:

97+40 - 94: failed to load external url 2803853122-formviewer%5fprd.js

¿Cómo podría solucionarlo? ¿Una vez solucione el error con un link de google Site ya podría ver el formulario con la imagen?

Por cierto, no aparecen las imágenes que tengo almacenadas en Google Drive, ¿qué hago mal?
Muchas gracias!

Óscar Barquín dijo...

La verdad es que nunca lo he intentado en Sites.
Prueba en un blog de blogger (ahí si que funciona aunque también presenta algún error).
Aquí tienes otro tutorial para eso:
http://www.oscarbarquin.es/2012/11/tutorial-publicar-un-formulario-de.html

Unknown dijo...

En primer lugar muchas gracias por el Blog. En algún formulario de Google docs necesito insertar la opción de subir archivos. Es decir, que la persona que lo cumplimenta vea la casilla y pueda adjuntar/subir el documento que se le pide. ¿Se puede hacer por medio del código HTML?, Si es posible ¿Cómo se hace? Muchas gracias de nuevo,

Fdo.:Rafa

Óscar Barquín dijo...

Hola Rafael,
Pues me parece que usando simplemente el formulario Google Docs no va a ser posible.
Te comento a modo de opinión, sin verificar nada, con lo que es posible que pueda estar equivocado:
Poder adjuntar archivos a un formulario te haría falta usar PHP y no sé como gestionaría la hoja de cálculo de Google Docs ese documento. Supongo que no lo hiciese caso. Entonces tendrías que enviar los datos a otra dirección con lo que perderías los beneficios de ser un formulario Google Docs. Por lo tanto, creo que la alternativa PHP no sería factible.
Otra opción sería encontrar un script en java que te haga esa función (incluyendo la dirección de envío del archivo adjunto) e incluirla en el formulario. Esto creo que sí funcionaría. Prueba a buscar algún script que haga esa función y ya nos comentas.