Pero el hecho de que este pensamiento sea común no lo hace necesariamente verdadero, son muchos quienes poseen un título o un carrera terminada y su destino se ve envuelto en situaciones que realmente no los llevan a ningún lado por lo que la búsqueda del éxito se vuelve más en una carrera por sobrevivir.

No cabe duda que la educación efectivamente es fundamental, sea como sea que la hayas adquirido esta será la que te dará las herramientas para poder resaltar sobre los demás y sobre todo mantenerte sin caer en errores trágicos o inmaduros. Si bien la educación te llevará a lograr y conseguir títulos, estos no te garantizan absolutamente nada, son tus características, habilidades y aptitudes las que te harán sobresalir al afrontar el mundo laboral, siendo esto todavía más marcado al momento de decidir ser diseñador web freelance.

Es por ello que debemos tener muy en cuenta que características son las que los clientes buscan al momento de contratar diseñadores freelance, al principio todo puede parecer una búsqueda por llegar a ser el mejor en todo, pero no nos olvidemos de cuidar los detalles y recordar que no tienes una gran compañía que te respalde por lo que debes de hacer lo necesario para que tu nombre se vaya reconociendo por un buen trabajo.

Ser digno de confianza

Puedes ser la persona más preparada y capaz para realizar un trabajo pero si el cliente no confía en ti no podrás llegar muy lejos, debes demostrar que eres un diseñador web confiable, a la cual se le pueden asignar tareas y cumplirá en tiempo y forma.

Te podrás estar pregunta ¿Cómo puedo demostrar esto? puedes intentar mostrarle al cliente tus anteriores trabajos, incluso si no fueron de manera freelance, hazle ver que ya tuviste proyectos importantes o similares a lo que él te esta pidiendo, de esa manera él sabrá que puede confiarte el proyecto.

Si buscas aumentar la confianza en el ámbito laboral puedes incluir en tu currículum números telefónicos o correos electrónicos de clientes o jefes anteriores que sirvan como referencia para que el cliente se de cuenta que realmente eres una persona responsable.

Los clientes necesitan saber que puedes entregar el trabajo a tiempo y que será algo de calidad, es por ello que la mayoría de los trabajos que se consiguen de manera independiente son por recomendaciones y referencias.

Para ganar la confianza a nivel personal, trata de establecer conversaciones directas, habla sobre temas que quizás toquen temas familiares o sobre tu vida cotidiana, hazle ver que no eres un ladrón ni mucho menos, llevas una vida normal y como tal solo quieres ganarte la vida haciendo lo que mejor sabes hacer.

Ética Porfesional

Otra característica básica que un cliente busca en un diseñador freelance es la ética, pero sobre todo la ética en el trabajo. El profesional debe demostrar su deseo por realizar el trabajo que le están ofreciendo, el cliente debe de darse cuenta que nuestro principal objetivo no es el dinero, ya que si la relación se torna meramente en asuntos monetarios las prioridades se tienden a perder.

Nuestro trabajo debe de ser realizado de la mejor manera, sin dejar todo al final y mucho menos entregando algo incompleto, debemos disfrutar lo que estamos haciendo y de esa manera nuestro cliente se dará cuenta que realmente escogió a un buen desarrollador o diseñador para su proyecto.

Sólo recuerda, no lo hagas todo por el dinero y evita que éste se convierta en el punto de atención.

Saber comunicar

La comunicación es fundamental no sólo para el trabajo sino para toda interacción en la vida, somos seres comunicativos por naturaleza pero no por ello quiere decir que sabemos cómo comunicarnos, muchas veces no sabemos que decir y que callar, algunas otras no comunicamos de la forma adecuada o simplemente no lo hacemos.

Un cliente siempre va a buscar una relación donde el trabajador le este indicando cómo va el proyecto, que opciones tiene, que es necesario, que sobra y que falta. Es muy común que el cliente tenga muchas preguntas sobre el tema, no te debes desesperar, después de todo por eso te están pagando ya que si el cliente supiera todo él mismo podría hacer el trabajo para el que fuiste contratado.

Sin embargo esto no significa que siempre debemos aplicar la misma técnica, no todos los clientes son iguales, habrá quien te demande más y quien simplemente busque establecer la mínima comunicación, sea cual sea la situación tu siempre busca dejar bien en claro los puntos básicos para llevar a puerto un buen proyecto. Si el cliente es poco o muy comunicativo hará que la comunicación crezca o disminuya, sin duda, pero lo importante es que lo que tú tengas que decir no se quede en el silencio, el cliente estará dispuesto a oír mientras se este hablando de su inversión.

No te estanques en una única tecnología

En muchas ocasiones te puedes encontrar trabajando para un cliente que únicamente te pide que diseñes con cierta tecnología o una forma de diseñar, lenguaje o plataforma, todo esto con la justificación de que es lo que mejor se acopla a sus necesidades o preferencias. En principio no suena nada mal, y todavía menos si esta tecnología es la que más te gusta, por lo que disfrutas el hecho de diseñar para ese cliente y lo crees adecuado para un trabajo estable.

El tiempo puede pasar y cuando menos lo esperes estarás encasillado dentro de un solo desarrollo, y es que el hecho de trabajar con una sola tecnología no tiene ningún problema si el trabajo es momentáneo, pero si se torna casi permanente y tienes ya más de un par de años trabajando únicamente con ese lenguaje o plataforma, es tiempo de que empieces a buscar diversificación para no caer en un error.

El mundo del diseño web es muy variante y como tal debes estar siempre la vanguardia, aprende lo emergente, trata de educarte de manera continua sin esperar a que las tecnologías te sobrepasen.

Con esto no quiero decir que te olvides por completo de lo que ya dominas, si en el pasado disfrutabas desarrollar en Flash y aún tienes muchos clientes te piden diseñar con él, pues entonces hazlo, el punto aquí es que no puedes dejar de lado que existen tecnologías como HTML5, CSS3 y jQuery que actualmente están dominando el mercado y que pueden hacer mejor el trabajo que ya haces con Flash.

Si la remuneración es buena y el trabajo constantemente te mantiene ocupado, técnicamente no hay razón para quejarse de él, sin embargo debes pensar en ti y en tu carrera, ya que de ello sobrevivirás en el futuro y como tal el futuro tú necesita estar mejor preparado, por lo que diversificar tus habilidades te hará un mejor diseñador y podrás ser elegido para más proyectos.

Recuerda que si tu cliente un día decide retirarse, por más cómodo que estuvieras, tendrás que salir a buscar un nuevo proyecto y como tú únicamente desarrollaste en cierta tecnología para él, es muy probable que te encuentres que dicha tecnología ya no es tan utilizada como solía serlo en el pasado y si no te preparaste adecuadamente, tendrás que invertir tiempo en su estudio, tiempo que te costará al no recibir un salario como antes.

Diversifica clientes

Si se presenta la posibilidad también debes diversificar tus clientes, no es conveniente escoger siempre proyectos similares, es claro que esto ofrece una ventaja muy tentadora la cual es trabajar de manera más rápida y sencilla, pero si escoges proyectos diversos aprenderás más y afianzarás la teoría que habías estudiado anteriormente.

En caso de que la relación con el cliente realmente se ha visto fortalecida y tienes ya vario tiempo colaborando con él, entonces es necesario que establezcan un acuerdo legal un poco más adecuado, puedes sentarte a platicar con él para buscar que tu negocio siga creciendo alrededor de sus necesidades.

Balance entre el trabajo y tu vida personal

Son muchas las personas que toman a su profesión como su modo de vida, en cierta manera muchos dirán que no está mal, que son personas dedicadas y que si continúan de esa manera llegarán muy lejos, y puede que tengan razón pero el punto a debatir aquí es su salud no su perseverancia.

Es recomendado tener siempre un adecuado balance entre trabajo y socialización para así poder llegar a tener una vida saludable, si el trabajo absorbe todas tus horas del día no estarás bien ni física ni mentalmente, además de que perderás amistades y eventos que te pueden ayudar a crecer como persona.

Si bien es cierto que este error no sólo es cometido por los diseñadores web independientes, es algo que se tiene que resaltar para esta profesión por el simple hecho de que no trabajamos con personas, estamos haciendo nuestro trabajo con una máquina, por lo que la interacción social se limita a lo que puedas encontrar en tus momentos de procrastinación.

Al trabajar de manera independiente no tienes ningún horario de oficina, por lo que muchos clientes abusan de esto y te buscan solo en las horas que ellos están desocupados, horas las cuales tu quizás ya habías destinado para alguna otra actividad.

Para evitar esta clase de situaciones y establecer el balance mencionado, debes establecer bien en claro con tu cliente cuales son tus horas de trabajo, si te gusta trabajar en la noche adelante pero establécelo, si el cliente quiere tener junta, esta bien que él ponga el horario siempre y cuando se ajuste a lo que tu tienes, no siempre sacrificar nuestra vida social significa que somos trabajadores responsables.

Todos debemos tener algún tipo sistema de apoyo, y eso lo encontraremos ya sea en la familia, en una pareja, un círculo de amigos o incluso colegas de profesión, pero si no invertimos el tiempo adecuado en ellos, estos perderán interés en nosotros y simplemente podemos quedar sin ese sistema. Es válido pensar en tu negocio, en tu carrera y querer llegar lejos, pero si no sabes balancear las cosas al final cuando llegues a lo que tu consideras el éxito, no tendrás con quien compartirlo puesto que no encontraste tiempo para compartir con quienes te apoyaron antes.

Para evitar caer en exceso de tiempo invertido al trabajo debemos saber controlarnos, no tomas más trabajo del que podemos manejar, el número de proyectos al mismo tiempo variará dependiendo del tipo pero trata de establecerte un límite.

Ya que la decisión de independizarse ha sido tomada, el destino profesional de tu carrera dependerá de ti y nada más de ti, por lo que es momento de tomar con más seriedad temas que quizás en el pasado dejabas sin analizar a profundidad o que simplemente no le correspondían a tu puesto de trabajo en la oficina. Es tiempo de empezar a estudiar sobre contratos, acuerdos, pagos, finanzas, dirección de negocios y muchas otras cosas de las que quizás no estés muy informado, pero que muy probablemente tengas una noción general.

Si no acatamos esto podemos caer en ciertos deslices que harán difícil nuestra permanencia en el mundo freelance, cometer algunos errores que se pudieron prevenir nos puede orillar a terminar haciendo lo que menos queremos, o peor aún haciéndonos regresar a un trabajo de oficina disfrazado de independiente. En este artículo trataremos de estudiar alguno de estos errores para evitarlos.

Preparación legal para ser diseñador freelance

Una incorrecta o nula preparación legal puede llevar a muchos problemas que causarán más que un simple dolor de cabeza, desgraciadamente vivimos en un mundo acelerado donde las decisiones se toman a sangre fría y en cuestión de segundos, donde la gente no se tienta el corazón y si hay que tomar acciones legales en contra de alguien simplemente proceden, esto ya no es un juego de niños y por lo mismo al ser independiente te conviertes en el único representante legal de tu trabajo por lo que dicha situación se debe tomar con la debida preparación.

Con esto no te estamos diciendo que necesitas tener un abogado de planta, si lo puedes tener que mejor, pero sabemos que es algo que representa mucho gasto para un pequeño-mediano empresario. Lo que tratamos de aconsejar, es que busques asesoría legal en momentos clave como por ejemplo cuando se vayan a crear contratos, cláusulas de servicios o se establezcan tareas y objetivos para proyectos, de esa manera dejarás en papel y correctamente legalizado el acuerdo al que llegaste con el cliente.

Si trabajas para empresas o compañías grandes, debes estar conciente que ellos cuestan con una amplia representación legal, si llegara a resultar algún conflicto entre ambas partes el mayor perjudicado serías tú puesto que como independiente no cuentas con el potencial económico de una corporación, por eso es mejor actuar en la prevención.

Muchas veces el cliente buscará tomar salidas para evitar el choque legal, puede utilizar argumentos como que se siente incómodo con el hecho de que un abogado participe en las decisiones del negocio o tratará de convencerte de que no hay necesidad de incluir abogados porque él no cuenta con uno, pero esto no te debe de importar ya que puede ser un engaño.

Necesitarás hacerle ver que te sientes más confiado actuando de manera legalmente correcta y así como tu no le dices como manejar su negocio, el no puede venir a indicarte como harás lo tuyo, por ello se debe llegar a un acuerdo.

Firmeza y proposición de ideas

En muchas ocasiones llegaremos con clientes que tengan proyectos ya muy avanzados en el proceso de planeación, o incluso ya empezados, el hecho de tomarlos o no dependerá de nuestras políticas, pero si ya nos decidimos a hacerlo debes tener siempre en consideración que tus ideas son igual de relevantes que las del cliente por lo que también merecen ser escuchadas.

El hecho de que el cliente tenga más conocimiento sobre el pasado del proyecto, no significa que deba saber de manera exacta lo que es mejor para éste, por lo tanto no se le debe permitir tomar todas las decisiones de manera arbitraria y mucho menos dejar que nos diga como hacer nuestro trabajo, al final el nos contrato porque necesitaba a alguien con nuestros conocimientos y como tal debemos ponerlos en práctica.

Si únicamente te dedicas a aceptar todo lo que el cliente diga, sin importar si sus requerimientos son apropiados o siquiera posibles, el resultado final será una tragedia.

Muchos se pueden llegar a sentir temerosos por creer que pueden ofender a alguien, o pensar en las implicaciones que puede traer el hacer respetar tus decisiones, pero el mantenerte firme te ahorrará discusiones y perdida de tiempo, tiempo que puede invertirse muy bien en un buen desarrollo del proyecto.

Si no quieres ser muy duro o directo desde el principio, puedes utilizar alternativas, no digas respuestas definitivas mucho menos si son de afirmación, si el cliente propone algo analízalo, si no te convenció o te parece imposible a simple vista responde con algo como “No estoy seguro que se pueda utilizar, déjame investigar y cuando tenga una respuesta te lo digo”, eso bastará para ahorrarte la ansiedad y te dará tiempo para responder después ya con la cabeza más fría.

Esto no se trata de demostrar quien es el más fuerte, habrá momentos en que las ideas de tu cliente serán muy buenas y tendrás que escucharlas y actuar en base a ellas, el fin es el mismo para los dos, el proyecto es en beneficio de ambos y siempre se debe actuar en equipo, sólo recuerda que el experto en diseñar y desarrollar eres tú.

La introducción de XHTML, la adaptación de nuevos patrones y la evolución de lenguajes auxiliares como JavaScript hizo que este lenguaje pasará a oxidarse, sobreviviendo con etiquetas y declaraciones que ya no se adecuaban más a las necesidades del diseñador web, dejándolo únicamente como parte de la historia del Internet.

Cuando todo apuntaba a la muerte definitiva de este lenguaje surge HTML5, ganando la contienda a XHTML y trayendo de vuelta los estándares con los que la web inicio, aportando nuevos elementos, secciones y etiquetas que se incorporan de manera perfecta al tipo de páginas web que se manejan en la actualidad.

Historia de HTML5

Para poder comprender mejor la incursión de HTML5 al mundo de los estándares para el desarrollo web, podemos dividir el estudio de su historia en tres partes. Primero tendríamos la creación del HTML, segundo la introducción de XHTML y tercero la historia que se empezó a escribir desde que HTML5 le gana la contienda a XHTML2 como estándar oficial de la w3c.

Los inicios de HTML se remontan a principios de la década de los 90s, es en el año 1993 cuando se busca dar una mejor adaptación al lenguaje y se empieza a trabajar para mejorarlo, iniciando así la creación de versiones. Hasta el momento HTML cuenta con 4 versiones aprobadas y totalmente implementadas como estándares web, siendo 1997 el año en que se creó su versión más reciente, la cual aún se utiliza en la actualidad.

En 2004 la W3C estableció la necesidad de contar con un nuevo estándar para la web, por lo que se propuso crear una nueva versión del estándar XHTML que se había venido utilizando desde principios de la década de los 2000s. En ese momento XHTML representó una solución para muchos de los problemas que se presentaban con HTML, permitió dar un paso importante para la evolución de otros lenguajes y creación de frameworks, sin embargo no era realmente utilizado por todos y no desarrollar en base a sus reglas era algo que al navegador no le importaba, por lo que la propuesta de un nuevo estándar fue necesaria y eso llevo a la primera edificación de XHTML2.

Por su parte empresas como Apple, Mozilla y Opera decidieron retomar el proyecto abandonado para la creación de una quinta versión de HTML, y empezaron a trabajar sobre ello para lograr una mejor compatibilidad con las tecnologías de la actualidad.

Fue en 2006 cuando la W3C volvió a interesarse en HTML5 y finalmente en 2007 se unió al grupo que se encontraba trabajando en esta versión, para así unificar proyectos. Sin embargo, en la W3C aún existía rechazo hacia esta versión, por lo que también se siguió trabajando en XHTML2 de forma paralela, llevando así una carrera por ser el nuevo estándar de la web.

El entusiasmo por XHTML2 fue desapareciendo por el lento desarrollo y HTML5 tomo mucha fuerza impulsado por las compañías que estuvieron detrás de su desarrollo, contando con varias presentaciones y sitios que fueron hechos únicamente para mostrar su potencial, finalmente en 2009 no se renueva el proyecto para desarrollar XHTML2 y en 2010 se da la popularización de HTML5.

Características de HTML5

A diferencia de las primeras versiones de este lenguaje, ningún navegador fue hecho especificamente para interpretarlo, es decir, en la actualidad todos los navegadores soportan a cierto grado este lenguaje pero no existe alguno que fuera hecho en exclusiva para lograr su completo funcionamiento, esto provoca ventajas y desventajas, por el hecho de que el usuario puede continuar utilizando su navegador sin necesidad de cambiarlo pero puede que la experiencia que le deje HTML5 no sea la adecuada.

Esta falta de garantía de visualización correcta, hace que muchos diseñadores se preocupen por ofrecer diversas versiones para que el sitio pueda presentarse de manera correcta, por ello se dan a la búsqueda y creación de miles de técnicas para lograr la adaptación, todo en pro del uso de HTML5 en sus sitios y así poder ir probando el estándar mientras llega a su proceso de maduración.

Entre las características principales de HTML5 encontramos cambios drásticos en el marcado y la estructura de los sitios, se incluye nuevos elementos que aumentan el valor semántico de nuestro código, los formularios son optimizados y su validación se vuelve más sencilla, se incluye el soporte a elementos de tipo audio y video sin tener que recurrir a plugins o flash. Es en este grupo donde se encuentran las características que más soporte tienen en los navegadores actuales.

También existen otras características que si bien son parte del estándar, necesitan de la implementación de otros lenguajes como JavaScript para un correcto funcionamiento, tal es el caso del almacenaje local, funcionamiento offline de las aplicaciones y mensajería. Estos son temas un poco más avanzados por lo que trataremos de verlos a fondo más adelante.

A la par con HTML5 se han venido desarrollando otra clase estándares que van de la mano con esta versión y aumentan la genealidad de los diseños web, tal es el caso del lenguaje CSS3, imágenes SVG2 y la geolocalización, los cuales han causado que en más de una ocasión se les considere como características de HTML5, sin embargo son proyectos totalmente independientes que se han aunado al progreso producido en forma de conjunto.

A lo largo de este manual trataremos de ir analizando cada una de estas características y adentrarnos por completo al estudio de este nuevo estándar que ha maravillado a la comunidad de la Web.

Formularios HTML accesibles

La sensibilidad por el usuario es lo primero que debemos tener en cuenta para lograr un diseño accesible, debemos considerar siempre ofrecer un formulario cuyos campos se encuentren bien espaciados y con etiquetas “label” que estén claramente asociadas a ellos, para así permitirle al usuario realizar sus tareas de manera mucho más fácil y sencilla, dando oportunidad incluso para que personas con alguna incapacidad visual puedan interactuar con el formulario.

No debemos olvidarnos de etiquetas como “optgroup” que nos permiten segmentar y agrupar grandes listados, o como “fieldset” que nos ayudará a crear una división al interior de la forma, obteniendo una mejor visualización y permitiendo una mejor asistencia.

Algunos otros aspectos que podemos tomar en cuenta para este tema ya fueron analizados en otros artículos, tal es el caso de los atributos “tabindex” y “accesskey” que permiten aumentar la accesibilidad a los campos “input”, “textarea” y “select”, ya que ayudan a la navegación de aquellos que no utilizan un dispositivo de señalización, como un mouse.

Los atributos de descripción suelen ser muy importantes en estas situaciones, si el usuario se siente confundido al momento de estar llenando el formulario puede recurrir a ellos para obtener una mejor explicación del contenido que debe tener el campo. De igual manera se puede hacer uso del atributo “value” de cada campo, para dar un valor por defecto que explique mejor la manera en que se debe de llenar.

Uso de etiquetas “label”

Todos los elementos que van a tomar parte de un formulario deben de ir siempre acompañados por un elemento de tipo “label”, al menos de que la interfaz del sitio demande lo contrario. El lograr esto es muy sencillo, sin embargo a muchos les puede resultar sin sentido, es claramente necesario tener un elemento que indique el contenido que debe de ir dentro del campo que tenemos, muchos hacen uno de texto común con etiquetas como “span” o “p”, sin embargo la relevancia que toma “label” se debe a que se puede establecer una asociación inmediata con el campo del formulario.

Un elemento de tipo “label” establece un enlace explícito, con una etiqueta de creación de campos, mediante el atributo “for” que permite asociar dicho elemento con el “id” del campo. Si tuviéramos un campo para un nombre podríamos asociarlo con un “label” de la siguiente manera:

<label for="nombre_form">Nombre:</label>
<input name="nombre" id="nombre_form" />

En el ejemplo utilizamos distintos valores para los atributos “id” y “name”, pero generalmente se utiliza el mismo, el cambio en nuestro ejemplo fue hecho con propósitos de demostrar la manera en que funcionaba el atributo “for”.

Esta asociación establecida permite aumentar la usabilidad, ya que al momento de dar clic sobre la “label” el puntero se colocará automáticamente sobre el campo del formulario al que se encuentra asociado. En el caso de las casillas de verificación y los botones de tipo radio, al momento de dar clic la opción a la que esta asociado el label se marca como seleccionada.

Estilización del formulario con CSS

Uno de los problemas más frecuentes que se presentan al momento de desarrollar un formulario, se da al buscar un estilo uniforme para todos los campos. La dificultad se presenta por el hecho de que todos los navegadores despliegan de manera distinta los campos, además de que según el sistema operativo que estemos utilizando es la manera en que se visualizarán los botones e incluso las fuentes.

Los bordes de los campos del formulario son deliberadamente hechos para hacer que el elemento se mire de manera tridimensional, como son parte ya del sistema operativo, estos campos fueron diseñados para ser visualizados en un programa más que en una página de internet, por lo que se tuvo que aplicar estilos que sugirieran una interacción con los campos, y por ello se recurrió a una visualización muy arcaica pero concisa, indicando cuales campos son para rellenar y cuales otros para aplicarles una acción.

Para evitar caer en una desuniformidad y modificar los estilos por defecto, el uso de CSS se ha vuelto fundamental, y gracias a él podemos cambiar los bordes, las fuentes y los fondos para llegar a un estilo que se adecue más a lo que queremos mostrar en nuestro sitio.

Bordes

Quizás la manera más rápida y sencilla de modificar radicalmente la apariencia de un formulario es cambiando los bordes de los campos que en él se despliegan; para ello tenemos que hacer uso de la propiedad CSS “border”, que nos permitirá cambiar el tipo de borde, su color y tamaño. Si quisiéramos por ejemplo tener un borde de tipo sólido, color gris y con 1 píxel de anchura, basta con utilizar una sentencia como esta:

input, textarea { border: 1px solid #333 }

Esto se aplicará a todos los elementos de tipo “input” y “textarea” que tengamos en el formulario, y hará que luzcan un borde algo delgado y sin nada tridimensional. En cambio, si quisiéramos apegarnos más al estilo original pero cambiando los colores, podemos utilizar la propiedad “border-color” con un valor para cada sección, como se muestra aquí:

input, textarea {
border: 1px solid;
border-color: #333 #666 #666 #333;
}

En cuanto a lo que bordes para cajas de selección se refiere, estos se ven más limitadas por parte de los navegadores, aunque en la actualidad estos problemas han tendido a reducirse. Lo mismo puede ocurrir con las casillas de verificación y los botones de tipo radio, su estilo puede permanecer diferente al resto de los bordes que manejamos.

Fuentes

Podemos especificar el tipo de fuente con la que se va a desplegar el texto dentro de cada campo del formulario, y para ello basta con recurrir a la propiedad “font” de CSS. Al igual que con el resto de los elementos donde podemos aplicar esta propiedad, el color y el tamaño son aspectos elegibles.

input, textarea { font: 10px arial }

Es recomendado realizar una especificación de fuente uniforme para todos los elementos del formulario, ya que por defecto los elementos “textarea” muestran el texto contenido con una fuente de tipo “Courier” mientras que los “input” hacen uso de fuentes “sans-serif”.

Fondo

El último aspecto relevante que se puede modificar para resaltar o dar un estilo distinto a los elementos, es el fondo. Por lo general esta propiedad, representada por “background”, es tratada con mucho respesto y sólo se utiliza en casos donde la interfaz lo amerite.

Cambiar el fondo de un campo puede mejorar su usabilidad y accesibilidad, pero debemos elegir correctamente la combinación entre color de letra y fondo del campo para no aturdir o dejar pasmado al usuario.

Un uso muy práctico del cambio de fondo se puede hacer en conjunto con el evento “focus” mediante CSS, así podemos cambiar el fondo del campo únicamente cuando el usuario se encuentre posicionado sobre él:

input:focus, textarea:focus { background: #ccc }

Elemento “textarea” de HTML

A diferencia de las múltiples opciones y configuraciones que se pueden presentar en un elemento “input”, “textarea” representa una sentencia sencilla con un uso simple y directo, aceptar y desplegar grandes cantidades de texto que después se mandarán al servidor para su procesamiento.

En muchas ocasiones los campos definidos mediante esta etiqueta son utilizados como una alternativa al “input” de tipo “text”, para así poder introducir más de una línea de texto en el campo, pero su uso se debe de enfocar para datos que realmente necesitan líneas múltiples como es una dirección, algún comentario, un resumen, entre otras cosas.

El elemento “textarea” cuenta con una etiqueta de apertura y otra de clausura, y el texto que depositemos entre esas dos etiquetas será el que se mostrará en el elemento al momento de visualizarse en la interfaz. Si quisiéramos introducir una área de texto cuyo contenido sea “Inserta tu resumen aquí” haríamos lo siguiente:

<textarea name="resumen" rows="10" cols="20">Inserta tu resumen aquí</textarea>

Tal como en el tipo “text” de “input”, el hecho de introducir un texto antes de que el usuario lo haga, es meramente por fines informativos y de instrucción, en caso de que el usuario olvide introducir un texto o simplemente mande el formulario con el texto insertado por defecto es deber de nosotros validar dicha información para no obtener datos erróneos. Otra desventaja que representa el introducir un texto por defecto, es el hecho de que requiere más trabajo por parte del usuario, ya que necesita borrar el texto antes de introducir el suyo, aunque para evitar esto se puede hacer uso de una instrucción sencilla de JavaScript que borre el texto justo al momento en que el usuario de clic en el área de texto.

Pos disposición de XHTML los atributos “rows” y “cols” son totalmente obligatorios, estos ayudarán a definir el tamaño del área de texto que vamos a mostrar, esto modifica en principio la altura y anchura del elemento pero después puede ser modificado mediante el uso de CSS. En nuestro ejemploe stamos dando un número de 10 filas de alto y 20 columnas de ancho.

Elemento “select” de HTML

La etiqueta “select” es utilizada para definir elementos que se presentan en forma de lista ante el usuario, lo que generalmente despliega un menú tipo drop-down donde se debe elegir una de las opciones y su valor será el que se envíe para el procesamiento del lado servidor. Si bien este es el comportamiento considerado comúnmente como normal, también existe la posibilidad de crear elementos “select” de tipo múltiple, permitiéndole al usuario elegir más de una opción.

Para definir la opciones dentro del menú de selección debemos recurrir a otra etiqueta la cual lleva por nombre “option”. Cada opción que queramos desplegar deberá de ir entre una etiqueta “option” de apertura y otra de clausura, si por ejemplo quisiéramos definir una lista de países haríamos lo siguiente:

<select name="pais">
    <option>Argentina</option>
    <option>España</option>
    <option>México</option>
    <option>Venezuela</option>
</select>

Con la estructura utilizada en el ejemplo, el valor que se enviará al momento de mandar toda la información del formulario al servidor será el contenido de la opción que seleccionamos, si seleccionamos la tercera opción entonces “México” es el valor que se le dará al elemento “pais”. En caso de no desear este comportamiento, podemos utilizar el atributo “value” para modificar el valor que se mandará para el procesamiento, si en lugar de “México” queremos mandar la abreviación “mx” podemos hacer lo siguiente:

<option value="mx">México</option>

Se puede establecer una opción seleccionada por defecto mediante el atributo “selected”, esto nos permite tener siempre un valor al momento de que el usuario envíe el formulario y evitar falta de información.

<option value="mx" selected="selected">México</option>

“optgroup” es otra etiqueta que se puede utilizar dentro de un “select”, es poco utilizado pero representa gran utilidad cuando se requiere seccionar una lista de opciones que es muy grande. Tomemos como referente el ejemplo que hemos venido manejando, en caso de que queramos segmentar mejor nuestra lista podemos agrupar los países por continente:

<select name="pais">
    <optgroup label="América">
        <option>Argentina</option>
        <option>México</option>
        <option>Venezuela</option>
    </optgroup>
    <optgroup label="Europa">
        <option>España</option>
        <option>Italia</option>
        <option>Portugal</option>
    </optgroup>
</select>

Como ya mencionamos esta es la manera predeterminada para mostrar un elemento “select”, pero existe la opción de hacerlo de selección múltiple mediante los atributos “size” y “multiple”. Al momento de hacer uso del atributo “size” el menú drop down desaparece y se muestran las opciones dentro de un cuadro, el cual desplegará una barra de desplazamiento en caso de que su tamaño no cubra todas las opciones.

Por su parte el atributo “multiple” permite que dentro de esta caja podamos seleccionar todas las opciones que deseemos, esto se logra oprimiendo la tecla Ctrl y después dando clic en la opción del menú sin soltarla. Nuestro código final lucirá de la siguiente manera:

<select name="pais" size="8" multiple="multiple">
    <optgroup label="América">
        <option>Argentina</option>
        <option>México</option>
        <option>Venezuela</option>
    </optgroup>
    <optgroup label="Europa">
        <option>España</option>
        <option>Italia</option>
        <option>Portugal</option>
    </optgroup>
</select>

La respuesta es mucho más sencilla que la solución. Existe una batalla en la puesta a punto de las herramientas de navegación. Nadie quiere quedarse atrás en el soporte de HTML5 y en breve tendremos grandes novedades referentes a nuevas versiones de Internet Explorer, Mozilla Firefox, Google Chrome y los demás populares navegadores.

Mientras tanto, nos encontramos en medio de una transición durante la cual muchas de las nuevas etiquetas, atributos, características de HTML5, serán procesadas por unos y no por otros.

Aquí trataremos de hacerte llegar alguna información útil para la detección de la compatibilidad de los navegadores, así como dónde investigar la situación de algunos de ellos en cuanto al soporte HTML5 para poder diseñar con HTML5 hoy.

Existen varios métodos para detectar la compatibilidad de un navegador dado con las nuevas etiquetas o atributos de HTML5. Pasaremos a mencionar algunos de ellos.

Detectar soporte HTML5 mediante JavaScript

Tal y como se explica en Dive into HTML5, una de las posibilidades es crear un elemento a través de una etiqueta y luego verificar por JavaScript si uno de sus atributos realmente existe. En caso negativo, significará que el navegador no soporta la etiqueta y/o el nuevo atributo.

function soporteCanvas() {
return !!document.createElement('canvas').getContext; }
if (soporteCanvas) {
// preparemos una animación
} else {
// lo lamento, no hay soporte Canvas }

La detección a través de esta función u otra similar, se basa en el hecho de que –aun cuando el navegador no soporte las nuevas etiquetas- el objeto, conocido o desconocido por el navegador, se almacena en su repositorio de memoria.

Sin embargo, cuando se alude a un atributo, en este caso getContext, el proceso genera un resultado negativo, es decir, una respuesta false. De igual manera puede verificarse el soporte de otras funciones propias de HTML5, como la nueva función de video.

function soporte_video() {
return !!document.createElement('video').canPlayType;
}
if (soporte_video()){
// Este navegador soporta video HTML5
} else {
// No lo soporta, podríamos utilizar Flash
}

Una Biblioteca para Detectar la Compatibilidad: modernizr

Para hacernos la vida más fácil y evitar que debamos desarrollar tantos script de detección, ya existe una extensa biblioteca de código abierto con funciones JavaScript, llamada Modernizr.

Al usar esta librería no sólo podremos detectar la compatibilidad con HTML5, sino también el soporte a variadas propiedades CSS. Para cargar todas las funciones de Modernizr es necesario escribir el código que las active. Este código debe incluirse dentro del <head>de tu página web.

<script src="modernizr.min.js"></script>

A partir de aquí ya estarás en condiciones de verificar las posibilidades de tu navegador en cuanto a, en este caso, su compatibilidad con HTML5. Algunas de las funciones son éstas:

Para verificar soporte canvas.

if (Modernizr.canvas) {
// ahora podemos generar algunos gráficos
} else {
// lástima, no hay Canvas en este navegador
}

Para detectar soporte de video.

if (Modernizr.video) {
// colguemos una película en nuestra página
} else {
// creo que debemos optar por Flash
}

Para verificar el soporte del tipo de input “range”, que permite crear un deslizador.

If (!Modernizr.inputtypes.range) {
$(document).ready(initSlider);
};

En este último caso, si el navegador no soporta “range”, optamos por cargar la función initSlider a nuestro documento de jQuery, de forma tal que al cargar la página la función cumpla con el objetivo de mostrar el slider o deslizador.

Así, podemos utilizar funciones Modernizr para revisar todos los nuevos tipos de input de HTML5.

Como se ve, será muy interesante analizar todas las funciones que brinda Modernizr, una herramienta fantástica que nos ahorrará mucho tiempo en cuanto a la detección de compatibilidad con HTML5.

Otros Recursos y Herramientas Útiles

Mientras buscamos la forma de utilizar todas las novedades de HTML5 y adaptarnos en aquellos casos en que no logremos el soporte, ya hay quienes realizan estadísticas actualizadas sobre el tema.

En el sitio caniuse.com podrás tener acceso a información actualizada sobre el soporte de los navegadores, no sólo con relación a HTML5 sino también con respecto a CSS, APIs JS y otras herramientas de diseño de páginas web. Las tablas de compatibilidad incluyen el desempeño de Internet Explorer, Firefox, Chrome, Safari, Opera, Android Browser. Tienen muy buena presentación y se actualizan tal como los nuevos tiempos lo requieren.

Además, ya existen páginas que nos permiten probar nuestra codificación HTML5 por anticipado y detectar el soporte. Dos de ellas son:

The TryIt Editor (http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic)
Rendera (http://rendera.heroku.com/)

Ambos servicios en línea son gratuitos y siguen el mismo principio: una ventana hacia la izquierda donde escribirás el código, y una a la derecha donde verás los resultados del mismo. Una forma interesante de saber si tu navegador soporta la nueva codificación antes de generar tu página.

Etiqueta “input”

Esta etiqueta es la madre de todas, gracias a su uso podemos crear diferentes tipos de elementos de formulario, desde cajas de texto hasta botones radio, casillas de selección, entre otros. Todo esto es gracias a su atributo “type” de la etiqueta, ya que será el que nos va ayudar a especificar el tipo de campo y diferenciar su función del resto que utiliza “input” como etiqueta de declaración.

Existen 10 valores posibles para el atributo “type” del elemento “input”, estos definirán una función específica para el campo. El más común de estos valores es “text”, al dar este valor al atributo estamos indicando que el campo será una caja de texto que contendrá una línea sencilla.

Otros de los valores comunes son “password” que agrega una caja cuyo texto es protegido, es decir no se perciben los caracteres como tal, también encontramos el valor “checkbox” que sirve para crear casillas de selección, el valor “radio” crea botones de tipo radio generalmente utilizado para seleccionar una de varias opciones, y el valor “hidden” que oculta el campo para que no sea visible en la interfaz.

El resto de los valores que puede tomar el atributo son “submit” que crea un botón para mandar la información del formulario, “reset” que añade un botón que regresa todos los campos a su estado original, “file” que agrega la funcionalidad de elegir archivos, “image” que sirve para indicar las coordenadas donde se dio clic a una imagen y “button” que sirve para crear botones que no necesariamente tienen que mandar información.

Valor “text”

Este es el valor predeterminado de la etiqueta “input”, por lo que no es necesario especificarlo literalmente en el atributo. Su función es manejar piezas cortas de información textual, ya sea el nombre o apellido del usuario, un correo electrónico, algún número de tarjeta o de pago.

En conjunto con este valor podemos utilizar otros atributos como “maxlength”, el cual limita el número de caracteres que se pueden escribir en el cuadro de texto. Si por ejemplo quisiéramos una caja de texto en línea sencilla que únicamente permita incluir 6 caracteres definiríamos una línea como la siguiente en el código:

<input type="text" maxlength="10" />

También podemos incluir un valor por defecto en nuestra caja, si quisiéramos mostrar una palabra o incluir siempre el mismo valor para evitar que se olvide el llenado de este campo, para ello existe el atributo “value”. Si a nuestro campo declarado le queremos dar como valor predeterminado la palabra “La Webera” haremos lo siguiente:

<input type="text" maxlength="10" value="La Webera" />

Valor “password”

Este valor es muy similar a “text” con la única diferencia de que el texto se muestra de manera protegida, es decir veremos un conjunto de puntos negros en lugar de los caracteres que introducimos. La encriptación se hace con la intención de proteger la contraseña que el usuario esta introduciendo, de esa manera únicamente él sabrá que escribió en el campo y alguno que otro fisgón no podrá obtenerla a simple vista.

<input type="password" name="contrasena" maxlength="20" />

Valor “checkbox”

Este valor permite crear casillas de selección, las cuales son comúnmente utilizadas para indicar cuando un elemento es el adecuado o inadecuado, cuando se desea ignorar o resaltar alguna opción, o simplemente cuando se requiere hacer una selección múltiple.

Al momento de declarar este valor el campo input cambia de forma, ya no será una caja de texto, será un recuadro que podemos seleccionar y al dar clic sobre él un signo de correcto aparecerá. Al momento de enviar el formulario todas aquellas casillas que esten seleccionadas serán enviadas para su procesamiento, en cambio aquellas que no lo estén simplemente serán ignoradas.

Por defecto todas las casillas están deseleccionadas, en caso de que quieras que algunas aparezcan seleccinadas debes añadir el atributo “checked” de la siguiente manera:

<input type="checkbox" name="opcion" checked="checked" />

Si el elemento “input” no cuenta con un atributo “value” entonces lo que se enviará para procesarse es el “name”, pero en caso de contar con “value” esto será lo que el servidor recibirá para utilizarse.

Valor “radio”

Los botones de tipo radio son muy similares a las casillas de selección, pero a diferencia de estas, lo que se busca con estos elementos es que únicamente se seleccione una opción entre varias. Para ello se le da el mismo nombre a un grupo de botones radio y de esa manera cuando uno de los radios es seleccionado el resto se deselecciona automáticamente.

<input type="radio" name="pais" value="mexico" checked="checked" />
<input type="radio" name="pais" value="espana" />
<input type="radio" name="pais" value="chile" />

En esta ocasión el atributo “value” es totalmente necesario, ya que eso es lo que identificará cada opción.

Valor “hidden”

Para propósitos de interfaz este valor puede sonar algo absurdo o innecesario, pero para cuestiones de manejo de información y procesamiento del lado servidor puede ayudar mucho, ya que nos permite añadir información al formulario sin permitir que el usuario pueda observarla y por lo tanto modificarla.

<input type="hidden" name="numcliente" value="13456yui89" />

Esta información puede provenir del lado de Javascript o del propio HTML por lo que una vez que los cálculos necesarios son realizados el valor se agrega al campo “input” y la información se procesa después del lado servidor.

Valor “submit”

La manera más fácil y común de enviar la información que fue depositada en un formulario es a través de un botón de tipo “submit”. Este botón es creado mediante un elemento “input” con un valor de tipo “submit”, el cual cuando es presionado de la orden de enviar la información a la dirección indicada en el atributo “action” del elemento “form”.

El texto que veremos dentro de este botón variará según el navegador, ya que por defecto cada uno le da un valor distinto, por lo que es común utilizar un valor personalizado para definir dicho contenido. Si por ejemplo quisiéramos que el botón diga “Manda el formulario!” en vez del típico “Submit”, basta con hacer lo siguiente:

<input type="submit" value="Manda el formulario!" />

En el siguiente capítulo, veremos en detalle el uso de textarea y select en formularios.

Los formularios son una parte angular en casi todos los sitios comerciales que existen en Internet, por no decir que en todos, por lo que representan el elemento clave para establecer una transacción, también son fundamentales en sitios que buscan dar soluciones o respuestas a sus usuarios, ya que gracias a ellos se puede establecer una comunicación sin necesidad de tener que hacer alguna llamada o visita personal.

Pero su función no se ve limitada a esto, podemos explotar su potencial para incluso realizar algún tipo programación avanzada, su funcionalidad de obtener datos para después procesarlos nos da la oportunidad de realizar el número de operaciones que deseemos con la información. Dicho procesamiento se puede hacer en el backend o en el frontend de nuestro código, así las tareas pueden ir desde una sencilla calculadora realizada con JavaScript hasta un graficador hecho con PHP.

Lo que sucede más allá del formulario ya no corresponde a XHTML ni CSS, dependerá y variará según las operaciones que el diseñador o desarrollador necesiten hacer, el uso de lenguajes o aplicaciones especializadas entra en el juego, pero esto no es parte del estudio de nuestro manual, por lo que en este artículo únicamente nos enfocaremos en estructurar nuestro formulario de manera correcta dentro de nuestro documento XHTML y estilizarlo con CSS.

Elemento form

La etiqueta “form” es la utilizada para definir un nuevo formulario dentro de nuestro código XHTML, cuenta con una apertura y contraparte de clausura, en medio de esto deber ir definido todos los campos y botones que va a tener nuestro formulario.

<form action=”webera.php” method=”post”>
<!-- En esta parte tendremos los campos -->
</form>

Como se puede observar, el campo de apertura tiene dos atributos principales, estos son “action” y “method”, el atributo “action” se encarga de decirle al navegador a que lugar mandar la información obtenida en el formulario cuando se esta se envía, es decir su valor puede ser cualquier página o script que vaya a procesar la información y hacer algo con ella. Por su parte el atributo “method” se encarga de definir la manera en que vamos a enviar esa información, para esto tenemos dos opciones básicas “get” o “post”.

La diferencia entre “get” y “post” esta en el medio que utilizan para mandar la información, mientras que “get” utiliza la URL para mandar los datos, “post” lo hace utilizando los HTTP headers. El método default es “get” por lo que si deseas es utilizar “post” tienes que definir de manera obligatoria el valor en el atributo “method”.

El uso de uno u otro método variará según lo que queramos hacer, “get” representa menos seguridad para el manejo de información ya que cualquiera puede tener acceso simplemente leyendo la URL, aunque para evitar esto se puede utilizar encriptación.

Campos y botones

La manera en que usuario podrá añadir información a un formulario será a través de campos, los cuales varían según el tipo de información que se debe de insertar. Existen cajas de texto, botones radio, listas de selección, casillas de selección y áreas de texto, la información que se deposita en ellos la mayor parte del tiempo será enviada a través de botones, los cuales al recibir un evento de clic se encargan de mandar la información al destino especificado en el atributo “action” del elemento “form”.

Si bien existen muchos tipos de campos, las etiquetas para definirlos son básicamente tres “input”, “textarea” y “select”. El elemento “input” es el más importante de todos, ya que puede utilizarse para definir distintos campos, incluso botones, ya que su atributo “type” es el que se encarga de definir que uso darle al elemento.

Identificación de los campos

Si enviamos todos los datos introducidos en un formulario sin nada que los identifique, por obvias razones el procesamiento resultará defectuoso, por ello es necesario dar un registro único a cada campo para definir que es lo que contiene. Para lograr esto se utilizan atributos como “id” y “name”, que contienen un valor único y descriptivo del campo.

El atributo “name” es el que originalmente recibía esta función de identificación, pero con las nuevas formas de programación frontend, el “id” de un elemento también puede ser recurrido para realizar la labor de diferenciación y reconocimiento del contenido. Si por ejemplo quisiéramos especificar que un campo será utilizado para introducir la edad del usuario, entonces debemos realizar lo siguiente:

<input name="edad" />

Continuación…

En la siguiente parte de este artículo estudiaremos a detalle cada una de las etiquetas utilizadas para crear elementos de formulario, así mismo los distintos tipos existentes para el elemento “input” y más adelante estilizaremos nuestro formulario para darle una correcta presentación.

Novedades de los formularios con HTML5

Placeholder

Placeholder de HTML5 es una marca de posición, normalmente un texto de ejemplo que aparece ya escrito en el campo del formulario, y que desaparece cuando hacemos click en él. Suele mostrarse de un color más claro en el formulario. Antes de este nuevo atributo de HTML5 era necesario usar JavaScript, pero ahora esto es mucho más fácil y se realiza con apenas unas simples instrucciones. Pruébalo:

  <label for="buscador">Buscar:</label>
  <input id="buscador" name="buscador" type="text" placeholder="Ingresa el texto a buscar" />

No debes olvidar que existen algunos navegadores que aún no logran soportar este nuevo atributo, placeholder y, por lo mismo, continúan usando JavaScript. Pero si lo que se quiere es poder brindar la misma solución a todos los usuarios que deseen experimentarla (incluídas las antiguas versiones de Internet Explorer, cosa que en la mayoría de proyectos no es ni necesario), lo que se debe hacer es comprobar si tu navegador soporta esta nueva opción que brinda HTML5, de la siguiente manera:

function soportaElem(elem, atrib) {
  var indicador = document.createElement(elem);
  if (atrib in indicador) {
  return true;
  } else {
  return false;
  }
  }

Se puede utilizar la función anterior para determinar si el navegador soporta o no el elemento placeholder, así como cualquier otro. El código devolverá un “true” o “false”, y lo utilizaremos de la siguiente manera:

If (!soportaElem('input', 'placeholder')) {
	***incluir aquí el procedimiento JavaScript apropiado en caso de que no soporte HTML5***
}

Autofocus

Autofocus de HTML5 sirve para poner por defecto el foco en un campo al cargar la página. Es una importante mejora de la usabilidad, sobre todo en páginas de registroÇ/login o búsqueda, puesto que el usuario puede empezar a rellenar el formulario sin necesidad de posicionarse en el campo.

Aunque hasta la página más conocida, Google, es un claro ejemplo de esta novedad, no podemos obviar que el autofocus trae consigo un problema. En muchas ocasiones, si deseamos utilizar el espacio para avanzar en el formulario y ver la información inferior, el autofocus lo impide y presenta un formato lleno de espacios. Twitter eliminó el autofocus por este motivo, cuestión de examinar el proyecto y ver pros y contras. Aquí un ejemplo:

  <label for="texto_a_buscar">Ingresa el texto</label>
  <input id="texto_a_buscar" name="texto_a_buscar" type="text" autofocus />

Esta opción también se puede implementar con JavaScript para aquellos navegadores que no lo soportan en HTML5, al igual que hicimos con placeholder:

if (!soportaElem('input', 'autofocus')) {
  document.getElementById('texto_a_buscar').focus();
  }

Autocomplete

Actualmente los navegadores pueden completar en forma automática ciertos campos de formularios. Esto último puede sonar muy útil, salvo en el caso en que se pierda el dispositivo donde están guardados esos datos.

Autocomplete de HTML5 nos ayuda a solucionar este problema, ya que la característica de autocompletado se puede definir como “on” u “off”, y de esta manera se evitan algunos problemas, o bien se facilita el completado del formulario. Incluso se puede desactivar el autocomplete de una zona del formulario o -si se requiere- del formulario completo. Aquí un ejemplo:

<form>
  Nombre: <input type="text" name="nombre" autocomplete />
  Contraseña: <input type="password" name="contraseña" autocomplete="off" />
  <input type="submit" value="enviar" />
</form>

En el ejemplo anterior, al enfocar (ubicar el cursor) en el espacio del nombre, mostrará un desplegable con los textos que hayas ingresado antes; en cambio, para la contraseña, no desearás que, por descuido, alguien intente ingresar y se autocomplete tu palabra secreta, por lo cual utilizamos autocomplete=”off”.

Required

Siempre ha sido necesaria la validación de formularios, tanto por parte de cliente como de servidor. La validación cliente es muy útil, porque evita que un formulario se envíe si no ha sido validado antes, y en todo caso, es posible avisar al usuario si algún campo no ha sido completado o no cumple con los requisitos correctos.

Required de HTML5, incluye una indicación donde se señala si algún campo del formulario es obligatorio o no.

  <label for="usuario">Ingrese su nombre:</label>
  <input id="usuario" name="usuario" type="text" required />

Hay ciertos navegadores que no soportan esta opción aunque, como en los demás casos, se puede seguir usando JavaScript.

Datalist y List

Es esta oportunidad se muestra un nuevo elemento llamado “datalist”, que no es más que una combinación de los elementos input y select.

<label for="mesdelanio">Ingresa el mes</label>
<input type="text" name="mesdelanio" id="mesdelanio" list="meses"/>
<datalist id="meses">
  <option value="Enero" />
  <option value="Febrero" />
  <option value="Marzo" />
  <option value="Abril" />
  <option value="Mayo" />
  <option value="Junio" />
  <option value="Julio" />
  <option value="Agosto" />
  <option value="Septiembre" />
  <option value="Octubre" />
  <option value="Noviembre" />
  <option value="Diciembre" />
</datalist>

El tradicional select presentaba una lista de opciones a elegir, en forma de lista desplegable. La nueva etiqueta datalist cumple las mismas funciones, aunque simplifica el proceso. Al comenzar a escribir el texto, despliega las opciones que coinciden con el comienzo del texto ingresado, dando al usuario la posibilidad de elegir un contenido diferente.

Nuevas Clases de ” input”

Esta es una forma de saber si nuestro navegador puede soportar los nuevos tipos de input de HTML5, mediante una función que nos entregará el resultado verdadero o falso:

function soportaInput(tipo_entrada) {
  var entrada = document.createElement('input');
  input.setAttribute('type', tipo_entrada);
  if (input.type == 'text') {
  return false;
  } else {
  return true;
  }
  }

Input type search: campos de búsqueda

La función de búsqueda incluida en HTML es un elemento de texto, aunque con un aspecto exterior más adecuado a su función, la búsqueda de un argumento ingresado por el usuario. Se puede utilizar la búsqueda sencilla o un tipo de búsqueda que incluye la historia de los elementos buscados.

  <label for="mibusqueda">Ingrese el argumento de búsqueda: </label>
  <input id="busqueda" type="search" placeholder="texto a buscar">

Como es notorio en este ejemplo, la inclusión del atributo placeholder mostrará la frase “texto a buscar” dentro del casillero de búsqueda, la cual desaparecerá en cuanto el usuario comience a ingresar el argumento.

Input type email, type url y type tel: Información de Contacto

Entre las novedades de HTML5, se han agregado tres clases de contactos: número de teléfono, correo electrónico y dirección de sitio web.

  <label for="correo_e">Tu correo-e</label>
  <input id="correo_e" name="correo_e" type="email" />
  <label for="sitioweb">Tu página web</label>
  <input id="sitioweb" name="sitioweb" type="url" />
  <label for="telefono">Tu número de teléfono</label>
  <input id="telefono" name="telefono" type="tel" />

Según en qué navegador estés usando el elemento, las opciones pueden cambiar. Por ejemplo, si usas un navegador normal, todo aparecerá como un simple texto, pero si navegas desde un smartphone el teclado cambiará, aunque debes tener en cuenta que tu SmartPhone debe soportar HTML5.

Sliders

HTML5 también incluye sliders, esos elementos que se deslizan entre dos valores previamente definidos y especifican un rango. Digamos que el ejemplo típico es el slider del volumen de audio. Los rangos pueden determinarse, aunque este nuevo elemento asume una extensión 0-100, si no se especifica otra.

<input type="range" min="0" max="80" value="0" />

Si ingresamos la codificación anterior en nuestra página, podremos ver una línea horizontal con un elemento deslizante sobre ella, que podremos mover a izquierda o derecha con ayuda del ratón. En este caso, podrás seleccionar un valor en el rango 0-80, aunque la página presentará inicialmente el valor 0.

Sin embargo, aquí falta algo, porque aun cuando podamos deslizar el indicador, no tenemos idea del valor que éste asume. Esto lo solucionamos combinando unas líneas en Java Script que nos mostrarán el valor cada vez que movamos el elemento deslizante.

<input type="range" min="0" max="80" value="0"onchange="mostrarValor(this.value)" />
  <span id="range">0</span>
  <script type="text/javascript">
  function mostrarValor(nuevoValor)
  {
  document.getElementById("range").innerHTML=nuevoValor;
  }
  </script>

Spinners

El control denominado spinner permite reducir o incrementar un valor mediante unos controles con forma de flecha que se ubican a la derecha del casillero que almacena el número. En el ejemplo siguiente se puede hacer click sobre las flechas para pasar gradualmente desde 0 a 100.

<label for="numero">Aumenta o disminuye el valor</label>
<input id="numero" name="numero" type="number" min="0" max="100" />

Calendarios, Fecha, Hora

Los populares calendarios de JavaScript han sido incluidos en HTML5, ahora con variadas nuevas formas de selección:

• date : selecciona la fecha completa, día-mes-año.
• datetime: selecciona la hora completa más el día, mes, año y zona horaria (timezone).
• datetime- local: incluye la hora actual, día, mes y año (no incluye zona horaria).
• time: selecciona la hora actual en horas y minutos.
• month: selecciona el mes y el año.
• week : indica la semana (un número de 1 a 52) y el año.

Aquí va un ejemplo:

<input type="date" name="fecha_actual" />

Estas son las novedades en cuanto a formularios con HTML5, los cuales ayudan a una mejor funcionalidad de los navegadores y a un avance en cuanto a la usabilidad y la reducción de la necesidad de usar javascript, lo cual es sin duda un progreso indiscutible hacia la sencillez y eficiencia de la programación web.