Fundamentos de HTML5, Parte 2: Organizando las entradas

Interactuando con su visitante

El HTML5 refleja los cambios monumentales en la forma en que usted hace negocios ahora, en la Web y en la nube. Este artículo es el segundo de una serie en cuatro partes diseñada para destacar los cambios en HTML5, comenzando con las nuevas etiquetas y organización de páginas y proporcionando información de alto nivel sobre diseño de páginas Web; la creación de formularios; el uso y valor de las APIs; y , finalmente, las posibilidades creativas que ofrece Canvas. Esta segunda parte presenta el concepto de controles de formulario HTML5 y toca el rol de JavaScript y CSS3.

Grace Walker, IT Consultant, Walker Automated Services

Grace Walker, es asociada en Walker Automated Services en Chicago, Illinois, es consultor en TI con una formación diversa y amplia experiencia. Ella ha trabajado en las TI como gestora, administradora, programadora, instructora, analista de negocios, analista técnica, analista de sistemas y desarrolladora Web en varios entornos, incluyendo telecomunicaciones, educación, servicios financieros y software.



18-07-2011

La administración, el análisis de datos, la estrategia de marketing y otras funciones de instituciones de nivel corporativo, son todas importantes. Sin embargo, sin una ventana digital exitosa que su cliente potencial pueda usar — o que se sienta motivado a usar — los procesos iniciales necesarios para el desarrollo de la conversión del visitante del sitio estarán ausentes. Una experiencia positiva y amigable para el usuario que ofrezca la interactividad necesaria para su esfuerzo, es una de las metas institucionales principales.

Acrónimos de uso frecuente

  • API: Application programming interface
  • CSS3: Cascading style sheet version 3
  • HTML5: Hypertext Markup Language versión 5
  • TI: Tecnologías de la información
  • UTC: Hora mundial coordinada

El corazón de la interactividad son los formularios de sitio. Estos facilitan un intercambio interactivo con el usuario para que las metas que motivaron la construcción del sitio puedan adelantarse al convertir a los visitantes del sitio. Los formularios son el factor central que potencia la interacción entre los propietarios del sitio Web o agentes y los usuarios del sitio Web, y como tal, son de extrema importancia para el diseño y el desarrollo de un sitio.

El centro de ese corazón está en los controles — botones de selección, recuadros de selección, recuadros de texto, ruletas de números, y similares. Estos elementos son esenciales para la disertación de los usuarios del sitio Web con el mismo. En otras palabras, sin controles completamente funcionales (tanto en la operación "mecánica" del control como en la idoneidad del control par la tarea dada) no puede haber diálogo y como consecuencia, tampoco una conversación potencial.

Es imperativo que las relaciones del proceso de conversión se consideren cuidadosamente, incluyendo todos los aspectos de la interacción entre el visitante del sitio y el sistema. La velocidad de validación, entrada, reconocimiento, navegación, proceso de carga y la forma en que están configuradas las páginas, todo tiene un impacto en el proceso de conversión. Las mejoras en la validación, junto con la extensa variedad de de opciones de control de formularios ofrecidas y con la naturaleza multimedia general de las especificaciones HTML5, son todos contribuyentes a la potencia de HTML5 en cuanto a transformar a un visitante del sitio en un usuario real del mismo.

HTML5 es una herramienta excepcionalmente vigorosa para validación y para el aseguramiento general de una computación nítida basada en la Web — un recurso de seguridad crítico. Esto es particularmente importante en el diseño y desarrollo de sitios Web dirigidos a abordar a los clientes. Por lo tanto, su uso es esencial para mantener una tasa de conversión saludable. Si usted no puede definir prospectos, está en problemas; si usted no puede convertir los prospectos que definió, ya se dirige a un aterrizaje forzoso.

Pero la ayuda está aquí. Los tipos HTML5, como email y telephone, ofrecen amplias opciones de comunicación. Al combinar esto con la claridad estructural impartida por las bases semánticas del HTML5, no hay barreras para un diálogo claro entre usted y el resto del mundo.

Al ver nuestro mundo centrado en redes, el paso agitado de la economía global cada vez más estocástica, el rápido desarrollo de la computación en nube, el crecimiento exponencial del uso de tecnología móvil y las soluciones de telecomunicaciones inter-plataformas — comerciales y sociales — es claro que estamos al límite de un desafiante nuevo mundo de computación y comunicación basada en la Web. Es un mundo que es a la vez una función y una derivada del matrimonio en evolución entre los muchos elementos de comunicaciones y de TI, así como de las necesidades de una sociedad global altamente competitiva.

Diseñando el formulario

En HTML5, los formularios han sido objeto de una gran restauración. Varias tareas que antes requerían codificación JavaScript ahora se pueden efectuar fácilmente sin ella. El formulario de ejemplo de este artículo analiza el uso de la suite HTML5 de innovaciones de formulario. El primer paso en el proceso es, desde luego, planear el formulario.

El diseño del ejemplo de formulario que usted desarrollará se muestra en la Figura 1. Usted desarrollará tres áreas para la página del formulario; el área Header, el área Form y el área Footer. El área Header incluye el encabezado de página y un sub-encabezado insertado en las etiquetas <header></header> . En el fondo de la página, el área Footer contiene la información de copyright dentro de las etiquetas <footer></footer> . Traté la construcción de un área Header y de un área Footer en el ejemplo suministrado en la parte 1 de esta serie: Si no está familiarizado(a) con las etiquetas <header> y <footer> , consulte ese artículo.

Figura 1. Diseño de pagina de formulario
Diseño de pagina de formulario

La discusión sobre estos formularios se enfoca en cuatro etiquetas:

  • <form>
  • <fieldset>
  • <label>
  • <input>

En HTML5, dos nuevos atributos se han agregado a la etiqueta <form> : autocomplete y novalidate. El atributo autocomplete habilita las listas desplegables de sugerencia que aparecen en sitios como Google. El atributo novalidate desactiva la validación para un formulario, lo cual es valioso durante las pruebas.

La etiqueta <fieldset> tiene tres nuevos atributos: disable, name y form. El atributo disable desactiva el <fieldset>. El atributo name establece el nombre para el <fieldset>. El valor del atributo form es el ID del formulario o formularios a los cuales pertenece el <fieldset> . En HTML5, un <fieldset> puede estar por fuera del formulario o formularios a los cuales pertenece. Cuando un <fieldset> s e pone por fuera del formulario, usted debe establecer el atributoform de la etiqueta <fieldset> para que el <fieldset> pueda asociarse con el formulario o formularios correctos.

La etiqueta <label> , que define una categorización para un elemento de entrada, tiene un nuevo atributo: form. El valor del atributo form es el ID del formulario o formularios a los cuales pertenece el <label> . La etiqueta <label> también puede ponerse afuera del formulario, de manera que el atributo form aquí también es utilizado para asociar <label> con el formulario apropiado.

La etiqueta <input> tiene varios nuevos tipos y atributos que mejoran la facilidad de uso del formulario. HTML5 ha introducido nuevos tipos de entrada diseñados para organizar y categorizar datos, replicando el enfoque semántico general de HTML5. El viejo adagio de que el formulario debe seguir a la función es apropiado para describir las funciones de los formularios HTML5.

En HTML5, el campo de formulario <input> puede estar por fuera de las etiquetas <form> . El atributo form identifica el formulario o formularios a los cuales pertenece el campo de entrada. También identifica el formulario al que pertenece al referenciarse al ID del formulario. La Table 1 muestra los nuevos tipos de <input> .

Tabla 1. Nuevos tipos de <input>
colordatedatetimedatetime-localmonth
weektimeemailnumberrange
searchtelurl  

La Tabla 2 muestra los nuevos atributos <input> .

Tabla 2. Nuevos atributos <input>
autocompleteautofocusformformactionformenctype
formmethodformnovalidateformtargetheightmax
minmultiplepatternplaceholderrequired
step    

Durante la creación de la página Web, usted usa la mayoría de estos tipos y atributos.


Creando el formulario

La página Web mostrada en la Figura 2 es de The Classical Music Place, un sitio que tiene las obras de varios compositores para descargarlas. También permite a los aficionados de composiciones clásicas cargar sus grabaciones de piezas clásicas. Esta es la página que usted va a crear.

Figura 2. Formulario de The Classical Music Place
Formulario de The Classical Music Place

Haga clic para ampliar la imagen

Figura 2. Formulario de The Classical Music Place

Formulario de The Classical Music Place

La estructura del formulario comienza con la etiqueta <form> . En este ejemplo, usted usa el nuevo atributo autocomplete , mostrado aquí:

<form id="orderForm" autocomplete="on"   action="javascript:alertValues();" method="get">

Una acción JavaScript también está contenida en la etiqueta <form> , lo cual trataremos en una sección posterior.

La etiqueta <form> contiene cuatro etiquetas <fieldset> , esbozadas gráficamente por las áreas grises en la Figura 2: Name, Telephone, Email address y date. La etiqueta <fieldset> agrupa el contenido similar en el formulario. Observemos cada <fieldset> por separado.

Primera etiqueta <fieldset>

La primera etiqueta <fieldset> contiene información del cliente (vea la Figura 3). Tiene un campo Name , un campo Telephone , un campo Email address y un campo Date . El campo Name tiene un atributo autofocus , que le permite comenzar a escribir texto sin tener que hacer clic en el campo.

Figura 3. Campos de información del cliente
Campos de información del cliente

El primer <fieldset> contiene una etiqueta <legend>, una etiqueta <label> y una etiqueta <input> , como se muestra en el Listado 1. El campo Name, que es de tipo text, tiene tres de los nuevos atributos <input> : placeholder, autofocus y required.

Listado 1. El campo Name
 <fieldset>
  <legend> Customer Info </legend>
  <p>
    <label>Name:
      <input id="name" name="name" type="text" placeholder="Ingrese su nombre"
	                      autofocus required size="50">
    </label>
  </p>

El autofocus asegura que el enfoque de la entrada sea en este campo cuando se abra la página. Esta es una función que hace que la página se enfoque tan pronto se carga, permitiendo al usuario acceso inmediato al formulario.

El atributo placeholder pone el texto entre comillas dentro del campo en un texto en gris tenue. El atributo placeholder debe decir al usuario lo que debe contener el campo y se debe mostrar cuando el campo esté vacío. Sin embargo, como el campo Name también tiene autofocus establecido, cuando usted entra a la página en realidad no puede ver el texto. Note que en la Figura 3 el campo Name no muestra el marcador de texto, y está enmarcado en un resaltado amarillo. Si usted se mueve a otro campo sin ingresar datos, se mostrará el texto del placeholder. Cuando usted usa en atributo autofocus con el atributo placeholder , el texto del placeholder desaparece por el enfoque activado en el campo.

El atributo required facilita que se llene obligatoriamente un campo como pre-condición para el ingreso del formulario. esto es válido para campos de texto, búsqueda, URL, teléfono, e-mail, contraseña, recolector de fechas, número, recuadro de selección, botón de selección, y archivo.

El campo Telephone, que es de tipo tel, tiene los atributos required, placeholder, size y pattern, como se muestra en el Listado 2. El tipo tel es un campo de texto diseñado para contener números telefónicos. En el ejemplo, el teléfono tiene una restricción de patrón que se debe observar estrictamente, debido a que el sistema no le permitirá ingresar el formulario hasta que use el patron de caracteres correcto. El placeholder para el teléfono muestra el patrón con el que debe coincidir su entrada.

El patrón emula las funciones de una expresión regular JavaScript (regex). La entrada debe coincidir con la estructura patrón definida del regex antes de que pueda ser validada. Esto funciona con tipos text, search, url, telephone, email y password .

Listado 2. El campo Telephone
 <p>
    <label>Telephone:
      <input id="tel" name="telephone" type="tel" placeholder="Patron: 1-234-567-8910"
	       required size="50" pattern="([0-9]{1}(-[0-9]{3})(-[0-9]{3})(-[0-9]{4}))">
    </label>
  </p>

El campo Email address es de tipo email, como se muestra en el Listado 3. la dirección de e-mail es validada automáticamente sin necesidad de usar un patrón: La validación es parte de HTML5. Si la dirección de e-mail no se presenta en el formato apropiado, el formato no se puede ingresar.

Listado 3. El campo Email address
  <p>
    <label>Email address:
      <input id="email" name="email" type="email" placeholder="Enter your email address" 
	            required size="50">
    </label>
  </p>

La última entrada en este <fieldset> es el campo Date. El tipo date proporciona un selector de calendario para la selección de la fecha en el navegador Opera, pero crea una ruleta en Google Chrome, como se ve en la Figura 3. La Figura 4 muestra cómo Opera presenta la página Web con el campo selector Date presentado. Note que en Opera, las esquinas del conjunto de campo no están redondeadas, incluso cuando se utilizó la misma hoja de estilo que redondeó las esquinas en Chrome.

Figura 4. El campo Date
El campo Date

El Listado 4 muestra el código usado para crear el selector de fecha.

Listado 4. El campo Date
    <p>
      <label>Date: <input type="date">
      </label>
    </p>
 </fieldset>

Usted puede generar un reporte para cualquier fecha. Usted puede incluso dividirlo hasta la hora. Estos son algunos tipos de fecha que usted puede crear:

  • date. Selecciona fecha, mes y año
  • month. Selecciona mes y año
  • week. Selecciona semana y año
  • time. Selecciona la hora (hora y minutos)
  • datetime. Selecciona hora, fecha, mes y año (hora UTC)
  • datetime-local. Selecciona hora, fecha, mes y año (hora local)

Segunda etiqueta <fieldset>

La segunda etiqueta <fieldset> contiene una etiqueta <input> con un atributo list y una etiqueta <datalist> . El atributo list especifica la <datalist>. de un campo de entrada. La etiqueta <datalist> proporciona una lista de opciones de campo de entrada. El atributo list trabaja con estos tipos <input> : text, search, url, telephone, email, date pickers, number, range y parámetros color.

El <datalist> se muestra en una lista desplegable, como se muestra en la Figura 5. Esta imagen se tomó en Opera. En Chrome, esta lista se muestra como un simple recuadro de texto. Al usuario no se le presentará la lista.

Figura 5. El campo Favorites
El campo Favorites

El Listado 5 proporciona el conjunto de campo que crea la sección Favorite Composer.

Listado 5. El campo Favorite Composer
<fieldset>
  <legend> Favorite Composer </legend>
  <p>
    <label>
  <input type="text" name="favorites" list="composers">
  <datalist id="composers">
   <option value="Bach">
   <option value="Beethoven">
   <option value="Brahms">
   <option value="Chopin">
   <option value="Mendelssohn">
  </datalist>
 </label>
</p>
</fieldset>

Tercera etiqueta <fieldset>

La tercera etiqueta <fieldset> muestra una lista de compositores, seguida por un campo de número que designa cuántas obras hay disponibles de cada uno de los compositores listados. La Figura 6 muestra la sección.

Figura 6. Los campos Composers
Los campos Composers

Por ejemplo, Bach tiene cinco obras y Beethoven tiene 10 obras. El Listado 6 muestra los valores máximos de cada compositor. El campo de número no aceptará más del número máximo cuando usted presente el formulario. Cuando se ingrese, este campo responderá a valores incorrectos, fuera del límite, solicitándole que ingrese un valor correcto que cumpla con los límites numéricos aceptables del campo.

El tipo number crea un campo de ruleta para la entrada. Se utilizan min, max y step con el tipo number . El valor step predeterminado es 1. Los atributos min, max y step se utilizan con limitaciones de entrada de número, rango, selector de fechas. El atributo max determina el valor máximo permitido para el campo de entrada. El atributo min determina el valor mínimo permitido para el campo de entrada. El atributo step determina el incremento numérico válido.

Listado 6. Los campos de compositor
<fieldset>
  <legend>Composers</legend>
  <p>
    <label>
      Bach: <input name="form_number" id="form_number" type="number" min="1" max="5" >
    </label>
  </p>
  <p>
    <label>
      Beethoven: <input name="form_number" id="form_number" type="number" 
	      min="1" max="10" >
    </label>
  </p>
  <p>
    <label>
      Brahms: <input name="form_number" id="form_number" type="number" min="1" max="7" >
    </label>
  </p>
  <p>
    <label>
      Chopin: <input name="form_number" id="form_number" type="number" min="1" max="10" >
    </label>
  </p>
  <p>
    <label>
      Mendelssohn: <input name="form_number" id="form_number" type="number" 
	     min="1" max="4">
    </label>
  </p>

 </fieldset>

Cuarta etiqueta <fieldset>

La cuarta etiqueta <fieldset> tag contains the <input> typefile y el atributo multiple, como se muestra en la Figura 7. El atributo multiple especifica que un campo de entrada puede seleccionar múltiples valores de una lista de datos o de una lista de archivos. En el ejemplo, un usuario puede seleccionar múltiples archivos para subir.

Figura 7. El campo Upload
El campo Upload

El código para el tipo de archivo y el atributo multiple se muestra en el Listado 7.

Listado 7. El campo Upload
 <fieldset>
  <legend> Upload file(s) </legend>
  <p>Cargue uno de los archivos de su orquesta para incluirlo en nuestra biblioteca</p>
    <p><label>
      <input type="file" multiple="multiple" />
    </label>
  </p>
 </fieldset>

El botón Submit usa los atributos height y width , como se muestra en el Listado 8. Usted usa estos atributos para establecer la altura y la amplitud del tipo de entrada image . Cuando usted define estos atributos, el área espacial de la página es arreglada por las limitaciones impuestas por las dimensiones preestablecidas de altura y amplitud, lo cual facilita la carga de la página al mejorar la eficiencia de la presentación de la página.

Listado 8. El botón Submit
<input type="image" src="submitbutton.png" alt="Submit" width="100" height="45" />
</form>

JavaScript y CSS3

Ninguna presentación en pantalla en HTML5 se puede lograr sin CSS3. Y, aunque HTML5 ha negado la necesidad de utilizar algo de código JavaScript, JavaScript sigue siendo una herramienta valiosa. A continuación está el código JavaScript y el archivo CSS3 usados para crear el formulario de ejemplo.

El código JavaScript es un simple cuadro de alerta que retorna los tres campos requeridos, como se muestra en el Listado 9. Aunque el código JavaScript usado aquí es sólo una línea, ha sido puesto aparte en un archivo JavaScript, siguiendo las mejores prácticas para sus usos.

Listado 9. Código JavaScript del formulario de ejemplo
function alertValues()
{
alert("Customer information: " + "\n     " + fullname.value + "\n     " 
                 + tel.value + "\n     " + email.value);  
}

El Listado 10 muestra el código CSS3 que da formato al formulario de ejemplo. La información de <header> y <footer> no se incluye aquí.

Listado 10. CSS3 del formulario de ejemplo
form {
  width: 550px;
  margin: 0 0 0 0 ;
  padding: 50px 60px;
  background-color: #2d2d2d;
  border-radius: 20px;
}

fieldset {
  padding: 0 20px 20px;
  margin: 0 0 30px ;
  border: 2px solid #ffffff;
  background: #B8B8B8 ;
  border-radius: 10px;
}

legend {
  color: #ffffff;
  background: #990033;
  font-size: 0.9em;
  font-weight: bold;
  text-align: left;
  padding: 5px;
  margin: 0;
  width: 10em;
  border: 2px solid #660033;
  border-radius: 5px;
 }

label {
  display: block;
  float: left;
  clear: left;
  text-align: left;
  width: 100%;
  padding: .4em 0 0 0;
  margin: .15em 0 0 0;
}

Conclusión

La clave para el éxito tangible individual y de agencia es la comunicación. Los lineamientos sobre controles de formulario y construcción general de página son críticos para este proceso, y HTML5 ha proporcionado una aljaba de herramientas excepcionalmente eficientes apropiadas para la tarea. Aquellos que estén preparados para el futuro — que ya está aquí—se beneficiarán; aquellos que no serán bruscamente sacudidos por el paso y las exigencias de una sociedad global, centrada en redes y de una red mundial.


Descargar

DescripciónNombretamaño
Example HTML, CSS3 and JavaScript files HTML5Forms.zip10KB

Recursos

Aprender

Comentar

Comentarios

developerWorks: Ingrese

Los campos obligatorios están marcados con un asterisco (*).


¿Necesita un IBM ID?
¿Olvidó su IBM ID?


¿Olvidó su Password?
Cambie su Password

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


La primera vez que se registra en developerWorks, se crea un perfil para usted. Información sobre su perfil (nombre, país/región y compañia) estará disponible al público y acompañará cualquiera de sus publicaciones. Puede actualizar su cuenta IBM en cualquier momento.

Toda la información enviada es segura.

Elija su nombre para mostrar



La primera vez que inicia sesión en developerWorks se crea un perfil para usted, teniendo que elegir un nombre para mostrar en el mismo. Este nombre acompañará el contenido que usted publique en developerWorks.

Por favor elija un nombre de 3 - 31 caracteres. Su nombre de usuario debe ser único en la comunidad developerWorks y debe ser distinto a su dirección de email por motivos de privacidad.

Los campos obligatorios están marcados con un asterisco (*).

(Por favor elija un nombre de 3 - 31 caracteres.)

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


Toda la información enviada es segura.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=90
Zone=SOA y servicios web
ArticleID=732616
ArticleTitle=Fundamentos de HTML5, Parte 2: Organizando las entradas
publish-date=07182011