<?xml version="1.0" encoding="utf-8"?>
<page xmlns="http://projectmallard.org/1.0/" type="topic" id="lists" xml:lang="es">

  <info>
    <link type="guide" xref="patterns" group="lists"/>   
    <credit type="author">
      <name>Allan Day</name>
      <email>aday@gnome.org</email>
    </credit>
    <include xmlns="http://www.w3.org/2001/XInclude" href="legal.xml"/>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Daniel Mustieles</mal:name>
      <mal:email>daniel.mustieles@gmail.com</mal:email>
      <mal:years>2011 - 2014</mal:years>
    </mal:credit>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Nicolás Satragno</mal:name>
      <mal:email>nsatragno@gnome.org</mal:email>
      <mal:years>2013</mal:years>
    </mal:credit>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Benjamín Valero Espinosa</mal:name>
      <mal:email>benjavalero@gmail.com</mal:email>
      <mal:years>2011</mal:years>
    </mal:credit>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Jorge González</mal:name>
      <mal:email>jorgegonz@svn.gnome.org</mal:email>
      <mal:years>2009</mal:years>
    </mal:credit>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Rosa Elena Pérez</mal:name>
      <mal:email>rozydicemiau@gmail.com</mal:email>
      <mal:years>2014</mal:years>
    </mal:credit>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Oscar Rafael Arachi</mal:name>
      <mal:email>arachi910@gmail.com</mal:email>
      <mal:years>2014</mal:years>
    </mal:credit>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Miguel Ajuech</mal:name>
      <mal:email>miguel.ann.28@gmail.com</mal:email>
      <mal:years>2014</mal:years>
    </mal:credit>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Adrián Pérez Domínguez</mal:name>
      <mal:email>adrian@aztli.org</mal:email>
      <mal:years>2015</mal:years>
    </mal:credit>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Celina Osorio Ochoa</mal:name>
      <mal:email>chelinoska@gmail.com</mal:email>
      <mal:years>2015</mal:years>
    </mal:credit>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Dario Amigon Espinoza</mal:name>
      <mal:email>daramigon@gmail.com</mal:email>
      <mal:years>2015</mal:years>
    </mal:credit>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Yenisei Ramírez Pérez</mal:name>
      <mal:email>yeniseirape@gmail.com</mal:email>
      <mal:years>2015</mal:years>
    </mal:credit>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>José Roberto Ramíres Mendoza</mal:name>
      <mal:email>aczella@gmail.com</mal:email>
      <mal:years>2015</mal:years>
    </mal:credit>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Bernardo Sánchez Romero</mal:name>
      <mal:email>b.sanchez.rom@gmail.com</mal:email>
      <mal:years>2015</mal:years>
    </mal:credit>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Emmanuel Márquez Juárez</mal:name>
      <mal:email>resident3333@gmail.com</mal:email>
      <mal:years>2015</mal:years>
    </mal:credit>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>David Romero Serrano</mal:name>
      <mal:email>lemi136@hotmail.com</mal:email>
      <mal:years>2015</mal:years>
    </mal:credit>
  
    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">
      <mal:name>Omar Garcia Guzman</mal:name>
      <mal:email>garciag.omar91@gmail.com</mal:email>
      <mal:years>2015</mal:years>
    </mal:credit>
  </info>

<title>Listas</title>

<p>Lists are a basic user interface element that can be used to present information, content items, or controls. There are two primary types of list in GNOME 3: standard lists and tables.</p>

<p><link xref="sidebar-lists">Sidebar lists</link> are a separate design pattern which also make use of a list.</p>

<section id="when-to-use">
<title>Cuándo usarlas</title>

<p>A list is an appropriate way to present content items that have a distinct name as their primary identifier. If the content is visual in nature, such as with photos or videos, you might want to consider using a <link xref="grids">grid</link> instead.</p>

<p>In some cases, it is advantageous to show both a list and a grid view for the same content items. Used in this way, a list view allows additional information to be displayed about the content through columns of information.</p>

</section>

<section id="standard-lists">
<title>Standard lists</title>

<p>Standard lists are most common list type, and should generally be used in favor of tables.</p>

<p>In standard lists, each row is divided by separators, and changing the sort order is acheived by using a control outside the list itself.</p>

<section id="styles">
<title>Estilos</title>

<p>Standard lists have two styles: full-width and embedded. Full-width lists fill their container, while embedded lists are surrounded by padding.</p>

<p>Full-width lists are visually simpler, and therefore more elegant. They should be used where possible. At the same time, it is not always possible to use a full-width list, and there are some situations where embedded lists are a better choice:</p>

<list>
<item><p>When the list contains columns of information that need to be kept close together for readability purposes, and there is a need to have the list inside a wide container.</p></item>
<item><p>When a window contains several lists.</p></item>
<item><p>When the list needs to be aligned with other controls inside the window.</p></item>
</list>

<media type="image" mime="image/svg" src="figures/patterns/list-styles.svg"/>

</section>

<section id="editable-lists">
<title>Editable lists</title>

<p>Editable lists allow a user to add or remove items from the list (for this reason, they are sometimes known as add/remove lists). Both full-width and embedded lists can be editable.</p>

<p>Each row contains a remove button. If the number of items is short, the final list row should be used as an add button. Alternatively, if the list is long, the add button can be placed in a <link xref="header-bars">header bar</link> or or <link xref="action-bars">action bar</link>.</p>

<media type="image" mime="image/svg" src="figures/patterns/editable-lists.svg"/>

</section>
</section>

<section id="tables">
<title>Tablas</title>

<p>Tables can be used for more complex multi-column lists, where sorting the table by a variety of columns is common. Column headers allow people to identify the type of information in each column and to reorder the list according to the content of each column.</p>

<p>Al usar encabezados de columnas, indique el orden usando las flechas en el encabezado.</p>

<table>
<thead>
<tr>
<td><p>Orden</p></td>
<td><p>Dirección de la flecha</p></td>
<td><p>Ejemplo</p></td>
</tr>
</thead>
<tbody>
<tr>
<td><p>Natural</p></td>
<td><p>Abajo</p></td>
<td><p>Alfabético, número más pequeño primero, fecha más antigua primero, elementos marcados primero</p></td>
</tr>
<tr>
<td><p>Invertido</p></td>
<td><p>Arriba</p></td>
<td><p>Alfabético invertido, número más grande primero, fecha más reciente primero, elementos sin marcar primero</p></td>
</tr>
</tbody>

</table>

</section>

<section id="row-behavior">
<title>Comportamiento de la fila</title>

<p>Dependiendo del tipo de lista, las filas tienen diferente comportamiento cuando ellas se seleccionan o pulsan con el botón del ratón. En este sentido, hay tres tipos de listas:</p>

<table>
<thead>
<tr>
<td><p>Tipo de lista</p></td>
<td><p>Comportamiento de la fila</p></td>
</tr>
</thead>
<tbody>
<tr>
<td><p>Navegación</p></td>
<td><p>Selecting a row opens the corresponding item, whether it is by browsing to a new view or opening a dialog. This pattern is common for lists of content items, or for presenting groups of settings.</p></td>
</tr>
<tr>
<td><p>Select</p></td>
<td><p>The list item is selected when it is clicked or pressed. This approach is often used for selecting one of a series of configuration options. In the case of <link xref="drop-down-lists">drop-down lists</link>, one option is always selected. The selected row is indicated by a check mark.</p></td>
</tr>
<tr>
<td><p>Editar</p></td>
<td><p>Selecting the row item turns the row into a text entry field, which allows the item to be edited.</p></td>
</tr>
</tbody>
</table>

<p>Navigation style lists can be combined with <link xref="selection-mode">selection mode</link> in order to allow rows to be both opened and manipulated. Using double-click to open list items should be avoided, since it is undiscoverable and is incompatible with touch input.</p>

</section>

<section id="general-guidelines">
<title>General guidelines</title>

<list>
<item><p>Differentiate the different types of information using different alignments, <link xref="typography">text colors and weights</link>. Highlight the most important and relevant information by giving other information a lighter weight and/or color.</p></item>
<item><p>Be careful not to overpopulate lists with different columns and elements, and ensure that you only use them to present essential information.</p></item>
<item><p>As a rule of thumb, avoid using several lists in the same window, particularly primary windows.</p></item>
<item><p>Do not use lists with fewer than about five items, unless the number of items may increase over time. For options lists, check boxes or radio buttons can be used as an alternative in this case.</p></item>
<item><p>Ensure that lists are ordered to be helpful to those who are using them. Recent documents might be more useful than alphabetically ordered documents, or contacts that are online might be more interesting than those who are offline, for example.</p></item>
<item><p>If you use icons in your list, <link xref="icons-and-artwork">use symbolic icons</link>. The lower visual footprint of these icons will mean that they do not visually overload or dominate your list.</p></item>
<item><p>If the list is long, make it possible to search it using the standard <link xref="search">search design pattern</link>.</p></item>
</list>

</section>
</page>
