es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


Brillante uso de listas HTML en diseño web

Puede encontrar listas bien diseñadas en todo Internet. Los diseñadores los han usado durante décadas para coordinar la información de la página y los diseños, y en la web de hoy se puede ver la gran creatividad en la forma en que los diseñadores web utilizan las listas. ¡Estos incluyen menús de navegación, enlaces de perfil, archivos, tareas / listas de verificación y muchísimos otros usos!

En esta publicación, presentaré diferentes tipos de listas HTML, con consejos sobre cómo diseñarlas, particularmente sobre cómo agregar una ventaja única a su lista . También lo guiaré por algunos ejemplos de sitios web con fantásticos diseños de listas, y eventualmente obtendrá una lista de sitios web con listas HTML muy bien diseñadas. ¡Ya no hay dudas sobre cómo hacer que sus listas de apariencia simple se vean únicas, y comencemos a aprovecharlas al máximo hoy!

Los elementos de listado

Los diseñadores web están constantemente saltando de un carro a otro, lo que provoca que los estilos del sitio web cambien con el tiempo, pero las listas han resistido la prueba del tiempo y pueden estar presentes en la futura innovación de la World Wide Web.

Antes de revisar los ejemplos, quiero cubrir algunos puntos con listas HTML. Hay pocos tipos diferentes de listas que puede utilizar en su propio trabajo de diseño. La mayoría de los diseñadores web se centran en listas desordenadas que se abren con un

    etiqueta, pero también hay otras dos variaciones menos populares: listas ordenadas y definiciones de datos . He entrado en más detalles a continuación.

    Listas desordenadas
      )

    Posiblemente uno de los elementos más utilizados en los estándares HTML4 / HTML5. Las listas desordenadas emitirán datos de la misma manera que una lista ordenada, sin embargo , no verá ningún marcador numérico al costado . En cambio, cada elemento recibe un pequeño círculo o disco y se divide en una nueva línea. Este ícono también se puede cambiar con la propiedad de tipo de estilo de lista que se encuentra en CSS.

    A continuación se muestra el código de ejemplo de la lista desordenada:

    • Artículo 1
    • Artículo 2
    • Artículo 3

    Las listas desordenadas son el remedio perfecto para construir enlaces de navegación . Como puede anidar fácilmente listas enteras dentro de cualquier elemento de la lista, también es sencillo crear enlaces de subnavegación. Después de eliminar el estilo de lista, se quedará con un elemento de elemento en blanco. Desde aquí puede diseñar enlaces de anclaje para que aparezcan como elementos de bloque en su página, completando así un diseño de menú de navegación, y con un poco de código jQuery puede armar un hermoso encabezado para su sitio.

    Lo más común es que encuentre listas desordenadas en medio de artículos web o instrucciones de instalación. Tenga en cuenta que Google y otros robots de búsqueda no procesan el contenido de su página de forma diferente, por lo que su SEO no debería verse afectado, independientemente del tipo de listado que elija .

    Listas ordenadas (
      )

    Cuando necesite pedir un conjunto de datos, es posible configurar su propio marco de diseño desde cero, pero de esta manera deberá agregar cada número de incremento a mano, lo que puede ser tedioso. Las listas ordenadas son excelentes para mantener las tareas numeradas en línea sin ningún tipo de problema. El orden de los elementos de la lista interna (

  • ) dictará cómo se presentan los datos.

    A continuación se muestra el código de ejemplo de la lista ordenada:

    1. Artículo 1
    2. Artículo 2
    3. Artículo 3

    También es posible cambiar el contador de números regulares a un puñado de otras opciones . Estos incluyen letras alfabéticas y números romanos, por nombrar algunos. Los diseñadores web usarían listas ordenadas para listas de contenido específico. Los datos de receta, las tareas diarias, los favoritos o los usuarios que han iniciado sesión son algunos ejemplos. A menudo verá comentarios de blog construidos usando listas ordenadas para mantener cada comentario en una secuencia numerada.

    Listas de definición de datos (
    )

    Las listas de definiciones ya no se ven con mucha frecuencia (no como si fueran populares). Solían verse con diseñadores web que creaban formatos complejos de enlaces o contenido de cuadros. La etiqueta de la lista de datos (

    ) a menudo es incomprendido por los codificadores hoy. En las especificaciones de HTML4.01 se usaron listas de datos para emparejar elementos con sus descripciones . Estas fueron llamadas listas de definiciones.

    A continuación se muestra el código de ejemplo de la lista de definición de datos:

     Artículo 1 
     Descripción 
     Artículo 2 
     Descripción 
     Artículo 3 
     Descripción

    Sin embargo, con las nuevas especificaciones de HTML5, las listas de datos han recibido una transcripción. No existen diferencias con la sintaxis en la forma de usar los elementos, sin embargo, su propósito se ha actualizado como una lista de descripción que consta de uno o más términos de datos (

    ) seguido de una o más definiciones de datos (
    )

    Un buen ejemplo del artículo del Doctor HTML5 es una lista formateada de metadatos . Dentro de un solo elemento dl list definirías un término, como tu nombre, luego cada etiqueta de definición posterior podría describir datos sobre ti, posiblemente tu edad, ocupación, pueblo / ciudad actual, etc. En definitiva cualquier conjunto de datos con clave / valor pares encaja muy bien en una lista de descripción . Puede usar más de un término de datos en una lista, pero W3C establece que cada término debe ser único en la lista.

    Ahora que hemos identificado los 3 estilos de listas populares, pasemos a algunos ejemplos. Los diseñadores web se han vuelto muy creativos con sus listas en los últimos años. He catalogado 7 de mis sitios web favoritos a continuación con un enfoque específico en su uso creativo de listas.

    Navegación de lista desordenada simple

    Los menús de navegación son mucho más simples de construir con técnicas modernas de CSS. Esta es la razón por la cual las listas desordenadas y aun las listas ordenadas se han convertido en una opción popular. Uno de mis ejemplos favoritos de esto aparece en el blog de redes sociales, Mashable.

    Hacia la parte superior de su encabezado, verá 2 juegos principales de enlaces. Directamente en la parte superior de su logotipo hay una pequeña lista desordenada que contiene enlaces de la comunidad, como Historias principales, Temas de tendencia y Personas. El diseñador ha creado un elegante estilo hover que presenta un fondo sólido y una combinación de colores.

    Justo debajo de esto verás sus enlaces de navegación secundarios. Este menú de navegación conduce a categorías de blog como Social Media o Tech. Ambas listas desordenadas están contenidas dentro de un HTML5