Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. HTML
Webdesign

Consejo Rápido: No olvide el elemento "optgroup".

by
Length:ShortLanguages:
This post is part of a series called Strange and Unusual HTML.
Getting Started With Scalable Vector Graphics (SVG)
Quick Tip: Using the HTML5 Download Attribute

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

Un diseño de patrón de navegación muy popular para los sitios web adaptables es hacer colapsar la navegación de su sitio web en un menú select. Sin embargo, representar al jerarquía o las distinciones de categorías en los elementos select a menudo conduce a un HTML destrozado con guiones manuales y muchos espacios  . En este tutorial le presentaremos un poco de la extraña etiqueta HTML llamada optgroup que le ofrecerá a usted una forma fácil (y semántica) de agrupar contenido relacionado en menus select.


Introducción

Determinar como de manera óptima adaptar la navegación de su sitio web en una pantalla pequeña de un dispositivo móvil es un desafío constante del diseño web flexible. Hay varios patrones de navegación de diseños web adaptables que funcionan muy bien. Uno de los métodos populares es condensar la navegación de un sitio web en un elemento select de la etiqueta form.

Esta técnica ha sido abordada y explicada en varios tutoriales a en toda la web, incluyendo en un artículo de Webdesigntuts+ escrito por Ian Yates: Construyendo un Diseño Responsive con Skeleton.  Sin embargo, convertir la navegación de un sitio en un control nativo de una etiqueta form no es sin controversia. Algunos alegan que es una mala idea, debido a que los elementos de una etiqueta form, simplemente, no fueron diseñados para la navegación.

select: Una Descripción General

El elemento select es un estupendo elemento UI porque puede ocultar muchas opciones debajo de un solo control, de este modo ahorramos mucho espacio valioso de la pantalla (una propuesta atractiva para los dispositivos móviles). Además, permite a los diseñadores conservar la navegación del sitio arriba de la página, en donde los usuarios están acostumbrados a encontrarla.

Además, hay un beneficio de interacción con los menús que proporciona el elemento select que otros elementos HTML simplemente no pueden: controles nativos. Cuando está activo, los menús select dan a los usuarios acceso a los controles nativos que proporcionan posiblemente la interacción más favorable, independiente de los dispositivos de los usuarios o de los métodos input.

Decidir si quiere o no convertir su navegación en un elemento select para los tamaños móviles, eso depende de usted como diseñador. Cada caso es diferente Si usted decide seguir esta ruta, entonces este tutorial le ofrecerá más información sobre cómo de manera óptima hacer navegable sus enlaces usando la etiqueta HTML: optgroup.


Ejemplo: Webdesigntuts+

Vamos a usar el sitio web Webdesigntuts+ como un ejemplo de cómo, teóricamente, usar la etiqueta optgroup.

Nota: Este ejemplo no es en ninguna manera una sugerencia de cómo resolver adecuadamente el problema del diseño de la navegación para el sitio web Webdesigntuts+ o de cualquier otros sitio Es meramente una ilustración rápida de cómo un sitio podría usar el elemento optgroup.

Digamos que queremos condensar los tres elementos de la navegación separados en la página de inicio de Webdesigntuts+ en un elemento select.


Sin optgroup

Convertir los elementos navegables en un elemento select mientras mantiene los grupos organizados por categorías puede resultar ser desordenado si no se hace correctamente. Algunos diseñadores o desarrolladores podrían crear un enorme menú select usando espacios manuales ( ) y guiones como separadores:


Con el elemento optgroup

Sin embargo, usando el elemento optgroup, éste le proporcionará un HTML más limpio y un mantenimiento interno para las categorías a través de una lista select. Usamos el atributo label para determinar que será mostrado:

Usted puede ver que el marcado HTML permite representar una relación padre/hijo sin tener que insertar un espacio especial ni tampoco una lista con guiones.


Móvil

Cómo mencione, una ventaja de usar el elemento select es el acceso a los controles nativos en los dispositivos móviles o los dispositivos de pantallas táctiles. Aquí hay algunos ejemplos de cómo se verían estos menús:


Conclusión

¡Eso es todo lo que hay! Sólo recuerde que el elemento optgroup ofrece una solución más semántica y sostenible para organizar los grupos por categorías de enlaces en una lista select. Ya sea que use o no un menú con el elemento select para condensar la navegación de su sitio web en los dispositivos móviles, esa es una decisión que usted necesita hacer como diseñador, no obstante, ¡usted ahora tiene un elemento de conocimiento que es muy valioso en su cinturón de herramientas para el dominio en el diseño web adaptable!


Recursos adicionales

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.