INSTITUTO TECNOLÓGICO EL LLANO AGUASCALIENTES

Carrera: ingeniería en tecnologías de la información y comunicacionesMateria: desarrollo de aplicaciones móvilesProfesor: Cesar Omar Portillo MorenoTema: formulario web móvilEquipo: Santos Amparo Ortiz Hernández

Diego Rolando Herrera MartínezGrado y grupo: 7°A

ÍNDICE

• Formulario Web Móvil- Usos de controles- Creación de interfaces de usuario

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.

Formularios Web Móviles

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.

Mejoras de Usabilidad

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.

Minimizar la entrada de Texto

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 teclas u otras, dependiendo del tipo de campo y del dato que se supone tiene que introducirse en él.

Minimizar el numero de campos

Utilizar campos input del HTML5

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 formularios para móviles y los podemos eliminar sin ningún reparo.

Alinear etiquetas arriba

Eliminar contenido accesorio

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 servidor, porque los formularios HTML de manera predeterminada no implementan esta funcionalidad.

Recordar datos introducidos anteriormente

Evitar formularios multicolumna

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 manejables, pero cuando las superamos se hace todavía más necesario alguna alternativa como ésta.

Obtener automáticamente los datos que se pueda

Uso inteligente de los campos INPUT con autocompletar

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.

Opción para ver la clave escrita en los campos “password”

Usos de controlesEn 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ónAdRotator (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).

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.

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.

Creación de interfaces de usuario

• 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.

Utilizar formularios

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.