Se encuentra en:
MADEJA 1.4.0 » Subsistemas » Interfaz de usuario » Normalización de Interfaces »

Guía de decisión de componentes

PROC-0005 (Procedimiento)

Permite tomar decisiones sobre cómo seleccionar los componentes de formulario, definidos en función de las necesidades de cada Sistema de Información.

Flujo de actividades

Imagen para representar el flujo de actividades

Detalle de las actividades

  1. Introducción de texto
  2. Selección de fichero
  3. Enviar formulario
  4. Listar elementos
  5. Selección de opciones
Título
Introducción de texto
Descripción

Realizar este paso si se desea seleccionar un componente para introducir texto.
Tareas

Según el texto que se desee introducir, existen las siguientes opciones:

  1. Texto con tamaño menor o igual a una línea
    Utilizar el componente: Input type='text'
    Ejemplo: <input type="text" id="idUsuario" name="nombreUsuario" maxlength="12" size="13" />
  2. Texto con tamaño mayor a una línea
    Utilizar el componente: Textarea
    Ejemplo: <textarea id="idDescripcion" name="descripcion" rows="3" cols="20"></textarea>
  3. Contraseña
    Utilizar el componente: Input type='password'
    Ejemplo: <input type="password" id="idPassword" name="contraseña" maxlength="12" size="13" />
  4. Fecha
    Utilizar el componente: Input type='text' + componente calendario
    Ejemplo: <input type="text" id="idFecha" name="fecha" maxlength="10" size="11" /> <span id="idCalendario"... >...</span>
Responsable

Diseñadores o programadores.
Productos
Volver al índice
Título
Selección de fichero
Descripción

Realizar este paso si se desea seleccionar un componente que permita escoger un fichero.
Tareas

Utilizar el componente: Input type='file'
Ejemplo: <input type="file" id="idFichero" name="fichero" />
Responsable

Diseñadores o programadores.
Productos
Volver al índice
Título
Enviar formulario
Descripción

Realizar este paso si se desea seleccionar un componente adecuado para enviar un formulario.
Tareas

Utilizar el componente: Input type='submit'
Ejemplo: <input type="submit" value="Enviar" />
Responsable

Diseñadores o programadores.
Productos
Volver al índice
Título
Listar elementos
Descripción

Realizar este paso si se desea seleccionar un componente adecuado para listar un conjunto de elementos, como puede ser un resultado de búsqueda.
Tareas

Utilizar el componente: tabla de datos
Ejemplo:
                    <table summary="Listado" >
                      <tr>
                        <th>Cabecera01</th>
                        <th>Cabecera02</th>
                        <th>...</th>
                      </tr>
                      <tr>
                        <td>Fila01 Columna01</td>
                        <td>Fila01 Columna02</td>
                        <td>...</td>
                      </tr>
                      <tr>
                        <td>Fila02 Columna01</td>
                        <td>Fila02 Columna02</td>
                        <td>...</td>
                      </tr>
                    </table>
Responsable

Diseñadores o programadores.
Productos
Volver al índice
Título
Selección de opciones
Descripción

Realizar este paso si se desea seleccionar un componente que ofrezca la posibilidad de elegir entre diferentes opciones.
Tareas

Dependiendo del tipo de selección, existen las siguientes posibilidades:

  1. Confirmación
    Utilizar el componente: Input type='checkbox'
    Ejemplo: <input type="checkbox" name="confirmar" value="si">

  2. Selección simple
    Dependiendo del número de opciones:
    • Entre 1 y 5 opciones:
      Utilizar el componente: Input type='radio'
      Ejemplo: <input type="radio" name="color" value="rojo">
                       <input type="radio" name="color" value="verde">

    • Más de 5 opciones:
      Utilizar el componente: Select
      Ejemplo: <select id="opciones">
                        <option value="valor01">Opción01</option>
                        <option value="valor02">Opción02</option>
                        <option value="valor03">Opción03</option>
                        <option value="valor04">Opción04</option>
                        <option value="valor05">Opción05</option>
                        <option value="valor06">Opción06</option>
                       </select>

    • Número elevado de opciones:
      Utilizar el componente: Input type='text' para permitir al usuario introducir directamente la opción que desea.
      Ejemplo: <input type="text" id="idLocalidad" name="localidad" maxlength="48" size="49" />

  3. Selección múltiple
    Dependiendo del número de opciones:
    • Entre 1 y 5 opciones:
      Utilizar el componente: Input type='checkbox'
      Ejemplo: <input type="checkbox" name="nombre" value="valor01">
                        <input type="checkbox" name="nombre" value="valor02">
                        <input type="checkbox" name="nombre" value="valor03">

    • Más de 5 opciones:
      Utilizar el componente: Select multiple='multiple'
      Ejemplo: <select id="opciones" multiple="multiple" size="4">
                        <option value="valor01">Opción01</option>
                        <option value="valor02">Opción02</option>
                        <option value="valor03">Opción03</option>
                        <option value="valor04">Opción04</option>
                        <option value="valor05">Opción05</option>
                        <option value="valor06">Opción06</option>
                       </select>
Responsable

Diseñadores o programadores.
Productos
Volver al índice
  subir nivel