Guia 3 de informatica septimo, Esquemas y mapas conceptuales de Tecnología

¡Descarga Guia 3 de informatica septimo y más Esquemas y mapas conceptuales en PDF de Tecnología solo en Docsity!

Contenido

CLASE 5

7. Creación de formularios por medio de Jotform 7.1. Conocimiento del entorno gráfico 7.2. Crear una cuenta 7.3. Crear un formulario

 BARRA DE MENÚ: En ella encontramos el botónMis formularios, en el cual se

mostrarán los distintos formularios que hayamos creado; el botónPreguntas más

frecuentes presentará las respuestas a las dudas más comunes, que tienen los

usuarios de Jotform; laGuía del usuario nos mostrará artículos con los pasos para

realizar formularios; elForo muestra la participación de los usuarios, y se realizan

preguntas y respuestas de acuerdo con la experiencias en el desarrollo de formularios; el Blog nos muestra las últimas publicaciones o novedades de Jotform;

y el botónPrecios incluye las distintas tarifas que tiene la aplicación, para nuestro

caso utilizaremos la versión gratuita.

 TÍTULO DEL FORMULARIO: Escribiremos el título que le vamos a dar a nuestro formulario.

 ÁREA DE TRABAJO: Iremos armando nuestro formulario, y arrastrando los elementos que vayamos a agregar desde el Panel de herramientas. En esta área encontramos dos pestañas que nos darán herramientas de edición.

 PANEL DE HERAMIENTAS: En el encontramos las distintas formas que le vamos a agregar a nuestro formulario. Se divide en 5 grupos que son:

 Herramientas del formato: Nos permiten agregar elementos

básicos al formulario como: Cuadros de texto, botones de radio, casillas de verificación, menús desplegables, cuadros de texto, botones para subir archivos, y el botón para enviar el formulario.

 Herramientas rápidas: Nos permite agregar elementos con

formas establecidos como: Nombre, E-mail, dirección, teléfono, fecha de nacimiento.

 Herramientas de sondeo: Por medio de esta herramienta

podemos agregar botones para calificar algún servicio, o para medir niveles de satisfacción.

 Herramientas avanzadas: Estas herramientas contienen

elementos más avanzados para incluir en un formulario, tales como: El ingreso de una contraseña, fecha y hora, reconocimiento de un captcha, entre otros.

 Herramientas de pago: Éstas son opciones de pago en línea (en

caso de comercializar algún producto), tales como PayPal, Google checkout, Worldpay, entre otros.

 PROPIEDADES DEL FORMULARIO:

En el costado izquierdo encontramos las opciones: Guardar, Pre-visualizar (para tener una vista previa de nuestro formulario), Deshacer y rehacer. Todas estas opciones son fijas.

En el costado derecho encontramos opciones para el formulario, como temas, tipo, color y tamaña de la letra, color de fondo del formulario, ancho y ubicación de cada elemento insertado en el formulario.

Por cada elemento insertado en el área de trabajo se creará una nueva pestaña, y cada una de ellas tendrá nuevas opciones aplicables al elemento insertado, como se puede apreciar en la siguiente imagen:

Imagen 3. Propiedades del formulario

[^3 ]

7.2. CREAR UNA CUENTA EN JOTFORM

Para empezar a utilizar las herramientas de creación de formularios, lo primero que debemos hacer es crear una cuenta en Jotform, para acceder a servicios de creación, guardado y revisión. Para ello vamos a la esquina inferior derecha de la pantalla, y vemos

un recuadro que dice: Cree una cuenta - ¡¡Es gratis!!

Ya que conocemos el entorno de Jotform, vamos a crear un formulario básico para observar cómo se arma la estructura del mismo. Recordemos que en el panel de herramientas se encuentran los botones que vamos a arrastrar al área de trabajo. Al ir a la página de Jotform (http://www.jotform.com/), estaremos en ubicados en el área de trabajo para empezar a crear nuestro formulario.

El primer elemento que arrastraremos será el encabezado.

Imagen 7. Arrastrar encabezado del formulario

[^7 ]

Una vez lo hayamos arrastrado y soltado en el área de trabajo, podremos editarlo.

Imagen 8. Edición de Texto

[^8 ]

Haremos clic en el recuadro y le cambiaremos el nombre.

Imagen 9. Cuadro de texto editado

[^9 ]

Enseguida insertaremos un cuadro para ingresar datos personales como: Nombre, e-mail, teléfono, número de documento y fecha de nacimiento, los cuales encontraremos en las herramientas rápidas.

Imagen 10. Propiedades de un elemento

[^10 ]

Podemos ver que en la parte superior del área de trabajo se ha creado una nueva pestaña

llamada Propiedades: Nombre completo, y en las propiedades del formulario

encontramos herramientas pertenecientes al cuadro de nombre completo. Otros espacios son:

 Alineación de la etiqueta: Nos permite ubicarla a la izquierda, centro o derecha

del formulario.

Imagen 11. Alineación de etiqueta

[^11 ]

 Requerido: Nos marcará la casilla como espacio obligatorio que debe ser

diligenciado.

Imagen 12. Campo requerido

[^12 ]

Una vez que marcamos la opción Requerido , veremos un asterisco de color rojo sobre la

casilla por diligenciar.

Imagen 17. Ejemplo de la herramienta Texto al pasar por.

[^17 ]

Al pasar el cursor encima del nombre, aparece en el costado derecho un recuadro que muestra un texto de ayuda, para el diligenciamiento de la casilla.

Por lo general cuando insertamos un elemento, las propiedades de Alineación de la

etiqueta, Requerido y Texto al pasar por siempre van a estar visibles, y otros

elementos como los mencionados anteriormente (Prefix - Suffix y Middle Name) son

aplicables a ciertas casillas.

Ya hemos insertado dos elementos, el encabezado y la casilla para el nombre, pero nos faltan: E-mail, teléfono, número de documento y fecha de nacimiento. El proceso para agregarlos será el mismo que hemos utilizado, arrastrar desde el panel de herramientas y soltar en el área de trabajo. Al igual que la casilla de nombre, éstas también tendrán sus propiedades, y podemos aplicarle las que deseemos.

Una vez hayamos incluido las casillas solicitadas, podemos hacer clic en el botón Pre

visualización , para observar cómo va quedando nuestro formulario.

Imagen 18. Pre visualización del formulario

[^18 ]

De esta manera va quedando nuestro formulario, y podemos ver que las casillas obligatorias son: Nombre, número de teléfono, Número de documento y Fecha de nacimiento. Por el contrario el e-mail vemos es una casilla de diligenciamiento opcional.

Si nos parece que el estilo del formulario es muy simple, podemos personalizarlo, aplicándole un tema preestablecido o cambiándole el color de fondo, el tipo, el tamaño y el color de la letra.

En la pestaña Estilo del formulario, podemos encontrar estas opciones:

Imagen 19. Estilo del formulario

[^19 ]

En el botón Temas encontramos varios estilos aplicables a nuestro formulario.

Imagen 21. Ejemplo de un tema aplicado al formulario

[^21 ]

En el botón Fuente, podemos seleccionar algún tipo distinto para aplicar.

Imagen 22. Botón Fuente

[^22 ]

La opción Tamaño de fuente nos permitirá aumentar o disminuir el tamaño de la letra.

Imagen 23. Botón Tamaño de Fuente

[^23 ]

La siguiente paleta nos permite cambiar el color de fuente.

Imagen 24. Botón Color de Fuente

[^24 ]

El color de fondo también es modificable, con la siguiente paleta:

Imagen 25. Botón Fondo

[^25 ]

Para modificar el ancho de formulario accedemos a:

Imagen 30. Pre visualización del formulario

[^30 ]

Ya que hemos explorado los estilos que podemos aplicar y la personalización de las opciones agregadas, seguiremos añadiendo elementos a nuestra área de trabajo, de acuerdo con lo que queramos preguntar en nuestro formulario.

Para continuar con el formulario de ejemplo, insertaremos una lista desplegable en la cual aparecerán los cursos disponibles.

Imagen 31. Herramientas de Formato - menú desplegable

[^31 ]

Página

Una vez insertada, haremos clic para editar el título de la etiqueta, y le colocaremos

Seleccione el curso al cual se desea inscribir. Al lado derecho de la lista desplegable

veremos un cuadro en el que haremos clic, para editar el contenido de la lista desplegable.

Imagen 32. Ejemplo de una lista desplegable

[^32 ]

Al hacer clic en el botón señalado, se abrirá un recuadro en el cual iremos escribiendo el contenido que se verá en la lista desplegable.

Imagen 33. Edición de una lista desplegable

[^33 ]

Una vez hayamos escrito los ítems que irán en la lista, hacemos clic en el botónAceptar

para que éstos queden almacenados. Luego de esto, ya se podrán ver en el área de trabajo.

Imagen 34. Lista desplegable editada

[^34 ]

Haremos clic en editar, para modificar los campos de la forma insertada

Imagen 38. Ejemplo de casilla de verificación editada

[^38 ]

Vemos ya la forma editada, con los datos que insertamos.

Enseguida insertaremos una forma de botones de radio, que sólo nos permite seleccionar una opción.

Imagen 39. Ejemplo de una lista de botones de radio

[^39 ]

En ella preguntamos si ya se había tomado alguna capacitación en algún portal, con las

posibles respuestasSí oNo.

Imagen 40. Ejemplo de una lista de botones de radio editada

[^40 ]

Ya hemos insertado elementos de las herramientas del formato y herramientas rápidas, e insertaremos un elemento de la barra de herramientas de sondeo, que nos permite evaluar algún servicio o elemento en especial.

Para nuestro formulario insertaremos la forma Escala de Calificación:

Imagen 41. Ejemplo de una escala de calificación

[^41 ]

Se debe editar y pedir que se califique algún aspecto, como por ejemplo: La variedad de cursos disponibles.

Imagen 42. Ejemplo de una escala de calificación editada

[^42 ]

Ahora insertaremos formas de las herramientas avanzadas, como es el caso de un Captcha, que permite verificar que un ser humano y no una máquina realice la inscripción.

Imagen 43. Ejemplo de herramientas avanzadas - Captcha

[^43 ]

Editaremos el campo superior de la ventana, donde pediremos al usuario que diligencie el texto que ve en el recuadro.

Imagen 44. Ejemplo de Captcha editado

[^44 ]

Vemos ahora el recuadro, en el que es obligatorio el diligenciamiento de esta casilla. Para finalizar la edición de nuestro formulario, podemos insertar una imagen alusiva a nuestro formulario o a la empresa que lo realizó.

Para ello, dentro de las herramientas avanzadas, arrastraremos la forma Imagen