Merge pull request #53 from fiji-flo/unslugging-es

Unslugging es

3 files changed, 272 insertions, 0 deletions

diff --git a/files/es/learn/html/howto/author_fast-loading_html_pages/index.html b/files/es/learn/html/howto/author_fast-loading_html_pages/index.html
new file mode 100644
index 0000000000..221875140a
--- /dev/null
+++ b/files/es/learn/html/howto/author_fast-loading_html_pages/index.html
@@ -0,0 +1,54 @@
+---
+title: Consejos para la creación de páginas HTML de carga rápida
+slug: Learn/HTML/Howto/Author_fast-loading_HTML_pages
+tags:
+  - Consejos
+  - HTML
+  - Rapido
+  - Tips
+translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages
+original_slug: Web/HTML/Consejos_para_la_creación_de_páginas_HTML_de_carga_rápida
+---
+<h2 id="Consejos_para_la_creación_de_páginas_HTML_de_carga_rápida">Consejos para la creación de páginas HTML de carga rápida</h2>
+
+<p>Estos consejos estan basados en conocimiento común y experimentación.</p>
+
+<p>Una página web optimizada no solo provee una mayor respuesta a su sitio por parte de los visitantes, sino que también reduce la carga en su servidores web y en su conexión de internet. Esto puede ser crucial para sitios con alto volumen o sitios que tienen un pico de trafico debido a circunstancias inucuales como noticias de ultima hora.</p>
+
+<p>Optimizar la carga de páginas no es solo para el contenido que será visto atraves de una estrecha conexión telefónica o dispositivos móviles. <span id="result_box" lang="es"><span class="hps">Es</span> <span class="hps">tan importante</span> <span class="hps">para el contenido</span> <span class="hps">de banda ancha</span> <span class="hps">y puede conducir a</span> <span class="hps">mejoras espectaculares</span> <span class="hps">incluso</span> <span class="hps">para sus</span> <span class="hps">visitantes con</span> <span class="hps">las conexiones más rápidas</span><span>.</span></span></p>
+
+<h3 id="Consejos">Consejos</h3>
+
+<h4 id="Reducir_el_peso_de_las_páginas_web">Reducir el peso de las páginas web</h4>
+
+<p>El peso de las páginas web es por mucho el factor más importante en el rendimiento de carga de una página.</p>
+
+<p>Reducir el peso de la página mediante la eliminación de espacios en blanco innecesarios y comentarios, comunmente se coonoce como minimalización, y al mover "inline-script" y "CSS" a un archivo externo, puede mejorar el rendimiento de la descarga con minimas necesidades de otros cambios en la estructura de la página.</p>
+
+<p>Herramientas como <a class="external external-icon" href="http://tidy.sourceforge.net/">HTML Tidy</a> pueden <span id="result_box" lang="es"><span class="hps">quitar</span> <span class="hps">automáticamente</span> <span class="hps">espacios en blanco</span> <span class="hps">y las líneas</span> <span class="hps">en blanco adicionales</span> <span class="hps">de</span> <span class="hps">código fuente HTML valido</span><span class="hps">. Otras herramientas pueden "comprimir"</span></span> JavaScript al reformatear el codigo fuente o <span id="result_box" lang="es"><span class="hps">por</span> <span class="alt-edited hps">ofuscación</span> <span class="hps">la fuente</span> <span class="hps">y la sustitución de</span> <span class="hps">los identificadores largos con versiones mas cortas.</span></span></p>
+
+<h3 id="Minimizar_el_número_de_archivos">Minimizar el número de archivos</h3>
+
+<p>Reducir el número de archivos referentes en una pagina web baja el número de conexiones <a href="https://developer.mozilla.org/en-US/docs/HTTP" title="en-US/docs/HTTP">HTTP</a> requeridas para bajar la página.</p>
+
+<p>Dependiendo de la configuración de cache de un navegador, puede enviar una petición <span id="result_box" lang="es"><span class="hps">"If</span><span>-Modified-Since"</span></span> al servidor web para cada "CSS", JavaScript o archivo de imágen, preguntando si el archivo ha sido modificado desde la ultima vez que fué descargado.</p>
+
+<p>Al reducir el número de archivos que son refereciados dentro de una página web, <span id="result_box" lang="es"><span class="hps">se reduce el</span> <span class="hps">tiempo necesario para que</span> <span class="hps">estas solicitudes</span> <span class="hps">se envíen</span><span>,</span> <span class="hps">y</span> <span class="hps">para que  sus</span> <span class="hps">respuestas</span> <span class="hps">que se reciban</span><span>.</span></span></p>
+
+<p>Si se usan muchas imágenes de fondo en sus "CSS", puedes reducir la cantidad de busquedas HTTP necesarias al combinar las imagenes en una, conocido como "image sprite". Luego solamente <span id="result_box" lang="es"><span class="hps">se aplica la</span> <span class="hps">misma imagen</span> <span class="hps">cada</span> <span class="hps">vez que lo necesite</span> <span class="hps">para un fondo,</span> <span class="hps">ajustando las coordenadas el eje (X / Y</span></span>) adecuadamente. Estas técnica trabaja mejor con elementos que tendrán dimensiones limitadas, no funcionará para todos los usos de imagenes de fondo, sin embargo, la menor cantidad de pedidos HTTP y el uso de una única imágen en caché puede reducir el timepo de carga de una página.</p>
+
+<p>Demasiado tiempo gastado en consultar la ultima modificación de los archivos referenciados puede demorar la pantalla inicial de una página web, <span id="result_box" lang="es"><span class="hps">ya que el</span> <span class="hps">explorador debe</span> <span class="hps">comprobar</span> <span class="hps">la fecha de modificación</span> <span class="hps">de cada</span> <span class="hps">archivo</span> <span class="hps">CSS o</span> <span class="hps">JavaScript</span><span>, antes de pintar la página.</span></span></p>
+
+<h3 id="Reducir_la_busqueda_de_dominios">Reducir la busqueda de dominios</h3>
+
+<p>Debido a que cada dominio separado cuesta tiempo en una busqeuda DNS, el tiempo de carga de la página crecerá junto con el número de dominios <span id="result_box" lang="es"><span class="hps">que aparecen en</span> <span class="hps">enlace</span> <span class="hps">CSS</span> <span class="atn hps">(</span><span>s</span><span>)</span>, <span class="hps"> JavaScript</span> <span class="hps">y</span> <span class="hps">recursos de</span> <span class="hps">imagen.</span></span></p>
+
+<p>Esto no puede ser siempre práctico; sin embargo <span id="result_box" lang="es"><span class="hps">siempre se debe</span> <span class="hps">tener cuidado de usar</span> <span class="hps">sólo el número</span> <span class="hps">mínimo necesario</span> <span class="hps">de los diferentes dominios</span> <span class="hps">en</span> <span class="hps">sus páginas</span></span>.</p>
+
+<h3 id="Reutilización_de_contenido_de_cache">Reutilización de contenido de cache</h3>
+
+<p><span id="result_box" lang="es"><span class="hps">Asegúrese de que cualquier</span> <span class="hps">contenido que se pueden</span> <span class="hps">almacenar en caché</span><span>,</span> <span class="hps">se almacena en caché</span><span>,</span> <span class="hps">y</span> <span class="hps">con</span> <span class="hps">fechas de caducidad</span> <span class="hps">correspondientes.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">En particular</span><span>,</span> <span class="hps">prestar atención a la</span> <span class="hps">cabecera</span></span> "<code>Last-Modified</code>". Permite el eficiente almacenamiento en cache de la página; <span id="result_box" lang="es"><span class="hps">por medio de</span> <span class="hps">esta cabecera</span><span>, la información</span> <span class="hps">se transmite al</span> <span class="hps">agente de usuario</span> <span class="hps">sobre el archivo</span> <span class="hps">que quiere</span> <span class="hps">cargar</span><span>,</span> <span class="hps">por ejemplo, </span></span><span id="result_box" lang="es"><span class="hps">como cuando</span> <span class="hps">fue</span> <span class="hps">modificada por última vez</span><span>.</span> <span class="hps">La mayoría de los</span> <span class="hps">servidores web</span> <span class="hps">añadirá automáticamente</span> <span class="hps">la</span> <span class="hps">cabecera Last-Modified</span> <span class="hps">para</span> <span class="hps">páginas estáticas</span> <span class="hps">(por ejemplo</span> <span class="hps">.html</span><span>,</span> <span class="hps">.css</span><span>)</span><span>,</span></span> <span id="result_box" lang="es"><span class="hps">basado en</span> <span class="hps">la</span> <span class="hps">fecha de última modificación</span> <span class="hps">almacenada en</span> <span class="hps">el sistema de archivos</span><span>.</span> <span class="hps">Con</span> <span class="hps">páginas dinámicas</span> <span class="hps">(por ejemplo,</span> <span class="hps">.php</span><span>,</span> <span class="hps">.aspx</span><span>)</span><span>,</span> <span class="hps">esto, por supuesto</span><span>,</span> <span class="hps">no se puede hacer</span><span>, y</span> <span class="hps">la cabecera</span> <span class="hps">no se envía</span><span>.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">Así</span><span>,</span> <span class="hps">en particular</span> <span class="hps">para las páginas</span> <span class="hps">que se generan</span> <span class="hps">de forma dinámica</span><span>,</span> <span class="hps">un poco de investigación</span> <span class="hps">sobre este tema es</span> <span class="hps">beneficioso.</span> <span class="hps">Puede ser</span> <span class="hps">un poco</span> <span class="hps">complicada, pero</span> <span class="hps">se ahorrará mucho</span> <span class="hps">en</span> <span class="hps">las solicitudes de página</span> <span class="hps">en las páginas</span> <span class="hps">que</span> <span class="hps">normalmente no serían</span> <span class="hps">cacheable</span><span>.</span></span></p>
diff --git a/files/es/learn/html/howto/index.html b/files/es/learn/html/howto/index.html
new file mode 100644
index 0000000000..4717432b11
--- /dev/null
+++ b/files/es/learn/html/howto/index.html
@@ -0,0 +1,142 @@
+---
+title: Solución de problemas comunes de HTML
+slug: Learn/HTML/Howto
+tags:
+  - CodificacióndeSecuenciadeComandos
+  - HTML
+translation_of: Learn/HTML/Howto
+original_slug: Learn/HTML/como
+---
+<p>{{LearnSidebar}}</p>
+
+<p class="summary">Los siguientes enlaces brindan soluciones puntuales a los problemas más comunes a los que te enfrentarás a diario en HTML.</p>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Estructura_básica">Estructura básica</h3>
+
+<p>La principal aplicación de HTML es la estructuración del documento. Si eres nuevo en HTML debes empezar aquí.</p>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">Cómo crear un documento HTML básico</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Divide_a_webpage_into_logical_sections">Cómo dividir una página web en secciones lógicas</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#The_basics_headings_and_paragraphs">Cómo establecer una estructura adecuada de encabezados y párrafos</a></li>
+</ul>
+
+<h3 id="Semántica_básica_textos">Semántica básica textos</h3>
+
+<p>HTML se especializa en suministrar información semántica del documento, así que HTML soluciona muchas dudas que puede tener sobre como transmitir su mensaje a través de un documento.</p>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">Cómo crear una lista de elementos con HTML</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">Cómo enfatizar o acentuar contenido</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">Cómo indicar qué texto es importante</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Representing_computer_code">Cómo muestra el ordenador el codigo HTML</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Annotating_images_with_figures_and_figure_captions">Cómo comentar imagenes y gráficas</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations">Cómo marcar abreviaturas y hacerlas entendibles</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Quotations">Cómo añadir citas y referencias a sitios web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Define_terms_with_HTML">Cómo definir términos con HTML</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Hipervínculos">Hipervínculos</h3>
+
+<p>Uno de las principales razones por las que HTML hace más fácil la navegación son los {{Glossary("hyperlink", "hipervínculos")}}, que pueden ser usados de diferentes formas:</p>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu">Cómo crear un hipervínculo</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu">Cómo crear una tabla de contenidos con HTML</a></li>
+</ul>
+
+<h3 id="Imágenes_y_multimedia">Imágenes y multimedia</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu">Cómo</a><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage"> añadir imagenes al sitio web</a></li>
+ <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu">Cómo</a><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content"> añadir contenidos de video al sitio web</a></li>
+</ul>
+
+<h3 id="Scripts_y_estilización">Scripts y estilización</h3>
+
+<p>HTML únicamente define la estructura del documento. Para solucionar los problemas de presentación usamos {{glossary("CSS")}}, o usamos scripts para hacer la página interactiva.</p>
+
+<ul>
+ <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">Cómo usar CSS dentro de un sitio web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage">Cómo usar JavaScript dentro de un sitio web</a></li>
+</ul>
+
+<h3 id="Contenido_integrado">Contenido integrado</h3>
+
+<ul>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Cómo integrar una página web dentro de otra</a></li>
+ <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements">Cómo integrar contenido Flash </a><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">dentro de </a><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements">una página web</a></li>
+</ul>
+</div>
+</div>
+
+<h2 id="Problemas_avanzados_o_raros">Problemas avanzados o raros</h2>
+
+<p>Más allá de lo basico, HTML es muy rico y ofrece características avanzadas para solucionar problemas complejos. Estos artículos te ayudarán a abordar estos casos menos comunes:</p>
+
+<div class="column-container">
+<div class="column-half">
+<h3 id="Formularios">Formularios</h3>
+
+<p>Los formularios son una estructura compleja en HTML para enviar datos desde una pagina web al servidor. Te animamos a que revises la <a href="/en-US/docs/Web/Guide/HTML/Forms">guia completa</a>. Aquí es por donde deberías empezar:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form">Cómo crear un formulario Web simple</a></li>
+ <li><a href="/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form">Cómo estructurar un formulario Web</a></li>
+</ul>
+
+<h3 id="Información_tabular">Información tabular</h3>
+
+<p>Alguna información, llamada datos tabulares, necesita ser organizada en tablas mediante filas y columnas. Siendo ésta una de las estructuras más complejas de HTML, no es fácil dominarla:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_a_data_spreadsheet">Cómo crear una tabla de datos</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Make_HTML_tables_accessible">Cómo hacer tablas HTML accesibles</a></li>
+</ul>
+
+<h3 id="Representación_de_datos">Representación de datos</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTMLHowto/Represent_numeric_values_with_HTML">Cómo representar valores numericos y de código con HTML -</a> <span class="tlid-translation translation" lang="es"><span title="">ver </span></span> <span class="tlid-translation translation" lang="es"><span title="">Superíndice y Subíndice, y Representación del código de la computadora.</span></span></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Associate_human_readable_content_with_arbitrary_computer_data_structures">Cómo usar atributos de datos</a></li>
+</ul>
+
+<h3 id="Rendimiento">Rendimiento</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Create_collapsible_content_with_HTML">Cómo crear páginas HTML de carga rápida</a></li>
+</ul>
+</div>
+
+<div class="column-half">
+<h3 id="Semántica_avanzada_de_texto">Semántica avanzada de texto</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Take_control_of_HTML_line_breaking">Cómo controlar el salto de línea en HTML</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Mark_text_insertion_and_deletion">Cómo marcar cambios (agregar y remover textos)</a> -ver los elementos {{htmlelement("ins")}} y {{htmlelement("del")}}</li>
+</ul>
+
+<h3 id="Imágenes_y_multimedia_avanzada">Imágenes y multimedia avanzada</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Cómo agregar una imagen receptiva a una página web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Cómo agregar una imagen vectorial a una página web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Cómo agregar un mapa de visitas sobre una imagen</a></li>
+</ul>
+
+<h3 id="Internacionalización">Internacionalización</h3>
+
+<p>HTML no es monolingüe. Éste <span class="tlid-translation translation" lang="es"><span title="">proporciona herramientas para manejar problemas comunes de internacionalización.</span></span></p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Add_multiple_languages_into_a_single_webpage">Cómo agregar multiples lenguajes en una misma página web</a></li>
+ <li><a href="/en-US/docs/Learn/HTML/Howto/Display_time_and_date_with_HTML">Cómo mostrar hora y fecha con HTML </a></li>
+</ul>
+</div>
+</div>
+
+<p><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span> </p>
diff --git a/files/es/learn/html/howto/use_data_attributes/index.html b/files/es/learn/html/howto/use_data_attributes/index.html
new file mode 100644
index 0000000000..711d56f256
--- /dev/null
+++ b/files/es/learn/html/howto/use_data_attributes/index.html
@@ -0,0 +1,76 @@
+---
+title: Uso de atributos de datos
+slug: Learn/HTML/Howto/Use_data_attributes
+translation_of: Learn/HTML/Howto/Use_data_attributes
+original_slug: Learn/HTML/como/Usando_atributos_de_datos
+---
+<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>