Un lugar para publicar y modificar nuestros formularios.
Hace ya un tiempo que expuse en el tutorial: Incrustar imágenes, vídeos y sonidos en un formulario de Google Docs una forma de modificar los formularios de Google Docs para poder incluir todos aquellos aspectos que queramos. (Ver ejemplo)
Uno de los problemas más extendidos con este método es que es necesario modificar el HTML con algún programa y que, a su vez, es necesario un servidor donde colgar ese formulario.
Una opción para facilitar este trabajo (no sin algún que otro inconveniente) es usar la entrada de un blog como contenedor y usar su editor para modificar el formulario. En este tutorial me centraré en blogger por ser donde he experimentado con esta solución.
A grandes rasgos lo que hay que hacer es lo siguiente:
- Crear el formulario de google de la manera usual.
- Ver el formulario "en directo"
- Usar la opción de tu navegador para ver el código fuente del formulario.
- Seleccionar todo el código fuente y copiarlo.
- Crear una nueva entrada de blog y en la edición HTML pegar el código del formulario.
- Desde la vista normal insertar imágenes y vídeos de la manera tradicional. (Aquí nos encontraremos el primer problema)
Esto sería muy bonito si funcionase al 100% pero como lo que estamos haciendo es una pequeña chapucilla tiene sus inconvenientes y es necesario una edición del código para que todo funcione correctamente. A partir de aquí os presento como editar de forma básica del código y en tutoriales posteriores nos meteremos a una edición más detallada.
Pero antes veamos porqué esto no funciona del todo bien, para poder entender las soluciones.
¿PORQUÉ NO FUNCIONA COMO DEBERÍA?
La respuesta es evidente, porque los formularios no están pensados para copiar su código en una entrada de un blog.
El problema es que al copiar todo el código estamos incluyendo HTML pensado para funcionar solo (para entendernos). Por eso provoca errores en nuestra entrada de blog.
Para que todo funcione correctamente tendremos que borrar el código sobrante.
EDICIÓN BÁSICA DEL CÓDIGO
Vamos a ver un esquema de la estructura del código de un formulario de Google Docs:
Por tanto, tras copiar el código y pegarlo en el apartado HTML de la entrada del blog, eliminaremos lo que no está en azul.
Si hemos hecho esto de manera correcta, al volver a REDACTAR ya veremos nuestro formulario (sin estilos, pero los tiene). Ahora podemos añadir imágenes, vídeos y demás a través de las opciones del propio editor de Blogger.
PROBLEMA GORDO: Como la etiqueta style incluye (entre otros) fondo de pantalla, lo mínimo que deberéis hacer es eliminar del código style la parte del color de fondo y la url de la imagen de fondo (está al comienzo del style tras el body).
De momento es todo. Decir que este sistema sigue presentado algún que otro problema, pero en breve espero poder publicar otros tutoriales donde explicaré cómo lo he solucionado (incluido lo del fondo de pantalla) y también cómo personalizar el formulario.
Para los que quieran avanzar:
Pensamiento final: Con lo fácil que sería para Google incluir un editor al estilo blog en sus formularios... incomprensible.
Vamos a ver un esquema de la estructura del código de un formulario de Google Docs:
- Etiquetas generales de información DOCTYPE, apertura de <html>, <head> y demás...
- Etiqueta de apertura de estilo <style> ... código de estilo y etiqueta de cierra de estilo </style>
- Etiqueta de cierre </head> y etiquetas de <body> y varias de <meta>
- Comenzo del formulario con etiquetas <div>. A partir de ahí es el código del formulario.
- Final con etiqueta de cierre <body> y <html>
Por tanto, tras copiar el código y pegarlo en el apartado HTML de la entrada del blog, eliminaremos lo que no está en azul.
Si hemos hecho esto de manera correcta, al volver a REDACTAR ya veremos nuestro formulario (sin estilos, pero los tiene). Ahora podemos añadir imágenes, vídeos y demás a través de las opciones del propio editor de Blogger.
PROBLEMA GORDO: Como la etiqueta style incluye (entre otros) fondo de pantalla, lo mínimo que deberéis hacer es eliminar del código style la parte del color de fondo y la url de la imagen de fondo (está al comienzo del style tras el body).
De momento es todo. Decir que este sistema sigue presentado algún que otro problema, pero en breve espero poder publicar otros tutoriales donde explicaré cómo lo he solucionado (incluido lo del fondo de pantalla) y también cómo personalizar el formulario.
Para los que quieran avanzar:
- El problema de las cajas que no respetan el salto de línea lo he solucionado con código <p> de apertura y </p> de cierre.
- Lo del fondo del formulario, usando un blog intermedio con una template "vacía" de todo menos de las entradas y usando código iframe para incrustar luego en el blog que quiero.
Pensamiento final: Con lo fácil que sería para Google incluir un editor al estilo blog en sus formularios... incomprensible.
Entradas
