Espaol

Ingrese (o Regstrese)

Temas Tcnicos

Descargas

Comunidad

Fundamentos de HTML5, Parte 2: Organizando las entradas

Interactuando con su visitante Grace Walker, IT Consultant, Walker Automated Services Resumen: El HTML5 refleja los cambios monumentales en la forma en que usted hace negocios ahora, en la Web y en la nube. Este artculo es el segundo de una serie en cuatro partes diseada para destacar los cambios en HTML5, comenzando con las nuevas etiquetas y organizacin de pginas y proporcionando informacin de alto nivel sobre diseo de pginas Web; la creacin 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. Fecha: 18-07-2011 Nivel: Intermediaria Creado originalmente en: ingles Actividad: 149 vistas Comentario: 0 (Agregar comentarios) Clasificacin promedio (basada en 0 votos) La administracin, el anlisis 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 conversin del visitante del sitio estarn ausentes. Una experiencia positiva y amigable para el usuario que ofrezca la interactividad necesaria para su esfuerzo, es una de las metas institucionales principales.

Acrnimos de uso frecuente

API: Application programming interface CSS3: Cascading style sheet version 3 HTML5: Hypertext Markup Language versin 5 TI: Tecnologas de la informacin UTC: Hora mundial coordinada El corazn de la interactividad son los formularios de sitio. Estos facilitan un intercambio interactivo con el usuario para que las metas que motivaron la construccin del sitio puedan adelantarse al convertir a los visitantes del sitio. Los formularios son el factor central que potencia la interaccin entre los propietarios del sitio Web o agentes y los usuarios del sitio Web, y como tal, son de extrema importancia para el diseo y el desarrollo de un sitio. El centro de ese corazn est en los controles botones de seleccin, recuadros de seleccin, recuadros de texto, ruletas de nmeros, y similares. Estos elementos son esenciales para la disertacin de los usuarios del sitio Web con el mismo. En otras palabras, sin controles completamente funcionales (tanto en la operacin "mecnica" del control como en la idoneidad del control par la tarea dada) no puede haber dilogo y como consecuencia, tampoco una conversacin potencial. Es imperativo que las relaciones del proceso de conversin se consideren cuidadosamente, incluyendo todos los aspectos de la interaccin entre el visitante del sitio y el sistema. La velocidad de validacin, entrada, reconocimiento, navegacin, proceso de carga y la forma en que estn configuradas las pginas, todo tiene un impacto en el proceso de conversin. Las mejoras en la validacin, 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 validacin y para el aseguramiento general de una computacin ntida basada en la Web un recurso de seguridad crtico. Esto es particularmente importante en el diseo y desarrollo de sitios Web dirigidos a abordar a los clientes. Por lo tanto, su uso es esencial para mantener una tasa de conversin 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 comunicacin. Al combinar esto con la claridad estructural impartida por las bases semnticas del HTML5, no hay barreras para un dilogo claro entre usted y el resto del mundo. Al ver nuestro mundo centrado en redes, el paso agitado de la economa global cada vez ms estocstica, el rpido desarrollo de la computacin en nube, el crecimiento exponencial del uso de tecnologa mvil y las soluciones de telecomunicaciones inter-plataformas comerciales y sociales es claro que estamos al lmite de un desafiante nuevo mundo de computacin y comunicacin basada en la Web. Es un mundo que es a la vez una funcin y una derivada del matrimonio en evolucin entre los muchos elementos de comunicaciones y de TI, as como de las necesidades de una sociedad global altamente competitiva. Diseando el formulario En HTML5, los formularios han sido objeto de una gran restauracin. Varias tareas que antes requeran codificacin JavaScript ahora se pueden efectuar fcilmente sin ella. El formulario de ejemplo de este artculo analiza el uso de la suite HTML5 de innovaciones de formulario. El primer paso en el proceso es, desde luego, planear el formulario.

El diseo del ejemplo de formulario que usted desarrollar se muestra en la Figura 1. Usted desarrollar tres reas para la pgina del formulario; el rea Header, el rea Form y el rea Footer. El rea Header incluye el encabezado de pgina y un sub-encabezado insertado en las etiquetas <header></header> . En el fondo de la pgina, el rea Footer contiene la informacin de copyright dentro de las etiquetas <footer></footer> . Trat la construccin 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 artculo. Figura 1. Diseo de pagina de formulario

La discusin 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 validacin 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 categorizacin 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> tambin puede ponerse afuera del formulario, de manera que el atributo form aqu tambin 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 diseados para organizar y categorizar datos, replicando el enfoque semntico general de HTML5. El viejo adagio de que el formulario debe seguir a la funcin 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. Tambin 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>
color week search date time tel datetime email url datetime-local number month range

La Tabla 2 muestra los nuevos atributos <input> . Tabla 2. Nuevos atributos <input>
autocomplete formmethod min step autofocus formnovalidate multiple form formtarget pattern formaction height placeholder formenctype max required

Durante la creacin de la pgina Web, usted usa la mayora de estos tipos y atributos. Creando el formulario La pgina Web mostrada en la Figura 2 es de The Classical Music Place, un sitio que tiene las obras de varios compositores para descargarlas. Tambin permite a los aficionados de composiciones clsicas cargar sus grabaciones de piezas clsicas. Esta es la pgina que usted va a crear. Figura 2. 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 accin JavaScript tambin est contenida en la etiqueta <form> , lo cual trataremos en una seccin posterior. La etiqueta <form> contiene cuatro etiquetas <fieldset> , esbozadas grficamente 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 informacin 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 informacin 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 pgina. Esta es una funcin que hace que la pgina 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 vaco. Sin embargo, como el campo Name tambin tiene autofocus establecido, cuando usted entra a la pgina 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-condicin para el ingreso del formulario. esto es vlido para campos de texto, bsqueda, URL, telfono, e-mail, contrasea, recolector de fechas, nmero, recuadro de seleccin, botn de seleccin, 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 diseado para contener nmeros telefnicos. En el ejemplo, el telfono tiene una restriccin de patrn 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 telfono muestra el patrn con el que debe coincidir su entrada. El patrn emula las funciones de una expresin regular JavaScript (regex). La entrada debe coincidir con la estructura patrn 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 direccin de e-mail es validada automticamente sin necesidad de usar un patrn: La validacin es parte de HTML5. Si la direccin 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 seleccin 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 cmo Opera presenta la pgina Web con el campo selector Date presentado. Note que en Opera, las esquinas del conjunto de campo no estn redondeadas, incluso cuando se utiliz la misma hoja de estilo que redonde las esquinas en Chrome. Figura 4. El campo Date

El Listado 4 muestra el cdigo 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 ao month. Selecciona mes y ao week. Selecciona semana y ao time. Selecciona la hora (hora y minutos) datetime. Selecciona hora, fecha, mes y ao (hora UTC) datetime-local. Selecciona hora, fecha, mes y ao (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 parmetros 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 Listado 5 proporciona el conjunto de campo que crea la seccin 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 nmero que designa cuntas obras hay disponibles de cada uno de los compositores listados. La Figura 6 muestra la seccin. Figura 6. Los campos Composers

Por ejemplo, Bach tiene cinco obras y Beethoven tiene 10 obras. El Listado 6 muestra los valores mximos de cada compositor. El campo de nmero no aceptar ms del nmero mximo cuando usted presente el formulario. Cuando se ingrese, este campo responder a valores incorrectos, fuera del lmite, solicitndole que ingrese un valor correcto que cumpla con los lmites numricos 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 nmero, rango, selector de fechas. El atributo max determina el valor mximo permitido para el campo de entrada. El atributo min determina el valor mnimo permitido para el campo de entrada. El atributo step determina el incremento numrico vlido. 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 mltiples valores de una lista de datos o de una lista de archivos. En el ejemplo, un usuario puede seleccionar mltiples archivos para subir. Figura 7. El campo Upload

El cdigo 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 botn 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 pgina es arreglada por las limitaciones impuestas por las dimensiones preestablecidas de altura y amplitud, lo cual facilita la carga de la pgina al mejorar la eficiencia de la presentacin de la pgina. Listado 8. El botn Submit
<input type="image" src="submitbutton.png" alt="Submit" width="100" height="45" /> </form>

JavaScript y CSS3 Ninguna presentacin en pantalla en HTML5 se puede lograr sin CSS3. Y, aunque HTML5 ha negado la necesidad de utilizar algo de cdigo JavaScript, JavaScript sigue siendo una herramienta valiosa. A continuacin est el cdigo JavaScript y el archivo CSS3 usados para crear el formulario de ejemplo. El cdigo JavaScript es un simple cuadro de alerta que retorna los tres campos requeridos, como se muestra en el Listado 9. Aunque el cdigo JavaScript usado aqu es slo una lnea, ha sido puesto aparte en un archivo JavaScript, siguiendo las mejores prcticas para sus usos. Listado 9. Cdigo JavaScript del formulario de ejemplo
function alertValues() { alert("Customer information: " + "\n + tel.value + "\n }

" + fullname.value + "\n " + email.value);

"

El Listado 10 muestra el cdigo CSS3 que da formato al formulario de ejemplo. La informacin 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; }

Conclusin La clave para el xito tangible individual y de agencia es la comunicacin. Los lineamientos sobre controles de formulario y construccin general de pgina son crticos para este proceso, y HTML5 ha proporcionado una aljaba de herramientas excepcionalmente eficientes apropiadas para la tarea. Aquellos que estn preparados para el futuro que ya est aquse beneficiarn; aquellos que no sern bruscamente sacudidos por el paso y las exigencias de una sociedad global, centrada en redes y de una red mundial.

Descargar Descripcin Example HTML, CSS3 and JavaScript files Informacin sobre mtodos de descarga Nombre HTML5Forms.zip tamao 10KB Metodo de descarga HTTP

Recursos Aprender Create modern Web sites using HTML5 and CSS3 (developerWorks, marzo del 2010) es un tutorial sobre HTML5 y CSS3 multicomponente. En New elements in HTML 5 (developerWorks, agosto del 2007), usted encontrar informacin sobre varios de los nuevos elementos en HTML5. El sitio Web <html>5doctor proporciona una excelente perspectiva sobre las tendencias actuales en HTML5. El sitio Web W3Schools.com: HTML5 Tag Reference ofrece una extensa lista de etiquetas HTML5, definiciones y ejemplos. El sitio Web sitio Web WHATWG proporciona informacin detallada para la especificacin HTML5. El sitio Web zona de desarrollo Web se especializa en artculos que cubren varias soluciones basadas en la Web.

Mantngase actualizado(a) con los eventos tcnicos y webcasts developerWorks. Demostraciones on demand de developerWorks: Observe demostraciones que van desde la instalacin de productos y demostraciones de configuracin para principiantes, hasta funcionalidades avanzadas para desarrolladores experimentados. Siga a developerWorks en Twitter. Comentar Cree su perfil developerWorks hoy y configure una lista de observacin sobre HTML. Conctese y permanezca en contacto con la comunidad developerWorks. Encuentre a otros miembros developerWorks interesados en el desarrollo Web. Comparta lo que usted sabe: nase a alguno de nuestros grupos developerWorks enfocados en temas Web. Roland Barcia habla en su blog sobre Web 2.0 y middleware . Follow developerWorks' members's shared bookmarks on web topics. Obtenga respuestas rpidamente: Visite el foro Web 2.0 Apps. Obtenga respuestas rpidamente: Visite el foro Ajax. Sobre el autor Grace Walker, es asociada en Walker Automated Services en Chicago, Illinois, es consultor en TI con una formacin diversa y amplia experiencia. Ella ha trabajado en las TI como gestora, administradora, programadora, instructora, analista de negocios, analista tcnica, analista de sistemas y desarrolladora Web en varios entornos, incluyendo telecomunicaciones, educacin, servicios financieros y software.
Imprimir esta pgina Compartir esta pgina Seguir developerWorks

Temas Tcnicos
Information Management Lotus Rational WebSphere Tecnologa Java Linux SOA y servicios web Biblioteca Tcnica

Comunidad
Grupos Blogs Wikis Archivos Trminos de uso Informar abusos

Descargas Acerca de developerWorks

Contacto

IBM
Software (Argentina) Software (Bolivia) Software (Chile) Software (Colombia) Software (Ecuador) Software (Mxico) Software (Per) Software (Paraguay) Software (Uruguay) Software (Venezuela) Software (Ingls) Privacidad (Ingls) Accesibilidad (Ingls)

Ms...