1 files changed, 75 insertions, 0 deletions
diff --git a/files/es/learn/html/como/usando_atributos_de_datos/index.html b/files/es/learn/html/como/usando_atributos_de_datos/index.html
new file mode 100644
index 0000000000..7629974833
--- /dev/null
+++ b/files/es/learn/html/como/usando_atributos_de_datos/index.html
@@ -0,0 +1,75 @@
+---
+title: Uso de atributos de datos
+slug: Learn/HTML/como/Usando_atributos_de_datos
+translation_of: Learn/HTML/Howto/Use_data_attributes
+---
+<div>{{LearnSidebar}}</div>
+
+<p><a href="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a> está diseñado de forma tal que sea fácil extender los datos asociados a un elemento en particular sin necesidad de que tengan un significado definido. Los atributos <a href="/en-US/docs/Web/HTML/Global_attributes#attr-dataset"><code>data-* </code></a> permiten almacenar información adicional sobre un elemento HTML cualquiera sin tener que recurrir a artilugios tales como la utilización de atributos no estándar, propiedades adicionales en el DOM o {{domxref("Node.setUserData()")}}.</p>
+
+<h2 id="Sintaxis_HTML">Sintaxis HTML</h2>
+
+<p>La sintáxis es simple. Un atributo cualquiera cuyo nombre comience con <code>data-</code>es un atributo de datos. Supongamos que tenemos un artículo y deseamos almacenar información adicional que no tiene ninguna representación visual. En ese caso, alcanza con que hagamos uso de los atributos <code>data</code>:</p>
+
+<pre class="brush: html notranslate">&lt;article
+  id="electriccars"
+  data-columns="3"
+  data-index-number="12314"
+  data-parent="cars"&gt;
+...
+&lt;/article&gt;</pre>
+
+<h2 id="Acceso_a_través_de_JavaScript">Acceso a través de JavaScript</h2>
+
+<p>Leer los valores de estos atributos en <a href="/en-US/docs/Web/JavaScript">JavaScript</a> también es muy sencillo. Puede usar {{domxref("Element.getAttribute", "getAttribute()")}} con su nombre HTML completo para leerlos, pero el estándar define una forma más simple: un {{domxref("DOMStringMap")}} puede leer a través de una propiedad {{domxref("HTMLElement.dataset", "dataset")}}.</p>
+
+<p>Para obtener un atributo <code>data</code> a través del <code>dataset</code> del objeto, obtenga la propiedad por la parte del nombre del atributo despues de <code>data-</code> (tenga en cuenta que los guiones son convertidos en camelCase).</p>
+
+<pre class="brush: js notranslate">var article = document.getElementById('electriccars');
+
+article.dataset.columns // "3"
+article.dataset.indexNumber // "12314"
+article.dataset.parent // "cars"</pre>
+
+<p>Cada propiedad es una cadena y se puede leer y escribir. En el caso anterior, establecer <code>article.dataset.columns = 5</code> cambiaría ese atributo a <code>"5"</code>.</p>
+
+<h2 id="Acceso_a_través_de_CSS">Acceso a través de CSS</h2>
+
+<p>Tenga en cuenta que, debido a que los atributos de datos son atributos simples de HTML, incluso puede acceder a ellos desde <a href="/en-US/docs/Web/CSS">CSS</a>. Por ejemplo, para mostrar los <code>data-parent</code> en el artículo, puede usar el <a href="/en-US/docs/Web/CSS/content">contenido generado</a> en CSS con la función {{cssxref("attr")}}:</p>
+
+<pre class="brush: css notranslate">article::before {
+  content: attr(data-parent);
+}</pre>
+
+<p>También puede usar los <a href="/en-US/docs/Web/CSS/Attribute_selectors">selectores de atributos</a> en CSS para cambiar los estilos de acuerdo a las priopiedades de datos:</p>
+
+<pre class="brush: css notranslate">article[data-columns='3'] {
+  width: 400px;
+}
+article[data-columns='4'] {
+  width: 600px;
+}</pre>
+
+<p>Puede ver todo esto trabajando junto <a href="http://jsbin.com/ujiday/2/edit">en este ejemplo de JSBin</a>.</p>
+
+<p>Los atributos de datos también se pueden almacenar para que contengan información que cambia constantemente, como los puntajes en un juego. Usando los selectores de CSS y el acceso a JavaScript aquí, esto le permite crear algunos efectos ingeniosos sin tener que escribir sus propias rutinas de visualización. Consulte <a href="http://www.youtube.com/watch?v=On_WyUB1gOk">este screencast</a> para ver un ejemplo utilizando contenido generado y transacciones CSS (<a href="http://jsbin.com/atawaz/3/edit">Ejemplo JSBin</a>).</p>
+
+<p>Los valores de datos son cadenas de caracteres. Los valores numéricos deben ser citados en el selector para que el estilo surta efecto.</p>
+
+<h2 id="Problemas">Problemas</h2>
+
+<p>No almacene el contenido que debería ser visible y accesible en los atributos de datos, ya que las tecnologías de asistencia, no pueden acceder a ellos. Ademas, los rastreadores de búsqueda no pueden indexar los valores de los atributos de datos.</p>
+
+<p>Los principales problemas a considerar son el soporte y rendimiento en Internet Explorer. Internet Explorer 11 y superiores, proporcionan soporte para el estándar, pero todas las versiones anteriores <a href="http://caniuse.com/#feat=dataset">no son compatibles con <code>dataset</code></a>. Para admitir IE 10 e inferiores, debe acceder a los atributos de datos con {{domxref("Element.getAttribute", "getAttribute()")}} en su lugar. Ademas, el <a href="http://jsperf.com/data-dataset">rendimiento de lectura de los atributos de datos</a> en comparación con el almacenamiento de estos datos en un objeto JS normal es deficiente.</p>
+
+<p>Dicho esto, sin embargo, para metadatos asociados a elementos personalizados, son una gran solución.</p>
+
+<p>En Firefox 49.0.2 (y quizás versiones anteriores), los atributos de datos que exceden los 1022 caracteres no serán leídos por Javascript (EcmaScript 4).</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Este artículo es una adaptación de <a href="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/" title="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/">Usando atributos de datos en JavaScript y CSS en hacks.mozilla.org</a>.</li>
+ <li>Los atributos personalizados también son compatibles en SVG 2; vea {{domxref("SVGElement.dataset")}} y {{SVGAttr("data-*")}} para más información.</li>
+ <li><a href="http://www.sitepoint.com/use-html5-data-attributes/">Cómo utilizar atributos de datos HTML5</a></li>
+</ul>