Formularios web

1. INSTITUTO TECNOLÓGICO EL
LLANO AGUASCALIENTES
Carrera: ingeniería en tecnologías de la información y
comunicaciones
Materia: desarrollo de aplicaciones móviles
Profesor: Cesar Omar Portillo Moreno
Tema: formulario web móvil
Equipo: Santos Amparo Ortiz Hernández
Diego Rolando Herrera Martínez
Grado y grupo: 7°A

2. ÍNDICE
• Formulario Web Móvil
- Usos de controles
- Creación de interfaces de usuario

3. Los formularios son uno de los elementos donde mayor
adaptación a dispositivos móviles se requiere, especialmente por
la dificultad que a menudo se encuentra en los procesos de
entrada de datos. Como sabemos, escribir texto en los teclados
virtuales es muchas veces una tarea tediosa, de modo que
debemos minimizar en la medida de lo posible la entrada de
texto escrito.

4. Existe una serie de consejos interesantes a tener en cuenta
cuando se diseña un formulario que queremos que sea sencillo
de usar en un móvil. Los veremos a continuación, pero en
general nos sirve la máxima comentada en el artículo anterior
"Más es menos", porque cuanto menor y más objetivo sea el
formulario, más contentos estarán tus usuarios.

5. Como decíamos, cuanto menos texto haya que escribir, mucho
mejor. Existen muchas veces opciones alternativas a un campo
de texto, como cajas de selección, botones de radio, “sliders”,
etc. En muchos casos sólo nos servirá colocar un campo de texto
y tampoco debe significar un problema, pero al menos sí
debemos minimizar el número de campos donde tener que
escribir datos con el incómodo teclado virtual. Un claro ejemplo
de este detalle es utilizar “datepickers”, para seleccionar una
fecha en un calendario, en lugar de escribirla a mano.

6. Cuanto menor sea el número de campos del formulario, también
más satisfecho estará el usuario. En general, si hay campos
prescindibles, se quitan y punto.
En HTML5 existen diversos tipos nuevos de campos INPUT que
pueden ayudarnos a mejorar la interfaz de entrada de datos en los
formularios. Existen campos para selección de colores, fechas,
meses, números, rangos, URL, email, etc. Estos campos muchas
veces se implementan con ligeras diferencias en el navegador a los
campos INPUT de texto de toda la vida, por ejemplo cambiando
cosas como el “layout” del teclado virtual, para que muestre unas

7. Al lado de cada campo de formulario se suele colocar un texto
explicativo que sirve para saber qué información se debe colocar en el
campo, al que en inglés se le llama "label" y que se traduciría por
etiqueta. Ese texto debe aparecer al lado del campo, pero debido al
tamaño reducido de las pantallas de móviles, se recomendaría
colocarlo en la parte de arriba del campo, en lugar de al lado, como se
suele hacer en formularios habitualmente.
A veces los formularios para webs de escritorio tienen elementos
accesorios para ayudar a rellenar el formulario, como “tips” que se
activan al situarse sobre determinados campos o enlaces que pueden
abrir capas flotantes o “pop-ups” para explicar ciertas informaciones.
Generalmente, todos esos contenidos accesorios son prescindibles en

8. Por motivos similares al de colocar las etiquetas arriba (poco espacio en las
pantallas de los móviles), también es buena idea organizar los formularios
en una única columna. Pero es que además, en este caso, los formularios
de varias columnas a menudo son menos claros en el sentido de saber el
orden en el que se supone que la información debe escribirse.
En la medida de lo posible, siempre será de utilidad que nuestro sitio web
sea lo suficientemente inteligente como para no solicitar datos que ya
conocemos de antemano. Por ejemplo, si se le pidió al usuario el nombre
en algún momento, es bueno introducirlo ya en el campo nombre del
formulario, en vez de hacer que lo vuelva a escribir. Otro ejemplo: si es la
segunda vez que se rellena ese formulario, determinados campos que se
supone que no van a variar, aparecerán con el mismo texto introducido
anteriormente. Para conseguir esto tendrás que utilizar algún lenguaje de
programación, como Javascript en el lado del cliente o PHP en el lado del

9. Existen diversas tecnologías asociadas al HTML5 que nos pueden ofrecer
información del usuario de manera automática y que, en la medida de lo posible,
debemos utilizar para minimizar la entrada de datos por parte del usuario. El
más claro ejemplo es la geolocalización, que nos permitiría averiguar dónde está
físicamente ese usuario. De modo que, en vez de obligarle a escribir datos como
su país, ciudad, etc. podemos ofrecer que el propio dispositivo defina su
localización.
Cuando debemos utilizar un campo INPUT para entrada de datos, algo que a
veces es incluso más indicado que otras alternativas, siempre que sea posible se
debe usar la función de autocompletar. Por ejemplo, pensemos en un campo
país, que tiene más de 150 posibilidades. Podríamos hacerlo en un elemento
SELECT, para que el usuario no tenga que teclear el nombre del país, pero puede
ser incluso más cómodo un campo INPUT, en el que escribiendo una o dos letras
ya proponga países que las contengan. Quizás 150 opciones todavía sean

10. Los campos donde escribir claves a menudo son un problema por
los errores tipográficos, tan habituales en los teclados virtuales.
No es mala idea crear un botón o algún elemento que nos permita
ver escrita en texto plano la clave que el usuario ha escrito en un
campo password. Eso debe ser una opción para el usuario, es
decir, que si el usuario no la selecciona, el campo password, debe
ocultar la clave escrita para mayor seguridad.

11. En esta sección se explica lo que se puede hacer con cada uno de
los controles de servidor Web que están disponibles en Visual
Studio. Si desea utilizar controles de servidor HTML en su
aplicación, vea Controles de servidor HTML.
En esta sección
AdRotator (Control de servidor Web)
Describe AdRotator, que recorre en ciclo una serie de carteles publicitarios en los que se
puede hacer clic
Button (Controles de servidor Web)
Describe los controles Button, que permiten al usuario enviar comandos, por ejemplo, enviar
un formulario a un servidor.
Calendar (Control de servidor Web)
Describe el control Calendar, que permite a los usuarios ver y seleccionar fechas.
CheckBox y CheckBoxList (Controles de servidor Web)
Describe estos controles de opción, que ofrecen a los usuarios la posibilidad de cambiar
entre opciones de tipo verdadero/falso (true/false), sí/no (yes/no) y activado/desactivado
(on/off).

12. DataGrid (Control de servidor Web)
Describe el control DataGrid, una cuadrícula de múltiples columnas, enlazada a datos que
extensas opciones de personalización durante el diseño.
DataList (Control de servidor Web)
Explica el control DataList, que muestra filas de información de la base de datos con un formato
personalizable.
DropDownList (Control de servidor Web)
Describe el control DropDownList, que permite a los usuarios realizar una selección en un cuadro
de lista de selección simple.
HyperLink (Control de servidor Web)
Explica el control HyperLink, que proporciona un medio para crear y manipular vínculos en una
página Web desde el código del servidor.
Image (Control de servidor Web)
Explica el control Image, que permite mostrar imágenes en páginas de formularios Web Forms y
administrar las imágenes en el código del programador.
Label (Control de servidor Web)
Describe el control Label, que proporciona un medio para mostrar texto en una página de
formularios Web Forms mediante programación.

13. Literal (Control de servidor Web)
Describe el control Literal, que procesa texto estático en una página Web sin agregar ningún
elemento HTML.
ListBox (Control de servidor Web)
Describe el control ListBox, que permite a los usuarios seleccionar uno o más elementos de una
lista predefinida.
Panel (Control de servidor Web)
Describe el control Panel, que proporciona un contenedor para otros controles dentro de la página.
PlaceHolder (Control de servidor Web)
Describe el control PlaceHolder, que permite colocar un control contenedor vacío en la página y, a
continuación, agregarle dinámicamente elementos secundarios en tiempo de ejecución.
RadioButton y RadioButtonList (Controles de servidor Web)
Describe estos controles de opción, que permiten a los usuarios seleccionar uno o más elementos
de una lista breve predefinida.
Repeater (Control de servidor Web)
Describe el control Repeater, que es un contenedor enlazado a datos que produce una lista de
elementos individuales.
Table, TableRow y TableCell (Controles de servidor Web)
Describe el control Table, que permite construir tablas de propósito general en una página de
formularios Web Forms.
TextBox (Control de servidor Web)
Describe el control TextBox, que proporciona a los usuarios un medio para escribir datos en una
página de formulario Web Forms, incluidos texto, números y fechas.

14. • En esta lección, aprenderá lo que es una interfaz de usuario (UI), qué
son los controles y cómo agregar controles a una interfaz de usuario.
• En los primeros días de los equipos personales, los usuarios
interactuaban con programas principalmente a través de una línea de
comandos. Se iniciaba un programa y después se hacía una pausa
para recibir los datos proporcionados por el usuario. Sin embargo, la
mayoría de los programas que se utilizan hoy en día se ejecutan en
una o varias ventanas. Estas ventanas permiten que el usuario se
comunique o interactúe con el programa escribiendo, haciendo clic
en los botones, eligiendo elementos en los menús preestablecidos y
así sucesivamente. En estas y en las siguientes lecciones, aprenderá a
crear sus propias interfaces de usuario basadas en Windows.

15. Los formularios son las unidades de creación básicas para la interfaz de usuario. Cada
formulario del programa representa una ventana que se aparece a los usuarios. Cuando se
trabaja en el IDE (entorno de desarrollo integrado) de Visual Basic, un formulario puede
considerarse como el diseñador que se utiliza para diseñar la interfaz de usuario de la
aplicación, del mismo modo que Windows Paint se utiliza para dibujar una imagen.
Los controles se utilizan en el diseñador para crear la apariencia de la interfaz de usuario. Un
control es un objeto que tiene un aspecto y comportamiento predefinidos. Por ejemplo, un
control Button tiene el aspecto y el comportamiento de un botón de comando: cuando un
usuario hace clic en él, cambia para mostrarlo.
Cada control de Visual Basic tiene una finalidad. Por ejemplo, los controles TextBox se
utilizan para escribir texto, mientras que los controles PictureBox se utilizan para mostrar
imágenes. Hay más de cincuenta controles diferentes incluidos en Visual Basic; también se
pueden crear controles propios conocidos como controles de usuario. Obtendrá más
información sobre cada tipo de control en lecciones posteriores.
Al diseñar la interfaz de usuario, se arrastran los controles desde el Cuadro de herramientas,
se colocan en un formulario, luego se ubican y se cambian de tamaño para crear el aspecto
deseado. Puede cambiar el aspecto aún más estableciendo propiedades de formularios y
controles en la ventana Propiedades. Por ejemplo, los formularios y la mayoría de los
controles tienen una propiedad BackColor que se utiliza para establecer su color de fondo.